/* ################################################################################################################################################################################## ################################################################################################################################################################################## ## BOXARR WebUI — Navigation Chrome (LOOK) ## ## · Page: boxarr.cs3 ## ## · Description: Material Brown shell + nav chrome tokens (CS3). ## ## · Location: /styles/ ## ## ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ## ## · Version: v0.0.16 ## ## ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ## ## · Project Start Date: 2026-09-11 ## ## · Last updated: 2026-10-08 @ 1422 EDT ## ## ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ## ## · Author: by Conner Rhoads / GrokBuild LOOK scrap+rebuild ## ## · Official Site: www.boxarr.dev ## ################################################################################################################################################################################## ## == AI ASSISTANT MANDATED LOGIC == ## ## · I.) FORMATING: ## ## · 01.) NEVER change or deviate from the commenting and separation format. ## ## · 02.) ALWAYS Use "Indented Allman" Code Formating Style. ## ## · 03.) Tabs are always FOUR characters long. ## ## · 04.) Comment section borders are 176 fill chars + two-char ends; total line length 178. ## ## · 05.) The comment ending segment on each comment block ends at 178 from the left. ## ## · 06.) All constitution comment lines are exactly 178 characters from the left. ## ## · 07.) NEVER remove code that appears to be placeholders. ## ## · 08.) Primary sections use "#" borders and [START]/[END]. ## ## · 09.) Major sections use "=" borders. ## ## · 10.) Minor sections use "-" borders. ## ## · II.) COMMENTING: ## ## · 01.) NEVER remove comments. ## ## · 02.) ALWAYS Update Last Updated on edits. ## ## · 03.) ALWAYS fill with appropriate values. ## ## · III.) EDITS: ## ## · 01.) Confirm new identifier names with Conner before inventing them. ## ## · 02.) Successful build = same or more lines unless Conner confirms removals. ## ## · IV.) LOOK SPEC RULES: ## ## · 01.) Lexicon: Servarr (never bare arr); downloader; Boxarr/Fetcharr/Metarr stay. ## ## · 02.) LOOK only. No Fetcharr pipeline function/behavior. WORKING direction caveat. ## ## · 03.) Rebuild stack: PHP / HTML5 / CS3 / TypeScript (JS OK if no TS toolchain). ## ## · 04.) Body prose may use single-# markdown titles; only ## constitution lines are 178. ## ################################################################################################################################################################################## ## Change Log: ## ## · 2026-10-08: local-mobile-swipe-3: Phone pager: PageStatusBar leaves the snap row; Connection fills the page. ## ## · 2026-10-01: lamp-ack-1: Prefer Copy donor Ack/Ignore. Problem lamps cycle acked / ignored / live. ## ## · 2026-09-30: step-empty-1: Servarr empty card under the explain nest. Grabbers hide. QS can hide the explanation. ## ## · 2026-09-30: header-ico-7: Dashboard side-panel title icons are 28px. Still no plate. ## ## · 2026-09-30: header-ico-6: Dashboard side-panel title icons are 24px. The square plate is gone. ## ## · 2026-09-30: header-ico-5: Connection title family marks are 26px rounded-square plates, matching fold-chev. ## ## · 2026-09-30: assoc-fold-1: Servarr Stack associated downloaders use svc-assoc-fold / data-assoc-fold. Default closed. ## ## · 2026-09-30: paint-stub-1: Digest row wraps inside the grabber nest. No new class. No chevron change. ## ## · 2026-09-30: pipe-num-1: Pipeline step number is the step id, not list position. ## ## · 2026-09-29: conn-assoc-dl-1: Servarr Stack associated downloaders fold as a submenu under the grabber. ## ## · 2026-09-29: conn-svc-rows-1: Connection Services hide until live twin; one row per instance; Configure vs port. ## ## · 2026-09-29: queue-cred-1: Hide Queue stacks until a live credential twin (.is-cred-live). ## ## * 2026-09-25: legacy-flip-1: Prefer Copy legacy dual-face card flip (perspective 1400 / 0.55s / rotateY+compensating settings face); upright LTR; paint-over instances kept as board/settings faces; CP falling 65%. ## ## • 2026-09-25: qs-flip-2-restore-1: kill whole-panel rotateY mirror; restore qs-flip-2 paint-over + anim-1 face swing; keep falling; CP falling 65%. ## ## • 2026-09-25: qs-flip-fb-1: Prefer Copy legacy card flip (perspective 1400 / 0.55s / rotateY+compensating face); CP/QS falling boxes+plate. ## ## • 2026-09-25: qs-flip-anim-1: Prefer Copy legacy 0.55s/perspective QS face swing OVER underlay; LTR upright; no whole-panel rotateY mirror. ## ## • 2026-09-25: qs-flip-2: dual QS instances paint OVER underlay (#qs-panel/#connection-panel); no hide-board swap; no rotateY. ## ## • 2026-09-25: qs-unmirror-1: drop rotateY(180) whole-panel flip; real face visibility swap (LTR upright QS); keep sidebar-flush-1. ## ## · 2026-09-22: Services restart LOOK confirm — centered grabber-face colors; no actual restart. ## ## · 2026-09-22: Services downloader mark is last column; empty slot reserved when a row has no downloader. ## ## · 2026-09-22: Services rows: reserved downloader column; extra downloaders fold on the icon (not parent). ## ## · 2026-09-22: Connection card header lamps reuse svc-icon-wrap; Bridge/Privacy status-only blurb. ## ## · 2026-09-21: QS section fold-chevs Prefer Copy Fetcharr step plaques (22px / 5px / 9.6px gold). ## ## · 2026-09-18: Undo Log fold-chev on chip row far-right; chip-scale (Quick Panel; not Pipeline). ## ## · 2026-09-18: Grabber chev accent WIN — narrow #tab-fetcharr .fetch-run .fold-chev (was beating --grabber-*). ## ## · 2026-09-18: RESTORE sticky/scroll — fix expand-fix-1b comment fence poison before MAIN PANEL. ## ## · 2026-09-18: Grabber nest fold-chevs match --grabber-* accent; master/step/explain stay gold. ## ## · 2026-09-18: strip-scope-4: drop host fill:initial (black kids); no fill:unset on stage kids. ## ## · 2026-09-18: Restore Fetcharr right swing (−90°); A1 opacity mid-state dropped (Conner). ## ## · 2026-09-18: STEP collapse fix: master-right no longer ungated-forces step bodies open. ## ## · 2026-09-26: fetch-step-unconfigured-stubs-1: .is-unconfigured LOOK (= held family); unused until JS flag; cache ?v=unconfigured-stub-1. ## · 2026-09-26: fetch-step-disabled-paint-1: SA/SS-held step LOOK bg #1a140c / text #5d4035; cache ?v=step-disabled-1. ## · 2026-09-18: Restore Fetcharr 3-level: right=grabber heads (bodies closed); down=full open via normalize. ## ## · 2026-09-18: EXPAND FIX: master-right no longer blanked-hides open grabber/explain bodies. ## ## · 2026-09-18: REMOVE Fetcharr active P/P/S/Test CRD paint + JS (Illustrator redo); VPN C/R/D untouched. ## ## · 2026-09-18: Fold-chev glyph transition: transform 0.16s ease (SoT control.cs3). ## ## · 2026-09-18: FOLLOW-UP: #tab-fetcharr nest fold-chev far-right harden + name flex:1. ## ## · 2026-09-18: Fetcharr Play/Pause/Stop/Test active C/R/D LOOK (data-run-state; Test blue provisional). ## ## · 2026-09-18: Fetcharr fold-chev glyphs -20% (master 12.8; step/nest 9.6); outer plaques unchanged. ## ## · 2026-09-18: Fetcharr size drop: run bar+fold 28px; step acts/ico/chev 22px. ## ## · 2026-09-18: Fetcharr step head far-left ico + fold-chev 24px (pipeline + nest row family). ## ## · 2026-09-18: Fetcharr acts: run bar+fold 32px; step acts 28px; P/P/S naked on run+step. ## ## · 2026-09-18: Fetcharr run Play/Pause/Stop glyph 24px (naked; match sibling 26px trim footprint). ## ## · 2026-09-18: Fetcharr sub-head: h2 then acts+master fold row; master chev 26px (= .fetch-act). ## ## · 2026-09-18: Unify headers #1a1510: kill operator-tabs stuck mix + .sub-head dropFill; stuck panel-head explicit. ## ## · 2026-09-18: CORRECTION: all .sub-block > .sub-head rows #1a1510 (match panel-head). ## ## · 2026-09-18: All operator .panel-head plaques use #1a1510 (drop Fetcharr-only overrides). ## ## · 2026-09-18: CORRECTION §31: master Pipeline fold on Fetcharr sub-head row (acts + fold-chev far right). ## ## · 2026-09-16: QS Active/Disabled: Lidarr green / Readarr red fill (Pipeline process toggles). ## ## · 2026-09-16: Queue stacks follow QS Installed / Unconfigured / Uninstalled Services hide. ## ## · 2026-09-16: Control/operator QS hide Media/VPN/Tools/Admin; Settings inventory hide. ## ## · 2026-09-16: Services ► shows subsections; nest ► hides rows; cache ?v=svc-fold-1. ## ## · 2026-09-16: Services foot chevron mirrors header fold; hidden when bucket fully collapsed. ## ## · 2026-09-16: Site-wide sub-head morph: Fetcharr sticky pattern applies to every .page-section tab. ## ## · 2026-09-16: Services header: one fold-chev; flush fill like Connection cards. ## ## · 2026-09-16: vpn-btn[hidden] display:none so Install leaves after i2pd is present. ## ## · 2026-09-16: Metarr card header ico + this-node/I2P/records/seeds/cooldown rows. ## ## · 2026-09-16: Reusable .acts-icons + [data-tip] chip popup; Metarr icon buttons square-centered; no expand-label. ## ## · 2026-09-16: Mesh vpn-btn: Install fill on all acts; icon-mode hover reveals .mesh-btn-label (rollover). ## ## · 2026-09-16: Metarr Mesh buttons icons-only default; hide labels / hide icos via .metarr-icons-only. ## ## · 2026-09-16: Fold ► : rotate wrapper only (inner svg inherit). Double -90deg had painted ▲. ## ## · 2026-09-16: Metarr vpn-btn icons keep pack purple (unset fill); brown is standard chrome. ## ## · 2026-09-16: Fetcharr one-child: data-fold=right shows body; chevron ► (-90deg). ## ## · 2026-09-16: Fold mid-state RIGHT (►): up=collapsed, right=one-level, down=open. Panel L=open R=closed. ## ## · 2026-09-16: QS fold-chev: kill cream currentColor blob; gold pack arrows on both QS faces. ## ## · 2026-09-16: Fold mid-state LEFT (up/left/down); panel collapse L=open R=closed only (4 sidebars). ## ## · 2026-09-16: Fetcharr fold-chev: restore gold pack arrows (was over-hidden); force currentColor not white. ## ## · 2026-09-16: QS show/hide keywords universally bold (Romarr / Lidarr). ## ## · 2026-09-16: Discrete icon SVGs retired; chrome paints pack sprites only. ## ## · 2026-09-15: Import operator-tabs.cs3 so Help Fetcharr step atlas styles load. ## ## · 2026-09-15: Metarr Install vpn-btn holds pack #usb-drive. ## ## · 2026-09-12: Fetcharr Step>Servarr>grabbers LOOK nest; ?v=fetcharr-grabber-colors-1. ## ## · 2026-09-12: Fetcharr Step LOOK: Servarr chrome hidden; cards=icon+name+chev / LOOK|paint stub; ?v=fetcharr-step-look-1. ## ## · 2026-09-12: Fetcharr grabber nests LOOK: reuse fetch-step chrome + grabber-face; ?v=fetcharr-grabber-nests-1. ## ## · 2026-09-12: Conn Status LOOK: circular header icos + fold square; ?v=header-ico-2. ## ## · 2026-09-12: Conn Status LOOK: triangles on Services/Admin/Jobs; svc-status col. ## ## · 2026-09-12: Conn Status LOOK: fold-arrow base + row-actions; mesh purple via CS3. ## ## · 2026-09-12: Icon LOOK: ui mask bust icons-1; svc sprite is-sprite clear. ## ## · 2026-09-12: Leaf ▲▼ glyphs; nest ► only; cache ?v=chevron-5. ## ## · 2026-09-12: Tri-state fold glyphs ▲/►/▼; hide bodies on data-fold=up. ## ## · 2026-09-11: QS Shown=Lidarr / Hidden=Romarr; nested tone-* overridden. ## ## · 2026-09-11: Panel chevron LEFT=collapse / RIGHT=expand; rail RIGHT. ## ## · 2026-09-11: Scrap+rebuild from Boxarr.test SoT (01/02/05/06/07/14). ## ## · 2026-09-11: UI chrome via CS3 masks on assets/icons/ui/*.svg. ## ## · 2026-09-11: 178-wide section sandwiches; Metarr #e043fa tone. ## ################################################################################################################################################################################## ################################################################################################################################################################################## */ @import url("/demo/styles/pages/operator-tabs.cs3?v=head-1a1510-1"); /* ##==============================================================================================================================================================================## ## [START] TOKENS — 02-COLORS-TOKENS ## ##==============================================================================================================================================================================## */ :root { /* Android Lollipop / Material Brown — source tokens */ --brown-100: #d7ccc8; --brown-200: #bcaaa4; --brown-500: #795548; --brown-700: #5d4037; --brown-800: #4e342e; --brown-900: #3e2723; --on-primary: #ffffff; --material-primary-text: #212121; --material-secondary-text: #727272; --material-divider: #b6b6b6; --themePrimary: var(--brown-500); --themeDarkPrimary: var(--brown-700); --themeLightPrimary: var(--brown-100); --pageBackground: #202020; --pageHeaderBackground: #2a2a2a; --toolbarBackground: #262626; --sidebarBackground: #2a2a2a; --sidebarActiveBackground: #333333; --popoverBackground: #2a2a2a; --inputBackground: #333333; --cardBackground: #333333; --mainFill: #211713; --panelFill: #5d4037; --dropFill: #1a140c; --gold: #cca37f; --textDim: #cca37f; --faint: #cca37f; --textColor: #f0e6dc; --textMuted: #a89080; --borderColor: color-mix(in srgb, var(--gold) 35%, transparent); --success: #4caf50; --info: #29b6f6; --warning: #ff902b; --danger: #f05050; --link: var(--brown-200); --linkHover: var(--brown-100); --accent: var(--themePrimary); --bg: var(--pageBackground); --bg-2: var(--sidebarBackground); --line: var(--borderColor); --bg-3: var(--cardBackground); --text: var(--textColor); --muted: var(--textMuted); --ok: var(--success); --warn: var(--warning); --fail: var(--danger); --radius: 3px; --font: "Segoe UI", system-ui, -apple-system, sans-serif; --mono: "Ubuntu Mono", "Cascadia Mono", "Consolas", ui-monospace, monospace; --focusRing: 0 0 0 3px rgba(215, 204, 200, 0.45); --svc-servarr-title: #d56b1d; --svc-servarr-bg: #3b1d07; --svc-servarr-trim: #884412; --svc-sonarr-title: #00cafd; --svc-sonarr-bg: #002630; --svc-sonarr-trim: #00cafd; --svc-radarr-title: #fec130; --svc-radarr-bg: #302508; --svc-radarr-trim: #fec130; --svc-sportarr-title: #c77575; --svc-sportarr-bg: #300000; --svc-sportarr-trim: #c77575; --svc-lidarr-title: #009151; --svc-lidarr-bg: #001008; --svc-lidarr-trim: #009151; --svc-readarr-title: #e45b5d; --svc-readarr-bg: #2e050b; --svc-readarr-trim: #e45b5d; --svc-romarr-title: #e040fb; --svc-romarr-bg: #240528; --svc-romarr-trim: #e040fb; --svc-metarr: #e043fa; --head-stick: 0.65rem; --page-head: 72px; --nest-stick: var(--head-stick); --sub-gap: 0.75rem; --nest-gap: var(--sub-gap); --tab-wash: rgba(204, 163, 127, 0.28); --sec-wash: rgba(204, 163, 127, 0.18); --control-tab-wash: rgba(211, 47, 47, 0.28); --control-sec-wash: rgba(211, 47, 47, 0.20); } *, *::before, *::after { box-sizing: border-box; scrollbar-width: none; } *::-webkit-scrollbar { width: 0; height: 0; display: none; } html, body { margin: 0; padding: 0; height: 100%; background: var(--pageBackground); color: var(--text); font-family: var(--font); } button { font: inherit; cursor: pointer; } a { color: var(--link); } /* ##==============================================================================================================================================================================## ## [START] SHELL — 01-SHELL-LAYOUT ## ##==============================================================================================================================================================================## */ .shell { display: grid; grid-template-columns: 420px 1fr; /* minmax(0, 1fr) — a plain 1fr row will not shrink below the sidebar's content, so Servarr / Color key get clipped under the copyright. */ grid-template-rows: 48px minmax(0, 1fr); height: 100vh; min-height: 480px; overflow: hidden; background: var(--pageBackground); } .shell.is-sidebar-off { grid-template-columns: 52px 1fr; } .pager { display: contents; } .shell.is-control { --tab-wash: var(--control-tab-wash); --sec-wash: var(--control-sec-wash); } .shell.is-control .main-card { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(211, 47, 47, 0.35); } .shell.tabs-icons-only .tab-label { display: none; } .shell.tabs-icons-only .tab .page-fn-icon, .shell.tabs-icons-only .tab .ui-ico { width: 22px; height: 22px; } .shell.hide-panel-tooltips .sidebar-face-board .side-help { display: none !important; } .side-card-mesh #mesh-actions.status-row, .status-row.acts-icons { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; grid-template-columns: none; } .sidebar-face-board .side-card-mesh .status-row:not(#mesh-actions) { grid-template-columns: var(--side-lamp-w) 5.6rem minmax(0, 1fr) max-content max-content; } .sidebar-face-board .side-card-mesh .status-row:not(#mesh-actions) .row-actions { display: inline-flex; flex-shrink: 0; align-items: center; gap: 0.15rem; } .shell.net-info-reveal .side-card-mesh .status-row:not(#mesh-actions) [data-eye] { display: inline-flex !important; } /* Reusable icon-action row (Metarr now; Privacy / Bridge VPN later) */ .sidebar-face.sidebar-face-board > .side-card:has(.acts-icons) { overflow: visible !important; } .acts-icons .vpn-btn { position: relative; width: 32px; height: 32px; min-width: 32px; min-height: 32px; padding: 0; gap: 0; line-height: 0; justify-content: center; align-items: center; } .acts-icons .vpn-btn .ui-ico { width: 16px; height: 16px; flex: 0 0 16px; margin: 0; display: flex; align-items: center; justify-content: center; } .acts-icons .vpn-btn .ui-ico.is-sprite .ui-ico-svg { display: block; width: 16px; height: 16px; margin: 0; } /* Metarr mesh acts: keep pack purple (do not wash to gold currentColor). */ .side-card-mesh .vpn-btn .ui-ico.is-sprite .ui-ico-svg, .side-card-mesh .vpn-btn .ui-ico.is-sprite .ui-ico-svg use { fill: unset; color: unset; } .acts-icons .vpn-btn .act-label { display: none; } .acts-text .vpn-btn .ui-ico { display: none; } .acts-icons [data-tip]::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%); padding: 0.16rem 0.4rem; border-radius: 6px; border: 1px solid var(--gold); background: color-mix(in srgb, var(--dropFill) 88%, #000); color: #e8e0d8; font-size: 0.7rem; font-weight: 650; line-height: 1.2; letter-spacing: 0.02em; white-space: nowrap; opacity: 0; pointer-events: none; z-index: 40; } .acts-icons [data-tip]:hover::after, .acts-icons [data-tip]:focus-visible::after { opacity: 1; } .side-card-mesh.acts-icons [data-tip]::after, .side-card-mesh .acts-icons [data-tip]::after { border-color: #e043fa; } /* Topbar — 48px shell row; gold plaque chrome */ .topbar { grid-column: 1 / -1; display: flex; align-items: center; gap: 0.6rem; padding: 0 0.75rem; height: 48px; box-sizing: border-box; background: var(--panelFill); border-bottom: 1px solid var(--gold); z-index: 20; position: relative; } .topbar-title { flex: 1; font-weight: 650; color: var(--gold); letter-spacing: 0.04em; } /* topbar-mark-1: circular Boxarr mark after burger, before title */ .topbar-mark.brand-badge { width: 30px; height: 30px; min-width: 30px; min-height: 30px; flex: 0 0 30px; } .topbar-mark.brand-badge .svc-family-svg, .topbar-mark.brand-badge svg, .topbar-mark.brand-badge img { width: 30px; height: 30px; } .topbar-actions { display: flex; align-items: center; gap: 0.4rem; } .topbar-burger, .topbar-gear, .topbar-logout, .sidebar-chevron, .sidebar-rail { appearance: none; border: 1px solid var(--gold); background: var(--dropFill); color: var(--gold); border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; min-width: 34px; min-height: 34px; padding: 0 0.55rem; transition: none; } .topbar-burger:hover, .topbar-gear:hover, .topbar-logout:hover, .sidebar-chevron:hover, .sidebar-rail:hover { background: var(--themePrimary); color: #d7ccc8; } .sidebar-slot { /* legacy-flip-1 Prefer Copy D:\Sites\Boxarr\webui\app\boxarr\boxarr.css:231-239 */ position: relative; padding: 10px; margin: 0; min-height: 0; align-self: stretch; perspective: 1400px; transform-style: preserve-3d; overflow: visible; } .sidebar { /* legacy-flip-1 Prefer Copy boxarr.css:241-256 (preserve-3d + 0.55s). Flush seat kept under gold stroke. */ position: relative; height: 100%; border: 1px solid var(--gold); border-radius: 14px; /* sidebar-flush-1: fill under gold stroke so corners do not show dark gap */ background: rgba(42, 26, 23, 0.92); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45); display: flex; flex-direction: column; transform-style: preserve-3d; transition: transform 0.55s cubic-bezier(0.4, 0.1, 0.2, 1); will-change: transform; overflow: visible; } /* Whole-card flip. Compensation = .sidebar-face-settings { rotateY(180deg) } permanent (boxarr.css:297-302). */ .shell.is-sidebar-flip .sidebar, .shell.is-qs-flip .sidebar, .shell.is-cp-qs-flip .sidebar { transform: rotateY(180deg); } .shell.is-sidebar-off .sidebar { display: none; } /* conn-leave-1: drop 3D Connection/QS compositor layer when leaving the operator face */ html.is-face-leave .sidebar-slot, html.is-face-leave .sidebar, html.is-face-leave .sidebar-face, html.is-face-leave .sidebar-rail { display: none !important; visibility: hidden !important; opacity: 0 !important; transform: none !important; will-change: auto !important; pointer-events: none !important; } .sidebar-rail { display: none; position: absolute; top: 0.7rem; left: 0.55rem; } .shell.is-sidebar-off .sidebar-rail { display: inline-flex; } .sidebar-stage { /* legacy-flip-1 Prefer Copy boxarr.css:266-272 */ position: relative; flex: 1; min-height: 0; border-radius: 13px; transform-style: preserve-3d; overflow: visible; } .sidebar-head { display: flex; align-items: center; gap: 0.5rem; padding: 0.55rem 0.65rem; border-bottom: 1px solid var(--borderColor); color: var(--gold); font-weight: 650; letter-spacing: 0.04em; } .side-top { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-bottom: 0.45rem; /* qs-unmirror-1: keep L/R panel chevron above face paint / corner clip */ position: relative; z-index: 5; flex: 0 0 auto; } .brand { display: flex; gap: 0.7rem; align-items: center; min-width: 0; flex: 1; } /* header-ico-2: Status Panel brand = large circular Boxarr badge (LOOK match) */ /* header-ico-3: Status Panel brand = Boxarr mark only (no extra ring), larger */ .brand-badge { display: inline-flex; width: 64px; height: 64px; min-width: 64px; min-height: 64px; flex: 0 0 64px; align-items: center; justify-content: center; border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: visible; } .brand-badge .svc-family-svg, .brand-badge svg, .brand-badge img { display: block; width: 64px; height: 64px; } .sidebar-face.sidebar-face-board .brand-name { color: #e8e0d8; font-size: 1.35rem; font-weight: 700; letter-spacing: 0.01em; } .sidebar-face.sidebar-face-board .brand-sub { color: var(--gold); font-size: 0.85rem; margin-top: 0.1rem; } .sidebar-face.sidebar-face-board .side-top { margin-bottom: 0.65rem; padding: 0.15rem 0 0.1rem; } .brand-name { font-weight: 700; letter-spacing: 0.02em; font-size: 1.05rem; line-height: 1.15; color: var(--gold); } .brand-sub { color: var(--faint); font-size: 0.78rem; } .sidebar-chevron { margin-left: auto; flex: 0 0 auto; position: relative; z-index: 6; overflow: visible; } .sidebar-chevron-back { margin-left: auto; position: relative; z-index: 6; overflow: visible; } .sidebar-face { /* legacy-flip-1 Prefer Copy boxarr.css:274-295 backface */ position: absolute; inset: 0; overflow: auto; scrollbar-width: none; display: flex; flex-direction: column; gap: 0.35rem; padding: 0.55rem 0.7rem 0.75rem; border-radius: 13px; /* sidebar-flush-1: stage overflow:hidden already clips; clip-path double-clip caused corner hairline gaps */ background-color: rgba(42, 26, 23, 0.18); /* Soft wash only — opaque watermark JPG was occluding falling-boxes stage */ background-image: linear-gradient(180deg, rgba(62, 39, 35, 0.20) 0%, rgba(42, 26, 23, 0.28) 100%); background-size: auto; background-position: center; background-repeat: no-repeat; backface-visibility: hidden; -webkit-backface-visibility: hidden; } /* QS/board face falling host sits under content; plate stays full-strength (Prefer Copy stage .sidebar-falling DNA) */ .sidebar-face > .sidebar-falling { position: absolute; inset: 0; z-index: 0; } .sidebar-face > *:not(.sidebar-falling) { position: relative; z-index: 1; } .sidebar-face::-webkit-scrollbar { width: 0; height: 0; display: none; } /* legacy-flip-1 Prefer Copy dual-face card flip DNA from D:\Sites\Boxarr\webui\app\boxarr\boxarr.css:274-302 */ /* Board = front (0deg). Settings = back with COMPENSATING rotateY(180) so parent flip keeps LTR upright. */ /* HARD GATE: do not ship without this compensating face rotate (qs-flip-fb-1 FAIL mode). */ .sidebar-face-board { transform: none; pointer-events: auto; z-index: 2; } .sidebar-face-settings { /* COMPENSATING face: permanent rotateY(180). With parent .sidebar rotateY(180) on flip, text stays upright. */ transform: rotateY(180deg); pointer-events: none; z-index: 3; } .shell.is-sidebar-flip .sidebar-face-settings, .shell.is-qs-flip .sidebar-face-settings, .shell.is-cp-qs-flip .sidebar-face-settings { pointer-events: auto; } .shell.is-sidebar-flip .sidebar-face-board, .shell.is-qs-flip .sidebar-face-board, .shell.is-cp-qs-flip .sidebar-face-board { pointer-events: none; } /* Stage falling stays on front plane; hides via backface when flipped (QS faces carry their own falling). */ .sidebar-stage > .sidebar-falling { backface-visibility: hidden; -webkit-backface-visibility: hidden; transform: translateZ(0); z-index: 0; } /* Dual instances kept: #qs-panel OVER underlay role as settings face; #connection-panel as board face. */ /* qs-faces-fb-1: Prefer Copy soft wash (same DNA as .sidebar-face / CP soft seat) so face-local falling plate shows full-strength. No opaque wipe. */ body[data-face="operator"] #qs-panel.sidebar-face-settings { background-color: rgba(42, 26, 23, 0.18); background-image: linear-gradient(180deg, rgba(62, 39, 35, 0.20) 0%, rgba(42, 26, 23, 0.28) 100%); } .ui-ico { width: 14px; height: 14px; display: inline-block; background: none; -webkit-mask: none; mask: none; } .ui-ico.is-sprite, .sidebar-face.sidebar-face-board .fold-chev .ui-ico.is-sprite, .sidebar-face.sidebar-face-board .fold-chev .ui-ico-chevron.is-sprite { background: none; -webkit-mask: none !important; mask: none !important; } .ui-ico.is-sprite .ui-ico-svg, .page-fn-icon.is-sprite .page-fn-svg { width: 100%; height: 100%; display: block; fill: currentColor; } .page-fn-icon.is-sprite { display: inline-flex; width: 22px; height: 22px; align-items: center; justify-content: center; } /* Side-panel collapse uses pack #down + rotate. Face current state, not travel. */ /* Status panel cards */ .side-card, .svc-bucket { border: 1px solid var(--borderColor); border-radius: 10px; background: var(--cardBackground); background-clip: padding-box; margin-bottom: 0.55rem; /* side-card-flush-1: seat radius/clip; !important beats Connection inline overflow:visible */ overflow: hidden !important; padding: 0; box-shadow: none; } .side-card-mesh { border-color: color-mix(in srgb, #e043fa 70%, var(--gold)); --stack: #e043fa; background: var(--dropFill); } .side-card-mesh .side-card-head { color: #e043fa; background: color-mix(in srgb, #290030 55%, var(--panelFill)); } .side-card-mesh .side-card-ico { border: 0; } .side-card-mesh .side-card-head .fold-chev { color: #e043fa; } .side-card-mesh .side-card-body, .side-card-mesh .masked, .side-card-mesh .paren-meta { color: #e043fa; } .tone-metarr { color: #e043fa; letter-spacing: 0.02em; text-shadow: 0 0 8px color-mix(in srgb, #e043fa 70%, transparent), 0 0 18px color-mix(in srgb, #e043fa 45%, transparent); } .side-card-head { display: flex; align-items: center; gap: 0.45rem; padding: 0.4rem 0.5rem; background: var(--panelFill); color: var(--gold); font-size: 0.85rem; font-weight: 650; } .side-card-head .fold-chev { margin-left: auto; } /* header-ico-7: title family mark is the glyph only, 28px, no plate */ .side-card-ico { display: inline-flex; width: 28px; height: 28px; min-width: 28px; min-height: 28px; flex: 0 0 28px; align-items: center; justify-content: center; border-radius: 0; overflow: visible; border: 0; background: transparent; box-sizing: border-box; } .side-card-ico .svc-family-svg, .side-card-ico svg, .side-card-ico img { display: block; width: 28px; height: 28px; } .side-card-head > span:not(.side-card-ico):not(.svc-icon-wrap), .svc-bucket-head > span:not(.side-card-ico):not(.svc-icon-wrap) { text-transform: uppercase; letter-spacing: 0.06em; } .side-card-body { padding: 0.35rem 0.45rem 0.5rem; background: var(--dropFill); } .side-card.is-folded .side-card-body, .side-card[data-fold="up"] .side-card-body { display: none; } .status-row { display: grid; /* lamp | label | value | paren | actions — value flexes; label a bit tighter so IPs get room */ grid-template-columns: 14px 4.2rem minmax(0, 1fr) max-content auto; gap: var(--side-gap, 0.35rem); align-items: center; padding: 0.22rem 0.15rem; font-size: 0.82rem; } /* conn-fields-1: panel blurbs, Cloudflare link, VPN action row, paren tones */ .panel-blurb { margin: 0 0 0.45rem; padding: 0 0.15rem; color: var(--faint); font-size: 0.78rem; line-height: 1.35; } .panel-link { display: inline-block; margin: 0.45rem 0.15rem 0.15rem; color: var(--gold); font-size: 0.8rem; font-style: italic; text-decoration: underline; text-underline-offset: 2px; } .addr-empty { color: var(--faint); min-width: 0; } .panel-link:hover { color: #e8e0d8; } .vpn-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.55rem 0.1rem 0.15rem; } .vpn-btn { appearance: none; border: 1px solid var(--gold); background: transparent; color: var(--gold); border-radius: 8px; padding: 0.28rem 0.7rem; font-size: 0.78rem; cursor: pointer; display: inline-flex; align-items: center; gap: 0.35rem; } .vpn-btn[hidden], .acts-icons .vpn-btn[hidden] { display: none !important; } .vpn-btn .ui-ico { width: 16px; height: 16px; flex: 0 0 16px; } .vpn-btn:hover { background: color-mix(in srgb, var(--dropFill) 70%, #000); color: #e8e0d8; } .paren-meta:empty { visibility: hidden; } .paren-meta { justify-self: start; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; max-width: 6.6rem; } .status-row > .row-actions { justify-self: end; } .svc-row { --svc-status-w: 8.25rem; --svc-sats-w: 16px; display: grid; grid-template-columns: 14px 22px minmax(0, 1fr) var(--svc-status-w) var(--svc-sats-w); gap: 0.35rem; align-items: center; padding: 0.28rem 0.2rem; border-radius: 6px; } .svc-status { font-size: 0.78rem; color: var(--muted); text-align: right; } .svc-row:hover { background: var(--sidebarActiveBackground); } .tlight { width: 10px; height: 10px; border-radius: 50%; background: var(--lamp, #888); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35); } .tlight.is-spin { animation: lamp-spin 1.1s linear infinite; } @keyframes lamp-spin { 0% { background: #4caf50; } 20% { background: #ffeb3b; } 40% { background: #ff902b; } 60% { background: #e91e63; } 80% { background: #f05050; } 100% { background: #9e9e9e; } } .tlight.is-ok { --lamp: #4caf50; } .tlight.is-warn { --lamp: #ffeb3b; } .tlight.is-auth { --lamp: #ff902b; } .tlight.is-prob { --lamp: #e91e63; } .tlight.is-down { --lamp: #f05050; } .tlight.is-grey { --lamp: #9e9e9e; } .tlight.is-ack { --lamp: #00bcd4; } .tlight.is-ign { --lamp: #5c6bc0; } .tlight.is-ackable { cursor: pointer; } .tlight.is-ackable:hover { filter: brightness(1.15); } .tlight.is-ackable.is-ack-flash { filter: brightness(1.35); } .masked { font-family: var(--mono); color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .paren-meta { color: var(--muted); font-size: 0.78rem; } /* tone-fix-1: paren tones must beat muted .paren-meta; masked stays faint */ .status-row > .masked { color: var(--faint) !important; } .paren-meta.tone-tailscale { color: #7eb8ff !important; font-weight: 650; } .paren-meta.tone-proton { color: #b388ff !important; font-weight: 650; } .paren-meta.tone-metarr { color: #e043fa !important; font-weight: 650; } .paren-meta.tone-emby { color: #52d681 !important; font-weight: 650; } .paren-meta.tone-jellyfin { color: #00a4dc !important; font-weight: 650; } .paren-meta.tone-plex { color: #e5a00d !important; font-weight: 650; } .paren-meta.tone-bridge, .tone-bridge { color: #ffffff !important; font-weight: 650; } .paren-meta.tone-romarr { color: var(--svc-romarr-title) !important; font-weight: 650; } .row-actions { display: inline-flex; align-items: center; gap: 0.15rem; justify-self: end; } .icon-btn { appearance: none; border: none; background: transparent; color: var(--gold); padding: 0.1rem; display: inline-flex; } .svc-bucket-head { display: flex; align-items: center; gap: 0.45rem; padding: 0.4rem 0.5rem; background: var(--panelFill); color: var(--gold); font-weight: 650; font-size: 0.85rem; border-radius: 9px 9px 0 0; margin: 0; } .svc-bucket-head .fold-chev { margin-left: auto; } .svc-bucket-body { padding: 0.3rem; margin: 0; background: var(--dropFill); border-radius: 0 0 9px 9px; } .svc-bucket.is-folded .svc-bucket-body, .svc-bucket[data-fold="up"] > .svc-bucket-body { display: none; } .svc-bucket[data-fold="right"] > .svc-bucket-body, .svc-bucket[data-fold="down"] > .svc-bucket-body { display: block; } .svc-bucket[data-fold="up"] > .svc-bucket-head { border-radius: 9px; } /* Services foot chevron — same fold host as header; lives in body so fully collapsed (up) hides it. */ .svc-bucket-foot { display: flex; justify-content: flex-end; align-items: center; padding: 0.35rem 0.15rem 0.1rem; margin-top: 0.25rem; } .svc-bucket[data-fold="up"] > .svc-bucket-body > .svc-bucket-foot { display: none !important; } .svc-bucket[data-fold="up"] > .svc-bucket-body .svc-bucket-foot .fold-chev .ui-ico, .svc-bucket[data-fold="up"] .svc-bucket-foot .fold-chev .ui-ico { transform: rotate(180deg); } .svc-bucket[data-fold="right"] > .svc-bucket-body .svc-bucket-foot .fold-chev .ui-ico, .svc-bucket[data-fold="right"] .svc-bucket-foot .fold-chev .ui-ico { transform: rotate(-90deg); transform-origin: center; } .svc-bucket[data-fold="down"] > .svc-bucket-body .svc-bucket-foot .fold-chev .ui-ico, .svc-bucket[data-fold="down"] .svc-bucket-foot .fold-chev .ui-ico { transform: none; } /* Connection Status LOOK: original chevron.svg + rotate (legacy feel). Panel L/R still Conner arrows SoT. Bust conn-arrows-3 */ .fold-chev, .jobs-fold-head { position: relative; display: inline-flex; min-width: 1.25rem; min-height: 1.25rem; align-items: center; justify-content: center; } /* header-ico-1: fold control = rounded-square dark fill + tan/beige ring; arrow centered */ .fold-chev, .svc-fold-all { width: 26px; height: 26px; min-width: 26px; min-height: 26px; padding: 0; border-radius: 6px; border: 1px solid var(--gold); background: var(--dropFill); color: var(--gold); box-sizing: border-box; flex: 0 0 26px; } .fold-chev .fold-arrow, .svc-fold-all .fold-arrow { display: block; width: 12px; height: 12px; min-width: 12px; min-height: 12px; margin: 0; background: none; -webkit-mask: none; mask: none; } .fold-chev .ui-ico, .fold-chev .ui-ico-chevron, .svc-fold-all .ui-ico, .svc-fold-all .ui-ico-chevron, .jobs-fold-head .ui-ico { display: inline-block !important; width: 14px; height: 14px; background: none; background-color: transparent; /* pack #down sprite; rotate wrapper for state — never a currentColor square */ -webkit-mask: none center / contain no-repeat; mask: none center / contain no-repeat; transform: none; transform-origin: center; /* SoT: styles/control.cs3 — ease rotate only (never margin/top). */ transition: transform 0.16s ease; } [data-fold="up"] > .side-card-head .fold-chev .ui-ico, [data-fold="up"] > .svc-bucket-head .fold-chev .ui-ico, [data-fold="up"] > .svc-nest-head .fold-chev .ui-ico, [data-fold="up"] > .qs-section-head .fold-chev .ui-ico, [data-fold="up"] > .form-section-head .fold-chev .ui-ico, [data-fold="up"] > .fetch-step-head .fold-chev .ui-ico, [data-fold="up"].jobs-fold > .jobs-fold-head .ui-ico { transform: rotate(180deg); } [data-fold="right"] > .side-card-head .fold-chev .ui-ico, [data-fold="right"] > .svc-bucket-head .fold-chev .ui-ico, [data-fold="right"] > .svc-nest-head .fold-chev .ui-ico, [data-fold="right"] > .qs-section-head .fold-chev .ui-ico, [data-fold="right"] > .form-section-head .fold-chev .ui-ico, [data-fold="right"] > .fetch-step-head .fold-chev .ui-ico, [data-fold="right"].jobs-fold > .jobs-fold-head .ui-ico { /* base pack #down; rotate the WRAPPER only (inner svg inherits). -90deg CCW -> ► */ transform: rotate(-90deg); transform-origin: center; } [data-fold="down"] > .side-card-head .fold-chev .ui-ico, [data-fold="down"] > .svc-bucket-head .fold-chev .ui-ico, [data-fold="down"] > .svc-nest-head .fold-chev .ui-ico, [data-fold="down"] > .qs-section-head .fold-chev .ui-ico, [data-fold="down"] > .form-section-head .fold-chev .ui-ico, [data-fold="down"] > .fetch-step-head .fold-chev .ui-ico, [data-fold="down"].jobs-fold > .jobs-fold-head .ui-ico { transform: none; } /* Side-panel collapse: pack #down rotated. Face CURRENT state, not travel. Open (expanded into the page) → ► (-90deg). Collapsed rail → ◄ (90deg). */ .shell:not(.is-sidebar-off) .sidebar-chevron .ui-ico, .shell:not(.is-sidebar-off) .sidebar-chevron .ui-ico-chevron { background: none !important; background-color: transparent !important; -webkit-mask: none !important; mask: none !important; transform: rotate(-90deg) !important; transform-origin: center; } .shell:not(.is-sidebar-off) .sidebar-chevron .ui-ico.is-sprite .ui-ico-svg, .shell:not(.is-sidebar-off) .sidebar-chevron .ui-ico.is-sprite .ui-ico-svg use { display: block !important; fill: var(--gold) !important; color: var(--gold) !important; } .shell.is-sidebar-off .sidebar-rail .ui-ico, .shell.is-sidebar-off .sidebar-rail .ui-ico-chevron { background: none !important; background-color: transparent !important; -webkit-mask: none !important; mask: none !important; transform: rotate(90deg) !important; transform-origin: center; } .shell.is-sidebar-off .sidebar-rail .ui-ico.is-sprite .ui-ico-svg, .shell.is-sidebar-off .sidebar-rail .ui-ico.is-sprite .ui-ico-svg use { display: block !important; fill: var(--gold) !important; color: var(--gold) !important; } /* Guard: Connection product panels stay visible unless QS hide-* is on */ .shell:not(.hide-connection-panel) [data-panel="connection"], .shell:not(.hide-bridge-panel) [data-panel="bridge"], .shell:not(.hide-privacy-panel) [data-panel="privacy"], .shell:not(.hide-mesh-panel) [data-panel="mesh"] { display: block; visibility: visible; opacity: 1; min-height: 2rem; } .lamp-key-list { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(4, auto); grid-auto-flow: column; gap: 0.28rem 0.55rem; padding: 0.35rem; } .lamp-key-item { display: flex; align-items: center; gap: 0.35rem; font-size: 0.75rem; color: var(--muted); } /* ##==============================================================================================================================================================================## ## [START] QS PANEL — 06-QUICK-SETTINGS (sidebar flip face) ## ##==============================================================================================================================================================================## */ .qs-section { /* qs-section-flush-1: same DNA as Connection .side-card - flush stroke/radius/clip */ border: 1px solid var(--borderColor); border-radius: 10px; background: var(--cardBackground); background-clip: padding-box; margin-bottom: 0.55rem; overflow: hidden; box-shadow: none; } .qs-section-head { display: flex; align-items: center; gap: 0.45rem; padding: 0.4rem 0.5rem; background: var(--panelFill); color: var(--gold); font-weight: 650; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.06em; } .qs-section-head .fold-chev { margin-left: auto; } .qs-section-body { padding: 0.35rem 0.45rem 0.5rem; display: flex; flex-direction: column; gap: 0.35rem; background: var(--dropFill); } .qs-section-ico { width: 30px; height: 30px; min-width: 30px; border-radius: 50%; overflow: hidden; } .qs-section-ico img { display: block; width: 28px; height: 28px; margin: 1px auto; } /* QS brand matches Connection Status live title mark */ .sidebar-face-settings .brand-name { color: #e8e0d8; font-size: 1.35rem; font-weight: 700; } .sidebar-face-settings .brand-sub { color: var(--gold); font-size: 0.85rem; } .qs-section.is-folded > .qs-section-body, .qs-section[data-fold="up"] > .qs-section-body { display: none !important; } .qs-section[data-fold="down"] > .qs-section-body, .qs-section[data-fold="right"] > .qs-section-body { display: flex !important; } .qs-toggle { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.35rem 0.45rem; border: 1px solid var(--svc-lidarr-title); border-radius: 8px; background: #001008; color: var(--text); font-size: 0.82rem; text-align: left; } .qs-toggle > span:first-child { flex: 1 1 42%; text-align: left; } .qs-toggle .qs-state { flex: 1 1 58%; text-align: left; } /* QS state: default text; only .tone-kw / service tones color+bold the keyword */ .qs-toggle .qs-state, .qs-toggle .tone-shown, .qs-toggle .tone-hidden { color: var(--text); font-weight: 400; text-align: left; } .qs-toggle .tone-kw, .qs-toggle .tone-romarr, .qs-toggle .tone-lidarr, .qs-toggle .tone-readarr { font-weight: 700; } .qs-toggle .tone-kw.tone-romarr, .qs-toggle .tone-romarr.tone-kw, .qs-toggle .tone-romarr { color: var(--svc-romarr-title); } .qs-toggle .tone-kw.tone-lidarr, .qs-toggle .tone-lidarr.tone-kw, .qs-toggle .tone-lidarr { color: var(--svc-lidarr-title); } .qs-toggle .tone-readarr { font-weight: 700; color: var(--svc-readarr-title); } .qs-toggle.qs-toggle-tri[data-net-info="show"] { border-color: var(--svc-lidarr-trim) !important; background: var(--svc-lidarr-bg) !important; } .qs-toggle.qs-toggle-tri[data-net-info="reveal"] { border-color: var(--svc-romarr-trim) !important; background: var(--svc-romarr-bg) !important; } .qs-toggle.qs-toggle-tri[data-net-info="perma"] { border-color: var(--svc-readarr-trim) !important; background: var(--svc-readarr-bg) !important; } .shell.net-info-show [data-eye], .shell.net-info-perma [data-eye] { display: none !important; } /* Instant reveal/hide: both marks painted once. Peek only toggles display. */ [data-eye] .ico-hide-mark { display: none !important; } .status-row.is-peek [data-eye] .ico-reveal-mark, .svc-row.is-peek [data-eye] .ico-reveal-mark { display: none !important; } .status-row.is-peek [data-eye] .ico-hide-mark, .svc-row.is-peek [data-eye] .ico-hide-mark { display: inline !important; } /* Binary trim ALWAYS from visible keyword — hard purple OR hard green; never gold / no-trim */ .qs-toggle:has(.tone-shown:not([hidden]) .tone-romarr), .qs-toggle:has(.tone-hidden:not([hidden]) .tone-romarr) { border-color: var(--svc-romarr-title); background: #240528; } .qs-toggle:has(.tone-shown:not([hidden]) .tone-lidarr), .qs-toggle:has(.tone-hidden:not([hidden]) .tone-lidarr) { border-color: var(--svc-lidarr-title); background: #001008; } .qs-toggle:has(.tone-shown:not([hidden]) .tone-readarr), .qs-toggle:has(.tone-hidden:not([hidden]) .tone-readarr) { border-color: var(--svc-readarr-title); background: #2e050b; } /* ##==============================================================================================================================================================================## ## [START] FETCHARR GRABBER NESTS — nested data-fold + grabber-face LOOK ## ##==============================================================================================================================================================================## */ .fetch-steps { display: flex; flex-direction: column; gap: 0.45rem; margin-top: 0.35rem; } .fetch-step { border: 1px solid var(--borderColor); border-radius: 8px; overflow: hidden; background: var(--dropFill); } .fetch-step-head { display: flex; align-items: center; gap: 0.4rem; width: 100%; box-sizing: border-box; padding: 0.4rem 0.5rem; background: var(--panelFill); color: var(--gold); font-weight: 650; font-size: 0.85rem; } .fetch-step-head > .fetch-step-ico { width: 1.15rem; height: 1.15rem; min-width: 1.15rem; min-height: 1.15rem; flex: 0 0 auto; display: block; overflow: visible; } #tab-fetcharr .fetch-head-badge { position: relative; width: 72px; height: 72px; min-width: 72px; min-height: 72px; flex: 0 0 72px; border-radius: 50%; overflow: hidden; border: 2px solid var(--gold); background: var(--dropFill); box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 25%, transparent); } #tab-fetcharr .fetch-head-badge .fetch-mascot { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } #tab-fetcharr .fetch-head-badge .fetch-mascot[data-mascot="dig"] { opacity: 0; } #tab-fetcharr[data-fetch="run"] .fetch-head-badge .fetch-mascot[data-mascot="trot"] { opacity: 0; } #tab-fetcharr[data-fetch="run"] .fetch-head-badge .fetch-mascot[data-mascot="dig"] { opacity: 1; } #tab-fetcharr .head-copy { max-height: none; gap: 0.35rem; } #tab-fetcharr .head-copy h2 { font-size: 1.28rem; } #tab-fetcharr .head-copy .blurb { max-width: 42rem; line-height: 1.35; } #tab-fetcharr .head-copy > .fetch-acts { margin-left: 0; margin-top: 0.15rem; } #tab-fetcharr .subtab + .subtab { border-left: 1px solid color-mix(in srgb, var(--gold) 40%, transparent); margin-left: 0.15rem; padding-left: 0.55rem; } #tab-fetcharr .subtab.is-on { background: color-mix(in srgb, var(--panelFill) 82%, #000); border-color: color-mix(in srgb, var(--gold) 22%, transparent); } .fetch-run-head { display: flex; align-items: center; gap: 0.45rem; margin: 0.7rem 0.9rem 0.55rem; padding: 0.4rem 0.55rem 0.4rem 0.75rem; border: 1px solid var(--gold); border-radius: 12px; background: #2c2b2a; } .fetch-run-copy { display: flex; align-items: baseline; gap: 0.55rem; min-width: 0; } .fetch-run-title { font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); font-size: 0.92rem; } .fetch-run-last { color: color-mix(in srgb, var(--gold) 78%, #fff); font-size: 0.78rem; font-weight: 500; } .fetch-acts { display: flex; align-items: center; gap: 0.32rem; margin-left: auto; } .fetch-act { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; min-width: 26px; min-height: 26px; flex: 0 0 26px; padding: 0; border-radius: 6px; border: 1px solid var(--gold); background: var(--dropFill); color: var(--gold); box-sizing: border-box; } .fetch-act { position: relative; z-index: 1; cursor: pointer; -webkit-user-select: none; user-select: none; } .fetch-act-ico { display: block; width: 14px; height: 14px; margin: 0 auto; fill: currentColor; color: var(--gold); /* dual must not steal clicks — button is the hit target */ pointer-events: none; } .fetch-act-ico use, .fetch-act-use { /* pack marks own fill; dual-use toggled via opacity — never href rewrite */ fill: unset; pointer-events: none; } /* fetcharr-dual-use-1: both idle+active in DOM; is-live crossfade (~140ms) */ .fetch-act-ico { position: relative; } .fetch-act-use.is-idle, .fetch-act-use.is-active { transition: opacity 140ms ease; } .fetch-act-use.is-idle { opacity: 1; } .fetch-act-use.is-active { opacity: 0; } .fetch-act.is-live .fetch-act-use.is-idle { opacity: 0; } .fetch-act.is-live .fetch-act-use.is-active { opacity: 1; } .fetch-act-use.is-grey { opacity: 0; } .fetch-act.is-greyed { cursor: default; pointer-events: none; } .fetch-act.is-greyed .fetch-act-use.is-idle, .fetch-act.is-greyed .fetch-act-use.is-active { opacity: 0 !important; } .fetch-act.is-greyed .fetch-act-use.is-grey { opacity: 1 !important; } .fetch-act.is-locked { pointer-events: none; } /* single-active chrome: keep naked; do not opacity the whole button */ #tab-fetcharr .fetch-act.is-live { border: none; background: transparent; box-shadow: none; } /* fetcharr-solo-hard-1: no run-play crossfade blink during step solo */ #tab-fetcharr[data-solo-step="1"] .fetch-acts[data-fetch-scope="run"] .fetch-act-use { transition: none !important; } #tab-fetcharr[data-solo-step="1"] .fetch-acts[data-fetch-scope="run"] .fetch-act[data-fetch-act="play"] { /* hard idle — dual active use stays opacity 0 */ } #tab-fetcharr[data-solo-step="1"] .fetch-acts[data-fetch-scope="run"] .fetch-act[data-fetch-act="play"] .fetch-act-use.is-active { opacity: 0 !important; } #tab-fetcharr[data-solo-step="1"] .fetch-acts[data-fetch-scope="run"] .fetch-act[data-fetch-act="play"] .fetch-act-use.is-idle { opacity: 1 !important; } /* Fetcharr act sizes: run bar 28×28; step acts 22×22. P/P/S naked on both scopes. */ .fetch-acts[data-fetch-scope="run"] .fetch-act { width: 28px; height: 28px; min-width: 28px; min-height: 28px; flex: 0 0 28px; border-radius: 6px; } .fetch-acts[data-fetch-scope="run"] .fetch-act .fetch-act-ico { width: 16px; height: 16px; min-width: 16px; min-height: 16px; } .fetch-acts[data-fetch-scope="step"] .fetch-act { width: 22px; height: 22px; min-width: 22px; min-height: 22px; flex: 0 0 22px; border-radius: 5px; } .fetch-acts[data-fetch-scope="step"] .fetch-act .fetch-act-ico { width: 12px; height: 12px; min-width: 12px; min-height: 12px; } .fetch-acts[data-fetch-scope="run"] .fetch-act[data-fetch-act="play"], .fetch-acts[data-fetch-scope="run"] .fetch-act[data-fetch-act="pause"], .fetch-acts[data-fetch-scope="run"] .fetch-act[data-fetch-act="stop"], .fetch-acts[data-fetch-scope="run"] .fetch-act[data-fetch-act="test"], .fetch-acts[data-fetch-scope="run"] .fetch-act[data-fetch-act="restart"], .fetch-acts[data-fetch-scope="run"] .fetch-act[data-fetch-act="settings"], .fetch-acts[data-fetch-scope="step"] .fetch-act[data-fetch-act="play"], .fetch-acts[data-fetch-scope="step"] .fetch-act[data-fetch-act="pause"], .fetch-acts[data-fetch-scope="step"] .fetch-act[data-fetch-act="stop"], .fetch-acts[data-fetch-scope="step"] .fetch-act[data-fetch-act="skip"] { /* fetcharr-step-skip-naked-1: step Skip naked like top run acts — no plaque border */ border: none; border-color: transparent; background: transparent; box-shadow: none; } .fetch-acts[data-fetch-scope="run"] .fetch-act[data-fetch-act="play"] .fetch-act-ico, .fetch-acts[data-fetch-scope="run"] .fetch-act[data-fetch-act="pause"] .fetch-act-ico, .fetch-acts[data-fetch-scope="run"] .fetch-act[data-fetch-act="stop"] .fetch-act-ico, .fetch-acts[data-fetch-scope="run"] .fetch-act[data-fetch-act="test"] .fetch-act-ico, .fetch-acts[data-fetch-scope="run"] .fetch-act[data-fetch-act="restart"] .fetch-act-ico, .fetch-acts[data-fetch-scope="run"] .fetch-act[data-fetch-act="settings"] .fetch-act-ico { width: 26px; height: 26px; min-width: 26px; min-height: 26px; } .fetch-acts[data-fetch-scope="step"] .fetch-act[data-fetch-act="play"] .fetch-act-ico, .fetch-acts[data-fetch-scope="step"] .fetch-act[data-fetch-act="pause"] .fetch-act-ico, .fetch-acts[data-fetch-scope="step"] .fetch-act[data-fetch-act="stop"] .fetch-act-ico, .fetch-acts[data-fetch-scope="step"] .fetch-act[data-fetch-act="skip"] .fetch-act-ico { width: 20px; height: 20px; min-width: 20px; min-height: 20px; } .fetch-acts[data-fetch-scope="run"] .fetch-act[data-fetch-act="play"]:hover, .fetch-acts[data-fetch-scope="run"] .fetch-act[data-fetch-act="pause"]:hover, .fetch-acts[data-fetch-scope="run"] .fetch-act[data-fetch-act="stop"]:hover, .fetch-acts[data-fetch-scope="run"] .fetch-act[data-fetch-act="test"]:hover, .fetch-acts[data-fetch-scope="run"] .fetch-act[data-fetch-act="restart"]:hover, .fetch-acts[data-fetch-scope="run"] .fetch-act[data-fetch-act="settings"]:hover, .fetch-acts[data-fetch-scope="run"] .fetch-act[data-fetch-act="play"]:focus-visible, .fetch-acts[data-fetch-scope="run"] .fetch-act[data-fetch-act="pause"]:focus-visible, .fetch-acts[data-fetch-scope="run"] .fetch-act[data-fetch-act="stop"]:focus-visible, .fetch-acts[data-fetch-scope="run"] .fetch-act[data-fetch-act="test"]:focus-visible, .fetch-acts[data-fetch-scope="run"] .fetch-act[data-fetch-act="restart"]:focus-visible, .fetch-acts[data-fetch-scope="run"] .fetch-act[data-fetch-act="settings"]:focus-visible, .fetch-acts[data-fetch-scope="step"] .fetch-act[data-fetch-act="play"]:hover, .fetch-acts[data-fetch-scope="step"] .fetch-act[data-fetch-act="pause"]:hover, .fetch-acts[data-fetch-scope="step"] .fetch-act[data-fetch-act="stop"]:hover, .fetch-acts[data-fetch-scope="step"] .fetch-act[data-fetch-act="skip"]:hover, .fetch-acts[data-fetch-scope="step"] .fetch-act[data-fetch-act="play"]:focus-visible, .fetch-acts[data-fetch-scope="step"] .fetch-act[data-fetch-act="pause"]:focus-visible, .fetch-acts[data-fetch-scope="step"] .fetch-act[data-fetch-act="stop"]:focus-visible, .fetch-acts[data-fetch-scope="step"] .fetch-act[data-fetch-act="skip"]:focus-visible { border: none; background: transparent; box-shadow: none; /* no opacity/filter — click flash / sibling blink */ } .fetch-acts[data-fetch-scope="run"] .fetch-act[data-fetch-act="play"]:active, .fetch-acts[data-fetch-scope="run"] .fetch-act[data-fetch-act="pause"]:active, .fetch-acts[data-fetch-scope="run"] .fetch-act[data-fetch-act="stop"]:active, .fetch-acts[data-fetch-scope="run"] .fetch-act[data-fetch-act="test"]:active, .fetch-acts[data-fetch-scope="run"] .fetch-act[data-fetch-act="restart"]:active, .fetch-acts[data-fetch-scope="run"] .fetch-act[data-fetch-act="settings"]:active, .fetch-acts[data-fetch-scope="step"] .fetch-act[data-fetch-act="play"]:active, .fetch-acts[data-fetch-scope="step"] .fetch-act[data-fetch-act="pause"]:active, .fetch-acts[data-fetch-scope="step"] .fetch-act[data-fetch-act="stop"]:active, .fetch-acts[data-fetch-scope="step"] .fetch-act[data-fetch-act="skip"]:active { border: none; background: transparent; box-shadow: none; } /* Master pipeline fold: h2 alone, then acts + equal-size fold-chev on a row under it. */ .page-section .sub-block.fetch-run > .sub-head { flex-direction: column; align-items: stretch; gap: 0.4rem; } .page-section .sub-block.fetch-run > .sub-head > .sub-head-row { display: flex; align-items: center; gap: 0.32rem; width: 100%; } .page-section .sub-block.fetch-run > .sub-head > .sub-head-row > .fetch-acts { margin-left: 0; } .page-section .sub-block.fetch-run > .sub-head > .sub-head-row > .fold-chev { margin-left: auto; flex: 0 0 28px; } /* Master pipeline fold hierarchy (3 levels) — never wipe #fetcharr-steps. up = step heads only; exception: step data-fold down|right may show that step body right = step bodies + ALL grabber/explain HEADS (servarr body open); nest bodies closed via nest=up (NOT ungated display:none — nest open down|right always wins / expand-fix) down = full open (no master-forced hides; JS normalize sets nests down) */ .fetch-run[data-fold="up"] > .fetch-steps > .fetch-step > .fetch-step-body { display: none !important; } .fetch-run[data-fold="up"] > .fetch-steps > .fetch-step[data-fold="down"] > .fetch-step-body, .fetch-run[data-fold="up"] > .fetch-steps > .fetch-step[data-fold="right"] > .fetch-step-body { display: flex !important; flex-direction: column; } /* fetch-step-collapse-fix-1: master-right opens step bodies ONLY when step is mid/open. Step data-fold=up must fully collapse (head only) — local step up sticks until master re-cycles. */ .fetch-run[data-fold="right"] > .fetch-steps > .fetch-step[data-fold="up"] > .fetch-step-body, .fetch-run[data-fold="right"] > .fetch-steps > .fetch-step.is-folded > .fetch-step-body { display: none !important; } .fetch-run[data-fold="right"] > .fetch-steps > .fetch-step[data-fold="right"] > .fetch-step-body, .fetch-run[data-fold="right"] > .fetch-steps > .fetch-step[data-fold="down"] > .fetch-step-body { display: flex !important; flex-direction: column; } /* Grabbers live inside servarr body — never hide servarr body on master-right. */ .fetch-run[data-fold="right"] .fetch-servarr-nest > .fetch-step-body { display: flex !important; flex-direction: column; } /* fetch-chev-expand-fix-1: master-right must NOT blanket-hide grabber/explain bodies. Cascade collapses via chevron-fetcharr normalize (sets data-fold=up). Blanked display:none !important blocked click-open while master sat on mid-state. */ .fetch-run[data-fold="right"] .fetch-grabber-nest[data-fold="up"] > .fetch-step-body, .fetch-run[data-fold="right"] .fetch-explain-nest[data-fold="up"] > .fetch-step-body { display: none !important; } .fetch-run[data-fold="right"] .fetch-grabber-nest[data-fold="down"] > .fetch-step-body, .fetch-run[data-fold="right"] .fetch-grabber-nest[data-fold="right"] > .fetch-step-body, .fetch-run[data-fold="right"] .fetch-explain-nest[data-fold="down"] > .fetch-step-body, .fetch-run[data-fold="right"] .fetch-explain-nest[data-fold="right"] > .fetch-step-body { display: flex !important; flex-direction: column; } /* down: leave visibility to per-step / per-nest data-fold rules */ /* Master-down: leave open to nest/step rules, but step=up must still fully collapse */ .fetch-run[data-fold="down"] > .fetch-steps > .fetch-step[data-fold="up"] > .fetch-step-body, .fetch-run[data-fold="down"] > .fetch-steps > .fetch-step.is-folded > .fetch-step-body { display: none !important; } .fetch-run[data-fold="up"] > .sub-head .fold-chev .ui-ico { transform: rotate(180deg); transform-origin: center; } .fetch-run[data-fold="right"] > .sub-head .fold-chev .ui-ico { /* fetch-right-swing-restore-1: Conner reopened right swing (−90°); Play-adjacent mid look accepted */ transform: rotate(-90deg); transform-origin: center; opacity: 1; } .fetch-run[data-fold="down"] > .sub-head .fold-chev .ui-ico { transform: none; opacity: 1; } /* fetch-chev-look-fix-1: Fetcharr fold LOOK — A1 mid-state down-arrow; gold plaque chrome (not svc/grabber accent) */ /* Gold plaque: master + step + explain only. NEVER #tab-fetcharr .fetch-run .fold-chev (descendant matches grabber nests; ID specificity beat grabbers.cs3 accents). */ #tab-fetcharr .fetch-run > .sub-head .fold-chev, #tab-fetcharr .fetch-steps > .fetch-step > .fetch-step-head .fold-chev, #tab-fetcharr .fetch-explain-nest > .fetch-step-head .fold-chev, #tab-fetcharr .fetch-servarr-nest > .fetch-step-head .fold-chev { border: 1px solid var(--gold) !important; background: var(--dropFill) !important; color: var(--gold) !important; box-sizing: border-box; } #tab-fetcharr .fetch-run > .sub-head .fold-chev .ui-ico, #tab-fetcharr .fetch-run > .sub-head .fold-chev .ui-ico-chevron, #tab-fetcharr .fetch-steps > .fetch-step > .fetch-step-head .fold-chev .ui-ico, #tab-fetcharr .fetch-steps > .fetch-step > .fetch-step-head .fold-chev .ui-ico-chevron, #tab-fetcharr .fetch-explain-nest > .fetch-step-head .fold-chev .ui-ico, #tab-fetcharr .fetch-explain-nest > .fetch-step-head .fold-chev .ui-ico-chevron { color: var(--gold) !important; } #tab-fetcharr .fetch-run > .sub-head .fold-chev .ui-ico-svg, #tab-fetcharr .fetch-run > .sub-head .fold-chev .ui-ico-svg use, #tab-fetcharr .fetch-steps > .fetch-step > .fetch-step-head .fold-chev .ui-ico-svg, #tab-fetcharr .fetch-steps > .fetch-step > .fetch-step-head .fold-chev .ui-ico-svg use, #tab-fetcharr .fetch-explain-nest > .fetch-step-head .fold-chev .ui-ico-svg, #tab-fetcharr .fetch-explain-nest > .fetch-step-head .fold-chev .ui-ico-svg use { fill: currentColor !important; color: var(--gold) !important; } /* grabber-chev-accent-win-1: beat site gold — #tab-fetcharr + nest path; --grabber-* from row */ #tab-fetcharr .fetch-grabber-nest > .fetch-step-head .fold-chev { border: 1px solid var(--grabber-trim) !important; background: var(--grabber-bg) !important; color: var(--grabber-title) !important; box-sizing: border-box; } #tab-fetcharr .fetch-grabber-nest > .fetch-step-head .fold-chev .ui-ico, #tab-fetcharr .fetch-grabber-nest > .fetch-step-head .fold-chev .ui-ico-chevron { color: var(--grabber-title) !important; } #tab-fetcharr .fetch-grabber-nest > .fetch-step-head .fold-chev .ui-ico-svg, #tab-fetcharr .fetch-grabber-nest > .fetch-step-head .fold-chev .ui-ico-svg use { fill: currentColor !important; color: var(--grabber-title) !important; } /* Beat global [data-fold=right] > .fetch-step-head -90deg for all Fetcharr pipeline folds */ #tab-fetcharr [data-fold="right"] > .sub-head .fold-chev .ui-ico, #tab-fetcharr [data-fold="right"] > .fetch-step-head .fold-chev .ui-ico { transform: rotate(-90deg) !important; transform-origin: center; opacity: 1; } #tab-fetcharr [data-fold="up"] > .sub-head .fold-chev .ui-ico, #tab-fetcharr [data-fold="up"] > .fetch-step-head .fold-chev .ui-ico { transform: rotate(180deg) !important; transform-origin: center; opacity: 1; } #tab-fetcharr [data-fold="down"] > .sub-head .fold-chev .ui-ico, #tab-fetcharr [data-fold="down"] > .fetch-step-head .fold-chev .ui-ico { transform: none !important; opacity: 1; } .fetch-grip { display: inline-block; width: 10px; height: 16px; flex: 0 0 10px; opacity: 0.55; background-image: radial-gradient(circle, var(--gold) 1.05px, transparent 1.2px); background-size: 5px 5.4px; background-repeat: repeat; } .fetch-steps .fetch-step { background: #1a1510; border: 1px solid color-mix(in srgb, var(--gold) 32%, transparent); border-radius: 10px; } .fetch-steps > .fetch-step > .fetch-step-head { background: #2c2b2a; padding: 0.32rem 0.45rem; gap: 0.45rem; } .fetch-steps > .fetch-step[data-fold="right"] > .fetch-step-head, .fetch-steps > .fetch-step[data-fold="down"] > .fetch-step-head { background: #2c2b2a; } .fetch-steps > .fetch-step > .fetch-step-body { background: #1a1510; } .fetch-steps > .fetch-step > .fetch-step-head .fetch-step-title { flex: 1; min-width: 0; font-weight: 600; font-size: 0.88rem; color: var(--gold); } /* pipe-num-1: #NN is the step's data-step. Do not number from list position. */ #tab-fetcharr .fetch-steps > .fetch-step > .fetch-step-head > .help-step-id, #tab-fetcharr .pipe-steps > .pipe-step > .fetch-step-head > .help-step-id { flex: 0 0 auto; min-width: 2.2rem; margin: 0; font-family: var(--mono); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.02em; line-height: 1; color: var(--gold); white-space: nowrap; font-variant-numeric: tabular-nums; } .fetch-steps > .fetch-step > .fetch-step-head > .fetch-step-ico, .fetch-steps > .fetch-step > .fetch-step-head > .fetch-step-ico.fetch-strip-stage, .fetch-steps > .fetch-step > .fetch-step-head > .fetch-strip-stage { width: 22px; height: 22px; min-width: 22px; min-height: 22px; flex: 0 0 22px; display: block; overflow: visible; } /* Step-row fold chevs (pipeline + nest family): 22×22; trailing fold control far right. */ .fetch-steps > .fetch-step > .fetch-step-head .fold-chev, .fetch-steps .fetch-step-nest > .fetch-step-head .fold-chev, .fetch-steps .fetch-grabber-nest > .fetch-step-head .fold-chev, .fetch-steps .fetch-servarr-nest > .fetch-step-head .fold-chev, .fetch-steps .fetch-explain-nest > .fetch-step-head .fold-chev { margin-left: auto !important; width: 22px !important; height: 22px !important; min-width: 22px !important; min-height: 22px !important; flex: 0 0 22px !important; border-radius: 5px !important; } /* Nest heads need full-width flex row so margin-left:auto on .fold-chev has room. */ .fetch-steps .fetch-step-nest > .fetch-step-head, .fetch-steps .fetch-grabber-nest > .fetch-step-head, .fetch-steps .fetch-servarr-nest > .fetch-step-head, .fetch-steps .fetch-explain-nest > .fetch-step-head, .fetch-steps > .fetch-step > .fetch-step-head { display: flex; align-items: center; width: 100%; box-sizing: border-box; } /* Far-right law: trailing .fold-chev in Fetcharr pipeline/nest heads (beats any leftover 0.15rem). */ #tab-fetcharr .fetch-steps > .fetch-step > .fetch-step-head .fold-chev, #tab-fetcharr .fetch-steps .fetch-step-nest > .fetch-step-head .fold-chev, #tab-fetcharr .fetch-steps .fetch-grabber-nest > .fetch-step-head .fold-chev, #tab-fetcharr .fetch-steps .fetch-servarr-nest > .fetch-step-head .fold-chev, #tab-fetcharr .fetch-steps .fetch-explain-nest > .fetch-step-head .fold-chev { margin-left: auto !important; margin-right: 0 !important; } #tab-fetcharr .fetch-steps .fetch-grabber-nest > .fetch-step-head .fetch-grabber-name, #tab-fetcharr .fetch-steps .fetch-explain-nest > .fetch-step-head .fetch-grabber-name, #tab-fetcharr .fetch-steps .fetch-explain-nest > .fetch-step-head .fetch-explain-head-lead, #tab-fetcharr .fetch-steps > .fetch-step > .fetch-step-head .fetch-step-title { flex: 1 1 auto; min-width: 0; } .fetch-steps > .fetch-step > .fetch-step-head .fold-chev .ui-ico, .fetch-steps > .fetch-step > .fetch-step-head .fold-chev .ui-ico-chevron, .fetch-steps .fetch-step-nest > .fetch-step-head .fold-chev .ui-ico, .fetch-steps .fetch-step-nest > .fetch-step-head .fold-chev .ui-ico-chevron, .fetch-steps .fetch-grabber-nest > .fetch-step-head .fold-chev .ui-ico, .fetch-steps .fetch-grabber-nest > .fetch-step-head .fold-chev .ui-ico-chevron, .fetch-steps .fetch-servarr-nest > .fetch-step-head .fold-chev .ui-ico, .fetch-steps .fetch-servarr-nest > .fetch-step-head .fold-chev .ui-ico-chevron, .fetch-steps .fetch-explain-nest > .fetch-step-head .fold-chev .ui-ico, .fetch-steps .fetch-explain-nest > .fetch-step-head .fold-chev .ui-ico-chevron { width: 9.6px !important; height: 9.6px !important; min-width: 9.6px !important; min-height: 9.6px !important; } .fetch-step[data-current] > .fetch-step-head { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 45%, transparent); } /* ## Date system (universal) — 1d / 3d / 7d / 14d / 30d / Core / Year ## SoT LOOK: legacy Boxarr qrange row. Use .range-chips everywhere; .qrange aliases below. */ .range-chips, .qrange { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin: 0; } .range-chip, .qrange-btn, .qhist { appearance: none; display: inline-flex; align-items: center; justify-content: center; min-width: 2rem; height: auto; padding: 0.28rem 0.55rem; border-radius: 8px; border: 1px solid var(--gold); background: var(--panelFill, var(--dropFill)); color: var(--gold); box-sizing: border-box; font: inherit; font-size: 0.78rem; font-weight: 650; letter-spacing: 0.02em; line-height: 1; cursor: pointer; } .range-chip:hover, .qrange-btn:hover, .qhist:hover { background: color-mix(in srgb, var(--gold) 14%, var(--panelFill, var(--dropFill))); } .range-chip.is-on, .qrange-btn.is-on, .qhist.is-on { background: color-mix(in srgb, var(--gold) 28%, var(--panelFill, var(--dropFill))); color: #f0e6dc; border-color: var(--gold); } .range-chip:disabled, .qrange-btn:disabled { cursor: default; opacity: 1; } .opt-card { margin: 0.55rem 0; padding: 0.5rem 0.75rem 0.65rem; border: 1px solid color-mix(in srgb, var(--gold) 42%, transparent); border-radius: 10px; background: transparent; min-width: 0; } .opt-card > legend { color: var(--gold); padding: 0 0.4rem; font-size: 0.88rem; font-weight: 600; } .opt-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem 1.05rem; } .opt-row-split { margin-top: 0.35rem; align-items: center; } .opt-choice { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--gold); font-size: 0.86rem; } .opt-card input[type="radio"], .opt-card input[type="checkbox"] { accent-color: var(--gold); } .opt-help { margin: 0.45rem 0 0; font-size: 0.8rem; line-height: 1.4; color: var(--textMuted, #a89080); } .opt-help code { color: var(--gold); font-size: 0.78rem; } .opt-row-split .btn { margin-left: auto; } .undo-log-head { display: flex; flex-direction: column; align-items: stretch; gap: 0.4rem; } .undo-log-head h2, .undo-log-head h3 { margin: 0; letter-spacing: 0.08em; text-transform: uppercase; } .undo-log-head .range-chips { margin-left: 0; width: 100%; } /* undo-log-chev-chiprow-1: fold-chev on chip row, far right, chip-scale (not title plaque) */ .undo-log-head .range-chips > .fold-chev { margin-left: auto; width: 1.55rem !important; height: 1.55rem !important; min-width: 1.55rem !important; min-height: 1.55rem !important; flex: 0 0 1.55rem !important; border-radius: 6px !important; padding: 0; } .undo-log-head .range-chips > .fold-chev .ui-ico, .undo-log-head .range-chips > .fold-chev .ui-ico-chevron { width: 0.72rem !important; height: 0.72rem !important; min-width: 0.72rem !important; min-height: 0.72rem !important; } .undo-log-body { padding: 0 0 0.75rem; } .undo-log[data-fold="up"] > .undo-log-body, .sub-block[data-sub="undo"][data-fold="up"] > .undo-log-body { display: none; } .undo-runs { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.55rem; } .undo-run { border: 1px solid color-mix(in srgb, var(--gold) 38%, transparent); border-radius: 10px; background: #2c2b2a; overflow: hidden; } .undo-run-head { display: flex; align-items: center; gap: 0.4rem; padding: 0.38rem 0.5rem; color: var(--gold); font-weight: 600; font-size: 0.86rem; } .undo-run-count { opacity: 0.92; } .undo-run-count::before { content: "\2013\00a0"; } .undo-run-acts { display: flex; align-items: center; gap: 0.28rem; margin-left: auto; } .undo-run-body { padding: 0.35rem 0.55rem 0.5rem; background: #1a1510; } .undo-run[data-fold="up"] > .undo-run-body { display: none; } [data-fold="up"] > .undo-log-head .fold-chev .ui-ico, [data-fold="up"] > .undo-run-head .fold-chev .ui-ico { transform: rotate(180deg); transform-origin: center; } [data-fold="right"] > .undo-log-head .fold-chev .ui-ico, [data-fold="right"] > .undo-run-head .fold-chev .ui-ico { transform: rotate(-90deg); transform-origin: center; } [data-fold="down"] > .undo-log-head .fold-chev .ui-ico, [data-fold="down"] > .undo-run-head .fold-chev .ui-ico { transform: none; } .fetch-step-head .fold-chev { margin-left: auto; color: var(--gold); } /* Fetcharr Step/grabber folds: same LOOK as side-panel — pack sprite arrows in gold, never white fill. */ .fetch-steps .fold-chev .ui-ico, .fetch-steps .fold-chev .ui-ico-chevron, .fetch-grabber-nest .fold-chev .ui-ico, .fetch-grabber-nest .fold-chev .ui-ico-chevron { display: block !important; width: 9.6px; height: 9.6px; min-width: 9.6px; min-height: 9.6px; transform-origin: center; transition: transform 0.16s ease; background: none !important; background-color: transparent !important; -webkit-mask: none !important; mask: none !important; } .fetch-steps > .fetch-step > .fetch-step-head .fold-chev .ui-ico, .fetch-steps > .fetch-step > .fetch-step-head .fold-chev .ui-ico-chevron { color: var(--gold); } .fetch-steps .fold-chev .ui-ico-svg, .fetch-grabber-nest .fold-chev .ui-ico-svg { display: block !important; width: 100%; height: 100%; } .fetch-steps > .fetch-step > .fetch-step-head .fold-chev .ui-ico-svg, .fetch-steps > .fetch-step > .fetch-step-head .fold-chev .ui-ico-svg use { fill: currentColor !important; color: var(--gold) !important; } .fetch-steps [data-fold="up"] > .fetch-step-head .fold-chev .ui-ico { transform: rotate(180deg); transform-origin: center; } .fetch-steps [data-fold="right"] > .fetch-step-head .fold-chev .ui-ico { /* fetch-right-swing-restore-1: mid-state swings right (−90°) with ease transition */ transform: rotate(-90deg); transform-origin: center; opacity: 1; } .fetch-steps [data-fold="down"] > .fetch-step-head .fold-chev .ui-ico { transform: none; } .fetch-step-body { padding: 0.45rem; display: flex; flex-direction: column; gap: 0.35rem; } .fetch-step.is-folded > .fetch-step-body, .fetch-step[data-fold="up"] > .fetch-step-body { display: none; } .fetch-step[data-fold="right"] > .fetch-step-body, .fetch-step[data-fold="down"] > .fetch-step-body { display: flex; } .fetch-step-nest[data-fold="right"] > .fetch-step-body, .fetch-step-nest[data-fold="down"] > .fetch-step-body { display: flex; flex-direction: column; gap: 0.35rem; } .fetch-step-nest { border: 1px solid color-mix(in srgb, var(--gold) 35%, var(--borderColor)); border-radius: 8px; overflow: hidden; background: color-mix(in srgb, var(--sidebarActiveBackground) 80%, var(--panelFill)); margin-left: 0.55rem; } .fetch-step-nest > .fetch-step-head { font-size: 0.8rem; background: color-mix(in srgb, var(--panelFill) 82%, #000); } .fetch-step-nest.is-folded > .fetch-step-body, .fetch-step-nest[data-fold="up"] > .fetch-step-body { display: none; } .fetch-step-leaf { font-size: 0.78rem; color: var(--faint); padding: 0.2rem 0.15rem; } .fetch-grabber-nest .grabber-face { width: 100%; max-width: none; min-width: 0; } .fetch-grabber-nest > .fetch-step-head .look-badge { margin-left: 0.15rem; } /* ?v=fetcharr-step-look-1 — Step → grabber cards (Servarr conceptual/hidden chrome) */ .fetch-step-title { font-weight: 500; color: var(--faint); font-size: 0.8rem; margin-left: 0.15rem; } /* Servarr stays in DOM for idle/hide later — no painted chrome; must not steal grabber trim */ .fetch-servarr-nest { border: none !important; background: transparent !important; margin-left: 0 !important; box-shadow: none !important; overflow: visible; border-radius: 0; } .fetch-servarr-nest > .fetch-step-head { display: none !important; } .fetch-servarr-nest > .fetch-step-body { padding: 0; gap: 0.4rem; } /* Painted grabber card = nest (icon+name+chevron / digest). Colors live in grabbers.cs3. */ .fetch-grabber-nest { margin-left: 0; border: 1px solid var(--borderColor); border-radius: 8px; overflow: hidden; } .fetch-grabber-nest > .fetch-step-head { gap: 0.35rem; } .fetch-grabber-nest > .fetch-step-head .svc-icon { width: 1.05rem; height: 1.05rem; flex: 0 0 auto; } .fetch-grabber-nest > .fetch-step-head .look-badge { display: none !important; /* LOOK lives in body row per Glyph shot */ } .fetch-grabber-name { font-weight: 650; } .fetch-grabber-nest > .fetch-step-body { padding: 0; } /* Flatten inner grabber-face so nest is the single card chrome */ .fetch-grabber-nest .grabber-face, .fetch-grabber-nest .grabber-face-trim { border: none !important; border-radius: 0; background: transparent !important; box-shadow: none; } .fetch-grabber-nest .grabber-face-head { display: none !important; /* name already in nest head */ } .fetch-grabber-nest .grabber-face-body { display: flex; align-items: center; justify-content: flex-start; gap: 0.75rem; padding: 0.4rem 0.55rem; color: #fff; font-size: 0.78rem; } .fetch-grabber-nest .grabber-face-label { min-width: auto; font-weight: 650; opacity: 1; } /* paint-stub-1: digest status wraps. Existing classes only. No chevron change. */ .fetch-grabber-nest .grabber-face-row { flex-wrap: wrap; width: 100%; } .fetch-grabber-nest .grabber-face-status { flex: 1 1 12rem; line-height: 1.35; min-width: 0; white-space: normal; } /* Fetcharr explain nest — same gold/brown as Connection Status side-cards (not grabber table cyan). */ .fetch-explain-nest { margin-left: 0; border: 1px solid var(--borderColor); border-radius: 10px; overflow: hidden; background: var(--cardBackground); } .fetch-explain-nest > .fetch-step-head { background: var(--panelFill); color: var(--gold); border-bottom: 1px solid color-mix(in srgb, var(--gold) 22%, transparent); } .fetch-explain-nest > .fetch-step-head .svc-icon { width: 1.15rem; height: 1.15rem; flex: 0 0 auto; } .fetch-explain-nest > .fetch-step-head .fetch-grabber-name, .fetch-explain-nest > .fetch-step-head .fetch-explain-head-lead { color: var(--gold); } .fetch-explain-nest > .fetch-step-head .fold-chev, .fetch-explain-nest > .fetch-step-head .fold-chev .ui-ico, .fetch-explain-nest > .fetch-step-head .fold-chev .ui-ico-chevron, .fetch-explain-nest > .fetch-step-head .fold-chev .ui-ico-svg, .fetch-explain-nest > .fetch-step-head .fold-chev .ui-ico-svg use { color: var(--gold) !important; fill: currentColor !important; } .fetch-explain-nest > .fetch-step-body { padding: 0.5rem 0.65rem 0.6rem; background: var(--dropFill); /* display comes from nest data-fold rules — never force block while folded */ } .fetch-explain-nest[data-fold="up"] > .fetch-step-body, .fetch-explain-nest.is-folded > .fetch-step-body { display: none !important; } .fetch-explain-nest[data-fold="down"] > .fetch-step-body, .fetch-explain-nest[data-fold="right"] > .fetch-step-body { display: block !important; } /* step-empty-1: Servarr frame under the explain nest. It replaces grabbers. The explanation stays. */ .fetch-step .step-empty-card { border: 1px solid var(--svc-servarr-trim); border-radius: 10px; background: color-mix(in srgb, var(--svc-servarr-bg) 55%, #120c0a); box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 4%, transparent); margin: 0; } .fetch-step .step-empty-card h3 { display: flex; align-items: center; gap: 0.45rem; margin: 0; padding: 0.35rem 0.7rem; font-size: 0.88rem; font-weight: 650; letter-spacing: 0.04em; text-transform: uppercase; color: var(--svc-servarr-title); border-bottom: 1px solid var(--svc-servarr-trim); } .fetch-step .step-empty-card h3 .svc-icon { width: 22px; height: 22px; flex: 0 0 22px; } .fetch-step .step-empty-card h3 .svc-icon svg { width: 22px; height: 22px; } .fetch-step .step-empty-card .qcard-body { height: auto; min-height: 0; } .fetch-step .step-empty-card ul { list-style: none; margin: 0; padding: 0; max-height: none; } .fetch-step .step-empty-card li { padding: 0.55rem 0.7rem; font-size: 0.84rem; line-height: 1.35; color: color-mix(in srgb, var(--svc-servarr-title) 28%, #f0e6dc); border: 0; } .fetch-step[data-step-empty="1"] > .fetch-step-body > .fetch-servarr-nest { display: none !important; } .shell.hide-fetch-explain .fetch-explain-nest { display: none !important; } .fetch-explain-head-lead { font-weight: 500; font-size: 0.78rem; opacity: 0.88; } .fetch-explain-does { margin: 0 0 0.45rem; color: var(--gold); font-weight: 650; font-size: 0.82rem; line-height: 1.4; } .fetch-explain-k { margin: 0.35rem 0 0.15rem; color: var(--gold); font-weight: 650; font-size: 0.75rem; letter-spacing: 0.02em; text-transform: uppercase; } .fetch-explain-list { margin: 0 0 0.35rem; padding-left: 1.15rem; color: var(--textColor); font-size: 0.78rem; line-height: 1.4; } .fetch-explain-list li { margin: 0.12rem 0; } .fetch-explain-note { margin: 0.35rem 0 0; font-size: 0.74rem; opacity: 0.8; color: var(--gold); } /* fetch-chev-expand-fix-1b: grabber open always wins over master hierarchy hides */ #tab-fetcharr .fetch-grabber-nest[data-fold="down"] > .fetch-step-body, #tab-fetcharr .fetch-grabber-nest[data-fold="right"] > .fetch-step-body { display: flex !important; flex-direction: column; } #tab-fetcharr .fetch-grabber-nest[data-fold="up"] > .fetch-step-body, #tab-fetcharr .fetch-grabber-nest.is-folded > .fetch-step-body { display: none !important; } /* ##==============================================================================================================================================================================## ## [END] FETCHARR GRABBER NESTS — nested data-fold + grabber-face LOOK ## ##==============================================================================================================================================================================## */ /* ##==============================================================================================================================================================================## ## [START] MAIN PANEL — 07-MAIN-PANEL-TABS ## ##==============================================================================================================================================================================## */ /* fetch-sticky-scroll-restore-1: reaffirm scrollport + sticky heads (after comment-fence poison) */ .main-slot { min-width: 0; min-height: 0; display: flex; } .main-card { flex: 1; display: grid; grid-template-rows: auto 1fr; overflow: hidden; min-height: 0; } .page-scroll { overflow: auto; min-height: 0; } .page-section .panel-head { position: sticky; top: 0; z-index: 4; } .page-section .sub-block { overflow: visible; } .page-section .sub-block > .sub-head { position: sticky; top: var(--page-head, 0px); z-index: 3; } .main-slot { min-width: 0; min-height: 0; padding: 0.55rem 0.65rem 0.65rem 0.35rem; display: flex; } .main-card { flex: 1; display: grid; grid-template-rows: auto 1fr; background: var(--mainFill); border: 1px solid var(--gold); border-radius: 14px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(204, 163, 127, 0.25); overflow: hidden; min-height: 0; } .tabs { display: flex; gap: 0.25rem; padding: 0.55rem 1.1rem 0; border-bottom: 1px solid color-mix(in srgb, var(--gold) 35%, transparent); background: var(--mainFill); align-items: stretch; flex-wrap: wrap; overflow: visible; } .tab { appearance: none; background: transparent; color: var(--muted); padding: 0.65rem 0.9rem; border: none; border-bottom: 2px solid transparent; border-radius: 8px 8px 0 0; display: inline-flex; align-items: center; gap: 0.35rem; } .tab:hover { color: var(--text); background: var(--tab-wash); } .tab.is-on { color: var(--text); border-bottom-color: var(--gold); background: var(--tab-wash); } .page-fn-icon { width: 18px; height: 18px; object-fit: contain; } /* Page plaque header icons — always 72×72 (all operator tabs). Tab-strip .page-fn-icon stays small. */ .panel-head .page-fn-icon, .panel-head .page-fn-icon.is-sprite, .panel-head .head-mark .page-fn-icon, .panel-head .fetch-head-badge { width: 72px !important; height: 72px !important; min-width: 72px !important; min-height: 72px !important; flex: 0 0 72px !important; object-fit: contain; } .panel-head .page-fn-icon.is-sprite .page-fn-svg, .panel-head .page-fn-icon.is-sprite svg, .panel-head .fetch-head-badge .fetch-mascot, .panel-head .fetch-head-badge svg { width: 100% !important; height: 100% !important; } .page-scroll { overflow: auto; scroll-behavior: smooth; min-height: 0; padding: 0; scrollbar-width: none; -ms-overflow-style: none; } .page-scroll::-webkit-scrollbar { width: 0; height: 0; display: none; } .panel { display: block; padding: 0 0 0.5rem; } .panel.page-section { display: none; padding: 0 0 1rem; min-height: 100%; box-sizing: border-box; background: linear-gradient(var(--sec-wash), var(--sec-wash)), var(--mainFill); scroll-margin-top: 0; --nest-stick: var(--head-stick); --nest-gap: var(--sub-gap); } .panel.page-section.is-on, .panel.page-section.is-current { display: block; } .panel.page-section.is-current { --page-head: 72px; } .page-section .panel-head { position: sticky; top: 0; z-index: 4; display: flex; flex-direction: column; align-items: stretch; gap: 0.35rem; margin: 0 1.25rem var(--sub-gap, 0.75rem); padding: 0.85rem 1.25rem 0.55rem; background: #1a1510; border: 1px solid var(--gold); border-radius: 14px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(204, 163, 127, 0.22); /* Never transition margin/top — layout animation + pinHeads = shake/bounce. */ transition: border-radius 0.16s ease, box-shadow 0.16s ease; } .page-section.is-current .panel-head { box-shadow: 0 8px 22px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(204, 163, 127, 0.3); } .page-section:has(> .panel-head.is-stuck) { --nest-stick: 0px; --nest-gap: 0px; } .page-section .panel-head.is-stuck { top: 0; /* Full-bleed sides; no bottom gap so nested .sub-head can sit flush under plaque. */ margin-left: 0; margin-right: 0; margin-bottom: 0; border-top: 0; border-left: 0; border-right: 0; border-bottom: 1px solid var(--gold); border-radius: 0; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.38); background: #1a1510; } /* ## Site-wide sub-head morph (Fetcharr pattern on every operator tab) ## · .panel-head sticks at top of #page-scroll (already global) ## · .sub-block > .sub-head sticks under --page-head; .is-stuck full-bleeds under plaque */ .page-section .sub-block { overflow: visible; scroll-margin-top: var(--page-head, 0px); } .page-section .sub-block > .sub-head { position: sticky; top: var(--page-head, 0px); z-index: 3; display: flex; flex-direction: column; align-items: stretch; gap: 0.4rem; background: #1a1510; } .page-section .sub-block > .sub-head > h2 { margin: 0; } .page-section .sub-block > .sub-head > .fetch-acts { margin-left: 0; } .page-section .sub-block > .sub-head.is-stuck { border-radius: 0; margin-left: -1.25rem; margin-right: -1.25rem; margin-bottom: 0; padding-left: 1.25rem; padding-right: 1.25rem; border-bottom: 1px solid var(--gold); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.38); } .page-section .sub-block:has(> .sub-head.is-stuck) { border-top-left-radius: 0; border-top-right-radius: 0; border-top-color: transparent; } .page-section .sub-block > .sub-head.undo-log-head { flex-direction: column; align-items: stretch; gap: 0.4rem; } .page-section .sub-block > .sub-head > .range-chips { margin-left: 0; } .page-section.is-current .panel-head.is-stuck { box-shadow: 0 8px 16px rgba(0, 0, 0, 0.38); } .panel-head { display: flex; flex-direction: column; align-items: stretch; gap: 0.35rem; } .head-row { display: flex; align-items: flex-start; gap: 0.55rem; } .head-copy { display: flex; flex-direction: column; gap: 0.1rem; max-height: 72px; } .head-copy h2 { margin: 0; font-size: 1.05rem; color: var(--gold); } .head-copy .blurb { margin: 0; color: var(--muted); font-size: 0.82rem; } .subtabs { display: flex; flex-wrap: wrap; align-items: center; gap: 0.15rem; margin-top: 0.15rem; } .subtab { appearance: none; border: 1px solid transparent; background: transparent; color: var(--gold); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.72rem; padding: 0.12rem 0.38rem; border-radius: 4px; } .subtab:hover, .subtab.is-on { background: var(--sec-wash); border-color: color-mix(in srgb, var(--gold) 35%, transparent); } /* Nested card chrome aligned to live .sub-block (also reinforced in operator-tabs.cs3) */ .sub-block { border: 1px solid var(--gold); border-radius: 14px; background: var(--dropFill, var(--cardBackground)); padding: 0 0 0.85rem; margin: 0 1.25rem 1.1rem; min-height: 0; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(204, 163, 127, 0.22); } /* LOOK sticky demo fill — empty sections still scroll past plaque stick threshold */ .panel.page-section.is-on::after, .panel.page-section.is-current::after { content: ""; display: block; height: max(40vh, 14rem); } .sub-block h3 { margin: 0 0 0.35rem; color: var(--gold); font-size: 0.95rem; } .placeholder-note { color: var(--muted); font-size: 0.85rem; } .look-badge { display: inline-block; padding: 0.1rem 0.4rem; border-radius: 4px; border: 1px solid var(--borderColor); color: var(--faint); font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; } /* Control panel jump rail */ .control-layout { display: grid; grid-template-columns: 200px 1fr; gap: 0.65rem; min-height: 420px; } .control-jump { border: 1px solid var(--borderColor); border-radius: 10px; background: var(--dropFill); padding: 0.45rem; display: flex; flex-direction: column; gap: 0.25rem; align-self: start; position: sticky; top: 0.35rem; } .control-jump button { appearance: none; border: 1px solid transparent; background: transparent; color: var(--gold); text-align: left; padding: 0.35rem 0.45rem; border-radius: 6px; font-size: 0.8rem; } .control-jump button.is-on, .control-jump button:hover { background: var(--control-sec-wash); border-color: color-mix(in srgb, #f05050 40%, var(--gold)); } .control-forms .form-section { border: 1px solid var(--borderColor); border-radius: 10px; margin-bottom: 0.55rem; overflow: hidden; } .form-section-head { display: flex; align-items: center; gap: 0.4rem; padding: 0.45rem 0.55rem; background: color-mix(in srgb, var(--panelFill) 70%, #5a1a1a); color: var(--gold); font-weight: 650; } .form-section-head .fold-chev { margin-left: auto; } .form-section-body { padding: 0.65rem; background: var(--dropFill); } .form-section.is-folded .form-section-body, .form-section[data-fold="up"] .form-section-body { display: none; } .form-section[data-fold="down"] .form-section-body, .form-section[data-fold="right"] .form-section-body { display: block; } .form-row { display: grid; grid-template-columns: 9rem 1fr; gap: 0.5rem; margin-bottom: 0.45rem; align-items: center; } .form-row label { color: var(--muted); font-size: 0.82rem; } .form-row input, .form-row select { background: var(--inputBackground); border: 1px solid var(--borderColor); color: var(--text); border-radius: 8px; padding: 0.35rem 0.5rem; } .form-actions { display: flex; gap: 0.45rem; margin-top: 0.65rem; } .btn { appearance: none; border: 1px solid var(--gold); background: var(--dropFill); color: var(--gold); border-radius: 8px; padding: 0.4rem 0.75rem; } .btn:hover { background: var(--themePrimary); color: #d7ccc8; } .btn-go { border-color: #4caf50; color: #a5d6a7; } .btn-stop { border-color: #f05050; color: #ef9a9a; } /* [local-mobile-swipe-2] Prefer Copy mobile/responsive @media from SoT D:\Sites\Boxarr\webui\app\boxarr\boxarr.css (max-800 / max-860 / max-900). Replaces Boxarr.test vintage max-900 only. .main-slot co-selected with SoT .main for local markup. */ @media (max-width: 800px) { .logs-layout { grid-template-columns: 1fr; } } @media (max-width: 860px) { html, body { height: 100%; height: 100dvh; overflow: hidden; overscroll-behavior: none; -webkit-text-size-adjust: 100%; } .shell { display: flex; flex-direction: column; height: 100%; height: 100dvh; grid-template-columns: none; grid-template-rows: none; } .shell.is-sidebar-off { grid-template-columns: none; } .topbar { flex: 0 0 auto; min-height: 48px; padding-top: env(safe-area-inset-top); width: 100%; } .pager { display: flex; flex: 1; min-height: 0; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; overscroll-behavior-x: contain; } .pager::-webkit-scrollbar { width: 0; height: 0; display: none; } .sidebar-slot { flex: 0 0 100%; width: 100%; min-width: 100%; max-width: 100%; height: 100%; min-height: 0; padding: 0; overflow: hidden; box-sizing: border-box; scroll-snap-align: start; scroll-snap-stop: always; } .sidebar-slot > .sidebar { width: 100%; height: 100%; min-height: 100%; border-radius: 0; } .sidebar-slot .sidebar-stage, .sidebar-slot .sidebar-face { border-radius: 0; } .sidebar-slot .sidebar-face { padding-bottom: calc(48px + env(safe-area-inset-bottom)); } .sidebar-chevron, .sidebar-rail { display: none !important; } .main, .main-slot { display: contents; padding: 0; grid-column: auto; } .main-card { display: contents; overflow: visible; } .tabs { display: none !important; } .page-scroll { display: contents; overflow: visible; } .page-section { flex: 0 0 100%; width: 100%; min-width: 100%; max-width: 100%; height: 100%; min-height: 0; box-sizing: border-box; overflow-x: hidden; overflow-y: auto; scroll-snap-align: start; scroll-snap-stop: always; overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; padding-bottom: calc(56px + env(safe-area-inset-bottom)); scrollbar-width: none; } .page-section::-webkit-scrollbar { width: 0; height: 0; display: none; } .page-section .panel-head { top: 0; } /* [local-mobile-swipe-2] SoT keeps all .page-section in flow for pager snap. Local desktop uses .panel.page-section { display:none } + .is-on { display:block }. Without this override, only the current tab exists as a flex snap page - no left/right swipe. */ .panel.page-section, .panel.page-section.is-on, .panel.page-section.is-current { display: block; } /* SoT has no LOOK sticky demo ::after; filler fights phone page-section height/scroll (Metarr/metadata mess). */ .panel.page-section.is-on::after, .panel.page-section.is-current::after { content: none; display: none; height: 0; } .log-wrap, .log-wrap.job-box { position: fixed; left: 0; right: 0; bottom: 0; z-index: 12; width: 100%; max-height: 32vh; min-height: 0; border-radius: 0; padding-bottom: env(safe-area-inset-bottom); } } #tab-queue .qtitle-link { display: inline-flex; align-items: center; color: inherit; text-decoration: none; } #tab-queue .qtitle-link h2 { margin: 0; } #tab-queue .qtitle-link:hover { filter: brightness(1.12); } .undo-head { display: flex; flex-direction: column; align-items: stretch; gap: 0.35rem; } .undo-head .sub-head-row { display: flex; align-items: center; gap: 0.55rem; width: 100%; min-width: 0; } .undo-head h2 { margin: 0; } .undo-head #undo-fold-all { margin-left: auto; } .undo-fold-ico { transform: rotate(90deg); /* up = collapsed (current state) */ transition: transform 0.16s ease; } #undo-fold-all[data-fold="collapsed"] .undo-fold-ico { transform: rotate(90deg); /* up */ } #undo-fold-all[data-fold="headers"] .undo-fold-ico { transform: rotate(180deg); /* right = one tier */ } #undo-fold-all[data-fold="subs"] .undo-fold-ico { transform: rotate(-90deg); /* down = all */ } .undo-head .qrange { margin: 0; justify-content: flex-start; justify-self: start; } .page-section > .sub-block .help-text { margin: 0 0 0.12rem; line-height: 1.45; } .page-section > .sub-block .help-example, .page-section > .sub-block .help-aliases { margin: 0.08rem 0 0.12rem; font-size: 0.84rem; } .page-section > .sub-block .help-example code, .page-section > .sub-block .help-aliases code { font-family: var(--mono); font-size: 0.82rem; color: var(--gold); word-break: break-word; } .page-section > .sub-block .help-aliases { margin-bottom: 0.35rem; } .page-section > .sub-block .help-aliases code { margin-right: 0.4rem; } .page-section > .sub-block .help-verbs { list-style: none; margin: 0.65rem 0 0; padding: 0 0 0.15rem 0.95rem; border-left: 1px solid rgba(204, 163, 127, 0.22); } .page-section > .sub-block .help-verbs li { padding: 0.1rem 0 0.55rem; } .page-section > .sub-block .help-verbs li:last-child { padding-bottom: 0.1rem; } .page-section[data-tab="help"] .inner-card code { font-family: var(--mono); font-size: 0.86em; color: var(--gold); word-break: break-word; } .help-steps { display: flex; flex-direction: column; gap: 1.15rem; margin-top: 1rem; } .help-step h3 { margin: 0 0 0.35rem; display: flex; flex-wrap: wrap; gap: 0.45rem 0.55rem; align-items: center; } .help-step-ico, .help-cmd-ico, .help-gloss-ico { width: 28px; height: 28px; flex: 0 0 28px; object-fit: contain; display: block; overflow: hidden; } svg.help-step-ico.is-sprite, .help-step-ico.is-sprite { width: 28px; height: 28px; flex: 0 0 28px; overflow: hidden; } .help-step-strip { display: flex; flex-wrap: wrap; gap: 0.45rem 0.55rem; list-style: none; margin: 0 0 1rem; padding: 0.65rem 0.7rem; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-2); } .help-step-strip li { margin: 0; } .help-step-strip a { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; min-width: 2.35rem; color: var(--gold); text-decoration: none; } .help-step-strip a:hover .help-step-id, .help-step-strip a:focus-visible .help-step-id { text-decoration: underline; } .help-step-id { font-family: var(--mono); font-size: 0.86em; color: var(--gold); font-weight: 650; } .help-step p { margin: 0 0 0.4rem; line-height: 1.5; } .help-step ul { margin: 0; padding: 0 0 0 1.15rem; } .help-step li { margin: 0 0 0.28rem; line-height: 1.45; } .help-verb-group { margin: 1.1rem 0 0; padding-top: 0.85rem; border-top: 1px solid rgba(204, 163, 127, 0.18); } .help-verb-group:first-child { margin-top: 0.85rem; } .help-verb-group h3 { margin: 0 0 0.3rem; font-family: var(--mono); font-size: 1.02rem; color: var(--gold); display: flex; align-items: center; gap: 0.5rem; } .help-glossary { margin: 0.85rem 0 0; columns: 2; column-gap: 2rem; } .help-glossary > div { break-inside: avoid; margin: 0 0 0.85rem; } .help-glossary dt { font-weight: 650; margin: 0; display: flex; align-items: center; gap: 0.4rem; } .help-glossary dd { margin: 0.18rem 0 0; line-height: 1.5; } @media (max-width: 900px) { .help-glossary { columns: 1; } } /* ##==============================================================================================================================================================================## ## [START] QS HIDE CLASSES — Network Board / General WebUI face prefs ## ##==============================================================================================================================================================================## */ .shell.hide-help-tab .tab[data-tab="help"], .shell.hide-help-tab #tab-help, .shell.hide-bug-tab .tab[data-tab="bugs"], .shell.hide-bug-tab #tab-bugs { display: none !important; } /* conn-fix-1: board stays flex for scroll; cards do not shrink */ .sidebar-face.sidebar-face-board { display: flex !important; flex-direction: column !important; transform: none; } .sidebar-face.sidebar-face-board > .side-card, .sidebar-face.sidebar-face-board > .svc-bucket { display: block; float: none; position: relative !important; flex: none !important; height: auto !important; max-height: none !important; min-height: 0 !important; margin-bottom: 0.55rem !important; } /* Cards clip to radius so head/body fills don't square-cut the border (Metarr corners) */ .sidebar-face.sidebar-face-board > .side-card { overflow: hidden !important; border-radius: 10px !important; } .sidebar-face.sidebar-face-board > .side-card:has(.acts-icons) { overflow: visible !important; } .sidebar-face.sidebar-face-board > .svc-bucket { overflow: hidden !important; } .sidebar-face.sidebar-face-board > .side-card > .side-card-head { border-radius: 9px 9px 0 0; } .sidebar-face.sidebar-face-board > .side-card > .side-card-body { border-radius: 0 0 9px 9px; } /* conn-fields-unmerge: Services/Admin get same card chrome as Connection cards */ .sidebar-face.sidebar-face-board > .svc-bucket { border: 1px solid var(--borderColor) !important; border-radius: 10px !important; background: var(--cardBackground) !important; padding: 0 !important; } .sidebar-face.sidebar-face-board > .svc-bucket > .svc-bucket-head { display: flex !important; position: relative !important; height: auto !important; min-height: 2rem !important; align-items: center !important; gap: 0.45rem !important; padding: 0.4rem 0.5rem !important; margin: 0 !important; color: var(--gold) !important; background: var(--panelFill) !important; font-size: 0.85rem !important; font-weight: 650 !important; border-radius: 9px 9px 0 0 !important; } .sidebar-face.sidebar-face-board > .svc-bucket[data-fold="up"] > .svc-bucket-head { border-radius: 9px !important; } .sidebar-face.sidebar-face-board > .svc-bucket > .svc-bucket-body { margin: 0 !important; border-radius: 0 0 9px 9px !important; background: var(--dropFill) !important; } /* header-ico-4: brand row keeps flex — collapse arrow top-right like section fold-chevs */ .sidebar-face.sidebar-face-board > .side-top { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: flex-start !important; justify-content: space-between !important; gap: 0.6rem !important; float: none; position: relative !important; flex: none !important; height: auto !important; max-height: none !important; min-height: 0 !important; overflow: visible !important; margin-bottom: 0.55rem !important; padding: 0.15rem 0 0.1rem !important; } .sidebar-face.sidebar-face-board > .side-top .brand { display: flex !important; align-items: center !important; min-width: 0 !important; flex: 1 1 auto !important; } .sidebar-face.sidebar-face-board > .side-top .sidebar-chevron { margin-left: auto !important; margin-top: 0 !important; align-self: flex-start !important; flex: 0 0 auto !important; } .sidebar-face.sidebar-face-board > .side-card > .side-card-head { display: flex !important; position: relative !important; height: auto !important; min-height: 2rem !important; align-items: center !important; gap: 0.45rem !important; padding: 0.4rem 0.5rem !important; color: var(--gold) !important; background: var(--panelFill) !important; font-size: 0.85rem !important; font-weight: 650 !important; } .sidebar-face.sidebar-face-board > .side-card-mesh > .side-card-head { color: #e043fa !important; background: color-mix(in srgb, #290030 55%, var(--panelFill)) !important; } .sidebar-face.sidebar-face-board > .side-card > .side-card-body { display: block !important; position: relative !important; height: auto !important; padding: 0.35rem 0.45rem 0.5rem !important; background: var(--dropFill) !important; } .sidebar-face.sidebar-face-board > .side-card-mesh > .side-card-body { background: var(--dropFill) !important; color: #e043fa !important; } .sidebar-face.sidebar-face-board > .side-card[data-fold="up"] > .side-card-body, .sidebar-face.sidebar-face-board > .side-card.is-folded > .side-card-body { display: none !important; } .sidebar-face.sidebar-face-board .fold-chev { display: inline-flex !important; position: relative !important; margin-left: auto !important; width: 26px !important; height: 26px !important; min-width: 26px !important; min-height: 26px !important; padding: 0 !important; border-radius: 6px !important; border: 1px solid var(--gold) !important; background: var(--dropFill) !important; color: var(--gold) !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; flex: 0 0 26px !important; } .sidebar-face.sidebar-face-board .fold-chev .ui-ico, .sidebar-face.sidebar-face-board .fold-chev .ui-ico-chevron { display: block !important; width: 14px !important; height: 14px !important; min-width: 14px !important; min-height: 14px !important; background: none !important; -webkit-mask: none !important; mask: none !important; } .sidebar-face.sidebar-face-board .side-card[data-fold="up"] .fold-chev .ui-ico { transform: rotate(180deg); } .sidebar-face.sidebar-face-board .side-card[data-fold="right"] .fold-chev .ui-ico { transform: rotate(-90deg); } .sidebar-face.sidebar-face-board .side-card[data-fold="down"] .fold-chev .ui-ico { transform: none; } /* conn-look-3: fold-arrow base size/mask (CS3 owns LOOK; no inline) */ .sidebar-face-board .fold-chev .fold-arrow { display: block; width: 12px; height: 12px; min-width: 12px; min-height: 12px; flex: 0 0 12px; margin: 0; background: none; -webkit-mask: none; mask: none; } /* conn-look-3: Connection fold arrows from Conner SoT masks (arrows-interface.svg derived) */ .sidebar-face-board .side-card[data-fold="up"] .fold-arrow { -webkit-mask-image: none !important; mask-image: none !important; -webkit-mask-size: contain !important; mask-size: contain !important; -webkit-mask-repeat: no-repeat !important; mask-repeat: no-repeat !important; -webkit-mask-position: center !important; mask-position: center !important; } .sidebar-face-board .side-card[data-fold="right"] .fold-arrow { -webkit-mask-image: none !important; mask-image: none !important; -webkit-mask-size: contain !important; mask-size: contain !important; -webkit-mask-repeat: no-repeat !important; mask-repeat: no-repeat !important; -webkit-mask-position: center !important; mask-position: center !important; } .sidebar-face-board .side-card[data-fold="down"] .fold-arrow { -webkit-mask-image: none !important; mask-image: none !important; -webkit-mask-size: contain !important; mask-size: contain !important; -webkit-mask-repeat: no-repeat !important; mask-repeat: no-repeat !important; -webkit-mask-position: center !important; mask-position: center !important; } .shell.hide-connection-panel [data-panel="connection"] { display: none !important; } .shell.hide-bridge-panel [data-panel="bridge"] { display: none !important; } .shell.hide-privacy-panel [data-panel="privacy"] { display: none !important; } .shell.hide-mesh-panel [data-panel="mesh"] { display: none !important; } .shell.hide-jobs-ledger [data-panel="jobs"], .shell.hide-jobs-ledger .side-card-ledger { display: none !important; } .shell.hide-color-key [data-panel="key"] { display: none !important; } .shell.hide-services-panel [data-panel="servarr-stack"] { display: none !important; } .shell.hide-media-servers-panel [data-panel="media-servers"] { display: none !important; } .shell.hide-svc-vpn-panel [data-panel="svc-vpn"] { display: none !important; } .shell.hide-tools-panel [data-panel="svc-tools"] { display: none !important; } .shell.hide-admin-panel [data-panel="admin"], .shell.hide-admin-panel [data-panel="svc-admin"] { display: none !important; } /* Master QS: only installed/configured apps (Sportarr Install rows, etc.) */ .shell.show-installed-only .svc-row[data-family="not-installed"], .shell.show-installed-only .svc-row[data-family="not-configured"], .shell.show-installed-only .svc-row:has(> .svc-install), .shell.show-installed-only .fetch-grabber-nest[data-family="not-installed"], .shell.show-installed-only .fetch-grabber-nest[data-family="not-configured"], .shell.show-installed-only #tab-queue .qstack-card[data-family="not-installed"], .shell.show-installed-only #tab-queue .qstack-card[data-family="not-configured"], .shell.show-installed-only #tab-queue .subtab[data-family="not-installed"], .shell.show-installed-only #tab-queue .subtab[data-family="not-configured"] { display: none !important; } .shell.hide-unconfigured-svc .svc-row[data-family="not-configured"], .shell.hide-unconfigured-svc .svc-row .paren-meta:is(:lang(en)) { /* rows marked not-configured */ } .shell.hide-unconfigured-svc .svc-row[data-family="not-configured"], .shell.hide-unconfigured-grabbers .fetch-grabber-nest[data-family="not-configured"], .shell.hide-unconfigured-svc #tab-queue .qstack-card[data-family="not-configured"], .shell.hide-unconfigured-svc #tab-queue .subtab[data-family="not-configured"] { display: none !important; } .shell.hide-uninstalled-svc .svc-row[data-family="not-installed"], .shell.hide-uninstalled-svc .svc-row:has(> .svc-install), .shell.hide-uninstalled-grabbers .fetch-grabber-nest[data-family="not-installed"], .shell.hide-uninstalled-svc #tab-queue .qstack-card[data-family="not-installed"], .shell.hide-uninstalled-svc #tab-queue .subtab[data-family="not-installed"] { display: none !important; } .shell.hide-disabled-svc .svc-row.is-disabled { display: none !important; } /* cred-face-2 / conn-svc-rows-1: catalog rows stay hidden until a live credential twin marks .is-cred-live */ .svc-nest[data-panel="servarr-stack"] .svc-row-rich[data-svc]:not(.is-cred-live), .svc-nest[data-panel="media-servers"] .svc-row-rich[data-svc]:not(.is-cred-live), .svc-nest[data-panel="svc-vpn"] .svc-row-rich[data-svc]:not(.is-cred-live), .svc-nest[data-panel="svc-tools"] .svc-row-rich[data-svc]:not(.is-cred-live), .svc-nest[data-panel="svc-admin"] .svc-row-rich[data-svc]:not(.is-cred-live), .svc-nest[data-panel="deprecated"] .svc-row-rich[data-svc]:not(.is-cred-live), .fetch-grabber-nest[data-grabber]:not(.is-cred-live), .fetch-step-light-grab[data-grabber]:not(.is-cred-live), .fetch-step-light-dl:not(.is-cred-live), .svc-nest[data-panel="servarr-stack"]:not(:has(.is-cred-live)), .svc-nest[data-panel="media-servers"]:not(:has(.is-cred-live)), .svc-nest[data-panel="svc-vpn"]:not(:has(.is-cred-live)), .svc-nest[data-panel="svc-tools"]:not(:has(.is-cred-live)), .svc-nest[data-panel="svc-admin"]:not(:has(.is-cred-live)), .svc-nest[data-panel="deprecated"]:not(:has(.is-cred-live)), .svc-bucket[data-panel="services"]:not(:has(.is-cred-live)), .fetch-servarr-nest:not(:has(.fetch-grabber-nest.is-cred-live)), #tab-queue .qstack-card:not(.is-cred-live) { display: none !important; } .svc-row-rich.is-needs-config .svc-secret, .svc-row-rich.is-needs-config [data-copy] { display: none !important; } .svc-config { display: inline-flex; align-items: center; justify-content: center; min-height: 1.35rem; padding: 0.1rem 0.45rem; border-radius: 0.35rem; font-size: 0.72rem; font-weight: 650; letter-spacing: 0.02em; text-decoration: none; color: var(--gold, #e0a8a0); background: color-mix(in srgb, var(--dropFill, #3a1216) 55%, #5d4037); border: 1px solid color-mix(in srgb, var(--gold, #e0a8a0) 45%, transparent); } .shell.hide-issue-svc .svc-row:has(.tlight.is-prob), .shell.hide-issue-svc .svc-row:has(.tlight.is-warn), .shell.hide-issue-svc .svc-row:has(.tlight.is-auth) { display: none !important; } .shell.hide-offline-svc .svc-row:has(.tlight.is-down) { display: none !important; } .shell.hide-deprecated-svc .svc-row.is-deprecated, .shell.hide-deprecated-svc .svc-edit.is-deprecated, .shell.hide-deprecated-svc [data-panel="deprecated"] { display: none !important; } .shell.hide-uninstalled-svc .svc-edit[data-family="not-installed"], .shell.show-installed-only .svc-edit[data-family="not-installed"], .shell.show-installed-only .svc-edit[data-family="not-configured"], .shell.hide-unconfigured-svc .svc-edit[data-family="not-configured"] { display: none !important; } .shell.tabs-icons-only .tab-label { display: none !important; } .shell.tabs-icons-only .tab .page-fn-icon, .shell.tabs-icons-only .tab .page-fn-svg { width: 22px; height: 22px; } .svc-icon, .svc-where { display: inline-flex; width: 16px; height: 16px; flex: 0 0 16px; align-items: center; justify-content: center; background-size: contain; background-repeat: no-repeat; background-position: center; } .svc-icon .svc-family-svg, .svc-where .svc-family-svg, .svc-icon svg, .svc-where svg { width: 16px; height: 16px; } .svc-icon.is-sprite, .svc-where.is-sprite { background-image: none !important; } .svc-group-label { font-size: 0.72rem; color: var(--gold); opacity: 0.85; margin: 0.35rem 0 0.15rem; letter-spacing: 0.02em; } .jobs-ledger { display: flex; flex-direction: column; gap: 0.35rem; } .jobs-fold-body { display: none; } .jobs-fold[data-fold="down"] .jobs-fold-body, .jobs-fold[data-fold="right"] .jobs-fold-body { display: block; } .jobs-fold.is-folded .jobs-fold-body, .jobs-fold[data-fold="up"] .jobs-fold-body { display: none; } .tone-metarr { color: #e043fa; } .tone-readarr { color: #c77577; } .tone-lidarr { color: #75c7a3; } .tone-sportarr { color: #c77575; } .tone-romarr { color: var(--svc-romarr-title); } /* QS keyword paint (after global .tone-*): only keywords colored; no whole-face wash */ .qs-toggle .qs-state, .qs-toggle .tone-shown, .qs-toggle .tone-hidden { color: var(--text); font-weight: 400; text-align: left; } .qs-toggle .tone-kw, .qs-toggle .tone-romarr, .qs-toggle .tone-lidarr, .qs-toggle .tone-readarr { font-weight: 700; } .qs-toggle .tone-kw.tone-romarr, .qs-toggle .tone-romarr { color: var(--svc-romarr-title); } .qs-toggle .tone-kw.tone-lidarr, .qs-toggle .tone-lidarr { color: var(--svc-lidarr-title); } .qs-toggle .tone-readarr { font-weight: 700; color: var(--svc-readarr-title); } /* ##==============================================================================================================================================================================## ## [END] QS HIDE CLASSES ## ##==============================================================================================================================================================================## */ /* conn-status-1: updated triangles on Services / Admin / Jobs folds (arrow-*.svg SoT) */ .sidebar-face-board .svc-bucket .fold-chev .fold-arrow, .sidebar-face-board .svc-fold-all .fold-arrow, .sidebar-face-board .jobs-fold-head .fold-arrow { display: block; width: 12px; height: 12px; min-width: 12px; min-height: 12px; flex: 0 0 12px; margin: 0; background: none; -webkit-mask: none; mask: none; } .sidebar-face-board .svc-bucket[data-fold="up"] > .svc-bucket-head .fold-arrow, .sidebar-face-board .jobs-fold[data-fold="up"] > .jobs-fold-head .fold-arrow { -webkit-mask-image: none !important; mask-image: none !important; -webkit-mask-size: contain !important; mask-size: contain !important; -webkit-mask-repeat: no-repeat !important; mask-repeat: no-repeat !important; -webkit-mask-position: center !important; mask-position: center !important; } .sidebar-face-board .svc-bucket[data-fold="right"] > .svc-bucket-head .fold-arrow, .sidebar-face-board .jobs-fold[data-fold="right"] > .jobs-fold-head .fold-arrow { -webkit-mask-image: none !important; mask-image: none !important; -webkit-mask-size: contain !important; mask-size: contain !important; -webkit-mask-repeat: no-repeat !important; mask-repeat: no-repeat !important; -webkit-mask-position: center !important; mask-position: center !important; } .sidebar-face-board .svc-bucket[data-fold="down"] > .svc-bucket-head .fold-arrow, .sidebar-face-board .jobs-fold[data-fold="down"] > .jobs-fold-head .fold-arrow { -webkit-mask-image: none !important; mask-image: none !important; -webkit-mask-size: contain !important; mask-size: contain !important; -webkit-mask-repeat: no-repeat !important; mask-repeat: no-repeat !important; -webkit-mask-position: center !important; mask-position: center !important; } .shell.hide-admin-panel [data-panel="admin"], .shell.hide-admin-panel [data-panel="svc-admin"] { display: none !important; } .sidebar-face.sidebar-face-board .side-card-ico, .sidebar-face.sidebar-face-board .svc-bucket-head .side-card-ico, .sidebar-face.sidebar-face-board .svc-nest-head .side-card-ico { display: inline-flex !important; width: 28px !important; height: 28px !important; min-width: 28px !important; min-height: 28px !important; flex: 0 0 28px !important; border-radius: 0 !important; overflow: visible !important; border: 0 !important; background: transparent !important; box-sizing: border-box !important; } .sidebar-face.sidebar-face-board .side-card-mesh .side-card-ico { border: 0 !important; } .sidebar-face.sidebar-face-board .svc-fold-all { display: inline-flex !important; width: 26px !important; height: 26px !important; min-width: 26px !important; min-height: 26px !important; padding: 0 !important; margin-left: auto !important; border-radius: 6px !important; border: 1px solid var(--gold) !important; background: var(--dropFill) !important; color: var(--textColor) !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; flex: 0 0 26px !important; } .sidebar-face.sidebar-face-board .svc-bucket-head .fold-chev { margin-left: auto !important; } /* When Expand-all is present, it owns auto; fold sits snug after it */ .sidebar-face.sidebar-face-board .svc-bucket-head .svc-fold-all + .fold-chev { margin-left: 0.28rem !important; } .sidebar-face.sidebar-face-board .side-card-head > span:not(.side-card-ico):not(.svc-icon-wrap), .sidebar-face.sidebar-face-board .svc-bucket-head > span:not(.side-card-ico):not(.svc-icon-wrap), .sidebar-face.sidebar-face-board .svc-nest-head > span:not(.side-card-ico):not(.svc-icon-wrap) { text-transform: uppercase !important; letter-spacing: 0.06em !important; } /* mesh-fields-1: Metarr Mesh field set + primary Connect */ .side-card-mesh .status-row-mesh { /* lamp | label | value | paren | actions — more room for IPs */ grid-template-columns: 14px 4.2rem minmax(0, 1fr) max-content auto; } .side-card-mesh .vpn-btn, .side-card-mesh .vpn-btn.is-primary { background: color-mix(in srgb, #5c2a6e 55%, var(--dropFill)); color: #f0d7ff; border-color: #e043fa; } .side-card-mesh .vpn-btn:hover, .side-card-mesh .vpn-btn.is-primary:hover { background: color-mix(in srgb, #5c2a6e 70%, var(--dropFill)); color: #f0d7ff; } .side-card-mesh .panel-blurb { color: color-mix(in srgb, #e043fa 75%, #d7ccc8); } /* svc-nests-1: nested Servarr Stack / Media Servers / Tools / Administration */ .svc-nest { border: 1px solid var(--borderColor); border-radius: 10px; background: var(--cardBackground); margin: 0.45rem 0; overflow: hidden; } .svc-nest-head { display: flex; align-items: center; gap: 0.45rem; padding: 0.4rem 0.5rem; background: var(--panelFill); color: var(--gold); font-size: 0.85rem; font-weight: 650; } .svc-nest-head .fold-chev { margin-left: auto; } .svc-nest-body { padding: 0.25rem 0.35rem 0.4rem; background: var(--dropFill); } .svc-nest[data-fold="up"] > .svc-nest-body, .svc-nest[data-fold="right"] > .svc-nest-body, .svc-nest.is-folded > .svc-nest-body { display: none; } .svc-install { color: var(--svc-romarr-title); font-weight: 700; font-size: 0.8rem; } .side-card-head .svc-icon-wrap, .svc-nest-head .svc-icon-wrap, .svc-bucket-head .svc-icon-wrap { width: 28px; height: 28px; flex: 0 0 28px; } .side-legal { margin: 0.55rem 0.15rem 0.2rem; margin-top: auto; flex: 0 0 auto; color: var(--muted); font-size: 0.75rem; line-height: 1.35; } .sidebar-face > .side-legal { /* Pin copyright to the foot of the side panel (main + control). Text only — no fold arrow. */ margin-top: auto; padding-top: 0.45rem; } /* Operator main: copyright floats at the sidebar foot; cards scroll behind it. */ body[data-face="operator"] .sidebar, body[data-face="operator"] .sidebar-stage, body[data-face="operator"] .sidebar-face.sidebar-face-board { min-height: 0; height: 100%; max-height: 100%; } body[data-face="operator"] .sidebar-face.sidebar-face-board { overflow: hidden; } body[data-face="operator"] .sidebar-face.sidebar-face-board > .side-top { flex: 0 0 auto; } body[data-face="operator"] .sidebar-face.sidebar-face-board > .side-scroll { /* One scroll with the other cards. Servarr Stack and Color key stay in this list. */ flex: 1 1 0%; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; display: flex; flex-direction: column; gap: 0.35rem; } /* Services was shrinking inside the scroll and clipping Servarr Stack and Color key. flex-shrink 0 keeps every card at its own height so the column can scroll to them. */ body[data-face="operator"] .sidebar-face.sidebar-face-board > .side-scroll > .side-card, body[data-face="operator"] .sidebar-face.sidebar-face-board > .side-scroll > .svc-bucket { flex: 0 0 auto !important; height: auto !important; max-height: none !important; min-height: min-content !important; } body[data-face="operator"] .sidebar-face.sidebar-face-board > .side-scroll::-webkit-scrollbar { width: 0; height: 0; display: none; } body[data-face="operator"] .sidebar-face.sidebar-face-board > .side-legal { position: relative; z-index: 5; flex: 0 0 auto; margin-top: 0; padding: 0.85rem 0.15rem 0.2rem; background: linear-gradient(180deg, rgba(42, 26, 23, 0) 0%, rgba(42, 26, 23, 0.92) 0.7rem, rgba(42, 26, 23, 0.97) 1.15rem); } body[data-face="operator"] .main-card { grid-template-rows: auto 1fr auto; } .PageStatusBar { flex: 0 0 36px; max-height: 38vh; z-index: 2; background: #1a1a1a; border-top: 1px solid var(--borderColor); display: grid; grid-template-columns: 56px 80px 1fr; grid-template-rows: 36px; align-items: center; overflow: hidden; padding: 0 0.75rem; } .PageStatusBar-toggle { height: 36px; border: 0; background: transparent; color: var(--textMuted); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.72rem; text-align: left; padding: 0; cursor: default; } .PageStatusBar-state { font-size: 12px; color: var(--textMuted); text-transform: lowercase; } .PageStatusBar-verb { font-size: 13px; color: var(--gold); font-weight: 650; text-align: center; padding-right: 56px; } /* [local-mobile-swipe-3] Later than .PageStatusBar { flex: 0 0 36px } and body[data-face=operator] .main-card grid rows. display:contents on .main-card had put the job bar on the #pager snap row and broke left/right swipe. */ @media (max-width: 860px) { body[data-face="operator"] .main-card { display: contents; overflow: visible; } .PageStatusBar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 12; width: 100%; flex: none; max-height: none; } } .side-legal-copy { flex: 1 1 auto; } .side-legal-body { padding: 0.25rem 0 0.1rem; } .svc-row-rich { /* lead | where | secret | spacer | eye/copy/restart | downloader */ grid-template-columns: max-content 18px max-content 1fr auto minmax(18px, max-content); gap: 0.35rem; align-items: center; } .svc-row-rich .svc-status { display: none; } /* Left service mark = BIG */ .svc-icon-wrap { position: relative; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 30px; } .side-card-head .svc-icon-wrap .side-card-ico { width: 28px; height: 28px; min-width: 28px; min-height: 28px; flex: 0 0 28px; } .svc-icon-wrap .svc-icon, .svc-icon-wrap .svc-icon .svc-family-svg, .svc-icon-wrap .svc-icon svg, .svc-icon-wrap .svc-icon img { width: 28px !important; height: 28px !important; min-width: 28px !important; min-height: 28px !important; flex: 0 0 28px !important; display: block; } .svc-icon-lamp { position: absolute; right: -1px; bottom: -1px; width: 9px; height: 9px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45); } /* All other row icons (docker/where + downloaders) = prior left size (~16px base look, bump to 18) */ .svc-row-rich > .svc-where { width: 18px !important; height: 18px !important; min-width: 18px !important; flex: 0 0 18px !important; justify-self: center; } .svc-row-rich > .svc-where .svc-family-svg, .svc-row-rich > .svc-where svg, .svc-row-rich > .svc-where img { width: 18px !important; height: 18px !important; } .svc-sats { display: inline-flex; align-items: center; justify-content: flex-end; gap: 0.28rem; min-height: 18px; } .svc-dl { position: relative; display: inline-flex; width: 18px; height: 18px; align-items: center; justify-content: center; flex: 0 0 18px; } .svc-dl-icon, .svc-dl-icon.svc-family-svg, .svc-dl .svc-icon, .svc-dl .svc-family-svg, .svc-dl svg, .svc-dl img { width: 18px !important; height: 18px !important; min-width: 18px !important; min-height: 18px !important; flex: 0 0 18px !important; display: block; } .svc-dl-lamp { position: absolute; right: -2px; bottom: -2px; width: 7px; height: 7px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45); } .svc-row-rich:has(.svc-wiki) { grid-template-columns: 30px minmax(0, 1fr) auto auto auto; } .svc-name { display: inline-flex; align-items: center; gap: 0.45rem; min-width: 0; } .svc-ext { display: inline-block; width: 0.7rem; height: 0.7rem; border: 1px solid color-mix(in srgb, var(--gold) 70%, transparent); border-radius: 2px; position: relative; opacity: 0.75; flex: 0 0 auto; } .svc-ext::after { content: ""; position: absolute; right: 1px; top: 1px; width: 0.28rem; height: 0.28rem; border-top: 1px solid var(--gold); border-right: 1px solid var(--gold); } .svc-secret { font-size: 0.78rem; letter-spacing: 0.06em; } .svc-sats { display: inline-flex; align-items: center; justify-content: flex-end; gap: 0.18rem; } .svc-wiki { color: #7eb8ff; font-size: 0.78rem; text-decoration: none; } .svc-wiki:hover { text-decoration: underline; } .svc-row-rich:has(.svc-wiki) { grid-template-columns: 30px minmax(0, 1fr) auto auto auto; } /* no-ellipsis-1: Connection Status masks must not trail with … */ .status-row > .masked { overflow: visible; text-overflow: clip; white-space: nowrap; min-width: 0; } /* svc-fix-3: qb/downloader marks stay small; left service marks stay large */ .svc-row-rich .svc-sats .svc-icon, .svc-row-rich .svc-dl .svc-icon, .svc-row-rich .svc-dl-icon { width: 18px !important; height: 18px !important; min-width: 18px !important; min-height: 18px !important; max-width: 18px !important; max-height: 18px !important; flex: 0 0 18px !important; } .svc-row-rich .svc-sats .svc-icon .svc-family-svg, .svc-row-rich .svc-sats .svc-icon svg, .svc-row-rich .svc-sats .svc-icon img, .svc-row-rich .svc-dl .svc-family-svg, .svc-row-rich .svc-dl svg, .svc-row-rich .svc-dl img { width: 18px !important; height: 18px !important; max-width: 18px !important; max-height: 18px !important; } /* Connection board fold sprites: gold, not cream textColor */ .sidebar-face-board .fold-chev .ui-ico, .sidebar-face-board .fold-chev .ui-ico-chevron { background: none !important; background-color: transparent !important; color: var(--gold) !important; } .sidebar-face-board .fold-chev .ui-ico-svg, .sidebar-face-board .fold-chev .ui-ico-svg use { fill: currentColor !important; color: var(--gold) !important; } /* Nest folds: sprite owns glyph — no cream currentColor square */ .sidebar-face-board .svc-nest .fold-chev .fold-arrow, .sidebar-face-board .svc-bucket-head .fold-chev .fold-arrow { display: none !important; background: none !important; -webkit-mask: none !important; mask: none !important; } .sidebar-face-board .svc-nest[data-fold="up"] .fold-chev .fold-arrow, .sidebar-face-board .svc-bucket[data-fold="up"] > .svc-bucket-head .fold-chev .fold-arrow { -webkit-mask-image: none !important; mask-image: none !important; } .sidebar-face-board .svc-nest[data-fold="right"] .fold-chev .fold-arrow, .sidebar-face-board .svc-bucket[data-fold="right"] > .svc-bucket-head .fold-chev .fold-arrow { -webkit-mask-image: none !important; mask-image: none !important; } .sidebar-face-board .svc-nest[data-fold="down"] .fold-chev .fold-arrow, .sidebar-face-board .svc-bucket[data-fold="down"] > .svc-bucket-head .fold-chev .fold-arrow { -webkit-mask-image: none !important; mask-image: none !important; } .svc-nest[data-fold="up"] > .svc-nest-body { display: none; } .svc-nest[data-fold="down"] > .svc-nest-body { display: block; } .svc-row-rich .row-actions { display: inline-flex; align-items: center; gap: 0.15rem; flex: 0 0 auto; } /* align-cols-5: revert last-digit band; IPs get more left room; dl↔Reveal slight gap */ .sidebar-face-board { --side-lamp-w: 14px; --side-label-w: 4.2rem; --side-gap: 0.35rem; --side-value-start: calc(var(--side-lamp-w) + var(--side-gap) + var(--side-label-w)); /* icon(~30) + gap + Kapowarr/Whisparr — toptier names never ellipsis */ /* 30px icon + gaps + Kapowarr/Whisparr + ext — fixed so docker/port column-align */ --side-svc-lead-w: 9.75rem; --side-dl-to-eye: 0.35rem; } .sidebar-face-board .status-row { grid-template-columns: var(--side-lamp-w) var(--side-label-w) minmax(0, 1fr) max-content auto; gap: var(--side-gap); } .sidebar-face-board .side-card-mesh .status-row-mesh { grid-template-columns: var(--side-lamp-w) var(--side-label-w) minmax(0, 1fr) max-content auto; gap: var(--side-gap); } .sidebar-face-board .status-row > .masked { justify-self: start; text-align: left; overflow: visible; text-overflow: clip; white-space: nowrap; min-width: 0; } .sidebar-face-board .status-row > .paren-meta { justify-self: start; white-space: nowrap; max-width: none; } .sidebar-face-board .status-row > .row-actions { justify-self: end; } .sidebar-face-board .svc-lead { display: inline-flex; align-items: center; gap: 0.4rem; width: 100%; max-width: 100%; min-width: 0; } .sidebar-face-board .svc-lead .svc-name { display: inline-flex; align-items: center; gap: 0.45rem; overflow: visible; text-overflow: clip; white-space: nowrap; flex: 0 1 auto; min-width: 0; } .sidebar-face-board .svc-lead .svc-ext { flex: 0 0 auto; margin-left: 0.1rem; } /* Servarr + Media/Tools/Admin: lead | where | port | spacer | eye/copy/restart | downloader (always last) */ .sidebar-face-board .svc-row-rich:not(:has(.svc-wiki)):not(:has(.svc-install)) { grid-template-columns: var(--side-svc-lead-w) 18px max-content 1fr auto minmax(18px, max-content); gap: var(--side-gap); column-gap: 0.45rem; } .sidebar-face-board .svc-row-rich > .svc-sats { justify-self: end; justify-content: flex-end; align-items: center; gap: 0.2rem; min-width: 18px; min-height: 18px; } .sidebar-face-board .svc-row-rich > .row-actions { justify-self: end; margin-left: var(--side-dl-to-eye); } .svc-sats[data-assoc-fold="up"] .svc-dl-extra, .svc-sats[data-dl-fold="up"] .svc-dl-extra { display: none !important; } .svc-sats[data-assoc-fold="down"] .svc-dl-extra, .svc-sats[data-dl-fold="down"] .svc-dl-extra { display: inline-flex; } .svc-sats.is-multi, .svc-sats.is-assoc-toggle { cursor: pointer; } .svc-assoc-fold[data-assoc-fold="up"], .svc-assoc-fold:not([data-assoc-fold="down"]), .svc-assoc-menu[data-assoc-fold="up"], .svc-assoc-menu:not([data-assoc-fold="down"]), .svc-row-rich.is-cred-hidden + .svc-assoc-fold, .svc-row-rich.is-cred-hidden + .svc-assoc-fold[data-assoc-fold="down"], .svc-row-rich.is-cred-hidden + .svc-assoc-menu { display: none !important; } .svc-assoc-fold[data-assoc-fold="down"] { display: block; } .sidebar-face-board .svc-assoc-menu .svc-row-rich.is-assoc-child > .svc-lead { padding-left: 0.9rem; } .sidebar-face-board .svc-assoc-menu .svc-row-rich.is-assoc-child { opacity: 0.96; } .svc-dl.is-link { cursor: pointer; } .svc-restart-modal { position: fixed !important; top: 0; right: 0; bottom: 0; left: 0; width: 100vw; height: 100vh; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 1.25rem; pointer-events: auto; } .svc-restart-modal[hidden] { display: none !important; } .svc-restart-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.62); backdrop-filter: blur(3px); } .svc-restart-card { position: relative; z-index: 1; width: min(22rem, 100%); color: var(--grabber-title, var(--gold)); background: var(--grabber-bg, var(--dropFill)); border: 1px solid var(--grabber-trim, var(--gold)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--grabber-trim, var(--gold)) 35%, transparent), 0 16px 48px rgba(0, 0, 0, 0.55); } .svc-restart-card .grabber-face-head { color: var(--grabber-title, var(--gold)); background: var(--grabber-bg, var(--dropFill)); border-bottom: 1px solid var(--grabber-trim, var(--gold)); } .svc-restart-card .grabber-face-body { color: var(--grabber-title, var(--gold)); } .svc-restart-copy { margin: 0; font-size: 0.86rem; line-height: 1.4; } .svc-restart-acts { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.9rem; } .svc-restart-btn { appearance: none; border: 1px solid var(--grabber-trim, var(--gold)); background: transparent; color: var(--grabber-title, var(--gold)); border-radius: 8px; padding: 0.32rem 0.85rem; font-size: 0.82rem; } .svc-restart-btn:hover { background: color-mix(in srgb, var(--grabber-trim, var(--gold)) 16%, transparent); } .svc-restart-btn.is-primary { background: color-mix(in srgb, var(--grabber-trim, var(--gold)) 22%, var(--grabber-bg, #000)); } body.svc-restart-open { overflow: hidden; } .sidebar-face-board .svc-row-rich:has(.svc-wiki) { grid-template-columns: var(--side-svc-lead-w) 1fr; gap: var(--side-gap); } .sidebar-face-board .svc-row-rich:has(.svc-install) { grid-template-columns: var(--side-svc-lead-w) 18px auto; gap: var(--side-gap); column-gap: 0.45rem; } .sidebar-face-board .svc-row-rich > .svc-where, .sidebar-face-board .svc-row-rich > .svc-secret { justify-self: start; text-align: left; } .sidebar-face-board .svc-row-rich > .row-actions { justify-self: end; } .sidebar-face-board .svc-nest-body { padding: 0.2rem 0.22rem 0.35rem; } .sidebar-face-board .svc-bucket-body { padding: 0.3rem 0.22rem; } .sidebar-face-board .svc-row-rich { padding-left: 0.15rem; padding-right: 0.15rem; } .sidebar-face-board > .side-card > .side-card-body { padding-left: 0.45rem !important; padding-right: 0.45rem !important; } /* qs-panels-2: footer Taskarr link; section icos */ .qs-footer-btn { display: block; margin: 0.55rem 0 0.2rem; padding: 0.55rem 0.75rem; border: 1px solid var(--borderColor); border-radius: 10px; background: var(--cardBackground); color: var(--gold); text-align: center; text-decoration: none; font-size: 0.85rem; } .qs-footer-btn:hover { background: var(--dropFill); color: #e8e0d8; } .sidebar-face-settings .qs-section-head .qs-section-ico { display: inline-flex !important; width: 30px !important; height: 30px !important; min-width: 30px !important; border-radius: 50% !important; align-items: center; justify-content: center; border: 1px solid color-mix(in srgb, var(--gold) 55%, transparent); background: var(--dropFill); } .sidebar-face-settings .qs-section-head .qs-section-ico img { width: 18px !important; height: 18px !important; filter: invert(0.85) sepia(0.35) saturate(0.8) hue-rotate(350deg); } /* qs-fold-1: settings-face folds + stop flex-shrink crushing section bodies */ .sidebar-face-settings > .qs-section { flex: 0 0 auto; min-height: 0; overflow: hidden; } .sidebar-face-settings .qs-section-body { flex: 0 0 auto; min-height: auto; } /* QS section folds Prefer Copy Fetcharr pipeline step plaques: 22×22 / 5px / 9.6px gold #down. */ .sidebar-face-settings .qs-section-head .fold-chev, .qs-section-head .fold-chev { width: 22px !important; height: 22px !important; min-width: 22px !important; min-height: 22px !important; flex: 0 0 22px !important; padding: 0 !important; border-radius: 5px !important; border: 1px solid var(--gold) !important; background: var(--dropFill) !important; color: var(--gold) !important; box-sizing: border-box !important; } .sidebar-face-settings .qs-section-head .fold-chev .ui-ico, .sidebar-face-settings .qs-section-head .fold-chev .ui-ico-chevron, .qs-section-head .fold-chev .ui-ico, .qs-section-head .fold-chev .ui-ico-chevron { display: block !important; width: 9.6px !important; height: 9.6px !important; min-width: 9.6px !important; min-height: 9.6px !important; background: none !important; background-color: transparent !important; -webkit-mask: none !important; mask: none !important; color: var(--gold) !important; } .sidebar-face-settings .fold-chev .ui-ico-svg, .qs-section-head .fold-chev .ui-ico-svg { display: block !important; width: 100%; height: 100%; fill: currentColor !important; color: var(--gold) !important; } .sidebar-face-settings .fold-chev .ui-ico-svg use, .qs-section-head .fold-chev .ui-ico-svg use { fill: currentColor !important; color: var(--gold) !important; } .sidebar-face-settings .fold-chev .fold-arrow, .qs-section-head .fold-chev .fold-arrow { display: none !important; /* sprite owns glyph; kill cream currentColor fill square */ background: none !important; -webkit-mask: none !important; mask: none !important; } .sidebar-face-settings .qs-toggle { flex: 0 0 auto; min-height: 2rem; } /* ##==============================================================================================================================================================================## ## [START] QS PLAIN SERVICE ACCENTS - Metarr (and future) loud paint off ## ##==============================================================================================================================================================================## */ /* When On in QS = accents Off: data-svc-accent panels fall back to normal side-card chrome */ .shell.plain-svc-accents .side-card[data-svc-accent="metarr"], .shell.plain-svc-accents .side-card-mesh { border-color: var(--borderColor); --stack: var(--gold); background: var(--dropFill); } .shell.plain-svc-accents .side-card[data-svc-accent="metarr"] .side-card-head, .shell.plain-svc-accents .side-card-mesh .side-card-head, .shell.plain-svc-accents .sidebar-face.sidebar-face-board > .side-card-mesh > .side-card-head { color: var(--text) !important; background: var(--panelFill) !important; } .shell.plain-svc-accents .side-card[data-svc-accent="metarr"] .side-card-head .fold-chev, .shell.plain-svc-accents .side-card-mesh .side-card-head .fold-chev { color: var(--text); } .shell.plain-svc-accents .side-card[data-svc-accent="metarr"] .side-card-body, .shell.plain-svc-accents .side-card[data-svc-accent="metarr"] .masked, .shell.plain-svc-accents .side-card[data-svc-accent="metarr"] .paren-meta, .shell.plain-svc-accents .side-card-mesh .side-card-body, .shell.plain-svc-accents .side-card-mesh .masked, .shell.plain-svc-accents .side-card-mesh .paren-meta, .shell.plain-svc-accents .sidebar-face.sidebar-face-board > .side-card-mesh > .side-card-body { color: var(--text) !important; background: var(--dropFill) !important; } .shell.plain-svc-accents .side-card[data-svc-accent="metarr"] .tone-metarr, .shell.plain-svc-accents .side-card-mesh .tone-metarr, .shell.plain-svc-accents [data-panel="mesh"] .tone-metarr { color: var(--text); text-shadow: none; letter-spacing: normal; } .shell.plain-svc-accents .side-card-mesh .vpn-btn, .shell.plain-svc-accents .side-card[data-svc-accent="metarr"] .vpn-btn { border-color: var(--borderColor); color: var(--text); } .shell.plain-svc-accents .side-card-mesh .vpn-btn.is-primary, .shell.plain-svc-accents .side-card[data-svc-accent="metarr"] .vpn-btn.is-primary { background: var(--panelFill); color: var(--text); border-color: var(--gold); } .shell.plain-svc-accents .side-card-mesh .panel-blurb, .shell.plain-svc-accents .side-card[data-svc-accent="metarr"] .panel-blurb { color: var(--muted, #bcaaa4); } .shell.plain-svc-accents .paren-meta.tone-metarr { color: var(--text); } /* ##==============================================================================================================================================================================## ## [END] QS PLAIN SERVICE ACCENTS ## ##==============================================================================================================================================================================## */ /* ##==============================================================================================================================================================================## ## [START] CHEVRON SCALE — 75% of original fold-arrow / fold-chev size ## ##==============================================================================================================================================================================## */ .fold-chev, .svc-fold-all, .jobs-fold-head { width: 19.5px !important; height: 19.5px !important; min-width: 19.5px !important; min-height: 19.5px !important; flex: 0 0 19.5px !important; border-radius: 4.5px !important; } /* Fetcharr master pipeline fold = same footprint as run .fetch-act (28px; beats global 19.5px shrink). */ .page-section .sub-block.fetch-run > .sub-head .fold-chev { width: 28px !important; height: 28px !important; min-width: 28px !important; min-height: 28px !important; flex: 0 0 28px !important; border-radius: 6px !important; } .page-section .sub-block.fetch-run > .sub-head .fold-chev .ui-ico, .page-section .sub-block.fetch-run > .sub-head .fold-chev .ui-ico-chevron { width: 12.8px !important; height: 12.8px !important; min-width: 12.8px !important; min-height: 12.8px !important; } .fold-chev .ui-ico, .fold-chev .ui-ico-chevron, .svc-fold-all .ui-ico, .jobs-fold-head .ui-ico { width: 10.5px !important; height: 10.5px !important; min-width: 10.5px !important; min-height: 10.5px !important; background: none !important; background-color: transparent !important; -webkit-mask: none !important; mask: none !important; color: var(--gold) !important; } /* Inlined pack #down: currentColor so parent .fold-chev color tints the arrow (gold vs grabber-title). */ #boxarr-pack-host #down path, #boxarr-pack-host #up path, #boxarr-pack-host #left path, #boxarr-pack-host #right path { fill: currentColor !important; } .fold-chev .ui-ico-svg, .fold-chev .ui-ico-svg use, .svc-fold-all .ui-ico-svg, .svc-fold-all .ui-ico-svg use, .jobs-fold-head .ui-ico-svg, .jobs-fold-head .ui-ico-svg use { /* down-currentcolor-1: Prefer Copy currentColor (grabber/gold plaque). Parent color=gold; never hard black. */ fill: currentColor !important; color: var(--gold) !important; } #tab-fetcharr .fetch-grabber-nest[data-grabber] > .fetch-step-head .fold-chev .ui-ico, #tab-fetcharr .fetch-grabber-nest[data-grabber] > .fetch-step-head .fold-chev .ui-ico-chevron { color: var(--grabber-title) !important; background: none !important; background-color: transparent !important; -webkit-mask: none !important; mask: none !important; } #tab-fetcharr .fetch-grabber-nest[data-grabber] > .fetch-step-head .fold-chev .ui-ico-svg { opacity: 1 !important; background: none !important; } .fold-chev .fold-arrow, .svc-fold-all .fold-arrow { width: 9px !important; height: 9px !important; min-width: 9px !important; min-height: 9px !important; } .sidebar-chevron .ui-ico, .sidebar-chevron .ui-ico-chevron, .sidebar-rail .ui-ico, .sidebar-rail .ui-ico-chevron { width: 10.5px !important; height: 10.5px !important; min-width: 10.5px !important; min-height: 10.5px !important; } /* ##==============================================================================================================================================================================## ## [END] CHEVRON SCALE ## ##==============================================================================================================================================================================## */ /* strip-scope-4 (§31): gold-wash kill via color only — never fill:unset/initial on stage or kids (fill reset → black icos; .stN from strips.js own pack fills). */ .fetch-step-head > .fetch-strip-stage, .fetch-step-head > .fetch-step-ico.fetch-strip-stage, #tab-fetcharr .fetch-step-head > .fetch-strip-stage { color: initial; } /* vpn-act-state-5: active trim = icon tint /* vpn-act-trim-2px / vpn-act-state-4: active border 2px /* vpn-act-state-3: Bridge / Privacy / Metarr C-R-D — icon + bg + full trim; descendant fill override */ #bridge-actions[data-link-state="connected"] [data-bridge-act="connect"], #privacy-actions[data-link-state="connected"] [data-privacy-act="connect"], #mesh-actions[data-link-state="connected"] [data-metarr-act="connect"], #bridge-actions[data-link-state="reconnecting"] [data-bridge-act="reconnect"], #privacy-actions[data-link-state="reconnecting"] [data-privacy-act="reconnect"], #mesh-actions[data-link-state="reconnecting"] [data-metarr-act="reconnect"], #bridge-actions[data-link-state="disconnected"] [data-bridge-act="disconnect"], #privacy-actions[data-link-state="disconnected"] [data-privacy-act="disconnect"], #mesh-actions[data-link-state="disconnected"] [data-metarr-act="disconnect"] { opacity: 0.96; cursor: not-allowed; pointer-events: none; } /* Connect active */ #bridge-actions[data-link-state="connected"] [data-bridge-act="connect"], #privacy-actions[data-link-state="connected"] [data-privacy-act="connect"], #mesh-actions[data-link-state="connected"] [data-metarr-act="connect"] { background: #388E3C !important; border: 2px solid #C8E6C9 !important; color: #C8E6C9 !important; } #bridge-actions[data-link-state="connected"] [data-bridge-act="connect"] .ui-ico, #privacy-actions[data-link-state="connected"] [data-privacy-act="connect"] .ui-ico, #mesh-actions[data-link-state="connected"] [data-metarr-act="connect"] .ui-ico, #bridge-actions[data-link-state="connected"] [data-bridge-act="connect"] .ui-ico-svg, #privacy-actions[data-link-state="connected"] [data-privacy-act="connect"] .ui-ico-svg, #mesh-actions[data-link-state="connected"] [data-metarr-act="connect"] .ui-ico-svg, #bridge-actions[data-link-state="connected"] [data-bridge-act="connect"] .ui-ico-svg *, #privacy-actions[data-link-state="connected"] [data-privacy-act="connect"] .ui-ico-svg *, #mesh-actions[data-link-state="connected"] [data-metarr-act="connect"] .ui-ico-svg *, #bridge-actions[data-link-state="connected"] [data-bridge-act="connect"] .ui-ico-svg use, #privacy-actions[data-link-state="connected"] [data-privacy-act="connect"] .ui-ico-svg use, #mesh-actions[data-link-state="connected"] [data-metarr-act="connect"] .ui-ico-svg use { color: #C8E6C9 !important; fill: #C8E6C9 !important; stroke: #C8E6C9 !important; } /* Reconnect active */ #bridge-actions[data-link-state="reconnecting"] [data-bridge-act="reconnect"], #privacy-actions[data-link-state="reconnecting"] [data-privacy-act="reconnect"], #mesh-actions[data-link-state="reconnecting"] [data-metarr-act="reconnect"] { background: #FFA000 !important; border: 2px solid #FFECB3 !important; color: #FFECB3 !important; } #bridge-actions[data-link-state="reconnecting"] [data-bridge-act="reconnect"] .ui-ico, #privacy-actions[data-link-state="reconnecting"] [data-privacy-act="reconnect"] .ui-ico, #mesh-actions[data-link-state="reconnecting"] [data-metarr-act="reconnect"] .ui-ico, #bridge-actions[data-link-state="reconnecting"] [data-bridge-act="reconnect"] .ui-ico-svg, #privacy-actions[data-link-state="reconnecting"] [data-privacy-act="reconnect"] .ui-ico-svg, #mesh-actions[data-link-state="reconnecting"] [data-metarr-act="reconnect"] .ui-ico-svg, #bridge-actions[data-link-state="reconnecting"] [data-bridge-act="reconnect"] .ui-ico-svg *, #privacy-actions[data-link-state="reconnecting"] [data-privacy-act="reconnect"] .ui-ico-svg *, #mesh-actions[data-link-state="reconnecting"] [data-metarr-act="reconnect"] .ui-ico-svg *, #bridge-actions[data-link-state="reconnecting"] [data-bridge-act="reconnect"] .ui-ico-svg use, #privacy-actions[data-link-state="reconnecting"] [data-privacy-act="reconnect"] .ui-ico-svg use, #mesh-actions[data-link-state="reconnecting"] [data-metarr-act="reconnect"] .ui-ico-svg use { color: #FFECB3 !important; fill: #FFECB3 !important; stroke: #FFECB3 !important; } /* Disconnect active */ #bridge-actions[data-link-state="disconnected"] [data-bridge-act="disconnect"], #privacy-actions[data-link-state="disconnected"] [data-privacy-act="disconnect"], #mesh-actions[data-link-state="disconnected"] [data-metarr-act="disconnect"] { background: #D32F2F !important; border: 2px solid #FFCDD2 !important; color: #FFCDD2 !important; } #bridge-actions[data-link-state="disconnected"] [data-bridge-act="disconnect"] .ui-ico, #privacy-actions[data-link-state="disconnected"] [data-privacy-act="disconnect"] .ui-ico, #mesh-actions[data-link-state="disconnected"] [data-metarr-act="disconnect"] .ui-ico, #bridge-actions[data-link-state="disconnected"] [data-bridge-act="disconnect"] .ui-ico-svg, #privacy-actions[data-link-state="disconnected"] [data-privacy-act="disconnect"] .ui-ico-svg, #mesh-actions[data-link-state="disconnected"] [data-metarr-act="disconnect"] .ui-ico-svg, #bridge-actions[data-link-state="disconnected"] [data-bridge-act="disconnect"] .ui-ico-svg *, #privacy-actions[data-link-state="disconnected"] [data-privacy-act="disconnect"] .ui-ico-svg *, #mesh-actions[data-link-state="disconnected"] [data-metarr-act="disconnect"] .ui-ico-svg *, #bridge-actions[data-link-state="disconnected"] [data-bridge-act="disconnect"] .ui-ico-svg use, #privacy-actions[data-link-state="disconnected"] [data-privacy-act="disconnect"] .ui-ico-svg use, #mesh-actions[data-link-state="disconnected"] [data-metarr-act="disconnect"] .ui-ico-svg use { color: #FFCDD2 !important; fill: #FFCDD2 !important; stroke: #FFCDD2 !important; } /* Mask-based icons (if any): paint via background-color + currentColor path */ #bridge-actions[data-link-state="connected"] [data-bridge-act="connect"] .ui-ico.is-mask, #privacy-actions[data-link-state="connected"] [data-privacy-act="connect"] .ui-ico.is-mask, #mesh-actions[data-link-state="connected"] [data-metarr-act="connect"] .ui-ico.is-mask { background-color: #C8E6C9 !important; } #bridge-actions[data-link-state="reconnecting"] [data-bridge-act="reconnect"] .ui-ico.is-mask, #privacy-actions[data-link-state="reconnecting"] [data-privacy-act="reconnect"] .ui-ico.is-mask, #mesh-actions[data-link-state="reconnecting"] [data-metarr-act="reconnect"] .ui-ico.is-mask { background-color: #FFECB3 !important; } #bridge-actions[data-link-state="disconnected"] [data-bridge-act="disconnect"] .ui-ico.is-mask, #privacy-actions[data-link-state="disconnected"] [data-privacy-act="disconnect"] .ui-ico.is-mask, #mesh-actions[data-link-state="disconnected"] [data-metarr-act="disconnect"] .ui-ico.is-mask { background-color: #FFCDD2 !important; } /* vpn-act-state-3: pack sprites hardcode fill — filter backup on .ui-ico.is-sprite only */ #bridge-actions[data-link-state="connected"] [data-bridge-act="connect"] .ui-ico.is-sprite, #privacy-actions[data-link-state="connected"] [data-privacy-act="connect"] .ui-ico.is-sprite, #mesh-actions[data-link-state="connected"] [data-metarr-act="connect"] .ui-ico.is-sprite { /* approximate #C8E6C9 on dark/gold glyph */ filter: brightness(0) saturate(100%) invert(94%) sepia(12%) saturate(548%) hue-rotate(68deg) brightness(95%) contrast(92%); } #bridge-actions[data-link-state="reconnecting"] [data-bridge-act="reconnect"] .ui-ico.is-sprite, #privacy-actions[data-link-state="reconnecting"] [data-privacy-act="reconnect"] .ui-ico.is-sprite, #mesh-actions[data-link-state="reconnecting"] [data-metarr-act="reconnect"] .ui-ico.is-sprite { /* approximate #FFECB3 */ filter: brightness(0) saturate(100%) invert(92%) sepia(18%) saturate(747%) hue-rotate(332deg) brightness(104%) contrast(101%); } #bridge-actions[data-link-state="disconnected"] [data-bridge-act="disconnect"] .ui-ico.is-sprite, #privacy-actions[data-link-state="disconnected"] [data-privacy-act="disconnect"] .ui-ico.is-sprite, #mesh-actions[data-link-state="disconnected"] [data-metarr-act="disconnect"] .ui-ico.is-sprite { /* approximate #FFCDD2 */ filter: brightness(0) saturate(100%) invert(88%) sepia(14%) saturate(775%) hue-rotate(298deg) brightness(101%) contrast(98%); } #bridge-actions .vpn-btn:not(:disabled):not([aria-disabled="true"]) .ui-ico.is-sprite, #privacy-actions .vpn-btn:not(:disabled):not([aria-disabled="true"]) .ui-ico.is-sprite, #mesh-actions .vpn-btn:not(:disabled):not([aria-disabled="true"]) .ui-ico.is-sprite { filter: none; } #bridge-actions .vpn-btn:disabled, #privacy-actions .vpn-btn:disabled, #mesh-actions .vpn-btn:disabled, #bridge-actions .vpn-btn[aria-disabled="true"], #privacy-actions .vpn-btn[aria-disabled="true"], #mesh-actions .vpn-btn[aria-disabled="true"] { cursor: not-allowed; pointer-events: none; } /* metarr-panel-look-1: Metarr fold-chev = inactive C/R/D purple chrome (not site gold) */ .sidebar-face.sidebar-face-board .side-card-mesh .side-card-head .fold-chev { border: 1px solid #e043fa !important; background: color-mix(in srgb, #5c2a6e 55%, var(--dropFill)) !important; color: #f0d7ff !important; } .sidebar-face.sidebar-face-board .side-card-mesh .side-card-head .fold-chev .ui-ico, .sidebar-face.sidebar-face-board .side-card-mesh .side-card-head .fold-chev .ui-ico-chevron, .sidebar-face-board .side-card-mesh .fold-chev .ui-ico, .sidebar-face-board .side-card-mesh .fold-chev .ui-ico-chevron { color: #f0d7ff !important; } .sidebar-face-board .side-card-mesh .fold-chev .ui-ico-svg, .sidebar-face-board .side-card-mesh .fold-chev .ui-ico-svg *, .sidebar-face-board .side-card-mesh .fold-chev .ui-ico-svg use, .sidebar-face.sidebar-face-board .side-card-mesh .fold-chev .ui-ico-svg, .sidebar-face.sidebar-face-board .side-card-mesh .fold-chev .ui-ico-svg *, .sidebar-face.sidebar-face-board .side-card-mesh .fold-chev .ui-ico-svg use { fill: #f0d7ff !important; stroke: #f0d7ff !important; color: #f0d7ff !important; } .sidebar-face.sidebar-face-board .side-card-mesh .side-card-head .fold-chev .ui-ico.is-sprite { filter: brightness(0) saturate(100%) invert(86%) sepia(18%) saturate(1200%) hue-rotate(246deg) brightness(103%) contrast(97%); } /* qa-tab-alpha-1: alpha-gated operator tabs (default: playlist/metadata/align/repair on; QA off) */ .shell:not(.show-playlist-tab) .tab[data-tab="playlist"], .shell:not(.show-playlist-tab) #tab-playlist, .shell:not(.show-metadata-tab) .tab[data-tab="metadata"], .shell:not(.show-metadata-tab) #tab-metadata, .shell:not(.show-align-tab) .tab[data-tab="align"], .shell:not(.show-align-tab) #tab-align, .shell:not(.show-repair-tab) .tab[data-tab="repair"], .shell:not(.show-repair-tab) #tab-repair, .shell:not(.show-qa-tab) .tab[data-tab="qa"], .shell:not(.show-qa-tab) #tab-qa { display: none !important; } /* control-save-1: Prefer Copy legacy settings toast + save pulse */ .toast-saved { position: fixed; top: 58px; right: 16px; z-index: 12; padding: 0.35rem 0.7rem; border-radius: 8px; background: rgba(33, 23, 19, 0.96); border: 1px solid #cca37f; color: #cca37f; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; } .toast-saved.is-on { opacity: 1; } #btn-save.is-here { color: #81c784; } .page-acts-autosave { display: inline-flex; align-items: center; gap: 0.35rem; margin-right: 0.5rem; font-size: 12px; color: #bcaaa4; } /* fetcharr-pps-active-1: active P/P/S swap is pack-id only (*-action vs *-completed); keep act chrome naked */ #tab-fetcharr .fetch-act.is-fetch-active { border: none; background: transparent; box-shadow: none; } /* fetcharr-step-click-1: step act hit area = full button (svg/use never capture) */ .fetch-acts[data-fetch-scope="step"] .fetch-act { pointer-events: auto; position: relative; z-index: 2; } .fetch-acts[data-fetch-scope="step"] .fetch-act .fetch-act-ico, .fetch-acts[data-fetch-scope="step"] .fetch-act .fetch-act-use { pointer-events: none !important; } /* fetch-step-disabled-paint-1: SA/SS-held Pipeline step LOOK (Conner 2026-09-26) */ /* fetch-step-unconfigured-stubs-1: FUTURE .is-unconfigured = same LOOK family; off unless JS flag true */ #tab-fetcharr .fetch-steps > .fetch-step.is-held, #tab-fetcharr .fetch-steps > .fetch-step.is-unconfigured, #fetcharr-step-light.is-held, #fetcharr-step-light.is-unconfigured { background: #1a140c; color: #5d4035; } #tab-fetcharr .fetch-steps > .fetch-step.is-held > .fetch-step-head, #tab-fetcharr .fetch-steps > .fetch-step.is-unconfigured > .fetch-step-head, #tab-fetcharr .fetch-steps > .fetch-step.is-held > .fetch-step-body, #tab-fetcharr .fetch-steps > .fetch-step.is-unconfigured > .fetch-step-body, #tab-fetcharr .fetch-steps > .fetch-step.is-held[data-fold="right"] > .fetch-step-head, #tab-fetcharr .fetch-steps > .fetch-step.is-unconfigured[data-fold="right"] > .fetch-step-head, #tab-fetcharr .fetch-steps > .fetch-step.is-held[data-fold="down"] > .fetch-step-head, #tab-fetcharr .fetch-steps > .fetch-step.is-unconfigured[data-fold="down"] > .fetch-step-head, #fetcharr-step-light.is-held .fetch-step-light-head, #fetcharr-step-light.is-unconfigured .fetch-step-light-head, #fetcharr-step-light.is-held .fetch-step-light-step-head, #fetcharr-step-light.is-unconfigured .fetch-step-light-step-head, #fetcharr-step-light.is-held .fetch-step-light-body, #fetcharr-step-light.is-unconfigured .fetch-step-light-body { background: #1a140c; } #tab-fetcharr .fetch-steps > .fetch-step.is-held > .fetch-step-head .fetch-step-title, #tab-fetcharr .fetch-steps > .fetch-step.is-unconfigured > .fetch-step-head .fetch-step-title, #tab-fetcharr .fetch-steps > .fetch-step.is-held > .fetch-step-head > .help-step-id, #tab-fetcharr .fetch-steps > .fetch-step.is-unconfigured > .fetch-step-head > .help-step-id, #tab-fetcharr .fetch-steps > .fetch-step.is-held .fetch-step-title, #tab-fetcharr .fetch-steps > .fetch-step.is-unconfigured .fetch-step-title, #fetcharr-step-light.is-held, #fetcharr-step-light.is-unconfigured, #fetcharr-step-light.is-held .fetch-step-light-brand h2, #fetcharr-step-light.is-unconfigured .fetch-step-light-brand h2, #fetcharr-step-light.is-held .fetch-step-light-step-copy, #fetcharr-step-light.is-unconfigured .fetch-step-light-step-copy, #fetcharr-step-light.is-held .fetch-step-light-sub, #fetcharr-step-light.is-unconfigured .fetch-step-light-sub { color: #5d4035; } /* fetcharr-gates-greyed-1: step-click auto must not beat is-greyed/is-locked (Conner 2026-09-26 gates) */ .fetch-acts[data-fetch-scope="step"] .fetch-act.is-greyed, .fetch-acts[data-fetch-scope="step"] .fetch-act.is-locked { pointer-events: none; } /* icon-restore-1: late .fold-chev currentColor must not wash pack grabber chevs or act marks */ #tab-fetcharr .fetch-grabber-nest[data-grabber] > .fetch-step-head .fold-chev .ui-ico, #tab-fetcharr .fetch-explain-nest > .fetch-step-head .fold-chev .ui-ico, #fetcharr-step-light [data-grabber] .fold-chev .ui-ico, #fetcharr-step-light [data-light-dl] .fold-chev .ui-ico, #fetcharr-step-light .fetch-explain-nest .fold-chev .ui-ico { width: 18px !important; height: 18px !important; min-width: 18px !important; min-height: 18px !important; color: unset !important; } #tab-fetcharr .fetch-grabber-nest[data-grabber] > .fetch-step-head .fold-chev .ui-ico-svg, #tab-fetcharr .fetch-grabber-nest[data-grabber] > .fetch-step-head .fold-chev .ui-ico-svg use, #tab-fetcharr .fetch-explain-nest > .fetch-step-head .fold-chev .ui-ico-svg, #tab-fetcharr .fetch-explain-nest > .fetch-step-head .fold-chev .ui-ico-svg use, #fetcharr-step-light [data-grabber] .fold-chev .ui-ico-svg, #fetcharr-step-light [data-grabber] .fold-chev .ui-ico-svg use, #fetcharr-step-light [data-light-dl] .fold-chev .ui-ico-svg, #fetcharr-step-light [data-light-dl] .fold-chev .ui-ico-svg use, #fetcharr-step-light .fetch-explain-nest .fold-chev .ui-ico-svg, #fetcharr-step-light .fetch-explain-nest .fold-chev .ui-ico-svg use, #tab-fetcharr .fetch-act-ico, #tab-fetcharr .fetch-act-ico use, #fetcharr-step-light .fetch-act-ico, #fetcharr-step-light .fetch-act-ico use { fill: unset !important; color: unset !important; } /* ========================================================================== */ /* Falling-boxes sidebar stage (Prefer Copy qa/falling-boxes-look.html DNA) */ /* Quiet rails: frame `_x30_2`, Matrix Y dual-phase continuous fill, no whirl. */ /* ========================================================================== */ .sidebar-falling { position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: 13px; clip-path: inset(0 round 13px); pointer-events: none; contain: layout paint; } .sidebar-falling-stack { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; background: #0a0806; } .sidebar-falling-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; pointer-events: none; user-select: none; } .sidebar-falling-lines { position: absolute; inset: 0; pointer-events: none; overflow: hidden; opacity: 0.45; } .sidebar-fall-line { position: absolute; top: -30%; width: 1px; height: 35%; border-radius: 1px; background: linear-gradient( to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.09) 30%, rgba(255, 255, 255, 0.04) 70%, rgba(255, 255, 255, 0) ); opacity: 0; animation: sidebar-fall-line-drop var(--dur, 9s) linear infinite; animation-delay: var(--delay, 0s); } .sidebar-fall-line:nth-child(1) { left: 9%; --dur: 8.5s; --delay: 0s; height: 40%; } .sidebar-fall-line:nth-child(2) { left: 17%; --dur: 10s; --delay: 1.2s; height: 28%; } .sidebar-fall-line:nth-child(3) { left: 26%; --dur: 9.2s; --delay: 3.1s; height: 36%; } .sidebar-fall-line:nth-child(4) { left: 34%; --dur: 11s; --delay: 0.6s; height: 22%; } .sidebar-fall-line:nth-child(5) { left: 43%; --dur: 8.8s; --delay: 4.4s; height: 32%; } .sidebar-fall-line:nth-child(6) { left: 51%; --dur: 10.5s; --delay: 2.0s; height: 26%; } .sidebar-fall-line:nth-child(7) { left: 59%; --dur: 9.0s; --delay: 5.5s; height: 38%; } .sidebar-fall-line:nth-child(8) { left: 68%; --dur: 11.5s; --delay: 1.8s; height: 24%; } .sidebar-fall-line:nth-child(9) { left: 76%; --dur: 8.2s; --delay: 3.8s; height: 30%; } .sidebar-fall-line:nth-child(10) { left: 85%; --dur: 10.2s; --delay: 6.2s; height: 20%; } .sidebar-fall-line:nth-child(11) { left: 92%; --dur: 9.6s; --delay: 0.9s; height: 34%; } .sidebar-fall-line:nth-child(12) { left: 48%; --dur: 12s; --delay: 7.5s; height: 18%; } .sidebar-falling-wind { position: absolute; inset: 0; pointer-events: none; overflow: hidden; } .sidebar-gust { position: absolute; top: -14%; width: 1px; height: 22%; border-radius: 1px; background: linear-gradient( to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.055) 50%, rgba(255, 255, 255, 0) ); opacity: 0; animation: sidebar-gust-soft var(--dur, 14s) ease-in-out infinite; animation-delay: var(--delay, 0s); } .sidebar-gust:nth-child(1) { left: 12%; --dur: 16s; --delay: 0s; height: 26%; } .sidebar-gust:nth-child(2) { left: 27%; --dur: 13s; --delay: 2.5s; height: 18%; } .sidebar-gust:nth-child(3) { left: 44%; --dur: 17s; --delay: 5s; height: 24%; } .sidebar-gust:nth-child(4) { left: 58%; --dur: 14s; --delay: 1s; height: 20%; } .sidebar-gust:nth-child(5) { left: 71%; --dur: 18s; --delay: 7s; height: 28%; } .sidebar-gust:nth-child(6) { left: 84%; --dur: 15s; --delay: 3.5s; height: 16%; } .sidebar-gust:nth-child(7) { left: 35%; --dur: 19s; --delay: 9s; height: 14%; } .sidebar-falling-lane { position: absolute; inset: 0; pointer-events: none; } .sidebar-falling-lane.is-rear { opacity: 0.26; filter: blur(1.1px); } .sidebar-falling-lane.is-mid { opacity: 0.5; } .sidebar-falling-lane.is-hero { opacity: 0.88; } /* Dual-phase movers: phase-b @ -50% duration; Y -120%->120% = seamless loop (no top snap) */ .sidebar-falling-mover { position: absolute; inset: 0; pointer-events: none; will-change: transform; } .sidebar-falling-lane.is-hero .sidebar-falling-mover { animation: sidebar-fall-y 18s linear infinite; } .sidebar-falling-lane.is-hero .sidebar-falling-mover.is-phase-b { animation-delay: -9s; } .sidebar-falling-lane.is-mid .sidebar-falling-mover { animation: sidebar-fall-y 24s linear infinite; } .sidebar-falling-lane.is-mid .sidebar-falling-mover.is-phase-b { animation-delay: -12s; } .sidebar-falling-lane.is-rear .sidebar-falling-mover { animation: sidebar-fall-y 32s linear infinite; } .sidebar-falling-lane.is-rear .sidebar-falling-mover.is-phase-b { animation-delay: -16s; } .sidebar-falling-host { position: absolute; inset: 0; } .sidebar-falling-layer { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; } .sidebar-falling-layer svg { width: 100%; height: 100%; max-width: 100%; max-height: 100%; display: block; } .sidebar-falling-veil { position: absolute; inset: 0; pointer-events: none; background: radial-gradient( ellipse 84% 80% at 50% 48%, transparent 60%, rgba(10, 8, 6, 0.28) 100% ); } /* qs-flip-2: faces above falling stage; paint-over uses ID rules above (board stays under QS) */ .sidebar-stage > .sidebar-face-board { z-index: 2; } .sidebar-stage > .sidebar-face-settings { z-index: 3; } body[data-face="operator"] .shell.is-sidebar-flip .sidebar-stage > #qs-panel, body[data-face="operator"] .shell.is-qs-flip .sidebar-stage > #qs-panel { z-index: 4; } body[data-face="operator"] .shell.is-sidebar-flip .sidebar-stage > #connection-panel, body[data-face="operator"] .shell.is-qs-flip .sidebar-stage > #connection-panel { z-index: 2; } @keyframes sidebar-fall-y { /* Start fully above clip so infinite loop never snaps a plate into view at top */ 0% { transform: translate3d(0, -120%, 0); } 100% { transform: translate3d(0, 120%, 0); } } @keyframes sidebar-gust-soft { 0% { transform: translate3d(0, 0, 0); opacity: 0; } 10% { opacity: 0.28; } 55% { opacity: 0.09; transform: translate3d(0, 72vh, 0); } 100% { transform: translate3d(0, 128vh, 0); opacity: 0; } } @keyframes sidebar-fall-line-drop { 0% { transform: translate3d(0, 0, 0); opacity: 0; } 8% { opacity: 0.45; } 70% { opacity: 0.15; } 100% { transform: translate3d(0, 140vh, 0); opacity: 0; } } /* ============================================================================================================ */ /* [START] BOOT SPLASH - quiet *arr hold until /api/metarr/status links + /api/fetcharr/progress (loading-size-2x-1) */ /* ============================================================================================================ */ html.is-boot-splash, html.is-boot-splash body { background: #1a1a1a; } html.is-boot-splash #shell, html.is-boot-splash .svc-restart-modal { visibility: hidden !important; pointer-events: none !important; } .BootSplash { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; margin: 0; padding: 24px 16px; box-sizing: border-box; background: #1a1a1a; color: #ccc; font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } html:not(.is-boot-splash) .BootSplash, .BootSplash[hidden] { display: none !important; } .BootSplash-inner { display: flex; flex-direction: column; align-items: center; justify-content: center; max-width: 40rem; text-align: center; } /* boot-splash-config-red-1: pack #config-red as-shipped — no peach/filter/currentColor flatten on transition mark */ .BootSplash-mark, .BootSplash-mark use, .BootSplash-mark * { filter: none !important; -webkit-filter: none !important; fill: unset !important; color: inherit; } .BootSplash-mark { color: transparent; } .BootSplash-mark { width: 96px; height: 96px; display: block; border-radius: 50%; } .BootSplash-line { width: 264px; height: 4px; margin: 36px 0 28px; border-radius: 2px; background: #ffffff; transform-origin: center; animation: boot-splash-line 1.35s ease-in-out infinite; } .BootSplash-msg { margin: 0; min-height: 2.6em; padding: 0 8px; font-size: 26px; line-height: 1.35; font-weight: 400; letter-spacing: 0.01em; color: #c8c8c8; } @keyframes boot-splash-line { 0%, 100% { transform: scaleX(0.42); opacity: 0.55; } 50% { transform: scaleX(1); opacity: 1; } } /* ============================================================================================================ */ /* [END] BOOT SPLASH */ /* ============================================================================================================ */