diff --git a/src/public/stylesheets/theme-next/notes/text.css b/src/public/stylesheets/theme-next/notes/text.css index 9d1c20e88a..8dd09c4859 100644 --- a/src/public/stylesheets/theme-next/notes/text.css +++ b/src/public/stylesheets/theme-next/notes/text.css @@ -1,5 +1,97 @@ /* - * 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; +} + +/* + * Dropdowns + */ + +/* Dropdown body */ +:root .ck.ck-dropdown__panel, +: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(--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); +} + +:root ul.ck.ck-list, +:root div.ck.ck-balloon-panel:not(.ck-tooltip) { + border: none; + background: transparent; +} + +/* Dropdown list item */ +:root ul.ck.ck-list button.ck-button { + padding: 2px 16px; + background: transparent; + border-radius: 6px !important; + box-shadow: unset; +} + +/* Checked list item */ +:root ul.ck.ck-list button.ck-button.ck-on:not(:hover) { + background: transparent !important; +} + +:root ul.ck.ck-list button.ck-button:hover, +:root ul.ck.ck-list button.ck-button.ck-on:hover { + background: var(--hover-item-background-color); + 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 */ /*