karim/kgva
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: wider click tolerance on the scrub and volume bars

Browse Source 
both bars are only 3px tall visually, which made them fiddly to hit precisely. added a 5px invisible hit-area above and below via ::before on each — the visual bar stays thin, but clicking near it still registers. the seek/volume math is unaffected since it reads the real elements own rect, not the pseudo-elements.
This commit is contained in:
kgva CMS
2026-08-15 11:50:37 +00:00
parent 666681be7c
commit 55d37ecd92
1 changed files with 13 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/custom.css
+13
View File
@@ -502,6 +502,19 @@ footer a:hover,
.player__time { white-space: nowrap; font-variant-numeric: tabular-nums; color: #fff; } .player__time { white-space: nowrap; font-variant-numeric: tabular-nums; color: #fff; }
.player__vol { width: 4ch; height: 3px; background: rgba(255, 255, 255, 0.3); position: relative; cursor: pointer; } .player__vol { width: 4ch; height: 3px; background: rgba(255, 255, 255, 0.3); position: relative; cursor: pointer; }
.player__volfill { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: #fff; } .player__volfill { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: #fff; }
/* invisible hit-area extending past the thin visual bar — the bar itself
stays 3px, but clicking/dragging within 5px above or below it still
counts (rects used for the seek/volume math are still the element's own,
unaffected by this) */
.player__scrub::before,
.player__vol::before {
content: "";
position: absolute;
top: -5px;
bottom: -5px;
left: 0;
right: 0;
}
.player:fullscreen { width: 100vw; height: 100vh; aspect-ratio: auto; } .player:fullscreen { width: 100vw; height: 100vh; aspect-ratio: auto; }
/* all images always in colour (selection drives what's shown, not hover) */ /* all images always in colour (selection drives what's shown, not hover) */