diff --git a/src/public/stylesheets/theme-next/notes/text.css b/src/public/stylesheets/theme-next/notes/text.css index af3c7065e..8dd09c485 100644 --- a/src/public/stylesheets/theme-next/notes/text.css +++ b/src/public/stylesheets/theme-next/notes/text.css @@ -1,20 +1,49 @@ /* - * TEXT NOTES + * CKEDITOR */ +/* + * 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; +} + /* - * CKEditor's Dropdowns + * 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); + padding: var(--menu-padding-size); } :root ul.ck.ck-list, @@ -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 */