From 5f12ddaa140cb2506f4772eb652fc00e9fd41c30 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Thu, 20 Mar 2025 10:20:25 +0200 Subject: [PATCH] style(next): reorganize CSS --- src/public/stylesheets/theme-next/base.css | 147 +++++++++--------- src/public/stylesheets/theme-next/dialogs.css | 16 +- src/public/stylesheets/theme-next/pages.css | 4 +- 3 files changed, 86 insertions(+), 81 deletions(-) diff --git a/src/public/stylesheets/theme-next/base.css b/src/public/stylesheets/theme-next/base.css index cf24bc40c..a43169f4e 100644 --- a/src/public/stylesheets/theme-next/base.css +++ b/src/public/stylesheets/theme-next/base.css @@ -11,6 +11,10 @@ src: url(../../fonts/Inter/Inter-VariableFont_opsz\,wght.ttf); } +/* + * GLOBAL VARIABLES + */ + :root { --main-font-family: "Inter", sans-serif; @@ -259,16 +263,50 @@ body.mobile .dropdown-menu .dropdown-item.submenu-open .dropdown-toggle::after { transform: rotate(270deg); } -/* Tool dialogs - small dialogs without a backdrop */ -div.tn-tool-dialog { - border-radius: 10px; - background: var(--tool-dialog-background-color) !important; - user-select: none; - box-shadow: 10px 10px 93px -25px var(--tool-dialog-shadow-color); +/* + * TOASTS + */ + + #toast-container { + /* The vertical gap between toasts */ + gap: 10px; +} + +#toast-container .toast { + --bs-toast-padding-x: 12px; + --bs-border-radius: 8px; + --bs-toast-bg: var(--toast-background); + --bs-toast-color: var(--toast-text-color); + --modal-control-button-background: var(--toast-close-button-background); + --modal-control-button-color: var(--bs-toast-color); + + display: flex; + flex-direction: row-reverse; + backdrop-filter: blur(6px); +} + +#toast-container .toast .toast-header { + padding: 0 !important; + background: transparent !important; + border-bottom: none; +} + +#toast-container .toast .toast-header strong { + /* The title of the toast is no longer displayed */ + display: none; +} + +#toast-container .toast .toast-header .btn-close { + margin: 0 var(--bs-toast-padding-x) 0 12px; + +} + +#toast-container .toast .toast-body { + flex-grow: 1; } /* - * NOTE TOOLTIP + * NOTE TOOLTIPS */ .tooltip .tooltip-inner:has(.note-tooltip-content) { @@ -335,77 +373,10 @@ div.tn-tool-dialog { transform: translateY(4%); } -/* - * Note search suggestions - */ - -/* List body */ -.jump-to-note-dialog .jump-to-note-results .aa-suggestions, -.note-detail-empty .aa-suggestions { - padding: 0; -} - -/* List item */ -.jump-to-note-dialog .aa-suggestions div, -.note-detail-empty .aa-suggestions div { - border-radius: 6px; - padding: 6px 12px; - color: var(--menu-text-color); - cursor: default; -} - -/* Selected list item */ -.jump-to-note-dialog .aa-suggestions div.aa-cursor, -.note-detail-empty .aa-suggestions div.aa-cursor { - background: var(--hover-item-background-color); - color: var(--hover-item-text-color); -} - -/* - * Toasts - */ - -#toast-container { - /* The vertical gap between toasts */ - gap: 10px; -} - -#toast-container .toast { - --bs-toast-padding-x: 12px; - --bs-border-radius: 8px; - --bs-toast-bg: var(--toast-background); - --bs-toast-color: var(--toast-text-color); - --modal-control-button-background: var(--toast-close-button-background); - --modal-control-button-color: var(--bs-toast-color); - - display: flex; - flex-direction: row-reverse; - backdrop-filter: blur(6px); -} - -#toast-container .toast .toast-header { - padding: 0 !important; - background: transparent !important; - border-bottom: none; -} - -#toast-container .toast .toast-header strong { - /* The title of the toast is no longer displayed */ - display: none; -} - -#toast-container .toast .toast-header .btn-close { - margin: 0 var(--bs-toast-padding-x) 0 12px; - -} - -#toast-container .toast .toast-body { - flex-grow: 1; -} - /* * NOTE LIST */ + .note-list .note-book-card { --note-list-horizontal-padding: 22px; --note-list-vertical-padding: 15px; @@ -525,4 +496,30 @@ div.tn-tool-dialog { .note-list.grid-view .ck-content figure.image { width: 25%; +} + +/* + * NOTE SEARCH SUGGESTIONS + */ + +/* List body */ +.jump-to-note-dialog .jump-to-note-results .aa-suggestions, +.note-detail-empty .aa-suggestions { + padding: 0; +} + +/* List item */ +.jump-to-note-dialog .aa-suggestions div, +.note-detail-empty .aa-suggestions div { + border-radius: 6px; + padding: 6px 12px; + color: var(--menu-text-color); + cursor: default; +} + +/* Selected list item */ +.jump-to-note-dialog .aa-suggestions div.aa-cursor, +.note-detail-empty .aa-suggestions div.aa-cursor { + background: var(--hover-item-background-color); + color: var(--hover-item-text-color); } \ No newline at end of file diff --git a/src/public/stylesheets/theme-next/dialogs.css b/src/public/stylesheets/theme-next/dialogs.css index dd8f083fc..23c3cf10a 100644 --- a/src/public/stylesheets/theme-next/dialogs.css +++ b/src/public/stylesheets/theme-next/dialogs.css @@ -95,8 +95,16 @@ border-top: unset; } +/* Tool dialogs - small dialogs without a backdrop */ +div.tn-tool-dialog { + border-radius: 10px; + background: var(--tool-dialog-background-color) !important; + user-select: none; + box-shadow: 10px 10px 93px -25px var(--tool-dialog-shadow-color); +} + /* - * JUMP TO NOTE + * JUMP TO NOTE DIALOG */ .jump-to-note-dialog .modal-dialog { @@ -147,7 +155,7 @@ } /* - * RECENT CHANGES + * RECENT CHANGES DIALOG */ .recent-changes-dialog .modal-body { @@ -292,7 +300,7 @@ } /* - * CHEATSHEET + * CHEATSHEET DIALOG */ .help-dialog .modal-content { @@ -372,7 +380,7 @@ color: var(--help-code-color); } -/* DELETE NOTE PREVIEW */ +/* DELETE NOTE PREVIEW DIALOG */ .delete-notes-list .note-path { padding-left: 8px; diff --git a/src/public/stylesheets/theme-next/pages.css b/src/public/stylesheets/theme-next/pages.css index bd87ac092..eb67263c0 100644 --- a/src/public/stylesheets/theme-next/pages.css +++ b/src/public/stylesheets/theme-next/pages.css @@ -1,5 +1,5 @@ /* - * LOG IN + * LOG IN PAGE */ .login-page { @@ -33,7 +33,7 @@ } /* - * SEARCH + * SEARCH PAGE */ /* Button bar */