@ckeditor/ckeditor5-special-characters 0.0.0-internal-20241017.0

package/theme/specialcharacters.css

@@ -0,0 +1,91 @@
+/*
+ * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/*
+ * Note: This file should contain the wireframe styles only. But since there are no such styles,
+ * it acts as a message to the builder telling that it should look for the corresponding styles
+ * **in the theme** when compiling the editor.
+ */
+
+@import "@ckeditor/ckeditor5-ui/theme/mixins/_rwd.css";
+
+.ck.ck-special-characters {
+	& > .ck-dialog__content > div {
+		width: 350px;
+		max-width: 100%;
+		height: 100%;
+
+		display: grid;
+		grid-column-gap: 0px;
+		grid-row-gap: 0px;
+		grid-template-columns: 1fr;
+		grid-template-rows: auto 1fr auto;
+
+		& > .ck-character-categories {
+			grid-area: 1 / 1 / 2 / 2;
+			padding: var(--ck-spacing-medium) var(--ck-spacing-large);
+
+			& > .ck-labeled-field-view {
+				padding-top: var(--ck-spacing-standard);
+				width: 100%;
+
+				& .ck.ck-labeled-field-view__status {
+					background: var(--ck-color-base-error);
+					color: var(--ck-color-base-background);
+					padding: var(--ck-spacing-small) var(--ck-spacing-medium);
+					min-width: var(--ck-table-properties-min-error-width);
+					text-align: center;
+
+					/* The arrow pointing towards the field. */
+					&::after {
+						border-color: transparent transparent var(--ck-color-base-error) transparent;
+						border-width: 0 var(--ck-table-properties-error-arrow-size) var(--ck-table-properties-error-arrow-size) var(--ck-table-properties-error-arrow-size);
+						border-style: solid;
+					}
+
+					animation: ck-table-form-labeled-view-status-appear .15s ease both;
+
+					@media (prefers-reduced-motion: reduce) {
+						animation: none;
+					}
+				}
+
+				/* Hide the error balloon when the field is blurred. Makes the experience much more clear. */
+				& .ck-input.ck-error:not(:focus) + .ck.ck-labeled-field-view__status {
+					display: none;
+				}
+
+				& > .ck-label {
+					font-size: var(--ck-font-size-tiny);
+					text-align: center;
+				}
+			}
+
+			.ck-dropdown {
+				display: block;
+				width: 100%;
+
+				& > button {
+					&:not(:focus) {
+						border: 1px solid var(--ck-color-base-border);
+					}
+
+					& > span {
+						width: 100%;
+					}
+				}
+			}
+		}
+
+		& > .ck-character-grid {
+			grid-area: 2 / 1 / 3 / 2;
+			max-height: 200px;
+		}
+
+		& > .ck-character-info {
+			grid-area: 3 / 1 / 4 / 2;
+		}
+	}
+}