:root { --bg:#0E1113; --card:#1A1F23; --line:#222A2F; --text:#EEF1F2; --dim:#9AA4AA; --accent:#F2A93B; --dock:clamp(84px, 7vw, 112px); } /* wallpapers: 6 original Celosia-inspired plume SVGs (generated by make_wallpapers.py, kept outside the repo), picked by html[data-wp] (app.js) */ :root, [data-wp="0"] { --wp:url("data:image/svg+xml,"); } /* celosia */ [data-wp="1"] { --wp:url("data:image/svg+xml,"); } /* amber */ [data-wp="2"] { --wp:url("data:image/svg+xml,"); } /* orchid */ [data-wp="3"] { --wp:url("data:image/svg+xml,"); } /* lagoon */ [data-wp="4"] { --wp:url("data:image/svg+xml,"); } /* moss */ [data-wp="5"] { --wp:url("data:image/svg+xml,"); } /* dusk */ * { box-sizing: border-box; } html { touch-action:pan-x pan-y; } /* no pinch or double-tap zoom; JS gestures (photo pinch) still get their pointer events */ /* Touch screen: Chromium's tap highlight (a dark box over whatever was tapped, which the car's browser can leave behind) is off; pressed feedback is :active only, as on CarPlay. Any :hover style goes inside @media (hover:hover) and (pointer:fine), or a tap leaves it stuck on. */ html { -webkit-tap-highlight-color:transparent; } /* An app, not a document: no text selection, long-press callout or system drag-and-drop (on WebKit a press-and-drag on the video lifted it as a drag preview, which stole the seek gesture and showed the page behind). Fields stay editable. */ body { -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; } img, canvas, svg, a { -webkit-user-drag:none; } input, textarea { -webkit-user-select:text; user-select:text; } html, body { margin:0; height:100%; background:var(--bg); color:var(--text); font-family:system-ui, -apple-system, "SF Pro Text", "PingFang SC", "Helvetica Neue", sans-serif; -webkit-font-smoothing:antialiased; } button { font:inherit; color:inherit; cursor:pointer; border:0; } #app { height:100vh; display:flex; background:var(--wp) center / cover no-repeat, #050307; } /* lite check (app.js fpsProbe): drift the wallpaper 3px for 3 s so every glass layer really re-renders */ #app.probe { animation:probe 3s linear; } @keyframes probe { to { background-position:50% calc(50% + 3px), 0 0; } } .stage { flex:1; min-width:0; display:flex; flex-direction:column; } /* ---- Liquid Glass material (iOS 26/27 style) ---- translucent fill + backdrop blur/saturate, a bright gradient rim (::before, masked to 1px), a specular sheen across the top (::after) and a soft drop shadow. --gf tints the fill per surface. Perf (Tesla MCU2): blur <= 20px, glass is never nested inside glass; html.lite swaps the blur for a solid fill. */ .glass, .tab.on { --gf:rgba(255,255,255,.1); position:relative; isolation:isolate; background:var(--gf); -webkit-backdrop-filter:blur(20px) saturate(170%) brightness(.92); backdrop-filter:blur(20px) saturate(170%) brightness(.92); box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 10px 30px rgba(0,0,0,.3); } .glass::before, .tab.on::before { content:""; position:absolute; inset:0; z-index:1; border-radius:inherit; padding:1px; pointer-events:none; background:linear-gradient(155deg, rgba(255,255,255,.6), rgba(255,255,255,.12) 28%, rgba(255,255,255,0) 50%, rgba(255,255,255,.06) 72%, rgba(255,255,255,.32)); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; } .glass::after, .tab.on::after { content:""; position:absolute; left:0; right:0; top:0; height:min(50%, 90px); z-index:1; pointer-events:none; border-radius:inherit; border-bottom-left-radius:0; border-bottom-right-radius:0; background:linear-gradient(rgba(255,255,255,.1), rgba(255,255,255,0)); } /* lite: no backdrop blur anywhere, a solid translucent fill instead (also for prefers-reduced-transparency, set by app.js) */ .lite .glass, .lite .tab.on { -webkit-backdrop-filter:none; backdrop-filter:none; background:rgba(38,40,46,.9); } .lite .player .glass { background:rgba(20,20,22,.82); } /* CarPlay status dock (left, every view) */ .dock { --gf:rgba(255,255,255,.08); width:var(--dock); flex:none; margin:10px 0 10px 10px; border-radius:28px; display:flex; flex-direction:column; align-items:center; gap:10px; padding:clamp(14px, 2.5vh, 24px) 0 clamp(12px, 2vh, 18px); } .dock { z-index:10; } /* above Now Playing, which slides up behind it */ .dock > * { position:relative; z-index:2; } /* above the glass rim/sheen */ .dk-status { display:flex; flex-direction:column; align-items:center; gap:6px; } .clock { font-size:clamp(22px, 2vw, 30px); font-weight:600; letter-spacing:-.01em; font-variant-numeric:tabular-nums; } /* iOS 26/27 status: phone glyph + name, then network type and battery on one line */ .dk-sig { display:flex; align-items:center; gap:4px; font-size:12px; font-weight:500; color:rgba(255,255,255,.75); } .dk-sig svg { width:9px; height:14px; fill:currentColor; } .dk-net { display:flex; align-items:center; gap:5px; min-height:16px; font-size:12px; font-weight:600; font-variant-numeric:tabular-nums; } .dk-net b { font-weight:700; letter-spacing:.01em; } .dk-bat { display:flex; align-items:center; gap:3px; font-size:12px; font-weight:600; } .dk-bat[hidden], .dk-net b[hidden] { display:none; } .dk-sig, #ph-radio { display:none !important; } /* phone name and network type dropped from the dock: only the battery stays */ /* battery: thin rounded outline, capsule fill to --lvl, nub; green + bolt when charging, red at <=20% */ .bat { position:relative; width:22px; height:11px; padding:2px; border:1px solid rgba(255,255,255,.45); border-radius:4.5px; margin-right:3px; } .bat::after { content:""; position:absolute; right:-3.5px; top:3.5px; width:2px; height:4px; border-radius:0 2px 2px 0; background:rgba(255,255,255,.45); } .bat i { display:block; height:100%; width:var(--lvl, 0%); min-width:3px; border-radius:2.5px; background:#fff; } .bat svg { display:none; position:absolute; inset:0; margin:auto; height:11px; fill:#fff; stroke:rgba(0,0,0,.55); stroke-width:1; paint-order:stroke; } .dk-bat.charging .bat i { background:#30d158; } .dk-bat.charging .bat svg { display:block; } .dk-bat.low .bat i { background:#ff453a; } .dk-bat.low #ph-pct { color:#ff6961; } .dk-badge { margin:0 10px; font-size:12px; font-weight:600; line-height:1.3; padding:4px 8px; border-radius:8px; background:rgba(255,59,48,.2); color:#ff6961; text-align:center; } .dk-badge[hidden] { display:none; } .dk-recents { flex:1; min-height:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:clamp(12px, 2vh, 20px); } .rc { width:clamp(54px, 4.6vw, 68px); aspect-ratio:1; padding:0; background:none; position:relative; border-radius:22.5%; } .rc .ic { width:100%; height:100%; } .rc:active { filter:brightness(.75); } /* Now Playing icon: level bars bob while playing (not for reduced motion) */ .lv { transform-box:fill-box; transform-origin:center; } .playing .lv { animation:lv .9s ease-in-out infinite alternate; } .playing .lv:nth-child(2n) { animation-duration:.7s; animation-delay:-.3s; } .playing .lv:nth-child(3n) { animation-duration:1.1s; animation-delay:-.6s; } @keyframes lv { from { transform:scaleY(1); } to { transform:scaleY(.45); } } @media (prefers-reduced-motion: reduce) { .playing .lv { animation:none; } } .dk-home { width:58px; height:58px; border-radius:50%; background:rgba(255,255,255,.14); box-shadow:inset 0 1px 0 rgba(255,255,255,.3), inset 0 0 0 1px rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; flex:none; } .dk-home:active { background:rgba(255,255,255,.3); } .dk-home svg { width:24px; height:24px; fill:#fff; } main { flex:1; min-height:0; display:flex; } .view { flex:1; min-width:0; } .view[hidden], .nowbar[hidden] { display:none; } /* non-home views: the whole wallpaper is dimmed (dock included) so dock and page share one background */ body.on-page #app { background:linear-gradient(rgba(6,8,10,.82), rgba(6,8,10,.82)), var(--wp) center / cover no-repeat, #050307; } /* CarPlay light appearance: on a light wallpaper (html[data-tone=light], app.js) the bare home screen gets dark labels and a light frosted dock. Pages (dimmed above) and Now Playing keep the dark look. */ [data-tone="light"] body:not(.on-page):not(.np-open) .dock { --gf:rgba(255,255,255,.5); color:#1d1d1f; box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 10px 30px rgba(0,0,0,.12); } .lite[data-tone="light"] body:not(.on-page):not(.np-open) .dock { background:rgba(242,242,247,.9); } [data-tone="light"] body:not(.on-page):not(.np-open) .bat { border-color:rgba(29,29,31,.45); } [data-tone="light"] body:not(.on-page):not(.np-open) .bat::after { background:rgba(29,29,31,.45); } [data-tone="light"] body:not(.on-page):not(.np-open) .dk-bat:not(.charging):not(.low) .bat i { background:#1d1d1f; } [data-tone="light"] body:not(.on-page):not(.np-open) .dk-home { background:rgba(29,29,31,.08); box-shadow:inset 0 0 0 1px rgba(29,29,31,.06); } [data-tone="light"] body:not(.on-page):not(.np-open) .dk-home:active { background:rgba(29,29,31,.18); } [data-tone="light"] body:not(.on-page):not(.np-open) .dk-home svg { fill:#1d1d1f; } [data-tone="light"] .app b { color:#1d1d1f; text-shadow:none; } [data-tone="light"] .dots::before { background:rgba(255,255,255,.45); box-shadow:inset 0 0 0 .5px rgba(29,29,31,.12); } .lite[data-tone="light"] .dots::before { background:rgba(242,242,247,.9); } [data-tone="light"] .pdot::after { background:rgba(29,29,31,.28); } [data-tone="light"] .pdot.on::after { background:#1d1d1f; } /* dashboard cards keep their white text (and the playing card its dark art backdrop): smoked glass instead */ [data-tone="light"] .card-np, [data-tone="light"] .card-resume, [data-tone="light"] .card-wx, [data-tone="light"] .card-cal { --gf:rgba(28,28,30,.55); } /* home: two pages side by side in .track, slid by --page (and by the finger while dragging) */ .home { position:relative; overflow:hidden; display:flex; flex-direction:column; touch-action:none; user-select:none; -webkit-user-select:none; } .track { flex:1; min-height:0; display:flex; width:200%; transform:translateX(calc(var(--page, 0) * -50%)); transition:transform .35s cubic-bezier(.2,.8,.2,1); } .track.dragging { transition:none; } .hpage { width:50%; flex:none; min-height:0; } /* iOS page dots: 8 px dots 16 px apart in a small glass capsule. Each button is a full 64 px hit area with its dot drawn at the inner edge, so the targets stay big while the dots sit close. ponytail: assumes the two home pages; a third page would need a centred middle dot. */ .dots { flex:none; position:relative; display:flex; justify-content:center; margin-top:-12px; } .dots::before { content:""; position:absolute; left:50%; top:50%; width:44px; height:24px; transform:translate(-50%, -50%); border-radius:999px; background:rgba(255,255,255,.12); box-shadow:inset 0 0 0 .5px rgba(255,255,255,.3); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); pointer-events:none; } .lite .dots::before { -webkit-backdrop-filter:none; backdrop-filter:none; background:rgba(38,40,46,.9); } .pdot { position:relative; width:64px; height:64px; padding:0; background:none; display:flex; align-items:center; justify-content:flex-end; } .pdot + .pdot { justify-content:flex-start; } .pdot::after { content:""; width:8px; height:8px; margin:0 4px; border-radius:50%; background:rgba(255,255,255,.35); transition:background .2s; } .pdot.on::after { background:#fff; } /* page 1: icon grid */ .grid { --ic:clamp(84px, min(12.5vw, 17vh), 150px); display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); grid-template-rows:repeat(2, calc(var(--ic) + 64px)); /* two CarPlay rows; apps fill from the top-left */ align-content:space-evenly; row-gap:clamp(16px, 4vh, 48px); padding:clamp(16px, 3vh, 40px) clamp(16px, 3vw, 56px) 0; } .app { background:none; padding:6px; display:flex; flex-direction:column; align-items:center; gap:clamp(8px, 1.2vh, 14px); min-width:0; } .ic { display:block; position:relative; width:var(--ic); aspect-ratio:1; border-radius:24%; overflow:hidden; background:var(--g); flex:none; box-shadow:0 8px 22px rgba(0,0,0,.38), 0 2px 4px rgba(0,0,0,.2); } /* glass edge highlight (all icons, YouTube's too) + top sheen */ .ic::before { content:""; position:absolute; inset:0; z-index:1; border-radius:inherit; padding:1.5px; pointer-events:none; background:linear-gradient(150deg, rgba(255,255,255,.75), rgba(255,255,255,.1) 35%, rgba(255,255,255,0) 55%, rgba(255,255,255,.35)); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; } .ic::after { content:""; position:absolute; inset:0; background:linear-gradient(rgba(255,255,255,.18), rgba(255,255,255,0) 50%); } /* iOS 26/27 system icons: soft glow from the top-left over the gradient body, glyphs with depth */ .ic.sys { background:radial-gradient(110% 80% at 25% 0%, rgba(255,255,255,.38), rgba(255,255,255,0) 60%), var(--g); } .ic.sys svg { filter:drop-shadow(0 3px 3px rgba(0,0,0,.22)); } .ic svg { display:block; width:100%; height:100%; } /* real Apple icon PNGs: their own squircle and glass, so no fill, rim or sheen; only the tile radius clips. onerror drops .apple */ .ic.apple { background:none; } .ic.apple::before, .ic.apple::after, .ic.apple svg { display:none; } .ic img { display:block; width:100%; height:100%; } .app:active .ic { filter:brightness(.75); transform:scale(.96); } .app[hidden] { display:none; } .app b { max-width:100%; font-size:clamp(14px, 1.5vw, 20px); font-weight:400; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-shadow:0 1px 4px rgba(0,0,0,.6); } /* page 2: dashboard — now playing (left, tall), resume + shortcuts (right) */ .dash { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); grid-template-rows:auto auto minmax(0,1fr); gap:clamp(14px, 1.6vw, 24px); padding:clamp(16px, 2.5vh, 32px) clamp(16px, 2.5vw, 40px) 0; } .card-np, .card-resume, .card-wx, .card-cal { --gf:rgba(255,255,255,.09); border-radius:34px; min-height:0; overflow:hidden; } .card-np { grid-row:1 / -1; position:relative; display:flex; flex-direction:column; gap:clamp(12px, 2vh, 20px); padding:clamp(18px, 2.2vw, 32px); touch-action:none; } .card-np > *:not(.dn-bg), .card-resume > *, .card-wx > *, .card-cal > * { position:relative; z-index:2; } .card-np svg, .card-resume svg { display:block; fill:currentColor; } .dn-bg { position:absolute; inset:-40px; width:calc(100% + 80px); height:calc(100% + 80px); object-fit:cover; filter:blur(24px) brightness(.45); opacity:.85; pointer-events:none; } .dn-top { display:flex; flex-wrap:wrap; align-items:center; gap:clamp(14px, 1.6vw, 24px); min-height:0; } .dn-art { height:clamp(96px, 24vh, 260px); aspect-ratio:1; border-radius:18px; object-fit:cover; background:#2A3237; box-shadow:0 10px 30px rgba(0,0,0,.45); pointer-events:none; } .card-np.video .dn-art { aspect-ratio:16/9; height:clamp(90px, 20vh, 220px); } .dn-meta { flex:1 1 200px; min-width:0; display:flex; flex-direction:column; gap:6px; } .dn-meta small { font-size:15px; font-weight:600; letter-spacing:.04em; color:#ff375f; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .dn-meta b { font-size:clamp(22px, 2.3vw, 34px); line-height:1.2; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .dn-meta span { font-size:clamp(17px, 1.6vw, 22px); color:#c7c7cc; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .dn-scrub { margin-top:auto; flex:none; } .dn-scrub .times { margin-top:-14px; } .dn-btns { display:flex; align-items:center; justify-content:center; gap:clamp(20px, 4vw, 64px); flex:none; } .dnb { width:clamp(72px, 10vh, 96px); height:clamp(72px, 10vh, 96px); border-radius:50%; background:none; display:flex; align-items:center; justify-content:center; color:#fff; flex:none; } .dnb:active { background:rgba(255,255,255,.15); } .dnb svg { width:56%; height:56%; } .dnb.main { width:clamp(84px, 12vh, 112px); height:clamp(84px, 12vh, 112px); background:#fff; color:#000; } .dnb.main:active { background:#d1d1d6; } .dn-idle { display:none; flex:1; flex-direction:column; align-items:center; justify-content:center; gap:10px; text-align:center; } .dn-logo { width:clamp(72px, 11vh, 104px); aspect-ratio:1; border-radius:22.5%; box-shadow:0 8px 24px rgba(0,0,0,.4); margin-bottom:clamp(4px, 1.5vh, 16px); } .dn-idle b { font-size:clamp(26px, 2.8vw, 38px); } .dn-idle span { font-size:clamp(17px, 1.6vw, 22px); color:#aeaeb2; margin-bottom:clamp(8px, 2vh, 24px); max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .card-np.idle > :not(.dn-idle) { display:none; } .card-np.idle .dn-idle { display:flex; } .card-resume { padding:clamp(14px, 1.4vw, 20px); display:flex; flex-direction:column; gap:12px; text-align:left; } .card-resume:active { filter:brightness(.85); } .cr-thumb { position:relative; flex:1; min-height:64px; border-radius:22px; overflow:hidden; background:linear-gradient(135deg, #3a3a3c, #1c1c1e); } .cr-thumb img { width:100%; height:100%; object-fit:cover; } .cr-thumb i { position:absolute; right:12px; bottom:12px; width:52px; height:52px; border-radius:50%; background:rgba(255,255,255,.9); box-shadow:0 4px 12px rgba(0,0,0,.3); color:#000; display:flex; align-items:center; justify-content:center; } .cr-thumb i svg { width:28px; height:28px; } .cr-text { display:flex; flex-direction:column; gap:4px; min-width:0; flex:none; } .cr-text small { font-size:15px; font-weight:600; letter-spacing:.04em; color:#ff9f0a; } .cr-text b { font-size:clamp(18px, 1.7vw, 24px); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .cr-clear { position:absolute; top:4px; right:4px; z-index:3; width:64px; height:64px; padding:0; background:none; display:flex; align-items:center; justify-content:center; } .cr-clear span { width:40px; height:40px; border-radius:50%; background:rgba(30,30,32,.55); box-shadow:inset 0 0 0 1px rgba(255,255,255,.25); display:flex; align-items:center; justify-content:center; } .cr-clear svg { width:22px; height:22px; } .cr-clear:active span { background:rgba(255,255,255,.3); } .no-resume .cr-clear, .no-resume .cr-thumb i { display:none; } .no-resume #app-resume .ic { opacity:.55; } #app-resume { -webkit-touch-callout:none; user-select:none; -webkit-user-select:none; } .undo { --gf:rgba(30,30,32,.6); position:absolute; left:50%; bottom:56px; transform:translateX(-50%); z-index:5; display:flex; align-items:center; gap:8px; padding:0 8px 0 28px; border-radius:999px; font-size:20px; white-space:nowrap; } .undo[hidden], .lp[hidden] { display:none; } .undo > * { position:relative; z-index:2; } .undo button { min-height:64px; padding:0 20px; background:none; color:#ffb340; font-weight:600; font-size:20px; } .lp { position:fixed; inset:0; z-index:20; } .lp-menu { --gf:rgba(40,40,44,.7); position:absolute; min-width:240px; border-radius:22px; overflow:hidden; } .lp-menu button { position:relative; z-index:2; display:block; width:100%; min-height:64px; padding:0 24px; background:none; text-align:left; font-size:21px; color:#ff453a; } .lp-menu button:disabled { color:rgba(255,255,255,.4); } .dash img:not([src]) { visibility:hidden; } /* no art (or it failed): no broken-image icon */ /* the dashboard card mirrors the video, so the docked mini-player would only cover the cards */ .on-dash .player.mini { display:none; } /* dashboard weather (Open-Meteo via the phone) and next calendar event */ .card-wx[hidden], .card-cal[hidden] { display:none; } .card-wx { padding:14px 18px; display:flex; flex-direction:column; gap:10px; } .wx-now { display:flex; align-items:center; gap:12px; } .wx-now svg { width:44px; height:44px; flex:none; } .wx-now b { font-size:34px; font-weight:300; letter-spacing:-.02em; } .wx-now span { min-width:0; display:flex; flex-direction:column; font-size:14px; color:#c7c7cc; } .wx-now span small { color:var(--dim); font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .wx-hours { display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:2px; text-align:center; font-size:13px; color:#c7c7cc; } .wx-hours span { display:flex; flex-direction:column; align-items:center; gap:2px; } .wx-hours svg { width:22px; height:22px; } .card-cal { padding:12px 18px; display:flex; align-items:center; gap:12px; } .cal-text { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; } .cal-text small { font-size:13px; font-weight:600; letter-spacing:.04em; color:#ff453a; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .cal-text b { font-size:17px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .cal-text span { font-size:14px; color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .cal-go { flex:none; color:#0a84ff; } .nowbar { --gf:rgba(255,255,255,.1); touch-action:none; height:96px; margin:0 16px 12px; padding:0 14px 0 16px; border-radius:30px; overflow:hidden; display:flex; align-items:center; gap:20px; flex:none; } .nowbar > * { position:relative; z-index:2; } .nowbar > .nb-info { position:static; } /* so .progress hugs the capsule's top edge */ a { color:inherit; text-decoration:none; } img { display:block; } .dim { color:var(--dim); font-weight:400; } .btn { min-height:48px; padding:0 20px; border-radius:999px; background:rgba(255,255,255,.1); box-shadow:inset 0 1px 0 rgba(255,255,255,.2), inset 0 0 0 1px rgba(255,255,255,.06); font-size:17px; display:inline-flex; align-items:center; justify-content:center; flex:none; } /* touch: rows and cards light up as a glass fill (no backdrop blur, lists can be long) */ .btn:active, .tab:active, .card:active, .row-item:active { background:rgba(255,255,255,.14); box-shadow:inset 0 1px 0 rgba(255,255,255,.25), inset 0 0 0 1px rgba(255,255,255,.08); } .btn.primary, .btn.on { background:var(--accent); color:var(--bg); font-weight:500; } .btn.icon { width:48px; padding:0; } .btn.icon svg { width:24px; height:24px; fill:currentColor; } /* list pages: top bar + scrolling content */ .page { display:flex; flex-direction:column; min-height:0; } /* sizes are for the car's ~773 x 601 CSS px browser (@1.53x): 48 px targets are ~73 device px */ .bar { display:flex; gap:8px; align-items:center; padding:12px 20px; flex:none; } .bar.sub { padding-top:0; } .bar[hidden], #search-results > [hidden], .tabs[hidden], .crumbs[hidden] { display:none; } .tabs { flex:1; min-width:0; display:flex; gap:4px; overflow-x:auto; scrollbar-width:none; } .tabs::-webkit-scrollbar { display:none; } .tab { min-height:48px; padding:0 18px; border-radius:999px; background:transparent; font-size:17px; color:var(--dim); flex:none; } .tab.on { --gf:rgba(255,255,255,.14); color:var(--text); font-weight:500; box-shadow:inset 0 1px 0 rgba(255,255,255,.22); } .content { flex:1; min-height:0; overflow-y:auto; padding:0 20px 24px; -webkit-overflow-scrolling:touch; } .note { font-size:18px; color:var(--dim); padding:24px 0; } /* skeletons (app.js skel) while anything loads: the real layout in the thumbnails' own empty colour, breathing slowly (opacity only: no repaint); still under Reduce effects and reduced motion */ .skel { pointer-events:none; animation:skel 1.1s ease-in-out infinite alternate; } @keyframes skel { to { opacity:.45; } } .lite .skel { animation:none; } @media (prefers-reduced-motion: reduce) { .skel { animation:none; } } .skel b, .skel small { display:block; height:.8em; width:85%; margin:.25em 0; border-radius:6px; background:#2A3237; } .skel small { width:55%; margin:.275em 0; } /* one line of .vcard small (1.35) */ .skel .v-txt { flex:1; } /* empty: it would shrink to nothing */ .vcard.skel b + b { width:60%; margin-top:calc(.25em - 4px); } /* two title lines (1.3em each, less the 4px gap) */ h3.skel { width:180px; height:1.2em; padding-block:.2em; background:#2A3237 content-box; border-radius:6px; } /* its own margins: one line tall */ .skel i { display:block; flex:none; background:#2A3237; } .row-item.skel i { width:56px; height:56px; border-radius:14px; } .shelf-row.rows .row-item.skel i { width:48px; height:48px; } .ytm .row-item.skel i { border-radius:4px; } .row-item.skel i.fi { width:64px; height:64px; border-radius:16px; } .vq-row.skel i { width:112px; height:auto; aspect-ratio:16/9; border-radius:8px; } .st-tile.skel .st-logo { background:#2A3237; } .np-lyrics b.skel { display:block; width:56%; height:.8em; margin:.4em auto; border-radius:8px; background:rgba(255,255,255,.14); } /* 1.6em a line */ .np-lyrics b.skel:nth-child(3n+1) { width:64%; } .np-lyrics b.skel:nth-child(3n+2) { width:46%; } .grid3 { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px 16px; align-content:start; } .grid4 { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:20px 16px; align-content:start; } .grid3 .note, .grid4 .note { grid-column:1 / -1; } .card { background:transparent; padding:0; text-align:left; display:flex; flex-direction:column; gap:8px; border-radius:22px; min-width:0; } .card b { font-size:16px; font-weight:500; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .card small { font-size:14px; color:var(--dim); } .thumb { position:relative; aspect-ratio:16/9; border-radius:20px; overflow:hidden; background:#2A3237; } .thumb.square { aspect-ratio:1; } .thumb img { width:100%; height:100%; object-fit:cover; } .dur { position:absolute; right:10px; bottom:10px; padding:3px 10px; border-radius:999px; background:rgba(0,0,0,.6); font-size:16px; } .row-item { width:100%; min-height:72px; display:flex; align-items:center; gap:14px; padding:10px 14px; border-radius:22px; background:transparent; text-align:left; } .row-item img { width:56px; height:56px; border-radius:14px; object-fit:cover; background:#2A3237; flex:none; } .ri-text { flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; } .ri-text b, .ri-text small { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .ri-text b { font-size:17px; font-weight:500; } .ri-text small { font-size:14px; color:var(--dim); } #search-q { flex:1; min-width:0; min-height:48px; padding:0 20px; border-radius:999px; border:0; box-shadow:inset 0 1px 0 rgba(255,255,255,.18), inset 0 0 0 1px rgba(255,255,255,.08); background:rgba(255,255,255,.1); color:var(--text); font:inherit; font-size:17px; } /* full-screen video player, above the header; YouTube-style overlay (look ported from reference/home-player) */ .player { position:fixed; inset:0; width:100vw; height:100vh; height:100dvh; z-index:10; background:#000; touch-action:none; --red:#F00; --buffered:rgba(255,255,255,.5); --track:rgba(255,255,255,.2); } .player[hidden] { display:none; } .player canvas { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; } .player svg { fill:currentColor; display:block; } .yt { position:absolute; inset:0; opacity:0; transition:opacity .2s; pointer-events:none; } .player.ctl .yt { opacity:1; } .player.ctl .yt button, .player.ctl .yt input { pointer-events:auto; } /* glass capsules floating over the video (darker fill: video can be bright) */ .yt-top { --gf:rgba(0,0,0,.28); position:absolute; top:16px; left:16px; right:16px; display:flex; align-items:center; gap:12px; padding:4px 8px; border-radius:999px; } .yt-top > *, .yt-bot > * { position:relative; z-index:2; } .v-info { flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; } .v-info b, .v-info small { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .v-info b { font-size:clamp(17px, 1.8vw, 22px); font-weight:500; } .v-info small { font-size:18px; color:#ccc; } .ybtn { width:72px; height:72px; border-radius:50%; background:none; display:inline-flex; align-items:center; justify-content:center; flex:none; color:#fff; } .ybtn:active { background:rgba(255,255,255,.15); } .ybtn svg { width:40px; height:40px; } .yt-mid { position:absolute; inset:0; margin:auto; height:144px; display:flex; align-items:center; justify-content:center; gap:clamp(40px, 7vw, 120px); } .ybtn.side { width:clamp(88px, 11vh, 104px); height:clamp(88px, 11vh, 104px); } .ybtn.side svg { width:64px; height:64px; } .ybtn.side text { font-size:6.5px; font-weight:700; } .ybtn.main, .spin { width:clamp(112px, 15vh, 144px); height:clamp(112px, 15vh, 144px); } .ybtn.main { background:rgba(0,0,0,.4); box-shadow:inset 0 1px 0 rgba(255,255,255,.25), inset 0 0 0 1px rgba(255,255,255,.12); } .ybtn.main svg { width:55%; height:55%; } .spin { display:none; border-radius:50%; position:relative; } .spin::after { content:""; position:absolute; inset:17%; border-radius:50%; border:8px solid rgba(255,255,255,.25); border-top-color:#fff; animation:spin 1s linear infinite; } @keyframes spin { to { transform:rotate(360deg); } } .player[data-state=loading] .spin { display:block; } .player[data-state=loading] #v-toggle, .player[data-state=error] .yt-mid, .player[data-state=ended] .side { display:none; } .v-err { display:none; position:absolute; inset:0; margin:auto; height:200px; flex-direction:column; align-items:center; justify-content:center; gap:24px; padding:0 64px; text-align:center; } .player[data-state=error] .v-err { display:flex; } .v-err p { margin:0; font-size:24px; } .yt-bot { --gf:rgba(0,0,0,.28); position:absolute; left:16px; right:16px; bottom:16px; padding:10px 24px 0; border-radius:32px; } .time { display:block; padding:0 8px; font-size:22px; font-variant-numeric:tabular-nums; } .seekwrap { position:relative; } .tip { position:absolute; bottom:64px; transform:translateX(-50%); padding:6px 16px; border-radius:999px; background:rgba(0,0,0,.75); font-size:24px; font-variant-numeric:tabular-nums; display:none; } .tip.on { display:block; } /* seek bar: red up to the playhead, grey buffered ahead (--trk set from app.js) */ #v-seek { display:block; width:100%; height:64px; margin:0; -webkit-appearance:none; appearance:none; background:transparent; } #v-seek::-webkit-slider-runnable-track { height:6px; border-radius:3px; background:var(--ticks, linear-gradient(transparent, transparent)), var(--trk, var(--track)); transition:height .1s; } #v-seek:active::-webkit-slider-runnable-track { height:10px; } #v-seek::-webkit-slider-thumb { -webkit-appearance:none; width:28px; height:28px; margin-top:-11px; border-radius:50%; background:var(--red); } #v-seek:active::-webkit-slider-thumb { margin-top:-9px; } /* hidden overlay: a thin progress line on the bottom edge */ .v-line { position:absolute; left:0; right:0; bottom:0; height:4px; background:var(--trk, var(--track)); pointer-events:none; } .player.ctl .v-line { display:none; } /* double-tap skip ripple (reference seekFx) */ .skfx { position:absolute; top:50%; width:clamp(160px, 22vh, 220px); aspect-ratio:1; transform:translateY(-50%); border-radius:50%; background:rgba(0,0,0,.4); box-shadow:inset 0 1px 0 rgba(255,255,255,.25); color:#fff; display:none; flex-direction:column; align-items:center; justify-content:center; gap:12px; font-size:24px; font-weight:600; pointer-events:none; z-index:3; } #skl { left:10%; } #skr { right:10%; } .skfx.on { display:flex; animation:skpop .7s ease forwards; } .skfx svg { width:64px; height:36px; } #skl svg { transform:scaleX(-1); } @keyframes skpop { 0% { opacity:0; transform:translateY(-50%) scale(.9); } 20% { opacity:1; transform:translateY(-50%); } 70% { opacity:1; } 100% { opacity:0; } } /* horizontal drag on the video: target time and delta in the centre */ .v-drag { display:none; position:absolute; inset:0; margin:auto; height:160px; flex-direction:column; align-items:center; justify-content:center; gap:8px; text-shadow:0 2px 8px #000; } .v-drag b { font-size:64px; font-variant-numeric:tabular-nums; } .v-drag small { font-size:28px; color:#ddd; } .player.scrub .v-drag { display:flex; } .player.scrub .yt-mid, .player.scrub .v-err { visibility:hidden; } /* mini-player: docked bottom-right while browsing; video keeps playing */ .mini-bar { display:none; } /* sized by width (16:9 video + 80px bar), so it scales with the browser window */ /* transparent so the glass bar blurs the page behind it, not the player's black */ .player.mini { inset:auto clamp(16px, 2vw, 32px) clamp(16px, 2vw, 32px) auto; width:clamp(320px, 30vw, 520px); height:auto; border-radius:28px; overflow:hidden; background:transparent; box-shadow:0 12px 36px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.18); } .player.mini canvas { position:relative; display:block; height:auto; aspect-ratio:16/9; background:#000; } .player.mini .yt, .player.mini .skfx, .player.mini .qsheet { display:none; } .player.mini .v-line { display:block; bottom:80px; } .player.mini .mini-bar { --gf:rgba(255,255,255,.1); display:flex; align-items:center; gap:4px; height:80px; padding:0 8px 0 22px; box-shadow:none; } .mini-bar > * { position:relative; z-index:2; } .mini-title { flex:1; min-width:0; font-size:17px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* quality sheet */ .qsheet { position:absolute; inset:0; z-index:4; background:rgba(0,0,0,.4); } .qsheet[hidden] { display:none; } .qpanel { --gf:rgba(30,30,32,.45); position:absolute; top:108px; right:24px; width:clamp(260px, 28vw, 320px); max-height:calc(100% - 132px); overflow-y:auto; padding:12px 8px; border-radius:30px; } .qpanel > * { position:relative; z-index:2; } /* the content scrolls inside the panel, so the glass edge and sheen (absolute pseudo-elements) stay put */ #qsheet .qpanel, #vqsheet .qpanel { display:flex; flex-direction:column; overflow:hidden; } .qscroll { min-height:0; overflow-y:auto; margin:-12px -8px; padding:12px 8px; } .qpanel h3 { margin:0; padding:8px 24px 12px; font-size:20px; color:var(--dim); font-weight:600; } .qopt { display:flex; align-items:center; width:100%; min-height:56px; padding:0 24px 0 56px; border-radius:18px; background:none; font-size:19px; position:relative; } .qopt:active { background:rgba(255,255,255,.1); } .qopt.on::before { content:"✓"; position:absolute; left:20px; } #subs-opts[hidden], #v-cc[hidden], .v-subs[hidden], #spd-opts[hidden], #aud-opts[hidden], #chap-opts[hidden], #v-chap[hidden], .v-rate[hidden] { display:none; } #subs-opts h3, #spd-opts h3, #aud-opts h3, #chap-opts h3 { padding-top:16px; } /* speed: one segmented row, the current one lit */ .spd { display:flex; gap:4px; margin:0 8px; padding:4px; border-radius:20px; background:rgba(255,255,255,.08); } .spd button { flex:1; min-width:0; height:52px; border-radius:16px; background:none; font-size:16px; font-variant-numeric:tabular-nums; color:rgba(255,255,255,.75); } .spd button:active { background:rgba(255,255,255,.1); } .spd button.on { background:rgba(255,255,255,.22); color:#fff; font-weight:600; box-shadow:inset 0 1px 0 rgba(255,255,255,.2); } #aud-list .qopt { text-align:left; line-height:1.25; padding-top:8px; padding-bottom:8px; } /* chapters: title and start time; the one playing now is lit */ .qopt.chap { gap:12px; padding-left:24px; text-align:left; } .qopt.chap span { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .qopt.chap small { flex:none; font-size:15px; color:var(--dim); font-variant-numeric:tabular-nums; } .qopt.chap.cur { background:rgba(255,255,255,.12); } .qopt.chap.cur small { color:rgba(255,255,255,.75); } /* skip intro: bottom right over the video, lifted above the controls while they show */ .v-skipin { --gf:rgba(20,20,22,.55); position:absolute; right:24px; bottom:clamp(24px, 7%, 56px); z-index:3; display:flex; align-items:center; height:60px; border-radius:30px; opacity:0; transform:translateY(12px); pointer-events:none; transition:opacity .25s, transform .25s, bottom .2s; } .v-skipin.on { opacity:1; transform:none; } .v-skipin.on button { pointer-events:auto; } .v-skipin > * { position:relative; z-index:2; } .v-skipin button { height:60px; background:none; color:#fff; } #si-go { padding:0 20px 0 28px; font-size:19px; font-weight:600; border-radius:30px 0 0 30px; } #si-x { width:56px; display:flex; align-items:center; justify-content:center; border-radius:0 30px 30px 0; border-left:1px solid rgba(255,255,255,.18); color:rgba(255,255,255,.7); } #si-x svg { width:22px; height:22px; } .v-skipin button:active { background:rgba(255,255,255,.12); } .player.ctl .v-skipin { bottom:clamp(150px, 25%, 190px); } .player.mini .v-skipin, .player.mini .v-rate { display:none; } /* speed other than 1x: a quiet badge top right while the controls are away (they show it beside the time) */ .v-rate { position:absolute; top:20px; right:24px; z-index:2; padding:4px 12px; border-radius:999px; background:rgba(0,0,0,.5); font-size:16px; font-weight:600; font-variant-numeric:tabular-nums; color:rgba(255,255,255,.85); pointer-events:none; transition:opacity .2s; } .player.ctl .v-rate { opacity:0; } #subs-list h4 { margin:0; padding:10px 24px 4px; font-size:14px; font-weight:600; letter-spacing:.04em; color:rgba(255,255,255,.45); } .qopt:disabled { color:rgba(255,255,255,.35); } #v-cc.on { color:var(--accent); } /* subtitles: bottom centre over the video, lifted above the controls while they show */ /* two lines: the primary, and the secondary under it, smaller and lighter */ .v-subs { position:absolute; left:8%; right:8%; bottom:6%; z-index:2; display:flex; flex-direction:column; align-items:center; gap:4px; pointer-events:none; transition:bottom .2s; } .v-subs > span { max-width:100%; padding:4px 12px; border-radius:8px; background:rgba(0,0,0,.72); color:#fff; font-size:clamp(18px, 2.6vw, 30px); line-height:1.35; text-align:center; white-space:pre-line; } .v-subs > .s2 { padding:2px 10px; font-size:clamp(15px, 2.1vw, 24px); color:rgba(255,255,255,.8); } .v-subs > [hidden] { display:none; } .player.ctl .v-subs { bottom:22%; } .player.mini .v-subs { display:none; } /* now-playing bar */ .cover { width:64px; height:64px; border-radius:14px; background:#2A3237; object-fit:cover; flex:none; } .nb-info { flex:1; min-width:0; display:flex; flex-direction:column; gap:10px; } .nb-title { font-size:17px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* YT Music: thin progress line along the bar's top edge */ .nowbar .progress { z-index:2; position:absolute; top:0; left:26px; right:26px; height:3px; border-radius:0 0 2px 2px; overflow:hidden; background:rgba(255,255,255,.15); } .progress div { height:100%; background:#fff; width:0; } .nb-btns { display:flex; gap:12px; } .round { width:72px; height:72px; border-radius:50%; background:rgba(255,255,255,.1); box-shadow:inset 0 1px 0 rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center; } .round.light { background:var(--text); } .round:active { background:rgba(255,255,255,.25); } /* music now-playing view (YouTube Music style), slides up over everything */ .np { position:fixed; inset:0; padding-left:calc(var(--dock) + 10px); z-index:9; /* full width so the blurred art also sits behind the glass dock (raised above it) */ overflow:hidden; background:#000; display:flex; flex-direction:column; touch-action:none; transform:translateY(100%); visibility:hidden; transition:transform .3s ease, visibility .3s; } .np.open { transform:none; visibility:visible; } .np.dragging { transition:none; } .np svg { fill:currentColor; display:block; } .np-bg { position:absolute; inset:-80px; width:calc(100% + 160px); height:calc(100% + 160px); object-fit:cover; filter:blur(24px) brightness(.4); pointer-events:none; } /* blur <= 24px for the Tesla GPU; the upscaled art is soft anyway */ .np-head, .np-body { position:relative; } .np-head { display:flex; align-items:center; gap:12px; padding:8px 16px; font-size:18px; color:#ddd; flex:none; } /* CarPlay-style back (Now Playing, Music): a glass disc with a thin chevron, no label */ .back-disc { width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; flex:none; } .back-disc svg { position:relative; z-index:2; width:20px; height:20px; fill:none !important; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; } .back-disc:active { --gf:rgba(255,255,255,.22); } #ctrls .yt-top .back-disc { margin-left:6px; } /* the same disc everywhere, also inside the video bar */ /* Now Playing: tabs (Song / Lyrics / Up Next) in the head, one pane, controls always underneath */ .np-head .np-tabs { flex:1; max-width:560px; margin:0 auto 0 0; } .np-body { flex:1; min-height:0; display:flex; flex-direction:column; gap:8px; padding:8px clamp(20px, 3vw, 48px) clamp(10px, 2vh, 20px); } .np-pane { flex:1; min-height:0; position:relative; display:flex; justify-content:center; } /* art fills the pane's height, square, centred */ .np-art { position:absolute; inset:0; margin:auto; height:88%; max-width:100%; aspect-ratio:1; pointer-events:none; border-radius:8px; object-fit:cover; background:#2A3237; box-shadow:0 12px 40px rgba(0,0,0,.55); } .np-art[hidden] { display:none; } .np-pane .np-list, .np-pane .np-lyrics { width:100%; max-width:860px; } /* controls: title (Song tab only), seek bar, then the buttons centred */ .np-main { flex:none; display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"meta rate" "seek seek" "times times" "btns btns"; align-items:center; } .np[data-tab="next"] .np-main { display:none; } .np[data-tab="lyrics"] .np-meta, .np[data-tab="lyrics"] .np-rate { display:none; } /* the name only shows on the Song tab */ /* Up Next: the whole pane is the list */ .np-main .np-meta { grid-area:meta; } .np-main .np-btns { grid-area:btns; justify-self:center; gap:clamp(8px, 2vw, 28px); } .np-main #np-seek { grid-area:seek; } .np-main .np-times { grid-area:times; } .np-meta { min-width:0; display:flex; flex-direction:column; gap:2px; text-align:left; } .np-meta b, .np-meta small { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .np-meta b { font-size:clamp(20px, 3.4vh, 28px); font-weight:700; } .np-meta small { font-size:clamp(16px, 2.6vh, 20px); color:rgba(255,255,255,.65); } /* iOS 27 Now Playing scrubber (music view + Dashboard card): a capsule track that thickens while dragged, filled to --p (app.js paintScrub); 64px tall input for the finger, no visible knob */ .scrub { display:block; width:100%; height:64px; margin:0; -webkit-appearance:none; appearance:none; background:transparent; --p:0%; } .scrub::-webkit-slider-runnable-track { height:8px; border-radius:4px; transition:height .15s; background:linear-gradient(90deg, rgba(255,255,255,.95) var(--p), rgba(255,255,255,.22) var(--p)); } .scrub:active::-webkit-slider-runnable-track { height:16px; border-radius:8px; } .scrub::-webkit-slider-thumb { -webkit-appearance:none; width:16px; height:16px; margin-top:-4px; border-radius:50%; background:transparent; } .scrub:active::-webkit-slider-thumb { margin-top:0; } .times { display:flex; justify-content:space-between; font-size:18px; font-weight:500; color:rgba(255,255,255,.65); font-variant-numeric:tabular-nums; } /* YT Music seek: thin white track with a round white knob; the input stays 44px tall for the finger */ #np-seek { width:100%; height:44px; } #np-seek::-webkit-slider-runnable-track { height:4px; border-radius:2px; } #np-seek:active::-webkit-slider-runnable-track { height:6px; border-radius:3px; } #np-seek::-webkit-slider-thumb { width:16px; height:16px; margin-top:-6px; background:#fff; } #np-seek:active::-webkit-slider-thumb { width:20px; height:20px; margin-top:-7px; } .np-times { margin-top:-12px; font-size:15px; } /* controls: flat row, the play button a white disc (YT Music), no glass capsule */ .np-btns { display:flex; align-items:center; gap:4px; color:#fff; } .np-btns .ybtn { width:72px; height:72px; } .np-btns .ybtn svg { width:44px; height:44px; } .np-btns .np-mode { width:56px; height:56px; color:rgba(255,255,255,.55); } .np-btns .np-mode svg { width:28px; height:28px; } .np-btns .np-mode.on { color:#fff; } .np-btns .np-play { width:80px; height:80px; background:#fff; color:#000; } .np-btns .np-play:active { background:#ddd; } .np-btns .np-play svg { width:50%; height:50%; } .np-q { display:flex; flex-direction:column; min-height:0; } .np-q h2 { font-size:19px; font-weight:500; margin:8px 12px 12px; } /* YT Music tabs: plain uppercase labels, the active one white with an underline across the full width */ .np-tabs { display:flex; flex:none; border-bottom:1px solid rgba(255,255,255,.15); } .np-tabs .tab { flex:1; min-height:56px; border-radius:0; background:none; box-shadow:none; font-size:16px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.55); } .np-tabs .tab::before, .np-tabs .tab::after { display:none; } .np-tabs .tab:active, .np-tabs .tab:focus { outline:none; background:none; box-shadow:none; } /* no pressed ring / focus box */ .np-tabs .tab.on, .np-tabs .tab.on:active { background:none; -webkit-backdrop-filter:none; backdrop-filter:none; color:#fff; box-shadow:inset 0 -2px 0 #fff; } .np-list[hidden], .np-lyrics[hidden] { display:none; } .np-lyrics { flex:1; min-height:0; overflow-y:auto; touch-action:pan-y; padding:4px 12px 24px; font-size:clamp(18px, 2vw, 24px); line-height:1.6; white-space:pre-line; color:#f2f2f7; } .np-lyrics:not(.synced) { text-align:center; padding-block:40px; } /* plain lyrics: centred like the synced ones */ .np-lyrics small { display:block; text-align:center; margin-top:20px; font-size:14px; color:var(--dim); } /* synced: one line per row, the sung one lit, the rest dimmed */ .np-lyrics { position:relative; scroll-behavior:auto; } .np-lyrics.synced { white-space:normal; } /* half a pane of space above and below, so even the first and last lines can scroll to the vertical centre */ .np-lyrics.synced::before, .np-lyrics.synced::after { content:""; display:block; height:50%; } .ly { margin:0; padding:6px 0; font-size:clamp(20px, 2.3vw, 28px); font-weight:600; line-height:1.35; color:rgba(255,255,255,.35); transition:color .3s; cursor:pointer; } .ly { max-width:66%; margin-inline:auto; text-align:center; transform-origin:50% 50%; /* 66% wide so a long line still fits at 1.5x */ transition:color .3s, transform .3s, margin .3s; } .ly.on { color:#fff; transform:scale(1.5); margin-block:14px; } /* the sung line grows; margin so it clears its neighbours */ .np-lyrics { overflow-x:hidden; } /* a scaled line must not add a sideways scrollbar */ .np-list { flex:1; min-height:0; overflow-y:auto; touch-action:pan-y; } .np-list .row-item.cur { background:rgba(255,255,255,.12); } .np-list .row-item.cur b { color:#fff; } /* ---- YouTube Music view: logo bar, shelves (horizontal rows), bottom nav like the real app ---- */ .ytm .bar { gap:12px; } .ytm .bar .btn.icon { margin-left:auto; } .ytm-logo { display:flex; align-items:center; gap:6px; font-size:22px; font-weight:700; letter-spacing:-.02em; } .ytm-logo svg { width:28px; height:28px; } .ytm .thumb { border-radius:8px; } .ytm .row-item img { border-radius:4px; } .ytm-nav { display:flex; flex:none; border-top:1px solid rgba(255,255,255,.08); } .ytm-nav[hidden] { display:none; } .bar-sp { flex:1; } #radio-form #radio-q { flex:1; max-width:none; } .ytm-nav .tab { flex:1; text-decoration:none; min-height:60px; border-radius:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; font-size:13px; background:none; box-shadow:none; color:rgba(255,255,255,.6); } .ytm-nav .tab svg { width:26px; height:26px; fill:currentColor; } .ytm-nav .tab::before, .ytm-nav .tab::after { display:none; } .ytm-nav .tab:active, .ytm-nav .tab:focus { outline:none; background:none; box-shadow:none; } .ytm-nav .tab.on, .ytm-nav .tab.on:active { background:none; -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:none; color:#fff; font-weight:600; } .shelf { margin-bottom:24px; } .shelf h3 { font-size:22px; font-weight:700; margin:4px 0 12px; } .shelf-row { display:grid; grid-auto-flow:column; grid-auto-columns:150px; gap:16px; overflow-x:auto; scrollbar-width:none; } .shelf-row::-webkit-scrollbar { display:none; } /* Quick picks: songs as rows, 4 per column, columns scroll sideways */ .shelf-row.rows { grid-template-rows:repeat(4, auto); grid-auto-columns:min(340px, 85%); gap:0 12px; } .shelf-row.rows .row-item { min-height:64px; padding:6px 8px; } .shelf-row.rows .row-item img { width:48px; height:48px; } /* CarPlay Now Playing pill, top right of Music / Search while a song is loaded */ .np-pill { display:none; gap:10px; margin-left:auto; font-weight:500; } .np-pill svg { width:22px; height:22px; fill:currentColor; } body.has-song .np-pill { display:inline-flex; } .np-pill + .btn.icon, .ytm .bar .np-pill + .btn.icon { margin-left:0; } /* dock on the right (Settings > Dock side): mirror the app row and Now Playing's dock gap */ .dock-right #app { flex-direction:row-reverse; } .dock-right .dock { margin:10px 10px 10px 0; } .dock-right .np { padding-left:0; padding-right:calc(var(--dock) + 10px); } /* iOS segmented control: one capsule, the chosen segment a light thumb */ .srow > .seg, .seg { display:inline-flex; flex:none; flex-direction:row; gap:0; padding:3px; border-radius:999px; background:rgba(255,255,255,.1); box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); } .seg .btn { min-height:40px; padding:0 22px; background:none; box-shadow:none; font-size:16px; color:rgba(255,255,255,.75); } .seg .btn.on { background:rgba(255,255,255,.92); color:#111; font-weight:600; box-shadow:0 2px 8px rgba(0,0,0,.3); } /* Now Playing thumbs (like / dislike), beside the name */ .np-main .np-rate { grid-area:rate; display:flex; gap:4px; } .np-rate .ybtn { width:52px; height:52px; color:rgba(255,255,255,.55); } .np-rate .ybtn svg { width:26px; height:26px; } .np-rate .ybtn.on { color:#fff; } .np-rate .dislike svg { transform:rotate(180deg); } /* mood chips above the Music home shelves */ .chips { display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; margin:0 0 18px; } .chips::-webkit-scrollbar { display:none; } .chip { flex:none; min-height:44px; padding:0 16px; border-radius:10px; background:rgba(255,255,255,.1); font-size:15px; font-weight:500; } .chip.on { background:#fff; color:#000; } /* artists: round photo, centred name */ .card.artist { text-align:center; } .card.artist .thumb { border-radius:50%; } /* playlist / album / artist header */ .pl-head { display:flex; gap:24px; align-items:flex-end; margin:4px 0 20px; } .pl-head img { width:min(200px, 28vw); height:min(200px, 28vw); flex:none; border-radius:8px; object-fit:cover; background:#2A3237; box-shadow:0 12px 32px rgba(0,0,0,.45); } .pl-head.pl-round img { border-radius:50%; } .pl-text { min-width:0; } .pl-head h2 { margin:0 0 4px; font-size:clamp(22px, 3vw, 32px); font-weight:700; } .pl-head small { font-size:15px; color:var(--dim); } .pl-acts { display:flex; gap:12px; margin-top:16px; } .pl-acts .btn { gap:8px; min-height:52px; padding:0 22px; font-size:17px; font-weight:500; } .pl-acts svg { width:22px; height:22px; fill:currentColor; } .pl-acts .pl-play { background:#fff; color:#000; font-weight:600; box-shadow:none; } /* long-press song menu: white labels (the Resume menu's are red) */ .sm-menu button { color:#fff; } /* search bar: back disc, a pill field with the magnifier inside, a round white Go */ #search-form { gap:12px; } #search-form #search-q, #radio-form #radio-q { min-height:52px; padding-left:50px; font-size:18px; background:rgba(255,255,255,.1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%239AA4AA'%3E%3Cpath d='M10 3a7 7 0 0 1 5.6 11.2l4.6 4.6-1.4 1.4-4.6-4.6A7 7 0 1 1 10 3zm0 2a5 5 0 1 0 0 10 5 5 0 0 0 0-10z'/%3E%3C/svg%3E") 16px 50% / 24px no-repeat; } .search-go { width:52px; height:52px; flex:none; border-radius:50%; background:#fff; color:#000; display:flex; align-items:center; justify-content:center; } .search-go svg { width:26px; height:26px; fill:currentColor; } .search-go:active { background:#ddd; } /* ---- YouTube view: logo bar, YouTube-style video cards, the same bottom bar as Music ---- */ .ytv .bar { gap:12px; } .yt-logo { display:flex; align-items:center; gap:6px; font-size:22px; font-weight:700; letter-spacing:-.04em; } .yt-logo svg { width:32px; height:23px; } .vgrid { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:24px 16px; align-content:start; } .vgrid .note, .vgrid .recent { grid-column:1 / -1; } .vcard { gap:10px; } .vcard .thumb { border-radius:12px; } .vcard .dur { position:absolute; right:8px; bottom:8px; padding:2px 6px; border-radius:6px; background:rgba(0,0,0,.8); font-size:13px; font-weight:600; } .v-row { display:flex; gap:12px; align-items:flex-start; min-width:0; } .v-av { width:36px; height:36px; flex:none; border-radius:50%; object-fit:cover; background:#2A3237; } .v-txt { min-width:0; display:flex; flex-direction:column; gap:4px; } .vcard b { font-size:16px; font-weight:500; line-height:1.3; } .vcard small { font-size:13px; line-height:1.35; color:rgba(255,255,255,.6); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } /* video controls, lighter (SF Symbols weight): thin line icons, smaller glyphs */ #ctrls .ln { fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; } #ctrls .yt-top .ybtn { width:60px; height:60px; } #ctrls .yt-top .ybtn svg { width:28px; height:28px; } #ctrls .ybtn.side svg { width:46px; height:46px; } #ctrls .ybtn.side text { font-size:6px; font-weight:500; fill:currentColor; } #ctrls .ybtn.main, #ctrls .spin { width:clamp(88px, 12vh, 108px); height:clamp(88px, 12vh, 108px); } #ctrls .ybtn.main svg { width:40%; height:40%; } #ctrls .time { font-size:17px; font-weight:500; color:rgba(255,255,255,.85); } #ctrls #v-seek { height:48px; } #ctrls #v-seek::-webkit-slider-runnable-track { height:4px; border-radius:2px; } #ctrls #v-seek:active::-webkit-slider-runnable-track { height:6px; } #ctrls #v-seek::-webkit-slider-thumb { width:16px; height:16px; margin-top:-6px; } #ctrls #v-seek:active::-webkit-slider-thumb { width:22px; height:22px; margin-top:-8px; } #ctrls .ybtn.side text { font-size:6.4px; } /* YouTube extras: Subscriptions channel strip, Library shelves of video cards, player actions, Up Next sheet */ .chan-strip { grid-column:1 / -1; display:flex; gap:16px; overflow-x:auto; scrollbar-width:none; padding-bottom:4px; } .chan-strip::-webkit-scrollbar { display:none; } .chan { flex:none; width:76px; background:none; display:flex; flex-direction:column; align-items:center; gap:6px; } .chan img { width:64px; height:64px; border-radius:50%; object-fit:cover; background:#2A3237; } .chan small { max-width:100%; font-size:13px; color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .vgrid .chips, .vgrid .pl-head, .vgrid .shelf { grid-column:1 / -1; } .vgrid .chips { margin-bottom:0; height:48px; } /* a scroll box in a grid row collapses to 0 without a height */ .chan-strip { height:96px; } .shelf-row.vrow { grid-auto-columns:240px; } .v-sub { min-height:40px; padding:0 18px; background:#fff; color:#000; font-weight:600; font-size:15px; box-shadow:none; } .v-sub.on { background:rgba(255,255,255,.14); color:#fff; } .v-acts { display:flex; align-items:center; gap:4px; padding:4px 0 2px; } .v-acts .v-sp { flex:1; } .v-chan { display:flex; align-items:center; gap:10px; min-width:0; background:none; text-align:left; margin-right:8px; } .v-chan img { width:36px; height:36px; border-radius:50%; object-fit:cover; background:#2A3237; flex:none; } .v-chan span { min-width:0; display:flex; flex-direction:column; } .v-chan b, .v-chan small { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .v-chan b { font-size:15px; font-weight:600; } .v-chan small { font-size:12px; color:var(--dim); } #ctrls .v-acts .ybtn { width:48px; height:48px; color:rgba(255,255,255,.7); } #ctrls .v-acts .ybtn svg { width:24px; height:24px; fill:currentColor; } #ctrls .v-acts .ybtn .ln { fill:none; } #ctrls .v-acts .ybtn.on { color:#fff; } #ctrls .v-acts .dislike svg { transform:rotate(180deg); } .v-acts[hidden], .sm-menu button[hidden] { display:none; } .qpanel.vq { width:clamp(300px, 40vw, 420px); } .vq-row { display:flex; gap:12px; align-items:center; width:100%; padding:8px 16px; background:none; text-align:left; border-radius:14px; } .vq-row img { width:112px; aspect-ratio:16/9; flex:none; border-radius:8px; object-fit:cover; background:#2A3237; } .vq-row b { font-size:15px; font-weight:500; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .vq-row small { font-size:13px; color:var(--dim); } .vq-row.cur { background:rgba(255,255,255,.12); } /* Radio: station logo tiles */ .st-h { margin:4px 0 14px; font-size:22px; font-weight:700; } .st-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:22px 16px; } .st-tile { position:relative; min-width:0; display:flex; flex-direction:column; gap:6px; cursor:pointer; } .st-tile:active .st-logo { transform:scale(.96); } .st-logo { position:relative; aspect-ratio:1; border-radius:20px; overflow:hidden; background:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 18px rgba(0,0,0,.35); transition:transform .15s; } .st-logo img { width:80%; height:80%; object-fit:contain; } .st-logo .fi-radio { width:100%; height:100%; display:flex; align-items:center; justify-content:center; background:linear-gradient(180deg, #ff6482, #d4145a); } .st-logo .fi-radio svg { width:46%; height:46%; } .st-tile.cur .st-logo { box-shadow:0 0 0 3px #fff, 0 6px 18px rgba(0,0,0,.35); } .st-tile b { font-size:16px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .st-tile small { font-size:13px; color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-transform:capitalize; } .st-tile.cur b { color:#fff; } .st-eq { position:absolute; left:8px; bottom:8px; width:34px; height:34px; border-radius:50%; background:rgba(0,0,0,.6); display:flex; align-items:center; justify-content:center; } .st-eq svg { width:20px; height:20px; fill:#fff; } .st-tile .st-fav { position:absolute; top:6px; right:6px; width:40px; height:40px; border-radius:50%; background:rgba(0,0,0,.45); color:rgba(255,255,255,.85); font-size:20px; line-height:1; display:flex; align-items:center; justify-content:center; padding:0; } .st-tile .st-fav.on { color:#ffd60a; } /* recent searches */ .recent { grid-column:1 / -1; } .recent h3 { display:flex; align-items:center; justify-content:space-between; font-size:20px; font-weight:700; margin:8px 0 4px; } .recent h3 .btn { min-height:40px; background:none; box-shadow:none; font-size:16px; font-weight:500; color:var(--dim); } .recent .row-item { min-height:56px; gap:16px; font-size:18px; } .recent .row-item svg { width:24px; height:24px; fill:var(--dim); flex:none; } .recent .row-item b { font-weight:500; } /* ---- Files app ---- */ .agrid { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:20px 16px; } .atile { background:none; padding:0; text-align:left; display:flex; flex-direction:column; gap:4px; min-width:0; } .atile:active { filter:brightness(.8); } .acover { aspect-ratio:1; border-radius:12px; overflow:hidden; background:linear-gradient(135deg, #3a3a3c, #1c1c1e); margin-bottom:4px; } .acover img { width:100%; height:100%; object-fit:cover; } .atile b { font-size:16px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .atile small { font-size:14px; color:var(--dim); } /* Movies (Jellyfin) */ .mgrid { display:grid; grid-template-columns:repeat(auto-fill, minmax(132px, 1fr)); gap:20px 14px; } .mtile { background:none; padding:0; text-align:left; display:flex; flex-direction:column; gap:4px; min-width:0; } .mtile:active { filter:brightness(.8); } .mposter { position:relative; aspect-ratio:2/3; border-radius:12px; overflow:hidden; background:linear-gradient(135deg, #3a3a3c, #1c1c1e); margin-bottom:4px; } .mposter img { position:relative; width:100%; height:100%; object-fit:cover; } /* folder tiles: a big folder glyph, covered by the folder's own picture when Jellyfin has one */ .mposter.mfolder { display:flex; align-items:center; justify-content:center; background:linear-gradient(180deg, #2c2c2e, #1c1c1e); } .mposter.mfolder svg { position:absolute; width:56%; fill:#5ac8fa; } .mposter.mfolder img { position:absolute; inset:0; } .mposter i { position:absolute; left:8px; right:8px; bottom:8px; height:4px; border-radius:2px; background:rgba(255,255,255,.3); } .mposter i::after { content:""; position:absolute; inset:0; width:var(--p); border-radius:2px; background:var(--accent); } .mtile b { font-size:15px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .mtile small { font-size:13px; color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .row-item img.ep-img { width:112px; height:63px; border-radius:8px; } /* Radio */ #radio-q { flex:1; min-width:120px; max-width:280px; min-height:48px; padding:0 18px; border-radius:999px; border:0; background:rgba(255,255,255,.1); color:var(--text); font:inherit; font-size:17px; } #radio-tabs { flex:0 1 auto; } .st { position:relative; } .st .fi-radio { width:56px; height:56px; border-radius:14px; flex:none; display:flex; align-items:center; justify-content:center; background:linear-gradient(180deg,#ff5e3a,#ff2a68); } .st .fi-radio svg { width:34px; height:34px; } .st-fav { flex:none; width:48px; height:48px; padding:0; border-radius:50%; background:none; display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.35); font-size:24px; } .st-fav.on { color:#ffd60a; } .st.cur b { color:var(--accent); } /* Settings */ .bar-title { font-size:18px; font-weight:500; margin-left:8px; } .settings { max-width:760px; } .settings h2 { font-size:14px; font-weight:500; letter-spacing:.04em; text-transform:uppercase; color:var(--dim); margin:20px 16px 8px; } .wp-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(110px, 1fr)); gap:12px; } .wp { aspect-ratio:16/10; border-radius:14px; padding:0; background:var(--wp) center / cover no-repeat, #050307; box-shadow:inset 0 0 0 1px rgba(255,255,255,.12); position:relative; } .wp.on { box-shadow:0 0 0 3px var(--accent); } .wp.on::after { content:"✓"; position:absolute; right:8px; bottom:6px; width:24px; height:24px; border-radius:50%; background:var(--accent); color:#000; font-size:15px; font-weight:600; display:flex; align-items:center; justify-content:center; } .sgroup { border-radius:16px; background:rgba(255,255,255,.07); overflow:hidden; } .srow { display:flex; align-items:center; gap:16px; min-height:64px; padding:10px 16px; } .srow + .srow { border-top:1px solid rgba(255,255,255,.08); } .srow > span { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; } .srow b { font-size:17px; font-weight:500; } .srow small { font-size:14px; color:var(--dim); } /* iOS switch */ .switch { appearance:none; -webkit-appearance:none; flex:none; width:58px; height:34px; border-radius:999px; background:rgba(120,120,128,.4); position:relative; margin:0; transition:background .2s; cursor:pointer; } .switch::after { content:""; position:absolute; top:3px; left:3px; width:28px; height:28px; border-radius:50%; background:#fff; box-shadow:0 2px 4px rgba(0,0,0,.3); transition:transform .2s; } .switch:checked { background:#30d158; } .switch:checked::after { transform:translateX(24px); } .crumbs { flex:1; min-width:0; display:flex; align-items:center; gap:4px; overflow-x:auto; scrollbar-width:none; touch-action:pan-x; } .crumbs::-webkit-scrollbar { display:none; } .crumb { flex:none; min-height:48px; max-width:320px; padding:0 16px; border-radius:999px; display:flex; align-items:center; font-size:17px; color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .crumb:active { background:rgba(255,255,255,.14); } .crumb.cur { color:var(--text); font-weight:500; } .crumbs i { flex:none; color:rgba(255,255,255,.35); font-style:normal; font-size:17px; } /* file-kind badge: a small glass-edged squircle (or the thumbnail) */ .fi { width:64px; height:64px; flex:none; border-radius:16px; background:var(--g); display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; box-shadow:inset 0 1px 0 rgba(255,255,255,.35), inset 0 0 0 1px rgba(255,255,255,.12), 0 4px 12px rgba(0,0,0,.3); } .fi svg { width:36px; height:36px; fill:#fff; filter:drop-shadow(0 1px 2px rgba(0,0,0,.25)); } .fi img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:0; } .row-item.other { opacity:.45; } #files-list .ri-text small { font-variant-numeric:tabular-nums; } /* Photos: square thumbnail grid, newest first, paged on scroll */ .pgrid { display:grid; grid-template-columns:repeat(auto-fill, minmax(clamp(120px, 14vw, 200px), 1fr)); gap:6px; align-content:start; } .pgrid .note { grid-column:1 / -1; } .ptile { position:relative; aspect-ratio:1; padding:0; border-radius:14px; overflow:hidden; background:#22262b; } .ptile img { width:100%; height:100%; object-fit:cover; } .ptile:active { filter:brightness(.75); } .ptile .dur { right:8px; bottom:8px; font-size:15px; } .ptile .vid { position:absolute; left:8px; bottom:8px; width:24px; height:24px; fill:#fff; filter:drop-shadow(0 1px 3px rgba(0,0,0,.6)); } /* ---- picture viewer ---- */ .viewer { position:fixed; inset:0; z-index:12; background:#000; touch-action:none; user-select:none; -webkit-user-select:none; } .viewer[hidden] { display:none; } .viewer svg { fill:currentColor; display:block; } .vw-stage { position:absolute; inset:0; overflow:hidden; display:flex; align-items:center; justify-content:center; } .vw-stage img { max-width:100%; max-height:100%; object-fit:contain; transform-origin:center; transition:transform .25s ease; will-change:transform; pointer-events:none; } .vw-stage img.drag { transition:none; } .vw-side { position:absolute; } /* neighbours, centred by the flex stage then pushed one width aside; they ride along with a swipe */ .vw-side:not([src]) { visibility:hidden; } .vw-err { position:absolute; margin:0; padding:14px 26px; border-radius:999px; background:rgba(255,255,255,.12); color:#fff; font-size:22px; pointer-events:none; } .vw-err[hidden] { display:none; } /* chrome (top bar + filmstrip) is hidden by default and fades in on .viewer.chrome */ .vw-top, .vw-strip { opacity:0; pointer-events:none; transition:opacity .25s; } .viewer.chrome .vw-top, .viewer.chrome .vw-strip { opacity:1; pointer-events:auto; } .vw-top { position:absolute; top:0; left:0; right:0; display:flex; justify-content:center; padding:16px 104px 48px; color:#fff; background:linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,0)); } .vw-back { --gf:rgba(0,0,0,.3); position:absolute; left:16px; top:16px; } .vw-back > svg { position:relative; z-index:2; } .vw-when { min-width:0; min-height:72px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; text-align:center; } .vw-when b { font-size:18px; font-weight:500; } .vw-when small { max-width:100%; font-size:16px; color:rgba(255,255,255,.7); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .vw-strip { --gf:rgba(0,0,0,.3); position:absolute; left:50%; bottom:16px; transform:translateX(-50%); max-width:calc(100% - 32px); border-radius:16px; overflow:hidden; } .vw-strip-in { position:relative; z-index:2; display:flex; gap:2px; padding:6px; overflow-x:auto; scrollbar-width:none; touch-action:pan-x; } .vw-strip-in::-webkit-scrollbar { display:none; } .vw-strip-in button { flex:none; width:64px; height:64px; padding:0; border-radius:8px; overflow:hidden; background:#2c2c2e; } .vw-strip-in button.on { outline:3px solid #fff; outline-offset:-3px; } .vw-strip-in img { display:block; width:100%; height:100%; object-fit:cover; pointer-events:none; } /* player error overlay: no Retry for formats that can never play */ .player.noretry #v-retry { display:none; } /* pairing screen: reuses the queue sheet; centred and above everything */ .pair { position:fixed; z-index:99; display:grid; place-items:center; background:rgba(0,0,0,.6); } .pair[hidden] { display:none; } .pair .qpanel { position:relative; top:auto; right:auto; width:min(380px, 90vw); padding:20px 16px; text-align:center; } .pair input { width:100%; box-sizing:border-box; min-height:56px; border-radius:16px; border:0; background:rgba(255,255,255,.1); color:inherit; font-size:28px; letter-spacing:.4em; text-align:center; } .app[hidden] { display:none; } /* video: previous / next beside the ±10 s buttons (hidden at either end of the queue) */ #ctrls .ybtn.skip { width:72px; height:72px; } #ctrls .ybtn.skip[hidden] { visibility:hidden; } /* keeps play / pause centred */ #ctrls .ybtn.skip svg { width:32px; height:32px; } /* end of a video: the next one's card, counting down 5 s (a bar fills along its bottom) */ .v-upnext { --gf:rgba(20,20,22,.5); position:absolute; right:24px; bottom:clamp(150px, 25%, 190px); z-index:3; width:min(540px, calc(100% - 48px)); display:flex; align-items:center; gap:16px; padding:14px; border-radius:26px; overflow:hidden; } .v-upnext[hidden], .player.mini .v-upnext { display:none; } .v-upnext > * { position:relative; z-index:2; } .v-upnext img { width:184px; aspect-ratio:16/9; flex:none; border-radius:14px; object-fit:cover; background:#2A3237; } .un-text { flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; } .un-text small { font-size:15px; color:rgba(255,255,255,.7); font-variant-numeric:tabular-nums; } .un-text b { font-size:19px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .un-btns { display:flex; gap:10px; margin-top:8px; } .un-btns .btn { min-height:44px; padding:0 18px; font-size:16px; } .v-upnext .un-bar { position:absolute; left:0; right:0; bottom:0; z-index:3; height:3px; background:rgba(255,255,255,.85); transform:scaleX(0); transform-origin:left; } .v-upnext.run .un-bar { animation:unbar 5s linear forwards; } @keyframes unbar { to { transform:scaleX(1); } } /* Now Playing for a live station: no tabs, thumbs, shuffle / repeat or progress; a LIVE badge where the bar was. visibility, not display, so nothing moves */ .np-live { display:none; } .np.live .np-live { grid-area:seek; justify-self:start; display:inline-flex; align-items:center; gap:8px; height:30px; padding:0 14px; border-radius:999px; background:rgba(255,255,255,.14); font-size:14px; font-weight:700; letter-spacing:.08em; } .np-live i { width:8px; height:8px; border-radius:50%; background:#ff3b30; animation:livedot 2s ease-in-out infinite; } @keyframes livedot { 50% { opacity:.35; } } @media (prefers-reduced-motion: reduce) { .np-live i { animation:none; } } .np.live #np-seek, .np.live .np-times, .np.live .np-tabs, .np.live .np-rate, .np.live .np-mode { visibility:hidden; pointer-events:none; } /* live radio connecting (a spinner for the dot) or not playing (red); the toggle is a retry then (app.js onState) */ .np.live[data-state=loading] .np-live, .np.live[data-state=error] .np-live { letter-spacing:0; } .np.live[data-state=loading] .np-live i { width:12px; height:12px; box-sizing:border-box; background:none; border:2px solid rgba(255,255,255,.3); border-top-color:#fff; animation:spin 1s linear infinite; } .np.live[data-state=error] .np-live { background:rgba(255,59,48,.3); } .np.live[data-state=error] .np-live i { animation:none; } /* pressed feedback for the few tappables that had none */ .back-disc:active, .wp:active, .st-fav:active { transform:scale(.94); } .seg .btn:not(.on):active { background:rgba(255,255,255,.14); } .ytm-nav .tab:not(.on):active { color:#fff; } .pdot:active::after { background:rgba(255,255,255,.75); } /* Speed Test (speed.js): the dial and Go on the left; server, results, verdict and history on the right. Blue is download, orange upload (the arc, the stat underline and the history dot) */ .speed { --dn:#3aa8ff; --upc:#ff9f0a; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:clamp(16px, 2.5vw, 36px); align-items:start; } .sp-main { display:flex; flex-direction:column; align-items:center; padding-top:4px; } .sp-gauge { width:100%; max-width:min(560px, 72vh); } .sp-gauge svg { display:block; width:100%; height:auto; overflow:visible; } .sp-track, .sp-arc { fill:none; stroke-width:18; stroke-linecap:round; } .sp-track { stroke:rgba(255,255,255,.09); } .sp-arc { stroke:url(#sp-grad-down); stroke-dasharray:0 2; opacity:0; } [data-phase="up"] .sp-arc { stroke:url(#sp-grad-up); } .sp-ticks line { stroke:rgba(255,255,255,.22); stroke-width:2; stroke-linecap:round; } .sp-ticks line.maj { stroke:rgba(255,255,255,.5); } .sp-ticks text { fill:rgba(255,255,255,.6); font-size:17px; font-weight:500; text-anchor:middle; font-variant-numeric:tabular-nums; } .sp-needle { fill:#fff; filter:drop-shadow(0 2px 4px rgba(0,0,0,.45)); } .sp-hub { fill:#1c1f22; } /* Reduce effects / reduced motion: numbers only, no needle or sweep */ .still .sp-needle, .still .sp-arc { display:none; } .sp-read { display:flex; flex-direction:column; align-items:center; margin-top:-6px; min-height:118px; } .sp-phase { height:24px; font-size:17px; font-weight:500; color:var(--dim); display:flex; align-items:center; gap:8px; } .sp-phase:not(:empty)::before { content:""; width:8px; height:8px; border-radius:50%; background:#fff; animation:livedot 1.2s ease-in-out infinite; } [data-phase="down"] .sp-phase::before { background:var(--dn); } [data-phase="up"] .sp-phase::before { background:var(--upc); } .sp-num { font-size:clamp(52px, 9vh, 76px); font-weight:600; line-height:1.05; letter-spacing:-.02em; font-variant-numeric:tabular-nums; } .sp-unit { font-size:17px; color:var(--dim); } .sp-go { min-height:64px; min-width:200px; margin-top:8px; font-size:22px; font-weight:600; } .running .sp-go { background:rgba(255,255,255,.12); color:var(--text); } .sp-msg { margin:12px 0 0; font-size:16px; color:#ff9f0a; text-align:center; } .sp-msg[hidden] { display:none; } .sp-side { display:flex; flex-direction:column; gap:12px; min-width:0; padding-top:4px; } .sp-srv { display:flex; flex-direction:column; gap:3px; min-height:64px; padding:10px 16px; border-radius:16px; background:rgba(255,255,255,.07); justify-content:center; } .sp-srv small { font-size:14px; color:var(--dim); } .sp-srv b { font-size:17px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .sp-srv.skel b { width:60%; } .sp-stats { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); border-radius:16px; background:rgba(255,255,255,.07); } .sp-stat { position:relative; padding:12px 14px 14px; display:flex; flex-direction:column; gap:4px; min-width:0; } .sp-stat + .sp-stat { border-left:1px solid rgba(255,255,255,.08); } .sp-stat small { font-size:14px; color:var(--dim); white-space:nowrap; } .sp-stat span { font-size:14px; color:var(--dim); display:flex; flex-wrap:wrap; align-items:baseline; column-gap:4px; } .sp-stat span b { font-size:26px; font-weight:600; color:var(--text); font-variant-numeric:tabular-nums; } .sp-stat.down::after, .sp-stat.up::after { content:""; position:absolute; left:14px; right:14px; bottom:0; height:3px; border-radius:3px 3px 0 0; background:var(--dn); opacity:.85; } .sp-stat.up::after { background:var(--upc); } .sp-stat.skel b { display:inline-block; width:2.2em; height:.8em; margin:0; vertical-align:middle; } .sp-verdict { display:flex; flex-direction:column; gap:4px; padding:14px 16px; border-radius:16px; background:rgba(255,255,255,.07); box-shadow:inset 4px 0 0 var(--vc, rgba(255,255,255,.25)); } .sp-verdict b { font-size:18px; font-weight:600; } .sp-verdict small { font-size:15px; color:var(--dim); } .sp-verdict.q1080 { --vc:#30d158; } .sp-verdict.q720 { --vc:#64d2ff; } .sp-verdict.q480 { --vc:#ffd60a; } .sp-verdict.q0 { --vc:#ff453a; } .sp-h { font-size:14px; font-weight:500; letter-spacing:.04em; text-transform:uppercase; color:var(--dim); margin:8px 16px 0; } .sp-hist { border-radius:16px; background:rgba(255,255,255,.07); overflow:hidden; } .sp-row { display:grid; grid-template-columns:auto minmax(0,1fr) auto auto auto; gap:14px; align-items:center; min-height:48px; padding:6px 16px; font-size:15px; } .sp-row + .sp-row { border-top:1px solid rgba(255,255,255,.08); } .sp-when { color:var(--dim); font-variant-numeric:tabular-nums; } .sp-kind { display:flex; align-items:center; gap:8px; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .sp-kind i { width:8px; height:8px; flex:none; border-radius:50%; background:#30d158; } .sp-kind i.net { background:#bf5af2; } .sp-v { color:var(--dim); text-align:right; white-space:nowrap; min-width:64px; } .sp-v b { color:var(--text); font-weight:600; font-variant-numeric:tabular-nums; } .sp-ms { min-width:56px; } .sp-empty { margin:0; padding:16px; font-size:15px; color:var(--dim); } /* the car's half-screen browser (~773 px): the dial on top, everything else below it */ @media (max-width:980px) { .speed { grid-template-columns:minmax(0,1fr); } .sp-gauge { max-width:440px; } #sp-mode .btn { padding:0 14px; } } /* home: a sixth column once more than ten apps show (app.js pollStatus), so CarPlay's two rows hold them all */ .grid.six { grid-template-columns:repeat(6, minmax(0,1fr)); } /* Traffic (traffic.js): the Waze live map fills the page (a rounded card beside the dock). Back, recenter and the zoom presets float on its left under Waze's search box, clear of its +/- and locate (bottom right) and its footer. The glass is tinted dark: the map is light, and white labels must read on it. */ .traffic { position:relative; margin:10px; border-radius:22px; overflow:hidden; background:var(--card); } .tr-map, .tr-map > * { position:absolute; inset:0; width:100%; height:100%; border:0; display:block; } .tr-skel { background:var(--card); } .tr-map.ready .tr-skel { display:none; } /* a new map loads invisibly over the old one and fades in once drawn (no flash); only the shown one takes touches */ .tr-frame { opacity:0; pointer-events:none; transition:opacity .35s ease; } .tr-frame.on { opacity:1; pointer-events:auto; } @media (prefers-reduced-motion: reduce) { .tr-frame { transition:none; } } .traffic .glass { --gf:rgba(24,26,30,.62); } .lite .traffic .glass { background:rgba(24,26,30,.9); } .tr-rail { position:absolute; left:16px; top:108px; z-index:2; display:flex; flex-direction:column; align-items:center; gap:12px; } .tr-rail .back-disc { width:52px; height:52px; } .tr-rail .back-disc:active, .tr-me:active { --gf:rgba(70,72,78,.75); } .tr-me { width:64px; height:64px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; padding:0; } .tr-me svg { position:relative; z-index:2; width:28px; height:28px; fill:#0a84ff; } .tr-me:active { transform:scale(.94); } .tr-zoom { width:118px; display:flex; flex-direction:column; gap:2px; padding:5px; border-radius:22px; } /* fixed: the bold lit label doesn't resize it */ .tr-zoom button { position:relative; z-index:2; width:100%; min-height:54px; padding:0 8px; border-radius:17px; background:none; font-size:17px; color:rgba(255,255,255,.88); } .tr-zoom button.on { background:rgba(255,255,255,.92); color:#111; font-weight:600; box-shadow:0 2px 8px rgba(0,0,0,.3); } .tr-zoom button:not(.on):active { background:rgba(255,255,255,.16); } .tr-hint { position:absolute; left:50%; bottom:52px; transform:translateX(-50%); z-index:2; display:flex; align-items:center; gap:12px; padding:8px 8px 8px 18px; border-radius:999px; font-size:17px; color:#fff; white-space:nowrap; } .tr-hint[hidden] { display:none; } .tr-hint > * { position:relative; z-index:2; } .tr-hint svg { width:22px; height:22px; fill:rgba(255,255,255,.55); } .tr-hint svg .x { fill:none; stroke:#ff453a; stroke-width:2.4; stroke-linecap:round; } .tr-hint .btn { min-height:48px; } /* the page's no-pinch rule (html, top) would reach into the map's iframe; on Traffic it moves to our own parts */ html.tr-on { touch-action:auto; } .tr-on .dock, .tr-rail, .tr-hint, .tr-skel { touch-action:pan-x pan-y; }