blitzwing/cobalt-7
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

web/buttons: add hover state to active button

Browse source
This commit is contained in:
wukko 2024-07-20 18:54:12 +06:00
parent 205494b367
commit 8193e8c14d
No known key found for this signature in database
GPG key ID: 3E30B3F26C7B4AA2
2 changed files with 12 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
web/src/components/buttons/Switcher.svelte
View file

@ -49,6 +49,10 @@
padding: var(--switcher-padding); padding: var(--switcher-padding);
} }
.switcher :global(.button.active) {
pointer-events: none;
}
.switcher.big :global(.button) { .switcher.big :global(.button) {
width: 100%; width: 100%;
/* [base button height] - ([switcher padding] * [padding factor to accommodate for]) */ /* [base button height] - ([switcher padding] * [padding factor to accommodate for]) */

10
web/src/routes/+layout.svelte
View file

@ -65,6 +65,7 @@
--button: #f4f4f4; --button: #f4f4f4;
--button-hover: #e8e8e8; --button-hover: #e8e8e8;
--button-active-hover: #2a2a2a;
--button-hover-transparent: rgba(0, 0, 0, 0.06); --button-hover-transparent: rgba(0, 0, 0, 0.06);
--button-stroke: rgba(0, 0, 0, 0.06); --button-stroke: rgba(0, 0, 0, 0.06);
--button-text: #282828; --button-text: #282828;
@ -119,6 +120,7 @@
--button: #191919; --button: #191919;
--button-hover: #2a2a2a; --button-hover: #2a2a2a;
--button-active-hover: #f9f9f9;
--button-hover-transparent: rgba(225, 225, 225, 0.1); --button-hover-transparent: rgba(225, 225, 225, 0.1);
--button-stroke: rgba(255, 255, 255, 0.05); --button-stroke: rgba(255, 255, 255, 0.05);
--button-text: #e1e1e1; --button-text: #e1e1e1;
@ -267,21 +269,25 @@
} }
:global(.button.active) { :global(.button.active) {
background: var(--secondary);
color: var(--primary); color: var(--primary);
background-color: var(--secondary);
} }
/* important is used because active class is toggled by state */ /* important is used because active class is toggled by state */
/* and added to the end of the list, taking priority */ /* and added to the end of the list, taking priority */
:global(.active:focus-visible) { :global(.active:focus-visible) {
background: var(--blue) !important;
color: var(--sidebar-highlight) !important; color: var(--sidebar-highlight) !important;
background-color: var(--blue) !important;
} }
@media (hover: hover) { @media (hover: hover) {
:global(button:hover) { :global(button:hover) {
background-color: var(--button-hover); background-color: var(--button-hover);
} }
:global(.button.active:hover) {
background-color: var(--button-active-hover);
}
} }
:global(.center-column-container) { :global(.center-column-container) {