Style tweaks

resources/css/common.css

@@ -103,6 +103,7 @@ html[data-theme='dark'] {
   --ls-warning-text-color: var(--color-yellow-100);
   --ls-warning-background-color: var(--color-yellow-900);
   --ls-focus-ring-color: rgba(18, 98, 119, 0.5);
+  --ls-header-button-background: #dee4ea;
   --color-level-1: var(--ls-secondary-background-color);
   --color-level-2: var(--ls-tertiary-background-color);
   --color-level-3: var(--ls-quaternary-background-color);
@@ -135,7 +136,7 @@ html[data-theme='light'] {
   --ls-menu-hover-color: var(--ls-a-chosen-bg);
   --ls-primary-text-color: #433f38;
   --ls-secondary-text-color: #161e2e;
-  --ls-title-text-color: var(--ls-primary-text-color);
+  --ls-title-text-color: var(--ls-header-button-background);
   --ls-link-text-color: #106ba3;
   --ls-link-text-hover-color: #1a537c;
   --ls-link-ref-text-color: #106ba3;
@@ -177,6 +178,7 @@ html[data-theme='light'] {
   --ls-warning-text-color: var(--color-yellow-800);
   --ls-warning-background-color: var(--color-yellow-100);
   --ls-focus-ring-color: rgba(66, 133, 244, 0.5);
+  --ls-header-button-background: rgba(15, 20, 25, 1);
   --color-level-1: var(--ls-secondary-background-color);
   --color-level-2: var(--ls-tertiary-background-color);
   --color-level-3: var(--ls-quaternary-background-color);
@@ -517,8 +519,9 @@ i.ti {
 h1.title {
   margin-bottom: 1.5rem;
   color: var(--ls-title-text-color, #222);
+  font-family: -apple-system, system-ui, var(--ls-font-family), sans-serif;
   font-size: var(--ls-page-title-size, 36px);
-  font-weight: 600;
+  font-weight: 500;
 }
 
 .title .page-icon {

src/main/frontend/components/content.cljs

@@ -243,7 +243,7 @@
 
          (block-template block-id)
 
-         (cond 
+         (cond
            (srs/card-block? block)
            (ui/menu-link
             {:key      "Preview Card"
@@ -395,7 +395,7 @@
   [:div {:id id}
    (if hiccup
      hiccup
-     [:div.text-gray-500.cursor "Click to edit"])])
+     [:div.cursor "Click to edit"])])
 
 (rum/defc non-hiccup-content < rum/reactive
   [id content on-click on-hide config format]
@@ -426,7 +426,7 @@
            {:id id
             :on-click on-click}
            (if (string/blank? content)
-             [:div.text-gray-500.cursor "Click to edit"]
+             [:div.cursor "Click to edit"]
              content)])))))
 
 (defn- set-draw-iframe-style!

src/main/frontend/components/content.css

@@ -16,4 +16,8 @@
   opacity-100 scale-100 absolute;
 
   z-index: calc(var(--ls-z-index-level-1) + 1);
+
+  a:hover {
+    color: var(--ls-primary-text-color);
+  }
 }

src/main/frontend/components/header.css

@@ -19,7 +19,7 @@
 
   > .l {
     @apply pl-2;
-    
+
     width: var(--ls-left-sidebar-width);
     height: 100%;
     align-items: center;
@@ -44,7 +44,6 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    opacity: .8;
 
     .ti, .tie {
       font-size: 20px;

src/main/frontend/components/page.cljs

@@ -102,7 +102,7 @@
                                          (when (= "Enter" (util/ekey e))
                                            (handler-fn)))
                          :on-click handler-fn}
-       [:span.opacity-50
+       [:span.opacity-70
         "Click here to edit..."]]]]))
 
 (rum/defc add-button

src/main/frontend/components/reference.cljs

@@ -127,12 +127,12 @@
         *collapsed? (atom nil)]
     (ui/foldable
      [:div.flex.flex-row.flex-1.justify-between.items-center
-      [:h2.font-bold.opacity-80 (str
-                                 (when (seq filters)
-                                   (str filter-n " of "))
-                                 total
-                                 " Linked Reference"
-                                 (when (> total 1) "s"))]
+      [:h2.font-medium (str
+                        (when (seq filters)
+                          (str filter-n " of "))
+                        total
+                        " Linked Reference"
+                        (when (> total 1) "s"))]
       [:a.filter.fade-link
        {:title "Filter"
         :on-mouse-over (fn [_e]
@@ -275,7 +275,7 @@
         [:div.references.mt-6.flex-1.flex-row
          [:div.content.flex-1
           (ui/foldable
-           [:h2.font-bold.opacity-80
+           [:h2.font-medium
             (if @n-ref
               (str @n-ref " Unlinked Reference" (when (> @n-ref 1)
                                                   "s"))

src/main/frontend/components/right_sidebar.cljs

@@ -24,7 +24,7 @@
   []
   (when-not (util/mobile?)
     (ui/with-shortcut :ui/toggle-right-sidebar "left"
-      [:button.button.icon.fade-link.toggle-right-sidebar
+      [:button.button.icon.toggle-right-sidebar
        {:title "Toggle right sidebar"
         :on-click ui-handler/toggle-right-sidebar!}
        (ui/icon "layout-sidebar-right" {:style {:fontSize "20px"}})])))
@@ -261,8 +261,7 @@
                                                          (state/sidebar-add-block! repo "help" :help))}
           (t :right-side-bar/help)]]]
 
-       [:div
-        (toggle)]]
+       (toggle)]
 
       [:.sidebar-item-list.flex-1.scrollbar-spacing.flex.flex-col.gap-2
        (if @*anim-finished?

src/main/frontend/components/right_sidebar.css

@@ -8,10 +8,6 @@ html[data-theme=light] {
       --ls-page-inline-code-bg-color: var(--ls-quaternary-background-color);
       --ls-page-blockquote-bg-color: var(--ls-quaternary-background-color);
     }
-
-    .cp__right-sidebar-topbar button {
-      opacity: 1;
-    }
   }
 }
 
@@ -21,6 +17,17 @@ html[data-theme=light] {
 }
 
 
-html[data-theme='light'] a.toggle:hover {
+html[data-theme=light] a.toggle:hover {
   color: var(--ls-primary-text-color);
 }
+
+.cp__header a, .cp__header button, .cp__right-sidebar-topbar button {
+    opacity: 1;
+    color: var(--ls-header-button-background);
+}
+
+html[data-theme=dark] {
+    .cp__header a, .cp__header button, .cp__right-sidebar-topbar button {
+        opacity: 0.7;
+    }
+}

src/main/frontend/components/scheduled_deadlines.cljs

@@ -22,7 +22,7 @@
                                  (db/get-date-scheduled-or-deadlines (string/capitalize page-name)))]
     (when (seq scheduled-or-deadlines)
       (ui/foldable
-       [:h2.font-bold.opacity-50 "SCHEDULED AND DEADLINE"]
+       [:h2.font-medium "SCHEDULED AND DEADLINE"]
        [:div.scheduled-deadlines.references-blocks.mb-6
         (let [ref-hiccup (block/->hiccup scheduled-or-deadlines
                                          {:id (str page-name "-agenda")

src/main/frontend/components/sidebar.cljs

@@ -52,7 +52,7 @@
     [:div.header.items-center.mb-1
      {:on-click (fn [^js/MouseEvent _e]
                   (state/toggle-navigation-item-collapsed! class))}
-     [:div.font-medium.fade-link name]
+     [:div.font-medium name]
      [:span
       [:a.more svg/arrow-down-v2]]]
     [:div.bd child]]])
@@ -439,7 +439,7 @@
          [:div.mt-20
           [:div.ls-center
            (ui/loading (t :loading))]]
-         
+
          :else
          [:div
           {:class (if margin-less-pages? "" (util/hiccup->class "mx-auto.pb-24"))

src/main/frontend/components/sidebar.css

@@ -17,9 +17,6 @@
   }
 }
 
-.is-electron.is-mac .cp__sidebar-left-layout {
-}
-
 #app-container {
   display: flex;
   flex: 0 0 100%;
@@ -125,7 +122,6 @@
     text-align: center;
     display: inline-block;
     line-height: 1em;
-    opacity: .6;
   }
 
   a.item {
@@ -146,10 +142,6 @@
     &.active, &:active {
       background-color: var(--ls-quaternary-background-color);
     }
-
-    &:hover {
-      color: var(--ls-secondary-text-color);
-    }
   }
 
   .nav-contents-container {
@@ -178,15 +170,10 @@
 
       > span {
         > a {
-          opacity: .4;
           padding-left: 12px;
           display: none;
           transition: none;
 
-          &:hover {
-            opacity: 1 !important;
-          }
-
           &:last-child {
             transform: translateY(-6px) translateX(2px) rotate(90deg);
             transform-origin: center center;
@@ -214,10 +201,6 @@
         }
       }
 
-      &:active {
-        opacity: .8;
-      }
-
       .wrap-th {
         > span {
           font-size: 11px;
@@ -237,7 +220,6 @@
         a {
           width: 100%;
           padding: 2px 24px;
-          color: var(--ls-primary-text-color);
           transition: background-color .3s;
 
           .page-title {
@@ -255,10 +237,6 @@
           &:hover {
             background-color: var(--ls-quaternary-background-color);
           }
-
-          &:active {
-            opacity: .7;
-          }
         }
       }
     }
@@ -354,7 +332,12 @@
   transition: width .3s;
 
   a {
-    color: var(--ls-primary-text-color);
+    color: var(--ls-header-button-background);
+    opacity: 0.9;
+  }
+
+  a:hover {
+    opacity: 1;
   }
 
   > .shade-mask {
@@ -480,7 +463,7 @@ html[data-theme='dark'] {
     > .inner {
       @apply font-bold
       rounded-full h-8 w-8 flex items-center justify-center font-bold
-      opacity-70 hover:opacity-100 select-none cursor-help;
+      select-none cursor-help;
 
       background-color: var(--ls-secondary-background-color);
     }
@@ -625,3 +608,15 @@ html[data-theme='dark'] {
 .full-height-without-header {
   height: calc(100vh - var(--ls-headbar-height) - 4rem);
 }
+
+a.ui__modal-close svg, a.close svg, span.rotating-arrow svg {
+    color: var(--ls-primary-text-color);
+}
+a.ui__modal-close, a.close {
+    color: var(--ls-primary-text-color);
+    opacity: 0.6;
+}
+
+a.ui__modal-close:hover, a.close:hover {
+    opacity: 1;
+}