/** * Liquid Glass skin — Instagram-inspired frosted glass (light + dark). * * Enable: * Disable: remove data-skin or set data-skin="classic" * * Does not change layout; only design tokens + light chrome polish. * Classic theme remains the default :root values in app.css / styles.css. */ /* ─── Tokens (light) ─────────────────────────────────────────────── */ html[data-skin='liquid-glass'] { --radius: 16px; --radius-lg: 22px; --ease: 0.2s cubic-bezier(0.22, 1, 0.36, 1); --bg: #e8eef7; --surface: rgba(255, 255, 255, 0.58); --surface-hover: rgba(255, 255, 255, 0.72); --surface-muted: rgba(255, 255, 255, 0.38); --border: rgba(255, 255, 255, 0.55); --border-strong: rgba(15, 23, 42, 0.08); --text: #0c1222; --muted: #5b6b82; --accent: #2f8fff; --accent-soft: rgba(47, 143, 255, 0.16); --success: #12a67a; --success-soft: rgba(18, 166, 122, 0.14); --danger: #e5484d; --danger-soft: rgba(229, 72, 77, 0.12); --warn: #e5a000; --warn-soft: rgba(229, 160, 0, 0.14); --shadow: 0 1px 0 rgba(255, 255, 255, 0.65) inset, 0 8px 32px rgba(15, 23, 42, 0.08), 0 2px 8px rgba(15, 23, 42, 0.04); --shadow-lg: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 16px 48px rgba(15, 23, 42, 0.12), 0 4px 12px rgba(15, 23, 42, 0.06); --brand-gradient: linear-gradient(145deg, #5ac8fa 0%, #a78bfa 48%, #f472b6 100%); --glass-blur: 22px; --glass-saturate: 1.35; --bg-mesh: radial-gradient(1000px 520px at 8% -8%, rgba(90, 200, 250, 0.42), transparent 55%), radial-gradient(860px 480px at 100% 0%, rgba(167, 139, 250, 0.32), transparent 50%), radial-gradient(720px 420px at 50% 110%, rgba(244, 114, 182, 0.18), transparent 55%), linear-gradient(180deg, #eef3fb 0%, #e4ebf6 100%); --accent-fallback: var(--accent); --preview: rgba(12, 18, 34, 0.92); --track: rgba(15, 23, 42, 0.08); --scan: #5ac8fa; } /* ─── Tokens (dark) ──────────────────────────────────────────────── */ @media (prefers-color-scheme: dark) { html[data-skin='liquid-glass'] { --bg: #06080f; --surface: rgba(28, 34, 52, 0.55); --surface-hover: rgba(40, 48, 72, 0.68); --surface-muted: rgba(18, 24, 40, 0.55); --border: rgba(255, 255, 255, 0.12); --border-strong: rgba(255, 255, 255, 0.16); --text: #f1f5ff; --muted: #9aa8c2; --accent: #64b5ff; --accent-soft: rgba(100, 181, 255, 0.16); --success: #3dd68c; --success-soft: rgba(61, 214, 140, 0.14); --danger: #ff7b82; --danger-soft: rgba(255, 123, 130, 0.14); --warn: #ffd60a; --warn-soft: rgba(255, 214, 10, 0.14); --shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 12px 40px rgba(0, 0, 0, 0.45), 0 2px 10px rgba(0, 0, 0, 0.35); --shadow-lg: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 20px 56px rgba(0, 0, 0, 0.55), 0 4px 14px rgba(0, 0, 0, 0.4); --brand-gradient: linear-gradient(145deg, #38bdf8 0%, #a78bfa 50%, #f472b6 100%); --bg-mesh: radial-gradient(900px 480px at 0% -10%, rgba(56, 189, 248, 0.22), transparent 55%), radial-gradient(800px 460px at 100% 0%, rgba(167, 139, 250, 0.2), transparent 50%), radial-gradient(700px 400px at 40% 110%, rgba(244, 114, 182, 0.12), transparent 55%), linear-gradient(180deg, #070a12 0%, #05070e 100%); --accent-fallback: var(--accent); --preview: #04060c; --track: rgba(255, 255, 255, 0.08); --scan: #64b5ff; } } /* ─── Page canvas ────────────────────────────────────────────────── */ html[data-skin='liquid-glass'], html[data-skin='liquid-glass'] body { background: var(--bg-mesh); background-attachment: fixed; background-color: var(--bg); } /* Admin stays solid dark (legibility) */ html[data-skin='liquid-glass'] body.admin-panel { background: #030712; background-image: none; } /* ─── Glass utility used by shared chrome ────────────────────────── */ html[data-skin='liquid-glass'] { --glass-surface: var(--surface); } @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { /* Shared Live* chrome */ html[data-skin='liquid-glass'] .sidebar, html[data-skin='liquid-glass'] .mobile-header, html[data-skin='liquid-glass'] .map-toolbar, html[data-skin='liquid-glass'] .basemap-toggle, html[data-skin='liquid-glass'] .status-bar, html[data-skin='liquid-glass'] .bus-info-panel, html[data-skin='liquid-glass'] .no-buses-overlay, html[data-skin='liquid-glass'] .status-toast, html[data-skin='liquid-glass'] .toast-card, html[data-skin='liquid-glass'] .idle-card, html[data-skin='liquid-glass'] .mode-toggle, html[data-skin='liquid-glass'] .filters-section, html[data-skin='liquid-glass'] .route-filter, html[data-skin='liquid-glass'] .mode-btn, /* Home */ html[data-skin='liquid-glass'] .app, html[data-skin='liquid-glass'] .brand-mark, /* SSTV */ html[data-skin='liquid-glass'] .tabs, html[data-skin='liquid-glass'] .card, html[data-skin='liquid-glass'] .panel, html[data-skin='liquid-glass'] .site-header { -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); } } /* Soft specular edge on primary panels */ html[data-skin='liquid-glass'] .sidebar, html[data-skin='liquid-glass'] .bus-info-panel, html[data-skin='liquid-glass'] .no-buses-overlay, html[data-skin='liquid-glass'] .status-toast, html[data-skin='liquid-glass'] .app, html[data-skin='liquid-glass'] .card, html[data-skin='liquid-glass'] .panel { border-color: var(--border) !important; box-shadow: var(--shadow-lg); } html[data-skin='liquid-glass'] .brand-mark { background: var(--brand-gradient) !important; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.45) inset, 0 8px 24px color-mix(in srgb, #a78bfa 35%, transparent); border: 1px solid rgba(255, 255, 255, 0.35); } html[data-skin='liquid-glass'] .route-filter.selected, html[data-skin='liquid-glass'] .mode-btn.active, html[data-skin='liquid-glass'] .tab.active { box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent), 0 8px 24px color-mix(in srgb, var(--accent) 18%, transparent); } html[data-skin='liquid-glass'] .status-pill { -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2); } /* Map chrome: keep map readable, glass only UI overlays */ html[data-skin='liquid-glass'] .leaflet-control-attribution { background: color-mix(in srgb, var(--surface) 80%, transparent) !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-radius: 8px; border: 1px solid var(--border); } @media (prefers-reduced-transparency: reduce) { html[data-skin='liquid-glass'] { --surface: #ffffff; --surface-muted: #f1f5f9; --glass-blur: 0px; } @media (prefers-color-scheme: dark) { html[data-skin='liquid-glass'] { --surface: #111827; --surface-muted: #0b1220; } } }