From 5cc013a42cbe5fb1a3299c194efbcb8e472692de Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=C3=A1=C5=A1=20Ml=C3=A1dek?= <t@mldk.cz>
Date: Mon, 23 Oct 2023 11:20:59 +0200
Subject: [PATCH] style(webui): non-inspect columns are lighter

---
 webui/src/components/BrowseColumn.svelte | 9 +++++++--
 webui/src/styles/colors-app.scss         | 1 +
 webui/src/views/Browse.svelte            | 2 ++
 3 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/webui/src/components/BrowseColumn.svelte b/webui/src/components/BrowseColumn.svelte
index 6b55d49..8ab4e2d 100644
--- a/webui/src/components/BrowseColumn.svelte
+++ b/webui/src/components/BrowseColumn.svelte
@@ -12,6 +12,7 @@
   export let address: string | undefined = undefined;
   export let index: number;
   export let only: boolean;
+  export let background = "var(--background-lighter)";
 
   let detail = only;
   let detailChanged = false;
@@ -62,7 +63,11 @@
   }
 </script>
 
-<div class="browse-column" class:detail>
+<div
+  class="browse-column"
+  class:detail
+  style="--background-color: {background}"
+>
   <div class="view" style="--width: {width}px">
     <header>
       {#if address}
@@ -126,7 +131,7 @@
     display: flex;
     flex-direction: column;
 
-    background: var(--background-lighter);
+    background: var(--background-color);
     color: var(--foreground-lighter);
     border: 1px solid var(--foreground-lightest);
     border-radius: 0.5em;
diff --git a/webui/src/styles/colors-app.scss b/webui/src/styles/colors-app.scss
index c4d3e3b..0a2812a 100644
--- a/webui/src/styles/colors-app.scss
+++ b/webui/src/styles/colors-app.scss
@@ -16,6 +16,7 @@
   --foreground-lightest: #{$rebase2};
   --background: #{$rebase03};
   --background-lighter: #{$rebase02};
+  --background-lightest:  #{color.adjust($rebase02, $lightness: 1.5%)};
   --primary: #{colors.$blue};
   --primary-lighter: #{color.adjust(colors.$blue, $lightness: 25%)};
 
diff --git a/webui/src/views/Browse.svelte b/webui/src/views/Browse.svelte
index cbb0252..b611248 100644
--- a/webui/src/views/Browse.svelte
+++ b/webui/src/views/Browse.svelte
@@ -91,6 +91,7 @@
           {only}
           on:close={() => close(index)}
           on:detail={(ev) => onDetailChanged(index, ev)}
+          background="var(--background-lightest)"
         >
           <CombineColumn spec={address} on:close={() => close(index)} />
         </BrowseColumn>
@@ -103,6 +104,7 @@
             close(index);
           }}
           on:detail={(ev) => onDetailChanged(index, ev)}
+          background="var(--background-lightest)"
         >
           <SelectedColumn />
         </BrowseColumn>