diff --git a/web/src/components/buttons/Switcher.svelte b/web/src/components/buttons/Switcher.svelte index 99bb740b..e7b3c0de 100644 --- a/web/src/components/buttons/Switcher.svelte +++ b/web/src/components/buttons/Switcher.svelte @@ -49,6 +49,10 @@ padding: var(--switcher-padding); } + .switcher :global(.button.active) { + pointer-events: none; + } + .switcher.big :global(.button) { width: 100%; /* [base button height] - ([switcher padding] * [padding factor to accommodate for]) */ diff --git a/web/src/routes/+layout.svelte b/web/src/routes/+layout.svelte index 5348e66a..ea612eb6 100644 --- a/web/src/routes/+layout.svelte +++ b/web/src/routes/+layout.svelte @@ -65,6 +65,7 @@ --button: #f4f4f4; --button-hover: #e8e8e8; + --button-active-hover: #2a2a2a; --button-hover-transparent: rgba(0, 0, 0, 0.06); --button-stroke: rgba(0, 0, 0, 0.06); --button-text: #282828; @@ -119,6 +120,7 @@ --button: #191919; --button-hover: #2a2a2a; + --button-active-hover: #f9f9f9; --button-hover-transparent: rgba(225, 225, 225, 0.1); --button-stroke: rgba(255, 255, 255, 0.05); --button-text: #e1e1e1; @@ -267,21 +269,25 @@ } :global(.button.active) { - background: var(--secondary); color: var(--primary); + background-color: var(--secondary); } /* important is used because active class is toggled by state */ /* and added to the end of the list, taking priority */ :global(.active:focus-visible) { - background: var(--blue) !important; color: var(--sidebar-highlight) !important; + background-color: var(--blue) !important; } @media (hover: hover) { :global(button:hover) { background-color: var(--button-hover); } + + :global(.button.active:hover) { + background-color: var(--button-active-hover); + } } :global(.center-column-container) {