show buffered media progress

2 files changed, 13 insertions, 0 deletions

diff --git a/web/css/player.css b/web/css/player.css
index f3d93ef..45dc948 100644
--- a/web/css/player.css
+++ b/web/css/player.css
@@ -149,6 +149,15 @@
   overflow: hidden;
 }
 .progress-track:hover { height: 0.5rem; }
+.progress-buffered {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  border-radius: 999px;
+  background: transparent;
+  pointer-events: none;
+  z-index: 1;
+}
 .progress-fill {
   position: absolute;
   inset: 0 auto 0 0;
@@ -156,6 +165,7 @@
   background: var(--player-progress-fill);
   border-radius: 999px;
   transition: width 120ms linear;
+  z-index: 2;
 }
 .progress-thumb {
   position: absolute;
@@ -167,6 +177,7 @@
   transform: translate(-50%, -50%) scale(0);
   transition: transform var(--transition-fast);
   pointer-events: none;
+  z-index: 3;
 }
 .progress-track:hover .progress-thumb,
 .progress-track:focus-within .progress-thumb {
diff --git a/web/css/theme.css b/web/css/theme.css
index 685ffe1..2649dea 100644
--- a/web/css/theme.css
+++ b/web/css/theme.css
@@ -35,6 +35,7 @@
   --player-bg: #0b0d12;
   --player-stage-bg: #000;
   --player-progress-bg: #2e3546;
+  --player-progress-buffered: #4a5367;
   --player-progress-fill: #5e9eff;
   --player-thumb: #7cb2ff;
   --overlay-dim: rgba(0,0,0,0.35);
@@ -98,6 +99,7 @@
   --player-bg: #0b0d12;
   --player-stage-bg: #000;
   --player-progress-bg: #d6dae4;
+  --player-progress-buffered: #aab4c4;
   --player-progress-fill: #2b6cb0;
   --player-thumb: #1a5490;
   --overlay-dim: rgba(0,0,0,0.35);