Mirrors/cobalt
1
0
Fork 0
mirror of https://github.com/wukko/cobalt.git synced 2025-02-28 14:08:48 +01:00
Code Issues Projects Releases Packages Wiki Activity

web/SupportedServices: add hover & press states

Browse source
This commit is contained in:
wukko 2025-02-27 17:33:42 +06:00
parent 2573089378
commit 78db8d5eef
No known key found for this signature in database
GPG key ID: 3E30B3F26C7B4AA2
1 changed files with 24 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
web/src/components/save/SupportedServices.svelte
View file

@ -40,6 +40,7 @@
<div id="supported-services" class:expanded> <div id="supported-services" class:expanded>
<button <button
id="services-button" id="services-button"
class="button"
on:click={popover?.showPopover} on:click={popover?.showPopover}
aria-label={$t(`save.services.title_${expanded ? "hide" : "show"}`)} aria-label={$t(`save.services.title_${expanded ? "hide" : "show"}`)}
> >
@ -101,9 +102,10 @@
font-size: 13px; font-size: 13px;
font-weight: 500; font-weight: 500;
background: none; background: none;
transition: background 0.2s, box-shadow 0.1s;
} }
#services-button:not(:focus-visible) { #services-button:not(:focus-visible):not(:active) {
box-shadow: none; box-shadow: none;
} }
@ -117,19 +119,37 @@
background: var(--button-elevated); background: var(--button-elevated);
padding: 0; padding: 0;
box-shadow: none; box-shadow: none;
transition: transform 0.2s; transition: background 0.2s, transform 0.2s;
} }
#services-button:active .expand-icon { #services-button:active {
background: var(--button-elevated-hover); background: var(--button-hover-transparent);
} }
@media (hover: hover) { @media (hover: hover) {
#services-button:hover {
background: var(--button-hover-transparent);
}
#services-button:active {
background: var(--button-press-transparent);
}
#services-button:hover .expand-icon { #services-button:hover .expand-icon {
background: var(--button-elevated-hover); background: var(--button-elevated-hover);
} }
} }
@media (hover: none) {
#services-button:active {
box-shadow: none;
}
}
#services-button:active .expand-icon {
background: var(--button-elevated-press);
}
.expand-icon :global(svg) { .expand-icon :global(svg) {
height: 18px; height: 18px;
width: 18px; width: 18px;