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

fix: play/pause button size consistency, add a real volume slider

Browse Source 
the play/pause button had no fixed width, so swapping the single-character play glyph for the two-character pause glyph (with the fonts normal spacing between them) visibly widened the button. now a fixed 2.4ch width with tightened tracking on the pause state.\n\nmute only ever toggled — there was no way to set a level. added a small click/drag bar next to it (same interaction as the scrub bar), synced with the video elements own volume/muted state via the volumechange event so it stays correct regardless of how its changed.
This commit is contained in:
kgva CMS
2026-08-15 11:44:14 +00:00
parent 46aff56577
commit 11660ac63d
3 changed files with 37 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/custom.css
+7 -1
View File
@@ -476,9 +476,15 @@ footer a:hover,
.player:not(.is-playing) .player__bar { opacity: 1; }
.player__bar button { font: inherit; color: #fff; background: none; border: 0; padding: 0 0.4ch; line-height: 1; }
.player__bar button:hover { background: #fff; color: #000; }
.player__scrub { flex: 1; height: 3px; background: rgba(255, 255, 255, 0.3); position: relative; }
/* fixed width + tightened tracking so ▶ and ❚❚ render as the same size
button instead of the pause glyph's two characters (with the font's
normal letter-spacing between them) widening it */
.player__play { display: inline-flex; align-items: center; justify-content: center; width: 2.4ch; letter-spacing: -0.2em; }
.player__scrub { flex: 1; height: 3px; background: rgba(255, 255, 255, 0.3); position: relative; cursor: pointer; }
.player__fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: #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__volfill { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: #fff; }
.player:fullscreen { width: 100vw; height: 100vh; aspect-ratio: auto; }
/* all images always in colour (selection drives what's shown, not hover) */