From ec3d7bd4cd6e18644022e545c5b18cbe36bdcb37 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Wed, 5 Feb 2025 01:57:09 +0200 Subject: [PATCH 1/4] style(next): ckeditor: restyle dropdowns --- src/public/stylesheets/theme-next/shell.css | 41 +++++++++++++++++++++ 1 file changed, 41 insertions(+) diff --git a/src/public/stylesheets/theme-next/shell.css b/src/public/stylesheets/theme-next/shell.css index bf67f537c8..67b6680996 100644 --- a/src/public/stylesheets/theme-next/shell.css +++ b/src/public/stylesheets/theme-next/shell.css @@ -1658,4 +1658,45 @@ body .calendar-dropdown-widget .calendar-body a:hover { /* Promoted attributes */ .promoted-attribute-cell div.input-group { margin: 1px 0; +} + +/* + CKEditor's Dropdowns +*/ + +/* Dropdown body */ +:root .ck.ck-dropdown__panel, +:root .ck.ck-balloon-rotator { + 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); + backdrop-filter: var(--dropdown-backdrop-filter); + padding: var(--menu-padding-size); +} + +:root ul.ck.ck-list, +:root div.ck.ck-balloon-panel { + border: none; + background: transparent; +} + +/* Dropdown list item */ +:root ul.ck.ck-list button.ck-button { + padding: 2px 16px; + background: transparent; + border: unset; + 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); } \ No newline at end of file From 0cfd9a634ca4b942b163465ec58d9680767dadec Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Thu, 17 Apr 2025 18:29:52 +0300 Subject: [PATCH 2/4] style(next): refactor --- .../stylesheets/theme-next/notes/text.css | 41 +++++++++++++++++++ 1 file changed, 41 insertions(+) diff --git a/src/public/stylesheets/theme-next/notes/text.css b/src/public/stylesheets/theme-next/notes/text.css index 9d1c20e88a..989e9dcf46 100644 --- a/src/public/stylesheets/theme-next/notes/text.css +++ b/src/public/stylesheets/theme-next/notes/text.css @@ -2,6 +2,47 @@ * TEXT NOTES */ +/* + * CKEditor's Dropdowns + */ + +/* Dropdown body */ +:root .ck.ck-dropdown__panel, +:root .ck.ck-balloon-rotator { + 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); + backdrop-filter: var(--dropdown-backdrop-filter); + padding: var(--menu-padding-size); +} + +:root ul.ck.ck-list, +:root div.ck.ck-balloon-panel { + border: none; + background: transparent; +} + +/* Dropdown list item */ +:root ul.ck.ck-list button.ck-button { + padding: 2px 16px; + background: transparent; + border: unset; + 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); +} + /* * Code Blocks */ From b3384a538c159d4a24e9efcbf546f0f404a952f3 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Thu, 17 Apr 2025 20:05:42 +0300 Subject: [PATCH 3/4] style(next)/restyle CKEditor: fix tooltips --- src/public/stylesheets/theme-next/notes/text.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/public/stylesheets/theme-next/notes/text.css b/src/public/stylesheets/theme-next/notes/text.css index 989e9dcf46..af3c7065e4 100644 --- a/src/public/stylesheets/theme-next/notes/text.css +++ b/src/public/stylesheets/theme-next/notes/text.css @@ -18,7 +18,7 @@ } :root ul.ck.ck-list, -:root div.ck.ck-balloon-panel { +:root div.ck.ck-balloon-panel:not(.ck-tooltip) { border: none; background: transparent; } From c8a3ce4298bf24cf03bc46871db0e627c7f29de4 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Thu, 17 Apr 2025 23:09:25 +0300 Subject: [PATCH 4/4] style(next)/restyle CKEditor: overhaul the appearance --- .../stylesheets/theme-next/notes/text.css | 67 ++++++++++++++++--- 1 file changed, 59 insertions(+), 8 deletions(-) diff --git a/src/public/stylesheets/theme-next/notes/text.css b/src/public/stylesheets/theme-next/notes/text.css index af3c7065e4..8dd09c4859 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 */