peter/siftlode
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(clip): typed times belong to their value, and every mark on the player chrome can be seen

Browse Source 
TimecodeField drops a draft when the value moves under it (another segment selected, a nudge), so
leaving the field never commits it to another cut; it is invalid only once offered, with a line
under it saying how to type a time. On the always-dark chrome media-scope points every focus ring
at --media-mark and errors at the new --media-danger (a light theme's accent and danger were under
3:1 there). A track whose dragged handle unmounts ends the drag on the pointer's release instead of
locking up; a remove refused while clips are queued leaves no focus to take later; each remove-cut
button names its cut and is a 24px target. DESIGN.md records the media tokens; stale comments fixed.
This commit is contained in:
peter
2026-10-10 20:28:52 +02:00
parent a867145bcb
commit c27cfdcb9c
18 changed files with 303 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/index.css
+12 -3
View File
@@ -31,6 +31,8 @@
--color-fg: var(--fg);
--color-muted: var(--muted);
--color-accent: var(--accent);
/* A focus ring's colour: the accent, unless a scope over another ground names its own. */
--color-focus: var(--focus, var(--accent));
--color-accent-fg: var(--accent-fg);
--color-info: var(--info);
--color-info-fg: var(--info-fg);
@@ -145,7 +147,9 @@
/* A form on the always-dark player chrome (the clip panel's fields): the neutral tokens the field
primitives read are re-pointed to white-on-chrome for this subtree, so a light theme's dark text
never lands on the dark bar. The accent stays the theme's. */
never lands on the dark bar. The accent stays the theme's for what is chosen; what must be seen
there is not left to it: a focus ring is the media amber and an error the media red, as a light
theme's accent and danger are dark (under 3:1 on the chrome). */
@utility media-scope {
--fg: #ffffff;
--muted: rgb(255 255 255 / 0.62);
@@ -155,6 +159,8 @@
/* A card on the chrome (a segmented control's track): a veil of it, never the theme's card — a
light theme's white under this scope's white text left the unchosen options unreadable. */
--card: rgb(255 255 255 / 0.08);
--danger: var(--media-danger);
--focus: var(--media-mark);
color: var(--fg);
}
@@ -298,8 +304,9 @@
[role="tab"]:focus-visible,
[role="slider"]:focus-visible,
summary:focus-visible {
/* Solid accent: the earlier 60% mix all but vanished on the dark glass. */
outline: 2px solid var(--accent);
/* Solid accent: the earlier 60% mix all but vanished on the dark glass. A scope over another
ground (media-scope) may name its own ring colour in --focus. */
outline: 2px solid var(--focus, var(--accent));
outline-offset: 2px;
}
@@ -1158,6 +1165,8 @@ html[data-theme="light"] {
/* A place marked on that chrome or over a video (a playhead, a focused end's ring, the crop
frame's ring, an intro / credits marker): amber in both themes, as the chrome is dark in both. */
--media-mark: #fbbf24;
/* An error said on that chrome (a time field the clip panel cannot read): its edge and its line. */
--media-danger: #f87171;
}
/* Toast auto-dismiss countdown bar (shrinks left-to-right to zero) */