From 43caadc472c34ff75f32144ed2260237ac305861 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Fri, 29 Aug 2025 16:57:02 +0300 Subject: [PATCH 01/28] client/quick search results: refactor the item delimiter line --- apps/client/src/stylesheets/theme-next/shell.css | 9 ++++----- apps/client/src/widgets/quick_search.ts | 12 +++++++----- 2 files changed, 11 insertions(+), 10 deletions(-) diff --git a/apps/client/src/stylesheets/theme-next/shell.css b/apps/client/src/stylesheets/theme-next/shell.css index a6e31de5d..681d2acf5 100644 --- a/apps/client/src/stylesheets/theme-next/shell.css +++ b/apps/client/src/stylesheets/theme-next/shell.css @@ -575,6 +575,10 @@ div.quick-search .search-button.show { * Quick search results */ +div.quick-search .dropdown-menu { + --quick-search-item-delimiter-color: transparent; +} + /* Item */ .quick-search .dropdown-menu *.dropdown-item { padding: 8px 12px !important; @@ -622,11 +626,6 @@ div.quick-search .search-button.show { font-weight: 600; } -/* Divider line */ -.quick-search .dropdown-item::after { - display: none; -} - /* * TREE PANE */ diff --git a/apps/client/src/widgets/quick_search.ts b/apps/client/src/widgets/quick_search.ts index 95728b99e..8b926c495 100644 --- a/apps/client/src/widgets/quick_search.ts +++ b/apps/client/src/widgets/quick_search.ts @@ -15,13 +15,15 @@ const TPL = /*html*/` padding: 10px 10px 10px 0px; height: 50px; } - + .quick-search button, .quick-search input { border: 0; font-size: 100% !important; } - + .quick-search .dropdown-menu { + --quick-search-item-delimiter-color: var(--dropdown-border-color); + max-height: 80vh; min-width: 400px; max-width: 720px; @@ -38,14 +40,14 @@ const TPL = /*html*/` position: relative; } - .quick-search .dropdown-item:not(:last-child)::after { + .quick-search .dropdown-item + .dropdown-item::after { content: ''; position: absolute; left: 0; - bottom: 0; + top: 0; width: 100%; height: 1px; - background: var(--dropdown-border-color); + border-bottom: 1px solid var(--quick-search-item-delimiter-color); } .quick-search .dropdown-item:last-child::after { From 5f39a314b50da716d31ab4f71d87131955a3a332 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Fri, 29 Aug 2025 16:58:13 +0300 Subject: [PATCH 02/28] client/quick search results: fix overflowing snippets --- apps/client/src/widgets/quick_search.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/apps/client/src/widgets/quick_search.ts b/apps/client/src/widgets/quick_search.ts index 8b926c495..c0a172c73 100644 --- a/apps/client/src/widgets/quick_search.ts +++ b/apps/client/src/widgets/quick_search.ts @@ -23,7 +23,7 @@ const TPL = /*html*/` .quick-search .dropdown-menu { --quick-search-item-delimiter-color: var(--dropdown-border-color); - + max-height: 80vh; min-width: 400px; max-width: 720px; @@ -94,6 +94,8 @@ const TPL = /*html*/` background-color: var(--accented-background-color); color: var(--main-text-color); font-size: .85em; + overflow: hidden; + text-overflow: ellipsis; } /* Search result highlighting */ From e3d28e703f5fa932c3f392f61ab10f0c300a1f13 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Fri, 29 Aug 2025 17:01:08 +0300 Subject: [PATCH 03/28] client/quick search results: tweak snippet background color --- apps/client/src/stylesheets/theme-next-light.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/client/src/stylesheets/theme-next-light.css b/apps/client/src/stylesheets/theme-next-light.css index cf6e7c6eb..331de6d94 100644 --- a/apps/client/src/stylesheets/theme-next-light.css +++ b/apps/client/src/stylesheets/theme-next-light.css @@ -115,7 +115,7 @@ --quick-search-focus-border: #00000029; --quick-search-focus-background: #ffffff80; --quick-search-focus-color: #000; - --quick-search-result-content-background: #00000017; + --quick-search-result-content-background: #0000000f; --quick-search-result-highlight-color: #c65050; --left-pane-collapsed-border-color: #0000000d; From 4d82f2f22dfb87b33c1773d5a7ae4b817208fa05 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Fri, 29 Aug 2025 17:11:10 +0300 Subject: [PATCH 04/28] client/quick search results: tweak footer divider margins --- apps/client/src/stylesheets/theme-next/shell.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/apps/client/src/stylesheets/theme-next/shell.css b/apps/client/src/stylesheets/theme-next/shell.css index 681d2acf5..c8da5f3b0 100644 --- a/apps/client/src/stylesheets/theme-next/shell.css +++ b/apps/client/src/stylesheets/theme-next/shell.css @@ -626,6 +626,10 @@ div.quick-search .dropdown-menu { font-weight: 600; } +.quick-search div.dropdown-divider { + margin: 8px 0; +} + /* * TREE PANE */ From 9464667323c4eec314ea9e72cb01d255fc7f4b3b Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Fri, 29 Aug 2025 17:12:52 +0300 Subject: [PATCH 05/28] client/quick search results: remove deprecated styles --- apps/client/src/stylesheets/theme-next/shell.css | 10 ---------- 1 file changed, 10 deletions(-) diff --git a/apps/client/src/stylesheets/theme-next/shell.css b/apps/client/src/stylesheets/theme-next/shell.css index c8da5f3b0..a147678f5 100644 --- a/apps/client/src/stylesheets/theme-next/shell.css +++ b/apps/client/src/stylesheets/theme-next/shell.css @@ -594,16 +594,6 @@ div.quick-search .dropdown-menu { vertical-align: text-bottom; } -/* Note title */ -.quick-search .dropdown-menu .dropdown-item > a { - color: var(--menu-text-color); -} - -.quick-search .dropdown-menu .dropdown-item > a:hover { - --hover-item-background-color: transparent; - text-decoration: underline; -} - /* Note path */ .quick-search .dropdown-menu small { display: block; From d73e84ea6caea1bc038524bf8b886285d9e69987 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Fri, 29 Aug 2025 18:37:02 +0300 Subject: [PATCH 06/28] client/quick search results: tweak icon alignment --- apps/client/src/stylesheets/theme-next/shell.css | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/apps/client/src/stylesheets/theme-next/shell.css b/apps/client/src/stylesheets/theme-next/shell.css index a147678f5..ec5d33940 100644 --- a/apps/client/src/stylesheets/theme-next/shell.css +++ b/apps/client/src/stylesheets/theme-next/shell.css @@ -577,6 +577,7 @@ div.quick-search .search-button.show { div.quick-search .dropdown-menu { --quick-search-item-delimiter-color: transparent; + --menu-item-icon-vert-offset: -.065em; } /* Item */ @@ -584,12 +585,6 @@ div.quick-search .dropdown-menu { padding: 8px 12px !important; } -/* Note icon */ -.quick-search .dropdown-menu .dropdown-item > .bx { - position: relative; - top: 1px; -} - .quick-search .quick-search-item-icon { vertical-align: text-bottom; } From 48faa8a81330282dc0d318e65f30f130d61f76ad Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Fri, 29 Aug 2025 21:06:48 +0300 Subject: [PATCH 07/28] client/quick search results: tweak the busy indicator --- apps/client/src/widgets/quick_search.ts | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/apps/client/src/widgets/quick_search.ts b/apps/client/src/widgets/quick_search.ts index c0a172c73..38c823864 100644 --- a/apps/client/src/widgets/quick_search.ts +++ b/apps/client/src/widgets/quick_search.ts @@ -110,6 +110,10 @@ const TPL = /*html*/` margin: 0; } + .quick-search .bx-loader { + margin-inline-end: 4px; + } +
@@ -224,7 +228,11 @@ export default class QuickSearchWidget extends BasicWidget { this.isLoadingMore = false; this.$dropdownMenu.empty(); - this.$dropdownMenu.append(`${t("quick-search.searching")}`); + this.$dropdownMenu.append(` + + + ${t("quick-search.searching")} + `); const { searchResultNoteIds, searchResults, error } = await server.get(`quick-search/${encodeURIComponent(searchString)}`); From b147d4bdeb7fa1d07def2ecd8c632fb342668c0c Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Fri, 29 Aug 2025 21:17:43 +0300 Subject: [PATCH 08/28] style: brighten the border of dropdowns --- apps/client/src/stylesheets/theme-next-dark.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/client/src/stylesheets/theme-next-dark.css b/apps/client/src/stylesheets/theme-next-dark.css index 69753b0db..4edfd6e38 100644 --- a/apps/client/src/stylesheets/theme-next-dark.css +++ b/apps/client/src/stylesheets/theme-next-dark.css @@ -18,7 +18,7 @@ --main-text-color: #ccc; --main-border-color: #454545; --subtle-border-color: #313131; - --dropdown-border-color: #292929; + --dropdown-border-color: #404040; --dropdown-shadow-opacity: 0.6; --dropdown-item-icon-destructive-color: #de6e5b; --disabled-tooltip-icon-color: #7fd2ef; From c08b30a06009753eba74922ff7de7a4444339780 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Fri, 29 Aug 2025 21:30:04 +0300 Subject: [PATCH 09/28] style/text editor: hide icons from the text snippets dropdown --- apps/client/src/stylesheets/theme-next/notes/text.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/apps/client/src/stylesheets/theme-next/notes/text.css b/apps/client/src/stylesheets/theme-next/notes/text.css index 404a47fec..cd8b3f0ce 100644 --- a/apps/client/src/stylesheets/theme-next/notes/text.css +++ b/apps/client/src/stylesheets/theme-next/notes/text.css @@ -363,6 +363,11 @@ color: var(--accent); } +/* Text snippet dropdown */ +.ck-template-form .ck-button__icon { + display: none; +} + /* Action buttons */ :root .ck-link-actions button.ck-button, From 7d3a672b557b3ae8cdf27a16a81b3b3daa2c8fdc Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Fri, 29 Aug 2025 21:36:09 +0300 Subject: [PATCH 10/28] style/toasts: prevent long text from overflowing --- apps/client/src/stylesheets/theme-next/base.css | 2 ++ 1 file changed, 2 insertions(+) diff --git a/apps/client/src/stylesheets/theme-next/base.css b/apps/client/src/stylesheets/theme-next/base.css index bee48c023..1c17b1ca9 100644 --- a/apps/client/src/stylesheets/theme-next/base.css +++ b/apps/client/src/stylesheets/theme-next/base.css @@ -325,6 +325,8 @@ body.mobile .dropdown-menu .dropdown-item.submenu-open .dropdown-toggle::after { #toast-container .toast .toast-body { flex-grow: 1; + overflow: hidden; + text-overflow: ellipsis; } /* From a94cc5bdab288dd21025561f3acf697662e0f529 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Sat, 30 Aug 2025 02:55:23 +0300 Subject: [PATCH 11/28] style/text editor/insert text snippet dropdown: tweak appearance --- .../src/stylesheets/theme-next/notes/text.css | 46 ++++++++++++++++++- 1 file changed, 44 insertions(+), 2 deletions(-) diff --git a/apps/client/src/stylesheets/theme-next/notes/text.css b/apps/client/src/stylesheets/theme-next/notes/text.css index cd8b3f0ce..e1fa130bc 100644 --- a/apps/client/src/stylesheets/theme-next/notes/text.css +++ b/apps/client/src/stylesheets/theme-next/notes/text.css @@ -364,8 +364,50 @@ } /* Text snippet dropdown */ -.ck-template-form .ck-button__icon { - display: none; + +div.ck-template-form { + padding: 8px; +} + +div.ck-template-form .ck-labeled-field-view { + margin: 8px 0; +} + +:root div.ck-template-form li.ck-list__item button.ck-template-button { + padding: 4px 8px; +} + +:root .ck-template-form .ck-button__icon { + --ck-spacing-medium: 2px; +} + +:root div.ck-template-form .note-icon { + color: var(--menu-item-icon-color); +} + +:root div.ck-template-form .ck-template-form__description { + opacity: .5; + font-size: .9em; +} + +div.ck-template-form .ck-template-form__text-part { + color: var(--hover-item-text-color); + font-size: .9rem; +} + +div.ck-template-form .ck-template-form__text-part mark { + background: unset; + color: var(--quick-search-result-highlight-color); + font-weight: bold; +} + +div.ck-template-form .ck-search__info span { + line-height: initial; +} + +div.ck-template-form .ck-search__info span:nth-child(2) { + font-size: .9em; + opacity: .5; } /* Action buttons */ From 3d285e105e78f9201e03e16bc021f4f64406b1c4 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Sat, 30 Aug 2025 18:25:44 +0300 Subject: [PATCH 12/28] style/text editor/insert text snippet dropdown: tweak appearance --- apps/client/src/stylesheets/style.css | 9 +++++++ .../src/stylesheets/theme-next/notes/text.css | 27 ++++++++++++------- 2 files changed, 27 insertions(+), 9 deletions(-) diff --git a/apps/client/src/stylesheets/style.css b/apps/client/src/stylesheets/style.css index b2604614c..0d192381d 100644 --- a/apps/client/src/stylesheets/style.css +++ b/apps/client/src/stylesheets/style.css @@ -2360,3 +2360,12 @@ footer.webview-footer button { content: "\ec24"; transform: rotate(180deg); } + +/* CK Edito */ + +/* Insert text snippet: limit the width of the listed items to avoid overly long names */ +:root body.desktop div.ck-template-form li.ck-list__item .ck-template-form__text-part > span { + max-width: 25vw; + overflow: hidden; + text-overflow: ellipsis; +} \ No newline at end of file diff --git a/apps/client/src/stylesheets/theme-next/notes/text.css b/apps/client/src/stylesheets/theme-next/notes/text.css index e1fa130bc..5514d287f 100644 --- a/apps/client/src/stylesheets/theme-next/notes/text.css +++ b/apps/client/src/stylesheets/theme-next/notes/text.css @@ -373,10 +373,13 @@ div.ck-template-form .ck-labeled-field-view { margin: 8px 0; } +/* Template item */ + :root div.ck-template-form li.ck-list__item button.ck-template-button { padding: 4px 8px; } +/* Template icon */ :root .ck-template-form .ck-button__icon { --ck-spacing-medium: 2px; } @@ -385,11 +388,7 @@ div.ck-template-form .ck-labeled-field-view { color: var(--menu-item-icon-color); } -:root div.ck-template-form .ck-template-form__description { - opacity: .5; - font-size: .9em; -} - +/* Template name */ div.ck-template-form .ck-template-form__text-part { color: var(--hover-item-text-color); font-size: .9rem; @@ -401,13 +400,23 @@ div.ck-template-form .ck-template-form__text-part mark { font-weight: bold; } -div.ck-template-form .ck-search__info span { - line-height: initial; +/* Template description */ +:root div.ck-template-form .ck-template-form__description { + opacity: .5; + font-size: .9em; } -div.ck-template-form .ck-search__info span:nth-child(2) { - font-size: .9em; +/* Messages */ +div.ck-template-form .ck-search__info > span { + line-height: initial; + color: var(--muted-text-color); +} + +div.ck-template-form .ck-search__info span:nth-child(2) { + display: block; opacity: .5; + margin-top: 8px; + font-size: .9em; } /* Action buttons */ From fcb77360e152c7d35e07c1fc0e3e5295a6cf820e Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Sat, 30 Aug 2025 19:22:27 +0300 Subject: [PATCH 13/28] style/text editor/text alignment dropdown: use a horizontal toolbar instead of a vertical one --- .../src/widgets/type_widgets/ckeditor/toolbar.ts | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/apps/client/src/widgets/type_widgets/ckeditor/toolbar.ts b/apps/client/src/widgets/type_widgets/ckeditor/toolbar.ts index ad83baab6..c8ba56d4d 100644 --- a/apps/client/src/widgets/type_widgets/ckeditor/toolbar.ts +++ b/apps/client/src/widgets/type_widgets/ckeditor/toolbar.ts @@ -1,5 +1,6 @@ import utils from "../../../services/utils.js"; import options from "../../../services/options.js"; +import IconAlignCenter from "@ckeditor/ckeditor5-icons/theme/icons/align-center.svg?raw"; const TEXT_FORMATTING_GROUP = { label: "Text formatting", @@ -77,7 +78,7 @@ export function buildClassicToolbar(multilineToolbar: boolean) { items: ["imageUpload", "|", "link", "bookmark", "internallink", "includeNote", "|", "specialCharacters", "emoji", "math", "mermaid", "horizontalLine", "pageBreak", "dateTime"] }, "|", - "alignment", + buildAlignmentToolbar(), "outdent", "indent", "|", @@ -134,7 +135,7 @@ export function buildFloatingToolbar() { items: ["link", "bookmark", "internallink", "includeNote", "|", "math", "mermaid", "horizontalLine", "pageBreak", "dateTime"] }, "|", - "alignment", + buildAlignmentToolbar(), "outdent", "indent", "|", @@ -147,3 +148,11 @@ export function buildFloatingToolbar() { ] }; } + +function buildAlignmentToolbar() { + return { + label: "Alignment", + icon: IconAlignCenter, + items: ["alignment:left", "alignment:center", "alignment:right", "|", "alignment:justify"] + }; +} From 1e2e3498c67c7ee399cd9aa94a0401a5820b0d18 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Sun, 31 Aug 2025 01:45:12 +0300 Subject: [PATCH 14/28] style/text editor/forms: restyle text boxes --- .../src/stylesheets/theme-next/forms.css | 3 +++ .../src/stylesheets/theme-next/notes/text.css | 22 ++++++++++++++++++- 2 files changed, 24 insertions(+), 1 deletion(-) diff --git a/apps/client/src/stylesheets/theme-next/forms.css b/apps/client/src/stylesheets/theme-next/forms.css index f4465f905..7802d7c5a 100644 --- a/apps/client/src/stylesheets/theme-next/forms.css +++ b/apps/client/src/stylesheets/theme-next/forms.css @@ -149,6 +149,7 @@ input[type="password"], input[type="date"], input[type="time"], input[type="datetime-local"], +input.ck.ck-input-text[type="text"], textarea.form-control, textarea, .tn-input-field { @@ -167,6 +168,7 @@ input[type="password"]:hover, input[type="date"]:hover, input[type="time"]:hover, input[type="datetime-local"]:hover, +input.ck.ck-input-text[type="text"]:hover, textarea.form-control:hover, textarea:hover, .tn-input-field:hover { @@ -181,6 +183,7 @@ input[type="password"]:focus, input[type="date"]:focus, input[type="time"]:focus, input[type="datetime-local"]:focus, +input.ck.ck-input-text[type="text"]:focus, textarea.form-control:focus, textarea:focus, .tn-input-field:focus, diff --git a/apps/client/src/stylesheets/theme-next/notes/text.css b/apps/client/src/stylesheets/theme-next/notes/text.css index 5514d287f..3a42463bb 100644 --- a/apps/client/src/stylesheets/theme-next/notes/text.css +++ b/apps/client/src/stylesheets/theme-next/notes/text.css @@ -370,7 +370,7 @@ div.ck-template-form { } div.ck-template-form .ck-labeled-field-view { - margin: 8px 0; + margin-bottom: 8px; } /* Template item */ @@ -448,6 +448,26 @@ div.ck-template-form .ck-search__info span:nth-child(2) { background: transparent; } +/* + * FORMS + */ + +/* + * Text boxes + */ + +.ck.ck-labeled-field-view { + padding-top: 1.5em !important; /* Create space for the label */ +} + +.ck.ck-labeled-field-view > .ck.ck-labeled-field-view__input-wrapper > label.ck.ck-label { + transform: translate(0, -1.7em) !important; /* Move the label above the text box regardless of the text box state */ + padding-left: 0 !important; + background: transparent; + font-size: .85em; + font-weight: 600; +} + /* * EDITOR'S CONTENT */ From 0afa9717e5a08e3af08c1d0ed030b92c3c483e9d Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Sun, 31 Aug 2025 02:28:24 +0300 Subject: [PATCH 15/28] style/text editor/forms: restyle buttons --- .../src/stylesheets/theme-next/forms.css | 15 ++++++---- .../src/stylesheets/theme-next/notes/text.css | 28 +++++++++++-------- 2 files changed, 26 insertions(+), 17 deletions(-) diff --git a/apps/client/src/stylesheets/theme-next/forms.css b/apps/client/src/stylesheets/theme-next/forms.css index 7802d7c5a..d1d0b61fd 100644 --- a/apps/client/src/stylesheets/theme-next/forms.css +++ b/apps/client/src/stylesheets/theme-next/forms.css @@ -5,7 +5,8 @@ button.btn.btn-primary, button.btn.btn-secondary, button.btn.btn-sm:not(.select-button), -button.btn.btn-success { +button.btn.btn-success, +button.ck.ck-button:is(.ck-button-action, .ck-button-save, .ck-button-cancel).ck-button_with-text { display: inline-flex; align-items: center; justify-content: center; @@ -21,7 +22,8 @@ button.btn.btn-success { button.btn.btn-primary:hover, button.btn.btn-secondary:hover, button.btn.btn-sm:not(.select-button):hover, -button.btn.btn-success:hover { +button.btn.btn-success:hover, +button.ck.ck-button:is(.ck-button-action, .ck-button-save, .ck-button-cancel).ck-button_with-text:hover { background: var(--cmd-button-hover-background-color); color: var(--cmd-button-hover-text-color); } @@ -29,7 +31,8 @@ button.btn.btn-success:hover { button.btn.btn-primary:active, button.btn.btn-secondary:active, button.btn.btn-sm:not(.select-button):active, -button.btn.btn-success:active { +button.btn.btn-success:active, +button.ck.ck-button:is(.ck-button-action, .ck-button-save, .ck-button-cancel).ck-button_with-text:active { opacity: 0.85; box-shadow: unset; background: var(--cmd-button-background-color) !important; @@ -40,14 +43,16 @@ button.btn.btn-success:active { button.btn.btn-primary:disabled, button.btn.btn-secondary:disabled, button.btn.btn-sm:not(.select-button):disabled, -button.btn.btn-success:disabled { +button.btn.btn-success:disabled, +button.ck.ck-button:is(.ck-button-action, .ck-button-save, .ck-button-cancel).ck-button_with-text:disabled { opacity: var(--cmd-button-disabled-opacity); } button.btn.btn-primary:focus-visible, button.btn.btn-secondary:focus-visible, button.btn.btn-sm:not(.select-button):focus-visible, -button.btn.btn-success:focus-visible { +button.btn.btn-success:focus-visible, +button.ck.ck-button.ck-button-action.ck-button_with-text:focus-visible { outline: 2px solid var(--input-focus-outline-color); } diff --git a/apps/client/src/stylesheets/theme-next/notes/text.css b/apps/client/src/stylesheets/theme-next/notes/text.css index 3a42463bb..b53721aec 100644 --- a/apps/client/src/stylesheets/theme-next/notes/text.css +++ b/apps/client/src/stylesheets/theme-next/notes/text.css @@ -419,19 +419,10 @@ div.ck-template-form .ck-search__info span:nth-child(2) { font-size: .9em; } -/* Action buttons */ +/* Bookmark dropdown */ -:root .ck-link-actions button.ck-button, -:root .ck-link-form button.ck-button { - --ck-border-radius: 6px; - - background: transparent; - box-shadow: unset; -} - -:root .ck-link-actions button.ck-button:hover, -:root .ck-link-form button.ck-button:hover { - background: var(--hover-item-background-color); +.ck.ck-bookmark-form .ck-form__row_with-submit { + align-items: center; } /* Mention list (the autocompletion list for emojis, labels and relations) */ @@ -452,6 +443,14 @@ div.ck-template-form .ck-search__info span:nth-child(2) { * FORMS */ +/* + * Buttons + */ + +button.ck.ck-button.ck-button-action.ck-button_with-text { + min-width: 60px; +} + /* * Text boxes */ @@ -468,6 +467,11 @@ div.ck-template-form .ck-search__info span:nth-child(2) { font-weight: 600; } +/* Forms */ +.ck.ck-form__row_with-submit { + align-items: flex-end; +} + /* * EDITOR'S CONTENT */ From e85858d22ddb66046a3fb2f49f8dc9482f57d0a5 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Sun, 31 Aug 2025 02:30:13 +0300 Subject: [PATCH 16/28] style/text editor/forms: fix visible focus for buttons --- apps/client/src/stylesheets/theme-next/forms.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/client/src/stylesheets/theme-next/forms.css b/apps/client/src/stylesheets/theme-next/forms.css index d1d0b61fd..555214086 100644 --- a/apps/client/src/stylesheets/theme-next/forms.css +++ b/apps/client/src/stylesheets/theme-next/forms.css @@ -52,7 +52,7 @@ button.btn.btn-primary:focus-visible, button.btn.btn-secondary:focus-visible, button.btn.btn-sm:not(.select-button):focus-visible, button.btn.btn-success:focus-visible, -button.ck.ck-button.ck-button-action.ck-button_with-text:focus-visible { +button.ck.ck-button:is(.ck-button-action, .ck-button-save, .ck-button-cancel).ck-button_with-text:focus-visible { outline: 2px solid var(--input-focus-outline-color); } From ed748bbebd9d47de83abd2cdb64714aabe8cc612 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Sun, 31 Aug 2025 02:58:53 +0300 Subject: [PATCH 17/28] style/text editor/forms: restyle dropdowns --- apps/client/src/stylesheets/theme-next/notes/text.css | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/apps/client/src/stylesheets/theme-next/notes/text.css b/apps/client/src/stylesheets/theme-next/notes/text.css index b53721aec..d93a5c450 100644 --- a/apps/client/src/stylesheets/theme-next/notes/text.css +++ b/apps/client/src/stylesheets/theme-next/notes/text.css @@ -419,6 +419,12 @@ div.ck-template-form .ck-search__info span:nth-child(2) { font-size: .9em; } +/* Link dropdown */ + +:root .ck.ck-form.ck-link-form ul.ck-link-form__providers-list { + border-top: none; +} + /* Bookmark dropdown */ .ck.ck-bookmark-form .ck-form__row_with-submit { @@ -472,6 +478,10 @@ button.ck.ck-button.ck-button-action.ck-button_with-text { align-items: flex-end; } +.ck.ck-form__header { + border-bottom: none; +} + /* * EDITOR'S CONTENT */ From d12dfabd0b5f84c6cb9593b8bfdc2a4bd8db044a Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Sun, 31 Aug 2025 03:19:33 +0300 Subject: [PATCH 18/28] style/text editor/forms: various layout fixes --- .../src/stylesheets/theme-next/notes/text.css | 28 ++++++++++++++----- 1 file changed, 21 insertions(+), 7 deletions(-) diff --git a/apps/client/src/stylesheets/theme-next/notes/text.css b/apps/client/src/stylesheets/theme-next/notes/text.css index d93a5c450..46ce4d7ba 100644 --- a/apps/client/src/stylesheets/theme-next/notes/text.css +++ b/apps/client/src/stylesheets/theme-next/notes/text.css @@ -4,6 +4,7 @@ :root { --ck-font-face: var(--main-font-family); + --ck-input-label-height: 1.5em; } /* @@ -425,10 +426,16 @@ div.ck-template-form .ck-search__info span:nth-child(2) { border-top: none; } -/* Bookmark dropdown */ +/* Emoji dropdown */ -.ck.ck-bookmark-form .ck-form__row_with-submit { - align-items: center; +.ck-emoji-picker-form .ck-emoji__search .ck-button_with-text { + margin-top: var(--ck-input-label-height); +} + +/* Find and replace dialog */ + +.ck-find-and-replace-form .ck-find-and-replace-form__inputs button { + margin-top: var(--ck-input-label-height); } /* Mention list (the autocompletion list for emojis, labels and relations) */ @@ -462,11 +469,13 @@ button.ck.ck-button.ck-button-action.ck-button_with-text { */ .ck.ck-labeled-field-view { - padding-top: 1.5em !important; /* Create space for the label */ + padding-top: var(--ck-input-label-height) !important; /* Create space for the label */ } .ck.ck-labeled-field-view > .ck.ck-labeled-field-view__input-wrapper > label.ck.ck-label { - transform: translate(0, -1.7em) !important; /* Move the label above the text box regardless of the text box state */ + /* Move the label above the text box regardless of the text box state */ + transform: translate(0, calc(-.2em - var(--ck-input-label-height))) !important; + padding-left: 0 !important; background: transparent; font-size: .85em; @@ -474,8 +483,13 @@ button.ck.ck-button.ck-button-action.ck-button_with-text { } /* Forms */ -.ck.ck-form__row_with-submit { - align-items: flex-end; + +:root .ck.ck-form__row.ck-form__row_with-submit > :not(:first-child) { + margin-inline-start: 16px; +} + +.ck.ck-form__row_with-submit button { + margin-top: var(--ck-input-label-height); } .ck.ck-form__header { From 03ab912495230e22cf6efe5f194384b082eb2368 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Sun, 31 Aug 2025 03:33:30 +0300 Subject: [PATCH 19/28] style/text editor/forms: tweak buttons --- apps/client/src/stylesheets/theme-next/notes/text.css | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/apps/client/src/stylesheets/theme-next/notes/text.css b/apps/client/src/stylesheets/theme-next/notes/text.css index 46ce4d7ba..3222763aa 100644 --- a/apps/client/src/stylesheets/theme-next/notes/text.css +++ b/apps/client/src/stylesheets/theme-next/notes/text.css @@ -460,8 +460,11 @@ div.ck-template-form .ck-search__info span:nth-child(2) { * Buttons */ -button.ck.ck-button.ck-button-action.ck-button_with-text { +button.ck.ck-button:is(.ck-button-action, .ck-button-save, .ck-button-cancel).ck-button_with-text { + --ck-color-text: var(--cmd-button-text-color); + min-width: 60px; + font-weight: 500; } /* From 47099cc77b402d57e07c7c31e77d261eefa5d31a Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Tue, 2 Sep 2025 02:03:49 +0300 Subject: [PATCH 20/28] style/text editor/insert math flyout: fix layout --- apps/client/src/stylesheets/theme-next/notes/text.css | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/apps/client/src/stylesheets/theme-next/notes/text.css b/apps/client/src/stylesheets/theme-next/notes/text.css index 3222763aa..909752a20 100644 --- a/apps/client/src/stylesheets/theme-next/notes/text.css +++ b/apps/client/src/stylesheets/theme-next/notes/text.css @@ -426,6 +426,14 @@ div.ck-template-form .ck-search__info span:nth-child(2) { border-top: none; } +/* Math popup */ + +.ck-math-form .ck-labeled-field-view { + --ck-input-label-height: 0; + + margin-inline-end: 8px; +} + /* Emoji dropdown */ .ck-emoji-picker-form .ck-emoji__search .ck-button_with-text { From bcef0802e467a6cc4bb73bf0387ba99b5881b46a Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Tue, 2 Sep 2025 02:08:04 +0300 Subject: [PATCH 21/28] style/text editor/insert emoji flyout: fix the spacing of the skin tone dropdown items --- apps/client/src/stylesheets/theme-next/notes/text.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/client/src/stylesheets/theme-next/notes/text.css b/apps/client/src/stylesheets/theme-next/notes/text.css index 909752a20..56728f64c 100644 --- a/apps/client/src/stylesheets/theme-next/notes/text.css +++ b/apps/client/src/stylesheets/theme-next/notes/text.css @@ -430,13 +430,13 @@ div.ck-template-form .ck-search__info span:nth-child(2) { .ck-math-form .ck-labeled-field-view { --ck-input-label-height: 0; - + margin-inline-end: 8px; } /* Emoji dropdown */ -.ck-emoji-picker-form .ck-emoji__search .ck-button_with-text { +.ck-emoji-picker-form .ck-emoji__search .ck-button_with-text:not(.ck-list-item-button) { margin-top: var(--ck-input-label-height); } From f646b3dc5c436326b48b97ab8e3260fec1181116 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Tue, 2 Sep 2025 02:14:43 +0300 Subject: [PATCH 22/28] style/text editor/color selector dropdown: fix layout --- apps/client/src/stylesheets/theme-next/notes/text.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/apps/client/src/stylesheets/theme-next/notes/text.css b/apps/client/src/stylesheets/theme-next/notes/text.css index 56728f64c..64cf8fdd8 100644 --- a/apps/client/src/stylesheets/theme-next/notes/text.css +++ b/apps/client/src/stylesheets/theme-next/notes/text.css @@ -308,6 +308,11 @@ fill: black !important; } +/* Hex color input box prefix */ +:root .ck.ck-color-selector .ck-color-picker__hash-view { + margin-top: var(--ck-input-label-height); +} + /* Numbered list */ :root .ck.ck-list-properties_with-numbered-properties .ck.ck-list-styles-list { From 6475b4029afed9e63da609049981c1d396eecc4f Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Tue, 2 Sep 2025 02:42:05 +0300 Subject: [PATCH 23/28] style/text editor/forms: restyle number inputs --- apps/client/src/stylesheets/theme-next/forms.css | 3 +++ 1 file changed, 3 insertions(+) diff --git a/apps/client/src/stylesheets/theme-next/forms.css b/apps/client/src/stylesheets/theme-next/forms.css index 555214086..5de075bc1 100644 --- a/apps/client/src/stylesheets/theme-next/forms.css +++ b/apps/client/src/stylesheets/theme-next/forms.css @@ -155,6 +155,7 @@ input[type="date"], input[type="time"], input[type="datetime-local"], input.ck.ck-input-text[type="text"], +input.ck.ck-input-number, textarea.form-control, textarea, .tn-input-field { @@ -174,6 +175,7 @@ input[type="date"]:hover, input[type="time"]:hover, input[type="datetime-local"]:hover, input.ck.ck-input-text[type="text"]:hover, +input.ck.ck-input-number:hover, textarea.form-control:hover, textarea:hover, .tn-input-field:hover { @@ -189,6 +191,7 @@ input[type="date"]:focus, input[type="time"]:focus, input[type="datetime-local"]:focus, input.ck.ck-input-text[type="text"]:focus, +input.ck.ck-input-number:focus, textarea.form-control:focus, textarea:focus, .tn-input-field:focus, From ab95d707a3172a1903560e3a071229c016945f0e Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Tue, 2 Sep 2025 02:43:11 +0300 Subject: [PATCH 24/28] style/text editor/forms: refactor --- apps/client/src/stylesheets/theme-next/forms.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/apps/client/src/stylesheets/theme-next/forms.css b/apps/client/src/stylesheets/theme-next/forms.css index 5de075bc1..90c6afee6 100644 --- a/apps/client/src/stylesheets/theme-next/forms.css +++ b/apps/client/src/stylesheets/theme-next/forms.css @@ -154,7 +154,7 @@ input[type="password"], input[type="date"], input[type="time"], input[type="datetime-local"], -input.ck.ck-input-text[type="text"], +input.ck.ck-input-text, input.ck.ck-input-number, textarea.form-control, textarea, @@ -174,7 +174,7 @@ input[type="password"]:hover, input[type="date"]:hover, input[type="time"]:hover, input[type="datetime-local"]:hover, -input.ck.ck-input-text[type="text"]:hover, +input.ck.ck-input-text:hover, input.ck.ck-input-number:hover, textarea.form-control:hover, textarea:hover, @@ -190,7 +190,7 @@ input[type="password"]:focus, input[type="date"]:focus, input[type="time"]:focus, input[type="datetime-local"]:focus, -input.ck.ck-input-text[type="text"]:focus, +input.ck.ck-input-text:focus, input.ck.ck-input-number:focus, textarea.form-control:focus, textarea:focus, From 27fdd9e71518db618f795bcb53116d7a82665dd0 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Wed, 3 Sep 2025 04:13:29 +0300 Subject: [PATCH 25/28] style/text editor/find and replace: add style for the "replace" buttons --- apps/client/src/stylesheets/theme-next/forms.css | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/apps/client/src/stylesheets/theme-next/forms.css b/apps/client/src/stylesheets/theme-next/forms.css index 90c6afee6..8fda98233 100644 --- a/apps/client/src/stylesheets/theme-next/forms.css +++ b/apps/client/src/stylesheets/theme-next/forms.css @@ -6,7 +6,7 @@ button.btn.btn-primary, button.btn.btn-secondary, button.btn.btn-sm:not(.select-button), button.btn.btn-success, -button.ck.ck-button:is(.ck-button-action, .ck-button-save, .ck-button-cancel).ck-button_with-text { +button.ck.ck-button:is(.ck-button-action, .ck-button-save, .ck-button-cancel, .ck-button-replaceall, .ck-button-replace).ck-button_with-text { display: inline-flex; align-items: center; justify-content: center; @@ -23,7 +23,7 @@ button.btn.btn-primary:hover, button.btn.btn-secondary:hover, button.btn.btn-sm:not(.select-button):hover, button.btn.btn-success:hover, -button.ck.ck-button:is(.ck-button-action, .ck-button-save, .ck-button-cancel).ck-button_with-text:hover { +button.ck.ck-button:is(.ck-button-action, .ck-button-save, .ck-button-cancel, .ck-button-replaceall, .ck-button-replace).ck-button_with-text:not(.ck-disabled):hover { background: var(--cmd-button-hover-background-color); color: var(--cmd-button-hover-text-color); } @@ -32,7 +32,7 @@ button.btn.btn-primary:active, button.btn.btn-secondary:active, button.btn.btn-sm:not(.select-button):active, button.btn.btn-success:active, -button.ck.ck-button:is(.ck-button-action, .ck-button-save, .ck-button-cancel).ck-button_with-text:active { +button.ck.ck-button:is(.ck-button-action, .ck-button-save, .ck-button-cancel, .ck-button-replaceall, .ck-button-replace).ck-button_with-text:not(.ck-disabled):active { opacity: 0.85; box-shadow: unset; background: var(--cmd-button-background-color) !important; @@ -44,7 +44,7 @@ button.btn.btn-primary:disabled, button.btn.btn-secondary:disabled, button.btn.btn-sm:not(.select-button):disabled, button.btn.btn-success:disabled, -button.ck.ck-button:is(.ck-button-action, .ck-button-save, .ck-button-cancel).ck-button_with-text:disabled { +button.ck.ck-button:is(.ck-button-action, .ck-button-save, .ck-button-cancel, .ck-button-replaceall, .ck-button-replace).ck-button_with-text.ck-disabled { opacity: var(--cmd-button-disabled-opacity); } @@ -52,7 +52,7 @@ button.btn.btn-primary:focus-visible, button.btn.btn-secondary:focus-visible, button.btn.btn-sm:not(.select-button):focus-visible, button.btn.btn-success:focus-visible, -button.ck.ck-button:is(.ck-button-action, .ck-button-save, .ck-button-cancel).ck-button_with-text:focus-visible { +button.ck.ck-button:is(.ck-button-action, .ck-button-save, .ck-button-cancel, .ck-button-replaceall, .ck-button-replace).ck-button_with-text:not(.ck-disabled):focus-visible { outline: 2px solid var(--input-focus-outline-color); } From c40398df5d9e9ff03385b9d15e77f9319aab8f7a Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Wed, 3 Sep 2025 04:29:02 +0300 Subject: [PATCH 26/28] style/text editor/forms: tweak text boxes --- apps/client/src/stylesheets/theme-next/forms.css | 12 ++++++------ .../client/src/stylesheets/theme-next/notes/text.css | 5 +++++ 2 files changed, 11 insertions(+), 6 deletions(-) diff --git a/apps/client/src/stylesheets/theme-next/forms.css b/apps/client/src/stylesheets/theme-next/forms.css index 8fda98233..bb2eec953 100644 --- a/apps/client/src/stylesheets/theme-next/forms.css +++ b/apps/client/src/stylesheets/theme-next/forms.css @@ -154,8 +154,8 @@ input[type="password"], input[type="date"], input[type="time"], input[type="datetime-local"], -input.ck.ck-input-text, -input.ck.ck-input-number, +:root input.ck.ck-input-text, +:root input.ck.ck-input-number, textarea.form-control, textarea, .tn-input-field { @@ -174,8 +174,8 @@ input[type="password"]:hover, input[type="date"]:hover, input[type="time"]:hover, input[type="datetime-local"]:hover, -input.ck.ck-input-text:hover, -input.ck.ck-input-number:hover, +:root input.ck.ck-input-text:not([readonly="true"]):hover, +:root input.ck.ck-input-number:not([readonly="true"]):hover, textarea.form-control:hover, textarea:hover, .tn-input-field:hover { @@ -190,8 +190,8 @@ input[type="password"]:focus, input[type="date"]:focus, input[type="time"]:focus, input[type="datetime-local"]:focus, -input.ck.ck-input-text:focus, -input.ck.ck-input-number:focus, +:root input.ck.ck-input-text:focus, +:root input.ck.ck-input-number:focus, textarea.form-control:focus, textarea:focus, .tn-input-field:focus, diff --git a/apps/client/src/stylesheets/theme-next/notes/text.css b/apps/client/src/stylesheets/theme-next/notes/text.css index 64cf8fdd8..6499fa0b4 100644 --- a/apps/client/src/stylesheets/theme-next/notes/text.css +++ b/apps/client/src/stylesheets/theme-next/notes/text.css @@ -498,6 +498,11 @@ button.ck.ck-button:is(.ck-button-action, .ck-button-save, .ck-button-cancel).ck font-weight: 600; } +:root input.ck.ck-input-text[readonly="true"] { + cursor: not-allowed; + background: var(--input-background-color); +} + /* Forms */ :root .ck.ck-form__row.ck-form__row_with-submit > :not(:first-child) { From 9c5a130ab4e8cf1db8d06e7ef0cf93411437c416 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Wed, 3 Sep 2025 04:38:37 +0300 Subject: [PATCH 27/28] style/text editor/forms: restyle text areas --- apps/client/src/stylesheets/theme-next/forms.css | 3 +++ 1 file changed, 3 insertions(+) diff --git a/apps/client/src/stylesheets/theme-next/forms.css b/apps/client/src/stylesheets/theme-next/forms.css index bb2eec953..86fad2682 100644 --- a/apps/client/src/stylesheets/theme-next/forms.css +++ b/apps/client/src/stylesheets/theme-next/forms.css @@ -158,6 +158,7 @@ input[type="datetime-local"], :root input.ck.ck-input-number, textarea.form-control, textarea, +:root textarea.ck.ck-textarea, .tn-input-field { outline: 3px solid transparent; outline-offset: 6px; @@ -178,6 +179,7 @@ input[type="datetime-local"]:hover, :root input.ck.ck-input-number:not([readonly="true"]):hover, textarea.form-control:hover, textarea:hover, +:root textarea.ck.ck-textarea:hover, .tn-input-field:hover { background: var(--input-hover-background); color: var(--input-hover-color); @@ -194,6 +196,7 @@ input[type="datetime-local"]:focus, :root input.ck.ck-input-number:focus, textarea.form-control:focus, textarea:focus, +:root textarea.ck.ck-textarea:focus, .tn-input-field:focus, .tn-input-field:focus-within { box-shadow: unset; From a9564f8f389b442564ccb504eea591f6c0521f4f Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Wed, 3 Sep 2025 05:25:26 +0300 Subject: [PATCH 28/28] style/launchbar buttons: fix broken hover state when background effects are enabled --- apps/client/src/stylesheets/style.css | 2 +- apps/client/src/stylesheets/theme-next/shell.css | 3 +-- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/apps/client/src/stylesheets/style.css b/apps/client/src/stylesheets/style.css index 0d192381d..41bdd2154 100644 --- a/apps/client/src/stylesheets/style.css +++ b/apps/client/src/stylesheets/style.css @@ -1457,7 +1457,7 @@ body:not(.mobile) #launcher-pane.horizontal .dropdown-submenu > .dropdown-menu { cursor: pointer; border: none; color: var(--launcher-pane-text-color); - background-color: var(--launcher-pane-background-color); + background: transparent; flex-shrink: 0; } diff --git a/apps/client/src/stylesheets/theme-next/shell.css b/apps/client/src/stylesheets/theme-next/shell.css index ec5d33940..b3b22f3d8 100644 --- a/apps/client/src/stylesheets/theme-next/shell.css +++ b/apps/client/src/stylesheets/theme-next/shell.css @@ -59,8 +59,7 @@ body.background-effects.platform-win32.layout-vertical { } body.background-effects.platform-win32, -body.background-effects.platform-win32 #root-widget, -body.background-effects.platform-win32 #launcher-pane .launcher-button { +body.background-effects.platform-win32 #root-widget { background: transparent !important; }