:root { --bg: #0a0a12; --fg: #f3f3fb; --muted: #a7a7c4; --accent: #7c5cff; --accent-rgb: 124, 92, 255; --accent2: #2dd4bf; --accent2-rgb: 45, 212, 191; --accent3: #b06bff; --accent3-rgb: 176, 107, 255; --danger: #ff5c7c; --glass: rgba(255, 255, 255, 0.06); --glass-bd: rgba(255, 255, 255, 0.1); --radius: 20px; } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } [hidden] { display: none !important; } /* ---------- Custom glossy scrollbars (whole app) ---------- */ /* Firefox */ * { scrollbar-width: thin; scrollbar-color: rgba(var(--accent-rgb), 0.55) transparent; } /* WebKit / Chromium / Electron */ ::-webkit-scrollbar { width: 12px; height: 12px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-corner { background: transparent; } ::-webkit-scrollbar-thumb { border-radius: 99px; border: 3px solid transparent; /* inset so the thumb reads as a slim pill */ background-clip: padding-box; background-color: rgba(var(--accent-rgb), 0.5); /* glossy sheen: top highlight -> mid -> bottom shadow over the accent fill */ background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0) 42%, rgba(0, 0, 0, 0.22)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); transition: background-color 0.15s ease; } ::-webkit-scrollbar-thumb:hover { background-color: rgba(var(--accent-rgb), 0.8); } ::-webkit-scrollbar-thumb:active { background-color: rgba(var(--accent-rgb), 0.95); } /* base color goes on only — a transparent lets the fixed blurred-art .bg layer (z-index:-1) show through. An opaque body background would paint OVER it. */ html { background: var(--bg); } html, body { margin: 0; padding: 0; min-height: 100%; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: var(--fg); } body { background: transparent; } button { font-family: inherit; cursor: pointer; } img { display: block; } svg { display: block; } /* ---------- Background: blurred album art + aurora ---------- */ .bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: var(--bg); } .bg-art { position: absolute; inset: -10%; background-size: cover; background-position: center; filter: blur(12px) saturate(1.3) brightness(0.92); transform: scale(1.08); opacity: 0; transition: opacity 0.9s ease; will-change: opacity; } .bg-scrim { position: absolute; inset: 0; background: radial-gradient(130% 100% at 50% 0%, rgba(10,10,18,0.36), rgba(10,10,18,0.66) 55%, rgba(10,10,18,0.9)); } .bgfx { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.32; } /* ---------- PIN gate ---------- */ .gate { position: fixed; inset: 0; display: grid; place-items: center; padding: 24px; } .gate-card { width: 100%; max-width: 360px; background: var(--glass); border: 1px solid var(--glass-bd); border-radius: var(--radius); padding: 34px 26px; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5); text-align: center; } .logo { font-size: 26px; font-weight: 800; letter-spacing: -0.5px; display: flex; align-items: center; justify-content: center; gap: 8px; } .logo span { color: var(--accent2); } .logo-ic { width: 26px; height: 26px; color: var(--accent); } .tagline { color: var(--muted); margin: 10px 0 22px; font-size: 14px; } #pin-form { display: flex; flex-direction: column; gap: 12px; } #pin-input { text-align: center; font-size: 22px; letter-spacing: 8px; padding: 14px; border-radius: 14px; border: 1px solid var(--glass-bd); background: rgba(0, 0, 0, 0.3); color: var(--fg); outline: none; } #pin-input:focus { border-color: var(--accent); } .error { color: var(--danger); font-size: 13px; margin-top: 12px; } .resume-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; border: none; border-radius: 16px; padding: 16px; font-size: 17px; font-weight: 700; color: white; background: linear-gradient(135deg, var(--accent), var(--accent3)); box-shadow: 0 10px 30px rgba(var(--accent-rgb), 0.45); } .resume-btn .btn-ic { width: 18px; height: 18px; } /* Download Windows App button (hidden inside the desktop app itself) */ .gate-dl { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--glass-bd); } .dl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; width: 100%; padding: 12px 16px; border-radius: 14px; font-size: 14px; font-weight: 700; color: var(--fg); text-decoration: none; cursor: pointer; background: var(--glass); border: 1px solid var(--glass-bd); transition: transform 0.08s ease, background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; } .dl-btn:hover { background: rgba(255, 255, 255, 0.1); border-color: var(--accent); box-shadow: 0 6px 20px rgba(var(--accent-rgb), 0.25); } .dl-btn:active { transform: scale(0.98); } .dl-ic { width: 18px; height: 18px; color: var(--accent2); } /* Subtle admin-login link on the gate */ .gate-admin { display: inline-flex; align-items: center; justify-content: center; gap: 7px; margin-top: 14px; font-size: 13px; font-weight: 600; color: var(--muted); text-decoration: none; transition: color 0.15s ease; } .gate-admin:hover { color: var(--accent2); } .gate-admin .btn-ic { width: 15px; height: 15px; } .footer-dl { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 12.5px; font-weight: 600; color: var(--muted); text-decoration: none; padding: 7px 14px; border-radius: 99px; border: 1px solid var(--glass-bd); background: var(--glass); transition: color 0.15s, border-color 0.15s; } .footer-dl:hover { color: var(--fg); border-color: var(--accent); } .footer-dl .dl-ic { width: 15px; height: 15px; } body.desktop .gate-dl, body.desktop .footer-dl { display: none; } button#pin-btn { border: none; border-radius: 14px; padding: 14px; font-size: 16px; font-weight: 700; color: white; background: linear-gradient(135deg, var(--accent), var(--accent3)); transition: transform 0.06s ease, filter 0.15s ease; } button#pin-btn:active, .resume-btn:active { transform: scale(0.98); } button:disabled { filter: grayscale(0.5) brightness(0.7); cursor: default; } /* ---------- App layout ---------- */ .app { max-width: 1180px; margin: 0 auto; padding: 16px 16px 48px; min-height: 100vh; } .topbar { display: flex; align-items: center; justify-content: flex-start; gap: 10px; padding: 6px 4px 16px; } .topbar-right { margin-left: auto; } /* Spot name badge next to the brand (shown once a browser is bound to a spot) */ .spot-label { padding: 3px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: var(--accent2); background: rgba(var(--accent2-rgb), 0.12); border: 1px solid var(--glass-bd); white-space: nowrap; } /* Admin-control banner: shown when a logged-in admin is controlling a spot via the player */ .admin-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 4px 16px; padding: 9px 14px; border-radius: 12px; font-size: 13px; font-weight: 600; color: var(--fg); background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.18), rgba(var(--accent2-rgb), 0.14)); border: 1px solid rgba(var(--accent-rgb), 0.35); } .admin-bar-back { color: var(--accent2); text-decoration: none; white-space: nowrap; font-weight: 700; } .admin-bar-back:hover { text-decoration: underline; } /* Layout: single column on mobile, two columns (player/panels | queue) on desktop */ .layout { display: block; } .col-main, .col-side { min-width: 0; } @media (min-width: 900px) { .layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 22px; align-items: start; } .col-side { position: sticky; top: 16px; align-self: start; } #queue-list { max-height: calc(100vh - 200px); overflow-y: auto; padding-right: 4px; } .queue-head { margin-top: 0; } .art { width: 124px; height: 124px; } .np-title { font-size: 21px; } } @media (min-width: 1300px) { .app { max-width: 1180px; } } .brand { font-weight: 800; font-size: 18px; display: flex; align-items: center; gap: 8px; } .brand span { color: var(--accent2); } .brand-ic { width: 20px; height: 20px; color: var(--accent); } .conn { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted); background: var(--glass); border: 1px solid var(--glass-bd); padding: 5px 11px; border-radius: 99px; } .conn-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--danger); transition: background 0.3s, box-shadow 0.3s; } .conn.ok .conn-dot { background: var(--accent2); box-shadow: 0 0 8px var(--accent2); } .conn.ok .conn-label { color: var(--accent2); } /* topbar actions */ .topbar-right { display: flex; align-items: center; gap: 8px; } .gear { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--glass); border: 1px solid var(--glass-bd); color: var(--muted); transition: transform 0.25s ease, color 0.15s, background 0.15s; } .gear:hover { color: var(--fg); background: rgba(255,255,255,0.1); } .gear:active { transform: rotate(60deg) scale(0.92); } .gear svg { width: 18px; height: 18px; } /* ---------- Custom window controls (desktop app only) ---------- */ .winctl { display: flex; gap: 2px; margin-left: 6px; } .wc { width: 38px; height: 30px; border: none; background: transparent; color: var(--muted); border-radius: 8px; display: grid; place-items: center; transition: background 0.12s, color 0.12s; } .wc svg { width: 15px; height: 15px; } .wc:hover { background: rgba(255, 255, 255, 0.12); color: var(--fg); } .wc-close:hover { background: #e5484d; color: #fff; } /* In the Electron desktop app the top bar IS the draggable title bar. These -webkit-app-region rules are inert in a normal browser (no body.desktop). */ body.desktop { user-select: none; } body.desktop .topbar { -webkit-app-region: drag; padding-top: 10px; } body.desktop .topbar button, body.desktop .topbar a, body.desktop .gear, body.desktop .conn, body.desktop .winctl { -webkit-app-region: no-drag; } /* Let the OS acrylic blur show behind the app (transparent base + lighter scrim). The blurred album art still covers it while a song plays; acrylic shows on the login/idle screens and behind the frosted panels. */ body.desktop .bg { background: transparent; } body.desktop .bg-scrim { background: linear-gradient(180deg, rgba(10, 10, 18, 0.42), rgba(10, 10, 18, 0.72)); } /* ---------- Settings / theme modal ---------- */ .modal-overlay { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 20px; background: rgba(5, 5, 10, 0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: fade-in 0.18s ease; } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } .modal { width: 100%; max-width: 420px; max-height: 88vh; overflow-y: auto; background: linear-gradient(160deg, rgba(30,30,52,0.92), rgba(16,16,30,0.92)); border: 1px solid var(--glass-bd); border-radius: 22px; padding: 22px; backdrop-filter: blur(26px) saturate(1.3); -webkit-backdrop-filter: blur(26px) saturate(1.3); box-shadow: 0 30px 80px rgba(0,0,0,0.6); animation: slide-in 0.22s ease; } .modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; } .modal-title { display: flex; align-items: center; gap: 9px; font-size: 18px; font-weight: 800; } .modal-title svg { width: 19px; height: 19px; color: var(--accent2); } .modal-x { background: transparent; border: none; color: var(--muted); font-size: 20px; width: 34px; height: 34px; border-radius: 9px; } .modal-x:hover { background: var(--glass); color: var(--fg); } .modal-sub { color: var(--muted); font-size: 13px; margin: 0 0 18px; } .modal-section { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.6px; color: var(--muted); margin: 18px 0 10px; } .swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 10px; } .swatch { height: 46px; border-radius: 12px; border: 2px solid transparent; cursor: pointer; position: relative; transition: transform 0.1s; } .swatch:hover { transform: scale(1.05); } .swatch.active { border-color: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,0.25); } .color-row { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 14px; background: rgba(255,255,255,0.04); border: 1px solid var(--glass-bd); margin-bottom: 10px; } .color-row .cr-label { flex: 1; } .color-row .cr-name { font-size: 14px; font-weight: 700; } .color-row .cr-hint { font-size: 11.5px; color: var(--muted); margin-top: 1px; } .color-pick { -webkit-appearance: none; appearance: none; width: 48px; height: 48px; border: none; border-radius: 12px; background: transparent; cursor: pointer; padding: 0; overflow: hidden; box-shadow: 0 0 0 2px var(--glass-bd), 0 4px 14px rgba(0,0,0,0.4); } .color-pick::-webkit-color-swatch-wrapper { padding: 0; } .color-pick::-webkit-color-swatch { border: none; border-radius: 12px; } .color-pick::-moz-color-swatch { border: none; border-radius: 12px; } .modal-actions { display: flex; gap: 10px; margin-top: 20px; } .modal-btn { flex: 1; border: none; border-radius: 13px; padding: 13px; font-size: 14px; font-weight: 700; } .modal-btn.primary { color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent3)); } .modal-btn.ghost { color: var(--muted); background: var(--glass); border: 1px solid var(--glass-bd); } .modal-btn:active { transform: scale(0.98); } /* ---------- Now playing ---------- */ .now { position: relative; overflow: hidden; isolation: isolate; background: var(--glass); border: 1px solid var(--glass-bd); border-radius: var(--radius); padding: 18px; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 16px 50px rgba(0, 0, 0, 0.35); } .viz { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: 0.85; pointer-events: none; } .now-inner { position: relative; z-index: 1; display: flex; gap: 16px; align-items: center; } .art-wrap { position: relative; flex-shrink: 0; --beat: 0; transform: scale(calc(1 + 0.05 * var(--beat))); transition: transform 0.09s ease-out; } .art-ring { position: absolute; inset: -4px; border-radius: 20px; pointer-events: none; z-index: 2; box-shadow: 0 0 calc(8px + 36px * var(--beat)) calc(1px + 7px * var(--beat)) rgba(var(--accent-rgb), calc(0.3 + 0.5 * var(--beat))), 0 0 calc(4px + 18px * var(--beat)) calc(0px + 3px * var(--beat)) rgba(var(--accent2-rgb), calc(0.18 + 0.4 * var(--beat))); } .art { width: 104px; height: 104px; border-radius: 16px; object-fit: cover; background: rgba(0, 0, 0, 0.35); box-shadow: 0 8px 24px rgba(0,0,0,0.4); } .art.empty { display: grid; place-items: center; color: var(--muted); } .art-empty-ic { width: 40px; height: 40px; } .now-meta { flex: 1; min-width: 0; } .np-title { font-weight: 700; font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .np-sub { color: var(--muted); font-size: 13px; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .progress { height: 6px; background: rgba(255, 255, 255, 0.12); border-radius: 99px; margin: 14px 0 6px; overflow: hidden; } .bar { height: 100%; width: 0%; background: linear-gradient(90deg, var(--accent2), var(--accent)); border-radius: 99px; transition: width 0.25s linear; } .times { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); } /* ---------- Controls ---------- */ .controls { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; margin-top: 16px; } .ctl { display: grid; place-items: center; flex-shrink: 0; width: 46px; height: 46px; border-radius: 50%; background: var(--glass); border: 1px solid var(--glass-bd); color: var(--fg); transition: transform 0.08s ease, background 0.15s ease, box-shadow 0.15s ease; backdrop-filter: blur(8px); } .ctl:hover { background: rgba(255, 255, 255, 0.12); } .ctl:active { transform: scale(0.92); } .ctl-ic { width: 21px; height: 21px; } .ctl.active { background: linear-gradient(135deg, var(--accent), var(--accent3)); border-color: transparent; color: #fff; box-shadow: 0 6px 18px rgba(var(--accent-rgb),0.4); } .ctl.skip { margin-left: auto; width: 56px; height: 56px; background: linear-gradient(135deg, var(--accent), var(--accent3)); border-color: transparent; box-shadow: 0 8px 24px rgba(var(--accent-rgb), 0.5); } .ctl.skip .ctl-ic { width: 24px; height: 24px; } .vol { flex: 1; max-width: 150px; accent-color: var(--accent); height: 4px; } /* ---------- Equalizer ---------- */ .eq { margin-top: 14px; background: var(--glass); border: 1px solid var(--glass-bd); border-radius: var(--radius); padding: 16px 18px 18px; backdrop-filter: blur(16px); animation: slide-in 0.22s ease; } @keyframes slide-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } .eq-presets { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; } .eq-chip { border: 1px solid var(--glass-bd); background: rgba(255, 255, 255, 0.05); color: var(--muted); font-size: 12.5px; font-weight: 600; padding: 7px 13px; border-radius: 99px; transition: all 0.15s ease; } .eq-chip.active { color: white; background: linear-gradient(135deg, var(--accent), var(--accent3)); border-color: transparent; } .eq-bands { display: flex; justify-content: space-between; gap: 6px; } .eq-band { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; } .eq-band input[type="range"] { -webkit-appearance: none; appearance: none; writing-mode: vertical-lr; direction: rtl; width: 6px; height: 110px; background: rgba(255, 255, 255, 0.12); border-radius: 99px; outline: none; cursor: pointer; } .eq-band input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: linear-gradient(135deg, var(--accent2), var(--accent)); box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.6); } .eq-band input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border: none; border-radius: 50%; background: linear-gradient(135deg, var(--accent2), var(--accent)); box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.6); } .eq-band .eq-freq { font-size: 11px; color: var(--muted); } .eq-band .eq-gain { font-size: 10px; color: var(--accent2); min-height: 12px; } /* ---------- Search / add ---------- */ .add { margin-top: 18px; } #add-form { display: flex; align-items: center; gap: 8px; background: var(--glass); border: 1px solid var(--glass-bd); border-radius: 16px; padding: 6px 6px 6px 14px; backdrop-filter: blur(12px); } #add-form:focus-within { border-color: var(--accent); } .add-ic { color: var(--muted); display: grid; place-items: center; } .add-ic svg { width: 18px; height: 18px; } #add-input { flex: 1; border: none; background: transparent; color: var(--fg); font-size: 15px; outline: none; padding: 9px 0; min-width: 0; } #add-btn { display: grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; border: none; border-radius: 12px; background: linear-gradient(135deg, var(--accent), var(--accent3)); color: #fff; transition: transform 0.08s ease; } #add-btn:active { transform: scale(0.92); } .add-btn-ic { width: 20px; height: 20px; } .add-msg { font-size: 13px; margin: 10px 4px 0; color: var(--muted); } .add-msg.err { color: var(--danger); } .add-msg.ok { color: var(--accent2); } .results { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; max-height: 360px; overflow-y: auto; } .result { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 14px; background: var(--glass); border: 1px solid var(--glass-bd); cursor: pointer; transition: background 0.12s; } .result:hover { background: rgba(255, 255, 255, 0.1); } .result img { width: 64px; height: 40px; border-radius: 8px; object-fit: cover; flex-shrink: 0; background: rgba(0,0,0,0.3); } .result-meta { flex: 1; min-width: 0; } .result-title { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .result-sub { font-size: 12px; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .result-add { flex-shrink: 0; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: rgba(var(--accent-rgb),0.18); color: var(--accent2); border: none; } .result-add svg { width: 18px; height: 18px; } /* ---------- Queue ---------- */ .queue-head { display: flex; align-items: center; justify-content: space-between; margin: 24px 2px 12px; } .queue-title { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; } .qh-ic { width: 18px; height: 18px; color: var(--accent2); } .count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 7px; font-size: 12px; border-radius: 99px; background: var(--accent); color: white; } .clear-btn { background: transparent; border: 1px solid var(--glass-bd); color: var(--muted); font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 99px; } .clear-btn:active { color: var(--danger); border-color: var(--danger); } /* Queue head actions: shuffle + Juke It */ .queue-actions { display: flex; align-items: center; gap: 8px; } .qh-btn { display: grid; place-items: center; width: 34px; height: 30px; border-radius: 9px; border: 1px solid var(--glass-bd); background: transparent; color: var(--muted); } .qh-btn:hover { color: var(--fg); background: var(--glass); } .qh-btn svg { width: 16px; height: 16px; } .juke-btn { display: inline-flex; align-items: center; gap: 6px; border: none; border-radius: 99px; padding: 6px 13px; font-size: 12.5px; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent3)); box-shadow: 0 4px 14px rgba(var(--accent-rgb), 0.4); animation: slide-in 0.18s ease; } .juke-btn:active { transform: scale(0.96); } .juke-ic { width: 14px; height: 14px; } .juke-btn .count { background: rgba(0, 0, 0, 0.25); } /* selection checkbox on queue rows */ .row.selected { border-color: var(--accent2); background: rgba(var(--accent2-rgb), 0.12); } .row-check { display: grid; place-items: center; flex-shrink: 0; cursor: pointer; } .row-check input { position: absolute; opacity: 0; width: 0; height: 0; } .row-check .cb { width: 19px; height: 19px; border-radius: 6px; border: 2px solid var(--glass-bd); display: grid; place-items: center; transition: all 0.12s ease; } .row-check input:checked + .cb { background: linear-gradient(135deg, var(--accent2), var(--accent)); border-color: transparent; } .row-check input:checked + .cb::after { content: "✓"; color: #fff; font-size: 12px; font-weight: 900; } /* reorder up/down buttons */ .row-mv { display: flex; flex-direction: column; flex-shrink: 0; gap: 1px; } .row-mv button { width: 26px; height: 17px; border: none; background: transparent; color: var(--muted); display: grid; place-items: center; border-radius: 5px; } .row-mv button:hover:not(:disabled) { color: var(--fg); background: var(--glass); } .row-mv button:disabled { opacity: 0.25; cursor: default; } .row-mv svg { width: 14px; height: 14px; } .list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .list-empty { color: var(--muted); font-size: 14px; text-align: center; padding: 22px; } .row { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 14px; background: var(--glass); border: 1px solid var(--glass-bd); transition: background 0.12s, opacity 0.2s; } .row.played { opacity: 0.5; } .row.current { border-color: var(--accent); background: rgba(var(--accent-rgb), 0.16); box-shadow: 0 0 0 1px rgba(var(--accent-rgb),0.3); } .row-thumb { position: relative; width: 54px; height: 54px; flex-shrink: 0; } .row-thumb img { width: 100%; height: 100%; border-radius: 9px; object-fit: cover; background: rgba(0, 0, 0, 0.3); } .row-play { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 9px; background: rgba(0,0,0,0.4); color: #fff; opacity: 0; border: none; transition: opacity 0.12s; } .row-thumb:hover .row-play { opacity: 1; cursor: pointer; } .row-play svg { width: 22px; height: 22px; } .row-meta { flex: 1; min-width: 0; } .row-title { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .row-sub { font-size: 12px; color: var(--muted); margin-top: 2px; } .row-x { background: transparent; border: none; color: var(--muted); display: grid; place-items: center; width: 36px; height: 36px; border-radius: 9px; flex-shrink: 0; } .row-x svg { width: 18px; height: 18px; } .row-x:active { background: rgba(255, 92, 124, 0.15); color: var(--danger); } /* ---------- Collapsible search results header ---------- */ .results-head { display: flex; align-items: center; justify-content: space-between; margin: 14px 2px 8px; } .results-title { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--muted); } .results-actions { display: flex; align-items: center; gap: 4px; } .icon-btn { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; border: none; background: transparent; color: var(--muted); font-size: 14px; } .icon-btn:hover { background: var(--glass); color: var(--fg); } .icon-btn .chev { width: 18px; height: 18px; transition: transform 0.2s ease; } .results-head.collapsed .chev { transform: rotate(-90deg); } /* ---------- Live status panel ---------- */ .panel { margin-top: 16px; background: var(--glass); border: 1px solid var(--glass-bd); border-radius: var(--radius); overflow: hidden; backdrop-filter: blur(14px); } .panel-head { width: 100%; display: flex; align-items: center; justify-content: space-between; background: transparent; border: none; color: var(--fg); padding: 14px 16px; cursor: pointer; } .panel-title { display: flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 700; } .ph-ic { width: 18px; height: 18px; color: var(--accent2); } .panel-right { display: flex; align-items: center; gap: 10px; } .badge { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--accent2); background: rgba(var(--accent2-rgb),0.12); padding: 4px 9px; border-radius: 99px; } .badge-ic { width: 13px; height: 13px; } .panel .chev { width: 18px; height: 18px; color: var(--muted); transition: transform 0.25s ease; } .panel.collapsed .chev { transform: rotate(-90deg); } .panel-body { padding: 0 16px 16px; } .panel.collapsed .panel-body { display: none; } .stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .stat { background: rgba(255,255,255,0.04); border: 1px solid var(--glass-bd); border-radius: 14px; padding: 11px 13px; } .stat-top { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12px; font-weight: 600; } .stat-top svg { width: 14px; height: 14px; } .stat-val { font-size: 20px; font-weight: 800; margin-top: 4px; letter-spacing: -0.5px; } .stat-val small { font-size: 12px; font-weight: 600; color: var(--muted); } .stat-bar { height: 5px; border-radius: 99px; background: rgba(255,255,255,0.1); margin-top: 8px; overflow: hidden; } .stat-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--accent2), var(--accent)); transition: width 0.5s ease; } .devices-head { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; margin: 16px 0 8px; } .devices { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .device { display: flex; align-items: center; gap: 11px; padding: 9px 11px; border-radius: 12px; background: rgba(255,255,255,0.04); border: 1px solid var(--glass-bd); } .device.me { border-color: var(--accent); background: rgba(var(--accent-rgb),0.12); } .device-ic { width: 34px; height: 34px; flex-shrink: 0; display: grid; place-items: center; border-radius: 9px; background: rgba(var(--accent-rgb),0.16); color: var(--accent2); } .device-ic svg { width: 18px; height: 18px; } .device-meta { flex: 1; min-width: 0; } .device-name { font-size: 14px; font-weight: 600; } .device-sub { font-size: 11.5px; color: var(--muted); margin-top: 1px; } .device-tag { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; color: var(--accent); background: rgba(var(--accent-rgb),0.18); padding: 3px 8px; border-radius: 99px; } /* ---------- Song info / trivia ---------- */ .trivia { display: flex; flex-direction: column; gap: 12px; } .trivia-chips { display: flex; flex-wrap: wrap; gap: 8px; } .trivia-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--fg); background: rgba(255,255,255,0.06); border: 1px solid var(--glass-bd); padding: 6px 12px; border-radius: 99px; } .trivia-chip b { color: var(--accent2); font-weight: 800; } .trivia-channel { font-size: 13.5px; font-weight: 600; } .trivia-desc { font-size: 13px; line-height: 1.55; color: var(--muted); white-space: pre-wrap; word-break: break-word; } .trivia-empty { font-size: 13px; color: var(--muted); } /* ---------- Cache manager ---------- */ .cache-tools { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .cache-total { font-size: 12px; color: var(--muted); font-weight: 600; } .cache-controls { display: flex; gap: 8px; margin-bottom: 10px; } .cache-search-wrap { flex: 1; display: flex; align-items: center; gap: 8px; background: rgba(0,0,0,0.25); border: 1px solid var(--glass-bd); border-radius: 11px; padding: 0 10px; min-width: 0; } .cache-search-wrap:focus-within { border-color: var(--accent); } .cache-search-ic { width: 15px; height: 15px; color: var(--muted); flex-shrink: 0; } .cache-search { flex: 1; min-width: 0; border: none; background: transparent; color: var(--fg); font-size: 13px; outline: none; padding: 8px 0; } .cache-sort { border: 1px solid var(--glass-bd); background: rgba(0,0,0,0.25); color: var(--fg); font-size: 12.5px; font-weight: 600; border-radius: 11px; padding: 0 10px; outline: none; cursor: pointer; } .cache-sort:focus { border-color: var(--accent); } .cache-sort option { background: #14142a; color: var(--fg); } .mini-btn { background: var(--glass); border: 1px solid var(--glass-bd); color: var(--muted); font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 99px; } .mini-btn:hover { color: var(--fg); } .cache-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; max-height: 320px; overflow-y: auto; } .cache-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: rgba(255,255,255,0.04); border: 1px solid var(--glass-bd); } .cache-thumb { width: 52px; height: 38px; border-radius: 8px; object-fit: cover; flex-shrink: 0; background: rgba(0,0,0,0.3); } .cache-title.loading { color: var(--muted); font-style: italic; font-weight: 500; } .cache-meta { flex: 1; min-width: 0; } .cache-title { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cache-sub { font-size: 11.5px; color: var(--muted); margin-top: 1px; } .cache-actions { display: flex; gap: 2px; flex-shrink: 0; } .cache-empty { color: var(--muted); font-size: 13px; text-align: center; padding: 14px; } .badge { cursor: default; } /* download button on queue rows */ .row-dl { background: transparent; border: none; color: var(--muted); display: grid; place-items: center; width: 36px; height: 36px; border-radius: 9px; flex-shrink: 0; } .row-dl svg { width: 18px; height: 18px; } .row-dl:hover { color: var(--accent2); background: rgba(var(--accent2-rgb),0.12); } .row-actions { display: flex; align-items: center; flex-shrink: 0; } /* ---------- Footer ---------- */ .footer { margin-top: 36px; padding: 26px 16px 8px; border-top: 1px solid var(--glass-bd); display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; } .footer-logo { display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 800; letter-spacing: -0.3px; } .footer-logo span { color: var(--accent2); } .footer-logo-ic { width: 19px; height: 19px; color: var(--accent); } .footer-credit { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); } .footer-credit strong { color: var(--fg); font-weight: 800; letter-spacing: 1px; background: linear-gradient(135deg, var(--accent2), var(--accent3)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .footer-avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; border: 2px solid var(--accent); box-shadow: 0 0 14px rgba(var(--accent-rgb),0.5); } /* animated equalizer bars marking the now-playing row */ .eqbars { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; margin-right: 6px; vertical-align: middle; } .eqbars i { width: 3px; background: var(--accent2); border-radius: 2px; animation: eqbar 0.9s ease-in-out infinite; } .eqbars i:nth-child(1) { animation-delay: -0.2s; } .eqbars i:nth-child(2) { animation-delay: -0.5s; } .eqbars i:nth-child(3) { animation-delay: -0.1s; } @keyframes eqbar { 0%, 100% { height: 4px; } 50% { height: 12px; } }