1 files changed, 23 insertions, 0 deletions
diff --git a/src/style.css b/src/style.css
index 0a1562d..9b7d6a0 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1528,6 +1528,29 @@ body::after {
 .media-pager.quiet .mp-top .mp-x { opacity: 0; pointer-events: none; }
 .media-pager.quiet .mp-top .mp-sound { pointer-events: auto; }
 .media-pager.quiet.show .mp-top .mp-x { opacity: 1; pointer-events: auto; }
+/* a clip's seek bar: a thin line along the bottom, thicker with the details
+   up or under a finger; the strip above it is the finger's (no swipe there) */
+.mp-seek {
+  position: absolute; left: 0; right: 0; bottom: env(safe-area-inset-bottom, 0px); z-index: 3; height: 28px;
+  display: flex; align-items: flex-end; touch-action: none; cursor: pointer; visibility: hidden;
+}
+.mp-seek.ready { visibility: visible; }
+.mp-seek-track { position: relative; width: 100%; height: 3px; background: rgba(255, 255, 255, .28); transition: height .15s; }
+.mp-seek-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: #fff; }
+.mp-seek-fill::after {
+  content: ''; position: absolute; right: -7px; top: 50%; width: 14px; height: 14px; margin-top: -7px;
+  border-radius: 50%; background: #fff; opacity: 0; transition: opacity .15s;
+}
+.media-pager.show .mp-seek-track, .mp-seek.drag .mp-seek-track { height: 5px; }
+.media-pager.show .mp-seek-fill::after, .mp-seek.drag .mp-seek-fill::after { opacity: 1; }
+.mp-seek-time {
+  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); padding: 3px 8px; border-radius: 6px;
+  font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; background: rgba(0, 0, 0, .55);
+  opacity: 0; pointer-events: none; transition: opacity .12s;
+}
+.mp-seek.drag .mp-seek-time { opacity: 1; }
+/* the details sit clear of the seek bar */
+.media-pager.videos .mp-meta { padding-bottom: calc(max(16px, env(safe-area-inset-bottom)) + 22px); }
 
 /* a clip that waits for a tap: what it costs, over its (blank or still) box */
 .vid-heavy {