diff options
| author | Christophe Besson <cbesson@gmail.com> | 2026-10-03 13:59:44 +0200 |
|---|---|---|
| committer | Christophe Besson <cbesson@gmail.com> | 2026-10-03 14:24:55 +0200 |
| commit | d4cd99df1fdecb28d60c10c87f72a93634128db8 (patch) | |
| tree | d0426aea997f804d4b62d1fc329cdea9c2599804 /packages/meshbay-hub/src/meshbay_hub/static/style.css | |
| parent | ab0ba3db76d1accec1ca944e62b325c8d92592a6 (diff) | |
| download | meshbay-d4cd99df1fdecb28d60c10c87f72a93634128db8.tar.gz | |
Player: remote control while casting
Shows the receiver's position with play/pause, ±30 s and a scrubber;
a seek restarts the relay where asked.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Diffstat (limited to 'packages/meshbay-hub/src/meshbay_hub/static/style.css')
| -rw-r--r-- | packages/meshbay-hub/src/meshbay_hub/static/style.css | 73 |
1 files changed, 73 insertions, 0 deletions
diff --git a/packages/meshbay-hub/src/meshbay_hub/static/style.css b/packages/meshbay-hub/src/meshbay_hub/static/style.css index 23013a4..dc121ab 100644 --- a/packages/meshbay-hub/src/meshbay_hub/static/style.css +++ b/packages/meshbay-hub/src/meshbay_hub/static/style.css @@ -2084,6 +2084,79 @@ button:disabled { opacity: 0.5; cursor: not-allowed; } outline: none; } +/* The player as a remote while a television plays the film. Opaque, over + the local picture, which keeps running underneath only to pace the + download. */ +.video-remote { + position: absolute; + inset: 0; + z-index: 2; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 18px; + padding: 16px; + background: #0b1222; + border-radius: 4px; + color: #e2e8f0; + min-height: 260px; +} + +.video-remote-device { + display: flex; + gap: 8px; + align-items: center; + font-size: 1.05rem; + text-align: center; +} + +.video-remote-time { + font-variant-numeric: tabular-nums; + color: #94a3b8; +} + +.video-remote-seek { + width: min(100%, 640px); +} + +.video-remote-buttons { + display: flex; + gap: 16px; + align-items: center; +} + +.video-remote-btn { + min-width: 64px; + min-height: 44px; + padding: 8px 14px; + border: 1px solid #334155; + border-radius: 999px; + background: #1e293b; + color: inherit; + font: inherit; + cursor: pointer; +} + +.video-remote-btn:disabled { opacity: 0.4; cursor: default; } + +.video-remote-main { + min-width: 56px; + min-height: 56px; + display: flex; + align-items: center; + justify-content: center; +} + +.video-remote-stop { + border: 0; + background: none; + color: #fca5a5; + font: inherit; + cursor: pointer; + text-decoration: underline; +} + /* Where the film was picked up again. Sits over the picture rather than pushing it down, and clears itself once the viewer is watching. */ .video-container { position: relative; } |