From 9270bc52a33ef007d57d15b5e6aee95248c368a2 Mon Sep 17 00:00:00 2001 From: Adam Soltys Date: Sat, 24 Oct 2026 15:02:39 -0700 Subject: Feed clips with a mouse: a big play/pause in the middle on hover that plays or pauses in place, a click on a playing clip pauses it (a paused one still opens the pager), and a tall clip is held to three quarters of a computer screen with its box narrowed to the clip's shape Co-Authored-By: Claude Opus 5.5 Claude-Session: https://claude.ai/code/session_01QjVvE4YAcK3AGwV7kZXeN4 --- src/style.css | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) (limited to 'src/style.css') diff --git a/src/style.css b/src/style.css index 384b6d6..a895054 100644 --- a/src/style.css +++ b/src/style.css @@ -847,11 +847,26 @@ html.no-scroll { overflow: hidden; scrollbar-gutter: auto; } } .lightbox-x:hover { background: rgba(255, 255, 255, .24); } @keyframes lightbox-in { from { opacity: 0; } to { opacity: 1; } } -.note-video { display: block; width: 100%; height: auto; max-height: 100vh; object-fit: contain; border-radius: 10px; margin-top: 6px; background: #000; } +.note-video { display: block; width: 100%; height: auto; max-height: var(--vid-cap); object-fit: contain; border-radius: 10px; margin-top: 6px; background: #000; } /* a video plays by itself, muted, while it is on screen; the corner button turns the sound on (see autoplay in messages.js) */ .note-video-box { position: relative; display: block; max-width: 100%; margin-top: 6px; } .note-video-box .note-video { margin-top: 0; } +/* the height a feed clip may take: the whole screen on a phone, three + quarters of it on a computer (a portrait clip on a 1920 screen ran off it) */ +:root { --vid-cap: 100vh; } +@media (min-width: 900px) { :root { --vid-cap: 75vh; } } +/* with a mouse: the big play/pause in the middle, while the pointer is over the clip */ +.vid-pp { + position: absolute; left: 50%; top: 50%; z-index: 2; width: 64px; height: 64px; margin: -32px 0 0 -32px; padding: 0; + border: 0; border-radius: 50%; background: rgba(18, 18, 18, .6); color: #fff; cursor: pointer; + display: none; align-items: center; justify-content: center; +} +.vid-pp:hover { background: rgba(18, 18, 18, .85); } +.vid-pp-i { width: 0; height: 0; margin-left: 5px; border-style: solid; border-width: 13px 0 13px 22px; border-color: transparent transparent transparent #fff; } +.vid-pp.playing .vid-pp-i { width: 20px; height: 24px; margin: 0; border-width: 0 7px; border-color: #fff; } +.has-mouse .note-video-box:hover .vid-pp, .vid-pp:focus-visible { display: flex; } +.note-video-box:has(.vid-heavy) .vid-pp { display: none; } .vid-sound { position: absolute; top: 8px; left: 8px; z-index: 2; margin: 0; padding: 4px 10px; border: 0; border-radius: 999px; background: rgba(18, 18, 18, .7); color: #fff; font-size: 13px; line-height: 1.3; -- cgit v1.2.3