diff options
Diffstat (limited to 'src/style.css')
| -rw-r--r-- | src/style.css | 14 |
1 files changed, 9 insertions, 5 deletions
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 { |