style(next): reorganize CSS

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 {
+ * TOASTS
-    border-radius: 10px;
+ */
-    background: var(--tool-dialog-background-color) !important;
+
-    user-select: none;
+ #toast-container {
-    box-shadow: 10px 10px 93px -25px var(--tool-dialog-shadow-color);
+    /* 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);
 }

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;

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 */