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

fix: pause icon drawn in css instead of a glyph, no more gap

Browse Source 
letter-spacing on the ❚❚ glyph could tighten the character cells but not the visible gap between them on a monospace font — each character keeps its own cell regardless. now two bars drawn via ::before/::after on .is-playing, with exact pixel control over the gap; the ▶ span just hides instead of getting replaced.
This commit is contained in:
kgva CMS
2026-08-15 11:49:27 +00:00
parent 11660ac63d
commit 666681be7c
3 changed files with 25 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/custom.css
+18 -1
View File
@@ -479,7 +479,24 @@ footer a:hover,
/* 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; }
/* pause icon is two CSS bars, not a "❚❚" glyph — a monospace font's own
per-character cell width left a gap between the glyphs that no amount of
letter-spacing closed without also looking wrong at other sizes */
.player__play { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 2.4ch; }
.player.is-playing .player__playicon { visibility: hidden; }
.player__play::before,
.player__play::after {
content: "";
position: absolute;
top: 50%;
width: 2px;
height: 0.8em;
background: currentColor;
transform: translateY(-50%);
opacity: 0;
}
.player.is-playing .player__play::before { opacity: 1; left: calc(50% - 3px); }
.player.is-playing .player__play::after { opacity: 1; left: calc(50% + 1px); }
.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; }