@ckeditor/ckeditor5-theme-lark
Version:
A bright theme for CKEditor 5.
41 lines (34 loc) • 1.1 kB
CSS
/*
* 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
*/
:root {
--ck-list-style-button-size: 44px;
}
.ck.ck-list-styles-list {
grid-template-columns: repeat( 3, auto );
row-gap: var(--ck-spacing-medium);
column-gap: var(--ck-spacing-medium);
padding: var(--ck-spacing-large);
& .ck-button {
/* Make the button look like a thumbnail (the icon "takes it all"). */
width: var(--ck-list-style-button-size);
height: var(--ck-list-style-button-size);
padding: 0;
/*
* Buttons are aligned by the grid so disable default button margins to not collide with the
* gaps in the grid.
*/
margin: 0;
/*
* Make sure the button border (which is displayed on focus, BTW) does not steal pixels
* from the button dimensions and, as a result, decrease the size of the icon
* (which becomes blurry as it scales down).
*/
box-sizing: content-box;
& .ck-icon {
width: var(--ck-list-style-button-size);
height: var(--ck-list-style-button-size);
}
}
}