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/js/player.js
+6 -2
View File
@@ -37,12 +37,16 @@
}
function tick() { sync(); raf = requestAnimationFrame(tick); }
// the pause icon is drawn in CSS (two bars via ::before/::after on
// .is-playing), not a "❚❚" glyph — a monospace font's letter-spacing
// between two heavy-bar characters left a gap no amount of
// letter-spacing closed cleanly. the ▶ span just hides/shows.
v.addEventListener("play", function () {
root.classList.add("is-playing"); if (play) play.textContent = "❚❚";
root.classList.add("is-playing");
if (!raf) raf = requestAnimationFrame(tick);
});
v.addEventListener("pause", function () {
root.classList.remove("is-playing"); if (play) play.textContent = "▶";
root.classList.remove("is-playing");
if (raf) { cancelAnimationFrame(raf); raf = null; }
sync(); // one last sync so the bar lands exactly on the paused frame
});