🌠 Fixes, design improvements

Fixes #83 Fixes #82 Fixes #81 + new styling and stuff
primary-theme · Mar 6, 2022 · 72e40bc · 72e40bc
1 parent 262aa51
commit 72e40bc
Show file tree

Hide file tree

Showing 19 changed files with 1,207 additions and 580 deletions.
diff --git a/obsidian.css b/obsidian.css
diff --git a/obsidian.css.map b/obsidian.css.map
diff --git a/scss/10_base/_var__global.scss b/scss/10_base/_var__global.scss
@@ -44,21 +44,6 @@
     /*  Based on Standard 16px, Ratio 1.388  */
     --line-width: 700px;
 
-    // --font-scale-000: 0.547em;
-    // --font-scale-00: 0.676em;
-    // --font-scale-0: 0.81em;
-    // --font-scale-0-5: 0.875em;
-    // --font-scale-1: 1em;
-    // --font-scale-2: 1.198em;
-    // --font-scale-3: 1.48em;
-    // --font-scale-4: 1.774em;
-    // --font-scale-5: 2.19em;
-    // --font-scale-6: 2.625em;
-    // --font-scale-7: 3.242em;
-    // --font-scale-8: 3.885em;
-    // --font-scale-9: 4.798em;
-    // --font-scale-10: 5.75em;
-
     --font-scale-000: 0.547em;
     --font-scale-00: 0.676em;
     --font-scale-0: 0.81em;

diff --git a/scss/20_workspace/_tab-content.scss b/scss/20_workspace/_tab-content.scss
@@ -38,6 +38,13 @@
     }
 }
 
+.pane-empty {
+    color: var(--text-faint);
+    font-style: italic;
+    margin: auto auto;
+    width: 17ch;
+}
+
 /*─────────Node Insert Event──────────*/
 // Container for Outgoing Links and Backlinks Tab and more
 .workspace-split.mod-left-split,
@@ -67,11 +74,6 @@
     overflow: auto;
 }
 
-/*─────────Outline Tab──────────*/
-.outline {
-    font-size: var(--font-scale-0-5);
-}
-
 /*─────────Search Results──────────*/
 .search-result {
     &-container:not(.mod-global-search) {
@@ -85,13 +87,6 @@
                 var(--scale-0-0)
                 var(--scale-0-0)
                 var(--scale-2-8);
-
-        .backlink-pane & {
-            margin: var(--scale-0-0)
-                    var(--scale-0-0)
-                    var(--scale-0-0)
-                    var(--scale-2-8);
-        }
     }
 
     &.search-result {
@@ -186,8 +181,11 @@
     }
 }
 
-/*─────────Tree Items for Tabs──────────*/
+.search-input-container .search-input-clear-button {
+    top: 9px;
+}
 
+/*─────────Tree Items for Tabs──────────*/
 .tree-item-self {
     line-height: var(--line-height-0-5);
     padding:    calc(1px + var(--scale-2-2))
@@ -204,10 +202,6 @@
             font-family: var(--font-code);
             font-size: var(--font-scale-0);
         }
-
-        .outgoing-link-pane & {
-            font-size: var(--font-scale-0-5);
-        }
     }
 
     & .tree-item-icon {
@@ -226,43 +220,6 @@
     }
 }
 
-/* Items in Outline Pane */
-.workspace-leaf-content[data-type="outline"] {
-    .tree-item-self {
-        padding:    calc(1px + var(--scale-2-2))
-                    var(--scale-2-2)
-                    calc(1px + var(--scale-2-2))
-                    calc(5px + var(--scale-8-3));
-
-        & .tree-item-icon {
-            margin-left: -21px;
-        }
-    }
-}
-
-
-/* Items in Outgoing Links Pane */
-.outgoing-link-item {
-    font-size: var(--font-scale-0-5);
-    margin: var(--scale-0-0)
-            var(--scale-0-0)
-            var(--scale-0-0)
-            var(--scale-2-2);
-
-    .search-result-container &
-    .tree-item-self span.tree-item-icon {
-        margin: var(--scale-0-0)
-                var(--scale-0-0)
-                var(--scale-0-0)
-                calc(-1 * var(--scale-2-2));
-    }
-}
-
-/* Items in Backlinks Pane */
-.backlink-pane {
-    font-size: var(--font-scale-0-5);
-}
-
 /*~ Tree Items for Tabs for Light Mode ~*/
 .theme-light .tree-item-self {
     color: var(--color-l-gray-80);
@@ -275,7 +232,7 @@
 
             & .tree-item-flair {
                 color: var(--color-gray-50);
-                background: var(--color-l-gray-20);
+                background: var(--color-l-whiter);
             }
         }
 
@@ -327,4 +284,40 @@
             }
         }
     }
+}
+
+/* Tree Item Self Light and Dark Mode for Backlink and Outgoing Pane */
+body.theme-light .backlink-pane .tree-item-self,
+body.theme-light .outgoing-link-pane .tree-item-self,
+body.theme-dark .backlink-pane .tree-item-self,
+body.theme-dark .outgoing-link-pane .tree-item-self {
+    color: var(--md-color-text-muted);
+    background: transparent;
+
+    &.is-clickable {
+        &:hover {
+            color: var(--md-color-text-normal);
+            background: transparent;
+
+            & .tree-item-flair {
+                color: var(--md-color-text-normal);
+                background: transparent;
+            }
+        }
+
+        & .tree-item-flair {
+            color: var(--md-color-text-muted);
+                background: transparent;
+        }
+
+        &:active {
+            color: var(--md-color-text-faint);
+            background: transparent;
+
+            & .tree-item-flair {
+                color: var(--md-color-text-faint);
+                background: transparent;
+            }
+        }
+    }
 }
