/* ============================================================================ UNSUNG AI — OTS THEME PACK v1.0 Switchable themes for OpenTAKServer UI (React + Mantine v7 SPA) Themes: ⚡ Night City · ◈ Nightvision · ✳ Claude · ✳ Claude Dark Palette lineage: unsungai.com landing page + Open WebUI "Night City Protocol" HOW IT WORKS Every theme declares the SAME token set (--ua-*). Section 1 bridges those tokens into Mantine's own CSS variables, so overriding ~40 tokens re-skins every component in the app — no JS bundle changes, no rebuild. Activated by — see unsung-theme.js Remove the attribute and the stock OTS theme returns untouched. ============================================================================ */ @import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;600;700&family=Share+Tech+Mono&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@700;900&family=Poppins:wght@500;600&display=swap'); /* --------------------------------------------------------------------------- 1. TOKEN → MANTINE BRIDGE Specificity note: Mantine declares its palette on `:root[data-mantine-color- scheme=dark]` (0,2,0). `html:root[data-ua-theme]` scores (0,2,1) so these win deterministically regardless of stylesheet load order. --------------------------------------------------------------------------- */ html:root[data-ua-theme] { /* Dark ramp — Mantine semantics: 0-3 are TEXT tones, 4-9 are SURFACES */ --mantine-color-dark-0: var(--ua-d0); --mantine-color-dark-1: var(--ua-d1); --mantine-color-dark-2: var(--ua-d2); --mantine-color-dark-3: var(--ua-d3); --mantine-color-dark-4: var(--ua-d4); --mantine-color-dark-5: var(--ua-d5); --mantine-color-dark-6: var(--ua-d6); --mantine-color-dark-7: var(--ua-d7); --mantine-color-dark-8: var(--ua-d8); --mantine-color-dark-9: var(--ua-d9); /* Gray ramp — 0 = lightest paper, 9 = darkest ink */ --mantine-color-gray-0: var(--ua-g0); --mantine-color-gray-1: var(--ua-g1); --mantine-color-gray-2: var(--ua-g2); --mantine-color-gray-3: var(--ua-g3); --mantine-color-gray-4: var(--ua-g4); --mantine-color-gray-5: var(--ua-g5); --mantine-color-gray-6: var(--ua-g6); --mantine-color-gray-7: var(--ua-g7); --mantine-color-gray-8: var(--ua-g8); --mantine-color-gray-9: var(--ua-g9); --mantine-color-white: var(--ua-white); --mantine-color-black: var(--ua-black); /* Semantic surfaces — set explicitly so the theme holds under either value of data-mantine-color-scheme */ --mantine-color-body: var(--ua-bg); --mantine-color-text: var(--ua-text); --mantine-color-bright: var(--ua-bright); --mantine-color-dimmed: var(--ua-dim); --mantine-color-placeholder: var(--ua-placeholder); --mantine-color-anchor: var(--ua-accent); --mantine-color-default: var(--ua-surface); --mantine-color-default-hover: var(--ua-surface-2); --mantine-color-default-color: var(--ua-text); --mantine-color-default-border: var(--ua-border); --mantine-color-disabled: var(--ua-surface-2); --mantine-color-disabled-color: var(--ua-placeholder); --mantine-color-disabled-border: var(--ua-border); --mantine-color-error: var(--ua-danger); /* Primary — OTS ships Mantine's default blue primary, so the blue scale is remapped alongside the primary-* aliases to catch every reference. */ --mantine-primary-color-filled: var(--ua-accent); --mantine-primary-color-filled-hover: var(--ua-accent-hover); --mantine-primary-color-light: var(--ua-accent-soft); --mantine-primary-color-light-hover: var(--ua-accent-soft-hover); --mantine-primary-color-light-color: var(--ua-accent); --mantine-primary-color-outline: var(--ua-accent); --mantine-primary-color-outline-hover: var(--ua-accent-soft); --mantine-primary-color-contrast: var(--ua-accent-contrast); --mantine-color-blue-filled: var(--ua-accent); --mantine-color-blue-filled-hover: var(--ua-accent-hover); --mantine-color-blue-light: var(--ua-accent-soft); --mantine-color-blue-light-hover: var(--ua-accent-soft-hover); --mantine-color-blue-light-color: var(--ua-accent); --mantine-color-blue-outline: var(--ua-accent); --mantine-color-blue-text: var(--ua-accent); --mantine-color-blue-3: var(--ua-accent-hover); --mantine-color-blue-4: var(--ua-accent); --mantine-color-blue-5: var(--ua-accent); --mantine-color-blue-6: var(--ua-accent); --mantine-color-blue-7: var(--ua-accent-hover); --mantine-color-blue-8: var(--ua-accent-hover); /* Status colours — alerts, EUD state, CoT markers */ --mantine-color-red-filled: var(--ua-danger); --mantine-color-red-filled-hover: var(--ua-danger); --mantine-color-red-light-color: var(--ua-danger); --mantine-color-red-text: var(--ua-danger); --mantine-color-red-6: var(--ua-danger); --mantine-color-red-7: var(--ua-danger); --mantine-color-red-8: var(--ua-danger); --mantine-color-green-filled: var(--ua-ok); --mantine-color-green-filled-hover: var(--ua-ok); --mantine-color-green-light-color: var(--ua-ok); --mantine-color-green-text: var(--ua-ok); --mantine-color-green-6: var(--ua-ok); --mantine-color-green-7: var(--ua-ok); --mantine-color-green-8: var(--ua-ok); --mantine-color-yellow-filled: var(--ua-warn); --mantine-color-yellow-light-color: var(--ua-warn); --mantine-color-yellow-text: var(--ua-warn); --mantine-color-yellow-6: var(--ua-warn); --mantine-color-teal-filled: var(--ua-ok); --mantine-color-teal-light-color: var(--ua-ok); --mantine-color-cyan-filled: var(--ua-accent); --mantine-color-cyan-light-color: var(--ua-accent); /* Typography + geometry */ --mantine-font-family: var(--ua-font-ui); --mantine-font-family-headings: var(--ua-font-head); --mantine-font-family-monospace: var(--ua-font-mono); --mantine-heading-font-weight: var(--ua-head-weight); --mantine-radius-default: var(--ua-radius); --mantine-radius-sm: var(--ua-radius-sm); --mantine-radius-md: var(--ua-radius); --mantine-radius-lg: var(--ua-radius-lg); --mantine-datatable-row-border-color: var(--ua-border); color-scheme: var(--ua-scheme); accent-color: var(--ua-accent); } /* --------------------------------------------------------------------------- 2. THEME — ⚡ NIGHT CITY Rain-slick blue-black + neon. Lineage: Open WebUI "Night City Protocol" crossed with the unsungai.com landing page palette. --------------------------------------------------------------------------- */ html:root[data-ua-theme="nightcity"] { --ua-scheme: dark; --ua-d0:#d3f3fc; --ua-d1:#a9dbee; --ua-d2:#7db4cf; --ua-d3:#5d8aa8; --ua-d4:#24405a; --ua-d5:#1a2f44; --ua-d6:#111d30; --ua-d7:#050a13; --ua-d8:#030710; --ua-d9:#02050b; --ua-g0:#e9fbff; --ua-g1:#d3f3fc; --ua-g2:#a9dbee; --ua-g3:#7db4cf; --ua-g4:#5d8aa8; --ua-g5:#3f647f; --ua-g6:#29465e; --ua-g7:#1a2f44; --ua-g8:#131f33; --ua-g9:#0d1626; --ua-white:#eafcff; --ua-black:#02050b; --ua-bg:#050a13; --ua-surface:#0d1626; --ua-surface-2:#131f33; --ua-border:#1e3a52; --ua-text:#d3f3fc; --ua-bright:#ffffff; --ua-dim:#7db4cf; --ua-placeholder:#5d8aa8; --ua-accent:#00e5ff; /* hologram */ --ua-accent-hover:#5cf0ff; --ua-accent-soft:rgba(0,229,255,.12); --ua-accent-soft-hover:rgba(0,229,255,.20); --ua-accent-contrast:#02050b; --ua-danger:#ff2d6d; /* netrunner */ --ua-ok:#00ff9c; /* the rain */ --ua-warn:#fcee0a; /* arasaka */ --ua-font-ui:'Rajdhani',ui-sans-serif,system-ui,sans-serif; --ua-font-head:'Rajdhani',ui-sans-serif,system-ui,sans-serif; --ua-font-mono:'Share Tech Mono',ui-monospace,SFMono-Regular,Menlo,monospace; --ua-font-brand:'Orbitron',ui-sans-serif,sans-serif; --ua-head-weight:700; --ua-head-spacing:.045em; --ua-radius:.375rem; --ua-radius-sm:.25rem; --ua-radius-lg:.5rem; --ua-glow:0 0 12px rgba(0,229,255,.32); --ua-glow-text:0 0 10px rgba(0,229,255,.30); --ua-scan:.055; --ua-haze-a:rgba(0,229,255,.09); --ua-haze-b:rgba(255,45,109,.08); --ua-map-filter:invert(1) hue-rotate(190deg) brightness(.92) contrast(.95) saturate(.75); } /* --------------------------------------------------------------------------- 3. THEME — ◈ NIGHTVISION Phosphor green on black. Built for a darkened TOC: everything non-essential recedes, contacts and alerts carry the signal. --------------------------------------------------------------------------- */ html:root[data-ua-theme="nightvision"] { --ua-scheme: dark; --ua-d0:#c8ffdd; --ua-d1:#8dfab5; --ua-d2:#4ee08a; --ua-d3:#2fa863; --ua-d4:#14472a; --ua-d5:#0e3520; --ua-d6:#082617; --ua-d7:#010703; --ua-d8:#000402; --ua-d9:#000201; --ua-g0:#e6fff0; --ua-g1:#c8ffdd; --ua-g2:#8dfab5; --ua-g3:#4ee08a; --ua-g4:#2fa863; --ua-g5:#1d7a46; --ua-g6:#14472a; --ua-g7:#0e3520; --ua-g8:#082617; --ua-g9:#03120a; --ua-white:#e6fff0; --ua-black:#000201; --ua-bg:#010703; --ua-surface:#061a10; --ua-surface-2:#0b2a19; --ua-border:#14472a; --ua-text:#c8ffdd; --ua-bright:#ffffff; --ua-dim:#4ee08a; --ua-placeholder:#2fa863; --ua-accent:#00ff66; --ua-accent-hover:#6bffa8; --ua-accent-soft:rgba(0,255,102,.12); --ua-accent-soft-hover:rgba(0,255,102,.20); --ua-accent-contrast:#001a09; --ua-danger:#ff5a3c; --ua-ok:#00ff66; --ua-warn:#ffb300; --ua-font-ui:'Share Tech Mono',ui-monospace,Menlo,monospace; --ua-font-head:'Rajdhani',ui-sans-serif,system-ui,sans-serif; --ua-font-mono:'Share Tech Mono',ui-monospace,SFMono-Regular,Menlo,monospace; --ua-font-brand:'Orbitron',ui-sans-serif,sans-serif; --ua-head-weight:700; --ua-head-spacing:.06em; --ua-radius:.25rem; --ua-radius-sm:.125rem; --ua-radius-lg:.375rem; --ua-glow:0 0 12px rgba(0,255,102,.30); --ua-glow-text:0 0 9px rgba(0,255,102,.38); --ua-scan:.085; --ua-haze-a:rgba(0,255,102,.10); --ua-haze-b:rgba(0,255,102,.05); --ua-map-filter:grayscale(1) sepia(1) hue-rotate(65deg) saturate(5) brightness(.62) contrast(1.15); } /* --------------------------------------------------------------------------- 4. THEME — ✳ CLAUDE Warm ivory paper, clay accents. Matched to claude.ai light. --------------------------------------------------------------------------- */ html:root[data-ua-theme="claude"] { --ua-scheme: light; --ua-d0:#141413; --ua-d1:#1b1a17; --ua-d2:#262521; --ua-d3:#363530; --ua-d4:#e8e6dc; --ua-d5:#f0eee6; --ua-d6:#ffffff; --ua-d7:#faf9f5; --ua-d8:#f5f4ee; --ua-d9:#f0eee6; --ua-g0:#ffffff; --ua-g1:#faf9f5; --ua-g2:#f5f4ee; --ua-g3:#f0eee6; --ua-g4:#e8e6dc; --ua-g5:#d1cfc3; --ua-g6:#b0aea5; --ua-g7:#87857c; --ua-g8:#6b695f; --ua-g9:#53514a; --ua-white:#ffffff; --ua-black:#141413; --ua-bg:#faf9f5; --ua-surface:#ffffff; --ua-surface-2:#f0eee6; --ua-border:#e8e6dc; --ua-text:#141413; --ua-bright:#000000; --ua-dim:#6b695f; --ua-placeholder:#b0aea5; --ua-accent:#d97757; /* clay */ --ua-accent-hover:#c96442; --ua-accent-soft:rgba(217,119,87,.12); --ua-accent-soft-hover:rgba(217,119,87,.20); --ua-accent-contrast:#ffffff; --ua-danger:#c0392b; --ua-ok:#3d8f5f; --ua-warn:#a8791b; --ua-font-ui:ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif; --ua-font-head:'Poppins',ui-sans-serif,system-ui,sans-serif; --ua-font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; --ua-font-brand:'Poppins',ui-sans-serif,sans-serif; --ua-head-weight:600; --ua-head-spacing:-.01em; --ua-radius:.625rem; --ua-radius-sm:.375rem; --ua-radius-lg:.875rem; --ua-glow:0 2px 10px rgba(20,20,19,.07); --ua-glow-text:none; --ua-scan:0; --ua-haze-a:transparent; --ua-haze-b:transparent; --ua-map-filter:saturate(.92) brightness(1.02); } /* --------------------------------------------------------------------------- 5. THEME — ✳ CLAUDE DARK Warm charcoal, ivory type, same clay accents. Matched to claude.ai dark. --------------------------------------------------------------------------- */ html:root[data-ua-theme="claude-dark"] { --ua-scheme: dark; --ua-d0:#faf9f5; --ua-d1:#f0eee6; --ua-d2:#a3a196; --ua-d3:#83817a; --ua-d4:#403f3b; --ua-d5:#33322e; --ua-d6:#2c2b27; --ua-d7:#262624; --ua-d8:#1f1e1d; --ua-d9:#191817; --ua-g0:#faf9f5; --ua-g1:#f0eee6; --ua-g2:#dedcd1; --ua-g3:#c2c0b4; --ua-g4:#a3a196; --ua-g5:#83817a; --ua-g6:#66655e; --ua-g7:#4d4c47; --ua-g8:#33322e; --ua-g9:#262624; --ua-white:#faf9f5; --ua-black:#141413; --ua-bg:#262624; --ua-surface:#2c2b27; --ua-surface-2:#33322e; --ua-border:#403f3b; --ua-text:#faf9f5; --ua-bright:#ffffff; --ua-dim:#a3a196; --ua-placeholder:#83817a; --ua-accent:#d97757; --ua-accent-hover:#e6a08a; --ua-accent-soft:rgba(217,119,87,.14); --ua-accent-soft-hover:rgba(217,119,87,.22); --ua-accent-contrast:#ffffff; --ua-danger:#e0563f; --ua-ok:#6fbf8b; --ua-warn:#ddb15a; --ua-font-ui:ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif; --ua-font-head:'Poppins',ui-sans-serif,system-ui,sans-serif; --ua-font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; --ua-font-brand:'Poppins',ui-sans-serif,sans-serif; --ua-head-weight:600; --ua-head-spacing:-.01em; --ua-radius:.625rem; --ua-radius-sm:.375rem; --ua-radius-lg:.875rem; --ua-glow:0 2px 12px rgba(0,0,0,.32); --ua-glow-text:none; --ua-scan:0; --ua-haze-a:transparent; --ua-haze-b:transparent; --ua-map-filter:invert(1) hue-rotate(180deg) brightness(.90) contrast(.92) sepia(.18); } /* --------------------------------------------------------------------------- 6. SHARED POLISH Rules consume tokens only — nothing here is theme-specific. --------------------------------------------------------------------------- */ html:root[data-ua-theme] body { background: var(--ua-bg); color: var(--ua-text); font-family: var(--ua-font-ui); } html:root[data-ua-theme] :is(h1,h2,h3,h4,h5,h6), html:root[data-ua-theme] .mantine-Title-root { font-family: var(--ua-font-head); font-weight: var(--ua-head-weight); letter-spacing: var(--ua-head-spacing); } html:root[data-ua-theme] :is(h1,h2) { text-shadow: var(--ua-glow-text); } html:root[data-ua-theme] a { color: var(--ua-accent); } html:root[data-ua-theme] ::selection { background: var(--ua-accent); color: var(--ua-accent-contrast); } html:root[data-ua-theme] :is(input,textarea,select,button):focus-visible, html:root[data-ua-theme] .mantine-focus-auto:focus-visible { outline: 2px solid var(--ua-accent) !important; outline-offset: 1px; } html:root[data-ua-theme] textarea { caret-color: var(--ua-accent); } /* Monospace for the data-dense surfaces: tables, code, callsigns, coords */ html:root[data-ua-theme] :is(pre,code,kbd,samp) { font-family: var(--ua-font-mono); } html:root[data-ua-theme] pre { background: var(--ua-surface) !important; border: 1px solid var(--ua-border) !important; border-radius: var(--ua-radius); } html:root[data-ua-theme] :not(pre) > code { color: var(--ua-accent); background: var(--ua-accent-soft); border: 1px solid var(--ua-border); border-radius: var(--ua-radius-sm); padding: .08em .32em; } /* Scrollbars */ html:root[data-ua-theme] ::-webkit-scrollbar { width: 9px; height: 9px; } html:root[data-ua-theme] ::-webkit-scrollbar-track { background: transparent; } html:root[data-ua-theme] ::-webkit-scrollbar-thumb { background: var(--ua-surface-2); border: 1px solid var(--ua-border); border-radius: 5px; } html:root[data-ua-theme] ::-webkit-scrollbar-thumb:hover { background: var(--ua-border); } html:root[data-ua-theme] * { scrollbar-color: var(--ua-surface-2) transparent; scrollbar-width: thin; } /* Tables — hairline separators, accent-tinted hover row */ html:root[data-ua-theme] :is(table, .mantine-Table-table) { border-color: var(--ua-border); } html:root[data-ua-theme] :is(th, .mantine-Table-th) { color: var(--ua-dim); font-family: var(--ua-font-head); letter-spacing: var(--ua-head-spacing); border-color: var(--ua-border) !important; } html:root[data-ua-theme] :is(td, .mantine-Table-td) { border-color: var(--ua-border) !important; } html:root[data-ua-theme] tbody tr:hover > td { background: var(--ua-accent-soft); } /* Surfaces */ html:root[data-ua-theme] :is(.mantine-Paper-root,.mantine-Card-root,.mantine-Modal-content, .mantine-Popover-dropdown,.mantine-Menu-dropdown) { background: var(--ua-surface); border: 1px solid var(--ua-border); box-shadow: var(--ua-glow); } html:root[data-ua-theme] :is(.mantine-AppShell-navbar,.mantine-AppShell-header, .mantine-NavLink-root[data-active]) { border-color: var(--ua-border); } html:root[data-ua-theme] .mantine-AppShell-navbar, html:root[data-ua-theme] .mantine-AppShell-header { background: var(--ua-surface); } html:root[data-ua-theme] .mantine-NavLink-root[data-active] { background: var(--ua-accent-soft); box-shadow: inset 2px 0 0 var(--ua-accent); } /* --------------------------------------------------------------------------- 7. ATMOSPHERE — toggled by data-ua-fx="on" Deliberately restrained: the map has to stay readable. --------------------------------------------------------------------------- */ html:root[data-ua-theme][data-ua-fx="on"] body::before { content:''; position: fixed; inset: 0; z-index: 0; pointer-events: none; mix-blend-mode: screen; background: radial-gradient(55% 40% at 8% -4%, var(--ua-haze-a), transparent 62%), radial-gradient(50% 42% at 98% 104%, var(--ua-haze-b), transparent 62%); } html:root[data-ua-theme][data-ua-fx="on"] body::after { content:''; position: fixed; inset: 0; z-index: 2147482000; pointer-events: none; opacity: var(--ua-scan); background: repeating-linear-gradient(0deg, var(--ua-black) 0 1px, transparent 1px 3px); } /* --------------------------------------------------------------------------- 8. MAP — tile tint toggled by data-ua-map="on" (default OFF) Raster street tiles only. Leave off for satellite/imagery basemaps. --------------------------------------------------------------------------- */ html:root[data-ua-theme] .leaflet-container { background: var(--ua-d9); } html:root[data-ua-theme][data-ua-map="on"] .leaflet-tile-pane { filter: var(--ua-map-filter); } html:root[data-ua-theme] :is(.leaflet-popup-content-wrapper,.leaflet-popup-tip, .leaflet-control-layers,.leaflet-bar a) { background: var(--ua-surface) !important; color: var(--ua-text) !important; border-color: var(--ua-border) !important; } html:root[data-ua-theme] .leaflet-bar a:hover { background: var(--ua-surface-2) !important; } @media (prefers-reduced-motion: reduce) { html:root[data-ua-theme] *, html:root[data-ua-theme] *::before, html:root[data-ua-theme] *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } /* --------------------------------------------------------------------------- 9. THEME SWITCHER WIDGET Falls back to Mantine's own variables when no theme is active, so the control stays legible on stock OTS in either light or dark. --------------------------------------------------------------------------- */ #ua-switch { --uaw-bg: var(--ua-surface, var(--mantine-color-default, #1f1f1f)); --uaw-bg2: var(--ua-surface-2, var(--mantine-color-default-hover, #2b2b2b)); --uaw-bd: var(--ua-border, var(--mantine-color-default-border, #444)); --uaw-fg: var(--ua-text, var(--mantine-color-text, #eee)); --uaw-dim: var(--ua-dim, var(--mantine-color-dimmed, #999)); --uaw-ac: var(--ua-accent, var(--mantine-primary-color-filled, #228be6)); --uaw-acc: var(--ua-accent-contrast, #fff); --uaw-r: var(--ua-radius, .5rem); position: fixed; right: 16px; bottom: 16px; z-index: 2147483000; font-family: var(--ua-font-ui, ui-sans-serif, system-ui, sans-serif); font-size: 13px; line-height: 1.35; } #ua-switch * { box-sizing: border-box; } #ua-switch-btn { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; background: var(--uaw-bg); color: var(--uaw-fg); border: 1px solid var(--uaw-bd); border-radius: 999px; cursor: pointer; backdrop-filter: blur(8px); box-shadow: 0 4px 18px rgba(0,0,0,.34); transition: border-color .18s, box-shadow .18s, transform .18s; font: inherit; letter-spacing: .04em; text-transform: uppercase; } #ua-switch-btn:hover { border-color: var(--uaw-ac); box-shadow: 0 4px 22px rgba(0,0,0,.4), 0 0 14px var(--uaw-ac); transform: translateY(-1px); } #ua-switch-btn:focus-visible { outline: 2px solid var(--uaw-ac); outline-offset: 2px; } #ua-switch-btn .ua-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--uaw-ac); box-shadow: 0 0 8px var(--uaw-ac); } #ua-switch-panel { position: absolute; right: 0; bottom: 48px; width: 246px; background: var(--uaw-bg); color: var(--uaw-fg); border: 1px solid var(--uaw-bd); border-radius: var(--uaw-r); box-shadow: 0 12px 40px rgba(0,0,0,.46); backdrop-filter: blur(10px); padding: 8px; overflow: hidden; transform-origin: bottom right; animation: ua-pop .16s cubic-bezier(.22,.68,0,1); } #ua-switch[hidden] , #ua-switch-panel[hidden] { display: none !important; } @keyframes ua-pop { from { opacity:0; transform: scale(.94) translateY(6px);} to { opacity:1; } } #ua-switch-panel .ua-h { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--uaw-dim); padding: 6px 8px 8px; font-family: var(--ua-font-head, inherit); } #ua-switch-panel .ua-sep { height:1px; background: var(--uaw-bd); margin: 6px 4px; } #ua-switch-panel .ua-item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px; border: 1px solid transparent; border-radius: calc(var(--uaw-r) - 2px); background: transparent; color: inherit; cursor: pointer; font: inherit; text-align: left; transition: background .14s, border-color .14s; } #ua-switch-panel .ua-item:hover { background: var(--uaw-bg2); } #ua-switch-panel .ua-item:focus-visible { outline: 2px solid var(--uaw-ac); outline-offset: -2px; } #ua-switch-panel .ua-item[aria-checked="true"] { border-color: var(--uaw-ac); background: var(--uaw-bg2); } #ua-switch-panel .ua-item[aria-checked="true"] .ua-name { color: var(--uaw-ac); } #ua-switch-panel .ua-sw { display: flex; flex: 0 0 auto; } #ua-switch-panel .ua-sw i { width: 13px; height: 13px; border-radius: 50%; border: 1px solid rgba(255,255,255,.22); margin-left: -5px; } #ua-switch-panel .ua-sw i:first-child { margin-left: 0; } #ua-switch-panel .ua-name { flex: 1 1 auto; font-weight: 600; letter-spacing: .01em; } #ua-switch-panel .ua-check { flex: 0 0 auto; color: var(--uaw-ac); opacity: 0; font-size: 12px; } #ua-switch-panel .ua-item[aria-checked="true"] .ua-check { opacity: 1; } /* Toggle rows */ #ua-switch-panel .ua-tog { justify-content: space-between; } #ua-switch-panel .ua-tog .ua-name { font-weight: 500; } #ua-switch-panel .ua-track { flex: 0 0 auto; width: 32px; height: 18px; border-radius: 999px; background: var(--uaw-bd); position: relative; transition: background .18s; } #ua-switch-panel .ua-track::after { content:''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--uaw-fg); transition: transform .18s cubic-bezier(.22,.68,0,1); } #ua-switch-panel .ua-tog[aria-checked="true"] .ua-track { background: var(--uaw-ac); } #ua-switch-panel .ua-tog[aria-checked="true"] .ua-track::after { transform: translateX(14px); background: var(--uaw-acc); } #ua-switch-panel .ua-note { font-size: 10.5px; color: var(--uaw-dim); padding: 2px 8px 6px; letter-spacing: .01em; } @media (max-width: 640px) { #ua-switch { right: 10px; bottom: 10px; } } @media print { #ua-switch { display: none !important; } }