diff --git a/web/src/components/buttons/SettingsCheckbox.svelte b/web/src/components/buttons/SettingsCheckbox.svelte index b8f98afd..9cea6fa0 100644 --- a/web/src/components/buttons/SettingsCheckbox.svelte +++ b/web/src/components/buttons/SettingsCheckbox.svelte @@ -52,10 +52,10 @@ flex-direction: row; align-items: center; gap: 12px; - justify-content: start; text-align: left; transform: none; + padding: 6px 12px; } .checkbox-text { diff --git a/web/src/components/settings/SettingsSection.svelte b/web/src/components/settings/SettingsSection.svelte index ad5674fb..2c0abf0b 100644 --- a/web/src/components/settings/SettingsSection.svelte +++ b/web/src/components/settings/SettingsSection.svelte @@ -30,6 +30,18 @@ #settings-section-categories { background: var(--button); border-radius: var(--border-radius); + box-shadow: var(--button-box-shadow); + } + + #settings-section-categories > :global(:not(.settings-tab:last-child)) { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + box-shadow: 0 3px 0px -1.2px var(--button-stroke); + } + + #settings-section-categories > :global(:not(.settings-tab:first-child)) { + border-top-left-radius: 0; + border-top-right-radius: 0; } } diff --git a/web/src/components/settings/SettingsTab.svelte b/web/src/components/settings/SettingsTab.svelte index 28fc621c..607977b2 100644 --- a/web/src/components/settings/SettingsTab.svelte +++ b/web/src/components/settings/SettingsTab.svelte @@ -95,6 +95,7 @@ @media screen and (max-width: 750px) { .settings-tab { background: none; + padding: 9px; --small-padding: 5px; } diff --git a/web/src/components/sidebar/SidebarTab.svelte b/web/src/components/sidebar/SidebarTab.svelte index c9657288..9fd76c07 100644 --- a/web/src/components/sidebar/SidebarTab.svelte +++ b/web/src/components/sidebar/SidebarTab.svelte @@ -70,9 +70,15 @@ opacity: 1; } + .sidebar-tab:active:not(.active) { + opacity: 1; + background-color: var(--sidebar-hover); + } + @media (hover: hover) { - .sidebar-tab:hover { + .sidebar-tab:hover:not(.active) { opacity: 1; + background-color: var(--sidebar-hover); } } diff --git a/web/src/routes/+layout.svelte b/web/src/routes/+layout.svelte index 6a54a4f4..e66775a3 100644 --- a/web/src/routes/+layout.svelte +++ b/web/src/routes/+layout.svelte @@ -26,9 +26,11 @@ --button-hover-transparent: rgba(0, 0, 0, 0.06); --button-stroke: rgba(0, 0, 0, 0.05); --button-text: #282828; + --button-box-shadow: 0 0 0 1.5px var(--button-stroke) inset; --sidebar-bg: #000000; --sidebar-highlight: #ffffff; + --sidebar-hover: rgba(255, 255, 255, 0.1); --input-border: #8d8d95; @@ -129,7 +131,7 @@ cursor: pointer; background-color: var(--button); color: var(--button-text); - box-shadow: 0 0 0 1.5px var(--button-stroke) inset; + box-shadow: var(--button-box-shadow); } :global(:focus-visible) { @@ -139,7 +141,7 @@ } :global(button:active) { - transform: scale(0.95); + background-color: var(--button-hover); } :global(.button.active) { diff --git a/web/src/routes/settings/+layout.svelte b/web/src/routes/settings/+layout.svelte index d58cb825..dfa96938 100644 --- a/web/src/routes/settings/+layout.svelte +++ b/web/src/routes/settings/+layout.svelte @@ -14,6 +14,8 @@ let screenWidth: number; + $: currentPageTitle = $page.url.pathname.split("/").at(-1); + $: isMobile = screenWidth <= 750; $: isHome = $page.url.pathname === `/settings`; @@ -23,11 +25,19 @@
- {#if !isHome && isMobile} - - -

settings

-
+ {#if isMobile} + {#if !isHome} + + + + {/if} +

+ settings + {#if !isHome} + / + {currentPageTitle} + {/if} +

{:else}

settings

{/if} @@ -77,7 +87,9 @@ #settings-page { --settings-nav-width: 250px; --settings-padding: 30px; - --settings-padding-small: calc(var(--settings-padding) - var(--padding)); + --settings-padding-small: calc( + var(--settings-padding) - var(--padding) + ); display: grid; width: 100%; grid-template-columns: var(--settings-nav-width) 1fr; @@ -110,11 +122,11 @@ } #settings-navigation { - gap: 12px; + gap: var(--padding); } #settings-header { - --back-padding: 6px; + --back-padding: calc(var(--padding) / 2); } .back-button { @@ -123,7 +135,9 @@ color: var(--secondary); gap: var(--back-padding); padding: var(--back-padding); - padding-right: calc(var(--back-padding) * 2); + + position: absolute; + left: var(--back-padding); } .back-button:active { @@ -166,10 +180,7 @@ position: sticky; padding: var(--padding); gap: 4px; - } - - #settings-header.back-visible { - padding: calc(var(--padding) - var(--back-padding)); + justify-content: center; } #settings-sidebar { @@ -178,7 +189,11 @@ #settings-page-title { text-align: center; - font-size: 16px; + letter-spacing: -0.3px; + } + + .title-slash { + color: var(--gray); } #settings-navigation {