From 7a3e813d199857ca503864737b7723c7ea916ba5 Mon Sep 17 00:00:00 2001 From: Adam Soltys Date: Wed, 14 Oct 2026 22:39:02 -0700 Subject: Media pager: on a wide window the words, counts and seek bar keep to a column under the middle. The caption ran the whole width of a 1920px screen and the counts sat in its far corner, hard to see from the picture (Adam's screenshot). From 900px across, the meta's padding and the seek bar's edges hold a 760px column centred on the screen (the gradient behind them still spans it), and the caption is a point larger. A phone keeps the full width. tools/pager-resize-test.js measures both. Co-Authored-By: Claude Fable 5.1 Claude-Session: https://claude.ai/code/session_01J1Kon8bxJoHRpJdSzshCkp --- src/style.css | 10 ++++++++++ 1 file changed, 10 insertions(+) (limited to 'src') diff --git a/src/style.css b/src/style.css index c581535..2c61072 100644 --- a/src/style.css +++ b/src/style.css @@ -1652,6 +1652,16 @@ 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(var(--mp-seek-lift) + 36px); } +/* A wide window: the caption ran the whole width of the screen and the + counts sat in the far corner (Adam, 1920px across). The words, the + counts and the seek bar keep to a column under the middle of the screen; + the gradient behind them still spans it. */ +@media (min-width: 900px) { + .media-pager { --mp-col: 760px; } + .mp-meta { padding-left: max(14px, calc(50% - var(--mp-col) / 2)); padding-right: max(14px, calc(50% - var(--mp-col) / 2)); } + .mp-seek { left: max(16px, calc(50% - var(--mp-col) / 2)); right: max(16px, calc(50% - var(--mp-col) / 2)); } + .mp-caption { font-size: 15px; } +} /* a clip that waits for a tap: what it costs, over its (blank or still) box */ .vid-heavy { -- cgit v1.2.3