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 @@