@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-special-characters/charactergrid.css

A bright theme for CKEditor 5.

/*
 * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
 * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
 */

@import "@ckeditor/ckeditor5-ui/theme/mixins/_rwd.css";
@import "../mixins/_rounded.css";

:root {
	--ck-character-grid-tile-size: 24px;
}

.ck.ck-character-grid {
	overflow-y: auto;
	overflow-x: hidden;

	& .ck-character-grid__tiles {
		grid-template-columns: repeat(auto-fill, minmax(var(--ck-character-grid-tile-size), 1fr));
		margin: var(--ck-spacing-standard) var(--ck-spacing-large);
		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.5em;
		padding: 0;
		transition: .2s ease box-shadow;
		border: 0;

		@media (prefers-reduced-motion: reduce) {
			transition: none;
		}

		&:focus:not( .ck-disabled ),
		&:hover:not( .ck-disabled ) {
			/* Disable the default .ck-button's border ring. */
			border: 0;
			box-shadow: inset 0 0 0 1px var(--ck-color-base-background), 0 0 0 2px var(--ck-color-focus-border);
		}

		/* Make sure the glyph is rendered in the center of the button */
		& .ck-button__label {
			line-height: var(--ck-character-grid-tile-size);
			width: 100%;
			text-align: center;
		}
	}
}