/* ============================================================================ svid.ai design system — the violet brand over a blue-graphite base: the look of night monitoring gear, not a generic dark SaaS theme. Violet is the single signal accent; the cool gradient (--grad) is reserved for the wordmark, primary CTAs and active-nav accents; red is REC/alert only. Rules: animate transform/opacity only · three durations (fast/med/slow) · spring easing reserved for pops (badges, chips, toasts). ========================================================================== */ /* Self-hosted — no CDN. Bricolage Grotesque (display), Hanken Grotesk (body), Space Mono (timecode/IDs). Bricolage + Hanken ship as variable woff2. */ @font-face { font-family:"Bricolage Grotesque"; font-style:normal; font-weight:400 800; font-display:swap; src:url("/fonts/bricolage-grotesque.woff2") format("woff2"); } @font-face { font-family:"Hanken Grotesk"; font-style:normal; font-weight:400 700; font-display:swap; src:url("/fonts/hanken-grotesk.woff2") format("woff2"); } @font-face { font-family:"Space Mono"; font-style:normal; font-weight:400; font-display:swap; src:url("/fonts/space-mono-400.woff2") format("woff2"); } @font-face { font-family:"Space Mono"; font-style:normal; font-weight:700; font-display:swap; src:url("/fonts/space-mono-700.woff2") format("woff2"); } /* Two palettes share every rule below via CSS custom properties. Dark is the default (:root); light overrides only the colour tokens. The active theme is stamped on before first paint (inline script in index.html). Anything painted over video footage (letterbox #000, scrim whites) stays fixed. */ :root { --bg0:#0a0c10; --bg1:#111419; --bg2:#161a20; --bg3:#1f242c; --hairline:rgba(236,232,222,.09); --hairline-strong:rgba(236,232,222,.17); --text:#ece8de; --text2:#8b94a0; --text3:#636d7a; --accent:#a78bfa; --accent2:#7c5cf6; /* violet · violet-deep (hover/anchor) */ --brand-violet:#8b3fd6; --brand-blue:#3b82f6; --brand-cyan:#43c6ff; --grad:linear-gradient(120deg,var(--brand-violet),var(--brand-blue),var(--brand-cyan)); --accent-soft:rgba(167,139,250,.13); --accent-ring:rgba(167,139,250,.5); --on-accent:#ffffff; /* white ink on the cool-gradient fill */ --ok:#34c98e; --ok-soft:rgba(52,201,142,.14); --warn:#e6a12f; --warn-soft:rgba(230,161,47,.14); --danger:#ff5a4d; --danger-soft:rgba(255,90,77,.14); --live:#ff5a4d; /* REC — red, alert-only */ --rail-blur:rgba(17,20,25,.92); /* translucent chrome fills */ --font:"Hanken Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; --font-display:"Bricolage Grotesque",var(--font); --mono:"Space Mono",ui-monospace,"SF Mono",Menlo,monospace; --r-s:6px; --r-m:10px; --r-l:14px; /* tight equipment bezels, not soft cards */ --sh-1:0 1px 2px rgba(0,0,0,.5); --sh-2:inset 0 1px 0 rgba(236,232,222,.04), 0 8px 24px rgba(0,0,0,.4); --sh-3:inset 0 1px 0 rgba(236,232,222,.05), 0 24px 64px rgba(0,0,0,.6); --glow:0 0 44px -10px rgba(167,139,250,.5); /* violet standby glow */ --t-fast:120ms; --t-med:200ms; --t-slow:320ms; --ease-out:cubic-bezier(.2,.8,.2,1); --ease-spring:cubic-bezier(.34,1.56,.64,1); --rail-w:216px; --tabbar-h:calc(58px + env(safe-area-inset-bottom)); } /* Light — the violet grade in daylight: warm bone canvas, near-white panels, the accent deepened so it stays legible as link text. */ :root[data-theme="light"] { --bg0:#efeae0; --bg1:#fbf8f2; --bg2:#f3eee3; --bg3:#e7e0d1; --hairline:rgba(60,48,24,.12); --hairline-strong:rgba(60,48,24,.2); --text:#23201a; --text2:#6b6456; --text3:#948c7a; --accent:#7c5cf6; --accent2:#6035d6; --accent-soft:rgba(124,92,246,.13); --accent-ring:rgba(124,92,246,.42); --on-accent:#ffffff; --ok:#12996b; --ok-soft:rgba(18,153,107,.13); --warn:#a86a00; --warn-soft:rgba(168,106,0,.15); --danger:#d13a2e; --danger-soft:rgba(209,58,46,.12); --live:#d13a2e; --rail-blur:rgba(251,248,242,.85); --sh-1:0 1px 2px rgba(60,48,24,.08); --sh-2:0 8px 24px rgba(60,48,24,.12); --sh-3:0 24px 64px rgba(60,48,24,.2); --glow:0 0 40px -12px rgba(124,92,246,.4); } * { box-sizing:border-box; margin:0; -webkit-tap-highlight-color:transparent; } [hidden] { display:none !important; } html { scrollbar-color:var(--bg3) transparent; } /* Contain horizontal overflow so a too-wide descendant can never make the whole page pan sideways — which iOS renders as "slightly zoomed in". `clip` (not `hidden`) so neither element becomes a scroll container: the mobile sticky rail and the desktop sticky player keep working. Pairs with maximum-scale=1 in index.html, which stops the zoom-on-input-focus half of the same bug. */ html, body { overflow-x:clip; } body { /* Violet standby-glow — faint logo-spectrum washes over the graphite base. */ background: radial-gradient(60rem 32rem at 50% -12rem, rgba(139,63,214,.14), transparent 66%), radial-gradient(44rem 30rem at 88% 2%, rgba(59,130,246,.12), transparent 62%), var(--bg0); background-repeat:no-repeat; background-attachment:fixed; color:var(--text); font:14px/1.55 var(--font); -webkit-font-smoothing:antialiased; } ::selection { background:var(--accent-soft); color:var(--text); } a { color:var(--accent); text-decoration:none; cursor:pointer; } img { max-width:100%; } ::-webkit-scrollbar { width:10px; height:10px; } ::-webkit-scrollbar-thumb { background:var(--bg3); border-radius:6px; } :focus-visible { outline:2px solid var(--accent-ring); outline-offset:2px; } .i { width:18px; height:18px; flex-shrink:0; } .i-sm { width:14px; height:14px; vertical-align:-2px; } b { font-weight:650; } .mono, .ts, .kbd, .meta-chip { font-family:var(--mono); font-variant-numeric:tabular-nums; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; } } /* Touch hygiene: no double-tap-zoom delay heuristics on interactive elements (scroll/pinch unaffected), and inner scrollers keep their rubber-band to themselves instead of chaining it into the page. Press states (:active) live at the bottom of this sheet; every :hover is guarded behind @media(hover:hover). */ a, button, [data-action], label, select, summary { touch-action:manipulation; } .strip, .chat-log, .ibx-list, .ap--compact .ap-list, .menu, .ce-card, #quicklook, .confirm-wrap { overscroll-behavior:contain; } /* ---- shell ---------------------------------------------------------------- */ /* The rail is position:fixed (out of flow) on desktop; a bottom tab bar takes over on mobile. Signed out (body.anon) the chrome hides entirely — the login card is the whole screen. */ #shell { min-height:100dvh; } #rail { position:fixed; inset:0 auto 0 0; width:var(--rail-w); z-index:30; background:var(--bg1); border-right:1px solid var(--hairline); display:flex; flex-direction:column; padding:calc(18px + env(safe-area-inset-top)) 12px calc(14px + env(safe-area-inset-bottom)) calc(12px + env(safe-area-inset-left)); } body.anon #rail, body.anon #tabbar { display:none; } body.anon #content { margin-left:0; padding-bottom:24px; } /* Public (logged-out) top bar — only on a public content view. */ #anon-bar { display:none; } body.anon-pub #anon-bar { display:flex; align-items:center; justify-content:space-between; gap:12px; position:sticky; top:0; z-index:30; padding:calc(10px + env(safe-area-inset-top)) 16px 10px; background:var(--rail-blur); backdrop-filter:blur(12px) saturate(1.2); border-bottom:1px solid var(--hairline); } body.anon-pub #anon-bar .brand-row { text-decoration:none; color:inherit; } body.anon-pub #content { margin-left:0; } .brand { padding:2px 10px 16px; } .brand-row { display:flex; align-items:center; gap:9px; } .brand-logo { width:28px; height:28px; border-radius:7px; flex-shrink:0; } .wordmark { font-family:var(--font-display); font-size:19px; font-weight:600; letter-spacing:-.02em; color:var(--text); } .wm-dot { color:var(--accent); } .tagline { color:var(--text3); font-size:11.5px; margin-top:3px; } /* ---- theme toggle (rail footer) -------------------------------------------- Both icons + labels are in the DOM; CSS shows whichever matches the state to switch TO, keyed off , so core.js only flips the attribute. */ .theme-toggle { margin:10px 4px 0; display:flex; align-items:center; gap:9px; padding:8px 10px; border:1px solid var(--hairline); border-radius:9px; background:none; cursor:pointer; color:var(--text2); font:500 13px var(--font); text-align:left; transition:background var(--t-fast), color var(--t-fast), border-color var(--t-fast); } @media (hover:hover) { .theme-toggle:hover { background:var(--bg3); color:var(--text); border-color:var(--hairline-strong); } } .theme-toggle .i { width:16px; height:16px; } .theme-toggle .theme-i-moon, .theme-toggle .tt-dark { display:none; } :root[data-theme="light"] .theme-toggle .theme-i-sun, :root[data-theme="light"] .theme-toggle .tt-light { display:none; } :root[data-theme="light"] .theme-toggle .theme-i-moon { display:block; } :root[data-theme="light"] .theme-toggle .tt-dark { display:inline; } #nav { position:relative; display:flex; flex-direction:column; gap:2px; } #nav a { display:flex; align-items:center; gap:11px; padding:9px 10px; border-radius:9px; color:var(--text2); font-weight:500; font-size:14px; position:relative; transition:color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out); } @media (hover:hover) { #nav a:hover { color:var(--text); background:var(--bg3); } } #nav a.active { color:var(--text); background:var(--accent-soft); } #nav-indicator { position:absolute; left:-6px; width:3px; height:16px; border-radius:3px; background:var(--grad); top:11px; opacity:0; transition:transform var(--t-med) var(--ease-out), opacity var(--t-med); } #nav .navbadge { margin-left:auto; } .navbadge { min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:var(--danger); color:#fff; font-size:10.5px; font-weight:700; line-height:18px; text-align:center; animation:pop .3s var(--ease-spring); } @keyframes pop { 0%{transform:scale(0)} 70%{transform:scale(1.18)} 100%{transform:scale(1)} } .rail-add { margin:14px 4px 0; justify-content:center; } /* An account that hasn't paid yet can browse but not add — hide spend CTAs. */ body.inactive .rail-add, body.inactive .tab-add { display:none !important; } #queue { margin-top:auto; display:flex; gap:10px; align-items:center; padding:10px; border:1px solid var(--hairline); border-radius:var(--r-m); background:var(--bg2); cursor:pointer; transition:border-color var(--t-fast); } @media (hover:hover) { #queue:hover { border-color:var(--accent-ring); } } .queue-ring { width:28px; height:28px; border-radius:50%; flex-shrink:0; background:conic-gradient(var(--accent) calc(var(--pct,0)*1%), var(--bg3) 0); display:flex; align-items:center; justify-content:center; } .queue-ring span { width:20px; height:20px; border-radius:50%; background:var(--bg2); } #queue.idle .queue-ring { background:var(--ok-soft); } #queue.failed .queue-ring { background:var(--danger-soft); } .queue-text { min-width:0; } .queue-text b { display:block; font-size:12.5px; } .queue-text small { color:var(--text3); font-size:11.5px; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } #content { margin-left:var(--rail-w); padding:28px calc(32px + env(safe-area-inset-right)) 64px 32px; max-width:1280px; } #content > section { animation:viewin var(--t-med) var(--ease-out); } @keyframes viewin { from { opacity:0; transform:translateY(8px); } } .view-head { margin-bottom:18px; } .view-head h1 { font-family:var(--font-display); font-size:19px; font-weight:700; letter-spacing:-.2px; } .lead { color:var(--text2); font-size:13.5px; margin-top:3px; max-width:720px; } .hint { color:var(--text3); font-size:12px; margin-top:6px; } .section-title { font-size:15px; font-weight:650; margin:26px 0 12px; display:flex; align-items:baseline; gap:10px; } .section-title small a { font-size:12.5px; font-weight:500; } /* ---- mobile bottom tab bar --------------------------------------------------- */ #tabbar { display:none; position:fixed; left:0; right:0; bottom:0; z-index:40; height:var(--tabbar-h); padding:6px 8px calc(6px + env(safe-area-inset-bottom)); background:var(--rail-blur); backdrop-filter:blur(14px); border-top:1px solid var(--hairline); } #tabbar a { flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; color:var(--text3); font-size:11px; font-weight:600; border-radius:10px; transition:color var(--t-fast); } #tabbar a span { max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } @media (max-width:360px) { #tabbar a { font-size:10px; } } #tabbar a .i { width:23px; height:23px; } #tabbar a.active { color:var(--accent); } #tabbar .tab-add-btn { width:46px; height:32px; border-radius:10px; background:var(--grad); color:var(--on-accent); display:flex; align-items:center; justify-content:center; box-shadow:var(--glow); } #tabbar .tab-add-btn .i { width:18px; height:18px; } #tabbar .tab-add.active .tab-add-btn { filter:brightness(1.12); } /* ---- primitives ----------------------------------------------------------- */ .panel { background:var(--bg1); border:1px solid var(--hairline); border-radius:var(--r-l); padding:22px; } .empty { color:var(--text2); padding:44px 16px; text-align:center; font-size:14px; } .empty b { display:block; margin-bottom:4px; font-size:15px; color:var(--text); } .kbd { font-size:11px; color:var(--text3); background:var(--bg3); border:1px solid var(--hairline); border-radius:5px; padding:1px 6px; } input[type=text], input[type=number], input[type=email], input[type=password], select, textarea { background:var(--bg2); border:1px solid var(--hairline-strong); border-radius:10px; color:var(--text); padding:11px 13px; width:100%; font-size:14px; font-family:var(--font); transition:border-color var(--t-fast); } input:focus, select:focus, textarea:focus { outline:none; border-color:var(--accent-ring); } input::placeholder, textarea::placeholder { color:var(--text3); } label { display:block; color:var(--text2); font-size:13px; margin:14px 0 6px; } label small { color:var(--text3); } .btn { display:inline-flex; align-items:center; gap:8px; border:1px solid transparent; cursor:pointer; border-radius:10px; padding:10px 16px; font-size:13.5px; font-weight:600; color:var(--text); background:var(--bg3); font-family:var(--font); text-decoration:none; transition:transform var(--t-fast) var(--ease-out), filter var(--t-fast), border-color var(--t-fast), background var(--t-fast); } @media (hover:hover) { .btn:hover { transform:translateY(-1px); } } .btn:active { transform:scale(.97); } .btn--primary { background:var(--grad); color:var(--on-accent); box-shadow:var(--glow); } @media (hover:hover) { .btn--primary:hover { filter:brightness(1.08); } } .btn--ghost { background:var(--bg2); border-color:var(--hairline-strong); font-weight:500; } @media (hover:hover) { .btn--ghost:hover { border-color:var(--accent-ring); } } .btn--danger { background:var(--danger-soft); color:var(--danger); } @media (hover:hover) { .btn--del:hover { color:var(--danger); border-color:var(--danger); } } .btn--del[data-armed="1"] { color:var(--danger); border-color:var(--danger); background:var(--danger-soft); } .btn--sm { padding:6px 11px; font-size:12.5px; border-radius:8px; } .btn--xl { padding:14px 26px; font-size:15px; margin-top:20px; } .btn[disabled] { opacity:.55; pointer-events:none; } .btn .spin, .spin { width:14px; height:14px; border:2px solid currentColor; border-top-color:transparent; border-radius:50%; opacity:.85; animation:spin .7s linear infinite; display:inline-block; } .spin--lg { width:26px; height:26px; margin-bottom:14px; } @keyframes spin { to { transform:rotate(360deg); } } .searchbar { display:flex; gap:10px; align-items:center; } .searchbar input { flex:1; } .chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; } .chip { display:inline-flex; align-items:center; gap:6px; padding:7px 13px; border-radius:999px; background:var(--bg2); border:1px solid var(--hairline-strong); color:var(--text2); font-size:12.5px; cursor:pointer; user-select:none; font-family:var(--font); font-weight:500; transition:transform var(--t-fast) var(--ease-out), border-color var(--t-fast), color var(--t-fast), background var(--t-fast); } @media (hover:hover) { .chip:hover { transform:translateY(-1px); color:var(--text); border-color:var(--accent-ring); } } .chip.on { background:var(--accent-soft); border-color:var(--accent-ring); color:var(--text); animation:pop .3s var(--ease-spring); } a.chip { text-decoration:none; } .chip--locked { border-style:dashed; } .chip--locked small { color:var(--text3); font-size:11px; font-weight:600; } .chip .i-sm { color:var(--text3); } .chip .x { color:var(--text3); font-size:13px; margin-left:2px; } @media (hover:hover) { .chip .x:hover { color:var(--text); } } .tag { display:inline-block; font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--text3); } .tag--danger { color:var(--danger); } .tag--warn { color:var(--warn); } .tag--ok { color:var(--ok); } .tag--accent { color:var(--accent); } .status { padding:3px 11px; border-radius:20px; font-size:12px; font-weight:600; white-space:nowrap; } .status.completed { background:var(--ok-soft); color:var(--ok); } .status.processing, .status.queued { background:var(--warn-soft); color:var(--warn); } .status.failed { background:var(--danger-soft); color:var(--danger); } .status.live { background:var(--danger-soft); color:var(--live); } .seg { display:inline-flex; background:var(--bg2); border:1px solid var(--hairline-strong); border-radius:10px; padding:3px; gap:2px; } .seg button { border:0; background:none; color:var(--text2); padding:7px 14px; border-radius:8px; font-size:13px; font-weight:500; cursor:pointer; font-family:var(--font); transition:background var(--t-fast), color var(--t-fast); } @media (hover:hover) { .seg button:hover { color:var(--text); } } .seg button.on { background:var(--bg3); color:var(--text); } .seg button:disabled { opacity:.45; cursor:not-allowed; } @media (hover:hover) { .seg button:disabled:hover { color:var(--text2); } } .toolbar { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:16px; } .toolbar input[type=text] { width:220px; flex:none; } .toolbar select { width:auto; max-width:100%; text-overflow:ellipsis; } .toolbar .spacer { flex:1; } /* ---- stats (Home) ----------------------------------------------------------- */ .stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:14px; margin-bottom:26px; } .stat { background:var(--bg1); border:1px solid var(--hairline); border-radius:var(--r-l); padding:18px 20px; cursor:pointer; transition:transform var(--t-fast) var(--ease-out), border-color var(--t-fast); } @media (hover:hover) { .stat:hover { transform:translateY(-1px); border-color:var(--hairline-strong); } } .stat b { display:block; font-family:var(--font-display); font-size:27px; font-weight:700; line-height:1.25; font-variant-numeric:tabular-nums; } .stat small { color:var(--text3); font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; } .stat .sub { color:var(--text2); font-size:12px; margin-top:2px; } /* ---- cards & grids --------------------------------------------------------- */ .grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:16px; margin-top:18px; } .grid > .empty, .grid > .panel { grid-column:1/-1; } /* Search results: masonry so a portrait and a landscape clip sit side by side, each card thumbnail keeping its own aspect ratio (set from the frame's natural dimensions in library.js) instead of being cropped to a fixed 16:9. */ .search-grid { column-width:280px; column-gap:16px; margin-top:18px; } .search-grid > .card { break-inside:avoid; margin:0 0 16px; } .search-grid > .card .thumb { aspect-ratio:var(--ar, 16 / 9); } .card { background:var(--bg2); border:1px solid var(--hairline); border-radius:var(--r-m); overflow:hidden; cursor:pointer; transition:transform var(--t-med) var(--ease-out), border-color var(--t-med), box-shadow var(--t-med); animation:cardin var(--t-med) var(--ease-out) backwards; animation-delay:calc(min(var(--i,0), 10) * 22ms); } @keyframes cardin { from { opacity:0; transform:translateY(8px); } } @media (hover:hover) { .card:hover { transform:translateY(-2px); border-color:var(--accent-ring); box-shadow:var(--sh-2); } } .thumb { position:relative; aspect-ratio:16/9; background:#000; overflow:hidden; } .thumb img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s var(--ease-out); } @media (hover:hover) { .card:hover .thumb img { transform:scale(1.04); } } .thumb::after { content:"▶"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:30px; color:#fff; opacity:0; background:rgba(0,0,0,.35); transition:opacity var(--t-fast); } @media (hover:hover) { .card:hover .thumb::after { opacity:1; } } .ts { position:absolute; bottom:6px; right:6px; z-index:2; font-size:11.5px; color:#fff; background:rgba(0,0,0,.72); border-radius:5px; padding:1px 6px; } /* Count of matched moments on a grouped (ranged) search result. */ .match-n { position:absolute; top:6px; left:6px; z-index:2; min-width:18px; height:18px; padding:0 5px; display:inline-flex; align-items:center; justify-content:center; gap:3px; font-size:11px; font-weight:650; color:var(--on-accent); background:var(--accent2); border-radius:999px; box-shadow:0 1px 4px rgba(0,0,0,.45); } .match-n::before { content:""; width:8px; height:8px; border-radius:2px; border:1.5px solid currentColor; box-shadow:2px 2px 0 -0.5px var(--accent2), 2px 2px 0 1px currentColor; } .card .body { padding:12px 14px; } .card .meta { color:var(--text3); font-size:12px; margin-bottom:4px; } .card b { font-size:14px; display:block; margin-bottom:3px; } .card p { font-size:13px; color:var(--text2); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .rel-bar { height:3px; background:var(--bg3); } .rel-bar span { display:block; height:100%; background:var(--grad); border-radius:0 2px 2px 0; } /* ---- Library: Finder-style browser ------------------------------------------- */ .lib-search { background:var(--bg2); border:1px solid var(--hairline-strong); border-radius:var(--r-l); padding:4px 8px 4px 16px; margin-bottom:14px; transition:border-color var(--t-fast), box-shadow var(--t-fast); } .lib-search:focus-within { border-color:var(--accent-ring); box-shadow:0 0 0 1px var(--accent-ring); } .lib-search .i { color:var(--text3); } .lib-search input { background:none; border:0; padding:11px 6px; font-size:14.5px; } .lib-search input:focus { border:0; } .lib-search-x { border:0; background:none; color:var(--text3); cursor:pointer; border-radius:8px; width:32px; height:32px; display:flex; align-items:center; justify-content:center; flex-shrink:0; } @media (hover:hover) { .lib-search-x:hover { background:var(--bg3); color:var(--text); } } .lib-bar { display:flex; align-items:center; gap:10px; margin-bottom:14px; flex-wrap:wrap; } .lib-tools { display:flex; gap:8px; margin-left:auto; } .crumbs { display:flex; flex-wrap:wrap; align-items:center; gap:2px; font-size:13.5px; min-width:0; } .crumb { padding:5px 9px; border-radius:8px; color:var(--text2); cursor:pointer; white-space:nowrap; font-weight:500; } @media (hover:hover) { .crumb:hover { background:var(--bg2); color:var(--text); } } .crumb.on { color:var(--text); font-weight:650; } .crumb-sep { color:var(--text3); opacity:.6; } .dir-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; margin-bottom:18px; } .dir-card { position:relative; background:var(--bg1); border:1px solid var(--hairline); border-radius:var(--r-m); padding:16px 14px 13px; cursor:pointer; text-align:center; transition:transform var(--t-fast) var(--ease-out), border-color var(--t-fast), background var(--t-fast); } @media (hover:hover) { .dir-card:hover { transform:translateY(-2px); border-color:var(--accent-ring); } } .dir-card .dir-i { width:34px; height:34px; color:var(--accent); margin:0 auto 8px; display:block; } .dir-card .dir-name { font-size:13.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .dir-card .dir-meta { color:var(--text3); font-size:11.5px; margin-top:2px; } .dir-card .dir-menu { position:absolute; top:6px; right:6px; opacity:0; transition:opacity var(--t-fast); } .dir-card:focus-within .dir-menu { opacity:1; } @media (hover:hover) { .dir-card:hover .dir-menu { opacity:1; } } /* drag & drop: folders and breadcrumbs highlight while a drag hovers them */ [draggable="true"] { cursor:grab; } .drop-hot { outline:2px solid var(--accent); outline-offset:-2px; background:var(--accent-soft) !important; } /* grip that signals draggability + is the touch-drag grab point */ .drag-handle { flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; width:20px; color:var(--text3); cursor:grab; touch-action:none; -webkit-user-select:none; user-select:none; } .drag-handle:active { cursor:grabbing; } .drag-handle-i { width:20px; height:20px; fill:currentColor; } .dir-card .drag-handle { position:absolute; bottom:6px; right:6px; } /* ghost that follows the finger during a touch drag */ .drag-ghost { position:fixed; top:0; left:0; z-index:1000; pointer-events:none; max-width:60vw; padding:7px 11px; border-radius:9px; background:var(--bg1); border:1px solid var(--accent-ring); color:var(--text1); font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; box-shadow:var(--sh-3, 0 8px 24px rgba(0,0,0,.28)); opacity:.95; } /* Whole-card variant: a clone of the real row rides under the finger, so what's being moved is unmistakable. The original dims while it travels. */ .drag-ghost--card { max-width:94vw; white-space:normal; font-weight:inherit; font-size:inherit; } .drag-ghost--card.vrow, .drag-ghost--card.drow { padding:8px; background:var(--bg2); } .drag-ghost--card .drag-handle, .drag-ghost--card .row-actions, .drag-ghost--card .drow-menu { display:none; } .drag-src { opacity:.35; } /* ---- video rows -------------------------------------------------------------- */ .vrow { display:flex; align-items:center; gap:13px; padding:10px 8px; border-radius:10px; border:1px solid transparent; position:relative; cursor:pointer; transition:background var(--t-fast), border-color var(--t-fast); } @media (hover:hover) { .vrow:hover { background:var(--bg2); border-color:var(--hairline); } } .vrow + .vrow { margin-top:2px; } .vrow .vthumb { position:relative; width:92px; height:52px; border-radius:7px; background:#000; overflow:hidden; flex-shrink:0; } .vrow .vthumb img { width:100%; height:100%; object-fit:cover; } .vrow .vname { flex:0 1 auto; min-width:0; } .vrow .vname b { font-size:13.5px; display:inline-block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:bottom; } .vrow .vname:has(.title-more:not([hidden])) b { max-width:calc(100% - 46px); } .vrow.expanded .vname b { white-space:normal; } /* Truncated titles reveal a tap-to-expand affordance. */ .title-more { border:0; background:none; color:var(--accent); font-size:12px; font-weight:650; cursor:pointer; padding:0 2px; font-family:var(--font); vertical-align:bottom; } /* The whole area right of the title toggles selection — no precision tapping. */ .vrow .row-tap { flex:1 1 24px; min-width:24px; align-self:stretch; } .vrow .vsub { color:var(--text3); font-size:12px; margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* "completed" reads as a quiet green check, not a word. */ .status.status--ok { padding:0; width:24px; height:24px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; background:var(--ok-soft); color:var(--ok); } .status.status--ok .i { width:14px; height:14px; } .vrow .prog { position:absolute; left:8px; right:8px; bottom:2px; height:2px; background:var(--bg3); border-radius:2px; overflow:hidden; } .vrow .prog span { display:block; height:100%; background:var(--grad); transform-origin:left; transition:transform .5s linear; } @keyframes rowpulse { 0%,100% { background:transparent; } 40% { background:var(--accent-soft); } } .vrow.pulse { animation:rowpulse 1.4s ease-out 2; } /* inline rename */ .vrow input.rename { padding:5px 9px; font-size:13.5px; border-radius:7px; width:auto; min-width:220px; } /* The title rename input matches .vd-title h1 exactly (22px / 650) so editing a title never jumps the font size — a seamless underline field, no box reflow. */ .vd-title input.rename { font-size:22px; font-weight:650; font-family:var(--font-display); line-height:1.15; padding:0 2px; margin:-1px 0; border:0; border-bottom:2px solid var(--accent); border-radius:0; background:none; color:var(--text); width:100%; min-width:0; max-width:100%; } .vd-title input.rename:focus { outline:none; } @media (max-width:560px){ .vd-title input.rename { font-size:18px; } } /* ---- row action buttons (always visible — no hidden menus on rows) ----------- */ .row-actions { display:flex; align-items:center; gap:2px; flex-shrink:0; } .icon-btn { border:0; background:none; color:var(--text3); cursor:pointer; border-radius:7px; width:30px; height:30px; display:inline-flex; align-items:center; justify-content:center; font-family:var(--font); transition:background var(--t-fast), color var(--t-fast); } .icon-btn .i { width:16px; height:16px; } @media (hover:hover) { .icon-btn:hover { background:var(--bg3); color:var(--text); } } @media (hover:hover) { .icon-btn--danger:hover { color:var(--danger); background:var(--danger-soft); } } .icon-btn.armed { width:auto; padding:0 9px; font-size:12px; font-weight:650; color:var(--danger); background:var(--danger-soft); } /* ---- popover menu ----------------------------------------------------------- */ .menu-wrap { position:relative; } .menu-btn { border:0; background:none; color:var(--text3); font-size:17px; cursor:pointer; border-radius:7px; width:30px; height:30px; line-height:1; } @media (hover:hover) { .menu-btn:hover { background:var(--bg3); color:var(--text); } } .menu { position:absolute; right:0; top:calc(100% + 4px); z-index:50; min-width:190px; max-width:calc(100vw - 24px); background:var(--bg3); border:1px solid var(--hairline-strong); border-radius:var(--r-m); box-shadow:var(--sh-3); padding:5px; animation:menuin var(--t-fast) var(--ease-out); } @keyframes menuin { from { opacity:0; transform:translateY(-4px); } } .menu button { display:flex; align-items:center; gap:9px; width:100%; text-align:left; border:0; background:none; color:var(--text); padding:8px 10px; border-radius:8px; font-size:13px; cursor:pointer; font-family:var(--font); } @media (hover:hover) { .menu button:hover { background:var(--bg2); } } .menu button.danger { color:var(--danger); } .menu button.danger[data-armed="1"] { background:var(--danger-soft); font-weight:650; } .menu .i { width:15px; height:15px; color:var(--text2); } .menu button.danger .i { color:var(--danger); } .menu .menu-inline { padding:6px 10px; } .menu .menu-title { padding:8px 10px 4px; font-size:12px; font-weight:650; color:var(--text2); } /* floating popover: positioned by JS (fixed), not anchored to a ⋯ button */ .menu-float { position:fixed; z-index:60; } .menu-float > .menu { position:static; margin:0; } /* ---- alerts ------------------------------------------------------------------ */ /* Filters: adapter as underline tabs (same .ap-tabs language as the checks picker — no bubbles), video/folder as popover buttons (search + flat list, not a native