diff options
Diffstat (limited to 'packages/meshbay-hub/src/meshbay_hub/static/style.css')
| -rw-r--r-- | packages/meshbay-hub/src/meshbay_hub/static/style.css | 201 |
1 files changed, 201 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..e1e152e 100644 --- a/packages/meshbay-hub/src/meshbay_hub/static/style.css +++ b/packages/meshbay-hub/src/meshbay_hub/static/style.css @@ -2084,6 +2084,207 @@ 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; the container is given room for it on a portrait phone, where + the picture alone would be a strip. */ +.video-container-remote { min-height: min(72vh, 560px); } + +.video-remote { + --remote-accent: #23b1f0; + position: absolute; + inset: 0; + z-index: 2; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 32px; + padding: 24px 20px; + border-radius: 12px; + background: + radial-gradient(120% 70% at 50% 0%, rgba(35, 177, 240, 0.16) 0%, rgba(35, 177, 240, 0) 60%), + #0a1224; + color: #e2e8f0; + overflow: hidden; +} + +.video-remote-head { + display: flex; + flex-direction: column; + align-items: center; + gap: 6px; + text-align: center; + max-width: 100%; +} + +.video-remote-badge { + display: inline-flex; + align-items: center; + justify-content: center; + width: 64px; + height: 64px; + margin-bottom: 8px; + border-radius: 50%; + background: rgba(35, 177, 240, 0.14); + box-shadow: 0 0 0 1px rgba(35, 177, 240, 0.35), 0 0 32px rgba(35, 177, 240, 0.25); + color: var(--remote-accent); + font-size: 30px; +} + +.video-remote-label { + font-size: 0.75rem; + letter-spacing: 0.12em; + text-transform: uppercase; + color: #94a3b8; +} + +.video-remote-device { + font-size: 1.35rem; + font-weight: 600; + color: #f8fafc; + max-width: 100%; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.video-remote-state { + display: inline-flex; + align-items: center; + gap: 6px; + min-height: 1.2em; + font-size: 0.85rem; + color: #94a3b8; +} + +.video-remote-track { width: min(100%, 560px); } + +.video-remote-times { + display: flex; + justify-content: space-between; + margin-top: 8px; + font-size: 0.85rem; + font-variant-numeric: tabular-nums; + color: #94a3b8; +} + +/* The track is drawn by hand so the part already played is filled: `--pct` + is set inline from the position. */ +.video-remote-seek { + --pct: 0%; + -webkit-appearance: none; + appearance: none; + display: block; + width: 100%; + height: 28px; + margin: 0; + background: transparent; + cursor: pointer; +} +.video-remote-seek:disabled { cursor: default; opacity: 0.5; } +.video-remote-seek::-webkit-slider-runnable-track { + height: 6px; + border-radius: 3px; + background: linear-gradient(to right, var(--remote-accent) var(--pct), rgba(148, 163, 184, 0.25) var(--pct)); +} +.video-remote-seek::-moz-range-track { + height: 6px; + border-radius: 3px; + background: linear-gradient(to right, var(--remote-accent) var(--pct), rgba(148, 163, 184, 0.25) var(--pct)); +} +.video-remote-seek::-webkit-slider-thumb { + -webkit-appearance: none; + width: 18px; + height: 18px; + margin-top: -6px; + border: 0; + border-radius: 50%; + background: #ffffff; + box-shadow: 0 0 0 4px rgba(35, 177, 240, 0.35), 0 2px 6px rgba(0, 0, 0, 0.4); +} +.video-remote-seek::-moz-range-thumb { + width: 18px; + height: 18px; + border: 0; + border-radius: 50%; + background: #ffffff; + box-shadow: 0 0 0 4px rgba(35, 177, 240, 0.35), 0 2px 6px rgba(0, 0, 0, 0.4); +} + +.video-remote-buttons { + display: flex; + align-items: center; + gap: 36px; +} + +.video-remote-skip, +.video-remote-main { + position: relative; + display: inline-flex; + align-items: center; + justify-content: center; + border: 0; + border-radius: 50%; + cursor: pointer; + -webkit-tap-highlight-color: transparent; + transition: transform 0.1s ease, background-color 0.15s ease; +} +.video-remote-skip:active:not(:disabled), +.video-remote-main:active:not(:disabled) { transform: scale(0.92); } +.video-remote-skip:disabled, +.video-remote-main:disabled { opacity: 0.35; cursor: default; } + +.video-remote-skip { + width: 56px; + height: 56px; + background: transparent; + color: #e2e8f0; + font-size: 44px; +} +.video-remote-skip:hover:not(:disabled) { background: rgba(148, 163, 184, 0.12); } +.video-remote-skip .icon { stroke-width: 1.4; } +.video-remote-skip-n { + position: absolute; + left: 0; + right: 0; + top: 50%; + transform: translateY(-38%); + font-size: 12px; + font-weight: 700; + text-align: center; + pointer-events: none; +} + +.video-remote-main { + width: 76px; + height: 76px; + background: var(--remote-accent); + color: #04121f; + font-size: 34px; + box-shadow: 0 8px 24px rgba(35, 177, 240, 0.35); +} +.video-remote-main:hover:not(:disabled) { background: #4cc3f5; } +.video-remote-main .icon { stroke-width: 2.6; } +/* The triangle is a closed path: filled, it reads as play at a glance. */ +.video-remote-main.is-paused .icon path { fill: currentColor; } +.video-remote-main.is-paused .icon { transform: translateX(2px); } + +.video-remote-stop { + display: inline-flex; + align-items: center; + gap: 8px; + padding: 10px 20px; + border: 1px solid rgba(148, 163, 184, 0.35); + border-radius: 999px; + background: transparent; + color: #cbd5e1; + font: inherit; + font-size: 0.9rem; + cursor: pointer; +} +.video-remote-stop:hover { border-color: #fca5a5; color: #fecaca; } + /* 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; } |