Something went wrong. Try again.
experiments of a tiny cytube-like player with yt-dlp
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741/* ── Catppuccin via light-dark() ── * * System mode: color-scheme: light dark → light-dark() follows * prefers-color-scheme. * Forced light: data-theme="latte" → color-scheme: light * Forced dark: data-theme="macchiato" → color-scheme: dark */
:root { color-scheme: light dark;
--rosewater: light-dark(#dc8a78, #f4dbd6); --flamingo: light-dark(#dd7878, #f0c6c6); --pink: light-dark(#ea76cb, #f5bde6); --mauve: light-dark(#8839ef, #c6a0f6); --red: light-dark(#d20f39, #ed8796); --maroon: light-dark(#e64553, #ee99a0); --peach: light-dark(#fe640b, #f5a97f); --yellow: light-dark(#df8e1d, #eed49f); --green: light-dark(#40a02b, #a6da95); --teal: light-dark(#179299, #8bd5ca); --sky: light-dark(#04a5e5, #91d7e3); --sapphire: light-dark(#209fb5, #7dc4e4); --blue: light-dark(#1e66f5, #8aadf4); --lavender: light-dark(#7287fd, #b7bdf8); --text: light-dark(#4c4f69, #cad3f5); --subtext1: light-dark(#5c5f77, #b8c0e0); --subtext0: light-dark(#6c6f85, #a5adcb); --overlay2: light-dark(#7c7f93, #939ab7); --overlay1: light-dark(#8c8fa1, #8087a2); --overlay0: light-dark(#9ca0b0, #6e738d); --surface2: light-dark(#acb0be, #5b6078); --surface1: light-dark(#bcc0cc, #494d64); --surface0: light-dark(#ccd0da, #363a4f); --crust: light-dark(#dce0e8, #181926); --mantle: light-dark(#e6e9ef, #1e2030); --base: light-dark(#eff1f5, #24273a);
--bg: var(--base); --surface: var(--mantle); --surface-raised: var(--crust); --border: var(--surface0); --text-primary: var(--text); --text-muted: var(--overlay1); --accent: var(--mauve); --accent-hover: var(--lavender); --danger: var(--red); --success: var(--green); --warning: var(--yellow);
font-family: system-ui, -apple-system, sans-serif; background: var(--bg); color: var(--text-primary); line-height: 1.5;}
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0;}
body { min-height: 100vh;}
input,button,select { font: inherit; color: inherit;}
input { background: var(--surface-raised); border: 1px solid var(--border); border-radius: 6px; padding: 0.5rem 0.75rem; outline: none; transition: border-color 0.15s, box-shadow 0.15s;}input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent);}
button { background: var(--accent); color: var(--crust); border: none; border-radius: 6px; padding: 0.5rem 1rem; cursor: pointer; transition: background 0.15s, transform 0.1s; font-weight: 600; font-size: 0.875rem;}button:hover:not(:disabled) { background: var(--accent-hover);}button:active:not(:disabled) { transform: scale(0.97);}button:disabled { opacity: 0.35; cursor: not-allowed;}button.secondary { background: var(--surface0); color: var(--text-primary);}button.secondary:hover:not(:disabled) { background: var(--surface1);}
/* ── Home ── */
.home { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; gap: 1rem; padding: 2rem;}.home h1 { font-size: 3rem; font-weight: 700; letter-spacing: -0.02em; color: var(--accent);}.home p { color: var(--text-muted); margin-bottom: 0.5rem;}.home-form,.home-join { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: center;}
/* ── Toast ── */
.toast { padding: 0.5rem 1rem; font-size: 0.85rem; cursor: pointer; user-select: none;}.toast-error { background: var(--danger); color: var(--crust); font-weight: 600;}.toast-action { background: rgba(0, 0, 0, 0.15); border: 1px solid rgba(255, 255, 255, 0.2); color: inherit; font-size: 0.75rem; padding: 0.15rem 0.5rem; border-radius: 3px; cursor: pointer; margin-left: 0.5rem;}
/* ── Room ── */
.room { display: flex; flex-direction: column; height: 100vh;}.room-header { display: flex; align-items: center; gap: 1rem; padding: 0.6rem 1rem; background: var(--surface); border-bottom: 1px solid var(--border); flex-shrink: 0;}.room-header h2 { font-size: 1rem; font-weight: 600;}.client-count { color: var(--text-muted); font-size: 0.8rem; margin-left: auto;}.disconnected { color: var(--danger); font-size: 0.8rem; margin-left: 0.5rem;}.theme-toggle-sm { background: none; border: none; color: var(--text-muted); font-size: 0.65rem; cursor: pointer; padding: 0.15rem 0.35rem; border-radius: 3px; font-weight: 500;}.theme-toggle-sm:hover { color: var(--text-primary); background: var(--surface0);}
.room-layout { display: flex; flex: 1; overflow: hidden;}.room-main { flex: 1; display: flex; flex-direction: column; padding: 0.75rem; gap: 0.75rem; min-width: 0; overflow-y: auto;}.room-sidebar { width: 340px; display: flex; flex-direction: column; border-left: 1px solid var(--border); overflow: hidden; flex-shrink: 0;}.room-actions { display: flex; gap: 0.5rem; flex-wrap: wrap;}.room-actions button { font-size: 0.8rem; padding: 0.4rem 0.75rem;}
.vote-skip { display: inline-flex; align-items: center; gap: 0.4rem;}
.vote-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 0.4rem; font-size: 0.7rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--crust); background: var(--accent); border-radius: 9px; line-height: 1;}
/* ── Inline form ── */
.inline-form { display: flex; gap: 0.4rem;}.inline-form input { flex: 1; font-size: 0.85rem;}
/* ── Player ── */
.player { background: var(--surface); border-radius: 8px; padding: 0.75rem; display: flex; flex-direction: column; gap: 0.5rem;}.player-info { display: flex; align-items: center; gap: 0.75rem;}.player-thumb { width: 48px; height: 48px; border-radius: 6px; object-fit: cover; flex-shrink: 0; background: var(--surface0);}.player-meta { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; flex: 1;}.player-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; font-size: 0.95rem;}.player-duration-row { display: flex; gap: 0.75rem; font-size: 0.8rem; color: var(--text-muted);}.player-media video,.player-media audio { width: 100%; max-height: 60vh; border-radius: 6px; background: light-dark(#111, #000);}.player-media-wrap { position: relative;}.live-btn { position: absolute; top: 0.75rem; right: 0.75rem; font-size: 0.75rem; font-weight: 700; padding: 0.25rem 0.65rem; border-radius: 4px; letter-spacing: 0.04em; text-transform: uppercase; /* Dark semi-transparent overlay — reads over any video content */ background: rgba(0, 0, 0, 0.5); color: #fff; border: 1px solid rgba(255, 255, 255, 0.15); z-index: 10; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s;}.live-btn:hover { background: rgba(0, 0, 0, 0.7);}.live-btn--on { background: var(--accent); color: var(--base); border-color: var(--accent);}.live-btn--on:hover { background: color-mix(in srgb, var(--accent) 85%, var(--base));}.player-idle { color: var(--text-muted); padding: 2rem; text-align: center; font-style: italic;}
.player-media-error { display: flex; align-items: center; justify-content: center; min-height: 200px; padding: 1.5rem; color: var(--danger); text-align: center; font-size: 0.85rem;}
/* ── Chat ── */
.chat { flex: 1; display: flex; flex-direction: column; min-height: 0;}.chat-messages { flex: 1; overflow-y: auto; padding: 0.5rem; display: flex; flex-direction: column; gap: 0.2rem;}.chat-message { padding: 0.2rem 0.5rem; border-radius: 4px; transition: background 0.1s;}.chat-message:hover { background: var(--surface-raised);}.chat-user { font-weight: 600; font-size: 0.8rem; color: var(--accent);}.chat-time { font-size: 0.65rem; color: var(--text-muted); margin-left: 0.4rem; opacity: 0.7;}.chat-content { font-size: 0.88rem; margin-top: 0.05rem; word-break: break-word;}.chat-input { display: flex; gap: 0.25rem; padding: 0.5rem; border-top: 1px solid var(--border);}.chat-input input { flex: 1; font-size: 0.85rem;}
/* ── Queue ── */
.queue-panel { overflow-y: auto; flex-shrink: 0; max-height: 50%;}.queue-section { padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--border);}.queue-section h3 { font-size: 0.72rem; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.4rem; letter-spacing: 0.06em; font-weight: 700; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;}.queue-shuffle { font-size: 0.7rem; font-weight: 600; text-transform: none; letter-spacing: 0; padding: 0.15rem 0.5rem; border: 1px solid var(--border); border-radius: 4px; background: var(--surface); color: var(--text-muted); cursor: pointer; transition: color 0.15s, border-color 0.15s, background 0.15s;}.queue-shuffle:hover { color: var(--accent); border-color: var(--accent); background: var(--surface-raised);}.queue-item-actions { display: flex; gap: 0.15rem; flex-shrink: 0;}.queue-item-actions .queue-item-action { display: flex; font-size: 0.85rem; width: 20px; height: 20px;}.queue-item-actions .queue-item-action:disabled { opacity: 0.25; cursor: not-allowed;}.queue-item-actions .queue-item-action:disabled:hover { color: var(--text-muted); background: none;}.playlist-toggle { display: inline-flex; align-items: center; gap: 0.3rem; text-transform: none; letter-spacing: 0; font-size: 0.72rem; color: var(--text-muted); cursor: pointer; user-select: none;}
.playlist-toggle input { margin: 0; cursor: pointer;}
.playlist-controls { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.4rem;}
.playlist-threshold { display: inline-flex; align-items: center; gap: 0.4rem; text-transform: none; letter-spacing: 0; font-size: 0.72rem; color: var(--text-muted); cursor: pointer;}
.playlist-threshold-label { white-space: nowrap; font-variant-numeric: tabular-nums;}
.playlist-threshold input[type="range"] { width: 80px; margin: 0; cursor: pointer; accent-color: var(--accent);}.playlist-toggle input { margin: 0; cursor: pointer;}.queue-item { display: flex; align-items: center; gap: 0.4rem; padding: 0.2rem 0; font-size: 0.82rem; transition: background 0.1s; border-radius: 4px;}.queue-item:hover { background: var(--surface-raised);}.queue-item.current { color: var(--accent); font-weight: 600;}.queue-item.history { opacity: 0.65;}.queue-item-row { display: flex; align-items: center; gap: 0.3rem;}.queue-item-row .queue-item { flex: 1; min-width: 0;}.queue-item-row .queue-item:hover { background: none;}.queue-item-row:hover .queue-item { background: var(--surface-raised);}.queue-item-action { display: none; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; border: none; background: none; color: var(--text-muted); font-size: 1.1rem; font-weight: 600; line-height: 1; border-radius: 4px; cursor: pointer; flex-shrink: 0; transition: color 0.15s, background 0.15s;}.queue-item-row:hover .queue-item-action { display: flex;}.queue-item-action:hover { color: var(--accent); background: var(--surface0);}.queue-item-remove:hover { color: var(--danger);}.queue-item-failed .queue-title { color: var(--danger);}.queue-item-failed .queue-duration { color: var(--danger);}.queue-item-failed-reason { display: block; grid-column: 2 / -1; padding: 0.15rem 0 0.35rem; font-size: 0.72rem; color: var(--danger); opacity: 0.85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;}.queue-thumb { width: 28px; height: 20px; border-radius: 3px; object-fit: cover; flex-shrink: 0; background: var(--surface0);}.queue-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0;}.queue-duration { color: var(--text-muted); font-size: 0.75rem; margin-left: 0.3rem; flex-shrink: 0;}.queue-empty { color: var(--text-muted); font-size: 0.78rem; font-style: italic;}
/* ── Room footer ── */
.room-footer { padding: 0.3rem 0.75rem; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; flex-shrink: 0;}
/* ── Add target toggle ── */
.add-target-toggle { display: flex; gap: 0;}.add-target-toggle button { font-size: 0.72rem; padding: 0.25rem 0.5rem; background: var(--surface0); color: var(--text-muted); border: 1px solid var(--border); font-weight: 500; border-radius: 0;}.add-target-toggle button:first-child { border-radius: 4px 0 0 4px;}.add-target-toggle button:last-child { border-radius: 0 4px 4px 0;}.add-target-toggle button.active { background: var(--accent); color: var(--crust); border-color: var(--accent);}
/* ── System chat message ── */
.chat-message.system .chat-user,.chat-message.system .chat-time { display: none;}.chat-message.system .chat-content { font-size: 0.78rem; color: var(--text-muted); font-style: italic;}
/* ── Responsive ── */
@media (max-width: 768px) { .room-header { padding: 0.4rem 0.75rem; } .room-main { padding: 0.5rem; } .room-sidebar { width: 100%; border-left: none; border-top: 1px solid var(--border); max-height: 40vh; } .room-layout { flex-direction: column-reverse; }}
/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; }}