From 384ea412eaef409cf9a24452e8af96b167e3330b Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Tue, 25 Feb 2025 00:13:37 +0600
Subject: [PATCH] web/layout: bright sidebar in light mode, content frame

---
 web/src/components/sidebar/SidebarTab.svelte | 14 ++++---
 web/src/routes/+layout.svelte                | 43 +++++++++++++++++---
 2 files changed, 46 insertions(+), 11 deletions(-)

diff --git a/web/src/components/sidebar/SidebarTab.svelte b/web/src/components/sidebar/SidebarTab.svelte
index df421738..e7cf5481 100644
--- a/web/src/components/sidebar/SidebarTab.svelte
+++ b/web/src/components/sidebar/SidebarTab.svelte
@@ -125,14 +125,18 @@
     }
 
     @media (hover: hover) {
-        .sidebar-tab:active:not(.active) {
-            opacity: 1;
-            background-color: var(--sidebar-hover);
+        .sidebar-tab:hover:not(.active) {
+            background-color: var(--button-hover-transparent);
         }
 
-        .sidebar-tab:hover:not(.active) {
+        .sidebar-tab:active:not(.active) {
+            background-color: var(--button-press-transparent);
+        }
+
+        .sidebar-tab:hover:not(.active),
+        .sidebar-tab:active:not(.active) {
             opacity: 1;
-            background-color: var(--sidebar-hover);
+            box-shadow: 0 0 0 1.5px var(--sidebar-stroke) inset;
         }
     }
 
diff --git a/web/src/routes/+layout.svelte b/web/src/routes/+layout.svelte
index 233f441a..30125532 100644
--- a/web/src/routes/+layout.svelte
+++ b/web/src/routes/+layout.svelte
@@ -143,9 +143,11 @@
 
         --dialog-backdrop: rgba(255, 255, 255, 0.3);
 
-        --sidebar-bg: #000000;
-        --sidebar-highlight: #ffffff;
-        --sidebar-hover: rgba(255, 255, 255, 0.1);
+        --sidebar-bg: var(--button);
+        --sidebar-highlight: var(--secondary);
+        --sidebar-stroke: rgba(0, 0, 0, 0.04);
+
+        --content-border: rgba(0, 0, 0, 0.03);
 
         --input-border: #adadb7;
 
@@ -169,6 +171,9 @@
             )
         );
 
+        --content-border-thickness: 1.5px;
+        --content-margin: calc(var(--sidebar-inner-padding) + var(--content-border-thickness));
+
         --safe-area-inset-top: env(safe-area-inset-top);
         --safe-area-inset-bottom: env(safe-area-inset-bottom);
 
@@ -221,7 +226,6 @@
         --button-box-shadow: 0 0 0 1.5px var(--button-stroke) inset;
 
         --button-elevated: #282828;
-        --button-elevated-hover: #323232;
         --button-elevated-hover: #2f2f2f;
         --button-elevated-press: #343434;
 
@@ -233,8 +237,10 @@
         --dialog-backdrop: rgba(0, 0, 0, 0.3);
 
         --sidebar-bg: #131313;
-        --sidebar-highlight: #f2f2f2;
-        --sidebar-hover: rgba(255, 255, 255, 0.1);
+        --sidebar-highlight: var(--secondary);
+        --sidebar-stroke: rgba(255, 255, 255, 0.04);
+
+        --content-border: rgba(255, 255, 255, 0.045);
 
         --input-border: #383838;
 
@@ -312,6 +318,10 @@
 
         #cobalt[data-iphone="true"] #content {
             padding-right: env(safe-area-inset-right);
+            /* disable the desktop frame */
+            margin: 0;
+            box-shadow: none;
+            border-radius: 0;
         }
     }
 
@@ -319,9 +329,25 @@
         display: flex;
         overflow: scroll;
         background-color: var(--primary);
+        box-shadow: 0 0 0 var(--content-border-thickness) var(--content-border);
+
+        border-radius: 8px;
+        margin: var(--content-margin);
+        margin-left: var(--content-border-thickness);
+    }
+
+    #content:dir(rtl) {
+        margin-left: var(--content-margin);
+        margin-right: var(--content-border-thickness);
     }
 
     @media screen and (max-width: 535px) {
+        /* dark navbar cuz it looks better on mobile */
+        :global([data-theme="light"]) {
+            --sidebar-bg: #000000;
+            --sidebar-highlight: var(--primary);
+        }
+
         #cobalt {
             display: grid;
             grid-template-columns: unset;
@@ -336,6 +362,11 @@
         #content:dir(rtl) {
             padding-top: env(safe-area-inset-top);
             order: -1;
+
+            margin: 0;
+            box-shadow: none;
+            border-radius: 0;
+
             border-bottom-left-radius: calc(var(--border-radius) * 2);
             border-bottom-right-radius: calc(var(--border-radius) * 2);
         }