style(webui): non-inspect columns are lighter

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;

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%)};
 

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>