diff options
| author | Ken D'Ambrosio <ken@jots.org> | 2026-05-12 12:33:17 +0000 |
|---|---|---|
| committer | Ken D'Ambrosio <ken@jots.org> | 2026-05-12 12:33:17 +0000 |
| commit | ca717d9625cdd60272226db50f0f148c949565c7 (patch) | |
| tree | 2479d3770390490a3cae04ade1891f44a57e4408 /public/css/style.css | |
| parent | 3e1a71be6e63696dfe9792f123f24ece1da8116a (diff) | |
Move slideshow interval control to album page; fix mobile viewport clipping
- Interval input (default 5 s) now lives beside Shuffle/Full screen on
the album page; passed as ?interval= param to the slideshow and seeded
into the hidden ss-interval input on load.
- Added "Interval" label text next to the input.
- Fixed slideshow controls being pushed off-screen on mobile by using
100dvh (dynamic viewport height) with 100vh as a fallback, so the
layout accounts for mobile browser chrome.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Diffstat (limited to 'public/css/style.css')
| -rw-r--r-- | public/css/style.css | 9 |
1 files changed, 4 insertions, 5 deletions
diff --git a/public/css/style.css b/public/css/style.css index a142f8a..b0c73dd 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -247,10 +247,10 @@ main { max-width: 1400px; margin: 0 auto; padding: 24px; } .lb-next { right: 0; border-radius: var(--radius) 0 0 var(--radius); } /* ── Slideshow ─────────────────────────────────────────────────────────── */ -.slideshow-page { background: #000; overflow: hidden; height: 100vh; display: flex; } +.slideshow-page { background: #000; overflow: hidden; height: 100vh; height: 100dvh; display: flex; } #slideshow { - width: 100%; height: 100vh; + width: 100%; height: 100vh; height: 100dvh; display: flex; flex-direction: column; background: #000; } @@ -289,9 +289,8 @@ main { max-width: 1400px; margin: 0 auto; padding: 24px; } flex-shrink: 0; } .ss-opt-label { display: inline-flex; align-items: center; gap: 5px; font-size: .9rem; color: var(--text-dim); cursor: pointer; } -.ss-opt-label input { cursor: pointer; } -.ss-interval-label { color: var(--text-dim); font-size: .85rem; display: flex; align-items: center; gap: 4px; margin-left: auto; } -.ss-interval-label input { width: 48px; background: var(--bg3); border: 1px solid var(--border); color: var(--text); border-radius: var(--radius); padding: 2px 6px; } +.ss-opt-label input[type=checkbox] { cursor: pointer; } +.ss-opt-label input[type=number] { width: 44px; background: var(--bg3); border: 1px solid var(--border); color: var(--text); border-radius: var(--radius); padding: 2px 6px; } #ss-counter { position: absolute; top: 12px; right: 16px; color: rgba(255,255,255,.5); font-size: .8rem; pointer-events: none; } |