/** * RTSP multiview — dark by design. A camera wall is viewed for long stretches and * video reads better against dark chrome, so this commits to one scheme rather than * following prefers-color-scheme. */ :root { /* Surfaces */ --c-bg: #0c0f14; --c-surface: #141922; --c-surface-raised: #1c222d; --c-border: #262e3b; --c-border-strong: #36415380; /* Text */ --c-text: #e6ebf2; --c-text-muted: #8e9bb0; --c-text-faint: #5d6a7e; /* Accent + state */ --c-accent: #3d8bfd; --c-accent-hover: #5b9dff; --c-ok: #2fbf71; --c-warn: #e8a33d; --c-error: #e05260; --c-neutral: #5d6a7e; --c-codec: #a855f7; --c-ai: #f97316; /* AI-event brand orange — distinct from --c-warn (motion). (Was a self-reference `var(--c-ai)` = invalid → any fill:var(--c-ai) fell back to black; that's why the speed label rendered black.) */ --c-derived: #14b8a6; /* OUR-own analytics events (dwell / co-occurrence) — teal, distinct from the camera's --c-ai orange so the two layers never blur. */ --c-data: #e6a817; /* external DATA records (POS receipts, ALPR plates, badge swipes): gold, in BOTH places they surface — the playback timeline marks and the live-wall ticker. Was only ever a fallback literal here. */ /* Detection-class palette — ONE source of truth, shared by timeline bars (.playback__tl-obj--*), live SVG boxes (.tile__box--*) and overlay-editor icons (.ov-item--*). */ --c-obj-unknown: #22c55e; --c-obj-person: #38bdf8; --c-obj-vehicle: #f59e0b; --c-obj-bike: #a78bfa; --c-obj-face: #34d399; --c-on-accent: #fff; /* text/glyph on a saturated color fill */ --c-video-bg: #000; /* letterbox behind video/frames */ /* Rhythm */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --radius-sm: 4px; --radius: 8px; --radius-lg: 12px; --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* Live-wall camera panel width. THREE rules depend on it (the panel itself, the collapse offset, and the handle's resting position) — they must never drift apart, so they all read this. See .sidebar for why the panel must also be told it may shrink. */ --sidebar-w: 13.5rem; --fs-xs: 0.6875rem; --fs-sm: 0.8125rem; --fs-base: 0.9375rem; --fs-lg: 1.125rem; --fs-xl: 1.375rem; --shadow: 0 4px 16px rgb(0 0 0 / 40%); --transition: 140ms ease; } /* ── Theme ────────────────────────────────────────────────────────────────── The app is dark by design; :root above IS the dark theme. LIGHT mode overrides only the STRUCTURAL tokens (surfaces, text, borders, shadow, accent contrast) — brand/state hues, the detection palette, and the video-fixed tokens (--c-video-bg, --c-on-accent, the checkerboard) stay put because video is always dark. The resolved scheme is stamped on by the head script (follows the OS until the user picks an override in Settings › System). A subtree can force dark via [data-theme="dark"]: the Live wall uses it so the video keeps its dark backdrop while the surrounding chrome goes light. */ [data-theme="light"] { --c-bg: #eceff4; --c-surface: #ffffff; --c-surface-raised: #f3f6fa; --c-border: #dbe1ea; --c-border-strong: #a7b2c180; --c-text: #15202e; --c-text-muted: #56637a; --c-text-faint: #8a96a8; --c-accent: #2f7ae6; /* a touch deeper than the dark accent for contrast on white */ --c-accent-hover: #1f66d0; /* hover DARKENS on light, not lightens */ --shadow: 0 6px 20px rgb(20 32 54 / 12%); } /* Dark island: re-assert the dark STRUCTURAL tokens on any subtree tagged data-theme="dark", so the video wall stays dark inside a light app. Deliberately does NOT pin the accent — so the chosen theme's accent still flows onto the wall UI (amber wall reads amber, not blue). Used on the Live #grid. */ [data-theme="dark"] { --c-bg: #0c0f14; --c-surface: #141922; --c-surface-raised: #1c222d; --c-border: #262e3b; --c-border-strong: #36415380; --c-text: #e6ebf2; --c-text-muted: #8e9bb0; --c-text-faint: #5d6a7e; --shadow: 0 4px 16px rgb(0 0 0 / 40%); } /* ── Colour themes ────────────────────────────────────────────────────────── Each theme overrides only the ~11 STRUCTURAL tokens (surfaces / text / borders / accent / shadow); brand, state and detection hues stay put (video is always dark). `data-theme` = the theme NAME; `data-mode` (light|dark, stamped by the head script) drives the binary logo/icon swaps further down. Two themes (aurora / dawn) add a fixed background gradient for a bit of flair. All picked in Settings › System and persisted client-side (see theme.js / head.php). */ /* — Dark flavours (light text on a tinted-dark ground) — */ [data-theme="amber"] { --c-bg: #14110b; --c-surface: #1e1a12; --c-surface-raised: #2a2416; --c-border: #3a3320; --c-border-strong: #5c503080; --c-text: #f2ece0; --c-text-muted: #b6a888; --c-text-faint: #7d7052; --c-accent: #f59e0b; --c-accent-hover: #fbbf24; } [data-theme="forest"] { --c-bg: #0a120d; --c-surface: #111c15; --c-surface-raised: #16261c; --c-border: #23392c; --c-border-strong: #3d5e4a80; --c-text: #e4efe8; --c-text-muted: #8fb0a0; --c-text-faint: #5d7a6b; --c-accent: #34d399; --c-accent-hover: #6ee7b7; } [data-theme="teal"] { --c-bg: #081416; --c-surface: #0f2022; --c-surface-raised: #142b2d; --c-border: #204043; --c-border-strong: #35696d80; --c-text: #e0f0f0; --c-text-muted: #86b0b2; --c-text-faint: #567a7c; --c-accent: #2dd4bf; --c-accent-hover: #5eead4; } [data-theme="cherry"] { --c-bg: #140a0d; --c-surface: #1e1116; --c-surface-raised: #2a171e; --c-border: #3d222b; --c-border-strong: #663a4880; --c-text: #f2e4e8; --c-text-muted: #b892a0; --c-text-faint: #7d5563; --c-accent: #f43f5e; --c-accent-hover: #fb7185; } /* — Light flavour (dark text on a warm-light ground) — */ [data-theme="sand"] { --c-bg: #efe7d8; --c-surface: #fbf6ec; --c-surface-raised: #f4ecdd; --c-border: #ddd0ba; --c-border-strong: #b3a17f80; --c-text: #33291a; --c-text-muted: #6b5d47; --c-text-faint: #9a8b70; --c-accent: #b45309; --c-accent-hover: #92400e; --shadow: 0 6px 20px rgb(60 45 20 / 12%); } /* — Wow: gradient themes (aurora = dark, dawn = light) — */ [data-theme="aurora"] { --c-bg: #0a0a16; --c-surface: #15162b; --c-surface-raised: #1e2038; --c-border: #2a2c4a; --c-border-strong: #45487a80; --c-text: #e8e9f5; --c-text-muted: #a0a2c4; --c-text-faint: #6b6d92; --c-accent: #818cf8; --c-accent-hover: #a5b4fc; } [data-theme="dawn"] { --c-bg: #f6eef0; --c-surface: #ffffff; --c-surface-raised: #fbf3f5; --c-border: #ecdde1; --c-border-strong: #cbb0b880; --c-text: #2b2530; --c-text-muted: #6a5f6e; --c-text-faint: #9d8f9d; --c-accent: #db2777; --c-accent-hover: #be185d; --shadow: 0 6px 20px rgb(80 40 60 / 12%); } /* Fixed background gradients — shown once .nvr__content goes transparent below (the video wall keeps its own dark island, so it's the surrounding chrome that gets the glow). */ [data-theme="aurora"] body { background: radial-gradient(1200px 620px at 12% -12%, rgb(67 56 202 / 42%), transparent 60%), radial-gradient(1000px 700px at 112% 6%, rgb(14 165 233 / 30%), transparent 55%), radial-gradient(1000px 900px at 55% 118%, rgb(124 58 237 / 32%), transparent 55%), var(--c-bg); background-attachment: fixed; } [data-theme="dawn"] body { background: radial-gradient(1100px 600px at 8% -12%, rgb(251 207 232 / 75%), transparent 60%), radial-gradient(1000px 700px at 112% -4%, rgb(199 210 254 / 65%), transparent 55%), radial-gradient(1000px 820px at 62% 120%, rgb(186 230 253 / 55%), transparent 55%), var(--c-bg); background-attachment: fixed; } /* Let the body gradient show through the main content pane on every fancy theme (Settings/Playback). */ :root[data-fancy] .nvr__content { background-color: transparent; } /* ── Expressive gradient themes (pronounced personality) ───────────────────── Holographic + Opal float a blurred conic gradient behind the chrome and spin it with a TRANSFORM (GPU-composited → no per-frame repaint, cheap even on the J1900); Synthwave is a static neon sunset. All still keep the ~11 structural tokens dark/light-correct so text stays readable on opaque panels. */ [data-theme="holographic"] { --c-bg: #0a0812; --c-surface: #17121f; --c-surface-raised: #221a33; --c-border: #302544; --c-border-strong: #4c3a6e80; --c-text: #f1ecfb; --c-text-muted: #b3a6d0; --c-text-faint: #7c6e9c; --c-accent: #ff6ec4; --c-accent-hover: #ff92d6; } [data-theme="synthwave"] { --c-bg: #100a1e; --c-surface: #1b1030; --c-surface-raised: #271642; --c-border: #392258; --c-border-strong: #5a3a8880; --c-text: #f6ecff; --c-text-muted: #c2a9e2; --c-text-faint: #8a72ac; --c-accent: #ff2e97; --c-accent-hover: #ff6ec4; } [data-theme="opal"] { --c-bg: #f3eff8; --c-surface: #ffffff; --c-surface-raised: #f9f4fc; --c-border: #e8dcf0; --c-border-strong: #c9b0d880; --c-text: #2a2433; --c-text-muted: #6a5f75; --c-text-faint: #9d8fa8; --c-accent: #a855f7; --c-accent-hover: #9333ea; --shadow: 0 6px 20px rgb(60 40 90 / 14%); } /* Rotating iridescent field (behind everything, z-index:-1, blurred into soft clouds). */ [data-theme="holographic"] body::before, [data-theme="opal"] body::before { content: ""; position: fixed; inset: -60%; z-index: -1; pointer-events: none; animation: holo-spin 44s linear infinite; } [data-theme="holographic"] body::before { background: conic-gradient(from 0deg, #3a1c71, #d76d77, #00c9ff, #56ffa0, #ffd86f, #ff6ec4, #7873f5, #3a1c71); filter: blur(60px) saturate(1.15); opacity: 0.55; } [data-theme="opal"] body::before { background: conic-gradient(from 0deg, #ffd6ec, #d6e4ff, #d0f7ee, #efe0ff, #fff0d6, #ffd6ec); filter: blur(60px) saturate(1.2); opacity: 0.9; } @keyframes holo-spin { to { transform: rotate(1turn); } } @media (prefers-reduced-motion: reduce) { [data-theme="holographic"] body::before, [data-theme="opal"] body::before { animation: none; } } /* Synthwave — a static neon sunset (hot-pink horizon + cyan/violet glows). */ [data-theme="synthwave"] body { background: radial-gradient(1200px 620px at 50% 128%, rgb(255 46 151 / 45%), transparent 60%), radial-gradient(900px 520px at 12% -12%, rgb(0 201 255 / 32%), transparent 55%), radial-gradient(820px 600px at 104% 18%, rgb(168 85 247 / 30%), transparent 55%), var(--c-bg); background-attachment: fixed; } /* — Nebula (deep-space clouds) & Molten (ember glow) — static rich gradients — */ [data-theme="nebula"] { --c-bg: #070512; --c-surface: #12102a; --c-surface-raised: #1c1838; --c-border: #2c2850; --c-border-strong: #4a3f7a80; --c-text: #ecebfa; --c-text-muted: #aaa6d2; --c-text-faint: #726ea0; --c-accent: #b388ff; --c-accent-hover: #cbb0ff; } [data-theme="molten"] { --c-bg: #140805; --c-surface: #1f0e08; --c-surface-raised: #2b140b; --c-border: #3d2015; --c-border-strong: #6a3a2080; --c-text: #fbeae0; --c-text-muted: #cf9f88; --c-text-faint: #966a55; --c-accent: #ff5722; --c-accent-hover: #ff7a45; } [data-theme="nebula"] body { background: radial-gradient(1000px 720px at 20% 14%, rgb(124 58 237 / 42%), transparent 55%), radial-gradient(920px 620px at 86% 24%, rgb(219 39 119 / 32%), transparent 55%), radial-gradient(1100px 820px at 58% 116%, rgb(37 99 235 / 34%), transparent 55%), var(--c-bg); background-attachment: fixed; } [data-theme="molten"] body { background: radial-gradient(1200px 720px at 50% 126%, rgb(255 87 34 / 52%), transparent 60%), radial-gradient(720px 520px at 18% 92%, rgb(234 88 12 / 40%), transparent 55%), radial-gradient(720px 520px at 84% 96%, rgb(220 38 38 / 38%), transparent 55%), var(--c-bg); background-attachment: fixed; } /* — Glass (glassmorphism): a vivid gradient behind FROSTED, translucent chrome panels — */ [data-theme="glass"] { --c-bg: #0c1220; --c-surface: #182236; --c-surface-raised: #22304a; --c-border: rgb(255 255 255 / 14%); --c-border-strong: rgb(255 255 255 / 26%); --c-text: #eaf1fb; --c-text-muted: #a6b6cc; --c-text-faint: #7085a0; --c-accent: #38bdf8; --c-accent-hover: #7dd3fc; --shadow: 0 8px 32px rgb(0 0 0 / 45%); } [data-theme="glass"] body { background: radial-gradient(900px 700px at 14% 8%, rgb(56 189 248 / 42%), transparent 55%), radial-gradient(900px 700px at 88% 18%, rgb(168 85 247 / 40%), transparent 55%), radial-gradient(1000px 820px at 60% 118%, rgb(236 72 153 / 36%), transparent 55%), var(--c-bg); background-attachment: fixed; } /* Frost the main chrome panels: translucent surface + backdrop blur, so the gradient reads THROUGH the UI (opt-in "fancy" theme — backdrop-filter is the one effect a weak GPU dislikes, fine on real HW). */ :root[data-fancy] .nav, :root[data-fancy] .livebar, :root[data-fancy] .sidebar, :root[data-fancy] .livebar__pop-menu, :root[data-fancy] .dialog, :root[data-fancy] .treact-modal, :root[data-fancy] .settings__menu, :root[data-fancy] .settings__body, :root[data-fancy] .playback__bar, :root[data-fancy] .playback__controls, :root[data-fancy] .playback__timeline { background-color: color-mix(in srgb, var(--c-surface) 62%, transparent); -webkit-backdrop-filter: blur(16px) saturate(135%); backdrop-filter: blur(16px) saturate(135%); } /* Overlays that sit ON the video (fisheye preset bar, PTZ pad) get the same rich fancy frost, but stay DELIBERATELY denser (78% vs 62%) so controls read against bright/busy footage — not an omission. */ :root[data-fancy] .tile__fisheye, :root[data-fancy] .tile__ptz { background-color: color-mix(in srgb, var(--c-surface) 78%, transparent); -webkit-backdrop-filter: blur(16px) saturate(135%); backdrop-filter: blur(16px) saturate(135%); } *, *::before, *::after { box-sizing: border-box; } body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background-color: var(--c-bg); color: var(--c-text); font-family: var(--font-ui); font-size: var(--fs-base); line-height: 1.5; -webkit-font-smoothing: antialiased; } .is-hidden { display: none !important; } /* ---------------------------------------------------------------- Top bar */ .topbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-3) var(--sp-5); background-color: var(--c-surface); border-bottom: 1px solid var(--c-border); } .topbar__identity { display: flex; flex-direction: column; gap: 2px; } .topbar__title { margin: 0; font-size: var(--fs-xl); font-weight: 600; letter-spacing: -0.01em; } .topbar__tagline { margin: 0; font-size: var(--fs-sm); color: var(--c-text-muted); } .topbar__controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-3); } /* ------------------------------------------------------------- Form atoms */ /* ── Scrollbars ─────────────────────────────────────────────────────────────── Themed, thin, and unobtrusive: the stock chrome is a bright slab against these dark surfaces and reads as a defect. Firefox takes the two standard properties; WebKit/Blink needs ::-webkit-*. The thumb is drawn with a transparent border + background-clip so it looks inset with breathing room instead of filling the whole gutter. Track stays transparent so it disappears until used. Applied on the root so every internal scroller inherits it; the few places that deliberately hide their scrollbar (rewind row, filter legend, icon rail) set scrollbar-width:none and still win. */ * { scrollbar-width: thin; scrollbar-color: var(--c-border-strong) transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background-color: var(--c-border-strong); border: 2px solid transparent; border-radius: 999px; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background-color: var(--c-text-faint); background-clip: padding-box; } ::-webkit-scrollbar-corner { background: transparent; } .field { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; } .field--inline { flex-direction: column; } .field--narrow { max-width: 11rem; } /* ── Field rows ─────────────────────────────────────────────────────────────── A line of fields that belong together (address + its ports, username + password). Wrapping keeps it honest when a translation runs long; below the mobile breakpoint each row becomes a stack so nothing is squeezed into an unusable width. */ .field-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--sp-3) var(--sp-4); } .field-row > .field { flex: 1 1 12rem; min-width: 0; } /* Ports are 5 digits at most — give them just enough and let the address take the remainder. */ .field-row > .field--port { flex: 0 1 7.5rem; } .field-row > .field--narrow { flex: 0 1 11rem; } /* A non-.field child of a row (the Enabled switch) still needs a basis, or it sits at flex:0 1 auto with min-width:auto — unable to shrink and unable to wrap, so it overflows the dialog. */ .field-row > .switch-field { flex: 0 0 auto; } /* Push a trailing control to the end of its row. It uses the STACKED switch (caption above, pill below), so it aligns with the neighbouring inputs by having the same shape — no magic offset. */ .field-row__end { margin-left: auto; } .field-row__end .field__label { white-space: nowrap; } /* Match an input's height so the pill sits where a field's input would. */ .switch-field__row { min-height: 2.25rem; } @media (max-width: 560px) { .field-row { flex-direction: column; gap: var(--sp-3); } .field-row > .field, .field-row > .field--port, .field-row > .field--narrow { flex: 1 1 auto; width: 100%; max-width: none; } .field-row__end { margin-left: 0; } } /* ── Switch field ───────────────────────────────────────────────────────────── The switch itself is the EXISTING .switch / .switch__input / .switch__slider component further down this file (used by the playback popover) — do not redefine it here; a second `.switch` rule simply overrode the first and produced garbage. This is only the wrapper that pairs one with its label and help text. */ .switch-field { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; } .switch-field__row { display: flex; align-items: center; gap: var(--sp-2); } .switch-field__label { font-size: var(--fs-sm); color: var(--c-text); cursor: pointer; } /* (i) beside a label: the long explanation lives in its tooltip. Muted until hovered/focused so a column of them doesn't compete with the controls they annotate. tabindex makes it keyboard- reachable, which is the only way :focus-visible can reveal the bubble. */ .field__info { display: inline-flex; align-items: center; color: var(--c-text-faint); cursor: help; vertical-align: -0.15em; transition: color var(--transition); } .field__info:hover, .field__info:focus-visible { color: var(--c-accent); } .field__info .ic { width: 0.95em; height: 0.95em; } /* Label + its (i) on one line above the control (.field itself is a flex column, so they need their own row box or they stack). */ .field__labelrow { display: flex; align-items: center; gap: var(--sp-1); min-width: 0; } /* Field glyph: same muted weight as the uppercase label it sits with, so the row reads as one unit. */ .field__icon { flex: 0 0 auto; width: 0.95em; height: 0.95em; color: var(--c-text-faint); } /* Section glyph in a camdetail__title — accent-coloured, since the heading is the anchor you scan for. */ .camdetail__icon { flex: 0 0 auto; width: 1em; height: 1em; color: var(--c-accent); } .field__labelrow .field__label { min-width: 0; } /* Help sits under the whole control, indented past the pill so it reads as belonging to it. */ .switch-field .field__help { margin-left: calc(2.4rem + var(--sp-2)); } /* The behaviour toggles at the foot of the General tab: one per line, help under each. */ .cam-form__opts { display: flex; flex-direction: column; gap: var(--sp-3); } .field--checkbox { flex-direction: row; align-items: center; gap: var(--sp-2); } .field__label { font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-text-faint); } .field__help { font-size: var(--fs-xs); color: var(--c-text-faint); } .input { padding: var(--sp-2) var(--sp-3); min-width: 0; background-color: var(--c-bg); color: var(--c-text); border: 1px solid var(--c-border); border-radius: var(--radius-sm); font-family: inherit; font-size: var(--fs-sm); transition: border-color var(--transition); } .input:focus-visible { outline: none; border-color: var(--c-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-accent) 25%, transparent); } .input--select { cursor: pointer; } /* ---------------------------------------------------------------- Buttons */ .btn { padding: var(--sp-2) var(--sp-4); background-color: var(--c-surface-raised); color: var(--c-text); border: 1px solid var(--c-border); border-radius: var(--radius-sm); font-family: inherit; font-size: var(--fs-sm); font-weight: 500; cursor: pointer; transition: background-color var(--transition), border-color var(--transition); } /* Compact square icon-only button (equal padding, sized glyph). */ .btn--icon { padding: var(--sp-2); line-height: 0; } .btn--icon svg { display: block; width: 18px; height: 18px; } .btn:hover { border-color: var(--c-border-strong); background-color: var(--c-border); } .btn:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; } .btn[disabled] { opacity: 0.5; cursor: progress; } .btn--primary { background-color: var(--c-accent); border-color: var(--c-accent); color: var(--c-on-accent); } .btn--primary:hover { background-color: var(--c-accent-hover); border-color: var(--c-accent-hover); } .btn--ghost { background-color: transparent; } .btn--danger { background-color: transparent; border-color: var(--c-error); color: var(--c-error); } .btn--danger:hover { background-color: var(--c-error); border-color: var(--c-error); color: var(--c-on-accent); } .btn--small { padding: var(--sp-1) var(--sp-3); font-size: var(--fs-xs); } /* ------------------------------------------------------------ Lang switch */ .lang-switch { display: inline-flex; border: 1px solid var(--c-border); border-radius: var(--radius-sm); overflow: hidden; } .lang-switch__btn { padding: var(--sp-2) var(--sp-3); background-color: transparent; color: var(--c-text-muted); border: 0; font-family: inherit; font-size: var(--fs-xs); font-weight: 700; cursor: pointer; transition: background-color var(--transition), color var(--transition); } .lang-switch__btn:hover { color: var(--c-text); } /* Inset ring so it stays visible on both the transparent and the accent-filled button. */ .lang-switch__btn:focus-visible { outline: 2px solid var(--c-text); outline-offset: -3px; color: var(--c-text); } .lang-switch__btn--active { background-color: var(--c-accent); color: var(--c-on-accent); } /* ------------------------------------------------------- Banner and toast */ .banner { padding: var(--sp-3) var(--sp-5); font-size: var(--fs-sm); border-bottom: 1px solid transparent; } .banner--warn { background-color: color-mix(in srgb, var(--c-warn) 12%, transparent); border-bottom-color: color-mix(in srgb, var(--c-warn) 35%, transparent); color: var(--c-warn); } .banner--danger { background-color: color-mix(in srgb, var(--c-error) 15%, transparent); border-bottom-color: color-mix(in srgb, var(--c-error) 45%, transparent); color: var(--c-error); font-weight: 600; } /* Toast lives TOP-centre (was bottom — it sat over the mobile livebar/toolbar). Glassy card with a left accent stripe; a springy entrance pop replays on every show (see toast() forcing reflow). */ .toast { position: fixed; top: 4rem; /* below the 52px top nav, and well clear of the bottom livebar */ left: 50%; translate: -50% 0; z-index: 60; padding: var(--sp-3) var(--sp-4); max-width: min(92vw, 30rem); background-color: color-mix(in srgb, var(--c-surface-raised) 90%, transparent); -webkit-backdrop-filter: blur(12px) saturate(130%); backdrop-filter: blur(12px) saturate(130%); border: 1px solid var(--c-border-strong); border-left: 3px solid var(--c-accent); border-radius: 0; /* squared on the regular themes; the fancy ring re-rounds it below */ box-shadow: var(--shadow); font-size: var(--fs-sm); } .toast--pop { animation: toast-in 360ms cubic-bezier(0.2, 1.15, 0.3, 1) both; } @keyframes toast-in { from { opacity: 0; translate: -50% -16px; scale: 0.95; } to { opacity: 1; translate: -50% 0; scale: 1; } } .toast--error { border-color: var(--c-error); border-left-color: var(--c-error); color: var(--c-error); } /* WOW themes: swap the flat border for a slowly-rotating gradient RING (masked so only the 1.5px edge paints) plus an accent glow — the toast gets the same iridescent treatment as the rest of the chrome. */ :root[data-fancy] .toast { border-color: transparent; border-left-color: transparent; border-radius: var(--radius-lg); box-shadow: 0 10px 40px color-mix(in srgb, var(--c-accent) 32%, transparent), var(--shadow); } /* A typed custom angle so it can be ANIMATED — this sweeps the conic gradient's start point around a STATIONARY border (a travelling highlight), instead of rotating the whole rectangular ring. On engines without @property the angle just stays put → a static gradient border, which is a fine fallback. */ @property --toast-angle { syntax: ""; inherits: false; initial-value: 0deg; } :root[data-fancy] .toast::before { content: ""; position: absolute; inset: -1.5px; z-index: -1; border-radius: inherit; padding: 1.5px; /* One bright band (~200°) fading to dim at the seam → a single highlight orbits as the angle animates. */ background: conic-gradient(from var(--toast-angle), color-mix(in srgb, var(--c-accent) 30%, transparent) 0deg, var(--c-accent) 150deg, color-mix(in srgb, var(--c-accent) 55%, #fff) 200deg, var(--c-accent-hover) 250deg, color-mix(in srgb, var(--c-accent) 30%, transparent) 360deg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: toast-ring 4s linear infinite; } :root[data-fancy] .toast--error { box-shadow: 0 10px 40px color-mix(in srgb, var(--c-error) 32%, transparent), var(--shadow); } :root[data-fancy] .toast--error::before { background: conic-gradient(from var(--toast-angle), color-mix(in srgb, var(--c-error) 30%, transparent) 0deg, var(--c-error) 150deg, color-mix(in srgb, var(--c-error) 55%, #fff) 200deg, var(--c-error) 250deg, color-mix(in srgb, var(--c-error) 30%, transparent) 360deg); } @keyframes toast-ring { to { --toast-angle: 360deg; } } @media (prefers-reduced-motion: reduce) { .toast--pop { animation: none; } :root[data-fancy] .toast::before { animation: none; } } /* ------------------------------------------------------------------- Grid */ .stage { flex: 1; padding: var(--sp-4) var(--sp-5); min-height: 0; /* Paint the wall backdrop explicitly: .stage carries data-theme="dark", so in light mode this stays dark (video reads best on dark) while the surrounding nav/livebar/footer go light. In dark mode it's identical to the body. */ background-color: var(--c-bg); } /* Wall fullscreen: the whole stage fills the screen (grid + tiles only, all chrome gone). Edge-to-edge black, and the floating exit button is revealed (the livebar's enter button is hidden by fullscreen). */ .stage:fullscreen { padding: 0; background: var(--c-video-bg); } .stage__fs-exit { display: none; position: fixed; top: var(--sp-3); right: var(--sp-3); z-index: 30; width: 2.5rem; height: 2.5rem; place-items: center; border: 0; border-radius: var(--radius); background: color-mix(in srgb, var(--c-video-bg) 55%, transparent); color: var(--c-on-accent); cursor: pointer; } .stage__fs-exit svg { width: 20px; height: 20px; } .stage:fullscreen .stage__fs-exit { display: grid; } .grid { display: grid; gap: var(--sp-3); /* Auto layout: JS sets --cols = ceil(sqrt(N)) so the wall stays roughly square, NVR-style (see applyGridLayout in app.js). The fixed presets below override the column count. */ grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr)); } /* Fixed presets override the auto-fit track list. */ .grid[data-layout="1"] { grid-template-columns: minmax(0, 1fr); } .grid[data-layout="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid[data-layout="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid[data-layout="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* While one tile is zoomed the others are removed from flow entirely, so the zoomed tile gets the whole stage regardless of the active preset. The double-class selector is deliberate: it must out-specify .grid[data-layout="N"] (class + attribute), else a fixed layout keeps its column count and the "zoomed" tile only fills one column. */ .grid.grid--zoomed { grid-template-columns: minmax(0, 1fr); } .grid--zoomed .tile:not(.tile--zoomed) { display: none; } /* Seamless single-border wall (livebar "grid gap" toggle off): collapse the spacing to 1px dividers — the grid's own background bleeds through the 1px gaps as clean grid lines — square the tiles, and a 1px frame closes the outer edge. box-sizing:border-box keeps the frame from overflowing the fit. */ .grid--seamless { gap: 1px; background-color: var(--c-border); border: 1px solid var(--c-border); } .grid--seamless .tile { border: 0; border-radius: 0; } /* Full-bleed: drop the stage padding so the seamless wall reaches the edges. */ .stage--seamless { padding: 0; } /* Per-device on-tile overlay toggles (livebar "Affichage" popover). Each hide-* class is set on the grid by applyDisplay when its toggle is off. Selectors out-specify the elements' own show rules. */ .grid.hide-names .tile__name, .grid.hide-live .tile__badge, .grid.hide-res .tile__resolution, .grid.hide-stream .tile__variant, .grid.hide-events .tile__events, .grid.hide-icons .tile__ov, .grid.hide-data .tile__data { display: none; } .grid.hide-rec .tile__rec { display: none; } /* beats .tile--recording .tile__rec */ /* Video framing (livebar "Affichage" popover): default is contain (fit, letterbox — on .tile__video). cover crops to fill; fill stretches to the tile. (The metadata boxes assume contain — misaligned in cover/fill, but those are a ?debug view.) */ .grid[data-fit="cover"] .tile__video { object-fit: cover; } .grid[data-fit="fill"] .tile__video { object-fit: fill; } /* On narrow screens presets would crush tiles below usability; fall back to one column. Excluded in embed mode: an embedded frame is sized by the host dashboard, so a forced layout (e.g. ?layout=2) must hold its column count at any width, never collapse. */ /* Non-embed presets collapse to one column on a phone. The nvr wall's own mobile behaviour lives in the consolidated block AFTER the fit-to-viewport rules (so it out-orders them) — see "Phone wall". */ @media (max-width: 720px) { body:not(.embed):not(.nvr) .grid, body:not(.embed) .grid[data-layout="2"], body:not(.embed) .grid[data-layout="3"], body:not(.embed) .grid[data-layout="4"] { grid-template-columns: minmax(0, 1fr); } } /* ------------------------------------------------------------------ Tiles */ .tile { position: relative; aspect-ratio: 16 / 9; min-width: 0; background-color: var(--c-video-bg); border: 1px solid var(--c-border); border-radius: var(--radius); overflow: hidden; cursor: pointer; /* transform is animated by the FLIP glide when the make-room gap shifts tiles (see flipTiles). */ transition: border-color var(--transition), transform 160ms ease; } /* The FLIP "invert" frame must snap instantly (no glide) before we animate to the new position. */ .tile.no-anim { transition: none; } .tile:hover { border-color: var(--c-border-strong); } .tile:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; } .tile--zoomed { aspect-ratio: auto; height: calc(100vh - 12rem); cursor: zoom-out; } /* Wraps the media + overlays (everything except the PTZ pad). By default it's an invisible layer filling the tile, so the wall / desktop / fullscreen render exactly as a flat tile would; a magnified phone tile re-flows it into a flex column (see the phone media query). It is also the digital-zoom container — its box is the picture area, so pinch/pan focal math stays accurate. */ .tile__stage { position: absolute; inset: 0; overflow: hidden; /* clips the digital zoom to the picture area (keeps it out of the PTZ band) */ -webkit-touch-callout: none; /* no long-press "save video" callout over the stream (see .tile__video) */ } /* Two stacked layers (make-before-break). Both fill the tile; only the front layer is ever shown, and only once the tile is live — the back layer stays hidden while it connects, so a switch never blanks the picture. */ .tile__video { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: contain; background-color: var(--c-video-bg); visibility: hidden; /* Mobile: keep the