mirror of
https://github.com/4gray/iptvnator.git
synced 2026-10-08 17:06:15 -08:00
4grayandClaude Opus 4.7
b5dbc33e62
The timeline and volume sliders were rendering invisibly because: - --embedded-mpv-accent resolved to var(--mat-sys-primary) with no fallback. If the Material 3 theme tokens did not cascade into the component scope, the variable was empty and both the thumb and the Firefox progress fill rendered with no color. - The track contrast was 22% of var(--mat-sys-on-surface) which has the same scoping fragility on top of being subtle even when it does resolve. - The thumb had no border, so even when accent was present it could blend into similarly-toned popover backgrounds. - The played portion of the timeline had no fill in Chromium because ::-webkit-slider-runnable-track does not support a native progress state. Fixes: - Add hard fallbacks on every theme-token reference (accent falls back to #7dd3fc, surface to #0f1620, outline-variant to a translucent white). - Add --embedded-mpv-track and --embedded-mpv-thumb-ring as theme- independent CSS variables so the slider stays legible regardless of the parent theme provider. - Give the thumb a 2 px white ring border + a stronger drop shadow so it reads on any background (panel glass, dark backdrop, accent-coloured area). - Implement played-progress fill via a linear-gradient on ::-webkit-slider-runnable-track keyed off a CSS variable --slider-progress, set per-slider from the template based on the current playback position / volume. Firefox uses native ::-moz-range-progress. - Tidy disabled state styling so live-stream timelines (no duration) are dim but still visible. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> Entire-Checkpoint: f957cd9849e0