Brandyn / Techy
645f447015
layout store (auto/custom + pending), marked custom on manual move (onDidMovePanel outside arrange), sash drag, stream/group rename. Tray chips: HTML5 drag accepted via onUnhandledDragOver/onDidDrop (position -> direction), click = new column. WebAudio two-note chime. Gateway page instructions updated. Verified headless (custom vs auto). Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
84 lines
7.7 KiB
CSS
84 lines
7.7 KiB
CSS
:root { --bg:#141414; --panel:#1e1e1e; --fg:#e6e6e6; --mut:#9a9a9a; --acc:#3d8bfd; --live:#e74c3c; }
|
|
html, body, #root { height:100%; margin:0; background:var(--bg); color:var(--fg); font:14px/1.4 system-ui, sans-serif; }
|
|
.app { display:flex; flex-direction:column; height:100%; }
|
|
.topbar { display:flex; align-items:center; gap:14px; padding:8px 14px; background:#101010; border-bottom:1px solid #2a2a2a; }
|
|
.topbar h1 { font-size:15px; margin:0; font-weight:700; letter-spacing:.3px; }
|
|
.topbar .count { color:var(--mut); font-size:13px; }
|
|
.topbar .spacer { flex:1; }
|
|
.topbar button { background:#2a2a2a; color:var(--fg); border:1px solid #3a3a3a; border-radius:6px; padding:5px 10px; cursor:pointer; font-size:13px; }
|
|
.topbar button:hover { border-color:var(--acc); }
|
|
.dock { flex:1; min-height:0; }
|
|
.dockview-theme-vanguard { --dv-background-color:var(--bg); --dv-paneview-active-outline-color:var(--acc);
|
|
--dv-tabs-and-actions-container-background-color:#181818; --dv-activegroup-visiblepanel-tab-background-color:var(--panel);
|
|
--dv-activegroup-hiddenpanel-tab-background-color:#181818; --dv-inactivegroup-visiblepanel-tab-background-color:#1a1a1a;
|
|
--dv-inactivegroup-hiddenpanel-tab-background-color:#181818; --dv-tab-divider-color:#2a2a2a; --dv-activegroup-visiblepanel-tab-color:var(--fg);
|
|
--dv-activegroup-hiddenpanel-tab-color:var(--mut); --dv-inactivegroup-visiblepanel-tab-color:var(--mut); --dv-inactivegroup-hiddenpanel-tab-color:#777;
|
|
--dv-separator-border:#2a2a2a; --dv-group-view-background-color:var(--panel); --dv-drag-over-background-color:rgba(61,139,253,.2);
|
|
--dv-drag-over-border-color:var(--acc); --dv-tabs-container-scrollbar-color:#444; --dv-icon-hover-background-color:#333; }
|
|
.player { position:relative; width:100%; height:100%; background:#000; display:flex; flex-direction:column; }
|
|
.player .vwrap { flex:1; min-height:0; position:relative; display:flex; align-items:center; justify-content:center; background:#000; overflow:hidden; }
|
|
/* .frame = game-aspect box (sized by Player.jsx); the video spans its width, so the timecode band rows overflow the bottom and are clipped */
|
|
.player .frame { position:relative; width:100%; height:100%; overflow:hidden; background:#000; }
|
|
.player .frame video { position:absolute; top:0; left:0; width:100%; height:auto; display:block; background:#000; }
|
|
.player .frame[style] video { height:auto; }
|
|
.player .frame:not([style]) video { position:static; width:100%; height:100%; object-fit:contain; } /* before the size is known: plain contain */
|
|
.player .bar { display:flex; align-items:center; gap:10px; padding:6px 10px; background:#181818; border-top:1px solid #2a2a2a; font-size:13px; }
|
|
.player .live { background:var(--live); color:#fff; font-weight:700; font-size:11px; padding:2px 6px; border-radius:4px; letter-spacing:.5px; }
|
|
.player .who { font-weight:600; }
|
|
.player .title { color:var(--mut); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; min-width:0; }
|
|
.player .viewers { color:var(--mut); }
|
|
.player .mute { background:#2a2a2a; color:var(--fg); border:1px solid #3a3a3a; border-radius:6px; width:34px; height:28px; cursor:pointer; font-size:15px; }
|
|
.player .mute.on { border-color:var(--acc); }
|
|
.player .mute.pinned { border-color:#f1c40f; }
|
|
.player input[type=range] { width:110px; accent-color:var(--acc); }
|
|
.player .status { position:absolute; top:8px; left:8px; background:rgba(0,0,0,.6); color:var(--mut); font-size:12px; padding:3px 8px; border-radius:4px; }
|
|
.player.focused .bar { background:#1c2333; }
|
|
.empty { flex:1; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:8px; color:var(--mut); }
|
|
.empty h2 { color:var(--fg); margin:0; font-size:20px; }
|
|
|
|
/* --- Go Live --------------------------------------------------------------------------------- */
|
|
.golive { flex:1; display:flex; flex-direction:column; min-height:0; }
|
|
.golive-head { display:flex; align-items:center; gap:12px; padding:10px 14px; background:#101010; border-bottom:1px solid #2a2a2a; }
|
|
.golive-head h2 { margin:0; font-size:16px; }
|
|
.golive-head .who { color:var(--mut); }
|
|
.golive-head .spacer { flex:1; }
|
|
.golive-head button, .golive-form button { background:#2a2a2a; color:var(--fg); border:1px solid #3a3a3a; border-radius:6px; padding:8px 14px; cursor:pointer; font-size:14px; }
|
|
.golive-head button.danger { background:var(--live); border-color:var(--live); color:#fff; font-weight:600; }
|
|
.golive-form button.primary { background:var(--acc); border-color:var(--acc); color:#fff; font-weight:600; width:100%; padding:12px; margin-top:8px; }
|
|
.golive-form button:disabled { opacity:.5; cursor:default; }
|
|
.golive-body { flex:1; position:relative; display:flex; align-items:center; justify-content:center; min-height:0; background:#000; }
|
|
.golive-body video { display:none; width:100%; height:100%; object-fit:contain; }
|
|
.golive-body video.show { display:block; }
|
|
.golive-form { position:absolute; width:min(520px, calc(100% - 32px)); background:var(--panel); border:1px solid #3a3a3a; border-radius:12px; padding:22px; display:grid; gap:10px; }
|
|
.golive-form label { color:var(--mut); font-size:13px; }
|
|
.golive-form input { padding:10px 12px; font-size:15px; background:#141414; color:var(--fg); border:1px solid #444; border-radius:8px; }
|
|
.golive-form .hint { color:var(--mut); font-size:13px; line-height:1.5; }
|
|
.golive-form .err { color:var(--live); font-size:13px; }
|
|
.golive-stats { position:absolute; left:12px; bottom:12px; display:flex; gap:14px; align-items:center; background:rgba(0,0,0,.65); padding:8px 12px; border-radius:8px; font-size:13px; }
|
|
.golive-stats .pill.live { background:var(--live); color:#fff; font-weight:700; font-size:11px; padding:2px 6px; border-radius:4px; }
|
|
.golive-stats .warn { color:#f1c40f; }
|
|
.topbar button.golive-btn { background:var(--live); border-color:var(--live); color:#fff; font-weight:700; }
|
|
.golive-form .warn-box { background:#3a2a10; border:1px solid #f1c40f; color:#ffe9a8; border-radius:8px; padding:10px 12px; font-size:13px; line-height:1.5; }
|
|
.golive-form .warn-box b { color:#fff; }
|
|
.golive-stats .rec { background:#f1c40f; color:#000; font-weight:700; font-size:11px; padding:2px 6px; border-radius:4px; }
|
|
.topbar a.signout { color:var(--mut); font-size:13px; text-decoration:none; border:1px solid #3a3a3a; border-radius:6px; padding:5px 10px; }
|
|
.topbar a.signout:hover { color:var(--fg); border-color:#666; }
|
|
|
|
/* renameable tabs + group names */
|
|
.vtab { display:flex; align-items:center; height:100%; padding:0 10px; min-width:0; }
|
|
.vtab-text { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:260px; }
|
|
.vtab input, .grouplabel input { background:#111; color:var(--fg); border:1px solid var(--acc); border-radius:4px; font:inherit; font-size:12px; padding:1px 6px; width:170px; outline:none; }
|
|
.grouplabel { display:flex; align-items:center; height:100%; padding:0 10px; font-size:12px; white-space:nowrap; border-right:1px solid #2a2a2a; cursor:default; }
|
|
.grouplabel .gname { color:var(--acc); font-weight:700; }
|
|
.grouplabel .hint { color:#555; }
|
|
.groupactions { display:flex; align-items:center; height:100%; padding:0 6px; }
|
|
.gbtn { background:transparent; color:var(--mut); border:0; cursor:pointer; font-size:14px; padding:0 6px; line-height:1; }
|
|
.gbtn:hover { color:var(--fg); }
|
|
|
|
/* tray: new streams waiting to be placed (custom layouts) */
|
|
.tray { display:flex; gap:8px; align-items:center; padding:4px 10px; background:#1d1a10; border-bottom:1px solid #3a3320; font-size:12px; }
|
|
.chip { display:flex; align-items:center; gap:6px; padding:3px 10px; border:1px solid #6b5a1e; border-radius:14px; background:#262012; color:var(--fg); cursor:grab; user-select:none; }
|
|
.chip:active { cursor:grabbing; }
|
|
.blink { color:#f1c40f; animation: vgblink 1s steps(2, start) infinite; }
|
|
@keyframes vgblink { to { visibility:hidden; } }
|