From 028dd56084b5a07bbff6d37e5f760ad344d58060 Mon Sep 17 00:00:00 2001 From: Adam Soltys Date: Tue, 13 Oct 2026 04:55:16 +0000 Subject: Media pager: the seek bar sits clear of the phone's gesture strip. Adam's screenshot: the bar ran along the very bottom edge of the screen, under Android's own gesture handle — a drag there is the system's (home, recents), and it was placed by env(safe-area-inset-bottom), which is 0 here (the page doesn't ask for viewport-fit=cover, and the gesture strip is never reported as a safe area anyway). It now sits 32px up from the bottom (plus any safe-area inset) and 16px in from each side, where an edge drag is the back gesture; the post's details stand above it, and its line has rounded ends. feed-video-pager-test checks the bar's place (32px up, 16px in) and that the author, caption and counts clear it; SHOT=path saves a picture of the pager with the details up. MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Claude Opus 5.5 Claude-Session: https://claude.ai/code/session_01KPw21NEpWeTGu6swVASmBt --- src/style.css | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) (limited to 'src/style.css') diff --git a/src/style.css b/src/style.css index 9b7d6a0..448f702 100644 --- a/src/style.css +++ b/src/style.css @@ -1529,14 +1529,18 @@ body::after { .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) */ + up or under a finger; the strip above it is the finger's (no swipe there). + Lifted clear of the phone's own gesture strip along the bottom edge (which + a page isn't told about: no safe-area inset for it) and in from the side + edges, where a drag would be the system's back gesture. */ +.media-pager { --mp-seek-lift: calc(env(safe-area-inset-bottom, 0px) + 32px); } .mp-seek { - position: absolute; left: 0; right: 0; bottom: env(safe-area-inset-bottom, 0px); z-index: 3; height: 28px; + position: absolute; left: 16px; right: 16px; bottom: var(--mp-seek-lift); 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-track { position: relative; width: 100%; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .28); transition: height .15s; } +.mp-seek-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: inherit; 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; @@ -1550,7 +1554,7 @@ body::after { } .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); } +.media-pager.videos .mp-meta { padding-bottom: calc(var(--mp-seek-lift) + 36px); } /* a clip that waits for a tap: what it costs, over its (blank or still) box */ .vid-heavy { -- cgit v1.2.3