Ver código fonte

Improved special characters grid styles to prevent rendering issues. Improved the look of grid tiles for better readability.

Aleksander Nowodzinski 6 anos atrás
pai
commit
bf06a27de1

+ 9 - 4
packages/ckeditor5-theme-lark/theme/ckeditor5-special-characters/charactergrid.css

@@ -10,17 +10,22 @@
 }
 
 .ck.ck-character-grid {
-	grid-gap: 5px;
-	padding: 8px;
-	max-height: calc(var(--ck-character-grid-tile-size) * 6);
 	overflow-y: auto;
 	overflow-x: hidden;
+	width: 350px;
+	max-height: 200px;
+
+	& .ck-character-grid__tiles {
+		margin: var(--ck-spacing-standard);
+		grid-gap: var(--ck-spacing-standard);
+	}
 
 	& .ck-character-grid__tile {
 		width: var(--ck-character-grid-tile-size);
 		height: var(--ck-character-grid-tile-size);
 		min-width: var(--ck-character-grid-tile-size);
 		min-height: var(--ck-character-grid-tile-size);
+		font-size: 1.2em;
 		padding: 0;
 		transition: .2s ease box-shadow;
 		border: 0;
@@ -34,7 +39,7 @@
 
 		/* Make sure the glyph is rendered in the center of the button */
 		& .ck-button__label {
-			line-height: inherit;
+			line-height: var(--ck-character-grid-tile-size);
 			width: 100%;
 			text-align: center;
 		}