diff --git a/web/src/components/buttons/SettingsToggle.svelte b/web/src/components/buttons/SettingsToggle.svelte index 04dd9ac2..6ed93ef3 100644 --- a/web/src/components/buttons/SettingsToggle.svelte +++ b/web/src/components/buttons/SettingsToggle.svelte @@ -59,7 +59,7 @@ justify-content: space-between; text-align: left; transform: none; - padding: 9px 16px; + padding: calc(var(--switcher-padding) * 2) 16px; border-radius: var(--border-radius); } diff --git a/web/src/components/buttons/Switcher.svelte b/web/src/components/buttons/Switcher.svelte index 515b137c..499dfa5a 100644 --- a/web/src/components/buttons/Switcher.svelte +++ b/web/src/components/buttons/Switcher.svelte @@ -30,13 +30,14 @@ .switcher.big { background: var(--button); box-shadow: var(--button-box-shadow); - padding: var(--sidebar-inner-padding); + padding: var(--switcher-padding); } .switcher.big :global(.button) { width: 100%; - height: calc(40px - var(--sidebar-inner-padding) * 1.5); - border-radius: calc(var(--border-radius) - var(--sidebar-inner-padding));; + /* [base button height] - ([switcher padding] * [padding factor to accommodate for]) */ + height: calc(40px - var(--switcher-padding) * 1.5); + border-radius: calc(var(--border-radius) - var(--switcher-padding));; } .switcher.big :global(.button:not(:focus-visible)) { diff --git a/web/src/components/misc/Toggle.svelte b/web/src/components/misc/Toggle.svelte index ed0dbb31..fcb0aa92 100644 --- a/web/src/components/misc/Toggle.svelte +++ b/web/src/components/misc/Toggle.svelte @@ -8,7 +8,7 @@