danvics/soulsync
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Reveal download cancel button on hover instead of always showing

Browse source 
Cancel button on active download items was always visible, cluttering
the card. Now hidden by default and fades in when you hover the card
(or focus anything inside it, for keyboard a11y).

- opacity + pointer-events approach so layout doesn't jump on reveal
- 4px slide-in on reveal for a subtle entrance
- Touch devices (hover: none) keep the button always visible — no hover
  means no way to discover it otherwise
This commit is contained in:
Broque Thomas 2026-04-21 21:12:06 -07:00
parent 0af98cdded
commit d0ee9c73b3
1 changed files with 22 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
webui/static/style.css
View file

@ -7022,11 +7022,32 @@ body.helper-mode-active #dashboard-activity-feed:hover {
font-weight: 600;
padding: 12px 12px !important;
cursor: pointer;
transition: all 0.2s ease;
transition: opacity 0.15s ease, background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
align-self: flex-start;
width: fit-content !important;
height: fit-content !important;
/* Reveal on hover only — keeps the card clean until the user actually
wants to act. Space is reserved (opacity + pointer-events, not display)
so the layout doesn't jump when the button shows. */
opacity: 0;
pointer-events: none;
transform: translateX(4px);
}
.download-item:hover .download-item__cancel-btn,
.download-item:focus-within .download-item__cancel-btn {
opacity: 1;
pointer-events: auto;
transform: translateX(0);
}
/* Touch devices have no hover — keep cancel visible so it's reachable. */
@media (hover: none) {
.download-item__cancel-btn {
opacity: 1;
pointer-events: auto;
transform: none;
}
}
.download-item__cancel-btn:hover {