cbd-web: make the seek buttons monochrome type

``/`` (U+23EA/U+23E9) carry emoji presentation, so a browser with a color
emoji font drew them as pictures — taller than the line and off its baseline —
in a row that is otherwise monochrome type.

They are `«`/`»` now: plain text glyphs at the weight of the `‹` in the library
toolbar, and lighter than the prev/next marks either side, which suits a nudge
next to a skip. `font-variant-emoji: text` on the row asks for the text form of
prev/next/pause, which have the same presentation; it is ignored where
unsupported, at no cost, since those glyphs are the fallback anyway.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Test User 2026-07-27 09:28:44 +02:00
parent 43902fc818
commit d2f687983e
4 changed files with 30 additions and 5 deletions

View File

@ -1216,12 +1216,18 @@ fn Transport(store: Store) -> impl IntoView {
<div class="controls">
<button class="ghost" title="previous track (<)"
on:click=move |_| store.dispatch(Action::PrevTrack)>""</button>
// Guillemets, not U+23EA/U+23E9: those two carry emoji
// presentation, so a browser with a color emoji font drew them
// full-color and oversized next to a row of monochrome type.
// These are plain text glyphs at the weight of the `` in the
// library toolbar, and read as a nudge against the heavier
// prev/next marks either side of them.
<button class="ghost" title="back 15 seconds (,)"
on:click=move |_| store.dispatch(Action::SeekBackward)>""</button>
on:click=move |_| store.dispatch(Action::SeekBackward)>"«"</button>
<button class="ghost big" title="play/pause (Space)"
on:click=move |_| store.dispatch(Action::TogglePlay)>{state_symbol}</button>
<button class="ghost" title="forward 15 seconds (.)"
on:click=move |_| store.dispatch(Action::SeekForward)>""</button>
on:click=move |_| store.dispatch(Action::SeekForward)>"»"</button>
<button class="ghost" title="next track (>)"
on:click=move |_| store.dispatch(Action::NextTrack)>""</button>
<button class="ghost" title="restart track (r)"

View File

@ -297,6 +297,11 @@ input {
display: flex;
align-items: center;
gap: 0.1rem;
/* The prev/next/pause marks carry emoji presentation too, so a browser
with a color emoji font renders them as pictures rather than type.
Ask for the text form; ignored where unsupported, which costs
nothing the glyphs are the fallback either way. */
font-variant-emoji: text;
& .big {
font-size: 1.3rem;

View File

@ -16,9 +16,8 @@ before the cursor (see [the TUI's register
section](./tui.md#the-register-y-d-and-pp), which behaves identically here;
the queue toolbar shows how many entries are waiting). Seek is there too —
`,` and `.` move 15 seconds back and forward (`<` and `>` skip a whole
track), as do the `⏪`/`⏩`
buttons in
the transport bar, and the progress bar is clickable — a click seeks to
track), as do the `«`/`»` buttons in the transport bar, and the progress
bar is clickable — a click seeks to
that point in the track. The `/` live filter is TUI-only for now.
A pair of `library` / `queue` tabs in the top bar switches panes and shows

View File

@ -1625,3 +1625,18 @@ collapse to a strip, which was its toolbar and the top of its list with the
rest clipped — all still taking taps, so aiming at the strip hit the wrong
pane's list, or the library's "play", which replaces the queue. With the tabs
carrying the switch, the strip had nothing left to earn.
## Web seek buttons (2026-07-27)
The 15-second seek buttons were `⏪`/`⏩` (U+23EA/U+23E9), which carry emoji
presentation: a browser with a color emoji font drew them as full-color
pictures, taller than the line and off its baseline, in a row that is
otherwise monochrome type.
They are `«`/`»` now — plain text glyphs at the weight of the `` in the
library toolbar, and lighter than the prev/next marks either side, which suits
a nudge next to a skip.
`font-variant-emoji: text` on the controls row asks for the text form of the
prev/next/pause marks, which have the same emoji presentation. It is ignored
where unsupported, at no cost: those glyphs are the fallback anyway.