buzzert/carplay
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add touch-friendly stream scrubbing

Browse Source
This commit is contained in:
James Magahern
2026-06-12 19:46:45 -07:00
parent 562f2b8612
commit c4fb23d971
2 changed files with 196 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
public/styles.css
View File

@@ -6,6 +6,9 @@
--glass-strong: rgba(10, 10, 10, 0.82);
--line: rgba(246, 241, 232, 0.18);
--accent: #e8a84f;
--seek-track-height: 0.5rem;
--seek-thumb-size: 2.65rem;
--seek-hit-height: 3.25rem;
}
* {
@@ -288,10 +291,10 @@ canvas {
.playhead {
position: absolute;
top: -1.75rem;
top: -3.2rem;
right: 1.1rem;
left: 1.1rem;
height: 2.45rem;
height: 3.85rem;
}
.time-badge {
@@ -327,11 +330,12 @@ canvas {
bottom: 0;
left: 0;
width: 100%;
height: 1.35rem;
height: var(--seek-hit-height);
margin: 0;
appearance: none;
background: transparent;
cursor: pointer;
touch-action: none;
--progress: 0%;
}
@@ -340,7 +344,7 @@ canvas {
}
.seek-slider::-webkit-slider-runnable-track {
height: 0.28rem;
height: var(--seek-track-height);
border-radius: 999px;
background:
linear-gradient(
@@ -353,35 +357,45 @@ canvas {
}
.seek-slider::-moz-range-track {
height: 0.28rem;
height: var(--seek-track-height);
border-radius: 999px;
background: rgba(246, 241, 232, 0.28);
}
.seek-slider::-moz-range-progress {
height: 0.28rem;
height: var(--seek-track-height);
border-radius: 999px;
background: var(--accent);
}
.seek-slider::-webkit-slider-thumb {
width: 1rem;
height: 1rem;
margin-top: -0.36rem;
width: var(--seek-thumb-size);
height: var(--seek-thumb-size);
margin-top: calc((var(--seek-track-height) - var(--seek-thumb-size)) / 2);
appearance: none;
border: 2px solid rgba(7, 7, 7, 0.75);
border: 3px solid rgba(7, 7, 7, 0.78);
border-radius: 50%;
background: var(--fg);
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.48);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.58);
}
.seek-slider::-moz-range-thumb {
width: 0.86rem;
height: 0.86rem;
border: 2px solid rgba(7, 7, 7, 0.75);
width: var(--seek-thumb-size);
height: var(--seek-thumb-size);
border: 3px solid rgba(7, 7, 7, 0.78);
border-radius: 50%;
background: var(--fg);
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.48);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.58);
}
.seek-slider:focus-visible::-webkit-slider-thumb,
.playhead.scrubbing .seek-slider::-webkit-slider-thumb {
box-shadow: 0 0 0 0.35rem rgba(232, 168, 79, 0.32), 0 10px 30px rgba(0, 0, 0, 0.58);
}
.seek-slider:focus-visible::-moz-range-thumb,
.playhead.scrubbing .seek-slider::-moz-range-thumb {
box-shadow: 0 0 0 0.35rem rgba(232, 168, 79, 0.32), 0 10px 30px rgba(0, 0, 0, 0.58);
}
.seek-slider:disabled::-webkit-slider-thumb {