diff --git a/ui/src/App.svelte b/ui/src/App.svelte index bc8bf79..a6db678 100644 --- a/ui/src/App.svelte +++ b/ui/src/App.svelte @@ -40,7 +40,7 @@ @import url("/assets/fonts/inter.css"); $primary: #2c3e50; - $primary-lighter: #3f5770; + $primary-lighter: #3a5068; $primary-lightest: #3a92f0; $background: white; @@ -50,7 +50,7 @@ --foreground: #{$primary}; --foreground-lighter: #{$primary-lighter}; --background: #{$background}; - --background-emph: #{color.scale($background, $lightness: -3%)}; + --background-emph: #{color.scale($background, $lightness: -4%)}; --primary-lightest: #{$primary-lightest}; --error: darkred; --warning: orange; diff --git a/ui/src/components/AttributeView.svelte b/ui/src/components/AttributeView.svelte index e76892e..a52f109 100644 --- a/ui/src/components/AttributeView.svelte +++ b/ui/src/components/AttributeView.svelte @@ -138,7 +138,7 @@ margin: 0; - background: var(--background); + background: var(--background-emph); font-weight: 600; line-height: 1; diff --git a/ui/src/components/Inspect.svelte b/ui/src/components/Inspect.svelte index 973fbfa..6caee5a 100644 --- a/ui/src/components/Inspect.svelte +++ b/ui/src/components/Inspect.svelte @@ -137,9 +137,6 @@ import Spinner from "./utils/Spinner.svelte"; flex: auto; display: flex; flex-direction: column; - & > * { - padding: 0 1rem; - } } .attributes { diff --git a/ui/src/views/Browse.svelte b/ui/src/views/Browse.svelte index 65f8c93..7382ad4 100644 --- a/ui/src/views/Browse.svelte +++ b/ui/src/views/Browse.svelte @@ -58,6 +58,8 @@ import IconButton from "../components/utils/IconButton.svelte"; .browser { display: flex; overflow-x: auto; + gap: 1rem; + padding: 0 1rem; // header margin magic height: calc(100% - 3.5rem - 1rem - 1px); @@ -74,13 +76,14 @@ import IconButton from "../components/utils/IconButton.svelte"; display: flex; flex-direction: column; - border-left: 1px solid var(--foreground); - border-right: 1px solid var(--foreground); + background: var(--background-emph); + border: 1px solid var(--foreground-lighter); + border-radius: .5em; + padding: 1rem; header { font-size: 22px; position: relative; - margin: 0 1rem; min-height: 1em; display: flex;