diff --git a/apps/client/src/stylesheets/style.css b/apps/client/src/stylesheets/style.css index a624fe686..cbc9efc30 100644 --- a/apps/client/src/stylesheets/style.css +++ b/apps/client/src/stylesheets/style.css @@ -1463,7 +1463,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; } @@ -2366,3 +2366,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-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; 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; diff --git a/apps/client/src/stylesheets/theme-next/base.css b/apps/client/src/stylesheets/theme-next/base.css index 524bb8140..a75ff689b 100644 --- a/apps/client/src/stylesheets/theme-next/base.css +++ b/apps/client/src/stylesheets/theme-next/base.css @@ -329,6 +329,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; } /* diff --git a/apps/client/src/stylesheets/theme-next/forms.css b/apps/client/src/stylesheets/theme-next/forms.css index f4465f905..86fad2682 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-replaceall, .ck-button-replace).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-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); } @@ -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-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; @@ -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-replaceall, .ck-button-replace).ck-button_with-text.ck-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: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); } @@ -149,8 +154,11 @@ input[type="password"], input[type="date"], input[type="time"], input[type="datetime-local"], +:root input.ck.ck-input-text, +: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; @@ -167,8 +175,11 @@ input[type="password"]:hover, input[type="date"]:hover, input[type="time"]:hover, input[type="datetime-local"]: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, +:root textarea.ck.ck-textarea:hover, .tn-input-field:hover { background: var(--input-hover-background); color: var(--input-hover-color); @@ -181,8 +192,11 @@ input[type="password"]:focus, input[type="date"]:focus, input[type="time"]:focus, input[type="datetime-local"]:focus, +:root input.ck.ck-input-text: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; diff --git a/apps/client/src/stylesheets/theme-next/notes/text.css b/apps/client/src/stylesheets/theme-next/notes/text.css index 404a47fec..6499fa0b4 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; } /* @@ -307,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 { @@ -363,19 +369,86 @@ color: var(--accent); } -/* Action buttons */ +/* Text snippet dropdown */ -:root .ck-link-actions button.ck-button, -:root .ck-link-form button.ck-button { - --ck-border-radius: 6px; - - background: transparent; - box-shadow: unset; +div.ck-template-form { + padding: 8px; } -:root .ck-link-actions button.ck-button:hover, -:root .ck-link-form button.ck-button:hover { - background: var(--hover-item-background-color); +div.ck-template-form .ck-labeled-field-view { + margin-bottom: 8px; +} + +/* 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; +} + +:root div.ck-template-form .note-icon { + color: var(--menu-item-icon-color); +} + +/* Template name */ +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; +} + +/* Template description */ +:root div.ck-template-form .ck-template-form__description { + opacity: .5; + 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; +} + +/* Link dropdown */ + +:root .ck.ck-form.ck-link-form ul.ck-link-form__providers-list { + 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:not(.ck-list-item-button) { + 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) */ @@ -392,6 +465,58 @@ background: transparent; } +/* + * FORMS + */ + +/* + * Buttons + */ + +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; +} + +/* + * Text boxes + */ + +.ck.ck-labeled-field-view { + 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 { + /* 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; + 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) { + margin-inline-start: 16px; +} + +.ck.ck-form__row_with-submit button { + margin-top: var(--ck-input-label-height); +} + +.ck.ck-form__header { + border-bottom: none; +} + /* * EDITOR'S CONTENT */ diff --git a/apps/client/src/stylesheets/theme-next/shell.css b/apps/client/src/stylesheets/theme-next/shell.css index a6e31de5d..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; } @@ -575,31 +574,20 @@ div.quick-search .search-button.show { * Quick search results */ +div.quick-search .dropdown-menu { + --quick-search-item-delimiter-color: transparent; + --menu-item-icon-vert-offset: -.065em; +} + /* Item */ .quick-search .dropdown-menu *.dropdown-item { 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; } -/* 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; @@ -622,9 +610,8 @@ div.quick-search .search-button.show { font-weight: 600; } -/* Divider line */ -.quick-search .dropdown-item::after { - display: none; +.quick-search div.dropdown-divider { + margin: 8px 0; } /* diff --git a/apps/client/src/widgets/quick_search.ts b/apps/client/src/widgets/quick_search.ts index 95728b99e..38c823864 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 { @@ -92,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 */ @@ -106,6 +110,10 @@ const TPL = /*html*/` margin: 0; } + .quick-search .bx-loader { + margin-inline-end: 4px; + } +
@@ -220,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)}`); 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"] + }; +}