style(next)/restyle CKEditor: overhaul the appearance

This commit is contained in:
Adorian Doran 2025-04-17 23:09:25 +03:00
parent b3384a538c
commit c8a3ce4298

View File

@ -1,18 +1,47 @@
/*
* TEXT NOTES
* CKEDITOR
*/
/*
* CKEditor's Dropdowns
* Toolbar
*/
.ck.ck-toolbar {
--ck-color-toolbar-background: transparent;
--ck-color-button-default-background: transparent;
--ck-color-button-default-hover-background: var(--hover-item-background-color);
--ck-color-button-default-disabled-background: transparent;
--ck-color-button-on-background: transparent;
--ck-color-button-on-hover-background: var(--hover-item-background-color);
--ck-focus-ring: 1px solid var(--input-focus-outline-color);
--ck-color-focus-border: var(--input-focus-outline-color);
--ck-focus-outer-shadow: none;
--ck-border-radius: 6px;
}
/* Disabled button */
:root .classic-toolbar-widget .ck.ck-button.ck-disabled {
opacity: .75;
}
/*
* Dropdowns
*/
/* Dropdown body */
:root .ck.ck-dropdown__panel,
:root .ck.ck-balloon-rotator {
:root .ck-balloon-panel {
--ck-color-panel-background: var(--menu-background-color);
--ck-color-panel-border: var(--modal-border-color);
box-shadow: 0px 10px 20px rgba(0, 0, 0, var(--dropdown-shadow-opacity));
border: 1px solid var(--dropdown-border-color);
border-radius: var(--dropdown-border-radius);
background: var(--menu-background-color);
border: 1px solid var(--modal-border-color) !important;
border-radius: var(--dropdown-border-radius) !important;
background: var(--menu-background-color) !important;
backdrop-filter: var(--dropdown-backdrop-filter);
padding: var(--menu-padding-size);
}
@ -27,7 +56,6 @@
:root ul.ck.ck-list button.ck-button {
padding: 2px 16px;
background: transparent;
border: unset;
border-radius: 6px !important;
box-shadow: unset;
}
@ -43,6 +71,29 @@
color: var(--hover-item-color);
}
/* Color picker dropdown */
/* Color picker button */
:root .ck.ck-color-selector .ck-color-grids-fragment .ck-button.ck-color-selector__color-picker {
--ck-color-base-border: transparent; /* Remove the top border */
border-bottom-left-radius: var(--ck-border-radius);
border-bottom-right-radius: var(--ck-border-radius);
}
/* Table dropdown */
.ck-insert-table-dropdown__grid {
--ck-color-base-border: var(--ck-color-panel-border); /* Cell box color */
--ck-color-focus-border: var(--hover-item-text-color); /* Selected cell box border color */
--ck-color-focus-outer-shadow: var(--hover-item-background-color); /* Selected cell box background color */
--ck-border-radius: 0;
}
/*
* EDITOR'S CONTENT
*/
/*
* Code Blocks
*/