diff --git a/scss/30_note/_md-active-line.scss b/scss/30_note/_md-active-line.scss
@@ -1,4 +1,19 @@
 /*──────────Active Line──────────*/
+:root {
+    .theme-light {
+        --md-color-activeline: rgba(255, 255, 255, 0.4);
+    }
+
+    .theme-dark {
+        --md-color-activeline: rgba(0, 0, 0, 0.18);
+    }
+}
+
+.no-md-activeline.theme-light,
+.no-md-activeline.theme-dark {
+    --md-color-activeline: transparent !important;
+}
+
 .workspace-leaf:not(.workspace-leaf.mod-active) {
     & .cm-active,
     & .CodeMirror-activeline .CodeMirror-linebackground,
@@ -10,13 +25,7 @@
 .CodeMirror-activeline .CodeMirror-linebackground,
 .CodeMirror-activeline-gutter,
 .cm-active:not(.cm-gutterElement) {
-    .theme-light & {
-        background-color: var(--color-l-gray-10);
-    }
-
-    .theme-dark & {
-        background-color: var(--color-d-black);
-    }
+    background: var(--md-color-activeline);
 }
 
 // Activeline on Gutter Color (Live Preview)

diff --git a/scss/30_note/_md-checkboxes.scss b/scss/30_note/_md-checkboxes.scss
@@ -4,13 +4,12 @@ input[type=checkbox] {
     appearance: none;
     filter: none;
 
-    height: 1.5em;
-    width: 1.5em;
+    height: calc(3px + var(--editor-font-size));
+    width: calc(3px + var(--editor-font-size));
     border-radius: var(--scale-2-2);
     border: 1px solid var(--text-faint);
     padding: 0;
     margin: 0;
-    margin-top: -3px;
     margin-left: 6px;
 
     &:hover {
@@ -20,7 +19,7 @@ input[type=checkbox] {
     }
 
     &:checked {
-        background-position: 3px, center;
+        background-position: center;
         background-size: 72%;
         background-repeat: no-repeat;
         background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='fill:  %23fff' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --%3E%3Cpath d='M438.6 105.4C451.1 117.9 451.1 138.1 438.6 150.6L182.6 406.6C170.1 419.1 149.9 419.1 137.4 406.6L9.372 278.6C-3.124 266.1-3.124 245.9 9.372 233.4C21.87 220.9 42.13 220.9 54.63 233.4L159.1 338.7L393.4 105.4C405.9 92.88 426.1 92.88 438.6 105.4H438.6z'/%3E%3C/svg%3E");
@@ -64,6 +63,10 @@ input[type=checkbox] {
 }
 
 /* Source View Checkbox Fix */
+.markdown-source-view input.task-list-item-checkbox {
+    margin-top: -3px;
+}
+
 .cm-s-obsidian span.cm-formatting-task {
     font-family: var(--font-code);
 }

diff --git a/scss/30_note/_md-find-replace.scss b/scss/30_note/_md-find-replace.scss
@@ -0,0 +1,105 @@
+/*──────────Document Search and Replace──────────*/
+.markdown-reading-view.is-searching,
+.markdown-source-view.is-replacing,
+.markdown-source-view.is-searching {
+    flex-direction: column-reverse;
+}
+
+.document {
+    &-search-container {
+        height: 44px;
+        width: 97%;
+        max-width: 600px;
+
+        padding: 1px 2px;
+        border: 1px solid var(--background-modifier-border);
+        border-radius: var(--scale-2-4);
+
+        margin: var(--scale-2-4) auto;
+
+        &.mod-replace-mode {
+            height: 82px;
+            padding: 0;
+        }
+
+        .theme-light & {
+            background: var(--color-l-gray-10);
+        }
+
+        .theme-dark & {
+            background: var(--color-d-gray-80);
+        }
+    }
+
+    &-replace {
+        border-top: 1px solid var(--background-modifier-border);
+    }
+
+    &-search-input.document-search-input,
+    &-replace-input.document-replace-input {
+        width: 20%;
+        margin: var(--scale-2-3)
+                var(--scale-2-3)
+                var(--scale-2-3)
+                var(--scale-2-3);
+    }
+
+    &-search-button.document-search-button {
+        line-height: 0;
+        border-radius: var(--scale-2-2);
+        padding: var(--scale-2-2)
+                var(--scale-2-3)
+                var(--scale-2-3)
+                var(--scale-2-3) !important;
+        margin: calc(1px + var(--scale-2-3))
+                var(--scale-2-1)
+                var(--scale-0-0)
+                var(--scale-2-1);
+
+        &:last-child {
+            margin-right: var(--scale-2-3);
+        }
+
+        // Styling for Light and Dark Mode
+        body.theme-light .workspace & {
+            color: var(--text-on-accent);
+            background: var(--interactive-accent);
+
+            &:hover {
+                background: var(--interactive-accent-hover);
+            }
+        }
+
+        body.theme-dark .workspace & {
+            color: var(--text-on-accent);
+            background: var(--interactive-accent);
+
+            &:hover {
+                background: var(--interactive-accent-hover);
+            }
+        }
+    }
+}
+
+.document-search-close-button {
+    font-family: Inter, sans-serif;
+    font-weight: 300;
+    font-size: var(--scale-8-3);
+
+    height: var(--scale-2-8);
+    width: var(--scale-2-8);
+    top: 2px;
+    margin-right: 2px;
+
+    transition: var(--duration-superfast)
+                var(--motion-smooth);
+    &:before {
+        &:hover {
+            color: var(--text-muted);
+        }
+
+        &:active {
+            color: var(--text-faint);
+        }
+    }
+}