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

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.
2026-08-15 11:49:27 +00:00
parent 11660ac63d
commit 666681be7c
3 changed files with 25 additions and 4 deletions
@@ -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
    });