/* ========================================================================================== Media Search App - design system 1 tokens · 2 base · 3 layout · 4 primitives · 5 overlays · 6 media · 7 pages · 8 admin Colours, fonts, radius, density come from the theme engine (js/boot.js + js/core/theme.js). Hit targets >= 40 px. ========================================================================================== */ /* ------------------------------------------------------------------------------ 1 tokens */ /* The theme engine (js/boot.js) writes the BASE tokens as inline custom properties on before first paint: --accent --accent-2 --accent-text --accent-contrast --bg --surface --surface-2 --text --text-muted --border --font --font-heading --heading-weight --font-scale --radius --density --thumb-ratio --card-min. The values below are only the fallback (template "aurora", dark); everything else is DERIVED from them. */ :root { --accent: #6d8dff; --accent-2: #59b8f0; --accent-text: #8aa4ff; --accent-contrast: #0b0d12; --bg: #0e1116; --surface: #181e27; --surface-2: #1f2631; --text: #e8ecf3; --text-muted: #9aa5b8; --border: #283041; --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; --font-heading: var(--font); --heading-weight: 700; --font-scale: 1; --radius: 10px; --density: 1; --thumb-ratio: 16 / 9; --card-min: 232px; /* derived */ --sunken-mix: 78%; --accent-strong: var(--accent-text); --accent-soft: color-mix(in srgb, var(--accent) 16%, transparent); --accent-gradient: linear-gradient(135deg, var(--accent), var(--accent-2)); --bg-raised: color-mix(in srgb, var(--surface) 55%, var(--bg)); --bg-sunken: color-mix(in srgb, var(--bg) var(--sunken-mix), #000); --surface-3: color-mix(in srgb, var(--surface-2) 86%, var(--text)); --border-strong: color-mix(in srgb, var(--border) 70%, var(--text)); --text-faint: color-mix(in srgb, var(--text-muted) 78%, var(--bg)); --ok: #3fcf8e; --warn: #f2b84b; --err: #f47272; --info: #59b8f0; --adult: #ff6fa5; --ok-soft: color-mix(in srgb, var(--ok) 16%, transparent); --warn-soft: color-mix(in srgb, var(--warn) 16%, transparent); --err-soft: color-mix(in srgb, var(--err) 16%, transparent); --info-soft: color-mix(in srgb, var(--info) 16%, transparent); --adult-soft: color-mix(in srgb, var(--adult) 16%, transparent); --tag-s: 55%; --tag-l: 70%; --tag-bg-l: 22%; --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-2: 0 8px 28px rgba(0, 0, 0, 0.45); --shadow-3: 0 24px 64px rgba(0, 0, 0, 0.6); --scrim: rgba(4, 6, 10, 0.68); --s1: calc(4px * var(--density)); --s2: calc(8px * var(--density)); --s3: calc(12px * var(--density)); --s4: calc(16px * var(--density)); --s5: calc(24px * var(--density)); --s6: calc(32px * var(--density)); --s7: calc(48px * var(--density)); --radius-sm: calc(var(--radius) * 0.6); --radius-lg: calc(var(--radius) * 1.4); --radius-pill: 999px; --btn-radius: var(--radius); --hit: 40px; --topbar-h: 60px; --sidebar-w: 264px; --rail-w: 88px; --mini-h: 72px; --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; --ease: cubic-bezier(0.2, 0, 0, 1); } :root[data-mode="light"] { --sunken-mix: 95%; --ok: #157a4e; --warn: #8f5a00; --err: #c93434; --info: #136ea8; --adult: #c02a6b; --tag-s: 62%; --tag-l: 30%; --tag-bg-l: 92%; --shadow-1: 0 1px 2px rgba(20, 30, 50, 0.08); --shadow-2: 0 8px 28px rgba(20, 30, 50, 0.14); --shadow-3: 0 24px 64px rgba(20, 30, 50, 0.24); --scrim: rgba(20, 26, 38, 0.46); } /* ------------------------------------------------------------------------------ 2 base */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scrollbar-color: var(--border-strong) transparent; } html.no-scroll, html.no-scroll body { overflow: hidden; } body { margin: 0; min-height: 100vh; min-height: 100dvh; background: var(--bg); color: var(--text); font: calc(15px * var(--font-scale))/1.5 var(--font); -webkit-font-smoothing: antialiased; overflow-x: hidden; } h1, h2, h3, p, ul, ol, dl, dd, figure, pre { margin: 0; } h1, h2, h3, .brand-name { font-family: var(--font-heading); font-weight: var(--heading-weight); } /* programmatic focus after navigation lands on the page heading: no ring for that */ h1[tabindex="-1"]:focus { outline: none; } ul, ol { padding: 0; list-style: none; } a { color: var(--accent-strong); text-decoration: none; } a:hover { text-decoration: underline; } img, video, svg { display: block; max-width: 100%; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; } button:disabled, [aria-disabled="true"] { cursor: not-allowed; } [hidden] { display: none !important; } :focus { outline: none; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); } ::selection { background: var(--accent-soft); } code, kbd, .mono { font-family: var(--mono); font-size: 0.92em; } .icon { flex: none; display: inline-block; vertical-align: middle; } .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .muted { color: var(--text-muted); } .small { font-size: calc(13px * var(--font-scale)); } .nowrap { white-space: nowrap; } .truncate { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .break { overflow-wrap: anywhere; word-break: break-word; } .grow { flex: 1 1 auto; min-width: 0; } .text-ok { color: var(--ok); } .text-warn { color: var(--warn); } .text-err { color: var(--err); } .row { display: flex; align-items: center; gap: var(--s2); } .row.wrap, .wrap { flex-wrap: wrap; } .stack { display: flex; flex-direction: column; gap: var(--s4); } .plain-list { display: flex; flex-direction: column; gap: var(--s1); } .linklike { display: inline; padding: 0; border: 0; background: none; color: var(--accent-strong); text-align: inherit; } .linklike:hover { text-decoration: underline; } .prerender { max-width: 1100px; margin: 0 auto; padding: var(--s5); color: var(--text-muted); } .prerender h1 { margin-bottom: var(--s3); color: var(--text); font-size: calc(24px * var(--font-scale)); } .prerender a { display: inline-block; margin: 0 var(--s3) var(--s2) 0; } .prerender img { max-width: 320px; height: auto; border-radius: var(--radius); } .noscript { padding: var(--s4); text-align: center; color: var(--text-muted); } .boot { display: grid; place-items: center; min-height: 100vh; min-height: 100dvh; padding: var(--s5); text-align: center; color: var(--text-muted); } /* ------------------------------------------------------------------------------ 3 layout */ .app { min-height: 100vh; min-height: 100dvh; padding-top: var(--topbar-h); } .app.has-mini { padding-bottom: calc(var(--mini-h) + env(safe-area-inset-bottom, 0px)); } .skip-link { position: fixed; top: -100px; left: var(--s3); z-index: 300; padding: var(--s2) var(--s4); border-radius: var(--radius); background: var(--accent); color: var(--accent-contrast); font-weight: 600; } .skip-link:focus { top: var(--s3); } .topbar { position: fixed; inset: 0 0 auto 0; z-index: 100; display: flex; align-items: center; gap: var(--s3); height: var(--topbar-h); padding: 0 var(--s4); padding-left: max(var(--s4), env(safe-area-inset-left, 0px)); padding-right: max(var(--s4), env(safe-area-inset-right, 0px)); background: color-mix(in srgb, var(--bg-raised) 92%, transparent); border-bottom: 1px solid var(--border); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .topbar .topbar-menu { display: inline-flex; } .brand { display: flex; align-items: center; gap: var(--s2); min-width: 0; color: var(--text); font-weight: 700; font-size: calc(16px * var(--font-scale)); letter-spacing: 0.01em; } .brand:hover { text-decoration: none; } .brand-name { max-width: 200px; } .brand-mark { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 9px; background: linear-gradient(135deg, #7aa2ff, #4f6fe0); color: #fff; } .brand-mark-lg { width: 52px; height: 52px; border-radius: 14px; } .topsearch { position: relative; display: flex; align-items: center; flex: 1 1 auto; max-width: 620px; margin: 0 auto; color: var(--text-muted); } .topsearch > .icon { position: absolute; left: 14px; pointer-events: none; } .topsearch-input { width: 100%; height: var(--hit); padding: 0 44px 0 42px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--bg-sunken); color: var(--text); transition: border-color 0.15s var(--ease), background 0.15s var(--ease); } .topsearch-input::placeholder { color: var(--text-faint); } .topsearch-input:hover { border-color: var(--border-strong); } .topsearch-input:focus-visible { outline: none; border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 3px var(--accent-soft); } .topsearch-kbd { position: absolute; right: 12px; padding: 1px 7px; border: 1px solid var(--border-strong); border-radius: 5px; color: var(--text-faint); font-size: calc(12px * var(--font-scale)); pointer-events: none; } /* the search page has its own, larger box */ .app.on-search .topsearch { visibility: hidden; } .topbar-actions { display: flex; align-items: center; gap: var(--s2); margin-left: auto; } .conn-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--radius-pill); background: var(--warn-soft); color: var(--warn); font-size: calc(13px * var(--font-scale)); animation: pulse 1.6s ease-in-out infinite; } .usermenu-btn { padding-left: 4px; max-width: 220px; } .avatar { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-strong); font-weight: 700; font-size: calc(14px * var(--font-scale)); } .avatar-sm { display: inline-grid; width: 26px; height: 26px; font-size: calc(12px * var(--font-scale)); vertical-align: middle; } .sidebar { position: fixed; top: 0; bottom: 0; left: 0; z-index: 110; width: min(320px, 86vw); padding: var(--s4) var(--s2) var(--s6); padding-left: max(var(--s2), env(safe-area-inset-left, 0px)); overflow-y: auto; overscroll-behavior: contain; background: var(--bg-raised); border-right: 1px solid var(--border); box-shadow: var(--shadow-3); transform: translateX(-105%); transition: transform 0.22s var(--ease); visibility: hidden; } .sidebar.is-open { transform: none; visibility: visible; } .sidebar-title { margin: var(--s4) var(--s3) var(--s1); color: var(--text-faint); font-size: calc(11.5px * var(--font-scale)); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .sidebar-section { display: flex; flex-direction: column; gap: 2px; } .sidebar-empty { padding: var(--s2) var(--s3); } .sidebar .skeleton-block { padding: var(--s2) var(--s3); } .side-link { display: flex; align-items: center; gap: var(--s3); width: 100%; min-height: var(--hit); padding: 0 var(--s3); border: 0; border-radius: var(--radius); background: none; color: var(--text-muted); font-weight: 500; text-align: left; } .side-link:hover { background: var(--surface-2); color: var(--text); text-decoration: none; } .side-link.is-active { background: var(--accent-soft); color: var(--accent-strong); } .tree-row { display: flex; align-items: center; min-height: var(--hit); padding-right: var(--s1); border-radius: var(--radius); color: var(--text-muted); } .tree-row:hover { background: var(--surface-2); color: var(--text); } .tree-row.is-active { background: var(--accent-soft); color: var(--accent-strong); } .tree-toggle { display: grid; place-items: center; flex: none; width: 28px; height: var(--hit); padding: 0; border: 0; border-radius: var(--radius-sm); background: none; color: inherit; } .tree-toggle-empty { visibility: hidden; } .tree-link { display: flex; align-items: center; flex: 1 1 auto; gap: var(--s2); min-width: 0; min-height: var(--hit); color: inherit; font-weight: 500; } .tree-link:hover { text-decoration: none; } .scrim { position: fixed; inset: 0; z-index: 105; background: var(--scrim); } .main { min-width: 0; } .main:focus { outline: none; } .page { display: flex; flex-direction: column; gap: var(--s4); max-width: 1720px; margin: 0 auto; padding: var(--s5); padding-left: max(var(--s5), env(safe-area-inset-left, 0px)); padding-right: max(var(--s5), env(safe-area-inset-right, 0px)); } .page-loading { align-items: center; padding-top: 20vh; } .page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s3) var(--s4); } .page-title { display: flex; align-items: center; gap: var(--s2); font-size: calc(24px * var(--font-scale)); font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; } .page-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 2px; color: var(--text-muted); } .section-title { margin-bottom: var(--s2); font-size: calc(15px * var(--font-scale)); font-weight: 700; } .toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); } .split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--s4); align-items: start; } .tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--s4); } /* ------------------------------------------------------------------------------ 4 primitives */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: var(--hit); padding: 0 var(--s4); border: 1px solid var(--border); border-radius: var(--btn-radius); background: var(--surface-2); color: var(--text); font-weight: 600; font-size: calc(14px * var(--font-scale)); line-height: 1.2; white-space: nowrap; text-decoration: none; transition: background 0.15s var(--ease), border-color 0.15s var(--ease), color 0.15s var(--ease), transform 0.05s; -webkit-tap-highlight-color: transparent; } .btn:hover { background: var(--surface-3); border-color: var(--border-strong); text-decoration: none; } .btn:active { transform: translateY(1px); } .btn:disabled { opacity: 0.5; transform: none; } .btn.is-active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-strong); } .btn-primary { border-color: transparent; background: var(--accent); color: var(--accent-contrast); } .btn-primary:hover { border-color: transparent; background: var(--accent-strong); } /* button style of the theme (Administration -> Appearance) */ :root[data-buttons="soft"] .btn-primary { background: var(--accent-soft); color: var(--accent-text); } :root[data-buttons="soft"] .btn-primary:hover { background: color-mix(in srgb, var(--accent) 28%, transparent); } :root[data-buttons="outline"] .btn-primary { border-color: var(--accent); background: transparent; color: var(--accent-text); } :root[data-buttons="outline"] .btn-primary:hover { border-color: var(--accent); background: var(--accent-soft); } :root[data-buttons="gradient"] .btn-primary { background: var(--accent-gradient); color: var(--accent-contrast); } :root[data-buttons="gradient"] .btn-primary:hover { filter: brightness(1.08); } :root[data-buttons="ghost"] .btn-primary { background: transparent; color: var(--accent-text); } :root[data-buttons="ghost"] .btn-primary:hover { background: var(--accent-soft); } :root[data-button-shape="pill"] { --btn-radius: 999px; } :root[data-button-shape="square"] { --btn-radius: 2px; } .btn-danger { border-color: transparent; background: var(--err-soft); color: var(--err); } .btn-danger:hover { border-color: transparent; background: var(--err); color: #fff; } .btn-danger-ghost:hover { border-color: transparent; background: var(--err-soft); color: var(--err); } .btn-ghost { border-color: transparent; background: transparent; color: var(--text-muted); } .btn-ghost:hover { border-color: transparent; background: var(--surface-2); color: var(--text); } .btn-sm { min-height: 34px; padding: 0 var(--s3); font-size: calc(13px * var(--font-scale)); } .btn-lg { min-height: 48px; padding: 0 var(--s5); font-size: calc(15px * var(--font-scale)); } .btn-icon { width: var(--hit); padding: 0; } .btn-icon.btn-sm { width: 34px; } .btn-block { width: 100%; } /* Touch devices (phones, Quest): small buttons grow to a comfortable target. */ @media (pointer: coarse) { .btn-sm { min-height: var(--hit); } .btn-icon.btn-sm { width: var(--hit); } } .segmented { display: inline-flex; padding: 3px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-sunken); } .segmented-btn { display: grid; place-items: center; min-width: 38px; min-height: 32px; padding: 0 var(--s2); border: 0; border-radius: 7px; background: none; color: var(--text-muted); font-weight: 600; font-size: calc(13px * var(--font-scale)); } .segmented-btn:hover { color: var(--text); } .segmented-btn.is-active { background: var(--surface-3); color: var(--text); box-shadow: var(--shadow-1); } @media (pointer: coarse) { .segmented-btn { min-width: 42px; min-height: 38px; } } .input, .select, .textarea, .taginput { width: 100%; min-height: var(--hit); padding: 0 var(--s3); border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-sunken); color: var(--text); transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease); } .toolbar .input, .toolbar .select, .filters .select { width: auto; } .toolbar .input { min-width: 200px; } .input::placeholder, .textarea::placeholder { color: var(--text-faint); } .input:hover, .select:hover, .textarea:hover { border-color: var(--border-strong); } .input:focus-visible, .select:focus-visible, .textarea:focus-visible, .taginput:focus-within { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .input:disabled, .select:disabled { opacity: 0.6; } .textarea { padding: var(--s2) var(--s3); line-height: 1.5; resize: vertical; } .textarea[aria-invalid="true"] { border-color: var(--err); } .select { padding-right: 34px; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238894a8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; text-overflow: ellipsis; } .select option { background: var(--surface); color: var(--text); } .select-sm { min-height: 36px; font-size: calc(13px * var(--font-scale)); } .select-button { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); padding-right: var(--s3); background-image: none; text-align: left; } .input-num { width: 110px; font-variant-numeric: tabular-nums; } .input-group { display: flex; align-items: stretch; } .input-group > .input, .input-group > .select { border-top-right-radius: 0; border-bottom-right-radius: 0; } .input-group > .input-unit, .input-group > .btn { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left: 0; } .input-unit { display: flex; align-items: center; padding: 0 var(--s3); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); color: var(--text-muted); font-size: calc(13px * var(--font-scale)); white-space: nowrap; } .input-icon { position: relative; display: flex; align-items: center; color: var(--text-muted); } .input-icon > .icon { position: absolute; left: 12px; pointer-events: none; } .input-icon > .input { padding-left: 36px; min-width: 240px; } .inline-field { display: inline-flex; align-items: center; gap: var(--s2); color: var(--text-muted); font-size: calc(13px * var(--font-scale)); } .field { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .field-label { color: var(--text); font-weight: 600; font-size: calc(13.5px * var(--font-scale)); } .field-help { display: block; color: var(--text-muted); font-size: calc(13px * var(--font-scale)); font-weight: 400; } .field-error { color: var(--err); font-size: calc(13px * var(--font-scale)); } .form-row { display: flex; flex-wrap: wrap; gap: var(--s4); } .form-row > .field { flex: 1 1 180px; } .switch-row { display: flex; align-items: center; gap: var(--s3); min-height: var(--hit); cursor: pointer; } .toggle { position: relative; flex: none; width: 46px; height: 28px; padding: 0; border: 1px solid var(--border-strong); border-radius: var(--radius-pill); background: var(--surface-3); transition: background 0.18s var(--ease), border-color 0.18s var(--ease); } /* 28 px tall control, 40 px tall hit area */ .toggle::before { content: ""; position: absolute; inset: -7px -4px; } .toggle-knob { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--text-muted); transition: transform 0.18s var(--ease), background 0.18s var(--ease); } .toggle.is-on { border-color: var(--accent); background: var(--accent); } .toggle.is-on .toggle-knob { transform: translateX(18px); background: #fff; } .toggle:disabled { opacity: 0.5; } .taginput { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 5px var(--s2); cursor: text; } .taginput-field { flex: 1 1 120px; min-width: 80px; min-height: 28px; padding: 0 var(--s1); border: 0; background: none; } .taginput-field:focus-visible { outline: none; } /* multi-value combobox (persons, categories, delegates): chips + input; the list is a floating layer (5 overlays) */ .tokeninput { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; width: 100%; min-height: var(--hit); padding: 5px var(--s2); border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-sunken); color: var(--text); cursor: text; transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease); } .tokeninput:hover { border-color: var(--border-strong); } .tokeninput:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .tokeninput.is-disabled { opacity: 0.6; cursor: default; } .tokeninput-list { display: contents; margin: 0; padding: 0; list-style: none; } .tokeninput-field { flex: 1 1 96px; min-width: 72px; min-height: 28px; padding: 0 var(--s1); border: 0; background: none; color: inherit; } .tokeninput-field:focus-visible { outline: none; } .tokeninput-field::placeholder { color: var(--text-faint); } .tokeninput.is-full .tokeninput-field { flex-basis: 40px; cursor: default; } .tokeninput-busy { flex: none; margin-right: var(--s1); color: var(--text-muted); } .token { max-width: 100%; min-width: 0; border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); background: var(--accent-soft); } .token > a { color: inherit; } /* free text (not a directory value): dashed outline */ .token.is-free { border-style: dashed; border-color: var(--border-strong); background: var(--surface-3); } .token.is-flash { animation: token-flash 0.9s var(--ease); } .token .chip-x { flex: none; } /* 28 px control, 40 px hit area */ @media (pointer: coarse) { .token .chip-x { position: relative; width: 28px; height: 28px; } .token .chip-x::before { content: ""; position: absolute; inset: -6px; } } .segmented-xs { padding: 2px; border-radius: var(--radius-sm); } .segmented-xs .segmented-btn { min-width: 0; min-height: 22px; padding: 0 7px; border-radius: calc(var(--radius-sm) - 1px); font-size: calc(11.5px * var(--font-scale)); } @media (pointer: coarse) { .segmented-xs .segmented-btn { min-height: 32px; padding: 0 10px; } } .avatar-img { display: inline-grid; place-items: center; flex: none; overflow: hidden; border-radius: 50%; background: var(--surface-3); color: var(--text-faint); } .avatar-img img { width: 100%; height: 100%; object-fit: cover; } .pdot { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: hsl(var(--tag-hue, 220) 60% 60%); } .card { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-1); min-width: 0; } :root[data-cards="elevated"] .card, :root[data-cards="elevated"] .stat { border-color: transparent; box-shadow: var(--shadow-2); } :root[data-cards="bordered"] .card, :root[data-cards="bordered"] .stat { border-color: var(--border-strong); box-shadow: none; } :root[data-cards="glass"] .card, :root[data-cards="glass"] .stat, :root[data-cards="glass"] .menu, :root[data-cards="glass"] .modal { border-color: color-mix(in srgb, var(--text) 14%, transparent); background: color-mix(in srgb, var(--surface) 62%, transparent); box-shadow: var(--shadow-2); backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3); } .card-link { color: inherit; transition: border-color 0.15s var(--ease), transform 0.15s var(--ease); } .card-link:hover { border-color: var(--border-strong); text-decoration: none; transform: translateY(-1px); } .card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2) var(--s4); padding: var(--s4); border-bottom: 1px solid var(--border); } .card-head:last-child { border-bottom: 0; } .card-title { display: flex; align-items: center; gap: var(--s2); font-size: calc(16px * var(--font-scale)); font-weight: 700; } .card-body { padding: var(--s4); } .card-body + .card-body { border-top: 1px solid var(--border); } .card-empty { display: flex; align-items: center; gap: var(--s2); padding: var(--s5) var(--s4); } .card > .alert, .card > .skeleton-block, .card > .pager { margin: var(--s4); } .card > .empty { padding: var(--s6) var(--s4); } .filters { justify-content: flex-start; } .filters .input { width: auto; flex: 1 1 200px; } .badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--surface-3); color: var(--text-muted); font-size: calc(12px * var(--font-scale)); font-weight: 600; line-height: 1.5; white-space: nowrap; vertical-align: middle; } .badge-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .badge-count { margin-left: 2px; color: var(--text); } .badge-ok { background: var(--ok-soft); color: var(--ok); } .badge-warn { background: var(--warn-soft); color: var(--warn); } .badge-err { background: var(--err-soft); color: var(--err); } .badge-info { background: var(--info-soft); color: var(--info); } .badge-accent { background: var(--accent-soft); color: var(--accent-strong); } .badge-muted { background: var(--surface-3); color: var(--text-muted); } .badge-adult { background: var(--adult-soft); color: var(--adult); letter-spacing: 0.02em; } .badge-dark { background: rgba(8, 10, 14, 0.78); color: #fff; } .chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); } .chips-tight { gap: 6px; } .chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 var(--s3); border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface); color: var(--text); font-size: calc(13.5px * var(--font-scale)); font-weight: 500; white-space: nowrap; } .chip:hover { border-color: var(--border-strong); background: var(--surface-2); text-decoration: none; } .chip.is-active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-strong); } .chip-soft { border-color: transparent; background: var(--surface-2); color: var(--text-muted); } .chip-static { min-height: 28px; padding-right: 4px; background: var(--surface-3); cursor: default; } .chip-x { display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--text-muted); } .chip-x:hover { background: var(--err-soft); color: var(--err); } .chip-person { padding-left: 6px; } .chip-avatar { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; } @media (pointer: coarse) { .chip { min-height: var(--hit); } } .cap { padding: 2px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-muted); font-size: calc(12px * var(--font-scale)); } .ptag { display: inline-flex; align-items: center; max-width: 100%; padding: 1px 8px; border-radius: var(--radius-sm); background: hsl(var(--tag-hue, 220) 40% var(--tag-bg-l)); color: hsl(var(--tag-hue, 220) var(--tag-s) var(--tag-l)); font-size: calc(12px * var(--font-scale)); font-weight: 700; line-height: 1.6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ptag-lg { padding: 3px 10px; font-size: calc(13px * var(--font-scale)); } a.ptag:hover { text-decoration: none; filter: brightness(1.12); } .tabs { display: flex; gap: var(--s1); overflow-x: auto; border-bottom: 1px solid var(--border); scrollbar-width: none; } .tab { display: inline-flex; align-items: center; gap: var(--s2); min-height: 44px; margin-bottom: -1px; padding: 0 var(--s4); border: 0; border-bottom: 2px solid transparent; background: none; color: var(--text-muted); font-weight: 600; white-space: nowrap; } .tab:hover { color: var(--text); } .tab.is-active { border-bottom-color: var(--accent); color: var(--text); } .tab-count { padding: 0 7px; border-radius: var(--radius-pill); background: var(--surface-3); font-size: calc(12px * var(--font-scale)); } .table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .table { width: 100%; border-collapse: collapse; font-size: calc(14px * var(--font-scale)); } .table th, .table td { padding: 10px var(--s4); border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; } .table th { color: var(--text-muted); font-size: calc(12px * var(--font-scale)); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; background: var(--surface); } .table tbody tr:last-child td { border-bottom: 0; } .table-hover tbody tr:hover, .table tr.is-clickable:hover { background: var(--surface-2); } .table tr.is-clickable { cursor: pointer; } .table tr.is-off { opacity: 0.6; } .table tr.is-current { background: var(--accent-soft); } .table tr.is-err td:first-child { box-shadow: inset 3px 0 0 var(--err); } .table tr.is-live { animation: flash 1.6s var(--ease); } .table .num { text-align: right; font-variant-numeric: tabular-nums; } .table-dense th, .table-dense td { padding: 7px var(--s3); } .row-group th { padding-top: var(--s4); background: var(--surface-2); color: var(--text); } .row-detail td { background: var(--bg-sunken); } .row-actions { text-align: right; white-space: nowrap; } .row-actions > * + * { margin-left: 6px; } .cell-sub { display: block; max-width: 420px; color: var(--text-muted); font-size: calc(12.5px * var(--font-scale)); font-weight: 400; } .cell-err { color: var(--err); } .cell-wrap { min-width: 220px; } .cell-title { display: flex; align-items: center; gap: var(--s3); min-height: var(--hit); color: var(--text); text-align: left; } .cell-title:hover { text-decoration: none; } .cell-title:hover strong { color: var(--accent-strong); } .cell-media { display: flex; align-items: center; gap: var(--s3); min-width: 280px; } .cell-thumb { display: grid; place-items: center; flex: none; width: 72px; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius-sm); background: var(--bg-sunken); color: var(--text-faint); } .cell-thumb img { width: 100%; height: 100%; object-fit: cover; } .cell-media-text { min-width: 0; } .col-progress { min-width: 120px; width: 16%; } .pager { display: flex; align-items: center; justify-content: center; gap: var(--s3); } .pager-info { color: var(--text-muted); font-size: calc(13px * var(--font-scale)); } .progress { position: relative; width: 100%; height: 6px; overflow: hidden; border-radius: var(--radius-pill); background: var(--surface-3); } .progress-bar { height: 100%; border-radius: inherit; background: var(--accent); transition: width 0.3s var(--ease); } .progress-ok .progress-bar { background: var(--ok); } .progress-warn .progress-bar { background: var(--warn); } .progress-err .progress-bar { background: var(--err); } .progress.is-indeterminate .progress-bar { position: absolute; width: 38%; animation: indeterminate 1.2s ease-in-out infinite; } .spinner { display: inline-block; flex: none; width: 16px; height: 16px; border: 2px solid color-mix(in srgb, currentColor 25%, transparent); border-top-color: currentColor; border-radius: 50%; animation: spin 0.7s linear infinite; vertical-align: middle; } .spinner-lg { width: 36px; height: 36px; border-width: 3px; color: var(--accent); } .skeleton { position: relative; overflow: hidden; border-color: transparent; background: var(--surface-2); } .skeleton::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--text) 7%, transparent), transparent); transform: translateX(-100%); animation: shimmer 1.4s ease-in-out infinite; } .skeleton-block { display: flex; flex-direction: column; gap: var(--s3); } .skeleton-line { height: 14px; border-radius: var(--radius-sm); } .empty { display: flex; flex-direction: column; align-items: center; gap: var(--s2); padding: var(--s7) var(--s4); text-align: center; } .empty-icon { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: var(--s2); border-radius: 50%; background: var(--surface-2); color: var(--text-muted); } .empty-err .empty-icon { background: var(--err-soft); color: var(--err); } .empty-title { font-size: calc(18px * var(--font-scale)); font-weight: 700; } .empty-text { max-width: 520px; color: var(--text-muted); } .empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2); margin-top: var(--s3); } .alert { display: flex; align-items: flex-start; gap: var(--s3); padding: var(--s3) var(--s4); border: 1px solid transparent; border-radius: var(--radius); background: var(--info-soft); color: var(--text); } .alert > .icon { margin-top: 2px; color: var(--info); } .alert-body { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; } .alert-title { display: block; } .alert-actions { display: flex; flex: none; gap: var(--s2); } .alert-ok { background: var(--ok-soft); } .alert-ok > .icon { color: var(--ok); } .alert-warn { background: var(--warn-soft); } .alert-warn > .icon { color: var(--warn); } .alert-err { background: var(--err-soft); } .alert-err > .icon { color: var(--err); } .kv { display: grid; grid-template-columns: minmax(120px, max-content) minmax(0, 1fr); gap: 6px var(--s4); font-size: calc(14px * var(--font-scale)); } .kv dt { color: var(--text-muted); } .kv-wide { grid-template-columns: minmax(160px, 220px) minmax(0, 1fr); } .kv-tight { gap: 3px var(--s3); font-size: calc(13px * var(--font-scale)); } .kv-inline { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s5); } .kv-inline dt { display: inline; } .kv-inline dt::after { content: ":"; } .kv-inline dd { display: inline; margin-left: 6px; font-weight: 600; } .kv-inline > * { white-space: nowrap; } .code { overflow: auto; padding: var(--s3); border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-sunken); color: var(--text); font: calc(12.5px * var(--font-scale))/1.55 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; tab-size: 2; } .code-err { max-height: 260px; border-color: color-mix(in srgb, var(--err) 40%, var(--border)); color: var(--err); } .console { background: #05070a; color: #cfe3d4; white-space: pre; overflow-wrap: normal; } .codebox { position: relative; } .codebox-copy { position: absolute; top: 6px; right: 6px; z-index: 1; opacity: 0.85; } .result-box { margin-top: var(--s3); padding: var(--s3); border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-sunken); } .hint-box { display: flex; align-items: center; gap: var(--s2); margin-top: 4px; padding: 4px 4px 4px var(--s2); border-radius: var(--radius-sm); background: var(--bg-sunken); } .hint-box code { flex: 1 1 auto; } .jobprogress { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .jobprogress-head { display: flex; align-items: center; gap: var(--s2); min-width: 0; } .jobprogress.is-compact { font-size: calc(13px * var(--font-scale)); } .jobprogress-msg { flex: 1 1 auto; color: var(--text-muted); font-size: calc(13px * var(--font-scale)); } .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--s3); } .stat-grid-sm { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } .stat { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: var(--s4); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); color: var(--text); text-align: left; box-shadow: var(--shadow-1); } a.stat:hover, button.stat:hover { border-color: var(--border-strong); text-decoration: none; } .stat.is-active { border-color: var(--accent); background: var(--accent-soft); } .stat.is-err .stat-value { color: var(--err); } .stat-wide { grid-column: span 2; } .stat-sm { padding: var(--s3); } .stat-label { display: flex; align-items: center; gap: 6px; color: var(--text-muted); font-size: calc(13px * var(--font-scale)); font-weight: 600; } .stat-value { font-size: calc(26px * var(--font-scale)); font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; } .stat-sm .stat-value { font-size: calc(20px * var(--font-scale)); } .stat-of { color: var(--text-muted); font-size: calc(15px * var(--font-scale)); font-weight: 500; } .stat-sub { color: var(--text-muted); font-size: calc(12.5px * var(--font-scale)); } .timeline { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); padding: var(--s3); border-radius: var(--radius); background: var(--bg-sunken); } .timeline li { display: flex; flex-direction: column; } .timeline-label { color: var(--text-muted); font-size: calc(12px * var(--font-scale)); } .live-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--text-faint); } .live-dot.is-on { background: #ff5468; animation: pulse 1.2s ease-in-out infinite; } .stepper { display: inline-flex; align-items: center; gap: var(--s2); } .stepper-value { min-width: 44px; font-size: calc(22px * var(--font-scale)); font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; } /* ------------------------------------------------------------------------------ 5 overlays */ .dropdown { position: relative; display: inline-block; min-width: 0; } .filter .dropdown, .field .dropdown { display: block; } .menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 120; min-width: 240px; max-width: min(360px, calc(100vw - 24px)); padding: 6px; border: 1px solid var(--border-strong); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-2); animation: pop 0.14s var(--ease); } .menu-left { right: auto; left: 0; } .menu-scroll { max-height: min(340px, 50vh); overflow-y: auto; overscroll-behavior: contain; } .menu-head { display: flex; flex-direction: column; padding: var(--s2) var(--s3) var(--s3); margin-bottom: 6px; border-bottom: 1px solid var(--border); } .menu-item, .menu-row { display: flex; align-items: center; gap: var(--s3); width: 100%; min-height: var(--hit); padding: 0 var(--s3); border: 0; border-radius: var(--radius-sm); background: none; color: var(--text); font-weight: 500; font-size: calc(14px * var(--font-scale)); text-align: left; } .menu-item:hover, .menu-item:focus-visible { background: var(--surface-2); text-decoration: none; } .menu-item-danger { color: var(--err); } .menu-check { cursor: pointer; } .menu-check input { width: 18px; height: 18px; accent-color: var(--accent); } .menu-empty { padding: var(--s3); } .menu-sep { height: 1px; margin: 6px 0; background: var(--border); } .menu-item-static { margin: 0; } /* floating layers: teleported to , positioned by core/floating.js - above dialogs, below toasts */ .floating { position: fixed; top: 0; left: 0; z-index: 320; max-width: calc(100vw - 16px); overflow-y: auto; overscroll-behavior: contain; } .menu-floating { right: auto; min-width: 0; } .typeahead { padding: 6px; border: 1px solid var(--border-strong); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-2); animation: pop 0.14s var(--ease); } :root[data-cards="glass"] .typeahead { border-color: color-mix(in srgb, var(--text) 14%, transparent); background: color-mix(in srgb, var(--surface) 86%, transparent); backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3); } .typeahead-list { margin: 0; padding: 0; list-style: none; } .typeahead-option { display: flex; align-items: center; gap: var(--s3); min-height: 44px; padding: 5px var(--s3); border-radius: var(--radius-sm); color: var(--text); font-size: calc(14px * var(--font-scale)); cursor: pointer; } .typeahead-option > .icon { flex: none; color: var(--text-faint); } .typeahead-option.is-active { background: var(--accent-soft); } .typeahead-main { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; } .typeahead-name { font-weight: 600; } .typeahead-name mark { border-radius: 3px; background: color-mix(in srgb, var(--accent) 30%, transparent); color: inherit; } .typeahead-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; color: var(--text-muted); font-size: calc(12px * var(--font-scale)); } .typeahead-sub .badge { padding: 0 6px; font-size: calc(11px * var(--font-scale)); } .typeahead-providers { display: flex; flex: none; align-items: center; gap: 3px; max-width: 40%; } .typeahead-provider { margin-left: 3px; color: var(--text-muted); font-size: calc(12px * var(--font-scale)); } .typeahead-note { display: flex; align-items: center; gap: var(--s2); margin: 0; padding: var(--s2) var(--s3); color: var(--text-muted); font-size: calc(13px * var(--font-scale)); } .typeahead-note.is-error { color: var(--err); } .typeahead-foot { margin-top: 4px; border-top: 1px solid var(--border); } .typeahead-note kbd { padding: 1px 6px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface-2); font-size: calc(11.5px * var(--font-scale)); } .modal-backdrop { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: var(--s4); background: var(--scrim); animation: fade 0.16s var(--ease); } .modal-backdrop.is-drawer { justify-content: flex-end; padding: 0; } .modal { display: flex; flex-direction: column; width: 100%; max-width: 560px; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-3); animation: pop 0.18s var(--ease); } .modal:focus-visible { outline: none; } .modal-sm { max-width: 440px; } .modal-lg { max-width: 820px; } .modal-xl { max-width: 1100px; } .modal.drawer { height: 100%; max-height: none; border-width: 0 0 0 1px; border-radius: 0; animation: slide-in 0.2s var(--ease); } .modal-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s3) var(--s3) var(--s3) var(--s5); border-bottom: 1px solid var(--border); } .modal-title { min-width: 0; font-size: calc(17px * var(--font-scale)); font-weight: 700; overflow-wrap: anywhere; } .modal-body { flex: 1 1 auto; padding: var(--s5); overflow-y: auto; overscroll-behavior: contain; } .modal-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--s2); padding: var(--s3) var(--s5); padding-bottom: max(var(--s3), env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--border); } .modal-body section { display: flex; flex-direction: column; gap: var(--s3); } .modal-body section > .section-title { margin-bottom: 0; } .confirm-text { color: var(--text-muted); } .toasts { position: fixed; right: var(--s4); bottom: var(--s4); z-index: 400; display: flex; flex-direction: column; gap: var(--s2); width: min(420px, calc(100vw - 32px)); pointer-events: none; } .app.has-mini ~ .toasts { bottom: calc(var(--mini-h) + var(--s4)); } .toast { display: flex; align-items: center; gap: var(--s3); padding: var(--s2) var(--s2) var(--s2) var(--s4); border: 1px solid var(--border-strong); border-left: 4px solid var(--info); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-2); pointer-events: auto; } .toast > .icon { color: var(--info); } .toast-ok { border-left-color: var(--ok); } .toast-ok > .icon { color: var(--ok); } .toast-warn { border-left-color: var(--warn); } .toast-warn > .icon { color: var(--warn); } .toast-error { border-left-color: var(--err); } .toast-error > .icon { color: var(--err); } .toast-text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; font-size: calc(14px * var(--font-scale)); } .toast-enter-active, .toast-leave-active { transition: opacity 0.2s var(--ease), transform 0.2s var(--ease); } .toast-enter-from, .toast-leave-to { opacity: 0; transform: translateY(8px); } /* ------------------------------------------------------------------------------ 6 media */ .media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: var(--s5) var(--s4); } .media-grid.is-dense { grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); } .media-grid.is-list { grid-template-columns: minmax(0, 1fr); gap: var(--s3); } .mcard { position: relative; display: flex; flex-direction: column; gap: var(--s2); min-width: 0; } .mcard-thumb { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius); background: var(--bg-sunken); color: var(--text-faint); -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; transition: box-shadow 0.15s var(--ease); } .mcard-thumb:hover { box-shadow: 0 0 0 2px var(--accent); } .mcard-img, .mcard-clip { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .mcard-clip { background: #000; } .mcard-frame { animation: fade 0.25s var(--ease); } .mcard-noimg { position: absolute; inset: 0; display: grid; place-items: center; } .mcard-badges { position: absolute; top: 6px; left: 6px; display: flex; gap: 4px; } .mcard-badges .badge { padding: 1px 6px; font-size: calc(11px * var(--font-scale)); backdrop-filter: blur(4px); } .mcard-badges .badge-accent { background: var(--accent); color: var(--accent-contrast); } .mcard-badges .badge-adult { background: rgba(8, 10, 14, 0.78); } .mcard-duration, .mcard-state { position: absolute; right: 6px; bottom: 6px; padding: 1px 6px; border-radius: 5px; background: rgba(8, 10, 14, 0.82); color: #fff; font-size: calc(12px * var(--font-scale)); font-weight: 600; font-variant-numeric: tabular-nums; } .mcard-state { right: auto; left: 6px; background: var(--err); } .mcard-watched { position: absolute; inset: auto 0 0 0; height: 3px; background: rgba(255, 255, 255, 0.25); } .mcard-watched span { display: block; height: 100%; background: var(--accent); } /* already played items (appearance.played_marker: off | badge | dim) */ .mcard-played { position: absolute; left: 6px; bottom: 9px; display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px 2px 5px; border-radius: 999px; font-size: 0.72rem; font-weight: 600; line-height: 1.5; color: #fff; background: rgba(0, 0, 0, 0.72); backdrop-filter: blur(4px); pointer-events: none; } .mcard.is-completed .mcard-played { background: color-mix(in srgb, var(--accent) 82%, #000); } html[data-played="off"] .mcard-played { display: none; } html[data-played="dim"] .mcard.is-played .mcard-img { opacity: 0.55; filter: saturate(0.55); transition: opacity 0.15s ease, filter 0.15s ease; } html[data-played="dim"] .mcard.is-played:hover .mcard-img, html[data-played="dim"] .mcard.is-played:focus-within .mcard-img { opacity: 1; filter: none; } html[data-played="dim"] .mcard.is-played .mcard-title { color: var(--text-muted); } .mcard.is-list .mcard-played span { display: none; /* list rows are small: the check mark alone */ } .mcard.is-gone .mcard-img { filter: grayscale(1) brightness(0.6); } .mcard-fav, .mcard-add { position: absolute; top: 4px; right: 4px; display: grid; place-items: center; width: var(--hit); height: var(--hit); padding: 0; border: 0; border-radius: 50%; background: rgba(8, 10, 14, 0.55); color: #fff; opacity: 0; transition: opacity 0.15s var(--ease), background 0.15s var(--ease); } /* "add to playlist" sits left of the favorite button (guests have no favorite button: it takes the corner) */ .mcard-fav ~ .mcard-add { right: calc(var(--hit) + 8px); } .mcard:hover .mcard-fav, .mcard:hover .mcard-add, .mcard-fav:focus-visible, .mcard-add:focus-visible, .mcard-fav.is-on { opacity: 1; } .mcard-fav.is-on { color: #ff5d7a; } .mcard-fav:hover, .mcard-add:hover { background: rgba(8, 10, 14, 0.85); } /* no hover on touch screens / in the headset: the controls are always there */ @media (hover: none), (pointer: coarse) { .mcard-fav, .mcard-add { opacity: 1; } } .mcard-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .mcard-title { display: -webkit-box; overflow: hidden; color: var(--text); font-weight: 600; line-height: 1.35; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; } .mcard-title:hover { color: var(--accent-strong); text-decoration: none; } .mcard-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; color: var(--text-muted); font-size: calc(12.5px * var(--font-scale)); } .mcard-bit + .mcard-bit::before { content: "·"; margin-right: 8px; } .mcard-persons { color: var(--text-muted); font-size: calc(12.5px * var(--font-scale)); } .mcard-persons a { color: var(--text-muted); } .mcard-persons a:hover { color: var(--accent-strong); } /* audio: square cover */ .mcard.is-audio .mcard-thumb { aspect-ratio: 1 / 1; } /* list layout */ .mcard.is-list { flex-direction: row; gap: var(--s4); padding: var(--s2); border: 1px solid transparent; border-radius: var(--radius-lg); } .mcard.is-list:hover { border-color: var(--border); background: var(--surface); } .mcard.is-list .mcard-thumb { flex: none; align-self: flex-start; /* keep the 16:9 box when the text column is taller */ width: clamp(132px, 24vw, 260px); } .mcard.is-list.is-audio .mcard-thumb { width: clamp(72px, 12vw, 112px); } .mcard.is-list .mcard-body { flex: 1 1 auto; justify-content: center; padding-right: calc(var(--hit) * 2 + var(--s2)); } .mcard.is-list .mcard-title { font-size: calc(16px * var(--font-scale)); } .mcard.is-list .mcard-fav, .mcard.is-list .mcard-add { top: 50%; right: var(--s2); transform: translateY(-50%); background: transparent; color: var(--text-muted); opacity: 1; } .mcard.is-list .mcard-fav ~ .mcard-add { right: calc(var(--s2) + var(--hit)); } .mcard.is-list .mcard-add:hover { color: var(--text); } .mcard.is-list .mcard-fav.is-on { color: #ff5d7a; } .mcard-skeleton .mcard-thumb { border-radius: var(--radius); } .more { display: flex; justify-content: center; padding: var(--s4) 0; } .sentinel { height: 1px; } .searchbox { display: flex; align-items: center; gap: var(--s2); padding: 6px 6px 6px var(--s4); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); color: var(--text-muted); box-shadow: var(--shadow-1); transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease); } .searchbox:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .searchbox-input { flex: 1 1 auto; min-width: 0; height: 44px; border: 0; background: none; color: var(--text); font-size: calc(17px * var(--font-scale)); } .searchbox-input:focus-visible { outline: none; } .searchbox-input::-webkit-search-cancel-button, .topsearch-input::-webkit-search-cancel-button { filter: grayscale(1); } .crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--text-faint); } .crumbs-sep { width: 1px; height: 22px; margin: 0 var(--s2); background: var(--border-strong); } .filterbar-toggle { display: none; } .filterbar-body { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s3); } .filter { display: flex; flex-direction: column; gap: 4px; flex: 0 1 170px; min-width: 140px; } .filter-wide { flex-basis: 230px; } .filter-range { flex-basis: auto; } .filter-range .input-num { width: 84px; } .filter-label { color: var(--text-muted); font-size: calc(12px * var(--font-scale)); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .filter-reset { align-self: flex-end; } /* multi-value person / category fields: wider, the all / any switch shares the label row */ .filter-tokens { flex: 1 1 300px; min-width: min(100%, 240px); max-width: 560px; align-self: flex-start; } .filter-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); min-height: 18px; } .filter-hint { color: var(--text-muted); font-size: calc(12px * var(--font-scale)); } .active-tokens { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .active-tokens-label { display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted); font-size: calc(13px * var(--font-scale)); font-weight: 600; } .active-tokens-label:not(:first-child) { margin-left: var(--s3); } .active-tokens .token { min-height: 32px; } .results-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s3); } .results-head .section-title { margin: 0; } .results-title { min-width: 0; flex: 1 1 300px; } .provider-strip { display: flex; flex-wrap: wrap; gap: 6px; } .pchip { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 0 var(--s3); border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface); color: var(--text); font-size: calc(13px * var(--font-scale)); } @media (pointer: coarse) { .pchip { min-height: var(--hit); } } .pchip:hover { border-color: var(--border-strong); } .pchip.is-active { border-color: var(--accent); background: var(--accent-soft); } .pchip-dot { width: 8px; height: 8px; border-radius: 50%; background: hsl(var(--tag-hue, 220) 60% 60%); } .pchip-name { font-weight: 600; } .pchip-count { padding: 0 6px; border-radius: var(--radius-pill); background: var(--surface-3); font-weight: 700; font-variant-numeric: tabular-nums; } .pchip-ms { color: var(--text-faint); font-size: calc(12px * var(--font-scale)); } /* the provider was asked several times (one query per person / category) */ .pchip-times { color: var(--accent-strong); font-weight: 700; font-variant-numeric: tabular-nums; } .provider-status { display: flex; flex-direction: column; gap: var(--s2); min-width: 0; } .provider-strip-detail { display: flex; flex-direction: column; gap: 6px; min-width: 0; overflow-wrap: anywhere; } .variant-list { display: flex; flex-wrap: wrap; gap: 6px var(--s4); margin: 0; padding: 0; list-style: none; } .variant { display: inline-flex; align-items: center; gap: var(--s2); min-width: 0; max-width: 100%; font-size: calc(13px * var(--font-scale)); } .variant-name { font-weight: 600; } .pchip.is-error { border-color: color-mix(in srgb, var(--err) 50%, var(--border)); color: var(--err); } .pchip.is-pending, .pchip.is-running { color: var(--text-muted); } /* ------------------------------------------------------------------------------ 7 pages */ .login { position: relative; display: grid; place-items: center; min-height: 100vh; min-height: 100dvh; padding: var(--s5); background: radial-gradient(900px 480px at 15% -10%, var(--accent-soft), transparent 60%), radial-gradient(700px 420px at 100% 110%, var(--info-soft), transparent 60%), var(--bg); } .login-tools { position: absolute; top: var(--s4); right: var(--s4); display: flex; align-items: center; gap: var(--s2); } .login-card { display: flex; flex-direction: column; gap: var(--s4); width: 100%; max-width: 400px; padding: var(--s6); box-shadow: var(--shadow-2); } .login-brand { display: flex; flex-direction: column; align-items: center; gap: var(--s2); margin-bottom: var(--s2); text-align: center; } .login-title { font-size: calc(22px * var(--font-scale)); font-weight: 700; } .media-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 400px); gap: var(--s5); align-items: start; } .media-layout > .media-main:only-child { grid-column: 1 / -1; max-width: 1280px; width: 100%; margin: 0 auto; } .media-main { display: flex; flex-direction: column; gap: var(--s4); min-width: 0; } .media-side { min-width: 0; } .media-side .mcard.is-list { gap: var(--s3); padding: 4px; } .media-side .mcard.is-list .mcard-thumb { width: 148px; } .media-side .mcard.is-list .mcard-title { font-size: calc(14px * var(--font-scale)); } .media-side .mcard.is-list .mcard-body { padding-right: 0; } .media-side .mcard.is-list .mcard-fav, .media-side .mcard.is-list .mcard-add, .media-side .mcard-persons { display: none; } .player-wrap { position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: calc(100vh - var(--topbar-h) - 96px); overflow: hidden; border-radius: var(--radius-lg); background: #000; box-shadow: var(--shadow-2); } .player-stage { position: absolute; inset: 0; } .stage-overlay { position: absolute; inset: 0; display: grid; place-items: center; background-color: #05070a; background-position: center; background-size: cover; } .stage-overlay::before { content: ""; position: absolute; inset: 0; background: rgba(5, 7, 10, 0.72); backdrop-filter: blur(6px); } .stage-note { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--s3); width: min(420px, 86%); color: #e8ecf3; text-align: center; } .stage-note .jobprogress { width: 100%; } .stage-note .jobprogress.is-compact { font-size: calc(13px * var(--font-scale)); } .jobprogress-msg { color: rgba(232, 236, 243, 0.72); } .stage-error { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4); padding: var(--s4); border-color: color-mix(in srgb, var(--err) 45%, var(--border)); } .stage-error > .icon { color: var(--err); } .stage-error-title { font-size: calc(17px * var(--font-scale)); font-weight: 700; } .audio-stage { position: relative; display: grid; place-items: center; width: 100%; height: clamp(220px, 34vh, 340px); overflow: hidden; border-radius: var(--radius-lg); background: #05070a; box-shadow: var(--shadow-2); } .audio-slot { position: absolute; inset: 0; } .audio-host { width: 100%; height: 100%; } /* the parked audio player: in the document (keeps playing) but not visible / focusable */ .audio-holder { position: fixed; left: -10000px; top: 0; width: 320px; height: 180px; overflow: hidden; visibility: hidden; pointer-events: none; } .media-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--s3); } .media-title { flex: 1 1 320px; min-width: 0; font-size: calc(22px * var(--font-scale)); font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; } .media-actions { display: flex; gap: var(--s2); } .media-stats { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); color: var(--text-muted); } .stat-inline { display: inline-flex; align-items: center; gap: 6px; font-size: calc(14px * var(--font-scale)); } .media-desc { padding: var(--s4); } .media-desc-text { white-space: pre-line; overflow-wrap: anywhere; } .media-desc-text.is-clamped { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical; } .thumbstrip { display: flex; gap: var(--s2); padding-bottom: var(--s2); overflow-x: auto; scroll-snap-type: x proximity; } .thumbstrip img { flex: none; width: 176px; aspect-ratio: 16 / 9; border-radius: var(--radius-sm); background: var(--bg-sunken); object-fit: cover; scroll-snap-align: start; } .media-foot { padding-bottom: var(--s4); } .miniplayer { position: fixed; inset: auto 0 0 0; z-index: 95; display: flex; align-items: center; gap: var(--s3); height: calc(var(--mini-h) + env(safe-area-inset-bottom, 0px)); padding: 0 var(--s4) env(safe-area-inset-bottom, 0px); border-top: 1px solid var(--border); background: color-mix(in srgb, var(--bg-raised) 96%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .miniplayer-seek { position: absolute; inset: -8px 0 auto 0; height: 18px; cursor: pointer; } .miniplayer-seek::before, .miniplayer-seek-fill { content: ""; position: absolute; top: 8px; left: 0; height: 3px; } .miniplayer-seek::before { right: 0; background: var(--surface-3); } .miniplayer-seek-fill { background: var(--accent); } .miniplayer-seek:hover::before, .miniplayer-seek:hover .miniplayer-seek-fill { top: 7px; height: 5px; } .miniplayer-info { display: flex; align-items: center; flex: 1 1 auto; gap: var(--s3); min-width: 0; color: var(--text); } .miniplayer-info:hover { text-decoration: none; } .miniplayer-cover { display: grid; place-items: center; flex: none; width: 48px; height: 48px; overflow: hidden; border-radius: var(--radius-sm); background: var(--bg-sunken); color: var(--text-faint); } .miniplayer-cover img { width: 100%; height: 100%; object-fit: cover; } .miniplayer-text { display: flex; flex-direction: column; min-width: 0; } .miniplayer-title { font-weight: 600; } .miniplayer-sub { color: var(--text-muted); font-size: calc(13px * var(--font-scale)); } .miniplayer-sub.is-error { color: var(--err); } .miniplayer-controls { display: flex; align-items: center; gap: var(--s1); } .miniplayer-play { width: 44px; min-height: 44px; border-radius: 50%; } .miniplayer-time { color: var(--text-muted); font-size: calc(13px * var(--font-scale)); white-space: nowrap; } .person-head { display: flex; gap: var(--s5); padding: var(--s5); } .person-photo { display: grid; place-items: center; flex: none; width: 148px; height: 148px; overflow: hidden; border-radius: var(--radius-lg); background: var(--bg-sunken); color: var(--text-faint); } .person-photo img { width: 100%; height: 100%; object-fit: cover; } .person-info { display: flex; flex-direction: column; gap: var(--s2); min-width: 0; } .provider-tile { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s4); } .provider-tile-head { display: flex; align-items: center; gap: var(--s3); min-width: 0; } .provider-logo { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 12px; background: hsl(var(--tag-hue, 220) 40% var(--tag-bg-l)); color: hsl(var(--tag-hue, 220) var(--tag-s) var(--tag-l)); font-size: calc(19px * var(--font-scale)); font-weight: 800; } .provider-logo-lg { width: 56px; height: 56px; font-size: calc(24px * var(--font-scale)); } .provider-logo-sm { width: 34px; height: 34px; border-radius: 9px; font-size: calc(15px * var(--font-scale)); } .provider-desc { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; } .cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: var(--s3); } .cat-tile { position: relative; display: flex; align-items: flex-end; aspect-ratio: 16 / 10; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); background: linear-gradient(135deg, var(--surface-2), var(--surface-3)); color: #fff; } .cat-tile:hover { border-color: var(--accent); text-decoration: none; } .cat-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .cat-tile-label { position: relative; display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2); width: 100%; padding: var(--s5) var(--s3) var(--s2); background: linear-gradient(transparent, rgba(5, 7, 10, 0.88)); font-weight: 600; font-size: calc(14px * var(--font-scale)); } .cat-tile-label .muted { color: rgba(255, 255, 255, 0.7); } /* ------------------------------------------------------------------------------ 8 admin */ .actions-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--s2); } .actions-grid .btn { justify-content: flex-start; padding-top: var(--s2); padding-bottom: var(--s2); white-space: normal; text-align: left; } .loglist-row { display: flex; flex-direction: column; gap: 2px; padding: var(--s3) var(--s4); border-bottom: 1px solid var(--border); } .loglist-row:last-child { border-bottom: 0; } .loglist-msg { color: var(--err); font: calc(13px * var(--font-scale))/1.45 var(--mono); overflow-wrap: anywhere; } .settings { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--s5); align-items: start; padding-bottom: 80px; } .settings-nav { position: sticky; top: calc(var(--topbar-h) + var(--s4)); display: flex; flex-direction: column; gap: 2px; } .settings-body { display: flex; flex-direction: column; gap: var(--s4); min-width: 0; } .setting { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 380px); gap: var(--s3) var(--s5); align-items: start; padding: var(--s4); border-bottom: 1px solid var(--border); border-left: 3px solid transparent; } .setting:last-child { border-bottom: 0; } .setting.is-dirty { border-left-color: var(--accent); background: var(--accent-soft); } .setting-label { font-weight: 600; } .setting-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-top: 4px; color: var(--text-faint); font-size: calc(12px * var(--font-scale)); overflow-wrap: anywhere; } .setting-control { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; } .setting-control .fieldinput { width: 100%; } .setting.is-bool .setting-control { align-items: flex-end; } .setting.is-bool .fieldinput { width: auto; } .savebar { position: fixed; right: var(--s4); bottom: var(--s4); left: var(--s4); z-index: 96; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); border: 1px solid var(--accent); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-2); animation: pop 0.18s var(--ease); } .app.has-mini .savebar { bottom: calc(var(--mini-h) + var(--s4)); } .cat-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: 6px var(--s3) 6px 0; border-bottom: 1px solid var(--border); } .cat-row:last-child { border-bottom: 0; } .cat-row:hover { background: var(--surface-2); } .cat-row.is-off .cat-row-main { opacity: 0.5; } .cat-row-main { display: flex; align-items: center; flex: 1 1 auto; gap: var(--s3); min-width: 0; min-height: var(--hit); } .cat-row-text { display: flex; flex-direction: column; } .cat-row-name { font-weight: 600; } .cat-row-actions { display: flex; align-items: center; flex: none; gap: 2px; } .cat-row-actions .toggle { margin-right: var(--s2); } .worker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: var(--s3); padding: var(--s4); } .worker { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s4); border: 1px solid var(--border); border-left: 4px solid var(--text-faint); border-radius: var(--radius); background: var(--bg-sunken); } .worker.is-idle { border-left-color: var(--ok); } .worker.is-busy, .worker.is-starting { border-left-color: var(--info); } .worker.is-stopping { border-left-color: var(--warn); } .worker.is-crashed { border-left-color: var(--err); } .worker-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); } .worker-actions { display: flex; gap: var(--s2); margin-top: auto; } .queue-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); } .queue-pill { display: inline-flex; align-items: center; gap: var(--s2); padding: 4px var(--s3); border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface); } .logview { font: calc(12.5px * var(--font-scale))/1.5 var(--mono); } .logrow { padding: 5px var(--s4); border-bottom: 1px solid var(--border); border-left: 3px solid transparent; } .logrow:last-child { border-bottom: 0; } .logrow.is-live { animation: flash 1.6s var(--ease); } .logrow-main { display: flex; align-items: baseline; gap: var(--s3); min-width: 0; } .logrow-ts { flex: none; color: var(--text-faint); } .logrow-level { flex: none; width: 58px; font-weight: 700; } .logrow-module { flex: none; max-width: 130px; overflow: hidden; color: hsl(var(--tag-hue, 220) var(--tag-s) var(--tag-l)); text-overflow: ellipsis; white-space: nowrap; } .logrow-msg { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .logrow-msg.is-open { overflow: visible; white-space: pre-wrap; overflow-wrap: anywhere; } .logrow-more { flex: none; align-self: center; min-height: 26px; padding: 0 6px; } .logrow-tags { display: flex; flex-wrap: wrap; gap: 4px; margin: 2px 0 2px calc(58px + var(--s3)); } td .logrow-tags { margin: 0; } .logtag { display: inline-flex; align-items: center; gap: 4px; padding: 0 7px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface-2); color: var(--text-muted); font: calc(11.5px * var(--font-scale))/1.7 var(--mono); } button.logtag:hover { border-color: var(--accent); color: var(--accent-strong); } .logtag.is-static { border-style: dashed; } .lvl-debug .logrow-level { color: var(--text-faint); } .lvl-info .logrow-level { color: var(--info); } .lvl-warning { border-left-color: var(--warn); } .lvl-warning .logrow-level { color: var(--warn); } .lvl-error, .lvl-critical { border-left-color: var(--err); background: color-mix(in srgb, var(--err) 6%, transparent); } .lvl-error .logrow-level, .lvl-critical .logrow-level { color: var(--err); } .check-state { width: 44px; } .check-title { min-width: 250px; } .check-state.is-ok { color: var(--ok); } .check-state.is-warn { color: var(--warn); } .check-state.is-fail { color: var(--err); } .sample-list { margin-top: var(--s2); font-size: calc(13.5px * var(--font-scale)); } /* ------------------------------------------------------------------------------ responsive */ @media (max-width: 1440px) { .media-layout { grid-template-columns: minmax(0, 1fr); } .media-layout > .media-main { width: 100%; max-width: 1280px; margin: 0 auto; } .media-side { width: 100%; max-width: 1280px; margin: 0 auto; } .media-side .media-grid.is-list { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); } } @media (max-width: 1180px) { .split { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 960px) { .settings { grid-template-columns: minmax(0, 1fr); } .settings-nav { position: static; flex-direction: row; gap: var(--s1); overflow-x: auto; padding-bottom: var(--s1); } .settings-nav .side-link { width: auto; flex: none; border: 1px solid var(--border); white-space: nowrap; } } @media (max-width: 720px) { :root { --topbar-h: 56px; } body { font-size: calc(15px * var(--font-scale)); } .hide-sm { display: none !important; } .page { gap: var(--s3); padding: var(--s4) var(--s3); } .page-title { font-size: calc(20px * var(--font-scale)); } .topbar { gap: var(--s2); padding: 0 var(--s2); } .brand-name, .topsearch-kbd { display: none; } .media-grid, .media-grid.is-dense { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4) var(--s3); } .media-grid.is-list { grid-template-columns: minmax(0, 1fr); } /* one swipeable row instead of a tall stack of chips */ .provider-strip { flex-wrap: nowrap; margin: 0 calc(-1 * var(--s3)); padding: 2px var(--s3); overflow-x: auto; scrollbar-width: none; } .provider-strip::-webkit-scrollbar { display: none; } .pchip { flex: none; } .mcard-title { font-size: calc(14px * var(--font-scale)); } .filterbar-toggle { display: inline-flex; width: 100%; justify-content: flex-start; } .filterbar-toggle .icon:last-child { margin-left: auto; } .filterbar-body { display: none; margin-top: var(--s3); padding: var(--s3); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); } .filterbar.is-open .filterbar-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .filter, .filter-wide { min-width: 0; } .filter-wide, .filter-range, .filter-tokens, .filter-reset { grid-column: 1 / -1; } .filter-tokens { max-width: none; } .searchbox { padding-left: var(--s3); } .searchbox .btn { padding: 0 var(--s3); } .stat-wide { grid-column: auto; } .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .setting { grid-template-columns: minmax(0, 1fr); } .setting.is-bool { grid-template-columns: minmax(0, 1fr) auto; } .audio-stage { width: calc(100% + 2 * var(--s3)); margin: calc(-1 * var(--s4)) calc(-1 * var(--s3)) 0; border-radius: 0; } .person-head { flex-direction: column; align-items: center; padding: var(--s4); text-align: center; } .person-info { align-items: center; } .media-title { font-size: calc(19px * var(--font-scale)); } .player-wrap { width: calc(100% + 2 * var(--s3)); margin: calc(-1 * var(--s4)) calc(-1 * var(--s3)) 0; border-radius: 0; } .table th, .table td { padding: 9px var(--s3); } .cat-row { flex-wrap: wrap; } .cat-row-actions { margin-left: auto; } .modal-backdrop { align-items: flex-end; padding: 0; } .modal { max-width: none; max-height: 92vh; max-height: 92dvh; border-width: 1px 0 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0; animation-name: slide-up; } .modal.drawer { max-height: none; border-radius: 0; } .modal-body { padding: var(--s4); } .modal-head { padding-left: var(--s4); } .modal-foot { padding-left: var(--s4); padding-right: var(--s4); } .toasts { right: var(--s3); left: var(--s3); width: auto; } .logrow-main { flex-wrap: wrap; gap: 2px var(--s2); } .logrow-msg { flex-basis: 100%; } .logrow-tags { margin-left: 0; } .miniplayer { gap: var(--s2); padding-left: var(--s3); padding-right: var(--s2); } } @media (max-width: 330px) { .media-grid, .media-grid.is-dense { grid-template-columns: minmax(0, 1fr); } } /* ------------------------------------------------------------------------------ motion */ @keyframes spin { to { transform: rotate(360deg); } } @keyframes shimmer { to { transform: translateX(100%); } } @keyframes indeterminate { 0% { left: -40%; } 100% { left: 100%; } } @keyframes pulse { 50% { opacity: 0.45; } } @keyframes fade { from { opacity: 0; } } @keyframes pop { from { opacity: 0; transform: translateY(6px) scale(0.985); } } @keyframes slide-in { from { transform: translateX(40px); opacity: 0; } } @keyframes slide-up { from { transform: translateY(40px); opacity: 0; } } @keyframes flash { from { background: var(--accent-soft); } } @keyframes token-flash { 0%, 60% { border-color: var(--warn); box-shadow: 0 0 0 3px var(--warn-soft); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* Administration -> Appearance -> animations off */ :root[data-motion="off"] *, :root[data-motion="off"] *::before, :root[data-motion="off"] *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } :root[data-badges="off"] .mcard .ptag { display: none; } /* ------------------------------------------------------------------ thumbnail strip: frames are seek targets */ .thumbstrip-item { position: relative; flex: 0 0 auto; padding: 0; border: 2px solid transparent; border-radius: calc(var(--radius) * 0.6); background: none; overflow: hidden; cursor: pointer; line-height: 0; scroll-snap-align: start; } .thumbstrip-item:disabled { cursor: default; } .thumbstrip-item img { display: block; border-radius: 0; } .thumbstrip-item:not(:disabled):hover, .thumbstrip-item:focus-visible { border-color: var(--accent); outline: none; } .thumbstrip-item.is-current { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent); } .thumbstrip-time { position: absolute; right: 4px; bottom: 4px; padding: 1px 5px; border-radius: 4px; font-size: 0.7rem; line-height: 1.5; color: #fff; background: rgba(0, 0, 0, 0.72); } /* ------------------------------------------------------------------ loop tool */ .looptool-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .looptool-head .card-title { display: inline-flex; align-items: center; gap: 8px; margin-right: auto; } .looptool-saved { font-size: 0.8rem; color: var(--text-muted); } .looptool-hint { margin: 0; font-size: 0.85rem; } .looptool-bar { position: relative; height: 28px; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--border); cursor: pointer; overflow: hidden; } .looptool-range, .looptool-draft { position: absolute; top: 3px; bottom: 3px; min-width: 3px; border-radius: 4px; background: color-mix(in srgb, var(--accent) 55%, transparent); } .looptool-range.is-off { background: color-mix(in srgb, var(--text-muted) 35%, transparent); } .looptool-range.is-current { background: var(--accent); } .looptool-draft { background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--accent) 45%, transparent) 0 6px, transparent 6px 12px); border: 1px dashed var(--accent); } .looptool-head-pos { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--text); pointer-events: none; } .looptool-mark { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .looptool-mark kbd, .looptool-at { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.8em; opacity: 0.8; } .looptool-mark kbd { padding: 0 5px; border: 1px solid currentColor; border-radius: 4px; } .looptool-now { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--text-muted); } .looptool-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .looptool-item { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 8px; border: 1px solid var(--border); border-radius: calc(var(--radius) * 0.7); } .looptool-item.is-current { border-color: var(--accent); } .looptool-item.is-off { opacity: 0.6; } .looptool-check input { width: 18px; height: 18px; } .looptool-label { flex: 1 1 140px; min-width: 110px; } .looptool-time { display: inline-flex; align-items: center; gap: 2px; } .looptool-time .input { width: 7.2ch; min-width: 78px; text-align: center; font-variant-numeric: tabular-nums; padding-inline: 4px; } .looptool-len { min-width: 6ch; text-align: right; color: var(--text-muted); font-variant-numeric: tabular-nums; } .looptool-order { display: inline-flex; gap: 2px; margin-left: auto; } .looptool-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .looptool-foot .btn-ghost { margin-left: auto; } /* ------------------------------------------------------------------ playlists */ .picker-item { margin: 0 0 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .picker-list { list-style: none; margin: 8px 0; padding: 0; max-height: 46vh; overflow: auto; display: grid; gap: 2px; } .picker-row { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px 8px; border-radius: calc(var(--radius) * 0.6); cursor: pointer; } .picker-row:hover { background: var(--surface-2); } .picker-row.is-busy { opacity: 0.6; } .picker-row input { width: 18px; height: 18px; flex: 0 0 auto; } .picker-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .picker-meta { display: inline-flex; align-items: center; gap: 4px; font-size: 0.8rem; color: var(--text-muted); white-space: nowrap; } .picker-new { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); } .picker-help { margin: 0; font-size: 0.85rem; } .picker-actions { display: flex; justify-content: flex-end; gap: 8px; } .picker-create { width: 100%; justify-content: center; margin-top: 8px; } .plgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 16px; margin-top: 16px; } .plcard { display: flex; flex-direction: column; overflow: hidden; color: inherit; text-decoration: none; } .plcard:hover .plcard-title { color: var(--accent-text, var(--accent)); } .plcard-cover { display: grid; aspect-ratio: 16 / 9; background: var(--surface-2); place-items: center; color: var(--text-muted); overflow: hidden; } .plcard-cover img { width: 100%; height: 100%; object-fit: cover; display: block; } .plcard-cover.n2, .plcard-cover.n3, .plcard-cover.n4 { grid-template-columns: 1fr 1fr; gap: 2px; place-items: stretch; } .plcard-cover.n3 img:first-child { grid-row: span 2; } .plcard-cover.n4 { grid-template-rows: 1fr 1fr; } .plcard-body { display: grid; gap: 4px; padding: 10px 12px 12px; } .plcard-title { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .plcard-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 0.82rem; color: var(--text-muted); margin: 0; } .plcard-meta .badge { display: inline-flex; align-items: center; gap: 4px; } .plcard-owner { font-size: 0.8rem; } .plhead { display: grid; grid-template-columns: minmax(180px, 300px) 1fr; gap: 20px; padding: 16px; margin-bottom: 16px; } .plhead-cover { border-radius: calc(var(--radius) * 0.8); } .plhead-body { display: grid; gap: 10px; align-content: start; min-width: 0; } .plhead-desc { margin: 0; white-space: pre-line; } .plhead-rating { display: flex; align-items: center; gap: 8px; } .plhead-actions { display: flex; gap: 8px; flex-wrap: wrap; } .stars { display: inline-flex; } .star { min-width: 32px; min-height: 40px; padding: 0; border: 0; background: none; font-size: 1.5rem; line-height: 1; color: var(--border); cursor: pointer; } .star:disabled { cursor: default; } .star.is-on { color: #f5b942; } .star.is-mine { color: var(--accent); } .pllist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .plrow { display: grid; grid-template-columns: 2.2ch 160px 1fr auto; align-items: center; gap: 12px; padding: 8px 12px; } .plrow-n { text-align: right; color: var(--text-muted); font-variant-numeric: tabular-nums; } .plrow-thumb { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: calc(var(--radius) * 0.6); overflow: hidden; background: var(--surface-2); } .plrow-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } html[data-played="dim"] .plrow.is-played .plrow-thumb img { opacity: 0.55; filter: saturate(0.55); } .plrow-main { display: grid; gap: 4px; min-width: 0; } .plrow-title { font-weight: 600; color: inherit; text-decoration: none; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .plrow-title:hover { color: var(--accent-text, var(--accent)); } .plrow-sub { font-size: 0.82rem; } .plrow-note { max-width: 520px; font-size: 0.85rem; } .plrow-noteview { font-size: 0.85rem; font-style: italic; color: var(--text-muted); } .plrow-actions { display: inline-flex; gap: 2px; } @media (max-width: 720px) { .plhead { grid-template-columns: 1fr; } .plrow { grid-template-columns: 2ch 104px 1fr; } .plrow-actions { grid-column: 2 / -1; justify-content: flex-end; } .looptool-order { margin-left: 0; } } /* ---------------------------------------------------------------- unified person page (/people//) */ .people-head { display: flex; align-items: center; gap: var(--s5); padding: var(--s5); margin-bottom: var(--s5); } .people-head > .avatar-img { flex: none; border-radius: 50%; } .people-head-body { display: flex; flex-direction: column; gap: var(--s2); min-width: 0; } .people-head-body .page-title { margin: 0; overflow-wrap: anywhere; } .people-links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); } .people-toolbar { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s4); } .people-toolbar .section-title { flex: 1; margin: 0; } .people-toolbar .select { width: auto; min-width: 170px; } @media (max-width: 640px) { .people-head { flex-direction: column; align-items: flex-start; gap: var(--s3); padding: var(--s4); } .people-toolbar { flex-wrap: wrap; } .people-toolbar .section-title { flex-basis: 100%; } } /* ---------------------------------------------------------------- playlists: public index, comments, statistics, delegates */ .plindex-tools { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; } .plindex-tools .input { flex: 1 1 260px; } .plindex-tools .select { flex: 0 1 230px; width: auto; } .plsection { margin-top: 16px; } .plsection > .section-title { margin: 0 0 12px; } .comment-form { display: grid; gap: 6px; margin-bottom: 16px; } .comment-form.is-reply { margin: 4px 0 8px 48px; } .comment-form textarea { resize: vertical; min-height: 64px; } .comment-form-foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; } .comment-form-foot > .muted { margin-right: auto; } .comment-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; max-width: 860px; } .comment-thread { display: grid; gap: 8px; } .comment { display: grid; grid-template-columns: 36px 1fr; gap: 12px; } .comment.is-reply { margin-left: 48px; } .comment-avatar { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--surface-2); color: var(--text-muted); font-weight: 650; } .comment.is-reply .comment-avatar { width: 28px; height: 28px; font-size: 0.8rem; } .comment.is-reply { grid-template-columns: 28px 1fr; } .comment-main { min-width: 0; } .comment-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 0; font-size: 0.85rem; color: var(--text-muted); } .comment-head strong { color: var(--text); font-size: 0.92rem; } .comment-body { margin: 2px 0 0; white-space: pre-line; overflow-wrap: anywhere; } .comment-actions { display: flex; gap: 14px; margin: 4px 0 0; } .link-btn { padding: 4px 0; border: 0; background: none; color: var(--text-muted); font: inherit; font-size: 0.82rem; font-weight: 600; cursor: pointer; } .link-btn:hover, .link-btn:focus-visible { color: var(--accent-text, var(--accent)); text-decoration: underline; } .link-btn.is-danger:hover, .link-btn.is-danger:focus-visible { color: var(--err); } .plstats-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; } .plstats-head .section-title { margin: 0; } .stat-tiles { list-style: none; margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; transition: opacity 0.15s; } .stat-tiles.is-loading { opacity: 0.55; } .stat-tile { display: grid; gap: 2px; padding: 12px 14px; } .stat-label { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); } .stat-value { font-size: 1.6rem; line-height: 1.15; font-variant-numeric: tabular-nums; } .plchart { position: relative; margin: 0 0 16px; padding: 12px 14px 8px; } .plchart-plot { position: relative; min-width: 0; } .plchart svg { display: block; max-width: 100%; overflow: visible; } .plchart-legend { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 6px; font-size: 0.85rem; } .plchart-legend span { display: inline-flex; align-items: center; gap: 6px; } .swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; } .swatch-views { background: var(--accent); } .swatch-plays { background: var(--accent-2); } .plchart-grid line { stroke: var(--border); stroke-width: 1; vector-effect: non-scaling-stroke; } .plchart-grid text { fill: var(--text-muted); font-size: 11px; } .plchart-area { fill: color-mix(in srgb, var(--accent) 18%, transparent); stroke: none; } .plchart-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; } .plchart-line.is-views, .plchart-dot.is-views { stroke: var(--accent); } .plchart-line.is-plays, .plchart-dot.is-plays { stroke: var(--accent-2); } .plchart-dot { fill: var(--surface); stroke-width: 2; vector-effect: non-scaling-stroke; } .plchart-empty { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; pointer-events: none; } .plstats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 12px; } .plstats-box { padding: 14px; min-width: 0; } .plstats-title { margin: 0 0 10px; font-size: 1rem; } .plstats-top { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; counter-reset: top; } .plstats-top li { display: grid; grid-template-columns: 1.6em minmax(0, 1fr) auto; align-items: baseline; gap: 8px; counter-increment: top; } .plstats-top li::before { content: counter(top) "."; color: var(--text-muted); font-variant-numeric: tabular-nums; text-align: right; } .plstats-top li > a { color: inherit; } .plstats-top li > span { font-size: 0.85rem; } .bar-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .bar-rows li { display: grid; grid-template-columns: minmax(3.2em, 9em) 1fr auto; align-items: center; gap: 10px; font-size: 0.88rem; } .bar-track { height: 8px; border-radius: 4px; background: var(--surface-2); overflow: hidden; } .bar-fill { display: block; height: 100%; border-radius: 4px; background: var(--accent); } .bar-fill.is-rating { background: #f5b942; } .bar-count { color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; } .delegate-lookup { position: relative; display: grid; gap: 6px; } .delegate-options { position: absolute; z-index: 5; top: 100%; left: 0; right: 0; margin: 4px 0 0; padding: 4px; list-style: none; max-height: 240px; overflow-y: auto; } .delegate-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .delegate-row { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 10px; padding: 6px 8px; border: 1px solid var(--border); border-radius: calc(var(--radius) * 0.6); } .delegate-row .select { width: auto; } .delegate-roles { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; margin: 0; } .delegate-roles dt { font-weight: 650; } .delegate-roles dd { margin: 0; } @media (max-width: 640px) { .comment-form.is-reply, .comment.is-reply { margin-left: 24px; } .delegate-row { grid-template-columns: auto 1fr auto; } .delegate-row .select { grid-column: 2 / 3; grid-row: 2; } } .table td > .select { min-width: 11em; }