/* ============================================================ Command Center — dense tactical dashboard theme ============================================================ */ :root { --bg: #070b12; --bg-2: #0b1120; --panel: rgba(15, 22, 36, 0.72); --panel-solid: #0d1524; --panel-head: rgba(255, 255, 255, 0.03); --border: rgba(120, 165, 210, 0.14); --border-strong: rgba(120, 165, 210, 0.28); --text: #dbe4ef; --muted: #8b9bb3; --faint: #5d6b82; --accent: #22d3ee; --accent-dim: rgba(34, 211, 238, 0.15); --good: #34d399; --warn: #fbbf24; --bad: #f87171; --mono: ui-monospace, "JetBrains Mono", "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace; --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --radius: 10px; --tb-h: 62px; } /* Light theme — applied when (resolved by applyTheme in app.js). 'auto' resolves to light/dark in JS from the viewer's OS, so only these two states hit CSS. */ :root[data-theme="light"] { --bg: #eef2f7; --bg-2: #e3e9f2; --panel: rgba(255, 255, 255, 0.82); --panel-solid: #ffffff; --panel-head: rgba(10, 30, 60, 0.035); --border: rgba(30, 60, 100, 0.16); --border-strong: rgba(30, 60, 100, 0.30); --text: #16202e; --muted: #55627a; --faint: #8592a6; --accent-dim: rgba(20, 120, 150, 0.12); --good: #0f9d6b; --warn: #b45309; --bad: #dc2626; } * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; font-family: var(--sans); color: var(--text); background: var(--bg); overflow-x: hidden; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } button { font-family: inherit; } /* ---- Background layers ---- */ #bg { position: fixed; inset: 0; z-index: -2; background-size: cover; background-position: center; background-repeat: no-repeat; background-color: var(--bg); transition: opacity .4s ease; } #scrim { position: fixed; inset: 0; z-index: -1; background: radial-gradient(1200px 600px at 20% -10%, rgba(34,211,238,.07), transparent 60%), linear-gradient(180deg, rgba(4,7,12,.82) 0%, rgba(4,7,12,.66) 40%, rgba(4,7,12,.86) 100%); } #app { min-height: 100%; display: flex; flex-direction: column; } /* ============================================================ Top bar ============================================================ */ #topbar { height: var(--tb-h); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; padding: 0 18px; background: rgba(7, 11, 18, 0.6); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 50; } .tb-clock { display: flex; align-items: baseline; gap: 12px; } .tb-time { font-family: var(--mono); font-size: 26px; font-weight: 600; letter-spacing: 1px; color: #fff; } .tb-time .sec { color: var(--accent); font-size: 16px; } .tb-date { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 1.5px; } .tb-center { display: flex; align-items: center; gap: 14px; min-width: 0; overflow: hidden; } .tb-wx { display: flex; align-items: center; gap: 10px; padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--panel); } .tb-wx .wx-ico { width: 26px; height: 26px; color: var(--accent); } .tb-wx .wx-temp { font-family: var(--mono); font-size: 18px; font-weight: 600; } .tb-wx .wx-meta { font-size: 11px; color: var(--muted); line-height: 1.25; } .tb-wx .wx-loc { color: var(--text); font-weight: 600; } .tb-status { display: flex; gap: 6px; flex-wrap: wrap; overflow: hidden; } .pill { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-family: var(--mono); text-transform: uppercase; letter-spacing: .5px; padding: 4px 9px; border-radius: 999px; border: 1px solid var(--border); color: var(--muted); background: rgba(255,255,255,.02); white-space: nowrap; } .pill .led { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); } .pill.up .led { background: var(--good); box-shadow: 0 0 8px var(--good); } .pill.down { color: var(--bad); border-color: rgba(248,113,113,.35); } .pill.down .led { background: var(--bad); box-shadow: 0 0 8px var(--bad); } .tb-right { display: flex; align-items: center; gap: 10px; } .btn { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; border: 1px solid var(--border-strong); background: var(--panel); color: var(--text); padding: 8px 14px; border-radius: 8px; font-size: 13px; transition: .15s; } .btn:hover { border-color: var(--accent); color: #fff; } .btn.primary { background: var(--accent); color: #04222a; border-color: var(--accent); font-weight: 600; } .btn.primary:hover { filter: brightness(1.08); } .btn.ghost { background: transparent; } .btn.icon { padding: 8px; } .btn svg { width: 16px; height: 16px; } .user-chip { display: flex; align-items: center; gap: 9px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); } .user-chip .avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--accent-dim); color: var(--accent); display: grid; place-items: center; font-weight: 700; font-size: 12px; } .user-chip .u-name { font-size: 13px; } .user-chip .u-role { font-size: 10px; color: var(--faint); text-transform: uppercase; letter-spacing: 1px; } /* ============================================================ Main area ============================================================ */ #main { flex: 1; padding: 16px; } #statusline { font-family: var(--mono); font-size: 11px; color: var(--faint); padding: 8px 18px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; gap: 12px; } /* ---- Widget grid ---- */ .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; grid-auto-flow: dense; } .span-2 { grid-column: span 2; } .tall .panel-body { max-height: 460px; } @media (max-width: 760px) { .span-2 { grid-column: span 1; } } /* ---- Panel ---- */ .panel { background: var(--panel); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--border); border-radius: var(--radius); display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 8px 30px rgba(0,0,0,.28); } .panel-head { display: flex; align-items: center; gap: 9px; padding: 10px 12px; border-bottom: 1px solid var(--border); background: var(--panel-head); } .panel-head .p-ico { width: 16px; height: 16px; color: var(--accent); flex: none; } .panel-head .p-title { font-size: 12px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--text); } .panel-head .p-meta { margin-left: auto; font-family: var(--mono); font-size: 10.5px; color: var(--faint); display: flex; align-items: center; gap: 8px; } .panel-head .p-led { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); flex: none; } .p-led.ok { background: var(--good); box-shadow: 0 0 7px var(--good); } .p-led.err { background: var(--bad); box-shadow: 0 0 7px var(--bad); } .p-led.load { background: var(--warn); animation: pulse 1s infinite; } @keyframes pulse { 50% { opacity: .35; } } .panel-body { padding: 12px; overflow: auto; flex: 1; max-height: 340px; } /* thin scrollbars */ .panel-body::-webkit-scrollbar, .modal-body::-webkit-scrollbar { width: 8px; height: 8px; } .panel-body::-webkit-scrollbar-thumb, .modal-body::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 8px; } /* ---- Common widget bits ---- */ .empty { color: var(--faint); font-size: 13px; text-align: center; padding: 22px 8px; } .state { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 28px 12px; } .state-loading { flex-direction: row; justify-content: center; gap: 10px; } .spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--border-strong); border-top-color: var(--accent); animation: spin .8s linear infinite; flex: none; } @keyframes spin { to { transform: rotate(360deg); } } .state-ico { width: 28px; height: 28px; color: var(--faint); } .state-error .state-ico { color: var(--bad); } .state-title { font-size: 14px; color: var(--text); } .state-hint { font-size: 12px; color: var(--muted); max-width: 420px; line-height: 1.5; } .notconf { text-align: center; padding: 18px 10px; color: var(--muted); } .notconf .nc-ico { width: 30px; height: 30px; color: var(--faint); margin-bottom: 8px; } .notconf .nc-title { font-size: 13px; color: var(--text); margin-bottom: 4px; } .notconf .nc-sub { font-size: 12px; color: var(--faint); margin-bottom: 10px; } .row { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid rgba(255,255,255,.04); } .row:last-child { border-bottom: 0; } .row .r-main { min-width: 0; flex: 1; } .row .r-title { font-size: 13px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .row .r-sub { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .row .r-right { font-family: var(--mono); font-size: 11px; color: var(--faint); text-align: right; white-space: nowrap; } .thumb { width: 34px; height: 50px; border-radius: 4px; object-fit: cover; background: var(--bg-2); flex: none; } .chip { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .5px; padding: 2px 6px; border-radius: 4px; border: 1px solid var(--border); color: var(--muted); } .chip.good { color: var(--good); border-color: rgba(52,211,153,.4); } .chip.warn { color: var(--warn); border-color: rgba(251,191,36,.4); } .chip.bad { color: var(--bad); border-color: rgba(248,113,113,.4); } .chip.accent { color: var(--accent); border-color: rgba(34,211,238,.4); } .bar { height: 4px; border-radius: 3px; background: rgba(255,255,255,.08); overflow: hidden; margin-top: 5px; } .bar > i { display: block; height: 100%; background: var(--accent); border-radius: 3px; } .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 10px; } .stat { border: 1px solid var(--border); border-radius: 8px; padding: 10px; background: rgba(255,255,255,.02); } .stat .s-num { font-family: var(--mono); font-size: 22px; font-weight: 600; color: #fff; } .stat .s-num.accent { color: var(--accent); } .stat .s-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: var(--faint); margin-top: 2px; } /* ---- Uptime widget ---- */ .up-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; } .up-row .up-name { flex: 0 0 90px; font-size: 12px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .up-bar { flex: 1; height: 8px; background: rgba(255,255,255,.06); border-radius: 999px; overflow: hidden; } .up-bar-fill { height: 100%; border-radius: 999px; transition: width .3s ease; } .up-pct { flex: 0 0 46px; font-family: var(--mono); font-size: 11px; color: var(--muted); text-align: right; } /* ---- Backup list ---- */ .bk-list { display: flex; flex-direction: column; } .bk-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 2px; border-bottom: 1px solid var(--border); } .bk-name { font-family: var(--mono); font-size: 12px; color: var(--text); } /* ---- Now playing ---- */ .np { display: flex; gap: 10px; padding: 8px 4px; align-items: center; } .np .np-info { min-width: 0; flex: 1; } .np .np-state { font-family: var(--mono); font-size: 10px; text-transform: uppercase; color: var(--accent); } /* ---- Weather widget ---- */ .wx-now { display: flex; align-items: center; gap: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--border); } .wx-now .big { font-family: var(--mono); font-size: 40px; font-weight: 600; color: #fff; line-height: 1; } .wx-now .wx-ico-lg { width: 52px; height: 52px; color: var(--accent); } .wx-now .wx-desc { font-size: 13px; color: var(--text); } .wx-now .wx-sub { font-size: 11px; color: var(--muted); } .wx-hours { display: flex; gap: 8px; overflow-x: auto; padding: 10px 0; } .wx-hr { text-align: center; min-width: 52px; } .wx-hr .h { font-size: 10px; color: var(--faint); font-family: var(--mono); } .wx-hr .i { width: 22px; height: 22px; color: var(--accent); margin: 3px auto; } .wx-hr .t { font-family: var(--mono); font-size: 13px; } .wx-hr .p { font-size: 9px; color: var(--accent); } .wx-days { display: flex; flex-direction: column; gap: 2px; } .wx-day { display: grid; grid-template-columns: 44px 24px 1fr auto; align-items: center; gap: 8px; padding: 4px 0; font-size: 12px; } .wx-day .d { color: var(--muted); font-family: var(--mono); } .wx-day .i { width: 18px; height: 18px; color: var(--accent); } .wx-day .hi { font-family: var(--mono); color: #fff; } .wx-day .lo { font-family: var(--mono); color: var(--faint); } /* ---- Map ---- */ .map { width: 100%; height: 320px; border-radius: 8px; overflow: hidden; } .leaflet-container { background: #0a1018; font-family: var(--sans); } .map-legend { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; font-size: 11px; color: var(--muted); } .map-legend span { display: inline-flex; align-items: center; gap: 5px; } .map-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); } /* ---- News ---- */ .news-item { padding: 7px 2px; border-bottom: 1px solid rgba(255,255,255,.04); } .news-item a { color: var(--text); font-size: 13px; } .news-item a:hover { color: var(--accent); } .news-item .meta { font-size: 10px; color: var(--faint); font-family: var(--mono); margin-top: 2px; } /* ---- Links / launcher ---- */ .links { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 10px; } .link-tile { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 12px 6px; border: 1px solid var(--border); border-radius: 9px; background: rgba(255,255,255,.02); text-align: center; transition: .15s; } .link-tile:hover { border-color: var(--accent); text-decoration: none; transform: translateY(-2px); } .link-tile .lt-ico { width: 26px; height: 26px; color: var(--accent); } .link-tile .lt-name { font-size: 11px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } /* ---- Flights ---- */ .flt { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; padding: 6px 2px; border-bottom: 1px solid rgba(255,255,255,.04); font-size: 12px; align-items: center; } .flt .call { font-family: var(--mono); color: #fff; } .flt .rte { font-size: 10px; color: var(--muted); } .flt .alt { font-family: var(--mono); color: var(--faint); text-align: right; } .flt .dist { font-family: var(--mono); color: var(--accent); text-align: right; } /* ============================================================ Public landing (pre-login) ============================================================ */ .landing { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; align-items: start; } @media (max-width: 900px) { .landing { grid-template-columns: 1fr; } } .hero-cam { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); background: #000; position: relative; } .hero-cam .cam-frame { width: 100%; aspect-ratio: 16/9; display: block; border: 0; background: #000; object-fit: cover; } .hero-cam .cam-label { position: absolute; top: 10px; left: 12px; font-family: var(--mono); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: #fff; background: rgba(0,0,0,.5); padding: 4px 10px; border-radius: 999px; backdrop-filter: blur(4px); } .hero-cam .cam-live { color: var(--bad); } .hero-cam .cam-live::before { content: "● "; } .landing-side { display: flex; flex-direction: column; gap: 16px; } .welcome { padding: 6px 2px; } .welcome h1 { margin: 0; font-size: 22px; letter-spacing: .5px; } .welcome p { margin: 6px 0 0; color: var(--muted); font-size: 13px; } /* ============================================================ Login popover ============================================================ */ .login-pop { position: absolute; top: calc(var(--tb-h) - 6px); right: 14px; width: 320px; z-index: 60; background: var(--panel-solid); border: 1px solid var(--border-strong); border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.5); padding: 18px; } .login-pop h3 { margin: 0 0 4px; font-size: 15px; } .login-pop .sub { color: var(--faint); font-size: 12px; margin-bottom: 14px; } .field { margin-bottom: 12px; } .field label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); margin-bottom: 5px; } .field input, .field select, .field textarea { width: 100%; padding: 9px 11px; border-radius: 7px; border: 1px solid var(--border-strong); background: rgba(0,0,0,.35); color: var(--text); font-size: 13px; font-family: var(--sans); } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); } .form-err { color: var(--bad); font-size: 12px; margin-bottom: 10px; min-height: 16px; } /* ============================================================ Settings modal ============================================================ */ .modal-backdrop { position: fixed; inset: 0; background: rgba(3,6,11,.7); backdrop-filter: blur(4px); z-index: 100050; display: grid; place-items: center; padding: 20px; } .modal { width: min(920px, 96vw); max-height: 90vh; background: var(--panel-solid); border: 1px solid var(--border-strong); border-radius: 14px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.6); } .modal-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--border); } .modal-head h2 { margin: 0; font-size: 16px; letter-spacing: .5px; } .modal-head .btn { margin-left: auto; } .modal-body { display: grid; grid-template-columns: 190px 1fr; min-height: 0; flex: 1; } .set-nav { border-right: 1px solid var(--border); padding: 10px; overflow: auto; } .set-nav button { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; background: transparent; border: 0; color: var(--muted); padding: 9px 11px; border-radius: 8px; cursor: pointer; font-size: 13px; } .set-nav button svg { width: 15px; height: 15px; } .set-nav button:hover { background: rgba(255,255,255,.03); color: var(--text); } .set-nav button.active { background: var(--accent-dim); color: var(--accent); } .set-pane { padding: 18px 20px; overflow: auto; } .set-pane h3 { margin: 0 0 4px; font-size: 15px; } .set-pane .pane-sub { color: var(--faint); font-size: 12px; margin-bottom: 16px; } .set-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .set-grid .full { grid-column: 1 / -1; } @media (max-width: 640px) { .set-grid { grid-template-columns: 1fr; } .modal-body { grid-template-columns: 1fr; } .set-nav { display: flex; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--border); } } .switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; } .switch input { width: 40px; height: 22px; appearance: none; background: rgba(255,255,255,.12); border-radius: 999px; position: relative; cursor: pointer; transition: .2s; } .switch input:checked { background: var(--accent); } .switch input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: .2s; } .switch input:checked::after { left: 20px; } .test-result { font-size: 12px; font-family: var(--mono); margin-top: 8px; min-height: 16px; } .test-result.ok { color: var(--good); } .test-result.err { color: var(--bad); } .modal-foot { padding: 12px 18px; border-top: 1px solid var(--border); display: flex; gap: 10px; justify-content: flex-end; align-items: center; } .hint { font-size: 11px; color: var(--faint); margin-top: 4px; } .row-inline { display: flex; gap: 10px; align-items: flex-end; } .win-toolbar .row-inline { flex-wrap: wrap; row-gap: 6px; } .row-inline .btn { flex: none; } /* ---- Toast ---- */ .toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 200; background: var(--panel-solid); border: 1px solid var(--border-strong); color: var(--text); padding: 11px 18px; border-radius: 10px; font-size: 13px; box-shadow: 0 12px 40px rgba(0,0,0,.5); } .toast.ok { border-color: rgba(52,211,153,.5); } .toast.err { border-color: rgba(248,113,113,.5); } .spin { animation: spin 1s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .mono { font-family: var(--mono); } .hidden { display: none !important; } /* Fix: constrain Settings header icons so the gear/X don't balloon to fill the modal */ .modal-head > svg { width: 20px; height: 20px; color: var(--accent); flex: none; } .modal-head .btn svg { width: 16px; height: 16px; } /* Safety net: any inline icon that slips through without a size class */ .panel-head > svg:not([class]), .set-nav svg { width: 15px; height: 15px; flex: none; } /* Changelog viewer + statusline link */ #statusline a { color: var(--accent); text-decoration: none; } #statusline a:hover { text-decoration: underline; } .changelog-wrap { overflow: auto; max-height: 72vh; } .changelog { margin: 0; padding: 18px 20px; font-family: var(--mono); font-size: 12px; line-height: 1.55; color: var(--text); white-space: pre-wrap; word-break: break-word; } /* 1.2 — access / profile / status */ .status-line { display: flex; align-items: center; gap: 8px; } .status-led { width: 10px; height: 10px; border-radius: 50%; background: var(--faint); } .status-led.up { background: var(--good); box-shadow: 0 0 8px var(--good); } .status-led.down { background: var(--bad); box-shadow: 0 0 8px var(--bad); } .status-led.warn { background: var(--warn); box-shadow: 0 0 8px var(--warn); } .status-text { font-size: 13px; color: var(--text); } .prof-grid { display: grid; gap: 6px; } .prof-row { display: grid; grid-template-columns: 110px 1fr; gap: 10px; font-size: 13px; } .prof-k { color: var(--faint); text-transform: uppercase; font-size: 11px; letter-spacing: .5px; } .prof-v { color: var(--text); } .perm-chips { display: flex; flex-wrap: wrap; gap: 6px; } .perm-matrix { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 4px 12px; } .perm-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); font-family: var(--mono); } .role-block { border: 1px solid var(--border); border-radius: 8px; padding: 10px; margin-bottom: 10px; } .role-name { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; } .set-pane textarea { width: 100%; padding: 8px 10px; border-radius: 7px; border: 1px solid var(--border-strong); background: rgba(0,0,0,.35); color: var(--text); font-family: var(--mono); font-size: 12px; } /* ---- Access & Permissions ---- */ .access-note { border: 1px solid var(--border-strong); border-radius: 8px; padding: 10px 12px; margin-bottom: 12px; font-size: 13px; color: var(--muted); background: rgba(255,255,255,.02); } .access-note.warn { border-color: rgba(251,191,36,.5); color: var(--text); } .access-section { margin: 18px 0 8px; } .access-section h4 { margin: 0; font-size: 14px; } .access-grid { display: flex; flex-direction: column; gap: 8px; } .access-role-row { display: flex; gap: 10px; align-items: flex-start; } .access-role-row textarea { flex: 1; } .role-badge { flex: 0 0 74px; text-align: center; font-size: 10px; font-weight: 700; letter-spacing: 1px; padding: 5px 0; border-radius: 6px; text-transform: uppercase; height: fit-content; } .role-badge.role-owner { background: rgba(34,211,238,.18); color: var(--accent); } .role-badge.role-admin { background: rgba(248,113,113,.18); color: #f87171; } .role-badge.role-power { background: rgba(251,191,36,.18); color: #fbbf24; } .role-badge.role-user { background: rgba(255,255,255,.08); color: var(--muted); } .people-wrap { display: flex; flex-direction: column; gap: 8px; } .person-card { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; } .person-head { display: flex; align-items: center; gap: 10px; } .person-name { font-family: var(--mono); font-size: 13px; color: var(--text); } .person-card select { padding: 5px 8px; border-radius: 6px; border: 1px solid var(--border-strong); background: rgba(0,0,0,.35); color: var(--text); font-size: 12px; } .perm-tri-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 6px 14px; margin-top: 10px; } .perm-tri-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--muted); } .perm-tri { flex: 0 0 auto; } /* ---- UniFi detail ---- */ .unifi-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; } .unifi-card { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; background: rgba(255,255,255,.02); } .uc-label { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: var(--faint); } .uc-value { font-family: var(--mono); font-size: 20px; font-weight: 600; color: #fff; margin-top: 2px; } .uc-value.accent { color: var(--accent); } .uc-value.good { color: var(--good); } .uc-value.bad { color: var(--bad); } .uc-sub { font-size: 11px; color: var(--muted); margin-top: 2px; } .udev-card { border: 1px solid var(--border); border-radius: 10px; padding: 12px; margin-bottom: 10px; } .udev-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .udev-name { font-weight: 600; color: var(--text); } .udev-meta { color: var(--muted); font-size: 12px; } .udev-stats { font-family: var(--mono); font-size: 11px; color: var(--muted); margin-top: 6px; } .uports { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; } .uport { width: 26px; height: 26px; border-radius: 5px; display: flex; align-items: center; justify-content: center; font-size: 10px; font-family: var(--mono); border: 1px solid var(--border-strong); color: var(--faint); background: rgba(255,255,255,.03); } .uport.up { border-color: rgba(52,211,153,.5); color: var(--good); background: rgba(52,211,153,.12); } .uport.poe { box-shadow: inset 0 -3px 0 var(--warn); } .uport.uplink { border-color: var(--accent); color: var(--accent); } .uradios { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 10px; } .uradio { display: flex; flex-direction: column; } .udev-actions { display: flex; gap: 8px; margin-top: 12px; } .uport.poe:hover { outline: 2px solid var(--warn); outline-offset: 1px; } .uclients { display: flex; flex-direction: column; } .uclient { display: grid; grid-template-columns: 14px 1.4fr 1fr 1.6fr auto; align-items: center; gap: 8px; padding: 6px 2px; border-bottom: 1px solid var(--border); font-size: 12px; } .uclient .uc-name { color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .uc-ip, .uc-conn { color: var(--muted); font-family: var(--mono); font-size: 11px; } .uc-data { color: var(--faint); font-family: var(--mono); font-size: 11px; white-space: nowrap; } /* UniFi round 2: vouchers, bandwidth groups, Wi-Fi QR, threats */ .uvouchers { display: flex; flex-direction: column; } .uvoucher-row { display: flex; align-items: center; gap: 10px; padding: 7px 2px; border-bottom: 1px solid var(--border); } .uvoucher-row .dir-main { flex: 1; min-width: 0; } .uvoucher-row .dir-name { color: var(--text); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .uvoucher-row .dir-sub { color: var(--muted); font-size: 11px; } .uqr-holder svg { display: block; } .uevent.uthreat { align-items: center; } .uevent.uthreat .ue-msg { color: var(--text); } .unifi-chart { border: 1px solid var(--border); border-radius: 10px; padding: 6px; background: rgba(0,0,0,.2); } .chart-legend { display: flex; gap: 14px; align-items: center; font-size: 11px; margin-bottom: 4px; } .uclient:hover { background: rgba(255,255,255,.03); } .client-detail { display: flex; flex-direction: column; } .cd-row { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 13px; } .cd-k { color: var(--muted); } .cd-v { color: var(--text); font-family: var(--mono); text-align: right; word-break: break-all; } /* ---- Home Assistant control ---- */ .ha-area { margin: 16px 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: 1px; color: var(--accent); } .ha-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; } .ha-card { border: 1px solid var(--border); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 10px; } .ha-card-head { min-height: 20px; } .ha-name { font-size: 13px; color: var(--text); font-weight: 500; } .ha-card-ctl { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .ha-toggle { border: 1px solid var(--border-strong); background: rgba(255,255,255,.05); color: var(--muted); border-radius: 999px; padding: 4px 14px; cursor: pointer; font-size: 12px; font-weight: 600; } .ha-toggle.on { background: var(--accent); color: #04121a; border-color: var(--accent); } .ha-slider { flex: 1; min-width: 90px; accent-color: var(--accent); } .ha-temp { font-family: var(--mono); font-size: 16px; color: var(--text); min-width: 48px; text-align: center; } .ha-tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--border); } .ha-tab { background: transparent; border: 0; border-bottom: 2px solid transparent; color: var(--muted); padding: 8px 12px; cursor: pointer; font-size: 13px; } .ha-tab.active { color: var(--accent); border-bottom-color: var(--accent); } .ha-cams { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; } .ha-cam-tile { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: #000; } .ha-cam { width: 100%; display: block; aspect-ratio: 16 / 9; object-fit: cover; } .ha-cam-name { padding: 6px 10px; font-size: 12px; color: var(--muted); } /* 1.3 — NAS file browser */ .fb-crumbs { padding: 9px 16px; border-bottom: 1px solid var(--border); font-family: var(--mono); font-size: 12px; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; } .fb-crumbs a { color: var(--accent); cursor: pointer; } .fb-crumbs a:hover { text-decoration: underline; } .fb-crumbs .sep { color: var(--faint); } .fb-body { flex: 1; overflow: auto; min-height: 0; } .fb-list { padding: 4px 8px; } .fb-row { display: grid; grid-template-columns: 20px 1fr auto auto; align-items: center; gap: 10px; padding: 7px 8px; border-bottom: 1px solid rgba(255,255,255,.04); } .fb-row:hover { background: rgba(255,255,255,.03); } .fb-ico { width: 18px; height: 18px; color: var(--accent); flex: none; } .fb-name { cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; } .fb-name.dir { color: var(--text); font-weight: 600; } .fb-name.file { color: var(--muted); } .fb-name:hover { color: var(--accent); } .fb-size { font-family: var(--mono); font-size: 11px; color: var(--faint); white-space: nowrap; } .fb-ops { display: flex; gap: 2px; } .fb-actions { display: inline-flex; gap: 8px; } /* 1.4 — command palette */ .palette { width: min(560px, 94vw); margin-top: 12vh; background: var(--panel-solid); border: 1px solid var(--border-strong); border-radius: 12px; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.6); } .palette-input { width: 100%; padding: 14px 16px; border: 0; border-bottom: 1px solid var(--border); background: transparent; color: var(--text); font-size: 15px; outline: none; } .palette-list { max-height: 320px; overflow: auto; } .palette-item { padding: 10px 16px; font-size: 13px; color: var(--muted); cursor: pointer; } .palette-item:hover, .palette-item.sel { background: var(--accent-dim); color: var(--accent); } /* 1.5 — chat */ .chat-drawer { position: fixed; top: 0; right: 0; width: min(380px, 92vw); height: 100vh; background: var(--panel-solid); border-left: 1px solid var(--border-strong); z-index: 120; display: flex; flex-direction: column; box-shadow: -12px 0 44px rgba(0,0,0,.45); } .chat-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--border); font-weight: 600; } .chat-head svg { width: 18px; height: 18px; color: var(--accent); } .chat-msgs { flex: 1; overflow: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; } .chat-msg { max-width: 85%; align-self: flex-start; background: rgba(255,255,255,.04); border: 1px solid var(--border); padding: 7px 10px; border-radius: 10px; } .chat-msg.me { align-self: flex-end; background: var(--accent-dim); border-color: rgba(34,211,238,.3); } .chat-meta { font-size: 10px; color: var(--faint); margin-bottom: 2px; } .chat-text { font-size: 13px; color: var(--text); white-space: pre-wrap; word-break: break-word; } .chat-foot { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--border); } .chat-input { flex: 1; padding: 9px 11px; border-radius: 8px; border: 1px solid var(--border-strong); background: rgba(0,0,0,.35); color: var(--text); outline: none; } .chat-badge { display: none; position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--bad); color: #fff; font-size: 10px; place-items: center; } /* 1.6 — drag/resize layout edit mode */ .span-3 { grid-column: span 3; } @media (max-width: 1100px) { .span-3 { grid-column: span 2; } } @media (max-width: 760px) { .span-3 { grid-column: span 1; } } .grid.editing .panel { outline: 1px dashed var(--border-strong); } .edit-panel { position: relative; cursor: grab; } .edit-panel.dragging { opacity: .45; } .edit-panel.hidden-widget { opacity: .5; } .edit-strip { display: flex; gap: 5px; align-items: center; padding: 5px 7px; background: rgba(0,0,0,.4); border-bottom: 1px solid var(--border); } .es-btn { font-size: 11px; font-family: var(--mono); padding: 2px 8px; border: 1px solid var(--border-strong); background: var(--panel); color: var(--text); border-radius: 6px; cursor: pointer; } .es-btn:hover { border-color: var(--accent); } .es-btn.on { background: var(--accent-dim); color: var(--accent); border-color: var(--accent); } .es-w { font-family: var(--mono); font-size: 11px; color: var(--muted); } .layoutbar { position: fixed; top: 72px; left: 50%; transform: translateX(-50%); z-index: 99990; display: flex; gap: 8px; align-items: center; background: var(--panel-solid); border: 1px solid var(--border-strong); border-radius: 999px; padding: 8px 12px; box-shadow: 0 12px 40px rgba(0,0,0,.5); } .layoutbar .hint { margin-right: 4px; } /* 2.0 — Gridstack live layout */ .grid-stack { background: transparent; } .grid-stack-item-content { inset: 0; overflow: visible; display: flex; } .grid-stack-item-content > .panel { width: 100%; height: 100%; } .grid-stack > .grid-stack-item > .grid-stack-item-content { color: inherit; } .grid-stack.editing .grid-stack-item { cursor: move; } .grid-stack.editing .panel { outline: 1px dashed var(--border-strong); } .grid-stack .ui-resizable-handle { z-index: 6; } /* make edge/corner handles visible while editing */ .grid-stack.editing .ui-resizable-handle::after { content: ''; } .grid-stack.editing .ui-resizable-se, .grid-stack.editing .ui-resizable-sw, .grid-stack.editing .ui-resizable-ne, .grid-stack.editing .ui-resizable-nw { width: 16px; height: 16px; border: 2px solid var(--accent); background: var(--panel-solid); border-radius: 3px; opacity: .9; } .grid-stack.editing .ui-resizable-nw { top: -2px; left: -2px; } .grid-stack.editing .ui-resizable-ne { top: -2px; right: -2px; } .grid-stack.editing .ui-resizable-sw { bottom: -2px; left: -2px; } .grid-stack.editing .ui-resizable-se { bottom: -2px; right: -2px; } .grid-stack-item.grid-stack-placeholder > .placeholder-content { border: 1px dashed var(--accent); border-radius: var(--radius); background: var(--accent-dim); } .addwidget-sel { padding: 6px 10px; border-radius: 8px; border: 1px solid var(--border-strong); background: rgba(0,0,0,.35); color: var(--text); font-size: 13px; } /* 2.1 — splash grid widgets + editor */ .splash-clock { display: flex; flex-direction: column; justify-content: center; height: 100%; gap: 4px; } .splash-clock .t { font-family: var(--mono); font-size: 38px; font-weight: 600; color: #fff; line-height: 1; } .splash-clock .d { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 1.5px; } .splash-welcome { display: flex; flex-direction: column; justify-content: center; height: 100%; gap: 10px; } .splash-welcome h1 { margin: 0; font-size: 22px; } /* Webcam fills its panel edge-to-edge; container clips so iframe/zoom crops don't spill. */ .panel-body.splash-cam { padding: 0; overflow: hidden; position: relative; background: #000; max-height: none; } .panel-body.splash-cam .cam-frame { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; border: 0; display: block; } .splash-editor { display: flex; flex-direction: column; width: 100%; height: 100%; background: var(--bg); } .splash-edit-top { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--panel-solid); } .splash-edit-top svg { width: 18px; height: 18px; color: var(--accent); } .splash-edit-host { flex: 1; overflow: auto; padding: 14px; } /* 2.3 — notifications + topbar badges */ .note { padding: 9px 12px; border-bottom: 1px solid rgba(255,255,255,.05); } .note-title { font-size: 13px; color: var(--text); } .note-body { font-size: 12px; color: var(--muted); margin-top: 2px; } .note-meta { font-size: 10px; color: var(--faint); font-family: var(--mono); margin-top: 3px; text-transform: uppercase; letter-spacing: .5px; } .note-error .note-title { color: var(--bad); } .note-warn .note-title { color: var(--warn, #d19a00); } .note-good .note-title { color: var(--good); } .tb-badge { display: none; position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--bad); color: #fff; font-size: 10px; place-items: center; } /* Cameras app (UniFi Protect live wall) */ .cam-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; padding: 12px; } @media (max-width: 560px) { .cam-wall { grid-template-columns: 1fr; padding: 8px; gap: 8px; } } .cam-tile { position: relative; border-radius: 10px; overflow: hidden; background: #000; border: 1px solid var(--border); cursor: pointer; aspect-ratio: 16 / 9; } .cam-tile:hover { border-color: var(--accent); } .cam-tile.offline { cursor: default; } .cam-img { display: block; width: 100%; height: 100%; object-fit: cover; background: #000; } .cam-img.broken { opacity: .25; } .cam-tile.offline .cam-img { opacity: .35; filter: grayscale(1); } .cam-cap { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: linear-gradient(transparent, rgba(0,0,0,.75)); color: #fff; font-size: 13px; } .cam-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 1px 2px rgba(0,0,0,.8); } .cam-badge { font-family: var(--mono); font-size: 10px; letter-spacing: .6px; padding: 2px 6px; border-radius: 4px; background: rgba(0,0,0,.55); color: #ccc; } .cam-badge.on { background: rgba(220,40,40,.85); color: #fff; } .cam-badge.off { background: rgba(90,90,90,.85); color: #ddd; } .cam-ptz { position: absolute; top: 8px; right: 8px; font-family: var(--mono); font-size: 10px; padding: 2px 6px; border-radius: 4px; background: rgba(0,0,0,.55); color: #fff; } .cam-err { position: absolute; left: 10px; right: 10px; top: 38%; font-size: 12px; color: var(--bad); background: rgba(0,0,0,.7); padding: 6px 8px; border-radius: 6px; text-align: center; } .cam-big { z-index: 130; } .cam-big-box { width: min(1400px, 96vw); max-height: 94vh; background: var(--panel-solid); border: 1px solid var(--border-strong); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; } .cam-big-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--border); } .cam-big-head svg { width: 18px; height: 18px; color: var(--accent); } .cam-big-img { display: block; width: 100%; max-height: calc(94vh - 52px); object-fit: contain; background: #000; } /* Notification Center */ .nc-drawer { width: min(420px, 94vw); } .nc-head-actions { margin-left: auto; display: flex; gap: 2px; } .nc-filters { padding: 8px 12px; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; } .nc-tabs { display: flex; gap: 6px; } .nc-tab { padding: 4px 12px; border-radius: 6px; font-size: 12px; border: 1px solid transparent; background: transparent; color: var(--muted); cursor: pointer; } .nc-tab:hover { color: var(--text); } .nc-tab.active { background: rgba(255,255,255,.06); color: var(--text); border-color: var(--border); } .nc-chips { display: flex; flex-wrap: wrap; gap: 6px; } .nc-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 11px; border: 1px solid var(--border); background: transparent; color: var(--muted); cursor: pointer; text-transform: capitalize; } .nc-chip:hover { color: var(--text); border-color: var(--border-strong); } .nc-chip.active { background: var(--accent); border-color: var(--accent); color: #fff; } .nc-chip-n { font-family: var(--mono); font-size: 10px; opacity: .75; } .nc-chip.active .nc-chip-n { opacity: .95; } .nc-unacked { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); cursor: pointer; user-select: none; } .nc-list { padding: 0; } .nc-note { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,.05); border-left: 3px solid transparent; } .nc-note.unread { border-left-color: var(--accent); background: rgba(255,255,255,.025); } .nc-note.acked { opacity: .55; } .nc-note-main { flex: 1; min-width: 0; } .nc-note-main .note-title { word-break: break-word; } .nc-note-actions { display: flex; gap: 2px; flex-shrink: 0; opacity: .4; transition: opacity .12s; } .nc-note:hover .nc-note-actions { opacity: 1; } .nc-note-actions .btn.icon { width: 26px; height: 26px; } .nc-menu { position: fixed; z-index: 200; background: var(--panel-solid); border: 1px solid var(--border-strong); border-radius: 8px; box-shadow: 0 8px 30px rgba(0,0,0,.5); padding: 4px; min-width: 148px; } .nc-menu-item { display: block; width: 100%; text-align: left; padding: 7px 10px; border: 0; background: transparent; color: var(--text); font-size: 12px; border-radius: 6px; cursor: pointer; } .nc-menu-item:hover { background: var(--accent); color: #fff; } .edit-interval { font-size: 11px; font-family: var(--mono); padding: 2px 4px; border-radius: 6px; border: 1px solid var(--border-strong); background: rgba(0,0,0,.35); color: var(--text); margin-top: 6px; } /* ============================================================ 3.0 — Desktop shell: window manager, dock, snap tiling ============================================================ */ #main.desktop-mode { padding: 0; position: relative; overflow: hidden; } .desktop { position: absolute; inset: 0; overflow: hidden; } .desk-wallpaper { position: absolute; inset: 0; overflow: auto; padding: 14px 14px 96px; } .desk-windows { position: absolute; inset: 0; pointer-events: none; } .snap-preview { position: absolute; z-index: 99998; pointer-events: none; border-radius: 12px; background: color-mix(in srgb, var(--accent) 20%, transparent); border: 2px solid var(--accent); transition: left .12s ease, top .12s ease, width .12s ease, height .12s ease; } /* window */ .win { position: absolute; pointer-events: auto; display: flex; flex-direction: column; min-width: 340px; min-height: 220px; border-radius: 12px; overflow: hidden; background: var(--panel-solid); border: 1px solid var(--border-strong); box-shadow: 0 24px 70px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.4); } :root[data-theme="light"] .win { box-shadow: 0 24px 60px rgba(20,40,80,.22), 0 2px 8px rgba(20,40,80,.12); } .win.active { border-color: color-mix(in srgb, var(--accent) 55%, var(--border-strong)); box-shadow: 0 30px 90px rgba(0,0,0,.62), 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent); } .win.maximized { border-radius: 0; } .win.opening { animation: winIn .18s cubic-bezier(.2,.8,.3,1); } .win.closing { animation: winOut .13s ease forwards; } .win.minimized { animation: winMin .16s ease forwards; } @keyframes winIn { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } } @keyframes winOut { to { opacity: 0; transform: translateY(6px) scale(.98); } } @keyframes winMin { to { opacity: 0; transform: translateY(46px) scale(.88); } } .win-titlebar { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 8px 0 12px; flex: 0 0 auto; background: var(--panel-head); border-bottom: 1px solid var(--border); cursor: grab; user-select: none; touch-action: none; } .win-titlebar:active { cursor: grabbing; } .win-title { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text); flex: 1; min-width: 0; } .win-title span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .win-ico { width: 16px; height: 16px; color: var(--accent); flex: 0 0 auto; } .win-controls { display: flex; gap: 4px; flex: 0 0 auto; } .win-btn { width: 28px; height: 26px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); display: grid; place-items: center; cursor: pointer; transition: background .12s, color .12s; } .win-btn svg { width: 15px; height: 15px; } .win-btn:hover { background: var(--border); color: var(--text); } .win-btn.close:hover { background: var(--bad); color: #fff; } .win-body { flex: 1; overflow: auto; position: relative; background: var(--panel-solid); } /* resize handles */ .win-resize { position: absolute; z-index: 2; touch-action: none; } .win-resize.r-n { top: -3px; left: 10px; right: 10px; height: 8px; cursor: ns-resize; } .win-resize.r-s { bottom: -3px; left: 10px; right: 10px; height: 8px; cursor: ns-resize; } .win-resize.r-e { right: -3px; top: 10px; bottom: 10px; width: 8px; cursor: ew-resize; } .win-resize.r-w { left: -3px; top: 10px; bottom: 10px; width: 8px; cursor: ew-resize; } .win-resize.r-ne { top: -3px; right: -3px; width: 15px; height: 15px; cursor: nesw-resize; } .win-resize.r-nw { top: -3px; left: -3px; width: 15px; height: 15px; cursor: nwse-resize; } .win-resize.r-se { bottom: -3px; right: -3px; width: 15px; height: 15px; cursor: nwse-resize; } .win-resize.r-sw { bottom: -3px; left: -3px; width: 15px; height: 15px; cursor: nesw-resize; } /* dock */ .desk-dock { position: absolute; left: 50%; transform: translateX(-50%); bottom: 12px; z-index: 100000; display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 18px; background: color-mix(in srgb, var(--panel-solid) 76%, transparent); border: 1px solid var(--border-strong); box-shadow: 0 12px 40px rgba(0,0,0,.45); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); max-width: calc(100% - 24px); overflow-x: auto; } .dock-apps { display: flex; align-items: flex-end; gap: 8px; } .dock-item { position: relative; width: 52px; height: 52px; border: 0; border-radius: 14px; cursor: pointer; flex: 0 0 auto; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--text); display: grid; place-items: center; transition: transform .14s cubic-bezier(.2,.8,.3,1), background .14s; } .dock-item svg { width: 26px; height: 26px; color: var(--accent); } .dock-item:hover { transform: translateY(-8px) scale(1.08); background: color-mix(in srgb, var(--accent) 22%, transparent); } .dock-item.active { background: color-mix(in srgb, var(--accent) 26%, transparent); } .dock-dot { position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%); width: 5px; height: 5px; border-radius: 50%; background: transparent; transition: background .14s; } .dock-item.running .dock-dot { background: var(--accent); } @media (max-width: 640px) { .dock-item { width: 46px; height: 46px; } .desk-dock { bottom: 8px; } } /* app-in-window chrome (shared by HA / UniFi / Files mounted into windows) */ .win-toolbar { position: sticky; top: 0; z-index: 3; display: flex; flex-wrap: wrap; row-gap: 6px; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--border); background: var(--panel-solid); flex-wrap: wrap; } .win-tt { font-size: 13px; font-weight: 600; color: var(--text); } .win-scroll { padding: 14px; } .win-body .fb-body { position: static; height: auto; } .chat-win { display: flex; flex-direction: column; height: 100%; } .chat-win .chat-msgs { flex: 1; overflow: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; } .chat-win .chat-foot { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--border); background: var(--panel-head); } .chat-win .chat-input { flex: 1; } /* ============================================================ 3.1 — Windows Aero glass refresh Frosted translucent surfaces, glossy top sheen, glowing edges; blur reveals the wallpaper (and windows behind) — the Aero effect. ============================================================ */ :root { --glass-hi: rgba(255,255,255,.40); } :root[data-theme="light"] { --glass-hi: rgba(255,255,255,.85); } .aero-sheen { } /* widget cards */ .panel { background: linear-gradient(to bottom, rgba(255,255,255,.12) 0%, rgba(255,255,255,.04) 44%, rgba(255,255,255,0) 45%, rgba(0,0,0,.05) 100%), color-mix(in srgb, var(--panel-solid) 56%, transparent); backdrop-filter: blur(18px) saturate(165%); -webkit-backdrop-filter: blur(18px) saturate(165%); border: 1px solid color-mix(in srgb, #fff 20%, var(--border)); border-radius: 14px; box-shadow: 0 8px 26px rgba(0,0,0,.26), inset 0 1px 0 var(--glass-hi); } .panel-head { background: linear-gradient(to bottom, rgba(255,255,255,.10), rgba(255,255,255,0)); border-bottom: 1px solid rgba(255,255,255,.10); } /* top bar → glass menu bar */ #topbar { background: linear-gradient(to bottom, rgba(255,255,255,.12), rgba(255,255,255,.03)), color-mix(in srgb, var(--panel-solid) 52%, transparent); backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%); border-bottom: 1px solid rgba(255,255,255,.14); box-shadow: inset 0 1px 0 var(--glass-hi), 0 2px 14px rgba(0,0,0,.22); } /* buttons → glass */ .btn { background: linear-gradient(to bottom, rgba(255,255,255,.13), rgba(255,255,255,.03)); box-shadow: inset 0 1px 0 rgba(255,255,255,.26); } .btn:hover { background: linear-gradient(to bottom, rgba(255,255,255,.20), rgba(255,255,255,.06)); } .btn.primary { background: linear-gradient(to bottom, color-mix(in srgb, var(--accent) 76%, #fff 24%), var(--accent)); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 2px 10px color-mix(in srgb, var(--accent) 40%, transparent); } .btn.ghost { background: transparent; box-shadow: none; } .btn.icon.ghost:hover { background: linear-gradient(to bottom, rgba(255,255,255,.16), rgba(255,255,255,.04)); } /* windows → Aero glass, active window glows with the accent */ .win { background: linear-gradient(to bottom, rgba(255,255,255,.09), rgba(255,255,255,0) 64px), color-mix(in srgb, var(--panel-solid) 72%, transparent); backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%); border: 1px solid color-mix(in srgb, #fff 26%, var(--border-strong)); box-shadow: 0 30px 80px rgba(0,0,0,.5), inset 0 1px 0 var(--glass-hi); } .win.active { border-color: color-mix(in srgb, var(--accent) 55%, #fff 22%); box-shadow: 0 36px 100px rgba(0,0,0,.6), 0 0 26px color-mix(in srgb, var(--accent) 42%, transparent), inset 0 1px 0 var(--glass-hi); } .win-titlebar { background: linear-gradient(to bottom, rgba(255,255,255,.17), rgba(255,255,255,.04)); border-bottom: 1px solid rgba(255,255,255,.12); } .win-body { background: color-mix(in srgb, var(--panel-solid) 90%, transparent); } /* dock → chunkier Aero glass */ .desk-dock { background: linear-gradient(to bottom, rgba(255,255,255,.17), rgba(255,255,255,.05)), color-mix(in srgb, var(--panel-solid) 52%, transparent); backdrop-filter: blur(28px) saturate(170%); -webkit-backdrop-filter: blur(28px) saturate(170%); border: 1px solid color-mix(in srgb, #fff 26%, var(--border-strong)); box-shadow: 0 16px 46px rgba(0,0,0,.45), inset 0 1px 0 var(--glass-hi); } .dock-item { background: linear-gradient(to bottom, rgba(255,255,255,.16), rgba(255,255,255,.04)); box-shadow: inset 0 1px 0 rgba(255,255,255,.3); } .dock-item.running { box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 0 16px color-mix(in srgb, var(--accent) 48%, transparent); } /* modals still in use (client panels etc.) → match the glass */ .modal { background: linear-gradient(to bottom, rgba(255,255,255,.08), rgba(255,255,255,0) 64px), color-mix(in srgb, var(--panel-solid) 84%, transparent); backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%); border: 1px solid color-mix(in srgb, #fff 22%, var(--border-strong)); box-shadow: 0 30px 80px rgba(0,0,0,.6), inset 0 1px 0 var(--glass-hi); } /* Settings, now a window */ .set-win { display: flex; flex-direction: column; height: 100%; } .set-body { display: flex; flex: 1; min-height: 0; } .set-body .set-nav { width: 190px; flex: 0 0 auto; } .set-body .set-pane { flex: 1; } .set-foot { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-top: 1px solid var(--border); background: linear-gradient(to bottom, rgba(255,255,255,.06), rgba(255,255,255,0)); } @media (max-width: 640px) { .set-body { flex-direction: column; } .set-body .set-nav { width: auto; display: flex; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--border); } } /* ============================================================ 3.2 — Feature-rich chat ============================================================ */ .chat-win { display: flex; flex-direction: column; height: 100%; position: relative; } .chat-win.drag::after { content: 'Drop files to share'; position: absolute; inset: 8px; z-index: 5; display: grid; place-items: center; border: 2px dashed var(--accent); border-radius: 12px; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); font-weight: 600; pointer-events: none; } .chat-msgs { flex: 1; overflow: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; } .chat-day { text-align: center; margin: 12px 0 6px; } .chat-day span { font-size: 11px; color: var(--faint); background: color-mix(in srgb, var(--panel-solid) 70%, transparent); padding: 2px 10px; border-radius: 999px; border: 1px solid var(--border); } .cmsg { position: relative; padding: 2px 40px 2px 0; } .cmsg:not(.grouped) { margin-top: 10px; } .cmsg-head { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; } .cmsg-avatar { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: #04222a; background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 85%, #fff), var(--accent)); flex: none; } .cmsg-name { font-size: 13px; font-weight: 700; color: var(--text); } .cmsg-time { font-size: 10.5px; color: var(--faint); } .cmsg-bwrap { padding-left: 34px; } .cmsg-body { display: inline-flex; flex-direction: column; gap: 4px; max-width: 100%; } .cmsg-text { background: color-mix(in srgb, var(--accent) 8%, var(--panel-head)); border: 1px solid var(--border); padding: 7px 11px; border-radius: 4px 12px 12px 12px; font-size: 13.5px; line-height: 1.45; color: var(--text); white-space: pre-wrap; word-break: break-word; } .cmsg.mine .cmsg-text { background: color-mix(in srgb, var(--accent) 20%, transparent); border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); } .cmsg-edited { color: var(--faint); font-size: 10.5px; } .cmsg-replyq { font-size: 11.5px; color: var(--muted); border-left: 2px solid var(--accent); padding: 1px 8px; margin-bottom: 2px; opacity: .85; } .cmsg-replyq b { color: var(--text); } .cmsg-atts { display: flex; flex-direction: column; gap: 6px; margin-top: 2px; } .cmsg-imgs { display: grid; gap: 4px; max-width: 340px; } .cmsg-imgs.n1 { grid-template-columns: 1fr; } .cmsg-imgs.n2, .cmsg-imgs.n4 { grid-template-columns: 1fr 1fr; } .cmsg-imgs.n3 { grid-template-columns: 1fr 1fr 1fr; } .cmsg-imgs img { width: 100%; height: 100%; max-height: 220px; object-fit: cover; border-radius: 8px; cursor: zoom-in; border: 1px solid var(--border); display: block; } .cmsg-file { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel-head); color: var(--text); max-width: 300px; } .cmsg-file:hover { border-color: var(--accent); text-decoration: none; } .cmsg-file svg { width: 18px; height: 18px; color: var(--accent); flex: none; } .cmsg-file .cf-main { flex: 1; min-width: 0; } .cf-name { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cf-size { font-size: 10.5px; color: var(--faint); } .cmsg-reacts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; } .creact { font-size: 12px; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--border); background: var(--panel-head); color: var(--text); cursor: pointer; } .creact.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 20%, transparent); } .cmsg-actions { position: absolute; top: -10px; right: 8px; display: none; gap: 2px; padding: 2px; border-radius: 8px; background: var(--panel-solid); border: 1px solid var(--border-strong); box-shadow: 0 6px 18px rgba(0,0,0,.35); } .cmsg:hover .cmsg-actions { display: flex; } .ca-btn { width: 26px; height: 24px; border: 0; background: transparent; color: var(--muted); border-radius: 6px; cursor: pointer; display: grid; place-items: center; } .ca-btn svg { width: 15px; height: 15px; } .ca-btn:hover { background: var(--border); color: var(--text); } .emoji-pop { position: fixed; z-index: 100001; display: flex; gap: 2px; padding: 6px; border-radius: 12px; background: var(--panel-solid); border: 1px solid var(--border-strong); box-shadow: 0 12px 30px rgba(0,0,0,.4); } .emoji-pop button { font-size: 20px; width: 34px; height: 34px; border: 0; background: transparent; border-radius: 8px; cursor: pointer; } .emoji-pop button:hover { background: var(--border); transform: scale(1.15); } .chat-typing { height: 16px; padding: 0 16px; font-size: 11.5px; color: var(--muted); font-style: italic; } .chat-composer { border-top: 1px solid var(--border); padding: 8px 10px; background: var(--panel-head); } .chat-reply { display: flex; align-items: center; gap: 8px; padding: 5px 8px; margin-bottom: 6px; border-radius: 8px; background: color-mix(in srgb, var(--accent) 10%, transparent); border: 1px solid var(--border); font-size: 12px; } .chat-reply svg { width: 15px; height: 15px; color: var(--accent); flex: none; } .chat-reply .reply-info { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .chat-reply .reply-info b { margin-right: 6px; } .chat-tray { display: none; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; } .chat-chip { display: flex; align-items: center; gap: 6px; padding: 4px 6px 4px 4px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel-solid); max-width: 180px; } .chat-chip img { width: 30px; height: 30px; border-radius: 5px; object-fit: cover; } .chat-chip svg { width: 18px; height: 18px; color: var(--accent); } .chat-chip .chip-name { font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chip-x { border: 0; background: transparent; color: var(--muted); cursor: pointer; display: grid; place-items: center; padding: 2px; } .chip-x svg { width: 13px; height: 13px; } .chat-inputrow { display: flex; align-items: flex-end; gap: 6px; } .chat-ta { flex: 1; resize: none; min-height: 38px; max-height: 140px; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--border-strong); background: var(--panel-solid); color: var(--text); font-family: var(--sans); font-size: 13.5px; line-height: 1.4; } .chat-ta:focus { outline: none; border-color: var(--accent); } .chat-send { align-self: stretch; } .lightbox { position: fixed; inset: 0; z-index: 100002; background: rgba(0,0,0,.82); display: grid; place-items: center; cursor: zoom-out; } .lightbox img { max-width: 92vw; max-height: 92vh; border-radius: 8px; box-shadow: 0 20px 60px rgba(0,0,0,.6); } /* 3.7 — chat threads / mentions / search / pins */ .chat-win { position: relative; } .chat-topbar { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-bottom: 1px solid var(--border); background: var(--panel-head); flex: 0 0 auto; } .chat-search-ico { width: 15px; height: 15px; color: var(--faint); flex: none; } .chat-search { flex: 1; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--border-strong); background: var(--panel-solid); color: var(--text); font-size: 13px; } .chat-search:focus { outline: none; border-color: var(--accent); } .chat-topbar .btn.icon.ghost.has { color: var(--accent); } .chat-pins { max-height: 38%; overflow: auto; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--accent) 6%, transparent); padding: 6px 10px; flex: 0 0 auto; } .chat-pins-h { display: flex; align-items: center; gap: 6px; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--faint); margin-bottom: 4px; } .chat-pins-h svg { width: 13px; height: 13px; } .chat-pin { display: flex; align-items: center; gap: 8px; padding: 5px 4px; border-bottom: 1px solid var(--border); } .chat-pin-main { flex: 1; min-width: 0; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chat-pin-main b { color: var(--text); } .cmention { color: var(--accent); font-weight: 600; } .cmention.me { background: color-mix(in srgb, var(--accent) 22%, transparent); border-radius: 4px; padding: 0 3px; } .cmsg.pinged .cmsg-text { border-color: color-mix(in srgb, var(--warn) 45%, var(--border)); background: color-mix(in srgb, var(--warn) 9%, var(--panel-head)); } .cmsg-pinned { color: var(--warn); display: inline-flex; margin-left: 4px; } .cmsg-pinned svg { width: 12px; height: 12px; } .cmsg-thread { margin-top: 4px; display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); border: 1px solid var(--border); border-radius: 8px; padding: 3px 8px; cursor: pointer; width: fit-content; } .cmsg-thread svg { width: 13px; height: 13px; } .cmsg-thread.has-unread { color: var(--good, #34d399); background: color-mix(in srgb, var(--good, #34d399) 14%, transparent); border-color: color-mix(in srgb, var(--good, #34d399) 40%, var(--border)); font-weight: 600; } .cmsg-thread-badge { min-width: 16px; height: 16px; padding: 0 4px; display: inline-grid; place-items: center; border-radius: 8px; background: var(--good, #34d399); color: #04170f; font-size: 10.5px; font-weight: 700; } /* 3.16 — link preview card */ .cmsg-preview { display: flex; margin-top: 6px; max-width: 420px; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; text-decoration: none; color: inherit; background: color-mix(in srgb, var(--text) 4%, transparent); } .cmsg-preview:hover { border-color: var(--border-strong); } .cpv-img { flex: 0 0 96px; width: 96px; background: var(--panel-head); } .cpv-img img { width: 96px; height: 100%; object-fit: cover; display: block; } .cpv-meta { padding: 8px 10px; min-width: 0; } .cpv-site { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 2px; } .cpv-title { font-size: 13px; font-weight: 600; color: var(--text); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .cpv-desc { font-size: 12px; color: var(--muted); margin-top: 3px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } /* 3.16 — read receipts */ .chat-receipts { display: flex; align-items: center; gap: 4px; justify-content: flex-end; padding: 2px 16px 6px; font-size: 11px; color: var(--muted); } .chat-receipts svg { width: 12px; height: 12px; color: var(--good, #34d399); } .chat-thread { position: absolute; inset: 0; z-index: 6; flex-direction: column; background: var(--panel-solid); } .chat-thread-h { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--border); background: var(--panel-head); flex: 0 0 auto; } .chat-thread .chat-msgs { flex: 1; } .mention-pop { display: flex; flex-direction: column; min-width: 200px; max-width: 280px; background: var(--panel-solid); border: 1px solid var(--border-strong); border-radius: 10px; box-shadow: 0 12px 30px rgba(0,0,0,.4); overflow: hidden; } .mention-pop button { display: flex; align-items: baseline; gap: 4px; text-align: left; border: 0; background: transparent; color: var(--text); padding: 7px 11px; cursor: pointer; font-size: 13px; } .mention-pop button:hover { background: var(--accent-dim); } /* ============================================================ 3.2.1 — Aero scrollbars + dock polish ============================================================ */ /* Kill the default white scrollbars in every app window / scroll area. */ * { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--accent) 38%, var(--border-strong)) transparent; } ::-webkit-scrollbar { width: 11px; height: 11px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--accent) 34%, var(--border-strong)); border-radius: 9px; border: 3px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--accent) 55%, var(--border-strong)); background-clip: padding-box; } ::-webkit-scrollbar-corner { background: transparent; } /* Dock: magnify icons in place (no lift) so they stay inside the bar instead of overlapping it. */ .desk-dock { padding: 10px 13px; } .dock-item:hover { transform: scale(1.16); } .dock-badge { position: absolute; top: -3px; right: -3px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--bad); color: #fff; font-size: 10px; font-weight: 700; display: none; place-items: center; box-shadow: 0 1px 4px rgba(0,0,0,.4); } /* ============================================================ 3.3 — FlightRadar app (live radar map + full aircraft table) ============================================================ */ .win-body:has(.fr-body) { display: flex; flex-direction: column; overflow: hidden; } .fr-toolbar { flex: 0 0 auto; } .fr-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; } .fr-stat { font-size: 12.5px; color: var(--muted); } .fr-stat b { color: var(--text); font-size: 14px; font-family: var(--mono); } .fr-body { flex: 1; display: flex; flex-direction: column; min-height: 0; } .fr-map { flex: 0 0 auto; height: 300px; width: 100%; background: #0a1120; } .fr-plane-ic { color: var(--accent); } .fr-plane { width: 18px; height: 18px; display: grid; place-items: center; filter: drop-shadow(0 0 2px rgba(0,0,0,.7)); } .fr-table { flex: 1; overflow: auto; min-height: 0; padding: 2px 0; } .fr-row { display: grid; grid-template-columns: 1.4fr .9fr 1fr .8fr .7fr 1.4fr; gap: 8px; align-items: center; padding: 6px 14px; border-bottom: 1px solid var(--border); font-size: 12.5px; } .fr-row.fr-head { position: sticky; top: 0; background: var(--panel-solid); color: var(--faint); font-size: 10.5px; text-transform: uppercase; letter-spacing: .8px; z-index: 1; } .fr-row:not(.fr-head):hover { background: color-mix(in srgb, var(--accent) 8%, transparent); } .fr-call b { color: var(--text); } .fr-call small { color: var(--faint); } .fr-row .up { color: var(--good); } .fr-row .down { color: var(--warn); } .fr-rte { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .splash-flt-list { margin-top: 8px; display: flex; flex-direction: column; } @media (max-width: 720px) { .fr-row { grid-template-columns: 1.4fr .9fr .8fr 1.2fr; } .fr-row span:nth-child(2), .fr-row span:nth-child(4) { display: none; } } /* ============================================================ 3.4 — Docker · System Monitor · Notes & Tasks ============================================================ */ .dk-sum { color: var(--muted); font-size: 12px; margin-left: 10px; } .dk-group { display: flex; align-items: center; gap: 6px; font-size: 10.5px; text-transform: uppercase; letter-spacing: 1px; color: var(--faint); margin: 14px 2px 6px; } .dk-group svg { width: 13px; height: 13px; } .dk-group-sum { margin-left: auto; text-transform: none; letter-spacing: 0; color: var(--muted); font-family: var(--mono); } .dk-card { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid var(--border); border-radius: 10px; margin-bottom: 6px; background: var(--panel-head); } .dk-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--faint); } .dk-dot.up { background: var(--good); box-shadow: 0 0 7px var(--good); } .dk-dot.down { background: var(--bad); } .dk-dot.warn { background: var(--warn); } .dk-main { flex: 1; min-width: 0; } .dk-name { font-size: 13px; font-weight: 600; color: var(--text); } .dk-img { font-size: 11px; color: var(--muted); font-family: var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dk-status { font-size: 11px; color: var(--faint); } .dk-acts { display: flex; gap: 3px; flex: none; } .dk-logs { margin: 0; padding: 14px; font-family: var(--mono); font-size: 11.5px; line-height: 1.5; color: var(--text); white-space: pre-wrap; word-break: break-word; } .dk-sum { font-size: 11.5px; color: var(--muted); margin-left: 10px; } /* 3.17 — docker: per-container stats + images */ .dk-stat { flex: 0 0 148px; } .dk-stat-load { color: var(--faint); font-size: 12px; } .dk-stat-in { display: flex; flex-direction: column; gap: 4px; } .dk-metric { display: flex; align-items: center; gap: 6px; } .dk-mlabel { font-size: 9.5px; letter-spacing: .5px; color: var(--faint); width: 26px; } .dk-mval { font-size: 10.5px; font-family: var(--mono); color: var(--muted); width: 52px; text-align: right; } .dk-bar { flex: 1; height: 5px; border-radius: 3px; background: var(--border); overflow: hidden; } .dk-bar-fill { height: 100%; border-radius: 3px; } .dk-imgbar { display: flex; align-items: center; gap: 10px; margin: 10px 0; } .dk-imgbar .btn { margin-left: auto; } .dk-imglist { display: flex; flex-direction: column; } .dk-imgrow { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-bottom: 1px solid var(--border); } .dk-imgrow.dangling { opacity: .6; } .dk-imgmain { flex: 1; min-width: 0; } .dk-imgname { font-size: 12.5px; color: var(--text); font-family: var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dk-imgtags { font-size: 10.5px; color: var(--faint); font-family: var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dk-imgsize { font-size: 11.5px; font-family: var(--mono); color: var(--muted); flex: none; } @media (max-width: 560px) { .dk-stat { flex-basis: 110px; } } .sm-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; } .sm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 8px; } .sm-gauge { border: 1px solid var(--border); border-radius: 10px; padding: 12px; background: var(--panel-head); } .sm-g-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; } .sm-g-label { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--faint); } .sm-g-pct { font-size: 20px; font-weight: 700; font-family: var(--mono); color: var(--text); } .sm-g-sub { font-size: 11px; color: var(--muted); margin-top: 6px; } .sm-sect { font-size: 10.5px; text-transform: uppercase; letter-spacing: 1px; color: var(--faint); margin: 14px 2px 2px; } .sm-spark { border: 1px solid var(--border); border-radius: 8px; padding: 4px 6px; background: var(--panel-head); } .sm-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; } .sm-stat { border: 1px solid var(--border); border-radius: 10px; padding: 10px; text-align: center; background: var(--panel-head); } .sm-stat b { display: block; font-family: var(--mono); font-size: 15px; color: var(--text); } .sm-stat span { font-size: 10.5px; color: var(--faint); text-transform: uppercase; letter-spacing: .6px; } @media (max-width: 560px) { .sm-grid { grid-template-columns: 1fr; } } .nt-body { padding: 2px 0; } .nt-notes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; } .nt-note { border: 1px solid var(--border); border-radius: 10px; padding: 12px; background: var(--panel-head); cursor: pointer; transition: border-color .12s; } .nt-note:hover { border-color: var(--accent); } .nt-title { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 5px; } .nt-prev { font-size: 12px; color: var(--muted); white-space: pre-wrap; max-height: 60px; overflow: hidden; } .nt-meta { font-size: 10.5px; color: var(--faint); margin-top: 8px; } .nt-editor { display: flex; flex-direction: column; gap: 10px; } .nt-input { padding: 9px 12px; border-radius: 9px; border: 1px solid var(--border-strong); background: var(--panel-solid); color: var(--text); font-size: 14px; } .nt-input:focus { outline: none; border-color: var(--accent); } .nt-ta { min-height: 260px; resize: vertical; padding: 11px 13px; border-radius: 10px; border: 1px solid var(--border-strong); background: var(--panel-solid); color: var(--text); font-family: var(--sans); font-size: 13.5px; line-height: 1.5; } .nt-ta:focus { outline: none; border-color: var(--accent); } .nt-edit-foot { display: flex; gap: 8px; align-items: center; } .nt-addrow { display: flex; gap: 8px; margin-bottom: 12px; } .nt-addrow .nt-input { flex: 1; } .nt-tasks { display: flex; flex-direction: column; } .nt-task { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-bottom: 1px solid var(--border); } .nt-task.done .nt-tx { text-decoration: line-through; color: var(--faint); } .nt-check { width: 22px; height: 22px; border-radius: 6px; border: 2px solid var(--border-strong); background: transparent; cursor: pointer; display: grid; place-items: center; flex: none; color: #04222a; } .nt-check.on { background: var(--accent); border-color: var(--accent); } .nt-check svg { width: 14px; height: 14px; } .nt-tx { flex: 1; font-size: 13.5px; color: var(--text); } .nt-done-sep { font-size: 10.5px; text-transform: uppercase; letter-spacing: 1px; color: var(--faint); margin: 14px 2px 4px; } /* 3.17 — notes: tags, pin, markdown */ .nt-tagbar { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 2px; } .nt-tag { font-size: 11.5px; padding: 3px 10px; border-radius: 20px; border: 1px solid var(--border); background: var(--panel-head); color: var(--muted); cursor: pointer; } .nt-tag.on { background: var(--accent); border-color: var(--accent); color: #04222a; font-weight: 600; } .nt-note { position: relative; } .nt-note.pinned { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); } .nt-pin { position: absolute; top: 10px; right: 10px; color: var(--accent); } .nt-pin svg { width: 14px; height: 14px; } .nt-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; } .nt-chip { font-size: 10.5px; padding: 2px 8px; border-radius: 12px; background: var(--accent-dim); color: var(--accent); } .nt-pincheck { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); cursor: pointer; } .nt-view-head { display: flex; align-items: center; margin-bottom: 8px; } .nt-view-title { font-size: 22px; font-weight: 700; color: var(--text); margin: 6px 0; } .nt-preview { min-height: 260px; padding: 11px 13px; border-radius: 10px; border: 1px solid var(--border-strong); background: var(--panel-solid); } /* markdown output */ .md { font-size: 14px; line-height: 1.6; color: var(--text); } .md-h { font-weight: 700; color: var(--text); margin: 14px 0 6px; line-height: 1.3; } h1.md-h { font-size: 20px; } h2.md-h { font-size: 17px; } h3.md-h { font-size: 15px; } h4.md-h { font-size: 13.5px; } .md-p { margin: 8px 0; } .md-list { margin: 8px 0 8px 20px; display: flex; flex-direction: column; gap: 3px; } .md-q { border-left: 3px solid var(--accent); padding: 2px 12px; margin: 8px 0; color: var(--muted); } .md-pre { background: var(--panel-head); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; overflow: auto; margin: 8px 0; } .md-pre code { font-family: var(--mono); font-size: 12.5px; color: var(--text); } .md-code { font-family: var(--mono); font-size: 12.5px; background: var(--panel-head); border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; } .md a { color: var(--accent); } .md-hr { border: 0; border-top: 1px solid var(--border); margin: 12px 0; } /* 3.20 — notes folders */ .nt-folderbar { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 2px; } .nt-folder { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; padding: 3px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--panel-head); color: var(--muted); cursor: pointer; } .nt-folder svg { width: 12px; height: 12px; } .nt-folder.on { background: var(--accent); border-color: var(--accent); color: #04222a; font-weight: 600; } @media (max-width: 560px) { .nt-notes { grid-template-columns: 1fr; } } /* 3.20 — Workspaces popover */ .ws-pop { width: 320px; max-width: 92vw; background: var(--panel-solid); border: 1px solid var(--border-strong); border-radius: 12px; box-shadow: 0 18px 44px rgba(0,0,0,.45); z-index: 100060; overflow: hidden; } .ws-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--border); font-weight: 600; font-size: 13px; color: var(--text); } .ws-head svg { width: 16px; height: 16px; color: var(--accent); } .ws-list { max-height: 300px; overflow-y: auto; padding: 6px; display: flex; flex-direction: column; gap: 4px; } .ws-empty { font-size: 12px; color: var(--muted); padding: 12px; line-height: 1.5; } .ws-row { display: flex; align-items: center; gap: 4px; } .ws-open { flex: 1; display: flex; align-items: center; gap: 8px; text-align: left; border: 1px solid var(--border); background: var(--panel-head); border-radius: 8px; padding: 7px 10px; cursor: pointer; color: var(--text); min-width: 0; } .ws-open:hover { border-color: var(--accent); } .ws-open svg { width: 14px; height: 14px; color: var(--muted); flex: none; } .ws-name { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ws-count { margin-left: auto; font-size: 10.5px; color: var(--faint); flex: none; } .ws-mini { width: 30px; height: 32px; display: grid; place-items: center; border: 1px solid var(--border); background: var(--panel-head); border-radius: 8px; cursor: pointer; color: var(--muted); flex: none; } .ws-mini:hover { border-color: var(--accent); color: var(--text); } .ws-mini.danger:hover { border-color: var(--bad); color: var(--bad); } .ws-mini svg { width: 14px; height: 14px; } .ws-save { display: flex; gap: 6px; padding: 8px; border-top: 1px solid var(--border); } .ws-input { flex: 1; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--border-strong); background: var(--panel-head); color: var(--text); font-size: 13px; } .ws-input:focus { outline: none; border-color: var(--accent); } /* 3.20 — Calendar / agenda */ .cal-legend { display: flex; flex-wrap: wrap; gap: 10px; margin-left: 14px; } .cal-leg { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--muted); } .cal-leg.err { color: var(--bad); } .cal-dot, .cal-ev-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; } .cal-body { padding: 4px 4px 16px; } .cal-day { display: flex; align-items: baseline; gap: 10px; margin: 16px 6px 6px; padding-bottom: 4px; border-bottom: 1px solid var(--border); } .cal-day.today .cal-daylabel { color: var(--accent); } .cal-daynum { font-size: 20px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; } .cal-daylabel { font-size: 12px; text-transform: uppercase; letter-spacing: .6px; color: var(--faint); } .cal-ev { display: flex; align-items: flex-start; gap: 10px; padding: 8px 8px; border-radius: 9px; } .cal-ev:hover { background: color-mix(in srgb, var(--accent) 7%, transparent); } .cal-ev-dot { margin-top: 5px; } .cal-ev-time { font-size: 12px; font-family: var(--mono); color: var(--muted); width: 62px; flex: none; text-align: right; } .cal-ev-main { flex: 1; min-width: 0; } .cal-ev-title { font-size: 13.5px; color: var(--text); } .cal-ev-loc { display: flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--faint); margin-top: 2px; } .cal-ev-loc svg { width: 12px; height: 12px; } .cal-ev-feed { font-size: 10.5px; color: var(--faint); background: var(--panel-head); border: 1px solid var(--border); border-radius: 10px; padding: 1px 8px; flex: none; align-self: center; } /* ============================================================ 3.5 — Changelog viewer · Weather radar · AD Directory ============================================================ */ .cl-body { display: flex; flex: 1; min-height: 0; overflow: hidden; } .cl-list { width: 180px; flex: 0 0 auto; border-right: 1px solid var(--border); overflow: auto; padding: 8px; } .cl-ver { display: flex; flex-direction: column; align-items: flex-start; width: 100%; text-align: left; border: 0; background: transparent; color: var(--muted); padding: 8px 10px; border-radius: 8px; cursor: pointer; } .cl-ver:hover { background: rgba(255,255,255,.04); color: var(--text); } .cl-ver.active { background: var(--accent-dim); color: var(--accent); } .cl-vn { font-size: 13px; font-weight: 600; } .cl-vd { font-size: 10.5px; color: var(--faint); } .cl-pane { flex: 1; overflow: auto; padding: 18px 22px; } .cl-vh { display: flex; align-items: baseline; gap: 10px; border-bottom: 1px solid var(--border); padding-bottom: 10px; margin-bottom: 12px; } .cl-vh h3 { margin: 0; font-size: 20px; } .cl-date { color: var(--faint); font-size: 12px; } .cl-h { font-weight: 700; color: var(--accent); margin: 14px 0 6px; font-size: 13.5px; } .cl-li { position: relative; padding-left: 16px; margin: 4px 0; font-size: 13px; color: var(--text); line-height: 1.5; } .cl-li::before { content: '•'; position: absolute; left: 2px; color: var(--accent); } .cl-p { font-size: 13px; color: var(--muted); margin: 4px 0; line-height: 1.5; } .cl-sp { height: 6px; } @media (max-width: 560px) { .cl-list { width: 130px; } } .win-body:has(.rd-body) { display: flex; flex-direction: column; overflow: hidden; } .rd-bar { display: flex; align-items: center; gap: 10px; width: 100%; flex-wrap: wrap; } .rd-ts { font-size: 12.5px; color: var(--text); font-family: var(--mono); min-width: 130px; } .rd-body { flex: 1; min-height: 0; display: flex; flex-direction: column; } .rd-map { flex: 1; width: 100%; min-height: 0; background: #0a1120; } /* 3.18 — radar controls */ .rd-ctls { display: flex; align-items: center; gap: 12px; margin-left: auto; flex-wrap: wrap; } .rd-ctl { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--faint); text-transform: uppercase; letter-spacing: .5px; } .rd-sel { background: var(--panel-solid); color: var(--text); border: 1px solid var(--border-strong); border-radius: 7px; padding: 3px 6px; font-size: 12px; } .rd-op { width: 80px; } .rd-scrub { flex: 0 0 auto; padding: 8px 12px; background: var(--panel-head); border-top: 1px solid var(--border); } .rd-range { width: 100%; accent-color: var(--accent); cursor: pointer; } .dir-count { font-size: 11px; color: var(--faint); text-transform: uppercase; letter-spacing: 1px; margin: 4px 2px 8px; } .dir-row { display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-bottom: 1px solid var(--border); cursor: pointer; } .dir-row:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); } .dir-avatar { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: #04222a; background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 85%, #fff), var(--accent)); flex: none; } .dir-avatar.off { background: var(--faint); } .dir-gi { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--accent-dim); color: var(--accent); flex: none; } .dir-gi svg { width: 17px; height: 17px; } .dir-main { flex: 1; min-width: 0; } .dir-name { font-size: 13.5px; font-weight: 600; color: var(--text); } .dir-sub { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dir-uname { font-size: 11.5px; color: var(--faint); font-family: var(--mono); flex: none; } .dir-kv { display: flex; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--border); } .dir-k { width: 110px; flex: none; color: var(--faint); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dir-v { color: var(--text); font-size: 13px; word-break: break-word; } /* Disk rows carry mount paths that can be long (Synology: /volume1/...) - let the label grow but ellipsize instead of overlapping the value, and keep the value pinned right on one line. */ .fleet-disk .dir-k { width: auto; flex: 0 1 auto; max-width: 55%; } .fleet-disk .dir-v { margin-left: auto; flex: 0 0 auto; white-space: nowrap; } .dir-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; } .dir-tags .chip-x { border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 13px; line-height: 1; padding: 0 2px; } .dir-tags .chip-x:hover { color: var(--bad); } .dir-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; } .dir-pw { display: flex; gap: 8px; margin-top: 6px; } /* 3.8 — AD-more (create/unlock/bulk/report), DNS + Group Policy apps */ .dir-check { width: 15px; height: 15px; flex: none; accent-color: var(--accent); cursor: pointer; } .dir-bulkbar { display: flex; align-items: center; gap: 8px; padding: 8px 10px; margin-bottom: 8px; border-radius: 8px; background: color-mix(in srgb, var(--accent) 12%, transparent); border: 1px solid var(--accent-dim); position: sticky; top: 0; z-index: 2; } .dir-bulkbar > span:first-child { font-size: 12px; font-weight: 600; color: var(--text); margin-right: auto; } .dir-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .dir-field { display: flex; flex-direction: column; gap: 4px; } .dir-field > span { font-size: 11.5px; color: var(--faint); } .dir-field.full, .dir-form > .full { grid-column: 1 / -1; } .dir-table { display: flex; flex-direction: column; margin-top: 6px; } .dir-tr { display: grid; grid-template-columns: 2fr 1.4fr 1.2fr 1fr; gap: 10px; align-items: center; padding: 8px 6px; border-bottom: 1px solid var(--border); cursor: pointer; font-size: 12.5px; } .dir-tr:hover { background: color-mix(in srgb, var(--accent) 7%, transparent); } .dir-th { font-size: 10.5px; text-transform: uppercase; letter-spacing: .8px; color: var(--faint); cursor: default; position: sticky; top: 0; background: var(--panel); } .dir-tr.stale { opacity: .72; } /* DNS app */ /* The split apps own their own scrolling: stop the window body from scrolling the whole thing as one, and let each pane scroll independently (fixes both sides scrolling together). */ .win-body:has(.dns-split), .win-body:has(.gpo-split) { display: flex; flex-direction: column; overflow: hidden; } .dns-left, .dns-right, .gpo-left, .gpo-right { overflow-y: auto; min-height: 0; } .dns-split, .gpo-split { display: flex; flex: 1; min-height: 0; } .dns-left { width: 240px; flex: none; border-right: 1px solid var(--border); } .dns-right { flex: 1; min-width: 0; } .dns-zgroup { font-size: 10.5px; text-transform: uppercase; letter-spacing: .8px; color: var(--faint); padding: 10px 10px 4px; } .dns-zone { display: flex; flex-direction: column; gap: 1px; padding: 8px 10px; border-bottom: 1px solid var(--border); cursor: pointer; } .dns-zone:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); } .dns-zone.active { background: var(--accent-dim); } .dns-zn { font-size: 13px; font-weight: 600; color: var(--text); word-break: break-all; } .dns-zt { font-size: 11px; color: var(--muted); } .dns-rhead, .gpo-dhead { display: flex; align-items: center; gap: 8px; padding: 4px 2px 10px; } .dns-table .dir-tr { grid-template-columns: 1.4fr .7fr 2fr .7fr .9fr; } .dns-data { font-family: var(--mono); font-size: 11.5px; word-break: break-all; } /* Group Policy app */ .gpo-left { width: 260px; flex: none; border-right: 1px solid var(--border); } .gpo-right { flex: 1; min-width: 0; padding: 4px 12px 16px; } .gpo-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-bottom: 1px solid var(--border); cursor: pointer; } .gpo-item:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); } .gpo-item.active { background: var(--accent-dim); } .gpo-link, .gpo-regrow { display: flex; align-items: center; gap: 6px; padding: 7px 0; border-bottom: 1px solid var(--border); } .gpo-reg { margin-top: 8px; } /* 3.18 — GPO report + WMI filters */ .gpo-report { width: 100%; height: 100%; border: 0; background: #fff; border-radius: 0 0 12px 12px; } .gpo-wmi { display: flex; flex-direction: column; gap: 8px; } .gpo-wmirow { display: flex; flex-direction: column; gap: 3px; padding: 10px; border: 1px solid var(--border); border-radius: 9px; background: var(--panel-head); } .gpo-wmiq { font-family: var(--mono); font-size: 11.5px; color: var(--muted); background: var(--panel-solid); border: 1px solid var(--border); border-radius: 5px; padding: 3px 7px; overflow-x: auto; white-space: pre; } /* 3.21 — Infrastructure app (DHCP, sites, event log, tasks) */ .infra-row { display: flex; align-items: center; gap: 10px; padding: 8px 8px; border-bottom: 1px solid var(--border); cursor: default; } .infra-row[onclick], .infra-row:hover { } .infra-row .dir-main { flex: 1; min-width: 0; } .infra-row > svg { width: 15px; height: 15px; color: var(--faint); flex: none; } .dhcp-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--faint); } .dhcp-dot.on { background: var(--good, #34d399); box-shadow: 0 0 6px var(--good, #34d399); } .infra-events { display: flex; flex-direction: column; gap: 6px; } .evt { border: 1px solid var(--border); border-left-width: 3px; border-radius: 8px; padding: 7px 10px; background: var(--panel-head); } .evt-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; font-size: 11px; } .evt-lvl { font-weight: 700; text-transform: uppercase; letter-spacing: .4px; } .evt-id { font-family: var(--mono); color: var(--muted); } .evt-prov { color: var(--muted); } .evt-time { margin-left: auto; color: var(--faint); font-family: var(--mono); } .evt-msg { font-size: 12px; color: var(--text); margin-top: 4px; white-space: pre-wrap; word-break: break-word; max-height: 120px; overflow: auto; } .evt-error { border-left-color: var(--bad); } .evt-error .evt-lvl { color: var(--bad); } .evt-warning { border-left-color: var(--warn, #f59e0b); } .evt-warning .evt-lvl { color: var(--warn, #f59e0b); } .evt-critical { border-left-color: var(--bad); } .evt-critical .evt-lvl { color: var(--bad); } .evt-information { border-left-color: var(--border-strong); } .evt-information .evt-lvl { color: var(--muted); } /* 3.10 — Computer fleet monitor */ .fleet-count { font-size: 12px; color: var(--muted); font-weight: 600; } .win-body:has(.fleet-split) { display: flex; flex-direction: column; overflow: hidden; } .fleet-split { display: flex; flex: 1; min-height: 0; } .fleet-left { width: 280px; flex: none; border-right: 1px solid var(--border); overflow-y: auto; min-height: 0; } .fleet-right { flex: 1; min-width: 0; overflow-y: auto; min-height: 0; padding: 4px 14px 16px; } .fleet-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-bottom: 1px solid var(--border); cursor: pointer; } .fleet-item:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); } .fleet-item.active { background: var(--accent-dim); } .fleet-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--faint); box-shadow: 0 0 0 3px color-mix(in srgb, var(--faint) 25%, transparent); } .fleet-dot.on { background: var(--good, #34d399); box-shadow: 0 0 0 3px color-mix(in srgb, var(--good, #34d399) 30%, transparent); } .fleet-dhead { display: flex; align-items: center; padding: 4px 2px 10px; } .fleet-token { display: block; word-break: break-all; background: var(--panel); border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; font-family: var(--mono); font-size: 12px; color: var(--accent); } .fleet-cfg { background: var(--panel); border: 1px solid var(--border); border-radius: 6px; padding: 10px; font-family: var(--mono); font-size: 11.5px; white-space: pre-wrap; overflow-x: auto; } /* 3.13 — Global spotlight search (Ctrl-K) */ .spot-backdrop { position: fixed; inset: 0; z-index: 100060; display: flex; justify-content: center; align-items: flex-start; padding-top: 12vh; background: rgba(0,0,0,.42); backdrop-filter: blur(2px); } .spot-box { width: min(640px, 94vw); background: var(--panel-solid, var(--panel)); border: 1px solid var(--glass-hi, var(--border)); border-radius: 14px; box-shadow: 0 24px 64px rgba(0,0,0,.5); overflow: hidden; } .spot-inputrow { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-bottom: 1px solid var(--border); } .spot-ico { color: var(--muted); flex: none; display: grid; place-items: center; } .spot-ico svg { width: 20px; height: 20px; } .spot-input { flex: 1; background: transparent; border: 0; outline: none; color: var(--text); font-size: 16px; } .spot-esc { font-size: 10px; color: var(--faint); border: 1px solid var(--border); border-radius: 5px; padding: 2px 6px; flex: none; } .spot-list { max-height: 52vh; overflow-y: auto; padding: 6px; } .spot-row { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 8px; cursor: pointer; } .spot-row.active { background: var(--accent-dim); } .spot-ric { width: 24px; height: 24px; display: grid; place-items: center; color: var(--accent); flex: none; } .spot-ric svg { width: 18px; height: 18px; } .spot-main { min-width: 0; flex: 1; } .spot-label { font-size: 14px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .spot-sub { font-size: 11.5px; color: var(--muted); } .spot-empty { padding: 22px; text-align: center; color: var(--faint); font-size: 13px; } /* ADUC drag-and-drop: drag an object from the list onto an OU in the tree to move it. */ .aduc-item[draggable="true"] { cursor: grab; } .aduc-item.aduc-dragging { opacity: .45; cursor: grabbing; } .aduc-ou.aduc-drop { background: var(--accent-dim); outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 6px; } .spot-group { font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--faint); padding: 10px 12px 4px; } .spot-group:first-child { padding-top: 4px; } /* 3.14 — searchable emoji picker (chat) */ .emoji-picker { position: fixed; z-index: 100070; width: 300px; background: var(--panel-solid, var(--panel)); border: 1px solid var(--glass-hi, var(--border)); border-radius: 12px; box-shadow: 0 18px 44px rgba(0,0,0,.5); padding: 8px; } .emoji-search { width: 100%; margin-bottom: 6px; } .emoji-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; max-height: 260px; overflow-y: auto; } .emoji-cell { border: 0; background: transparent; cursor: pointer; font-size: 20px; line-height: 1; padding: 5px 0; border-radius: 6px; } .emoji-cell:hover { background: var(--accent-dim); } .emoji-none { grid-column: 1 / -1; text-align: center; color: var(--faint); font-size: 12px; padding: 16px; } .emoji-more { font-size: 13px; opacity: .8; } .emoji-more svg { width: 15px; height: 15px; } /* 3.15 — fleet detail: actions, graphs, software */ .fleet-actions { display: flex; gap: 8px; padding: 4px 0 10px; flex-wrap: wrap; } /* 3.19 — fleet remote PowerShell console */ .fleet-ps-warn { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; background: color-mix(in srgb, var(--warn, #f59e0b) 14%, transparent); border: 1px solid color-mix(in srgb, var(--warn, #f59e0b) 40%, var(--border)); font-size: 12px; color: var(--text); } .fleet-ps-warn svg { width: 16px; height: 16px; flex: none; color: var(--warn, #f59e0b); } .fleet-ps-ta { min-height: 90px; resize: vertical; padding: 10px 12px; border-radius: 9px; border: 1px solid var(--border-strong); background: #0b1120; color: #e5edff; font-family: var(--mono); font-size: 12.5px; line-height: 1.5; } .fleet-ps-ta:focus { outline: none; border-color: var(--accent); } .fleet-ps-out { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; } .fleet-ps-item { border: 1px solid var(--border); border-radius: 9px; padding: 8px 10px; background: var(--panel-head); } .fleet-ps-item.hot { border-color: var(--accent); } .fleet-ps-cmd code { font-family: var(--mono); font-size: 12px; color: var(--accent); word-break: break-word; } .fleet-ps-status { font-size: 11px; color: var(--muted); margin: 3px 0; } .fleet-ps-status.error { color: var(--bad); } .fleet-ps-status.done { color: var(--good, #34d399); } .fleet-ps-output { margin: 4px 0 0; padding: 8px 10px; background: #0b1120; border-radius: 7px; color: #d7e3ff; font-family: var(--mono); font-size: 11.5px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; max-height: 280px; overflow: auto; } .fleet-graphs { display: flex; gap: 18px; flex-wrap: wrap; margin: 10px 0; } .fleet-spark { width: 220px; height: 34px; display: block; } .fleet-sw { max-height: 260px; overflow-y: auto; border: 1px solid var(--border); border-radius: 8px; } .fleet-swrow { display: flex; justify-content: space-between; gap: 10px; padding: 6px 10px; border-bottom: 1px solid var(--border); } .fleet-swrow:last-child { border-bottom: 0; } .fleet-swrow .dir-sub { flex: none; font-family: var(--mono); } .fleet-meta { margin: 8px 0 4px; } .fleet-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0; } .fleet-tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: var(--accent-weak, rgba(34,211,238,.14)); border: 1px solid var(--border); font-size: 12px; } .fleet-tag-x { cursor: pointer; opacity: .6; font-weight: 700; } .fleet-tag-x:hover { opacity: 1; color: var(--bad, #f87171); } .fleet-rowtags { display: inline-flex; gap: 4px; margin-left: 6px; } .fleet-rowtag { padding: 0 6px; border-radius: 999px; background: var(--accent-weak, rgba(34,211,238,.14)); border: 1px solid var(--border); font-size: 10px; opacity: .85; } .fleet-verbar { display: flex; align-items: center; gap: 10px; padding: 5px 6px; border-radius: 8px; cursor: pointer; } .fleet-verbar:hover { background: var(--hover, rgba(127,127,127,.10)); } .fleet-verbar-label { min-width: 96px; font-family: var(--mono); font-size: 12px; } .fleet-verbar.old .fleet-verbar-label { color: var(--bad, #f87171); } .fleet-verbar.cur .fleet-verbar-label { color: var(--good, #34d399); } .fleet-verbar-track { flex: 1; height: 10px; border-radius: 999px; background: var(--panel-solid, rgba(127,127,127,.15)); overflow: hidden; } .fleet-verbar-fill { display: block; height: 100%; border-radius: 999px; background: var(--bad, #f87171); } .fleet-verbar.cur .fleet-verbar-fill { background: var(--good, #34d399); } .fleet-verbar-n { min-width: 24px; text-align: right; font-variant-numeric: tabular-nums; font-size: 12px; } /* XP Search Companion */ .sc-wrap { display: flex; gap: 14px; padding: 14px; height: 100%; box-sizing: border-box; } .sc-side { width: 200px; flex: none; background: linear-gradient(180deg, #6f96df22, #6f96df08); border: 1px solid var(--border); border-radius: 8px; padding: 12px; } .sc-dog { width: 54px; height: 54px; border-radius: 10px; display: grid; place-items: center; background: var(--accent); color: #fff; margin: 0 auto 8px; } .sc-dog svg { width: 30px; height: 30px; } .sc-side-t { text-align: center; font-weight: 700; margin-bottom: 6px; } .sc-side-h { font-size: 12px; color: var(--muted); line-height: 1.5; } .sc-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; } .sc-results { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; } .sc-hit { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 6px; cursor: pointer; font-size: 13px; } .sc-hit:hover { background: var(--accent); color: #fff; } .sc-hit:hover svg { color: #fff; } .sc-ico svg { width: 20px; height: 20px; color: var(--accent); } /* Remote file browser */ .fleet-fb { display: flex; flex-direction: column; } .fleet-fb-row { display: grid; grid-template-columns: 20px 1fr auto auto; align-items: center; gap: 10px; padding: 5px 6px; border-bottom: 1px solid var(--border); font-size: 12.5px; } .fleet-fb-row.dir { cursor: pointer; } .fleet-fb-row.dir:hover, .fleet-fb-row:hover { background: var(--hover, #ffffff0d); } .fleet-fb-row .fb-ico { width: 16px; height: 16px; color: var(--accent); } .fleet-fb-row.dir .fb-ico { color: #e6a71e; } .fleet-fb-row .fb-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fleet-fb-row .fb-size { color: var(--muted); font-family: var(--mono); font-size: 11px; } .fleet-fb-warn { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 7px; background: #7a5c0022; color: var(--warn, #f59e0b); font-size: 11.5px; } .fleet-fb-warn svg { width: 15px; height: 15px; flex: none; } .fleet-hist { display: flex; flex-direction: column; gap: 2px; max-height: 320px; overflow-y: auto; } .fleet-hist-row { display: flex; align-items: center; gap: 8px; padding: 4px 2px; font-size: 12.5px; } .fleet-hist-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--muted, #94a3b8); } .fleet-hist-row.online .fleet-hist-dot { background: var(--good, #34d399); } .fleet-hist-row.offline .fleet-hist-dot { background: var(--bad, #f87171); } .fleet-hist-row.version .fleet-hist-dot { background: var(--accent, #22d3ee); } .fleet-hist-label { flex: 1; } .fleet-hist-time { color: var(--muted, #94a3b8); font-variant-numeric: tabular-nums; } /* ---- Seerr (media discovery + requests) ---- */ .seerr-tab.on { background: var(--accent, #22d3ee); color: #04121e; border-color: transparent; } .seerr-subtabs { display: flex; gap: 8px; margin-bottom: 12px; } .seerr-subtabs .btn.on { background: var(--accent-weak, rgba(34,211,238,.16)); border-color: var(--accent, #22d3ee); } .seerr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 14px; } .seerr-card { position: relative; cursor: pointer; border-radius: 10px; overflow: hidden; background: var(--panel-solid, #10182a); border: 1px solid var(--border); transition: transform .12s ease, box-shadow .12s ease; } .seerr-card:hover { transform: translateY(-3px); box-shadow: 0 8px 22px rgba(0,0,0,.35); } .seerr-poster { width: 100%; aspect-ratio: 2/3; object-fit: cover; display: block; background: #1b2436; } .seerr-cap { padding: 7px 8px 9px; } .seerr-cap-t { font-size: 12.5px; font-weight: 600; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .seerr-cap-s { font-size: 11px; color: var(--muted, #94a3b8); margin-top: 2px; } .seerr-badge { position: absolute; top: 6px; right: 6px; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 999px; text-transform: capitalize; background: rgba(0,0,0,.65); color: #fff; } .seerr-badge.available { background: #16a34a; } .seerr-badge.processing, .seerr-badge.partial { background: #d97706; } .seerr-badge.pending { background: #6366f1; } .seerr-badge.approved { background: #0ea5e9; } .seerr-badge.declined { background: #dc2626; } .seerr-reqs { display: flex; flex-direction: column; gap: 8px; } .seerr-req { display: flex; align-items: center; gap: 12px; padding: 8px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel-solid, #10182a); } .seerr-req-poster { width: 46px; height: 69px; object-fit: cover; border-radius: 6px; flex: none; background: #1b2436; } .seerr-req-main { min-width: 0; flex: 1; } .seerr-detail-body { display: flex; gap: 16px; padding: 16px; } .seerr-detail-poster { width: 160px; aspect-ratio: 2/3; object-fit: cover; border-radius: 10px; flex: none; background: #1b2436; } .seerr-detail-info { min-width: 0; flex: 1; } .seerr-backdrop { height: 150px; background-size: cover; background-position: center; opacity: .5; } .seerr-tagline { font-style: italic; color: var(--muted, #94a3b8); margin-bottom: 4px; } .seerr-overview { font-size: 13.5px; line-height: 1.5; margin: 10px 0; max-height: 200px; overflow-y: auto; } .seerr-reqzone { margin-top: 8px; } .seerr-seasons { display: flex; flex-wrap: wrap; gap: 6px 16px; max-height: 160px; overflow-y: auto; margin-bottom: 6px; } .seerr-season { display: flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; } @media (max-width: 640px) { .seerr-detail-body { flex-direction: column; } .seerr-detail-poster { width: 120px; } .seerr-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; } } /* ---- Audiobookshelf app ---- */ .abs-prog { display: flex; flex-direction: column; gap: 8px; } .abs-prow { display: flex; align-items: center; gap: 12px; padding: 8px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel-solid, #10182a); } .abs-prow-cover { width: 52px; height: 52px; object-fit: cover; border-radius: 6px; flex: none; background: #1b2436; } .abs-prow-main { flex: 1; min-width: 0; } .abs-bar { height: 6px; border-radius: 999px; background: var(--panel-solid, rgba(127,127,127,.18)); margin-top: 6px; overflow: hidden; } .abs-bar > span { display: block; height: 100%; background: var(--accent, #22d3ee); border-radius: 999px; } .abs-pct { font-variant-numeric: tabular-nums; color: var(--muted, #94a3b8); font-size: 12px; } .abs-libs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; } .abs-libs .btn.on { background: var(--accent-weak, rgba(34,211,238,.16)); border-color: var(--accent, #22d3ee); } .abs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 14px; } .abs-card { border-radius: 10px; overflow: hidden; background: var(--panel-solid, #10182a); border: 1px solid var(--border); } .abs-cover { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; background: #1b2436; } .abs-cap { padding: 7px 8px 9px; } .abs-cap-t { font-size: 12.5px; font-weight: 600; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .abs-cap-s { font-size: 11px; color: var(--muted, #94a3b8); margin-top: 2px; } @media (max-width: 640px) { .abs-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; } } /* ---- News reader app ---- */ .news-list { display: flex; flex-direction: column; gap: 10px; } .news-card { display: flex; gap: 12px; padding: 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel-solid, #10182a); text-decoration: none; color: inherit; transition: background .12s ease, transform .12s ease; } .news-card:hover { background: var(--hover, rgba(127,127,127,.08)); transform: translateY(-1px); } .news-thumb { width: 120px; height: 78px; object-fit: cover; border-radius: 7px; flex: none; background: #1b2436; } .news-body { min-width: 0; flex: 1; } .news-title { font-weight: 600; font-size: 14px; line-height: 1.3; } .news-snip { font-size: 12.5px; color: var(--muted, #94a3b8); margin: 4px 0; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .news-meta { font-size: 11.5px; color: var(--muted, #94a3b8); } @media (max-width: 640px) { .news-thumb { width: 84px; height: 60px; } } /* ---- Tautulli (Plex activity) app ---- */ .taut-stream { display: flex; align-items: center; gap: 12px; padding: 9px 8px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel-solid, #10182a); margin-bottom: 8px; } .taut-stream-main { flex: 1; min-width: 0; } .taut-stream-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; } .taut-hist { display: flex; flex-direction: column; } .taut-hrow { display: flex; align-items: center; gap: 10px; padding: 7px 2px; border-bottom: 1px solid var(--border); } .taut-hrow:last-child { border-bottom: 0; } .taut-htype { width: 22px; height: 22px; border-radius: 5px; background: var(--accent-weak, rgba(34,211,238,.16)); color: var(--accent, #22d3ee); font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex: none; } .taut-hmain { flex: 1; min-width: 0; } .taut-htime { color: var(--muted, #94a3b8); font-size: 12px; white-space: nowrap; } .taut-stat { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 5px 2px; border-bottom: 1px dashed var(--border); } .taut-stat:last-child { border-bottom: 0; } /* ---- Infrastructure: DHCP ---- */ .infra-scopewrap { border-bottom: 1px solid var(--border); } .infra-leases { padding: 4px 8px 10px 26px; } .infra-lease { display: flex; align-items: center; gap: 10px; padding: 4px 2px; font-size: 12.5px; border-top: 1px dashed var(--border); } .infra-lease:first-child { border-top: 0; } /* ============================================================ Accessibility & interaction polish ============================================================ */ /* Themed keyboard-focus ring — only for keyboard users (:focus-visible), so mouse clicks stay clean. The app had no visible focus state before; this restores keyboard navigability. */ button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [role="button"]:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } button:focus:not(:focus-visible), a:focus:not(:focus-visible) { outline: none; } /* Disabled controls now actually look disabled (many buttons toggle .disabled during async work). */ button:disabled, .btn:disabled, .btn[disabled], input:disabled, select:disabled, textarea:disabled { opacity: .5; cursor: not-allowed; } .btn:disabled:hover, .btn[disabled]:hover { border-color: var(--border-strong); color: var(--text); filter: none; } /* Tactile press feedback on buttons. */ .btn:active:not(:disabled) { transform: translateY(1px); } /* Themed text selection. */ ::selection { background: var(--accent); color: #04222a; } /* Respect "reduce motion": neutralise transitions/animations for users who ask for it. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } /* ===== 5.0 hybrid shell (opt-in: html[data-shell="new"]) ===== */ [data-shell="new"] #topbar, [data-shell="new"] #statusline, [data-shell="new"] .desk-dock, [data-shell="new"] .desk-icons, [data-shell="new"] .desk-sc, [data-shell="new"] .xp-start, [data-shell="new"] .xp-tray { display: none !important; } [data-shell="new"] #main { top: 0 !important; bottom: 0 !important; } [data-shell="new"] .desk-wallpaper { display: block !important; padding: 0; overflow: hidden; } /* classic mobile mode hides this layer; the new shell lives in it */ [data-shell="new"] .mobile-wg-back { display: none !important; } .sh { position: absolute; inset: 0; display: flex; background: var(--panel-solid); color: var(--text); } .sh-side { width: 208px; flex: none; display: flex; flex-direction: column; gap: 2px; padding: 12px 10px; border-right: 1px solid var(--border); background: rgba(0,0,0,.18); } .sh-brand { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--accent); color: #fff; margin: 0 0 10px 4px; } .sh-brand svg { width: 20px; height: 20px; } .sh-nav { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; border: 0; background: transparent; color: var(--muted); font-size: 13px; cursor: pointer; text-align: left; } .sh-nav svg { width: 18px; height: 18px; flex: none; } .sh-nav:hover { background: rgba(255,255,255,.06); color: var(--text); } .sh-nav.on { background: rgba(255,255,255,.1); color: var(--text); } .sh-main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .sh-top { height: 52px; flex: none; display: flex; align-items: center; gap: 10px; padding: 0 16px; border-bottom: 1px solid var(--border); } .sh-title { font-weight: 600; font-size: 15px; } .sh-search { display: flex; align-items: center; gap: 8px; width: min(380px, 40vw); height: 32px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--border); background: rgba(0,0,0,.2); color: var(--muted); font-size: 13px; cursor: text; margin-left: 12px; } .sh-search svg { width: 16px; height: 16px; } .sh-search kbd { margin-left: auto; font-family: var(--mono); font-size: 10px; padding: 1px 5px; border: 1px solid var(--border); border-radius: 4px; } .sh-clock { font-family: var(--mono); font-size: 13px; color: var(--muted); } .sh-user { font-size: 13px; } .sh-scroll { flex: 1; overflow: auto; padding: 16px; } .sh-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; } .tile { background: rgba(255,255,255,.05); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; min-height: 118px; display: flex; flex-direction: column; gap: 6px; cursor: pointer; transition: border-color .12s, transform .12s; user-select: none; } .tile:hover { border-color: var(--accent); } .tile.dragging { opacity: .4; } .tile.over { border-color: var(--accent); transform: scale(1.02); } .tile.err { opacity: .6; } .tile.stale .tile-body { opacity: .7; } .tile-head { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted); } .tile-head svg { width: 16px; height: 16px; } .tile-body { flex: 1; display: flex; flex-direction: column; gap: 5px; min-height: 0; } .tile-big { font-size: 30px; font-weight: 600; line-height: 1.1; letter-spacing: -.5px; } .tile-big.good { color: var(--good); } .tile-small { font-size: 13px; font-weight: 400; color: var(--muted); margin-left: 2px; } .tile-sub { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tile-chips { display: flex; flex-wrap: wrap; gap: 5px; } .tile-chip { font-size: 11px; padding: 2px 7px; border-radius: 999px; background: rgba(255,255,255,.08); color: var(--text); } .tile-chip.bad { background: rgba(224,36,94,.2); color: var(--bad); } .tile-chip.warn { background: rgba(209,154,0,.2); color: var(--warn, #d19a00); } .tile-list { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--text); } .tile-list div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); font-size: 11px; } .tile-cam { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; background: #000; display: block; } .sh-apps { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; } .sh-app { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 8px; border-radius: 12px; border: 1px solid var(--border); background: rgba(255,255,255,.04); color: var(--text); font-size: 12px; cursor: pointer; } .sh-app svg { width: 26px; height: 26px; color: var(--accent); } .sh-app:hover { border-color: var(--accent); } /* phone: sidebar becomes a bottom bar with icons only */ @media (max-width: 720px) { .sh { flex-direction: column-reverse; } .sh-side { width: auto; flex-direction: row; justify-content: space-around; padding: 6px 4px; border-right: 0; border-top: 1px solid var(--border); gap: 0; overflow-x: auto; } .sh-brand, .sh-side > div { display: none; } .sh-nav { flex-direction: column; gap: 3px; padding: 6px 8px; font-size: 10px; } .sh-nav svg { width: 20px; height: 20px; } .sh-top { height: 46px; padding: 0 10px; } .sh-title, .sh-user, .sh-search kbd { display: none; } .sh-search { width: auto; flex: 1; margin-left: 0; white-space: nowrap; overflow: hidden; } .sh-search span { overflow: hidden; text-overflow: ellipsis; } /* five items fit a phone bar; the rest live under All apps */ .sh-nav[data-nav="timeline"], .sh-nav[data-nav="unifi"], .sh-nav[data-nav="locations"], .sh-nav[data-nav="settings"], .sh-nav[data-nav="classic"] { display: none; } .sh-scroll { padding: 10px; } .sh-grid { grid-template-columns: 1fr 1fr; gap: 8px; } .tile { min-height: 100px; padding: 10px 12px; } .tile-big { font-size: 24px; } } /* TV / very wide: bigger tiles */ @media (min-width: 1800px) { .sh-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } .tile-big { font-size: 36px; } } /* Timeline app */ .tl-list { padding: 4px 0 20px; } .tl-day { position: sticky; top: 0; font-size: 11px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: var(--muted); padding: 12px 14px 6px; background: var(--panel-solid); z-index: 1; } .tl-row { display: grid; grid-template-columns: 60px 24px 1fr auto; gap: 10px; align-items: start; padding: 8px 14px; border-left: 3px solid transparent; } .tl-row:hover { background: rgba(255,255,255,.03); } .tl-row.lvl-error { border-left-color: var(--bad); } .tl-row.lvl-good { border-left-color: var(--good); } .tl-row.lvl-warn { border-left-color: var(--warn, #d19a00); } .tl-time { font-family: var(--mono); font-size: 11px; color: var(--faint); padding-top: 3px; } .tl-ico svg { width: 16px; height: 16px; color: var(--muted); } .tl-title { font-size: 13px; } .tl-body { font-size: 12px; color: var(--muted); margin-top: 2px; } .tl-kind { font-family: var(--mono); font-size: 10px; color: var(--faint); text-transform: uppercase; padding-top: 3px; } .nc-chip svg { width: 13px; height: 13px; } @media (max-width: 560px) { .tl-row { grid-template-columns: 52px 1fr; } .tl-ico, .tl-kind { display: none; } } /* Map app */ .mp-wrap { display: flex; height: 100%; min-height: 0; } .mp-map { flex: 1; min-width: 0; background: #0b1220; } .mp-panel { width: 300px; flex: none; display: flex; flex-direction: column; border-left: 1px solid var(--border); min-height: 0; } .mp-panel .ha-tabs { padding: 6px 10px 0; } .mp-list { flex: 1; overflow: auto; padding: 4px 0 12px; } .mp-sect { font-size: 11px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: var(--muted); padding: 12px 12px 4px; } .mp-row { display: flex; align-items: center; gap: 10px; padding: 7px 12px; cursor: pointer; } .mp-row:hover { background: rgba(255,255,255,.04); } .mp-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex: none; } .mp-initial { display: grid; place-items: center; background: rgba(255,255,255,.08); color: var(--text); font-weight: 600; font-size: 13px; } .mp-initial svg { width: 16px; height: 16px; color: var(--muted); } .mp-main { flex: 1; min-width: 0; } .mp-name { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mp-sub { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mp-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--faint); flex: none; } .mp-dot.on { background: var(--good); box-shadow: 0 0 0 3px rgba(61,220,132,.2); } @media (max-width: 720px) { .mp-wrap { flex-direction: column; } .mp-map { min-height: 42vh; } .mp-panel { width: auto; border-left: 0; border-top: 1px solid var(--border); } } /* OpenStreetMap tiles rendered dark to match the UI (Carto's free dark basemap now needs an API key) */ .osm-tiles { filter: invert(1) hue-rotate(180deg) brightness(.8) contrast(.95) saturate(.5); } .leaflet-control-attribution { font-size: 9px !important; background: rgba(0,0,0,.4) !important; color: #aaa !important; } .leaflet-control-attribution a { color: #ccc !important; } /* Ask (AI assistant) */ .sh-search-in { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; color: var(--text); font: inherit; font-size: 13px; } .sh-search-in::placeholder { color: var(--muted); } .ask-drawer { width: min(460px, 96vw); } .ask-msgs { padding: 14px; gap: 10px; } .ask-hello { padding: 8px 4px; } .ask-hello-t { font-size: 15px; font-weight: 600; margin-bottom: 4px; } .ask-hello-s { font-size: 12px; color: var(--muted); line-height: 1.5; margin-bottom: 12px; } .ask-sugg { display: flex; flex-wrap: wrap; gap: 6px; } .ask-msg { display: flex; gap: 8px; align-items: flex-start; } .ask-msg.me { justify-content: flex-end; } .ask-ico { width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; flex: none; margin-top: 2px; } .ask-ico svg { width: 14px; height: 14px; } .ask-msg.err .ask-ico { background: var(--bad); } .ask-bubble { max-width: 86%; padding: 9px 12px; border-radius: 12px; font-size: 13px; line-height: 1.5; background: rgba(255,255,255,.06); } .ask-msg.me .ask-bubble { background: var(--accent); color: #fff; border-bottom-right-radius: 4px; } .ask-msg.ai .ask-bubble { border-bottom-left-radius: 4px; } .ask-bubble p { margin: 0 0 6px; } .ask-bubble p:last-child { margin: 0; } .ask-ul { margin: 4px 0 6px; padding-left: 18px; } .ask-ul li { margin: 2px 0; } .ask-think { display: flex; align-items: center; gap: 8px; color: var(--muted); } .ask-compose { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--border); align-items: flex-end; } .ask-input { flex: 1; resize: none; min-height: 36px; max-height: 120px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border-strong); background: rgba(0,0,0,.25); color: var(--text); font: inherit; font-size: 13px; outline: 0; } .ask-input:focus { border-color: var(--accent); } .sh-nav[data-nav="ask"] svg { color: var(--accent); } @media (max-width: 720px) { .sh-nav[data-nav="chat"] { display: none; } } /* PWA install entry: only shown when the browser says the app is installable and it isn't already installed */ .sh-install { display: none; } [data-installable="1"] .sh-install { display: flex; } @media (display-mode: standalone) { .sh-install { display: none !important; } } /* 5.0 first-run welcome */ .sh-welcome { border: 1px solid var(--accent); background: rgba(34,211,238,.06); border-radius: 12px; padding: 14px 16px; margin-bottom: 14px; display: flex; flex-direction: column; gap: 8px; } .sh-welcome-t { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; } .sh-welcome-t svg { width: 18px; height: 18px; color: var(--accent); } .sh-welcome-s { font-size: 13px; color: var(--muted); line-height: 1.5; } /* Ask: action confirmation cards */ .ask-card { margin-left: 32px; border: 1px solid var(--accent); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; background: rgba(34,211,238,.06); } .ask-card-t { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; } .ask-card-t svg { width: 16px; height: 16px; color: var(--accent); } .ask-card-status { font-size: 12px; color: var(--muted); } .ask-card.done { border-color: var(--good); background: rgba(61,220,132,.07); } .ask-card.done .ask-card-t svg { color: var(--good); } .ask-card.failed { border-color: var(--bad); background: rgba(224,36,94,.07); } .ask-card.cancelled { opacity: .55; border-color: var(--border); background: transparent; } /* 5.1: window frame polish inside the new shell */ [data-shell="new"] .win { border-radius: 14px; box-shadow: 0 24px 70px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.06); overflow: hidden; } [data-shell="new"] .win-titlebar { height: 42px; background: rgba(255,255,255,.04); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); font-weight: 600; font-size: 13px; } [data-shell="new"] .win-btn { width: 30px; height: 28px; border-radius: 8px; } [data-shell="new"] .win-btn:hover { background: rgba(255,255,255,.08); } [data-shell="new"] .win-btn.close:hover { background: var(--bad); color: #fff; } [data-shell="new"] .win-body { background: var(--panel-solid); } [data-shell="new"] .win-toolbar { background: rgba(255,255,255,.025); border-bottom: 1px solid var(--border); } [data-theme="light"][data-shell="new"] .win-titlebar { background: rgba(0,0,0,.03); } /* Security Center */ .sc-body { padding: 14px; } .sc-hero { display: flex; align-items: center; gap: 18px; padding: 16px 18px; border-radius: 14px; border: 1px solid var(--border); background: rgba(255,255,255,.04); } .sc-score { text-align: center; min-width: 96px; } .sc-num { font-size: 44px; font-weight: 700; line-height: 1; } .sc-grade { font-size: 12px; color: var(--muted); margin-top: 4px; } .sc-hero.good .sc-num { color: var(--good); } .sc-hero.warn .sc-num { color: var(--warn, #d19a00); } .sc-hero.bad .sc-num { color: var(--bad); } .sc-h { font-size: 15px; font-weight: 600; margin-bottom: 4px; } .sc-issue { display: flex; align-items: flex-start; gap: 10px; padding: 9px 12px; border-radius: 10px; cursor: pointer; border-left: 3px solid transparent; } .sc-issue:hover { background: rgba(255,255,255,.04); } .sc-issue.sev-high { border-left-color: var(--bad); } .sc-issue.sev-med { border-left-color: var(--warn, #d19a00); } .sc-issue.sev-low { border-left-color: var(--faint); } .sc-sev { font-family: var(--mono); font-size: 10px; text-transform: uppercase; padding: 2px 6px; border-radius: 4px; background: rgba(255,255,255,.08); flex: none; margin-top: 2px; } .sev-high .sc-sev { background: rgba(224,36,94,.2); color: var(--bad); } .sev-med .sc-sev { background: rgba(209,154,0,.2); color: var(--warn, #d19a00); } .sc-issue-main { flex: 1; min-width: 0; } .sc-issue-t { font-size: 13px; } .sc-issue-d { font-size: 12px; color: var(--muted); } .sc-area { font-size: 11px; color: var(--faint); flex: none; } .sc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; } .sc-card { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; background: rgba(255,255,255,.03); cursor: pointer; } .sc-card:hover { border-color: var(--accent); } .sc-card-t { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13px; margin-bottom: 8px; } .sc-card-t svg { width: 16px; height: 16px; color: var(--accent); } .sc-kv { display: flex; gap: 10px; justify-content: space-between; font-size: 12px; padding: 3px 0; border-bottom: 1px solid rgba(255,255,255,.04); } .sc-k { color: var(--muted); flex: none; max-width: 48%; } .sc-v { text-align: right; overflow: hidden; text-overflow: ellipsis; } .ask-mic.on { color: var(--bad); animation: pulse 1s ease-in-out infinite; } .ask-speak.on { color: var(--accent); } @keyframes pulse { 50% { opacity: .4; } } .cmsg[data-user="ask"] .cmsg-name, .chat-msg-ask { color: var(--accent); } .fl-day { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; cursor: pointer; } /* Backup: disaster-recovery report (5.2) */ .dr-report { border: 1px solid var(--border, rgba(255,255,255,.12)); border-radius: 10px; padding: 10px 12px; } .dr-head { font-weight: 600; margin-bottom: 8px; } .dr-head.ok { color: var(--good, #34d399); } .dr-head.warn { color: var(--warn, #fbbf24); } .dr-head.bad { color: var(--bad, #f87171); } .dr-item { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; border-top: 1px solid rgba(128,128,128,.15); } .dr-dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 5px; flex: none; background: #9ca3af; } .dr-item.ok .dr-dot { background: #34d399; } .dr-item.warn .dr-dot { background: #fbbf24; } .dr-item.bad .dr-dot { background: #f87171; } .dr-title { font-weight: 500; font-size: 13px; } /* Automations (5.2) */ .au-body { display: grid; grid-template-columns: 300px 1fr; gap: 14px; padding: 12px; height: calc(100% - 44px); overflow: auto; } .au-list { display: flex; flex-direction: column; gap: 8px; overflow: auto; } .au-rule { border: 1px solid rgba(128,128,128,.25); border-radius: 10px; padding: 10px 12px; cursor: pointer; } .au-rule:hover { background: rgba(128,128,128,.08); } .au-rule.off { opacity: .6; } .au-rule-t { font-weight: 600; margin-bottom: 3px; } .au-edit { overflow: auto; min-width: 0; } .au-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .au-grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; } .au-step { border: 1px solid rgba(128,128,128,.25); border-radius: 10px; padding: 8px 10px; margin-bottom: 8px; } .au-step-h { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; } .au-step-h .hint { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hint.err { color: #f87171; } @media (max-width: 720px) { .au-body { grid-template-columns: 1fr; height: auto; } .au-grid2, .au-grid3 { grid-template-columns: 1fr; } } /* Phones: the 12-column GridStack layouts (public splash + classic dashboard) become one stacked column. Saved coordinates are untouched (edit mode keeps the real grid); this is display-only. */ @media (max-width: 720px) { .grid-stack:not(.editing) { height: auto !important; display: flex; flex-direction: column; gap: 10px; } .grid-stack:not(.editing) > .grid-stack-item { position: static !important; width: 100% !important; height: var(--ph, auto) !important; min-height: 0 !important; left: auto !important; top: auto !important; transform: none !important; margin: 0 !important; transition: none !important; } .grid-stack:not(.editing) > .grid-stack-item > .grid-stack-item-content { position: static !important; height: 100%; } .grid-stack:not(.editing) .ui-resizable-handle { display: none !important; } /* The webcam embed is 16:9 and leaves blank space in a tall card - keep it short on phones. */ .grid-stack:not(.editing) > .grid-stack-item[gs-id="webcam"] { --ph: 300px !important; } .wx-hr { overflow-x: auto; } } /* Settings on phones: the category nav becomes one horizontal chip row instead of a 300px-tall stack. */ @media (max-width: 720px) { .set-body .set-nav { display: block; padding: 8px 10px; border-right: 0; border-bottom: 1px solid var(--border); max-height: none; } .set-body .set-nav .set-search { width: 100%; margin-bottom: 6px; } .set-body .set-nav-list { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; } .set-body .set-nav-group { display: none; } .set-body .set-nav button { width: auto; flex: none; white-space: nowrap; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--border); } .set-body .set-pane { padding: 12px 14px; } .set-foot { flex-wrap: wrap; gap: 6px; } /* drawers (chat / Ask) take the full width */ .chat-drawer, .ask-drawer { width: 100vw; left: 0; right: 0; } } /* Energy (5.4) */ .en-bars { display: flex; gap: 4px; align-items: flex-end; height: 110px; padding: 4px 0; } .en-bar { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; gap: 3px; } .en-fill { width: 100%; background: var(--accent); border-radius: 3px 3px 0 0; min-height: 2px; opacity: .85; } .en-bar span { font-size: 9px; color: var(--faint); } /* Inventory (5.5) */ .inv-body { display: grid; grid-template-columns: 340px 1fr; gap: 14px; padding: 12px; height: calc(100% - 44px); overflow: hidden; } .inv-list { overflow: auto; min-width: 0; } .inv-item { overflow: auto; min-width: 0; } .inv-row { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-radius: 8px; cursor: pointer; } .inv-row:hover { background: rgba(128,128,128,.1); } .inv-row svg { width: 16px; height: 16px; flex: none; opacity: .8; } .inv-row-t { flex: 1; min-width: 0; } .inv-row-t > div:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .inv-code { font-family: var(--mono); font-size: 11px; opacity: .7; letter-spacing: .5px; } .inv-code.big { font-size: 15px; opacity: 1; padding: 3px 8px; border: 1px dashed var(--border-strong); border-radius: 6px; } .inv-head { display: flex; gap: 16px; align-items: flex-start; } .inv-qr { flex: none; background: #fff; padding: 6px; border-radius: 8px; line-height: 0; } .inv-qr svg { width: 120px; height: 120px; } .inv-name { margin: 0 0 2px; font-size: 20px; } .inv-notes { white-space: pre-wrap; padding: 8px 10px; border-radius: 8px; background: rgba(128,128,128,.08); margin-top: 6px; font-size: 13px; } .inv-photos { display: flex; flex-wrap: wrap; gap: 8px; } .inv-photo { position: relative; width: 120px; height: 120px; border-radius: 8px; overflow: hidden; background: #000; } .inv-photo img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; } .inv-photo-x { position: absolute; top: 2px; right: 2px; background: rgba(0,0,0,.5) !important; } .inv-photo-add { height: 120px; width: 120px; flex-direction: column; } .cd-row.link { cursor: pointer; } .cd-row.link:hover .cd-v { color: var(--accent); } @media (max-width: 720px) { .inv-body { grid-template-columns: 1fr; height: auto; overflow: auto; } .inv-list { max-height: 40vh; } .inv-head { flex-direction: column; } } /* Wall panel (5.5): touch-first, big targets */ .wall { position: absolute; inset: 0; display: flex; flex-direction: column; background: #0b1016; color: #e6edf3; user-select: none; -webkit-user-select: none; font-size: 18px; } .wall.night:not(.awake) { filter: brightness(.35); } .wall-top { display: flex; align-items: center; gap: 14px; padding: 10px 18px; border-bottom: 1px solid rgba(255,255,255,.08); } .wall-clock { font-size: 28px; font-weight: 600; letter-spacing: .5px; } .wall-status { flex: 1; font-size: 15px; opacity: .8; } .wall-status.good { color: #34d399; } .wall-status.warn { color: #fbbf24; } .wall-status.bad { color: #f87171; } .wall-stage { flex: 1; overflow: auto; padding: 14px 18px; -webkit-overflow-scrolling: touch; } .wall-nav { display: flex; border-top: 1px solid rgba(255,255,255,.08); background: rgba(0,0,0,.25); } .wall-tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 6px; background: transparent; border: 0; color: #9aa4b2; font-size: 13px; } .wall-tab svg { width: 26px; height: 26px; } .wall-tab.on { color: var(--accent, #22d3ee); } .wall-room { margin-bottom: 20px; } .wall-room h2 { font-size: 15px; text-transform: uppercase; letter-spacing: 1px; opacity: .6; margin: 0 0 10px; } .wall-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; } .wall-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-height: 104px; padding: 14px; border-radius: 14px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); color: inherit; font: inherit; text-align: left; transition: background .15s, transform .05s; } .wall-card:active { transform: scale(.97); } .wall-card svg { width: 26px; height: 26px; opacity: .8; } .wall-card > span { font-weight: 600; font-size: 16px; line-height: 1.15; } .wall-card small { font-size: 13px; opacity: .65; } .wall-card.on { background: rgba(251,191,36,.18); border-color: rgba(251,191,36,.5); } .wall-card.on svg { color: #fbbf24; opacity: 1; } .wall-card.on.warn { background: rgba(248,113,113,.18); border-color: rgba(248,113,113,.5); } .wall-card.on.warn svg { color: #f87171; } .wall-card.scene { flex-direction: row; align-items: center; min-height: 64px; } .wall-card.climate { grid-column: span 2; } .wall-card-h { display: flex; align-items: center; gap: 8px; font-weight: 600; } .wall-climate { display: flex; align-items: center; gap: 16px; width: 100%; justify-content: center; } .wall-temp { font-size: 40px; font-weight: 700; } .wall-btn { min-width: 56px; height: 56px; border-radius: 12px; border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.08); color: inherit; font-size: 28px; } .wall-btn.ghost { min-width: 44px; height: 44px; font-size: 18px; background: transparent; border-color: transparent; } .wall-dim { width: 100%; margin-top: 4px; accent-color: #fbbf24; height: 28px; } .wall-card.stat { min-height: 90px; } .wall-card.stat b { font-size: 30px; } .wall-cams { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; } .wall-cam { position: relative; aspect-ratio: 16/9; border-radius: 12px; overflow: hidden; background: #000; } .wall-cam-img { width: 100%; height: 100%; object-fit: cover; } .wall-cam-name { position: absolute; left: 10px; bottom: 8px; background: rgba(0,0,0,.55); padding: 3px 8px; border-radius: 6px; font-size: 13px; } .wall-pop { position: absolute; inset: 0; background: #000; display: flex; align-items: center; justify-content: center; z-index: 5; } .wall-pop-img { max-width: 100%; max-height: 100%; } .wall-pop-name { position: absolute; left: 18px; top: 14px; font-size: 22px; font-weight: 600; text-shadow: 0 1px 4px #000; } .wall-people { display: flex; gap: 14px; flex-wrap: wrap; } .wall-person { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 110px; padding: 12px 6px; border-radius: 14px; background: rgba(255,255,255,.05); opacity: .55; } .wall-person.home { opacity: 1; background: rgba(52,211,153,.14); border: 1px solid rgba(52,211,153,.4); } .wall-person img, .wall-avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; background: rgba(255,255,255,.12); display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 700; } .wall-list { display: flex; flex-direction: column; gap: 8px; } .wall-task, .wall-alert { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 12px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); color: inherit; font: inherit; text-align: left; } .wall-task svg { width: 22px; height: 22px; opacity: .6; } .wall-task:active { background: rgba(52,211,153,.2); } .wall-alert.error { border-color: rgba(248,113,113,.5); } .wall-alert.warn { border-color: rgba(251,191,36,.5); } .wall-alert > span { flex: 1; display: flex; flex-direction: column; } .wall-alert b { font-size: 16px; } .wall-event { display: flex; gap: 12px; padding: 10px 14px; border-radius: 10px; background: rgba(255,255,255,.04); } .wall-event b { min-width: 80px; opacity: .7; } .wall-empty { padding: 40px 20px; text-align: center; opacity: .6; font-size: 16px; } .wall-empty.small { padding: 16px; } @media (max-width: 720px) { .wall-card.climate { grid-column: span 1; } .wall-grid { grid-template-columns: 1fr 1fr; } } /* Screen time (5.5) */ .us-body { padding: 12px 14px; overflow: auto; height: calc(100% - 44px); } .us-person { border: 1px solid rgba(128,128,128,.25); border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; } .us-person-h { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; flex-wrap: wrap; } .us-person-h > div:first-child { flex: 1; min-width: 120px; } .us-big b { font-size: 24px; } .us-big small { display: block; opacity: .7; } .us-hours { display: flex; gap: 2px; height: 46px; align-items: flex-end; } .us-hour { flex: 1; height: 100%; display: flex; align-items: flex-end; } .us-hour-fill { width: 100%; background: var(--accent); border-radius: 2px 2px 0 0; min-height: 1px; opacity: .8; } .us-days { display: flex; gap: 6px; height: 60px; align-items: flex-end; } .us-day { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 2px; } .us-day-fill { width: 100%; background: rgba(128,128,128,.5); border-radius: 3px 3px 0 0; min-height: 1px; } .us-day span { font-size: 9px; opacity: .6; } .us-devs { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; } .us-dev { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; background: rgba(128,128,128,.07); font-size: 13px; } .us-dev small { flex: 1; opacity: .65; } .us-dev .dot { width: 8px; height: 8px; border-radius: 50%; background: #6b7280; } .us-dev.on .dot { background: #34d399; } .en-fill.bad { background: #f87171; } /* NAS app (5.6) */ .nas-body { padding: 12px 14px; overflow: auto; height: calc(100% - 44px); } .nas-hero { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; } .nas-hero h2 { margin: 0; font-size: 18px; } .nas-stats { display: flex; gap: 8px; margin-left: auto; } .nas-stat { min-width: 70px; padding: 6px 10px; border-radius: 8px; background: rgba(128,128,128,.1); text-align: center; } .nas-stat small { display: block; opacity: .6; font-size: 10px; text-transform: uppercase; } .nas-stat b { font-size: 16px; } .nas-stat.bad b { color: #f87171; } .nas-issue { padding: 6px 10px; border-radius: 8px; margin: 3px 0; border-left: 3px solid #fbbf24; background: rgba(251,191,36,.08); font-size: 13px; } .nas-issue.sev-high { border-color: #f87171; background: rgba(248,113,113,.1); } .nas-issue.sev-low { border-color: #6b7280; background: rgba(128,128,128,.08); } .nas-ok { color: #34d399; font-size: 13px; margin: 6px 0; } .nas-row { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 8px; background: rgba(128,128,128,.06); margin: 3px 0; font-size: 13px; } .nas-row-t { flex: 0 0 240px; display: flex; flex-direction: column; min-width: 0; } .nas-row-t .hint { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nas-table { width: 100%; border-collapse: collapse; font-size: 12px; } .nas-table th, .nas-table td { text-align: left; padding: 4px 6px; border-bottom: 1px solid rgba(128,128,128,.15); white-space: nowrap; } .nas-table tr.bad td { color: #f87171; } .nas-pkgs { display: flex; flex-wrap: wrap; gap: 6px; } .nas-pkg { display: flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 999px; background: rgba(128,128,128,.08); font-size: 12px; } .nas-pkg small { opacity: .6; } .nas-pkg .dot, .nas-row .dot { width: 8px; height: 8px; border-radius: 50%; background: #6b7280; flex: none; } .nas-pkg.on .dot, .nas-row .dot.on { background: #34d399; } @media (max-width: 720px) { .nas-row-t { flex: 1 1 100%; } .nas-row { flex-wrap: wrap; } .nas-stats { margin-left: 0; } } /* 5.6 inventory key/value grid */ .cd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 0 16px; } /* ---------------------------------------------------------------- Sign-in screen (5.7) */ .si { position: fixed; inset: 0; z-index: 100000; color: #eef2f7; display: flex; overflow: auto; background: #070b12; font-family: 'Segoe UI Variable', 'Segoe UI', system-ui, -apple-system, sans-serif; animation: si-in .35s ease-out; } .si::before { content: ''; position: absolute; inset: -40px; background: var(--si-img) center/cover no-repeat; filter: blur(18px) brightness(.55) saturate(1.1); transform: scale(1.04); } .si.si-aurora::before { background: radial-gradient(60% 50% at 18% 25%, rgba(34,211,238,.30), transparent 70%), radial-gradient(50% 45% at 82% 70%, rgba(129,140,248,.28), transparent 70%), radial-gradient(45% 40% at 60% 10%, rgba(52,211,153,.18), transparent 70%), linear-gradient(160deg, #0b1220 0%, #070b12 60%, #0a0f1a 100%); filter: none; animation: si-drift 24s ease-in-out infinite alternate; } .si::after { content: ''; position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 50%, transparent 40%, rgba(0,0,0,.55)); pointer-events: none; } .si.si-done { animation: si-out .26s ease-in forwards; } @keyframes si-in { from { opacity: 0; } to { opacity: 1; } } @keyframes si-out { to { opacity: 0; transform: scale(1.02); } } @keyframes si-drift { from { transform: translate3d(-2%, -1%, 0) scale(1.05); } to { transform: translate3d(2%, 1%, 0) scale(1.08); } } .si-inner { position: relative; z-index: 1; margin: auto; width: min(1080px, 100%); padding: 40px 32px; display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; } .si-left { display: flex; flex-direction: column; gap: 6px; text-shadow: 0 2px 18px rgba(0,0,0,.35); } .si-greet { font-size: 20px; font-weight: 500; opacity: .85; letter-spacing: .2px; } .si-time { font-size: clamp(64px, 9vw, 112px); font-weight: 300; line-height: .95; letter-spacing: -2px; font-variant-numeric: tabular-nums; } .si-date { font-size: 20px; opacity: .8; margin-bottom: 14px; } .si-wx, .si-status { display: flex; align-items: center; gap: 10px; font-size: 15px; opacity: .85; min-height: 24px; } .si-wx-t { font-size: 26px; font-weight: 600; opacity: 1; } .si-led { width: 9px; height: 9px; border-radius: 50%; background: #6b7280; box-shadow: 0 0 10px currentColor; } .si-led.up { background: #34d399; color: #34d399; } .si-led.warn { background: #fbbf24; color: #fbbf24; } .si-led.down { background: #f87171; color: #f87171; } .si-right { display: flex; justify-content: center; } .si-card { width: 100%; max-width: 400px; padding: 30px 28px 22px; border-radius: 22px; background: rgba(15,20,30,.62); border: 1px solid rgba(255,255,255,.10); box-shadow: 0 30px 80px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06); backdrop-filter: blur(24px) saturate(1.3); -webkit-backdrop-filter: blur(24px) saturate(1.3); } .si-card.shake { animation: si-shake .38s; } @keyframes si-shake { 20%, 60% { transform: translateX(-7px); } 40%, 80% { transform: translateX(7px); } } .si-form { display: flex; flex-direction: column; gap: 12px; } .si-head { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; } .si-logo { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; flex: none; background: linear-gradient(135deg, var(--accent, #22d3ee), #818cf8); box-shadow: 0 8px 24px rgba(34,211,238,.35); } .si-logo svg { width: 24px; height: 24px; color: #06121a; stroke: #06121a; } .si-title { font-size: 20px; font-weight: 650; letter-spacing: .2px; } .si-sub { font-size: 13px; opacity: .65; margin-top: 2px; } .si-field { position: relative; display: flex; align-items: center; gap: 10px; height: 50px; padding: 0 14px; border-radius: 13px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); transition: border-color .15s, background .15s, box-shadow .15s; cursor: text; } .si-field:focus-within { border-color: var(--accent, #22d3ee); background: rgba(255,255,255,.09); box-shadow: 0 0 0 4px rgba(34,211,238,.15); } .si-field > svg { width: 18px; height: 18px; opacity: .55; flex: none; } .si-field input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; color: inherit; font: inherit; font-size: 16px; } .si-field input::placeholder { color: rgba(238,242,247,.45); } .si-field input:-webkit-autofill { -webkit-text-fill-color: #eef2f7; transition: background-color 9999s; } .si-eye { border: 0; background: transparent; color: inherit; opacity: .5; padding: 6px; border-radius: 8px; cursor: pointer; display: grid; place-items: center; } .si-eye svg { width: 18px; height: 18px; } .si-eye:hover, .si-eye.on { opacity: 1; } .si-caps { display: none; font-size: 12px; color: #fbbf24; margin-top: -4px; padding-left: 4px; } .si-caps.on { display: block; } .si-btn { position: relative; height: 50px; border: 0; border-radius: 13px; font: inherit; font-size: 16px; font-weight: 650; cursor: pointer; color: #06121a; background: linear-gradient(135deg, var(--accent, #22d3ee), #67e8f9); box-shadow: 0 10px 26px rgba(34,211,238,.30); transition: transform .08s, filter .15s; display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 4px; } .si-btn:hover { filter: brightness(1.07); } .si-btn:active { transform: translateY(1px); } .si-btn:disabled { cursor: progress; filter: saturate(.7) brightness(.9); } .si-spin { display: none; width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(6,18,26,.3); border-top-color: #06121a; animation: si-rot .7s linear infinite; } .loading > .si-spin { display: inline-block; } @keyframes si-rot { to { transform: rotate(360deg); } } .si-or { display: flex; align-items: center; gap: 12px; margin: 14px 0 10px; font-size: 12px; opacity: .5; text-transform: uppercase; letter-spacing: 1px; } .si-or::before, .si-or::after { content: ''; flex: 1; height: 1px; background: rgba(255,255,255,.18); } .si-alt { width: 100%; height: 46px; border-radius: 13px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.04); color: inherit; font: inherit; font-size: 15px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; transition: background .15s; } .si-alt:hover { background: rgba(255,255,255,.09); } .si-alt svg { width: 18px; height: 18px; } .si-alt.loading { opacity: .6; cursor: progress; } .si-err { min-height: 0; font-size: 13.5px; color: #fecaca; background: rgba(248,113,113,.14); border: 1px solid rgba(248,113,113,.35); border-radius: 10px; padding: 9px 12px; } .si-err:empty { display: none; } .si-note { font-size: 14px; opacity: .8; line-height: 1.45; } .si-digits { display: flex; gap: 8px; justify-content: space-between; } .si-digit { width: 100%; max-width: 50px; height: 58px; text-align: center; font-size: 24px; font-weight: 600; border-radius: 12px; color: inherit; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); outline: 0; font-variant-numeric: tabular-nums; } .si-digit:focus { border-color: var(--accent, #22d3ee); box-shadow: 0 0 0 4px rgba(34,211,238,.15); } .si-backup { height: 50px; padding: 0 14px; border-radius: 13px; font: inherit; font-size: 16px; letter-spacing: 1px; color: inherit; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); outline: 0; } .si-foot { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 16px; text-align: center; } .si-link { border: 0; background: transparent; color: var(--accent, #22d3ee); font: inherit; font-size: 13.5px; cursor: pointer; padding: 4px; } .si-link:hover { text-decoration: underline; } .si-hint { font-size: 12px; opacity: .5; } html.si-open body { overflow: hidden; } @media (max-width: 820px) { .si-inner { grid-template-columns: 1fr; gap: 22px; padding: 28px 18px 32px; } .si-left { align-items: center; text-align: center; } .si-time { font-size: 64px; } .si-date { font-size: 16px; margin-bottom: 6px; } .si-greet { font-size: 16px; } .si-wx, .si-status { justify-content: center; font-size: 14px; } .si-card { padding: 24px 20px 18px; border-radius: 20px; } } @media (max-height: 560px) and (max-width: 820px) { .si-left { display: none; } } @media (prefers-reduced-motion: reduce) { .si, .si::before, .si-card.shake { animation: none !important; } } /* Sign-in widgets (5.7) */ .si-left { gap: 18px; } .si-clock { display: flex; flex-direction: column; gap: 4px; } .si-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 520px; } .si-cards:empty { display: none; } .si-w { position: relative; overflow: hidden; border-radius: 18px; padding: 14px 16px; min-height: 92px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10); backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); box-shadow: 0 10px 30px rgba(0,0,0,.25); text-shadow: none; animation: si-card-in .5s ease-out both; } .si-w:nth-child(2) { animation-delay: .06s; } .si-w:nth-child(3) { animation-delay: .12s; } .si-w:nth-child(4) { animation-delay: .18s; } .si-w:nth-child(5) { animation-delay: .24s; } @keyframes si-card-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .si-w-wide { grid-column: 1 / -1; } .si-w-k { font-size: 11.5px; text-transform: uppercase; letter-spacing: 1.2px; opacity: .6; margin-bottom: 6px; } .si-w-big { font-size: 34px; font-weight: 300; line-height: 1; letter-spacing: -1px; } .si-w-sub { font-size: 13px; opacity: .7; margin-top: 4px; } .si-w-v { font-size: 15px; font-weight: 500; } .si-w-row { display: flex; align-items: center; gap: 10px; } .si-w-title { font-weight: 650; font-size: 15px; margin-bottom: 4px; } .si-w-text { font-size: 14px; line-height: 1.5; opacity: .9; white-space: pre-wrap; } .si-w-msg { border-left: 3px solid #38bdf8; } .si-w-msg.tone-good { border-left-color: #34d399; } .si-w-msg.tone-warn { border-left-color: #fbbf24; } .si-w-photo, .si-w-cam { padding: 0; min-height: 0; } .si-w-photo img, .si-w-cam img, .si-w-cam iframe { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; border: 0; background: #000; } .si-w-cam img.err { opacity: .15; } .si-w-cap { position: absolute; left: 10px; bottom: 10px; display: flex; align-items: center; gap: 8px; font-size: 12.5px; padding: 4px 10px; border-radius: 999px; background: rgba(0,0,0,.5); backdrop-filter: blur(6px); } .si-live { width: 7px; height: 7px; border-radius: 50%; background: #f87171; box-shadow: 0 0 8px #f87171; animation: si-pulse 1.6s ease-in-out infinite; } @keyframes si-pulse { 50% { opacity: .35; } } .si-close { position: absolute; top: 16px; right: 16px; z-index: 3; border: 1px solid rgba(255,255,255,.25); background: rgba(0,0,0,.45); color: #fff; font: inherit; font-size: 13px; padding: 8px 14px; border-radius: 999px; cursor: pointer; } .si-preview .si-card { outline: 2px dashed rgba(255,255,255,.18); outline-offset: 6px; } @media (max-width: 820px) { .si-cards { max-width: none; width: 100%; } .si-w { text-align: left; } } @media (max-width: 420px) { .si-cards { grid-template-columns: 1fr; } } /* Settings > Sign-in page editor */ .sie-list { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; } .sie-item { border: 1px solid var(--border, rgba(128,128,128,.25)); border-radius: 12px; padding: 10px 12px; background: rgba(128,128,128,.04); } .sie-head { display: flex; align-items: center; gap: 10px; } .sie-head svg { width: 16px; height: 16px; opacity: .75; } .sie-btns { margin-left: auto; display: flex; gap: 2px; } .sie-fields { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; } .sie-thumb { width: 96px; height: 60px; object-fit: cover; border-radius: 8px; } .sie-warn { font-size: 12.5px; color: #fbbf24; background: rgba(251,191,36,.10); border: 1px solid rgba(251,191,36,.35); border-radius: 8px; padding: 7px 10px; } .sie-add { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; } .sie-add-btn { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; border: 1px dashed var(--border-strong, rgba(128,128,128,.4)); background: transparent; color: inherit; font: inherit; font-size: 13px; cursor: pointer; } .sie-add-btn:hover { background: rgba(128,128,128,.1); border-style: solid; } .sie-add-btn svg { width: 16px; height: 16px; } .sie-add-btn.warn svg { color: #fbbf24; }