From b72afdcee34de9e079b616ccc249086f9cc66214 Mon Sep 17 00:00:00 2001 From: marvin Date: Thu, 17 Sep 2026 20:58:27 -0400 Subject: [PATCH] Remove light theme; complete color/spacing/radius design tokens; section styles.css (v0.13.0) --- README.md | 2 +- ROADMAP.md | 2 + package.json | 2 +- src/public/app.js | 15 +- src/public/features.js | 2 +- src/public/index.html | 7 +- src/public/styles.css | 907 ++++++++++++++++++++++++++++++++++------- src/server.js | 4 +- 8 files changed, 763 insertions(+), 178 deletions(-) diff --git a/README.md b/README.md index 84b5c31..4845c77 100644 --- a/README.md +++ b/README.md @@ -12,7 +12,7 @@ Docker Architectures Caddy - Version + Version

Why Site Gateway · diff --git a/ROADMAP.md b/ROADMAP.md index 2fc1d6c..bed9bf8 100644 --- a/ROADMAP.md +++ b/ROADMAP.md @@ -4,6 +4,8 @@ `v0.12.0` marks a shift from the earlier per-fix `0.11.x` patch numbering to ordinary semantic versioning going forward — a minor bump for a real batch of changes, a patch bump for a targeted fix, rather than incrementing the same trailing number for every single change regardless of size. The product itself has moved well past the original alpha creation flow described in earlier versions of this document — Hosted Sites, Proxy Hosts, Redirect Hosts, and Streaming Hosts are all implemented, along with authentication, access control, certificates, backups, and full dashboard reporting. This document reflects what's actually shipped and what's genuinely still ahead. +`v0.13.0` is a real batch under that same convention, not a targeted fix, even though none of it changes what the app *does*: the in-app light theme has been removed entirely (the app is dark-only now, including the two visitor-facing themed pages -- the default-site 404/welcome/custom-HTML page and the Access-List sign-in page, both previously following the visitor's OS light/dark preference and now fixed dark for consistency with the rest of the app), the full color/spacing/radius design-token system begun in v0.12.0 has been completed (zero hardcoded color literals remain anywhere outside the token definitions), and `styles.css` has been restructured into commented, page-aligned sections matching the convention already used in `app.js`/`features.js`/`server.js`. A handful of small pre-existing bugs (a duplicate CSS custom property, some dead/duplicate rules, a decorative background glow that rendered incorrectly at certain aspect ratios) were also found and fixed along the way. + ## Product direction Site Gateway stays simpler than a general-purpose proxy manager: one dashboard, clear health reporting, and guided setup instead of exposing raw server configuration. **Caddy** remains the managed gateway — Site Gateway stores a small route model and generates/validates Caddy configuration rather than reimplementing certificate and proxy behavior itself. diff --git a/package.json b/package.json index 2e1d9c3..34c69d0 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "site-gateway", - "version": "0.12.0", + "version": "0.13.0", "private": true, "description": "Site Gateway: simple self-hosted website publishing, reverse proxying, and automatic HTTPS.", "type": "module", diff --git a/src/public/app.js b/src/public/app.js index 3ddf613..a3d6200 100644 --- a/src/public/app.js +++ b/src/public/app.js @@ -1,5 +1,5 @@ // ============================================================================ -// app.js -- core client application: state, API helper, theme, dashboard, +// app.js -- core client application: state, API helper, dashboard, // Hosted Sites & Proxy Hosts rendering, routing between views, dialogs (create/ // edit/icon/user/account/MFA), and every event listener for those areas. The // remaining views (Streaming, Redirects, Access Lists, Administration panels) @@ -19,19 +19,6 @@ const proxyAccessLabel = document.querySelector("#proxy-form [name=accessListId] const settingsAccessLabel = document.querySelector("#settings-access-list")?.closest("label"); const settingsTlsLabel = document.querySelector("#settings-form [name=tls]")?.closest("label"); if (settingsAccessLabel && settingsTlsLabel) settingsTlsLabel.before(settingsAccessLabel); document.querySelector("#settings-advanced [name=accessListId]")?.closest("label")?.remove(); -// --- Theme (light/dark/system) ------------------------------------------------- -const systemTheme = window.matchMedia("(prefers-color-scheme: dark)"); - -function applyTheme(preference) { - const effective = preference === "system" ? (systemTheme.matches ? "dark" : "light") : preference; - document.documentElement.dataset.theme = effective; - document.querySelector('meta[name="theme-color"]').content = effective === "dark" ? "#08101d" : "#f3f6fa"; -} -const savedTheme = localStorage.getItem("webserver-theme") || "system"; -$("#theme-select").value = savedTheme; applyTheme(savedTheme); -$("#theme-select").addEventListener("change", event => { localStorage.setItem("webserver-theme", event.target.value); applyTheme(event.target.value); }); -systemTheme.addEventListener("change", () => { if ($("#theme-select").value === "system") applyTheme("system"); }); - // --- API helper ------------------------------------------------------------------ async function api(url, options = {}) { diff --git a/src/public/features.js b/src/public/features.js index 170a859..531d694 100644 --- a/src/public/features.js +++ b/src/public/features.js @@ -106,7 +106,7 @@ function renderDefaultSettings() { function defaultSiteThemedHtml(title, message) { const safeTitle = extendedEscape(title); const safeMessage = extendedEscape(message); - return `${safeTitle}

Site Gateway

${safeTitle}

${safeMessage}

Host. Proxy. Secure.
`; + return `${safeTitle}
Site Gateway

${safeTitle}

${safeMessage}

Host. Proxy. Secure.
`; } // Refreshes the live preview iframe/caption on the Gateway Defaults page to diff --git a/src/public/index.html b/src/public/index.html index 1f7581e..06ee24d 100644 --- a/src/public/index.html +++ b/src/public/index.html @@ -3,11 +3,11 @@ - + Site Gateway - + - + diff --git a/src/public/styles.css b/src/public/styles.css index ad3060f..273247f 100644 --- a/src/public/styles.css +++ b/src/public/styles.css @@ -1,79 +1,491 @@ -:root{--bg:#08101d;--panel:#101a2b;--panel2:#142136;--line:#23334d;--text:#f4f7fb;--muted:#91a0b6;--green:#62e6a7;--blue:#79a9ff;--danger:#ff7185;--warning:#ffbf69;--shadow:0 24px 70px rgba(0,0,0,.35);--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:40px;--radius-sm:9px;--radius-md:12px;--radius-lg:16px;--radius-xl:18px;--font-size-xs:.68rem;--font-size-sm:.78rem;--font-size-md:.82rem;--font-size-base:1rem;--empty-border:#30415e;--toggle-track-off:#344259;--toggle-thumb:#d7deea;--toast-bg:#eef6ff;--toast-text:#0b1626;--toast-error-bg:#ffe1e5;--toast-error-text:#5c0f1a;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color-scheme:dark} -*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 75% -10%,#172b51 0,transparent 35%),var(--bg);background-repeat:no-repeat;background-attachment:fixed;color:var(--text);min-height:100vh}button,input{font:inherit}.hidden{display:none!important}.app-shell{display:grid;grid-template-columns:240px 1fr;min-height:100vh}aside{border-right:1px solid var(--line);padding:28px 20px;display:flex;flex-direction:column;background:rgba(8,16,29,.78);backdrop-filter:blur(20px)}.brand{display:flex;flex-direction:column;align-items:center;gap:12px;font-weight:750;letter-spacing:-.02em;border:0;background:none;padding:0;margin:0;width:100%;cursor:pointer;border-radius:10px;transition:opacity .15s ease}.brand:hover,.brand:focus-visible{opacity:.82}.brand:focus-visible{outline:2px solid var(--green);outline-offset:4px}.brand-icon{width:64px;height:64px;object-fit:contain}.brand-wordmark{width:190px;max-width:100%;height:auto;object-fit:contain;margin-top:0}.brand-stack{display:flex;flex-direction:column;align-items:center;gap:16px}.brand-icon-lg{width:88px;height:88px;object-fit:contain}.brand-wordmark-lg{width:290px;max-width:100%;height:auto;object-fit:contain;margin-top:0}.brand-mark{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;background:linear-gradient(145deg,var(--green),#2fbf91);color:#06251a;font-weight:900;box-shadow:0 10px 30px rgba(98,230,167,.18)}.brand-mark.small{width:34px;height:34px;border-radius:10px}.eyebrow{text-transform:uppercase;letter-spacing:.16em;font-size:.7rem;color:var(--green);font-weight:800;margin:0 0 9px}nav{margin-top:42px}nav button{width:100%;border:0;border-radius:10px;padding:12px;text-align:left;background:transparent;color:var(--muted);display:flex;justify-content:space-between}nav .nav-active{background:var(--panel2);color:var(--text)}nav span{color:var(--green)}.aside-footer{margin-top:auto;padding:16px 10px 0;border-top:1px solid var(--line);display:flex;justify-content:space-between;color:var(--muted);font-size:.85rem}.text-button{border:0;background:none;color:var(--blue);cursor:pointer}main{padding:58px clamp(28px,6vw,88px);max-width:1500px;width:100%;margin:auto}header{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}h1{font-size:clamp(2rem,4vw,3.2rem);letter-spacing:-.045em;margin:0 0 8px;line-height:1}h2{letter-spacing:-.025em}.muted{color:var(--muted);margin:0;line-height:1.6}.button{border:1px solid transparent;border-radius:10px;padding:11px 16px;color:var(--text);font-weight:720;cursor:pointer}.button:disabled{opacity:.55;cursor:wait}.primary{background:var(--green);color:#05251a;box-shadow:0 10px 30px rgba(98,230,167,.13)}.secondary{background:var(--panel2);border-color:var(--line)}.danger{background:var(--danger);color:#2b0710}.wide{width:100%}.summary{display:flex;align-items:center;gap:28px;margin:40px 0 28px;padding:17px 20px;background:rgba(16,26,43,.75);border:1px solid var(--line);border-radius:14px}.summary>div{display:flex;align-items:center;gap:9px;color:var(--muted);font-size:.88rem}.summary strong{color:var(--text)}.port-note{margin-left:auto}.status-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#61708a}.status-dot.running{background:var(--green);box-shadow:0 0 0 4px rgba(98,230,167,.1)}.status-dot.disabled{background:var(--danger);box-shadow:0 0 0 4px rgba(255,113,133,.09)}.status-dot.error,.status-dot.idle{background:var(--warning);box-shadow:0 0 0 4px rgba(255,191,105,.09)}.site-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:18px}.site-card{position:relative;background:linear-gradient(145deg,rgba(20,33,54,.95),rgba(13,23,39,.95));border:1px solid var(--line);border-radius:var(--radius-lg);padding:20px;min-height:220px;box-shadow:0 14px 40px rgba(0,0,0,.14);transition:.2s}.site-card:hover{transform:translateY(-2px);border-color:#344b6e}.card-top,.card-footer,.card-actions{display:flex;align-items:center;justify-content:space-between}.site-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:var(--radius-md);background:#1c3050;color:var(--blue);font-size:var(--font-size-sm);font-weight:850}.site-card h2{margin:27px 0 5px;font-size:1.15rem}.address{margin:0;color:var(--muted);font-family:ui-monospace,monospace;font-size:var(--font-size-md)}.card-footer{position:absolute;left:20px;right:20px;bottom:20px}.status-pill{display:flex;align-items:center;gap:8px;text-transform:capitalize;font-size:var(--font-size-sm);color:var(--muted)}.icon-button,.launch{width:34px;height:34px;border-radius:var(--radius-sm);border:1px solid var(--line);display:grid;place-items:center;background:#101b2e;color:var(--muted);cursor:pointer;text-decoration:none}.menu-wrap{position:relative}.menu{display:none;position:absolute;right:0;top:40px;width:145px;background:#17243a;border:1px solid var(--line);border-radius:10px;padding:6px;box-shadow:var(--shadow);z-index:3}.menu-open .menu{display:block}.menu button{border:0;background:none;color:var(--text);display:block;width:100%;text-align:left;padding:9px;border-radius:7px;cursor:pointer}.menu button:hover{background:#21314b}.menu .danger-text{color:var(--danger)}.toggle{width:39px;height:22px;border:0;border-radius:20px;background:#344259;padding:3px;cursor:pointer;transition:background-color .2s ease}.toggle:disabled{opacity:.7;cursor:wait}.toggle span{display:block;width:16px;height:16px;border-radius:50%;background:#d7deea;transition:transform .2s ease,background-color .2s ease}.toggle.on{background:#278764}.toggle.on span{transform:translateX(17px);background:white}.card-actions{gap:8px}.empty{text-align:center;border:1px dashed #30415e;border-radius:var(--radius-xl);padding:64px 24px}.empty-icon{font-size:2rem;color:var(--green)}.empty h2{margin:14px 0 8px}.empty p{color:var(--muted);margin:0 auto 24px;max-width:430px}.login-shell{min-height:100vh;display:grid;place-items:center;padding:20px}.login-card,.dialog-card{width:min(440px,100%);background:rgba(16,26,43,.96);border:1px solid var(--line);border-radius:var(--radius-xl);padding:30px;box-shadow:var(--shadow)}.login-card .brand-stack{margin-bottom:40px}.login-card h1{font-size:2.25rem}.login-card>.muted{margin-bottom:24px}label{display:block;color:#c7d0de;font-size:var(--font-size-md);font-weight:650;margin:16px 0 0}input{display:block;width:100%;margin-top:7px;border:1px solid var(--line);border-radius:var(--radius-sm);padding:12px;background:#0b1525;color:var(--text);outline:none}input:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(98,230,167,.1)}.login-card .button{margin-top:10px}.login-card .error{margin:0;min-height:.4em}.error{min-height:1.2em;color:var(--danger);font-size:var(--font-size-md)}dialog{border:0;padding:0;background:transparent;color:var(--text);width:min(500px,calc(100% - 28px))}dialog::backdrop{background:rgba(2,7,14,.76);backdrop-filter:blur(5px)}.dialog-card{width:100%}.dialog-card.compact{padding:26px}.dialog-heading{display:flex;justify-content:space-between}.dialog-heading h2,.compact h2{margin:0;font-size:1.65rem}.dropzone{border:1px dashed #3a4d6b;border-radius:var(--radius-md);padding:24px;text-align:center;cursor:pointer}.dropzone input{display:none}.dropzone span,.dropzone strong,.dropzone small{display:block}.upload-icon{font-size:1.5rem;color:var(--green);margin-bottom:7px}.dropzone small,label small{font-weight:400;color:var(--muted);margin-top:5px}.dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:24px}#account-password-form .error{margin:0;min-height:.3em}#account-password-form .dialog-actions{margin-top:8px}.toast{position:fixed;left:50%;bottom:30px;transform:translate(-50%,20px);opacity:0;background:var(--toast-bg);color:var(--toast-text);padding:11px 16px;border-radius:var(--radius-sm);box-shadow:var(--shadow);transition:.2s;pointer-events:none}.toast.show{opacity:1;transform:translate(-50%,0)}.toast.toast-error{background:var(--toast-error-bg);color:var(--toast-error-text)}.update-banner{position:fixed;left:50%;bottom:30px;transform:translate(-50%,0);display:flex;align-items:center;gap:16px;background:#17243a;border:1px solid var(--line);border-radius:var(--radius-md);padding:14px 16px 14px 20px;box-shadow:var(--shadow);z-index:5;color:var(--text);font-size:.88rem}.update-banner-actions{display:flex;align-items:center;gap:8px}.update-banner .button{padding:8px 14px} -@media(max-width:760px){.app-shell{display:block}aside{display:none}main{padding:32px 18px}header{align-items:flex-start;flex-direction:column}.summary{gap:14px;flex-wrap:wrap}.port-note{width:100%;margin:0;padding-top:10px;border-top:1px solid var(--line)}.site-grid{grid-template-columns:1fr}} +/* Design tokens: colors, spacing, radius, type scale */ +:root{--bg:#08101d;--panel:#101a2b;--panel2:#142136;--line:#23334d;--text:#f4f7fb;--muted:#91a0b6;--green:#62e6a7;--blue:#79a9ff;--danger:#ff7185;--warning:#ffbf69;--shadow:0 24px 70px rgba(0,0,0,.35);--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:40px;--radius-sm:9px;--radius-md:12px;--radius-lg:16px;--radius-xl:18px;--radius-2xs:10px;--radius-2xl:14px;--radius-full:999px;--font-size-xs:.68rem;--font-size-sm:.78rem;--font-size-md:.82rem;--empty-border:#30415e;--toggle-track-off:#344259;--toggle-thumb:#d7deea;--toast-bg:#eef6ff;--toast-text:#0b1626;--toast-error-bg:#ffe1e5;--toast-error-text:#5c0f1a;--icon-tile-blue-bg:#1c3050;--icon-tile-blue-fg:#79a9ff;--icon-tile-green-bg:#193d38;--icon-tile-purple-bg:#2b2043;--icon-tile-purple-fg:#cda4ff;--toggle-track-on:#278764;--field-bg:#0b1525;--bg-glow:#172b51;--brand-gradient-end:#2fbf91;--on-green:#05251a;--on-danger:#2b0710;--on-warning:#2b1b05;--status-dot-idle:#61708a;--status-dot-inactive:#718096;--border-hover:#344b6e;--border-hover-alt:#3b5275;--icon-button-bg:#101b2e;--surface-raised:#17243a;--surface-raised-hover:#21314b;--label-color:#c7d0de;--dropzone-border:#3a4d6b;--accent-purple:#b59cff;--icon-tile-teal-bg:#163c35;--white:#fff;--black-rgb:0,0,0;--bg-rgb:8,16,29;--panel-rgb:16,26,43;--panel2-rgb:20,33,54;--card-shade-rgb:13,23,39;--backdrop-rgb:2,7,14;--chip-blue-rgb:94,158,255;--status-dot-idle-rgb:97,112,138;--status-dot-inactive-rgb:113,128,150;--green-rgb:98,230,167;--danger-rgb:255,113,133;--warning-rgb:255,191,105;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color-scheme:dark} + +/* Global resets & base elements */ +*{box-sizing:border-box} +body{margin:0;background:radial-gradient(circle at 75% -10%,var(--bg-glow) 0,transparent 35%),var(--bg);background-repeat:no-repeat;background-attachment:fixed;color:var(--text);min-height:100vh} +button,input{font:inherit} +.hidden{display:none!important} + +/* App shell: sidebar, brand, and primary navigation */ +.app-shell{display:grid;grid-template-columns:240px 1fr;min-height:100vh} +aside{border-right:1px solid var(--line);padding:28px 20px;display:flex;flex-direction:column;background:rgba(var(--bg-rgb),.78);backdrop-filter:blur(20px)} +.brand{display:flex;flex-direction:column;align-items:center;gap:var(--space-3);font-weight:750;letter-spacing:-.02em;border:0;background:none;padding:0;margin:0;width:100%;cursor:pointer;border-radius:var(--radius-2xs);transition:opacity .15s ease} +.brand:hover,.brand:focus-visible{opacity:.82} +.brand:focus-visible{outline:2px solid var(--green);outline-offset:4px} +.brand-icon{width:64px;height:64px;object-fit:contain} +.brand-wordmark{width:190px;max-width:100%;height:auto;object-fit:contain;margin-top:0} +.brand-stack{display:flex;flex-direction:column;align-items:center;gap:var(--space-4)} +.brand-icon-lg{width:88px;height:88px;object-fit:contain} +.brand-wordmark-lg{width:290px;max-width:100%;height:auto;object-fit:contain;margin-top:0} +.brand-mark{width:52px;height:52px;border-radius:var(--radius-2xl);display:grid;place-items:center;background:linear-gradient(145deg,var(--green),var(--brand-gradient-end));color:var(--on-green);font-weight:900;box-shadow:0 10px 30px rgba(var(--green-rgb),.18)} +.brand-mark.small{width:34px;height:34px;border-radius:var(--radius-2xs)} +.eyebrow{text-transform:uppercase;letter-spacing:.16em;font-size:.7rem;color:var(--green);font-weight:800;margin:0 0 9px} +nav{margin-top:42px} +nav button{width:100%;border:0;border-radius:var(--radius-2xs);padding:var(--space-3);text-align:left;background:transparent;color:var(--muted);display:flex;justify-content:space-between} +nav .nav-active{background:var(--panel2);color:var(--text)} +nav span{color:var(--green)} +.aside-footer{margin-top:auto;padding:var(--space-4) 10px 0;border-top:1px solid var(--line);display:flex;justify-content:space-between;color:var(--muted);font-size:.85rem} +.text-button{border:0;background:none;color:var(--blue);cursor:pointer} + +/* Main content area, headings, and buttons */ +main{padding:58px clamp(28px,6vw,88px);max-width:1500px;width:100%;margin:auto} +header{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-5)} +h1{font-size:clamp(2rem,4vw,3.2rem);letter-spacing:-.045em;margin:0 0 var(--space-2);line-height:1} +h2{letter-spacing:-.025em} +.muted{color:var(--muted);margin:0;line-height:1.6} +.button{border:1px solid transparent;border-radius:var(--radius-2xs);padding:11px var(--space-4);color:var(--text);font-weight:720;cursor:pointer} +.button:disabled{opacity:.55;cursor:wait} +.primary{background:var(--green);color:var(--on-green);box-shadow:0 10px 30px rgba(var(--green-rgb),.13)} +.secondary{background:var(--panel2);border-color:var(--line)} +.danger{background:var(--danger);color:var(--on-danger)} +.wide{width:100%} + +/* Top summary bar & status dot indicator */ +.summary{display:flex;align-items:center;gap:28px;margin:var(--space-7) 0 28px;padding:17px 20px;background:rgba(var(--panel-rgb),.75);border:1px solid var(--line);border-radius:var(--radius-2xl)} +.summary>div{display:flex;align-items:center;gap:9px;color:var(--muted);font-size:.88rem} +.summary strong{color:var(--text)} +.port-note{margin-left:auto} +.status-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--status-dot-idle)} +.status-dot.running{background:var(--green);box-shadow:0 0 0 4px rgba(var(--green-rgb),.1)} +.status-dot.disabled{background:var(--danger);box-shadow:0 0 0 4px rgba(var(--danger-rgb),.09)} +.status-dot.error,.status-dot.idle{background:var(--warning);box-shadow:0 0 0 4px rgba(var(--warning-rgb),.09)} + +/* Hosted Site / Proxy Host cards, card menu, and the toggle switch */ +.site-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:18px} +.site-card{position:relative;background:linear-gradient(145deg,rgba(var(--panel2-rgb),.95),rgba(var(--card-shade-rgb),.95));border:1px solid var(--line);border-radius:var(--radius-lg);padding:20px;min-height:220px;box-shadow:0 14px 40px rgba(var(--black-rgb),.14);transition:.2s} +.site-card:hover{transform:translateY(-2px);border-color:var(--border-hover)} +.card-top,.card-footer,.card-actions{display:flex;align-items:center;justify-content:space-between} +.site-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:var(--radius-md);background:var(--icon-tile-blue-bg);color:var(--icon-tile-blue-fg);font-size:var(--font-size-sm);font-weight:850} +.site-card h2{margin:27px 0 5px;font-size:1.15rem} +.address{margin:0;color:var(--muted);font-family:ui-monospace,monospace;font-size:var(--font-size-md)} +.card-footer{position:absolute;left:20px;right:20px;bottom:20px} +.status-pill{display:flex;align-items:center;gap:var(--space-2);text-transform:capitalize;font-size:var(--font-size-sm);color:var(--muted)} +.icon-button,.launch{width:34px;height:34px;border-radius:var(--radius-sm);border:1px solid var(--line);display:grid;place-items:center;background:var(--icon-button-bg);color:var(--muted);cursor:pointer;text-decoration:none} +.menu-wrap{position:relative} +.menu{display:none;position:absolute;right:0;top:var(--space-7);width:145px;background:var(--surface-raised);border:1px solid var(--line);border-radius:var(--radius-2xs);padding:6px;box-shadow:var(--shadow);z-index:3} +.menu-open .menu{display:block} +.menu button{border:0;background:none;color:var(--text);display:block;width:100%;text-align:left;padding:9px;border-radius:7px;cursor:pointer} +.menu button:hover{background:var(--surface-raised-hover)} +.menu .danger-text{color:var(--danger)} +.toggle{width:39px;height:22px;border:0;border-radius:20px;background:var(--toggle-track-off);padding:3px;cursor:pointer;transition:background-color .2s ease} +.toggle:disabled{opacity:.7;cursor:wait} +.toggle span{display:block;width:16px;height:16px;border-radius:50%;background:var(--toggle-thumb);transition:transform .2s ease,background-color .2s ease} +.toggle.on{background:var(--toggle-track-on)} +.toggle.on span{transform:translateX(17px);background:var(--white)} +.card-actions{gap:var(--space-2)} + +/* Empty states */ +.empty{text-align:center;border:1px dashed var(--empty-border);border-radius:var(--radius-xl);padding:64px 24px} +.empty-icon{font-size:2rem;color:var(--green)} +.empty h2{margin:14px 0 8px} +.empty p{color:var(--muted);margin:0 auto var(--space-5);max-width:430px} + +/* Login screen, shared dialogs, forms, toasts, and the update banner */ +.login-shell{min-height:100vh;display:grid;place-items:center;padding:20px} +.login-card,.dialog-card{width:min(440px,100%);background:rgba(var(--panel-rgb),.96);border:1px solid var(--line);border-radius:var(--radius-xl);padding:30px;box-shadow:var(--shadow)} +.login-card .brand-stack{margin-bottom:var(--space-7)} +.login-card h1{font-size:2.25rem} +.login-card>.muted{margin-bottom:var(--space-5)} +label{display:block;color:var(--label-color);font-size:var(--font-size-md);font-weight:650;margin:var(--space-4) 0 0} +input{display:block;width:100%;margin-top:7px;border:1px solid var(--line);border-radius:var(--radius-sm);padding:var(--space-3);background:var(--field-bg);color:var(--text);outline:none} +input:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(var(--green-rgb),.1)} +.login-card .button{margin-top:10px} +.login-card .error{margin:0;min-height:.4em} +.error{min-height:1.2em;color:var(--danger);font-size:var(--font-size-md)} +dialog{border:0;padding:0;background:transparent;color:var(--text);width:min(500px,calc(100% - 28px))} +dialog::backdrop{background:rgba(var(--backdrop-rgb),.76);backdrop-filter:blur(5px)} +.dialog-card{width:100%} +.dialog-card.compact{padding:26px} +.dialog-heading{display:flex;justify-content:space-between} +.dialog-heading h2,.compact h2{margin:0;font-size:1.65rem} +.dropzone{border:1px dashed var(--dropzone-border);border-radius:var(--radius-md);padding:var(--space-5);text-align:center;cursor:pointer} +.dropzone input{display:none} +.dropzone span,.dropzone strong,.dropzone small{display:block} +.upload-icon{font-size:1.5rem;color:var(--green);margin-bottom:7px} +.dropzone small,label small{font-weight:400;color:var(--muted);margin-top:5px} +.dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:var(--space-5)} +#account-password-form .error{margin:0;min-height:.3em} +#account-password-form .dialog-actions{margin-top:var(--space-2)} +.toast{position:fixed;left:50%;bottom:30px;transform:translate(-50%,20px);opacity:0;background:var(--toast-bg);color:var(--toast-text);padding:11px var(--space-4);border-radius:var(--radius-sm);box-shadow:var(--shadow);transition:.2s;pointer-events:none} +.toast.show{opacity:1;transform:translate(-50%,0)} +.toast.toast-error{background:var(--toast-error-bg);color:var(--toast-error-text)} +.update-banner{position:fixed;left:50%;bottom:30px;transform:translate(-50%,0);display:flex;align-items:center;gap:var(--space-4);background:var(--surface-raised);border:1px solid var(--line);border-radius:var(--radius-md);padding:14px var(--space-4) 14px 20px;box-shadow:var(--shadow);z-index:5;color:var(--text);font-size:.88rem} +.update-banner-actions{display:flex;align-items:center;gap:var(--space-2)} +.update-banner .button{padding:var(--space-2) 14px} +@media(max-width:760px){.app-shell{display:block}aside{display:none}main{padding:var(--space-6) 18px}header{align-items:flex-start;flex-direction:column}.summary{gap:14px;flex-wrap:wrap}.port-note{width:100%;margin:0;padding-top:10px;border-top:1px solid var(--line)}.site-grid{grid-template-columns:1fr}} /* Header account controls and state-aware summary indicators */ -.header-actions{display:flex;align-items:center;justify-content:flex-end;gap:12px;flex-wrap:wrap}.theme-control{display:flex;align-items:center;gap:8px;margin:0;padding:7px 9px 7px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--muted);font-size:var(--font-size-sm)}.theme-control select{border:0;background:transparent;color:var(--text);font:inherit;font-weight:700;outline:none;cursor:pointer}.account-control{display:flex;align-items:center;gap:10px;padding:8px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--muted);font-size:var(--font-size-sm)}.account-control strong{color:var(--text)}.status-dot.inactive{background:#718096;box-shadow:0 0 0 4px rgba(113,128,150,.09)} +.header-actions{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-3);flex-wrap:wrap} +.account-control{display:flex;align-items:center;gap:10px;padding:var(--space-2) var(--space-3);border:1px solid var(--line);border-radius:var(--radius-2xs);background:var(--panel);color:var(--muted);font-size:var(--font-size-sm)} +.account-control strong{color:var(--text)} +.status-dot.inactive{background:var(--status-dot-inactive);box-shadow:0 0 0 4px rgba(var(--status-dot-inactive-rgb),.09)} -/* Light theme */ -:root[data-theme="light"]{color-scheme:light;--bg:#f3f6fa;--panel:#fff;--panel2:#e8eef6;--line:#d6dfeb;--text:#132033;--muted:#637188;--green:#138a5b;--blue:#2563ad;--danger:#cf334d;--warning:#c57a08;--shadow:0 24px 70px rgba(34,54,80,.14);--empty-border:#c3d0e0;--toggle-track-off:#aab5c4;--toggle-thumb:#ffffff;--toast-bg:#132033;--toast-text:#f5f8fc;--toast-error-bg:#4a1420;--toast-error-text:#ffd9de} -:root[data-theme="light"] body{background:radial-gradient(circle at 75% -10%,#dfeaff 0,transparent 36%),var(--bg);background-repeat:no-repeat;background-attachment:fixed}:root[data-theme="light"] aside{background:rgba(255,255,255,.82)}:root[data-theme="light"] .site-card{background:linear-gradient(145deg,#fff,#f6f9fc);box-shadow:0 14px 40px rgba(49,71,99,.08)}:root[data-theme="light"] .summary{background:rgba(255,255,255,.82)}:root[data-theme="light"] .site-icon{background:#e5eefb;color:#275c9c}:root[data-theme="light"] .icon-button,:root[data-theme="light"] .launch{background:#f5f8fc}:root[data-theme="light"] .menu{background:#fff}:root[data-theme="light"] .menu button:hover{background:#edf2f8}:root[data-theme="light"] input{background:#fff}:root[data-theme="light"] .login-card,:root[data-theme="light"] .dialog-card{background:rgba(255,255,255,.97)}:root[data-theme="light"] .toggle{background:#aab5c4}:root[data-theme="light"] - -@media(max-width:1050px){header{align-items:flex-start;flex-direction:column}.header-actions{justify-content:flex-start}}@media(max-width:760px){.header-actions{width:100%}.account-control{order:3;width:100%;justify-content:space-between}.summary>div:not(.port-note){min-width:calc(50% - 10px)}} - -nav{display:grid;gap:6px}nav .nav-planned{display:grid;grid-template-columns:1fr auto auto;gap:9px;cursor:default}nav .nav-planned::after{content:"Soon";color:var(--muted);font-size:.62rem;text-transform:uppercase;letter-spacing:.08em}nav .nav-planned span{color:var(--muted)} - -select{display:block;width:100%;margin-top:7px;border:1px solid var(--line);border-radius:var(--radius-sm);padding:12px;background:#0b1525;color:var(--text);outline:none}.theme-control select{display:inline-block;width:auto;margin:0;padding:0;border:0}.optional{float:right;color:var(--muted);font-weight:400}.check-control{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid var(--line);border-radius:10px;background:rgba(8,16,29,.28);cursor:pointer}.check-control input{width:17px;height:17px;margin:0;accent-color:var(--green)}.check-control span{line-height:1.35}.gateway-address{margin:7px 0 0;color:var(--blue);font-size:var(--font-size-sm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.gateway-address.secure::before{content:"TLS · ";color:var(--green);font-weight:700}.site-card.proxy .site-icon{color:#cda4ff;background:#2b2043}:root[data-theme="light"] select{background:#fff}:root[data-theme="light"] .check-control{background:#f6f9fc}:root[data-theme="light"] .site-card.proxy .site-icon{background:#eee5fa;color:#7444a7} - -main{margin:0 auto;align-self:start}input[hidden]{display:none!important} - -main{padding-top:24px}.utility-bar{display:flex;align-items:center;justify-content:flex-end;gap:10px;min-height:38px;margin-bottom:42px}header{align-items:flex-end}@media(max-width:1050px){header{align-items:flex-end;flex-direction:row}}@media(max-width:760px){main{padding-top:18px}.utility-bar{margin-bottom:34px;flex-wrap:wrap}.account-control{order:initial;width:auto}.utility-bar .account-control{width:auto}header{align-items:flex-start;flex-direction:column}} +/* Responsive layout tweaks & base form controls */ +@media(max-width:760px){.header-actions{width:100%}.account-control{order:3;width:100%;justify-content:space-between}.summary>div:not(.port-note){min-width:calc(50% - 10px)}} +nav{display:grid;gap:6px} +nav .nav-planned{display:grid;grid-template-columns:1fr auto auto;gap:9px;cursor:default} +nav .nav-planned::after{content:"Soon";color:var(--muted);font-size:.62rem;text-transform:uppercase;letter-spacing:.08em} +nav .nav-planned span{color:var(--muted)} +select{display:block;width:100%;margin-top:7px;border:1px solid var(--line);border-radius:var(--radius-sm);padding:var(--space-3);background:var(--field-bg);color:var(--text);outline:none} +.optional{float:right;color:var(--muted);font-weight:400} +.check-control{display:flex;align-items:center;gap:10px;padding:var(--space-3);border:1px solid var(--line);border-radius:var(--radius-2xs);background:rgba(var(--bg-rgb),.28);cursor:pointer} +.check-control input{width:17px;height:17px;margin:0;accent-color:var(--green)} +.check-control span{line-height:1.35} +.gateway-address{margin:7px 0 0;color:var(--blue);font-size:var(--font-size-sm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} +.gateway-address.secure::before{content:"TLS · ";color:var(--green);font-weight:700} +.site-card.proxy .site-icon{color:var(--icon-tile-purple-fg);background:var(--icon-tile-purple-bg)} +main{margin:0 auto;align-self:start} +input[hidden]{display:none!important} +main{padding-top:var(--space-5)} +.utility-bar{display:flex;align-items:center;justify-content:flex-end;gap:10px;min-height:38px;margin-bottom:42px} +header{align-items:flex-end} +@media(max-width:1050px){header{align-items:flex-end;flex-direction:row}} +@media(max-width:760px){main{padding-top:18px}.utility-bar{margin-bottom:34px;flex-wrap:wrap}.account-control{order:initial;width:auto}.utility-bar .account-control{width:auto}header{align-items:flex-start;flex-direction:column}} .product-icon{object-fit:contain;background:transparent;box-shadow:none} -.dialog-card input:not([type="checkbox"]):not([type="file"]),.dialog-card select{font:inherit;width:100%;height:44px;min-height:44px;padding:0 12px;line-height:42px;border-width:1px}.aside-footer strong{color:var(--text);font-weight:750} - +.dialog-card input:not([type="checkbox"]):not([type="file"]),.dialog-card select{font:inherit;width:100%;height:44px;min-height:44px;padding:0 var(--space-3);line-height:42px;border-width:1px} +.aside-footer strong{color:var(--text);font-weight:750} /* Dashboard */ -.mobile-nav{display:none}.dashboard-view{margin-top:38px}.metric-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.metric-card{min-width:0;padding:20px;border:1px solid var(--line);border-radius:15px;background:linear-gradient(145deg,rgba(20,33,54,.95),rgba(13,23,39,.95));color:var(--text);text-align:left;position:relative;overflow:hidden}.metric-card::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--card-accent,var(--green));opacity:.85}.metric-card:focus{outline:none}.metric-card:focus-visible{outline:2px solid var(--green);outline-offset:-2px}.metric-card:is(button){cursor:pointer;transition:.2s}.metric-card:is(button):hover{transform:translateY(-2px);border-color:#3b5275;box-shadow:0 16px 40px rgba(0,0,0,.22)}.metric-card.accent-green{--card-accent:var(--green)}.metric-card.accent-blue{--card-accent:var(--blue)}.metric-card .metric-label,.metric-card>span:last-child{display:block}.metric-card .metric-label{color:var(--muted);font-size:var(--font-size-sm);font-weight:700}.metric-card .metric-icon{position:absolute;top:16px;right:16px;width:32px;height:32px;display:grid;place-items:center;border-radius:var(--radius-sm);background:color-mix(in srgb,var(--card-accent,var(--muted)) 20%,transparent);color:var(--card-accent,var(--muted));font-size:.9rem;font-weight:800}.metric-card strong{display:block;margin:13px 0 7px;font-size:2rem;line-height:1}.metric-card>span:last-child{color:var(--muted);font-size:.76rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.metric-card.attention strong{color:var(--warning)}.metric-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:12px}.metric-chip{display:flex;align-items:center;gap:12px;min-width:0;padding:13px 16px;border:1px solid var(--line);border-radius:13px;background:rgba(16,26,43,.76);color:var(--text);text-align:left;position:relative;overflow:hidden;transition:.2s}.metric-chip::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--card-accent,var(--muted));opacity:.9}.metric-chip:is(button){cursor:pointer}.metric-chip:is(button):hover{transform:translateY(-1px);border-color:#3b5275}.metric-chip:focus{outline:none}.metric-chip:focus-visible{outline:2px solid var(--green);outline-offset:-2px}.metric-chip .chip-icon{flex:0 0 auto;width:32px;height:32px;display:grid;place-items:center;border-radius:var(--radius-sm);background:color-mix(in srgb,var(--card-accent,var(--muted)) 20%,transparent);color:var(--card-accent,var(--muted));font-size:.85rem;font-weight:800}.metric-chip .chip-copy{display:flex;flex-direction:column;gap:2px;min-width:0}.metric-chip .metric-label{color:var(--muted);font-size:.72rem;font-weight:700}.metric-chip strong{font-size:1.3rem;line-height:1.1}.metric-chip small{color:var(--muted);font-size:var(--font-size-xs)}.metric-chip.accent-amber{--card-accent:var(--warning)}.metric-chip.accent-purple{--card-accent:#b59cff}.metric-chip.accent-warning{--card-accent:var(--warning)}.metric-chip.accent-warning strong{color:var(--warning)}.metric-chip.accent-green{--card-accent:var(--green)}.metric-chip.accent-green strong{color:var(--green)}.metric-chip.accent-blue{--card-accent:var(--blue)}.dashboard-columns{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px}.dashboard-columns.lower.attention-clear{grid-template-columns:1fr}.dashboard-jobs-slot:not(:empty){margin-top:18px}.dashboard-columns.lower{align-items:start}.dashboard-panel{min-width:0;padding:22px;border:1px solid var(--line);border-radius:var(--radius-lg);background:rgba(16,26,43,.76)}.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:20px}.panel-heading .eyebrow{margin-bottom:5px}.panel-heading h2{margin:0;font-size:1.2rem}.health-badge{padding:6px 9px;border-radius:999px;font-size:.7rem;font-weight:800}.health-badge.healthy{background:rgba(98,230,167,.12);color:var(--green)}.health-badge.warning{background:rgba(255,191,105,.12);color:var(--warning)}.health-badge.error{background:rgba(255,113,133,.12);color:var(--danger)}.health-panel{position:relative;overflow:hidden}.health-panel::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;opacity:.9;transition:background-color .3s ease}.health-panel.status-healthy::before{background:var(--green)}.health-panel.status-warning::before{background:var(--warning)}.health-panel.status-error::before{background:var(--danger)}.health-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.health-tile{display:flex;align-items:center;gap:12px;min-width:0;padding:13px 14px;border:1px solid var(--line);border-radius:var(--radius-md);background:rgba(8,16,29,.28);transition:.2s}.health-tile .status-dot{flex:0 0 auto}.health-tile-copy{display:grid;gap:3px;min-width:0}.health-tile-copy strong{font-size:var(--font-size-md)}.health-tile-copy small{color:var(--muted);font-size:.72rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dashboard-list-item span:last-child{display:grid;gap:3px}.dashboard-list-item small{color:var(--muted);font-size:.75rem}.live-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--green);margin-right:7px;vertical-align:middle;box-shadow:0 0 0 0 rgba(98,230,167,.6);animation:live-pulse 2.2s ease-in-out infinite}.live-dot.checking{background:var(--warning);animation-duration:.9s}@keyframes live-pulse{0%{box-shadow:0 0 0 0 rgba(98,230,167,.5)}70%{box-shadow:0 0 0 6px rgba(98,230,167,0)}100%{box-shadow:0 0 0 0 rgba(98,230,167,0)}}.system-panel{position:relative;overflow:hidden}.system-panel::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--blue);opacity:.85}.system-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0}.system-tile{min-width:0;padding:13px 14px;border:1px solid var(--line);border-radius:var(--radius-md);background:rgba(8,16,29,.28)}.system-grid dt{color:var(--muted);font-size:.72rem}.system-grid dd{margin:6px 0 0;font-size:.9rem;font-weight:750;overflow:hidden;text-overflow:ellipsis}.dashboard-list{display:grid}.dashboard-list-item{display:flex;align-items:flex-start;gap:12px;padding:13px 3px;border-top:1px solid var(--line)}.dashboard-list-item:first-child{border-top:0}.dashboard-list-item strong{font-size:var(--font-size-md)}.dashboard-list-item .status-dot{margin-top:4px;flex:0 0 auto}.activity-mark{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:rgba(98,230,167,.12);color:var(--green);font-size:.7rem;font-weight:900}.quiet-state{color:var(--muted);font-size:var(--font-size-md);margin:3px 0}#attention-list.dashboard-list,#activity-list.dashboard-list{display:grid;gap:10px}.attention-tile{display:flex;align-items:center;gap:12px;min-width:0;padding:13px 14px;border:1px solid var(--line);border-left:3px solid var(--danger);border-radius:var(--radius-md);background:rgba(8,16,29,.28)}.issue-link.attention-tile{cursor:pointer;transition:.2s}.issue-link.attention-tile:hover{background:rgba(255,113,133,.08);border-color:#3b5275}.attention-copy,.activity-copy{display:grid;gap:3px;min-width:0}.attention-copy strong,.activity-copy strong{font-size:var(--font-size-md)}.attention-copy small,.activity-copy small{color:var(--muted);font-size:.72rem}.all-clear{display:flex;align-items:center;gap:10px;padding:13px 14px;border:1px solid var(--line);border-radius:var(--radius-md);background:rgba(98,230,167,.06);font-size:.85rem}.all-clear .status-dot{flex:0 0 auto}.activity-tile{display:flex;align-items:center;gap:12px;min-width:0;padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius-md);background:rgba(8,16,29,.22)} -:root[data-theme="light"] .metric-card{background:linear-gradient(145deg,#fff,#f6f9fc)}:root[data-theme="light"] .metric-chip{background:#f6f9fc}:root[data-theme="light"] .dashboard-panel{background:rgba(255,255,255,.82)}:root[data-theme="light"] .health-tile,:root[data-theme="light"] .system-tile,:root[data-theme="light"] .attention-tile,:root[data-theme="light"] .activity-tile,:root[data-theme="light"] .all-clear{background:#f6f9fc} -@media(max-width:1100px){.metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.system-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:1100px){.metric-strip{grid-template-columns:repeat(2,minmax(0,1fr))}} -@media(max-width:760px){.mobile-nav{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;margin:0 0 30px;padding:4px;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--panel)}.mobile-nav button{justify-content:center;text-align:center;padding:9px 5px;font-size:.72rem}.dashboard-view{margin-top:30px}.metric-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.metric-card{padding:16px}.metric-card strong{font-size:1.65rem}.dashboard-columns{grid-template-columns:1fr}.system-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.metric-strip{grid-template-columns:1fr}.metric-chip{padding:11px 14px}} +.mobile-nav{display:none} +.dashboard-view{margin-top:38px} +.metric-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4)} +.metric-card{min-width:0;padding:20px;border:1px solid var(--line);border-radius:var(--radius-2xl);background:linear-gradient(145deg,rgba(var(--panel2-rgb),.95),rgba(var(--card-shade-rgb),.95));color:var(--text);text-align:left;position:relative;overflow:hidden} +.metric-card::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--card-accent,var(--green));opacity:.85} +.metric-card:focus{outline:none} +.metric-card:focus-visible{outline:2px solid var(--green);outline-offset:-2px} +.metric-card:is(button){cursor:pointer;transition:.2s} +.metric-card:is(button):hover{transform:translateY(-2px);border-color:var(--border-hover-alt);box-shadow:0 16px 40px rgba(var(--black-rgb),.22)} +.metric-card.accent-green{--card-accent:var(--green)} +.metric-card.accent-blue{--card-accent:var(--blue)} +.metric-card .metric-label,.metric-card>span:last-child{display:block} +.metric-card .metric-label{color:var(--muted);font-size:var(--font-size-sm);font-weight:700} +.metric-card .metric-icon{position:absolute;top:var(--space-4);right:var(--space-4);width:32px;height:32px;display:grid;place-items:center;border-radius:var(--radius-sm);background:color-mix(in srgb,var(--card-accent,var(--muted)) 20%,transparent);color:var(--card-accent,var(--muted));font-size:.9rem;font-weight:800} +.metric-card strong{display:block;margin:13px 0 7px;font-size:2rem;line-height:1} +.metric-card>span:last-child{color:var(--muted);font-size:.76rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} +.metric-card.attention strong{color:var(--warning)} +.metric-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-3);margin-top:var(--space-3)} +.metric-chip{display:flex;align-items:center;gap:var(--space-3);min-width:0;padding:13px var(--space-4);border:1px solid var(--line);border-radius:13px;background:rgba(var(--panel-rgb),.76);color:var(--text);text-align:left;position:relative;overflow:hidden;transition:.2s} +.metric-chip::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--card-accent,var(--muted));opacity:.9} +.metric-chip:is(button){cursor:pointer} +.metric-chip:is(button):hover{transform:translateY(-1px);border-color:var(--border-hover-alt)} +.metric-chip:focus{outline:none} +.metric-chip:focus-visible{outline:2px solid var(--green);outline-offset:-2px} +.metric-chip .chip-icon{flex:0 0 auto;width:32px;height:32px;display:grid;place-items:center;border-radius:var(--radius-sm);background:color-mix(in srgb,var(--card-accent,var(--muted)) 20%,transparent);color:var(--card-accent,var(--muted));font-size:.85rem;font-weight:800} +.metric-chip .chip-copy{display:flex;flex-direction:column;gap:2px;min-width:0} +.metric-chip .metric-label{color:var(--muted);font-size:.72rem;font-weight:700} +.metric-chip strong{font-size:1.3rem;line-height:1.1} +.metric-chip small{color:var(--muted);font-size:var(--font-size-xs)} +.metric-chip.accent-amber{--card-accent:var(--warning)} +.metric-chip.accent-purple{--card-accent:var(--accent-purple)} +.metric-chip.accent-warning{--card-accent:var(--warning)} +.metric-chip.accent-warning strong{color:var(--warning)} +.metric-chip.accent-green{--card-accent:var(--green)} +.metric-chip.accent-green strong{color:var(--green)} +.metric-chip.accent-blue{--card-accent:var(--blue)} +.dashboard-columns{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px} +.dashboard-columns.lower.attention-clear{grid-template-columns:1fr} +.dashboard-jobs-slot:not(:empty){margin-top:18px} +.dashboard-columns.lower{align-items:start} +.dashboard-panel{min-width:0;padding:22px;border:1px solid var(--line);border-radius:var(--radius-lg);background:rgba(var(--panel-rgb),.76)} +.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:20px} +.panel-heading .eyebrow{margin-bottom:5px} +.panel-heading h2{margin:0;font-size:1.2rem} +.health-badge{padding:6px 9px;border-radius:var(--radius-full);font-size:.7rem;font-weight:800} +.health-badge.healthy{background:rgba(var(--green-rgb),.12);color:var(--green)} +.health-badge.warning{background:rgba(var(--warning-rgb),.12);color:var(--warning)} +.health-badge.error{background:rgba(var(--danger-rgb),.12);color:var(--danger)} +.health-panel{position:relative;overflow:hidden} +.health-panel::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;opacity:.9;transition:background-color .3s ease} +.health-panel.status-healthy::before{background:var(--green)} +.health-panel.status-warning::before{background:var(--warning)} +.health-panel.status-error::before{background:var(--danger)} +.health-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} +.health-tile{display:flex;align-items:center;gap:var(--space-3);min-width:0;padding:13px 14px;border:1px solid var(--line);border-radius:var(--radius-md);background:rgba(var(--bg-rgb),.28);transition:.2s} +.health-tile .status-dot{flex:0 0 auto} +.health-tile-copy{display:grid;gap:3px;min-width:0} +.health-tile-copy strong{font-size:var(--font-size-md)} +.health-tile-copy small{color:var(--muted);font-size:.72rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} +.dashboard-list-item span:last-child{display:grid;gap:3px} +.dashboard-list-item small{color:var(--muted);font-size:.75rem} +.live-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--green);margin-right:7px;vertical-align:middle;box-shadow:0 0 0 0 rgba(var(--green-rgb),.6);animation:live-pulse 2.2s ease-in-out infinite} +.live-dot.checking{background:var(--warning);animation-duration:.9s} +@keyframes live-pulse{0%{box-shadow:0 0 0 0 rgba(var(--green-rgb),.5)}70%{box-shadow:0 0 0 6px rgba(var(--green-rgb),0)}100%{box-shadow:0 0 0 0 rgba(var(--green-rgb),0)}} +.system-panel{position:relative;overflow:hidden} +.system-panel::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--blue);opacity:.85} +.system-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0} +.system-tile{min-width:0;padding:13px 14px;border:1px solid var(--line);border-radius:var(--radius-md);background:rgba(var(--bg-rgb),.28)} +.system-grid dt{color:var(--muted);font-size:.72rem} +.system-grid dd{margin:6px 0 0;font-size:.9rem;font-weight:750;overflow:hidden;text-overflow:ellipsis} +.dashboard-list{display:grid} +.dashboard-list-item{display:flex;align-items:flex-start;gap:var(--space-3);padding:13px 3px;border-top:1px solid var(--line)} +.dashboard-list-item:first-child{border-top:0} +.dashboard-list-item strong{font-size:var(--font-size-md)} +.dashboard-list-item .status-dot{margin-top:var(--space-1);flex:0 0 auto} +.activity-mark{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:rgba(var(--green-rgb),.12);color:var(--green);font-size:.7rem;font-weight:900} +.quiet-state{color:var(--muted);font-size:var(--font-size-md);margin:3px 0} +#attention-list.dashboard-list,#activity-list.dashboard-list{display:grid;gap:10px} +.attention-tile{display:flex;align-items:center;gap:var(--space-3);min-width:0;padding:13px 14px;border:1px solid var(--line);border-left:3px solid var(--danger);border-radius:var(--radius-md);background:rgba(var(--bg-rgb),.28)} +.issue-link.attention-tile{cursor:pointer;transition:.2s} +.issue-link.attention-tile:hover{background:rgba(var(--danger-rgb),.08);border-color:var(--border-hover-alt)} +.attention-copy,.activity-copy{display:grid;gap:3px;min-width:0} +.attention-copy strong,.activity-copy strong{font-size:var(--font-size-md)} +.attention-copy small,.activity-copy small{color:var(--muted);font-size:.72rem} +.all-clear{display:flex;align-items:center;gap:10px;padding:13px 14px;border:1px solid var(--line);border-radius:var(--radius-md);background:rgba(var(--green-rgb),.06);font-size:.85rem} +.all-clear .status-dot{flex:0 0 auto} +.activity-tile{display:flex;align-items:center;gap:var(--space-3);min-width:0;padding:var(--space-3) 14px;border:1px solid var(--line);border-radius:var(--radius-md);background:rgba(var(--bg-rgb),.22)} -.upstream-copy{margin:10px 0 0;color:var(--green);font-size:.72rem}.upstream-copy.bad{color:var(--danger)}.activity-mark.bad{background:rgba(255,113,133,.12);color:var(--danger)}.feature-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:18px}.feature-summary>div{padding:18px;border:1px solid var(--line);border-radius:14px;background:var(--panel)}.feature-summary strong,.feature-summary span{display:block}.feature-summary strong{font-size:1.55rem}.feature-summary span{margin-top:5px;color:var(--muted);font-size:.76rem}.data-list{border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--panel);overflow:hidden}.data-row{display:grid;grid-template-columns:auto minmax(160px,1.3fr) repeat(2,minmax(150px,1fr));align-items:center;gap:16px;padding:17px 20px;border-top:1px solid var(--line)}.data-row:first-child{border-top:0}.data-row>div{display:grid;gap:4px;min-width:0}.data-row strong{overflow:hidden;text-overflow:ellipsis}.data-row small{color:var(--muted)}.log-toolbar{display:flex;align-items:end;justify-content:space-between;gap:16px}.log-toolbar label{margin:0;min-width:250px}.feature-note{margin:16px 0}.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:15px;background:var(--panel)}.log-table{width:100%;border-collapse:collapse;font-size:var(--font-size-md)}.log-table th,.log-table td{padding:13px 15px;text-align:left;border-top:1px solid var(--line);white-space:nowrap}.log-table thead th{border-top:0;color:var(--muted);font-size:.7rem;text-transform:uppercase;letter-spacing:.06em}.http-status{color:var(--green);font-weight:800}.http-status.bad{color:var(--danger)}.log-activity{margin-top:18px}#performance-view .dashboard-panel+.dashboard-panel{margin-top:18px} +/* Logs, performance charts, and shared list/table components */ +@media(max-width:1100px){.metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.system-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} +@media(max-width:1100px){.metric-strip{grid-template-columns:repeat(2,minmax(0,1fr))}} +@media(max-width:760px){.mobile-nav{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;margin:0 0 30px;padding:var(--space-1);border:1px solid var(--line);border-radius:var(--radius-md);background:var(--panel)}.mobile-nav button{justify-content:center;text-align:center;padding:9px 5px;font-size:.72rem}.dashboard-view{margin-top:30px}.metric-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.metric-card{padding:var(--space-4)}.metric-card strong{font-size:1.65rem}.dashboard-columns{grid-template-columns:1fr}.system-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.metric-strip{grid-template-columns:1fr}.metric-chip{padding:11px 14px}} +.upstream-copy{margin:10px 0 0;color:var(--green);font-size:.72rem} +.upstream-copy.bad{color:var(--danger)} +.activity-mark.bad{background:rgba(var(--danger-rgb),.12);color:var(--danger)} +.feature-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:18px} +.feature-summary>div{padding:18px;border:1px solid var(--line);border-radius:var(--radius-2xl);background:var(--panel)} +.feature-summary strong,.feature-summary span{display:block} +.feature-summary strong{font-size:1.55rem} +.feature-summary span{margin-top:5px;color:var(--muted);font-size:.76rem} +.data-list{border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--panel);overflow:hidden} +.data-row{display:grid;grid-template-columns:auto minmax(160px,1.3fr) repeat(2,minmax(150px,1fr));align-items:center;gap:var(--space-4);padding:17px 20px;border-top:1px solid var(--line)} +.data-row:first-child{border-top:0} +.data-row>div{display:grid;gap:var(--space-1);min-width:0} +.data-row strong{overflow:hidden;text-overflow:ellipsis} +.data-row small{color:var(--muted)} +.log-toolbar{display:flex;align-items:end;justify-content:space-between;gap:var(--space-4)} +.log-toolbar label{margin:0;min-width:250px} +.feature-note{margin:var(--space-4) 0} +.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:var(--radius-2xl);background:var(--panel)} +.log-table{width:100%;border-collapse:collapse;font-size:var(--font-size-md)} +.log-table th,.log-table td{padding:13px 15px;text-align:left;border-top:1px solid var(--line);white-space:nowrap} +.log-table thead th{border-top:0;color:var(--muted);font-size:.7rem;text-transform:uppercase;letter-spacing:.06em} +.http-status{color:var(--green);font-weight:800} +.http-status.bad{color:var(--danger)} +.log-activity{margin-top:18px} +#performance-view .dashboard-panel+.dashboard-panel{margin-top:18px} .performance-sparkline-wrap{position:relative} .performance-sparkline{width:100%;height:150px;display:block} .performance-sparkline-labels{position:absolute;inset:0;pointer-events:none} .performance-sparkline-labels .axis-label{position:absolute;transform:translateY(-50%);color:var(--muted);font-size:var(--font-size-xs);white-space:nowrap} .performance-sparkline-labels .time-label{position:absolute;bottom:0;color:var(--muted);font-size:var(--font-size-xs);white-space:nowrap} -.performance-sparkline-labels .time-label.time-label-end{transform:translateX(-100%)}.row-highlight{background:rgba(98,230,167,.08)} +.performance-sparkline-labels .time-label.time-label-end{transform:translateX(-100%)} +.row-highlight{background:rgba(var(--green-rgb),.08)} .user-head-actions{display:flex;align-items:center;gap:10px} -[data-admin-panel="backups"]>.dashboard-panel{margin-top:24px} -.user-role-select{appearance:none!important;-webkit-appearance:none!important;height:44px;min-height:44px;width:100%;box-sizing:border-box;padding:0 42px 0 12px;line-height:42px;border:1px solid var(--line);border-radius:var(--radius-sm);background-color:var(--panel);color:var(--text);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23f4f7fb' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:16px} -:root[data-theme="light"] .user-role-select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23132033' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E")} -@media(max-width:760px){.data-row{grid-template-columns:auto 1fr}.data-row>div:nth-of-type(n+2){grid-column:2}.feature-summary{gap:8px}.feature-summary>div{padding:13px}.log-toolbar{align-items:stretch;flex-direction:column}.log-toolbar label{min-width:0}} - +[data-admin-panel="backups"]>.dashboard-panel{margin-top:var(--space-5)} +.user-role-select{appearance:none!important;-webkit-appearance:none!important;height:44px;min-height:44px;width:100%;box-sizing:border-box;padding:0 42px 0 var(--space-3);line-height:42px;border:1px solid var(--line);border-radius:var(--radius-sm);background-color:var(--panel);color:var(--text);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23f4f7fb' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:16px} +@media(max-width:760px){.data-row{grid-template-columns:auto 1fr}.data-row>div:nth-of-type(n+2){grid-column:2}.feature-summary{gap:var(--space-2)}.feature-summary>div{padding:13px}.log-toolbar{align-items:stretch;flex-direction:column}.log-toolbar label{min-width:0}} /* Corrective layout pass: keep controls, indicators, and card footers visually consistent. */ -#log-host{height:44px;min-height:44px;padding:0 12px;line-height:42px;font:inherit}.status-dot{width:8px;min-width:8px;height:8px;min-height:8px;aspect-ratio:1;border-radius:50%;flex:0 0 8px}.site-card{min-height:245px;padding-bottom:76px}.site-card .card-footer{min-height:34px}.upstream-copy{margin:12px 0 8px;line-height:1.45} +#log-host{height:44px;min-height:44px;padding:0 var(--space-3);line-height:42px;font:inherit} +.status-dot{width:8px;min-width:8px;height:8px;min-height:8px;aspect-ratio:1;border-radius:50%;flex:0 0 8px} +.site-card{min-height:245px;padding-bottom:76px} +.site-card .card-footer{min-height:34px} +.upstream-copy{margin:var(--space-3) 0 var(--space-2);line-height:1.45} -.role-callout{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;padding:18px 20px;margin-bottom:18px;border:1px solid var(--line);border-radius:14px;background:var(--panel);font-size:.8rem}.role-callout span{color:var(--muted)}.user-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:18px}.user-card{padding:20px;border:1px solid var(--line);border-radius:var(--radius-lg);background:linear-gradient(145deg,rgba(20,33,54,.95),rgba(13,23,39,.95))}.user-card-head{display:flex;align-items:center;justify-content:space-between}.user-avatar{width:42px;height:42px;display:grid;place-items:center;border-radius:var(--radius-md);background:#1c3050;color:var(--blue);font-size:var(--font-size-sm);font-weight:850}.user-card h2{margin:20px 0 5px;font-size:1.12rem}.user-card h2 small{padding:3px 6px;margin-left:5px;border-radius:999px;background:var(--panel2);color:var(--muted);font-size:.62rem;vertical-align:middle}.user-meta{display:grid;gap:5px;margin:18px 0;color:var(--muted);font-size:.75rem}.user-meta span:first-child{color:var(--text);font-weight:750}.user-actions{display:flex;flex-wrap:wrap;gap:8px}.user-actions .button{padding:8px 10px;font-size:.72rem}.danger-text{color:var(--danger)!important}:root[data-theme="light"] .user-card{background:linear-gradient(145deg,#fff,#f6f9fc)} -@media(max-width:760px){.mobile-nav{grid-template-columns:repeat(3,1fr)}.role-callout{grid-template-columns:1fr}.role-callout strong:not(:first-child){margin-top:8px}.user-grid{grid-template-columns:1fr}} +/* Users & Groups: role callouts and user cards */ +.role-callout{display:grid;grid-template-columns:auto 1fr;gap:var(--space-2) var(--space-4);padding:18px 20px;margin-bottom:18px;border:1px solid var(--line);border-radius:var(--radius-2xl);background:var(--panel);font-size:.8rem} +.role-callout span{color:var(--muted)} +.user-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:18px} +.user-card{padding:20px;border:1px solid var(--line);border-radius:var(--radius-lg);background:linear-gradient(145deg,rgba(var(--panel2-rgb),.95),rgba(var(--card-shade-rgb),.95))} +.user-card-head{display:flex;align-items:center;justify-content:space-between} +.user-avatar{width:42px;height:42px;display:grid;place-items:center;border-radius:var(--radius-md);background:var(--icon-tile-blue-bg);color:var(--blue);font-size:var(--font-size-sm);font-weight:850} +.user-card h2{margin:20px 0 5px;font-size:1.12rem} +.user-card h2 small{padding:3px 6px;margin-left:5px;border-radius:var(--radius-full);background:var(--panel2);color:var(--muted);font-size:.62rem;vertical-align:middle} +.user-meta{display:grid;gap:5px;margin:18px 0;color:var(--muted);font-size:.75rem} +.user-meta span:first-child{color:var(--text);font-weight:750} +.user-actions{display:flex;flex-wrap:wrap;gap:var(--space-2)} +.user-actions .button{padding:var(--space-2) 10px;font-size:.72rem} +.danger-text{color:var(--danger)!important} +@media(max-width:760px){.mobile-nav{grid-template-columns:repeat(3,1fr)}.role-callout{grid-template-columns:1fr}.role-callout strong:not(:first-child){margin-top:var(--space-2)}.user-grid{grid-template-columns:1fr}} @media(max-width:420px){.metric-grid{grid-template-columns:1fr}.system-grid{grid-template-columns:1fr 1fr}.health-grid{grid-template-columns:1fr}} - /* Health, menus, and locally cached service icons */ -.health-actions{display:flex;align-items:center;gap:8px}.health-actions .icon-button{width:29px;height:29px;font-size:1rem}.checked-time{margin:14px 0 0;padding-top:13px;border-top:1px solid var(--line);color:var(--muted);font-size:.7rem}.spinning{animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.system-grid small{display:block;margin-top:4px;color:var(--muted);font-size:.65rem;line-height:1.35}.site-icon{overflow:hidden;padding:7px}.site-icon img{display:block;width:100%;height:100%;object-fit:contain}.menu button:focus-visible,.icon-choice:focus-visible{outline:2px solid var(--green);outline-offset:1px}.icon-dialog{width:min(720px,calc(100% - 28px))}.icon-picker{max-width:none}.icon-picker>.muted{margin-top:10px}.icon-results{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px;min-height:112px;max-height:330px;margin-top:16px;padding:2px;overflow:auto}.icon-results>.quiet-state{grid-column:1/-1;padding:28px 0;text-align:center}.icon-choice{display:grid;place-items:center;gap:8px;min-width:0;padding:12px 7px;border:1px solid var(--line);border-radius:11px;background:var(--panel2);color:var(--text);cursor:pointer}.icon-choice:hover{border-color:var(--green)}.icon-choice img{width:42px;height:42px;object-fit:contain}.icon-choice span{width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--font-size-xs)}:root[data-theme="light"] .icon-choice{background:#f6f9fc} +.health-actions{display:flex;align-items:center;gap:var(--space-2)} +.health-actions .icon-button{width:29px;height:29px;font-size:1rem} +.checked-time{margin:14px 0 0;padding-top:13px;border-top:1px solid var(--line);color:var(--muted);font-size:.7rem} +.spinning{animation:spin .8s linear infinite} +@keyframes spin{to{transform:rotate(360deg)}} +.system-grid small{display:block;margin-top:var(--space-1);color:var(--muted);font-size:.65rem;line-height:1.35} +.site-icon{overflow:hidden;padding:7px} +.site-icon img{display:block;width:100%;height:100%;object-fit:contain} +.menu button:focus-visible,.icon-choice:focus-visible{outline:2px solid var(--green);outline-offset:1px} +.icon-dialog{width:min(720px,calc(100% - 28px))} +.icon-picker{max-width:none} +.icon-picker>.muted{margin-top:10px} +.icon-results{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px;min-height:112px;max-height:330px;margin-top:var(--space-4);padding:2px;overflow:auto} +.icon-results>.quiet-state{grid-column:1/-1;padding:28px 0;text-align:center} +.icon-choice{display:grid;place-items:center;gap:var(--space-2);min-width:0;padding:var(--space-3) 7px;border:1px solid var(--line);border-radius:11px;background:var(--panel2);color:var(--text);cursor:pointer} +.icon-choice:hover{border-color:var(--green)} +.icon-choice img{width:42px;height:42px;object-fit:contain} +.icon-choice span{width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--font-size-xs)} @media(max-width:600px){.icon-results{grid-template-columns:repeat(3,minmax(0,1fr))}.icon-picker .dialog-actions{flex-wrap:wrap}.icon-picker .dialog-actions button:first-child{width:100%}} - /* Administration, documentation, redirects, and progressive disclosure */ -.aside-utilities{margin-top:auto;padding:16px 0 14px;border-top:1px solid var(--line);display:grid;gap:4px}.aside-utilities button{width:100%;border:0;border-radius:10px;padding:11px 12px;text-align:left;background:transparent;color:var(--muted);cursor:pointer}.aside-utilities button:hover,.aside-utilities button.nav-active{background:var(--panel2);color:var(--text)}.aside-footer{margin-top:0}.admin-tabs{display:flex;gap:7px;margin-bottom:22px;padding:5px;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--panel);overflow:auto}.admin-tabs button{width:auto;white-space:nowrap;padding:9px 12px;border:0;border-radius:8px;background:transparent;color:var(--muted);cursor:pointer}.admin-tabs .tab-active{background:var(--panel2);color:var(--text)}.settings-panel{max-width:980px}.settings-panel-wide{max-width:1280px}.default-site-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,520px);gap:24px;align-items:start}.default-site-preview{margin-top:22px;padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--panel);position:sticky;top:20px;height:calc(100vh - 40px);display:flex;flex-direction:column;min-height:360px}.default-site-preview .eyebrow{margin:0;flex:none}.default-site-preview small{display:block;margin-top:10px;color:var(--muted);flex:none}.default-site-preview-frame-wrap{margin-top:10px;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#08101d;flex:1;min-height:220px}.default-site-preview-frame-wrap iframe{width:100%;height:100%;border:0;background:#08101d;display:block}@media(max-width:860px){.default-site-layout{grid-template-columns:1fr}.default-site-preview{position:static;height:auto}.default-site-preview-frame-wrap{aspect-ratio:4/3}}.settings-panel>h2{margin:0 0 6px}.settings-form{display:grid;grid-template-columns:1fr 1fr;gap:0 18px;margin-top:22px;padding:22px;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--panel)}.settings-form>label:has(textarea),.settings-form>.dialog-actions,.settings-form>.error{grid-column:1/-1}.settings-form.compact-grid{grid-template-columns:repeat(4,1fr)}.settings-form.compact-grid .check-control,.settings-form.compact-grid .dialog-actions{grid-column:auto}textarea{display:block;width:100%;min-height:110px;margin-top:7px;padding:12px;border:1px solid var(--line);border-radius:var(--radius-sm);background:#0b1525;color:var(--text);font:inherit;resize:vertical;outline:none}textarea:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(98,230,167,.1)}.code-input{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:var(--font-size-sm);min-height:150px}.callout{display:flex;gap:10px;margin:18px 0;padding:16px 18px;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--panel2);font-size:var(--font-size-sm)}.callout span{color:var(--muted)}.row-actions{display:flex!important;grid-auto-flow:column!important;justify-content:end;gap:7px}.row-actions .button{padding:8px 10px;font-size:.7rem;text-decoration:none}.backup-row{grid-template-columns:auto minmax(220px,1.5fr) 1fr .7fr auto}.padded{padding:22px}.redirect-card .site-icon{background:#163c35;color:var(--green)}.redirect-card .card-footer{gap:12px}.redirect-card .button{padding:7px 9px;font-size:var(--font-size-xs)}.chip{padding:5px 8px;border-radius:999px;background:var(--panel2);color:var(--muted);font-size:var(--font-size-xs)}.chip.type-complete{background:rgba(98,230,167,.15);color:var(--green)}.chip.type-configuration{background:var(--panel2);color:var(--muted)}.chip.type-encrypted{background:rgba(94,158,255,.15);color:var(--blue)}.chip.type-unknown{background:rgba(255,113,133,.12);color:var(--danger)}.backup-summary{display:block;margin-top:6px}details{margin-top:18px;border:1px solid var(--line);border-radius:var(--radius-md);background:rgba(8,16,29,.28)}summary{padding:14px 16px;color:var(--text);font-weight:750;cursor:pointer}.details-body{padding:0 16px 16px;border-top:1px solid var(--line)}.subform{margin-top:18px;padding:16px;border:1px solid var(--line);border-radius:var(--radius-md)}.docs{display:grid;grid-template-columns:260px 1fr;gap:24px}.doc-search{position:sticky;top:20px;align-self:start;margin:0}.docs-content{display:grid;gap:14px}.docs article{padding:25px;border:1px solid var(--line);border-radius:15px;background:var(--panel)}.docs article h2{margin:0 0 10px}.docs article p,.docs article li{color:var(--muted);line-height:1.65}.docs article code{color:var(--green)}:root[data-theme="light"] textarea{background:#fff}:root[data-theme="light"] details{background:#f6f9fc} -@media(max-width:900px){.settings-form.compact-grid{grid-template-columns:1fr 1fr}.settings-form .form-grid{grid-template-columns:1fr 1fr}.backup-row{grid-template-columns:auto 1fr}.backup-row>div{grid-column:2}.row-actions{justify-content:start}.docs{grid-template-columns:1fr}.doc-search{position:static}}@media(max-width:600px){.settings-form,.settings-form.compact-grid{grid-template-columns:1fr}.settings-form .form-grid{grid-template-columns:1fr}.settings-form>*{grid-column:1!important}.admin-tabs{margin-left:-5px;margin-right:-5px}} -#custom-certificate-fields,.custom-certificate-fields{display:none;margin-top:16px;padding:14px;border:1px solid var(--line);border-radius:var(--radius-md)}.custom-certificate-visible{display:block!important} +.aside-utilities{margin-top:auto;padding:var(--space-4) 0 14px;border-top:1px solid var(--line);display:grid;gap:var(--space-1)} +.aside-utilities button{width:100%;border:0;border-radius:var(--radius-2xs);padding:11px var(--space-3);text-align:left;background:transparent;color:var(--muted);cursor:pointer} +.aside-utilities button:hover,.aside-utilities button.nav-active{background:var(--panel2);color:var(--text)} +.aside-footer{margin-top:0} + +/* Administration tab bar */ +.admin-tabs{display:flex;gap:7px;margin-bottom:22px;padding:5px;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--panel);overflow:auto} +.admin-tabs button{width:auto;white-space:nowrap;padding:9px var(--space-3);border:0;border-radius:8px;background:transparent;color:var(--muted);cursor:pointer} +.admin-tabs .tab-active{background:var(--panel2);color:var(--text)} + +/* Settings panels & Gateway Defaults live preview */ +.settings-panel{max-width:980px} +.settings-panel-wide{max-width:1280px} +.default-site-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,520px);gap:var(--space-5);align-items:start} +.default-site-preview{margin-top:22px;padding:var(--space-4);border:1px solid var(--line);border-radius:var(--radius-2xl);background:var(--panel);position:sticky;top:20px;height:calc(100vh - 40px);display:flex;flex-direction:column;min-height:360px} +.default-site-preview .eyebrow{margin:0;flex:none} +.default-site-preview small{display:block;margin-top:10px;color:var(--muted);flex:none} +.default-site-preview-frame-wrap{margin-top:10px;border:1px solid var(--line);border-radius:var(--radius-2xs);overflow:hidden;background:var(--bg);flex:1;min-height:220px} +.default-site-preview-frame-wrap iframe{width:100%;height:100%;border:0;background:var(--bg);display:block} +@media(max-width:860px){.default-site-layout{grid-template-columns:1fr}.default-site-preview{position:static;height:auto}.default-site-preview-frame-wrap{aspect-ratio:4/3}} +.settings-panel>h2{margin:0 0 6px} + +/* Generic settings-form layout */ +.settings-form{display:grid;grid-template-columns:1fr 1fr;gap:0 18px;margin-top:22px;padding:22px;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--panel)} +.settings-form>label:has(textarea),.settings-form>.dialog-actions,.settings-form>.error{grid-column:1/-1} +.settings-form.compact-grid{grid-template-columns:repeat(4,1fr)} +.settings-form.compact-grid .check-control,.settings-form.compact-grid .dialog-actions{grid-column:auto} +textarea{display:block;width:100%;min-height:110px;margin-top:7px;padding:var(--space-3);border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--field-bg);color:var(--text);font:inherit;resize:vertical;outline:none} +textarea:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(var(--green-rgb),.1)} +.code-input{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:var(--font-size-sm);min-height:150px} +.callout{display:flex;gap:10px;margin:18px 0;padding:var(--space-4) 18px;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--panel2);font-size:var(--font-size-sm)} +.callout span{color:var(--muted)} +.row-actions{display:flex!important;grid-auto-flow:column!important;justify-content:end;gap:7px} +.row-actions .button{padding:var(--space-2) 10px;font-size:.7rem;text-decoration:none} +.backup-row{grid-template-columns:auto minmax(220px,1.5fr) 1fr .7fr auto} +.padded{padding:22px} + +/* Redirect Host cards & backup type chips */ +.redirect-card .site-icon{background:var(--icon-tile-teal-bg);color:var(--green)} +.redirect-card .card-footer{gap:var(--space-3)} +.redirect-card .button{padding:7px 9px;font-size:var(--font-size-xs)} +.chip{padding:5px var(--space-2);border-radius:var(--radius-full);background:var(--panel2);color:var(--muted);font-size:var(--font-size-xs)} +.chip.type-complete{background:rgba(var(--green-rgb),.15);color:var(--green)} +.chip.type-configuration{background:var(--panel2);color:var(--muted)} +.chip.type-encrypted{background:rgba(var(--chip-blue-rgb),.15);color:var(--blue)} +.chip.type-unknown{background:rgba(var(--danger-rgb),.12);color:var(--danger)} +.backup-summary{display:block;margin-top:6px} + +/* Collapsible details/summary */ +details{margin-top:18px;border:1px solid var(--line);border-radius:var(--radius-md);background:rgba(var(--bg-rgb),.28)} +summary{padding:14px var(--space-4);color:var(--text);font-weight:750;cursor:pointer} +.details-body{padding:0 var(--space-4) var(--space-4);border-top:1px solid var(--line)} +.subform{margin-top:18px;padding:var(--space-4);border:1px solid var(--line);border-radius:var(--radius-md)} + +/* Documentation manual: nav + article layout */ +.docs{display:grid;grid-template-columns:260px 1fr;gap:var(--space-5)} +.doc-search{position:sticky;top:20px;align-self:start;margin:0} +.docs-content{display:grid;gap:14px} +.docs article{padding:25px;border:1px solid var(--line);border-radius:var(--radius-2xl);background:var(--panel)} +.docs article h2{margin:0 0 10px} +.docs article p,.docs article li{color:var(--muted);line-height:1.65} +.docs article code{color:var(--green)} +@media(max-width:900px){.settings-form.compact-grid{grid-template-columns:1fr 1fr}.settings-form .form-grid{grid-template-columns:1fr 1fr}.backup-row{grid-template-columns:auto 1fr}.backup-row>div{grid-column:2}.row-actions{justify-content:start}.docs{grid-template-columns:1fr}.doc-search{position:static}} +@media(max-width:600px){.settings-form,.settings-form.compact-grid{grid-template-columns:1fr}.settings-form .form-grid{grid-template-columns:1fr}.settings-form>*{grid-column:1!important}.admin-tabs{margin-left:-5px;margin-right:-5px}} + +/* First-run admin setup dialog */ +#custom-certificate-fields,.custom-certificate-fields{display:none;margin-top:var(--space-4);padding:14px;border:1px solid var(--line);border-radius:var(--radius-md)} +.custom-certificate-visible{display:block!important} dialog{max-height:calc(100vh - 28px);overflow:auto} -.setup-dialog{width:min(520px,calc(100% - 28px))}.setup-dialog::backdrop{background:rgba(2,7,14,.9)}.setup-card{max-width:none}.setup-card .brand-stack{margin-bottom:36px}.setup-card h1{margin:0 0 10px;font-size:clamp(1.8rem,5vw,2.35rem);letter-spacing:-.04em}.setup-card>.muted{margin-bottom:22px}.setup-card .button{margin-top:20px} -.feature-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:16px}.certificates-view .feature-summary,#certificates-view .feature-summary{grid-template-columns:repeat(5,minmax(0,1fr))}.certificate-row{margin:0;border:0;border-top:1px solid var(--line);border-radius:0;background:transparent}.certificate-row:first-child{border-top:0}.certificate-row summary{display:grid;grid-template-columns:auto minmax(180px,1.2fr) minmax(220px,1fr);align-items:center;gap:16px;padding:18px 20px}.certificate-row summary>span{display:grid;gap:4px}.certificate-row small{color:var(--muted)}.certificate-details{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 22px;margin:0;padding:18px 54px 22px;background:rgba(8,16,29,.22);border-top:1px solid var(--line)}.certificate-details dt{color:var(--muted);font-size:.7rem}.certificate-details dd{margin:5px 0 0;overflow-wrap:anywhere;font-size:.8rem}.readiness-panel{margin-top:18px}.issue-link{width:100%;border:0;background:transparent;color:var(--text);text-align:left;cursor:pointer}.issue-link:hover{background:var(--panel2)}@media(max-width:900px){#certificates-view .feature-summary{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:600px){.feature-toolbar{align-items:stretch;flex-direction:column}.feature-toolbar .row-actions{justify-content:stretch}.feature-toolbar .button{flex:1}.certificate-row summary{grid-template-columns:auto 1fr}.certificate-row summary>span:last-child{grid-column:2}.certificate-details{grid-template-columns:1fr;padding-left:52px}} -.settings-panel{max-width:none}.log-filters{display:flex;align-items:end;gap:12px}.log-filters label{min-width:210px;margin:0}.dashboard-panel>.log-filters{margin-bottom:16px}#log-host,#log-status{width:100%;height:44px;min-height:44px;box-sizing:border-box;padding:0 12px;line-height:42px}.certificate-row summary{cursor:pointer}.certificate-row summary:hover{background:rgba(98,230,167,.06)}.certificate-row summary:focus{outline:none}.certificate-row summary:focus-visible{outline:2px solid var(--green);outline-offset:-2px}.certificate-details .danger-text{color:var(--danger)}#log-last-checked{color:var(--muted)}@media(max-width:760px){.log-filters{align-items:stretch;flex-direction:column}.log-filters label{min-width:0}} -.access-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:18px}.access-card h2{margin-top:20px}.access-card-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:20px}.access-card-stats span{display:grid;gap:4px}.access-card-stats strong{font-size:1.15rem}.access-card-stats small{color:var(--muted);font-size:var(--font-size-xs)}#access-list{border:0;background:transparent;overflow:visible;padding:0}.group-card{min-height:0} -.credential-editor{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}.credential-editor-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.credential-editor-heading strong{font-size:.9rem}.credential-editor>.muted{font-size:.75rem;margin:7px 0}.credential-row{display:grid;grid-template-columns:1fr 1fr auto;align-items:end;gap:8px;margin-top:9px}.credential-row input{margin-top:0}.credential-row .button{padding:10px 11px;font-size:.72rem}@media(max-width:600px){.credential-row{grid-template-columns:1fr 1fr}.credential-row .button{grid-column:2;justify-self:end}} -#app input,#app select,#app textarea{box-sizing:border-box}#app select{height:44px;min-height:44px;padding-top:0;padding-bottom:0;line-height:42px} +.setup-dialog{width:min(520px,calc(100% - 28px))} +.setup-dialog::backdrop{background:rgba(var(--backdrop-rgb),.9)} +.setup-card{max-width:none} +.setup-card .brand-stack{margin-bottom:36px} +.setup-card h1{margin:0 0 10px;font-size:clamp(1.8rem,5vw,2.35rem);letter-spacing:-.04em} +.setup-card>.muted{margin-bottom:22px} +.setup-card .button{margin-top:20px} + +/* Certificates & Domain Readiness */ +.feature-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:var(--space-4)} +.certificates-view .feature-summary,#certificates-view .feature-summary{grid-template-columns:repeat(5,minmax(0,1fr))} +.certificate-row{margin:0;border:0;border-top:1px solid var(--line);border-radius:0;background:transparent} +.certificate-row:first-child{border-top:0} +.certificate-row summary{display:grid;grid-template-columns:auto minmax(180px,1.2fr) minmax(220px,1fr);align-items:center;gap:var(--space-4);padding:18px 20px} +.certificate-row summary>span{display:grid;gap:var(--space-1)} +.certificate-row small{color:var(--muted)} +.certificate-details{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 22px;margin:0;padding:18px 54px 22px;background:rgba(var(--bg-rgb),.22);border-top:1px solid var(--line)} +.certificate-details dt{color:var(--muted);font-size:.7rem} +.certificate-details dd{margin:5px 0 0;overflow-wrap:anywhere;font-size:.8rem} +.readiness-panel{margin-top:18px} +.issue-link{width:100%;border:0;background:transparent;color:var(--text);text-align:left;cursor:pointer} +.issue-link:hover{background:var(--panel2)} +@media(max-width:900px){#certificates-view .feature-summary{grid-template-columns:repeat(2,minmax(0,1fr))}} +@media(max-width:600px){.feature-toolbar{align-items:stretch;flex-direction:column}.feature-toolbar .row-actions{justify-content:stretch}.feature-toolbar .button{flex:1}.certificate-row summary{grid-template-columns:auto 1fr}.certificate-row summary>span:last-child{grid-column:2}.certificate-details{grid-template-columns:1fr;padding-left:52px}} +.settings-panel{max-width:none} + +/* Log filters */ +.log-filters{display:flex;align-items:end;gap:var(--space-3)} +.log-filters label{min-width:210px;margin:0} +.dashboard-panel>.log-filters{margin-bottom:var(--space-4)} +#log-host,#log-status{width:100%;height:44px;min-height:44px;box-sizing:border-box;padding:0 var(--space-3);line-height:42px} +.certificate-row summary{cursor:pointer} +.certificate-row summary:hover{background:rgba(var(--green-rgb),.06)} +.certificate-row summary:focus{outline:none} +.certificate-row summary:focus-visible{outline:2px solid var(--green);outline-offset:-2px} +.certificate-details .danger-text{color:var(--danger)} +#log-last-checked{color:var(--muted)} +@media(max-width:760px){.log-filters{align-items:stretch;flex-direction:column}.log-filters label{min-width:0}} + +/* Access Lists & Groups */ +.access-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:18px} +.access-card h2{margin-top:20px} +.access-card-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:20px} +.access-card-stats span{display:grid;gap:var(--space-1)} +.access-card-stats strong{font-size:1.15rem} +.access-card-stats small{color:var(--muted);font-size:var(--font-size-xs)} +#access-list{border:0;background:transparent;overflow:visible;padding:0} +.group-card{min-height:0} +.credential-editor{margin-top:18px;padding-top:var(--space-4);border-top:1px solid var(--line)} +.credential-editor-heading{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)} +.credential-editor-heading strong{font-size:.9rem} +.credential-editor>.muted{font-size:.75rem;margin:7px 0} +.credential-row{display:grid;grid-template-columns:1fr 1fr auto;align-items:end;gap:var(--space-2);margin-top:9px} +.credential-row input{margin-top:0} +.credential-row .button{padding:10px 11px;font-size:.72rem} +@media(max-width:600px){.credential-row{grid-template-columns:1fr 1fr}.credential-row .button{grid-column:2;justify-self:end}} + +/* Global form-control theming (#app scope) */ +#app input,#app select,#app textarea{box-sizing:border-box} +#app select{height:44px;min-height:44px;padding-top:0;padding-bottom:0;line-height:42px} #app .access-summary{margin:6px 0 0;color:var(--muted);font-size:.72rem} #app .site-icon img{width:100%;height:100%;object-fit:contain;border-radius:inherit} + +/* Proxy upstream diagnostics */ #app .upstream-detail{margin:5px 0 0;color:var(--muted);font-size:var(--font-size-xs);line-height:1.4} -#app .upstream-diagnostics{margin:7px 0 0;border:0;background:transparent}#app .upstream-diagnostics summary{padding:0;color:var(--blue);font-size:var(--font-size-xs);font-weight:700;border:0}#app .upstream-diagnostics .upstream-detail{margin:6px 0 0} -.log-table-wrap{max-height:min(52vh,620px);overflow:auto}.log-table-wrap .log-table thead th{position:sticky;top:0;background:var(--panel);z-index:1}.log-section-heading{margin:20px 0 10px}.log-section-heading h2{margin:0;font-size:1.05rem}.log-section-heading p{margin:4px 0 0;font-size:.76rem}@media(min-width:761px){#dashboard>aside{position:sticky;top:0;height:100vh;max-height:100vh;overflow-y:auto;align-self:start}} -.log-table th:nth-last-child(2),.log-table td:nth-last-child(2),.log-table th:last-child,.log-table td:last-child{position:sticky;background:var(--panel);z-index:2}.log-table th:nth-last-child(2),.log-table td:nth-last-child(2){right:104px;min-width:104px}.log-table th:last-child,.log-table td:last-child{right:0;min-width:104px}.log-table th:nth-last-child(2){box-shadow:-1px 0 0 var(--line)}.log-table td:nth-last-child(2){box-shadow:-1px 0 0 var(--line)} -.log-table-wrap{overflow-x:hidden;overflow-y:auto}.log-table{table-layout:fixed}.log-table th:nth-child(1),.log-table td:nth-child(1){width:190px}.log-table th:nth-child(2),.log-table td:nth-child(2){width:220px}.log-table th:nth-child(4),.log-table td:nth-child(4),.log-table th:nth-child(5),.log-table td:nth-child(5){width:104px}.log-table th:nth-child(3),.log-table td:nth-child(3){white-space:normal;overflow-wrap:anywhere}.log-table th:last-child,.log-table td:last-child{box-shadow:-1px 0 0 var(--line)} +#app .upstream-diagnostics{margin:7px 0 0;border:0;background:transparent} +#app .upstream-diagnostics summary{padding:0;color:var(--blue);font-size:var(--font-size-xs);font-weight:700;border:0} +#app .upstream-diagnostics .upstream-detail{margin:6px 0 0} + +/* Log table layout & column widths */ +.log-table-wrap{max-height:min(52vh,620px);overflow:auto} +.log-table-wrap .log-table thead th{position:sticky;top:0;background:var(--panel);z-index:1} +.log-section-heading{margin:20px 0 10px} +.log-section-heading h2{margin:0;font-size:1.05rem} +.log-section-heading p{margin:var(--space-1) 0 0;font-size:.76rem} +@media(min-width:761px){#dashboard>aside{position:sticky;top:0;height:100vh;max-height:100vh;overflow-y:auto;align-self:start}} +.log-table th:nth-last-child(2),.log-table td:nth-last-child(2),.log-table th:last-child,.log-table td:last-child{position:sticky;background:var(--panel);z-index:2} +.log-table th:nth-last-child(2),.log-table td:nth-last-child(2){right:104px;min-width:104px} +.log-table th:last-child,.log-table td:last-child{right:0;min-width:104px} +.log-table th:nth-last-child(2){box-shadow:-1px 0 0 var(--line)} +.log-table td:nth-last-child(2){box-shadow:-1px 0 0 var(--line)} +.log-table-wrap{overflow-x:hidden;overflow-y:auto} +.log-table{table-layout:fixed} +.log-table th:nth-child(1),.log-table td:nth-child(1){width:190px} +.log-table th:nth-child(2),.log-table td:nth-child(2){width:220px} +.log-table th:nth-child(4),.log-table td:nth-child(4),.log-table th:nth-child(5),.log-table td:nth-child(5){width:104px} +.log-table th:nth-child(3),.log-table td:nth-child(3){white-space:normal;overflow-wrap:anywhere} +.log-table th:last-child,.log-table td:last-child{box-shadow:-1px 0 0 var(--line)} @media(max-width:900px){.log-table th:nth-child(1),.log-table td:nth-child(1){width:150px}.log-table th:nth-child(2),.log-table td:nth-child(2){width:170px}} .log-table th:nth-child(4),.log-table td:nth-child(4),.log-table th:nth-child(5),.log-table td:nth-child(5){text-align:center} #access-dialog .dialog-heading .close-dialog{display:none} + +/* Logs & Retention admin panel */ .control-disabled{opacity:.52} -.retention-form{grid-template-columns:repeat(3,minmax(0,1fr));align-items:start}.retention-form>label{display:grid;align-content:start;gap:7px;min-width:0}.retention-form>label input:not([type="checkbox"]){height:44px;min-height:44px;box-sizing:border-box;margin-top:0}.retention-form .check-control{display:flex;align-items:center;gap:10px;align-self:start!important;height:44px!important;min-height:44px!important;margin:0!important;box-sizing:border-box}.retention-form .dialog-actions{grid-column:1/-1} +.retention-form{grid-template-columns:repeat(3,minmax(0,1fr));align-items:start} +.retention-form>label{display:grid;align-content:start;gap:7px;min-width:0} +.retention-form>label input:not([type="checkbox"]){height:44px;min-height:44px;box-sizing:border-box;margin-top:0} +.retention-form .check-control{display:flex;align-items:center;gap:10px;align-self:start!important;height:44px!important;min-height:44px!important;margin:0!important;box-sizing:border-box} +.retention-form .dialog-actions{grid-column:1/-1} .retention-form>.check-control{margin-top:0!important;transform:none!important;position:relative!important;top:39px!important} .retention-form{position:relative;padding-top:53px!important} .retention-form::before{content:"AUTOMATIC LOG PRUNING";position:absolute;top:30px;left:22px;color:var(--green);font-size:.7rem;line-height:normal;letter-spacing:.16em;font-weight:800} @@ -83,117 +495,263 @@ dialog{max-height:calc(100vh - 28px);overflow:auto} .retention-eyebrow{display:none!important} .retention-actions{justify-content:flex-end!important;align-items:center!important} .retention-actions [data-retention-action="download"]{order:1} -.retention-actions [data-retention-action="prune"]{order:2;background:var(--green);border-color:var(--green);color:#07131f} -.retention-actions .button,[data-admin-panel="backups"] .panel-heading .row-actions .button{min-height:44px;height:44px;padding:11px 16px!important;border-radius:10px;font-size:var(--font-size-md)!important;line-height:1.2;font-weight:720;text-transform:none} -.retention-run-status{grid-column:1/-1;margin:14px 0 0;padding:12px 16px;border:1px solid var(--line);border-radius:10px;background:var(--panel2);color:var(--muted);font-size:var(--font-size-sm);line-height:1.45} -.retention-preview{grid-column:1/-1;margin:14px 0 0;padding:10px 16px;border:1px solid var(--line);border-radius:10px;background:var(--panel2);font-size:var(--font-size-sm);line-height:1.45} -.retention-history{grid-column:1/-1;width:100%;margin:14px 0 0;padding:14px 16px;border:1px solid var(--line);border-radius:10px;background:var(--panel2)}.retention-history-heading{display:flex;justify-content:space-between;color:var(--text);font-size:var(--font-size-md)}.retention-history-heading span{color:var(--muted);font-weight:500}.retention-history-list{max-height:190px;overflow-y:auto;margin-top:8px}.retention-history-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--line)}.retention-history-row strong{display:block;font-size:var(--font-size-sm)}.retention-history-row small{display:block;margin-top:3px;color:var(--muted);font-size:.7rem}.retention-form .dialog-actions .button.primary{background:var(--green);border-color:var(--green);color:#05251a} +.retention-actions [data-retention-action="prune"]{order:2;background:var(--green);border-color:var(--green);color:var(--on-green)} +.retention-actions .button,[data-admin-panel="backups"] .panel-heading .row-actions .button{min-height:44px;height:44px;padding:11px 16px!important;border-radius:var(--radius-2xs);font-size:var(--font-size-md)!important;line-height:1.2;font-weight:720;text-transform:none} +.retention-run-status{grid-column:1/-1;margin:14px 0 0;padding:var(--space-3) var(--space-4);border:1px solid var(--line);border-radius:var(--radius-2xs);background:var(--panel2);color:var(--muted);font-size:var(--font-size-sm);line-height:1.45} +.retention-preview{grid-column:1/-1;margin:14px 0 0;padding:10px var(--space-4);border:1px solid var(--line);border-radius:var(--radius-2xs);background:var(--panel2);font-size:var(--font-size-sm);line-height:1.45} +.retention-history{grid-column:1/-1;width:100%;margin:14px 0 0;padding:14px var(--space-4);border:1px solid var(--line);border-radius:var(--radius-2xs);background:var(--panel2)} +.retention-history-heading{display:flex;justify-content:space-between;color:var(--text);font-size:var(--font-size-md)} +.retention-history-heading span{color:var(--muted);font-weight:500} +.retention-history-list{max-height:190px;overflow-y:auto;margin-top:var(--space-2)} +.retention-history-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--line)} +.retention-history-row strong{display:block;font-size:var(--font-size-sm)} +.retention-history-row small{display:block;margin-top:3px;color:var(--muted);font-size:.7rem} +.retention-form .dialog-actions .button.primary{background:var(--green);border-color:var(--green);color:var(--on-green)} .retention-form{align-content:start!important} -.retention-form .dialog-actions{border-top:0!important;margin-top:0!important;padding-top:16px;padding-bottom:0!important} +.retention-form .dialog-actions{border-top:0!important;margin-top:0!important;padding-top:var(--space-4);padding-bottom:0!important} .backup-settings .form-section:first-child>.eyebrow,.retention-form::before{text-transform:uppercase;letter-spacing:.16em} .retention-form::before{content:"AUTOMATIC LOG PRUNING"} -@media(max-width:900px){.retention-form{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:600px){.retention-form{grid-template-columns:1fr}} -.settings-form select,.settings-form input:not([type="checkbox"]),.settings-form textarea{min-height:44px}.settings-form .check-control{min-height:44px;align-self:end}.settings-form .dialog-actions{align-items:center;padding-top:16px;border-top:1px solid var(--line)}.settings-form.compact-grid .dialog-actions{grid-column:1/-1;justify-content:flex-end}.settings-panel .panel-heading{align-items:flex-end;margin-bottom:18px}.settings-panel .panel-heading .row-actions{align-items:center}.settings-panel .callout{align-items:flex-start} -.settings-form select{display:block;width:100%;height:44px;box-sizing:border-box;padding:0 12px;line-height:42px} -.settings-form input:not([type="checkbox"]):not([type="file"]),.settings-form select,.settings-form textarea{border-radius:var(--radius-sm);border:1px solid var(--line)}.settings-form .check-control{border-radius:10px;border:1px solid var(--line)} -#default-site-form input:not([type="checkbox"]),#default-site-form select{height:44px;min-height:44px;box-sizing:border-box;padding:0 12px;line-height:42px;border-radius:var(--radius-sm)} -#app input:not([type="checkbox"]):not([type="file"]),#app select{height:44px;min-height:44px;box-sizing:border-box;padding:0 12px;line-height:42px;border:1px solid var(--line);border-radius:var(--radius-sm)}#app textarea{box-sizing:border-box;border:1px solid var(--line);border-radius:var(--radius-sm)}#app .check-control{min-height:44px;border:1px solid var(--line);border-radius:10px}#app .event-filters select{height:44px;min-height:44px} -.dialog-card input:not([type="checkbox"]):not([type="file"]),.dialog-card select{height:44px;min-height:44px;box-sizing:border-box;padding:0 12px;line-height:42px;border:1px solid var(--line);border-radius:var(--radius-sm)}.dialog-card textarea{box-sizing:border-box;border:1px solid var(--line);border-radius:var(--radius-sm)}.dialog-card .check-control{min-height:44px;border:1px solid var(--line);border-radius:10px} -#app select,.dialog-card select,.settings-form select,.event-filters select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23f4f7fb' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:16px;padding-right:42px}:root[data-theme="light"] #app select,:root[data-theme="light"] .dialog-card select,:root[data-theme="light"] .settings-form select,:root[data-theme="light"] .event-filters select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23132033' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E")} -.log-filters select{appearance:none!important;height:44px;min-height:44px;box-sizing:border-box;padding:0 42px 0 12px;line-height:42px;border:1px solid var(--line);border-radius:var(--radius-sm);background-color:var(--panel);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23f4f7fb' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:16px}:root[data-theme="light"] .log-filters select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23132033' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E")} -#logs-view .log-filters select{display:block;width:100%;height:44px;min-height:44px;margin-top:7px;padding:0 42px 0 12px;border:1px solid var(--line);border-radius:var(--radius-sm);box-sizing:border-box;line-height:42px;appearance:none!important} -.theme-control select{appearance:auto;background-image:none;padding-right:0} -.theme-control{min-height:44px;padding:0;border:0;background:transparent}.theme-control select{appearance:none!important;height:44px;min-height:44px;width:auto;margin:0;padding:0 42px 0 12px;border:1px solid var(--line);border-radius:var(--radius-sm);background-color:var(--panel);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23f4f7fb' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:16px;color:var(--text)}:root[data-theme="light"] .theme-control select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23132033' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E")} +@media(max-width:900px){.retention-form{grid-template-columns:repeat(2,minmax(0,1fr))}} +@media(max-width:600px){.retention-form{grid-template-columns:1fr}} + +/* Additional form-control theming */ +.settings-form select,.settings-form input:not([type="checkbox"]),.settings-form textarea{min-height:44px} +.settings-form .check-control{min-height:44px;align-self:end} +.settings-form .dialog-actions{align-items:center;padding-top:var(--space-4);border-top:1px solid var(--line)} +.settings-form.compact-grid .dialog-actions{grid-column:1/-1;justify-content:flex-end} +.settings-panel .panel-heading{align-items:flex-end;margin-bottom:18px} +.settings-panel .panel-heading .row-actions{align-items:center} +.settings-panel .callout{align-items:flex-start} +.settings-form select{display:block;width:100%;height:44px;box-sizing:border-box;padding:0 var(--space-3);line-height:42px} +.settings-form input:not([type="checkbox"]):not([type="file"]),.settings-form select,.settings-form textarea{border-radius:var(--radius-sm);border:1px solid var(--line)} +.settings-form .check-control{border-radius:var(--radius-2xs);border:1px solid var(--line)} +#default-site-form input:not([type="checkbox"]),#default-site-form select{height:44px;min-height:44px;box-sizing:border-box;padding:0 var(--space-3);line-height:42px;border-radius:var(--radius-sm)} +#app input:not([type="checkbox"]):not([type="file"]),#app select{height:44px;min-height:44px;box-sizing:border-box;padding:0 var(--space-3);line-height:42px;border:1px solid var(--line);border-radius:var(--radius-sm)} +#app textarea{box-sizing:border-box;border:1px solid var(--line);border-radius:var(--radius-sm)} +#app .check-control{min-height:44px;border:1px solid var(--line);border-radius:var(--radius-2xs)} +#app .event-filters select{height:44px;min-height:44px} +.dialog-card input:not([type="checkbox"]):not([type="file"]),.dialog-card select{height:44px;min-height:44px;box-sizing:border-box;padding:0 var(--space-3);line-height:42px;border:1px solid var(--line);border-radius:var(--radius-sm)} +.dialog-card textarea{box-sizing:border-box;border:1px solid var(--line);border-radius:var(--radius-sm)} +.dialog-card .check-control{min-height:44px;border:1px solid var(--line);border-radius:var(--radius-2xs)} +#app select,.dialog-card select,.settings-form select,.event-filters select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23f4f7fb' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:16px;padding-right:42px} +.log-filters select{appearance:none!important;height:44px;min-height:44px;box-sizing:border-box;padding:0 42px 0 var(--space-3);line-height:42px;border:1px solid var(--line);border-radius:var(--radius-sm);background-color:var(--panel);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23f4f7fb' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:16px} +#logs-view .log-filters select{display:block;width:100%;height:44px;min-height:44px;margin-top:7px;padding:0 42px 0 var(--space-3);border:1px solid var(--line);border-radius:var(--radius-sm);box-sizing:border-box;line-height:42px;appearance:none!important} + +/* Account control (sign out) */ .account-control{min-height:44px;box-sizing:border-box} -.danger-card.caution{border-color:rgba(255,191,105,.6);background:rgba(255,191,105,.07)}.danger-card.caution .eyebrow{color:var(--warning)}.danger-card.caution .button{border-color:rgba(255,191,105,.65);color:var(--text)}#check-health{height:44px;min-height:44px;padding:0 16px;border-radius:10px;box-sizing:border-box} -.danger-zone .danger-card:first-of-type{border-color:rgba(255,191,105,.6);background:rgba(255,191,105,.07)}.danger-zone .danger-card:first-of-type .eyebrow{color:var(--warning)} -.danger-zone .danger-card:first-of-type #restore-defaults{background:var(--warning);color:#2b1b05;border-color:transparent;box-shadow:0 10px 30px rgba(255,191,105,.14)}#check-health{font-size:inherit;font-weight:720} + +/* Danger Zone: factory reset & restore */ +.danger-card.caution{border-color:rgba(var(--warning-rgb),.6);background:rgba(var(--warning-rgb),.07)} +.danger-card.caution .eyebrow{color:var(--warning)} +.danger-card.caution .button{border-color:rgba(var(--warning-rgb),.65);color:var(--text)} +#check-health{height:44px;min-height:44px;padding:0 var(--space-4);border-radius:var(--radius-2xs);box-sizing:border-box} +.danger-zone .danger-card:first-of-type{border-color:rgba(var(--warning-rgb),.6);background:rgba(var(--warning-rgb),.07)} +.danger-zone .danger-card:first-of-type .eyebrow{color:var(--warning)} +.danger-zone .danger-card:first-of-type #restore-defaults{background:var(--warning);color:var(--on-warning);border-color:transparent;box-shadow:0 10px 30px rgba(var(--warning-rgb),.14)} +#check-health{font-size:inherit;font-weight:720} .danger-zone .danger-card:first-of-type .button{margin-top:18px} -.danger-credentials{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 18px;margin-top:12px}.danger-credentials label{margin-top:0}.danger-credentials input{height:44px;min-height:44px;box-sizing:border-box} -.restore-form .danger-credentials{display:contents}.restore-form .danger-credentials label{margin-top:0} +.danger-credentials{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 18px;margin-top:var(--space-3)} +.danger-credentials label{margin-top:0} +.danger-credentials input{height:44px;min-height:44px;box-sizing:border-box} +.restore-form .danger-credentials{display:contents} +.restore-form .danger-credentials label{margin-top:0} .danger-form .button{margin-top:18px} -.danger-form{row-gap:18px}.danger-form label{margin-top:0}.danger-form .button{margin-top:0} -.danger-card .danger-form{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:18px;row-gap:18px;margin-top:18px}.danger-card .danger-form .button{margin-top:0;align-self:start}.danger-card .danger-form .danger-credentials{display:contents} +.danger-form{row-gap:18px} +.danger-form label{margin-top:0} +.danger-form .button{margin-top:0} +.danger-card .danger-form{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:18px;row-gap:18px;margin-top:18px} +.danger-card .danger-form .button{margin-top:0;align-self:start} +.danger-card .danger-form .danger-credentials{display:contents} .danger-card .danger-form .error:empty{display:none} -.danger-card .restore-form{row-gap:18px!important}.danger-card .restore-form .danger-credentials{display:contents;margin:0!important}.danger-card .restore-form .button{margin-top:0!important} -.caution-button{background:var(--warning);color:#2b1b05;border-color:transparent;box-shadow:0 10px 30px rgba(255,191,105,.14)} -.support-panel{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:18px 0;padding:20px 22px;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--panel)}.support-panel h3{margin:0 0 5px;font-size:1.05rem}.support-panel .eyebrow{margin-bottom:6px}.support-note{grid-column:1/-1;margin:0;font-size:.75rem}.support-panel .row-actions{flex:0 0 auto} -#create-backup,#import-backup{height:44px;min-height:44px;padding:0 16px;font-size:var(--font-size-md);font-weight:720;border-radius:10px} -.danger-tab{color:var(--danger)!important}.danger-zone>h2{color:var(--danger)}.danger-card{margin-top:18px;padding:22px;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--panel)}.danger-card h3{margin:0 0 7px}.danger-card p:not(.eyebrow){color:var(--muted);line-height:1.55}.danger-card.destructive{border-color:rgba(255,113,133,.55);background:rgba(255,113,133,.06)}.danger-card.destructive .eyebrow{color:var(--danger)}.danger-form{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 18px;margin-top:18px}.danger-form .error,.danger-form .button{grid-column:1/-1}.danger-form .button{justify-self:start}.danger-form code{color:var(--danger)} -.settings-form .form-section{grid-column:1/-1;padding:4px 0 20px;border-bottom:1px solid var(--line)}.settings-form .form-section+.form-section{padding-top:20px}.settings-form .form-section:last-of-type{border-bottom:0}.settings-form .form-section .eyebrow{margin-bottom:12px}.settings-form .form-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 18px}.settings-form .form-grid .check-control{align-self:end}.settings-form .form-section-wide .check-control{max-width:420px}.backup-settings .dialog-actions{grid-column:1/-1}.backup-settings code{color:var(--green);font-family:ui-monospace,monospace;font-size:var(--font-size-sm)} -#backup-settings-form select,#backup-settings-form input[type="number"],#backup-settings-form input[type="password"]{display:block;width:100%;height:44px;min-height:44px;margin-top:7px;padding:0 12px;box-sizing:border-box;border:1px solid var(--line);border-radius:var(--radius-sm);background-color:#0b1525;color:var(--text);line-height:42px}#backup-settings-form select{padding:0 42px 0 12px}#backup-settings-form .check-control{display:flex;align-items:center;height:44px;min-height:44px;margin-top:16px;padding:0 12px}#backup-settings-form .check-control input{width:17px;height:17px;margin:0;line-height:normal}#backup-settings-form .dialog-actions{margin-top:18px;padding-top:16px} -:root[data-theme="light"] #backup-settings-form select,:root[data-theme="light"] #backup-settings-form input[type="number"],:root[data-theme="light"] #backup-settings-form input[type="password"]{background-color:#fff} -.backup-password-field .field-label{display:flex;align-items:center;justify-content:space-between;gap:10px}.backup-password-field .optional{float:none}.backup-password-field small{display:block;max-width:38rem;line-height:1.45} -.event-filters{display:flex;gap:10px;margin:4px 0 15px}.event-filters label{min-width:180px;margin:0}.event-filters select{width:100%;height:44px;min-height:44px}.event-list{max-height:360px;overflow:auto}.event-row{display:flex;align-items:flex-start;gap:12px;padding:12px 3px;border-top:1px solid var(--line)}.event-row:first-child{border-top:0}.event-row>span:last-child{display:grid;gap:3px}.event-row small{text-transform:capitalize;color:var(--muted);font-size:.7rem}.activity-mark.warn{background:rgba(255,191,105,.12);color:var(--warning)}@media(max-width:600px){.event-filters{flex-direction:column}.event-filters label{min-width:0}} +.danger-card .restore-form{row-gap:18px!important} +.danger-card .restore-form .danger-credentials{display:contents;margin:0!important} +.danger-card .restore-form .button{margin-top:0!important} +.caution-button{background:var(--warning);color:var(--on-warning);border-color:transparent;box-shadow:0 10px 30px rgba(var(--warning-rgb),.14)} +.support-panel{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:18px 0;padding:20px 22px;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--panel)} +.support-panel h3{margin:0 0 5px;font-size:1.05rem} +.support-panel .eyebrow{margin-bottom:6px} +.support-note{grid-column:1/-1;margin:0;font-size:.75rem} +.support-panel .row-actions{flex:0 0 auto} +#create-backup,#import-backup{height:44px;min-height:44px;padding:0 var(--space-4);font-size:var(--font-size-md);font-weight:720;border-radius:var(--radius-2xs)} +.danger-tab{color:var(--danger)!important} +.danger-zone>h2{color:var(--danger)} +.danger-card{margin-top:18px;padding:22px;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--panel)} +.danger-card h3{margin:0 0 7px} +.danger-card p:not(.eyebrow){color:var(--muted);line-height:1.55} +.danger-card.destructive{border-color:rgba(var(--danger-rgb),.55);background:rgba(var(--danger-rgb),.06)} +.danger-card.destructive .eyebrow{color:var(--danger)} +.danger-form{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 18px;margin-top:18px} +.danger-form .error,.danger-form .button{grid-column:1/-1} +.danger-form .button{justify-self:start} +.danger-form code{color:var(--danger)} + +/* Backup & restore form layout */ +.settings-form .form-section{grid-column:1/-1;padding:var(--space-1) 0 20px;border-bottom:1px solid var(--line)} +.settings-form .form-section+.form-section{padding-top:20px} +.settings-form .form-section:last-of-type{border-bottom:0} +.settings-form .form-section .eyebrow{margin-bottom:var(--space-3)} +.settings-form .form-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 18px} +.settings-form .form-grid .check-control{align-self:end} +.settings-form .form-section-wide .check-control{max-width:420px} +.backup-settings .dialog-actions{grid-column:1/-1} +.backup-settings code{color:var(--green);font-family:ui-monospace,monospace;font-size:var(--font-size-sm)} +#backup-settings-form select,#backup-settings-form input[type="number"],#backup-settings-form input[type="password"]{display:block;width:100%;height:44px;min-height:44px;margin-top:7px;padding:0 var(--space-3);box-sizing:border-box;border:1px solid var(--line);border-radius:var(--radius-sm);background-color:var(--field-bg);color:var(--text);line-height:42px} +#backup-settings-form select{padding:0 42px 0 12px} +#backup-settings-form .check-control{display:flex;align-items:center;height:44px;min-height:44px;margin-top:var(--space-4);padding:0 12px} +#backup-settings-form .check-control input{width:17px;height:17px;margin:0;line-height:normal} +#backup-settings-form .dialog-actions{margin-top:18px;padding-top:var(--space-4)} +.backup-password-field .field-label{display:flex;align-items:center;justify-content:space-between;gap:10px} +.backup-password-field .optional{float:none} +.backup-password-field small{display:block;max-width:38rem;line-height:1.45} + +/* Gateway events list */ +.event-filters{display:flex;gap:10px;margin:var(--space-1) 0 15px} +.event-filters label{min-width:180px;margin:0} +.event-filters select{width:100%;height:44px;min-height:44px} +.event-list{max-height:360px;overflow:auto} +.event-row{display:flex;align-items:flex-start;gap:var(--space-3);padding:var(--space-3) 3px;border-top:1px solid var(--line)} +.event-row:first-child{border-top:0} +.event-row>span:last-child{display:grid;gap:3px} +.event-row small{text-transform:capitalize;color:var(--muted);font-size:.7rem} +.activity-mark.warn{background:rgba(var(--warning-rgb),.12);color:var(--warning)} + +/* Access List assignment editor */ +@media(max-width:600px){.event-filters{flex-direction:column}.event-filters label{min-width:0}} .dashboard-panel .panel-heading .text-button{white-space:nowrap;font-size:.75rem} -.certificate-status{display:inline-flex;align-items:center;width:max-content;margin:0 0 16px;padding:7px 11px;border:1px solid var(--line);border-radius:999px;background:rgba(98,230,167,.08);color:var(--muted);font-size:.76rem;font-weight:700} +.certificate-status{display:inline-flex;align-items:center;width:max-content;margin:0 0 var(--space-4);padding:7px 11px;border:1px solid var(--line);border-radius:var(--radius-full);background:rgba(var(--green-rgb),.08);color:var(--muted);font-size:.76rem;font-weight:700} .access-assignment-preview{margin:14px 0 0;color:var(--muted);font-size:.72rem;line-height:1.45;overflow-wrap:anywhere} -.assignment-host-list{display:grid;gap:8px;margin-top:10px}.assignment-host-chip{display:flex;justify-content:space-between;gap:12px;padding:9px 10px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--panel2)}.assignment-host-chip b{font-size:var(--font-size-sm)}.assignment-host-chip small{color:var(--muted);font-size:.7rem;text-align:right;overflow-wrap:anywhere} -.assignment-editor{display:grid;gap:8px;margin-top:12px}.assignment-option{display:flex!important;align-items:center;gap:10px;margin:0!important;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel);cursor:pointer}.assignment-option input{width:18px!important;height:18px!important;min-height:18px!important;margin:0!important;accent-color:var(--green)}.assignment-option span{display:grid;gap:2px}.assignment-option small{color:var(--muted);font-size:.7rem} -.assignment-search{margin:12px 0 0!important;min-height:42px!important} -.assignment-search-label{display:block!important;margin:12px 0 0!important;color:var(--muted);font-size:.72rem;font-weight:750}.assignment-search-label input{display:block;width:100%;box-sizing:border-box} +.assignment-host-list{display:grid;gap:var(--space-2);margin-top:10px} +.assignment-host-chip{display:flex;justify-content:space-between;gap:var(--space-3);padding:9px 10px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--panel2)} +.assignment-host-chip b{font-size:var(--font-size-sm)} +.assignment-host-chip small{color:var(--muted);font-size:.7rem;text-align:right;overflow-wrap:anywhere} +.assignment-editor{display:grid;gap:var(--space-2);margin-top:var(--space-3)} +.assignment-option{display:flex!important;align-items:center;gap:10px;margin:0!important;padding:10px var(--space-3);border:1px solid var(--line);border-radius:var(--radius-2xs);background:var(--panel);cursor:pointer} +.assignment-option input{width:18px!important;height:18px!important;min-height:18px!important;margin:0!important;accent-color:var(--green)} +.assignment-option span{display:grid;gap:2px} +.assignment-option small{color:var(--muted);font-size:.7rem} +.assignment-search{margin:var(--space-3) 0 0!important;min-height:42px!important} +.assignment-search-label{display:block!important;margin:var(--space-3) 0 0!important;color:var(--muted);font-size:.72rem;font-weight:750} +.assignment-search-label input{display:block;width:100%;box-sizing:border-box} .assignment-option[hidden]{display:none!important} -.access-group-selector{display:block!important;margin:12px 0 0!important;padding-top:0;border-top:0}.access-group-selector>strong{display:block}.access-group-help{margin:7px 0 10px;color:var(--muted);font-size:.75rem;line-height:1.45}.access-group-options{display:grid;gap:8px}.access-group-option{margin:0!important;padding:10px 12px;background:var(--panel2);border:1px solid var(--line);border-radius:10px}.access-group-option small{margin-left:4px;color:var(--muted);font-size:.7rem}.access-group-empty{margin:0;color:var(--muted);font-size:.75rem}.access-group-preview{margin:8px 0 0;color:var(--muted);font-size:.72rem} -#access-assignment-summary{width:100%;box-sizing:border-box}#access-assignment-summary.hidden{display:none!important}#access-form[data-editing] #access-assignment-summary{display:block!important}.assignment-search-label{width:100%;box-sizing:border-box}.assignment-search-label input{margin-top:7px!important}.assignment-editor{width:100%;box-sizing:border-box} -#access-assignment-summary>strong{display:block;margin-bottom:6px}#access-assignment-summary>p{margin:0 0 4px;color:var(--muted);line-height:1.45}.access-create-guidance{margin:16px 0 0!important;color:var(--muted);font-size:.75rem;line-height:1.45} -#access-assignment-summary>strong{margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}.access-create-guidance{margin-top:18px;padding:16px;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--panel2)}.access-create-guidance strong{display:block}.access-create-guidance p{margin:6px 0 0;color:var(--muted);line-height:1.45} +.access-group-selector{display:block!important;margin:var(--space-3) 0 0!important;padding-top:0;border-top:0} +.access-group-selector>strong{display:block} +.access-group-help{margin:7px 0 10px;color:var(--muted);font-size:.75rem;line-height:1.45} +.access-group-options{display:grid;gap:var(--space-2)} +.access-group-option{margin:0!important;padding:10px var(--space-3);background:var(--panel2);border:1px solid var(--line);border-radius:var(--radius-2xs)} +.access-group-option small{margin-left:var(--space-1);color:var(--muted);font-size:.7rem} +.access-group-empty{margin:0;color:var(--muted);font-size:.75rem} +.access-group-preview{margin:var(--space-2) 0 0;color:var(--muted);font-size:.72rem} +#access-assignment-summary{width:100%;box-sizing:border-box} +#access-assignment-summary.hidden{display:none!important} +#access-form[data-editing] #access-assignment-summary{display:block!important} +.assignment-search-label{width:100%;box-sizing:border-box} +.assignment-search-label input{margin-top:7px!important} +.assignment-editor{width:100%;box-sizing:border-box} +#access-assignment-summary>strong{display:block;margin-bottom:6px} +#access-assignment-summary>p{margin:0 0 var(--space-1);color:var(--muted);line-height:1.45} +.access-create-guidance{margin:var(--space-4) 0 0!important;color:var(--muted);font-size:.75rem;line-height:1.45} +#access-assignment-summary>strong{margin-top:20px;padding-top:var(--space-4);border-top:1px solid var(--line)} +.access-create-guidance{margin-top:18px;padding:var(--space-4);border:1px solid var(--line);border-radius:var(--radius-md);background:var(--panel2)} +.access-create-guidance strong{display:block} +.access-create-guidance p{margin:6px 0 0;color:var(--muted);line-height:1.45} +.danger-actions{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap} +.danger-actions .button{margin:0} -.danger-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.danger-actions .button{margin:0} -.docs-intro{margin-bottom:22px;padding:24px;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--bg);color:var(--text)}.docs-intro h2{margin:0 0 10px}.docs-intro p:last-child{margin:0;color:var(--muted);max-width:850px;line-height:1.6} -.docs-layout{display:grid;grid-template-columns:210px minmax(0,1fr);gap:22px;align-items:start}.docs-nav{position:sticky;top:18px;height:calc(100vh - 170px);overflow:auto;display:grid;align-content:start;gap:6px;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--panel)}.docs-nav .eyebrow{margin:4px 8px 8px}.docs-nav button{padding:9px 10px;border:0;border-radius:8px;background:transparent;color:var(--muted);text-align:left;cursor:pointer;font:inherit}.docs-nav button:hover{background:rgba(98,230,167,.1);color:var(--text)}.docs-nav button:focus{outline:none}.docs-nav button:focus-visible{outline:2px solid var(--green);outline-offset:-2px}.docs #docs-content{display:grid;gap:16px}.docs #docs-content article{scroll-margin-top:18px;padding:24px;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--panel);line-height:1.6}.docs #docs-content article h2{margin:0 0 12px}.docs #docs-content article h3{margin:20px 0 5px;color:var(--green);font-size:.86rem}.docs #docs-content article p{color:var(--muted)}.docs .doc-search{display:block;margin-top:18px}.docs .doc-search input{margin-top:8px}@media(max-width:800px){.docs-layout{grid-template-columns:1fr}.docs-nav{position:static;display:flex;flex-wrap:wrap}.docs-nav .eyebrow{width:100%}} -.docs-intro{padding:32px 34px}.docs-search-panel{max-width:880px;margin-top:24px;padding:18px 20px;border:1px solid var(--line);border-radius:14px;background:var(--panel2)}.docs-search-panel .doc-search{margin:0}.docs-search-panel .doc-search span{display:block;margin-bottom:8px;font-weight:750;color:var(--text)}.docs-search-panel small{display:block;margin-top:8px;color:var(--muted)}.docs #docs-content article ul{margin:10px 0 0;padding-left:22px;color:var(--muted)}.docs #docs-content article li{margin:8px 0} -.docs-intro{width:100%;box-sizing:border-box;text-align:center}.docs-intro>p:not(.eyebrow){margin-left:auto;margin-right:auto}.docs-search-panel{max-width:none;text-align:left}.docs-search-panel .doc-search input{width:100%;box-sizing:border-box} +/* Documentation manual: intro & search */ +.docs-intro{margin-bottom:22px;padding:var(--space-5);border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--bg);color:var(--text)} +.docs-intro h2{margin:0 0 10px} +.docs-intro p:last-child{margin:0;color:var(--muted);max-width:850px;line-height:1.6} +.docs-layout{display:grid;grid-template-columns:210px minmax(0,1fr);gap:22px;align-items:start} +.docs-nav{position:sticky;top:18px;height:calc(100vh - 170px);overflow:auto;display:grid;align-content:start;gap:6px;padding:14px;border:1px solid var(--line);border-radius:var(--radius-2xl);background:var(--panel)} +.docs-nav .eyebrow{margin:var(--space-1) 8px 8px} +.docs-nav button{padding:9px 10px;border:0;border-radius:8px;background:transparent;color:var(--muted);text-align:left;cursor:pointer;font:inherit} +.docs-nav button:hover{background:rgba(var(--green-rgb),.1);color:var(--text)} +.docs-nav button:focus{outline:none} +.docs-nav button:focus-visible{outline:2px solid var(--green);outline-offset:-2px} +.docs #docs-content{display:grid;gap:var(--space-4)} +.docs #docs-content article{scroll-margin-top:18px;padding:var(--space-5);border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--panel);line-height:1.6} +.docs #docs-content article h2{margin:0 0 12px} +.docs #docs-content article h3{margin:20px 0 5px;color:var(--green);font-size:.86rem} +.docs #docs-content article p{color:var(--muted)} +.docs .doc-search{display:block;margin-top:18px} +.docs .doc-search input{margin-top:var(--space-2)} +@media(max-width:800px){.docs-layout{grid-template-columns:1fr}.docs-nav{position:static;display:flex;flex-wrap:wrap}.docs-nav .eyebrow{width:100%}} +.docs-intro{padding:var(--space-6) 34px} +.docs-search-panel{max-width:880px;margin-top:var(--space-5);padding:18px 20px;border:1px solid var(--line);border-radius:var(--radius-2xl);background:var(--panel2)} +.docs-search-panel .doc-search{margin:0} +.docs-search-panel .doc-search span{display:block;margin-bottom:var(--space-2);font-weight:750;color:var(--text)} +.docs-search-panel small{display:block;margin-top:var(--space-2);color:var(--muted)} +.docs #docs-content article ul{margin:10px 0 0;padding-left:22px;color:var(--muted)} +.docs #docs-content article li{margin:var(--space-2) 0} +.docs-intro{width:100%;box-sizing:border-box;text-align:center} +.docs-intro>p:not(.eyebrow){margin-left:auto;margin-right:auto} +.docs-search-panel{max-width:none;text-align:left} +.docs-search-panel .doc-search input{width:100%;box-sizing:border-box} /* Manual uses a full-width header, then a two-column reading layout. */ -.docs{display:block}.docs-intro{grid-column:1/-1}.docs-layout{width:100%} -.docs-intro{text-align:left}.docs-intro>p:not(.eyebrow){margin-left:0;margin-right:0}.docs-search-panel{margin-left:0;margin-right:0} -.inline-status{grid-column:1/-1;margin:0;color:var(--green);font-size:.8rem;font-weight:700} -.inline-status.status-success{color:var(--green)}.inline-status.status-warning{color:var(--warning)} -.encryption-grid{align-items:start}.encryption-toggle{align-items:flex-start;padding-top:28px}.encryption-toggle small{display:block;margin-top:5px;color:var(--muted);font-size:.72rem;line-height:1.4}.backup-settings .inline-status{margin-top:0} +.docs{display:block} +.docs-intro{grid-column:1/-1} +.docs-layout{width:100%} +.docs-intro{text-align:left} +.docs-intro>p:not(.eyebrow){margin-left:0;margin-right:0} +.docs-search-panel{margin-left:0;margin-right:0} +/* Inline status messages & backup encryption controls */ +.inline-status{grid-column:1/-1;margin:0;color:var(--green);font-size:.8rem;font-weight:700} +.inline-status.status-success{color:var(--green)} +.inline-status.status-warning{color:var(--warning)} +.encryption-grid{align-items:start} +.encryption-toggle{align-items:flex-start;padding-top:28px} +.encryption-toggle small{display:block;margin-top:5px;color:var(--muted);font-size:.72rem;line-height:1.4} +.backup-settings .inline-status{margin-top:0} /* Keep backup encryption controls compact and consistent with the rest of the form. */ .backup-settings .encryption-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 18px} .backup-settings .encryption-grid .backup-password-field, .backup-settings .encryption-grid .encryption-toggle{grid-column:auto!important} .backup-settings .encryption-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important} -.backup-settings .encryption-grid .backup-password-field, -.backup-settings .encryption-grid .encryption-toggle{grid-column:auto!important} -.backup-settings .encryption-grid .encryption-toggle{align-self:start!important;margin-top:16px!important;padding-top:0;height:44px;min-height:44px;box-sizing:border-box} +.backup-settings .encryption-grid .encryption-toggle{align-self:start!important;margin-top:var(--space-4)!important;padding-top:0;height:44px;min-height:44px;box-sizing:border-box} .backup-settings .encryption-grid .encryption-toggle span{line-height:1.35} .backup-settings .form-section:first-child .form-grid>.check-control{align-self:start!important;margin-top:23px!important;height:44px;min-height:44px;box-sizing:border-box} .backup-settings .form-section:last-of-type{border-bottom:0} .backup-settings > .dialog-actions{border-top:0;padding-top:0} @media(max-width:700px){.backup-settings .encryption-grid{grid-template-columns:1fr}} .backup-settings + .callout + #backup-list{max-height:390px;overflow-y:auto;overscroll-behavior:contain} -.backup-password-field{position:relative}.backup-password-field input{padding-right:62px!important}.password-toggle{position:absolute;right:10px;top:36px;border:0;background:transparent;color:var(--green);font-size:.72rem;font-weight:750;cursor:pointer;padding:6px}.password-toggle:hover{color:var(--text)} -.backup-settings .backup-password-field input,.backup-settings .encryption-toggle-box{height:44px!important;min-height:44px!important;box-sizing:border-box}.backup-create-dialog select{height:44px;min-height:44px;margin-top:7px}.backup-dialog-help{display:block;margin-top:6px;color:var(--muted);line-height:1.45}.backup-create-dialog code{color:var(--green)} +.backup-password-field{position:relative} +.backup-password-field input{padding-right:62px!important} +.password-toggle{position:absolute;right:10px;top:36px;border:0;background:transparent;color:var(--green);font-size:.72rem;font-weight:750;cursor:pointer;padding:6px} +.password-toggle:hover{color:var(--text)} +.backup-settings .backup-password-field input,.backup-settings .encryption-toggle-box{height:44px!important;min-height:44px!important;box-sizing:border-box} +.backup-create-dialog select{height:44px;min-height:44px;margin-top:7px} +.backup-dialog-help{display:block;margin-top:6px;color:var(--muted);line-height:1.45} +.backup-create-dialog code{color:var(--green)} .backup-create-dialog .dialog-heading>.icon-button{display:none} #backup-settings-form .encryption-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;align-items:start!important} #backup-settings-form .encryption-grid>.backup-password-field, -#backup-settings-form .encryption-grid>.encryption-toggle{margin-top:16px!important;align-self:start!important} +#backup-settings-form .encryption-grid>.encryption-toggle{margin-top:var(--space-4)!important;align-self:start!important} #backup-settings-form .encryption-grid>.backup-password-field .field-label, #backup-settings-form .encryption-grid>.encryption-toggle .field-label{height:20px;line-height:20px;margin-bottom:7px} #backup-settings-form .encryption-grid>.backup-password-field input, #backup-settings-form .encryption-grid>.encryption-toggle .encryption-toggle-box{height:44px!important;min-height:44px!important} .backup-settings .form-grid>.check-control{height:44px!important;min-height:44px!important;align-self:start!important;margin-top:23px!important;box-sizing:border-box} .backup-settings .encryption-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;align-items:start} -.backup-settings .encryption-toggle{height:auto!important;min-height:0!important;margin-top:16px!important;padding:0!important;background:transparent!important;border:0!important;display:block!important} -.backup-settings .encryption-toggle .field-label{display:flex;align-items:center;height:20px;margin:0 0 7px;color:#c7d0de;font-size:var(--font-size-md);font-weight:650} -.backup-settings .encryption-toggle-box{display:flex;align-items:center;gap:10px;height:44px;min-height:44px;padding:0 12px;border:1px solid var(--line);border-radius:var(--radius-sm);background:#0b1525;box-sizing:border-box} -:root[data-theme="light"] .backup-settings .encryption-toggle-box{background:#fff} +.backup-settings .encryption-toggle{height:auto!important;min-height:0!important;margin-top:var(--space-4)!important;padding:0!important;background:transparent!important;border:0!important;display:block!important} +.backup-settings .encryption-toggle .field-label{display:flex;align-items:center;height:20px;margin:0 0 7px;color:var(--label-color);font-size:var(--font-size-md);font-weight:650} +.backup-settings .encryption-toggle-box{display:flex;align-items:center;gap:10px;height:44px;min-height:44px;padding:0 var(--space-3);border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--field-bg);box-sizing:border-box} .backup-settings .encryption-toggle-box input{width:17px!important;height:17px!important;margin:0!important;flex:0 0 auto} .backup-settings .encryption-toggle-box>span{color:var(--muted);font-size:.72rem;line-height:1.35} /* Authoritative backup-form field layout: labels sit above equal-height controls. */ #backup-settings-form .form-grid{align-items:start;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 18px} -#backup-settings-form .form-grid>label{margin-top:16px;min-width:0} -#backup-settings-form .form-grid>label.check-control{height:44px!important;min-height:44px!important;margin-top:39px!important;padding:0 12px!important;align-self:start!important;box-sizing:border-box} +#backup-settings-form .form-grid>label{margin-top:var(--space-4);min-width:0} +#backup-settings-form .form-grid>label.check-control{height:44px!important;min-height:44px!important;margin-top:39px!important;padding:0 var(--space-3)!important;align-self:start!important;box-sizing:border-box} #backup-settings-form .form-grid>label:not(.check-control) select, #backup-settings-form .form-grid>label:not(.check-control) input{height:44px;min-height:44px;box-sizing:border-box} #backup-settings-form .encryption-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important} -#backup-settings-form .encryption-grid>.backup-password-field{margin-top:16px} -#backup-settings-form .encryption-grid>.encryption-toggle{margin-top:16px!important;height:auto!important;min-height:0!important;padding:0!important} +#backup-settings-form .encryption-grid>.backup-password-field{margin-top:var(--space-4)} +#backup-settings-form .encryption-grid>.encryption-toggle{margin-top:var(--space-4)!important;height:auto!important;min-height:0!important;padding:0!important} #backup-settings-form .encryption-toggle-box{height:44px;min-height:44px} @media(max-width:900px){#backup-settings-form .form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:600px){#backup-settings-form .form-grid,#backup-settings-form .encryption-grid{grid-template-columns:1fr!important}} + +/* Misc polish: product icon on setup/login, upstream-TLS checkbox layout */ .login-card>.product-icon,.setup-card>.product-icon{width:100%;height:auto;max-height:92px;object-fit:contain;border-radius:0} .brand-mark.small{width:40px;height:40px;border-radius:11px} label.check-control:has(input[name="upstreamTlsInsecure"]){display:grid!important;grid-template-columns:auto minmax(0,1fr)!important;align-items:center!important;column-gap:10px!important;row-gap:3px!important} @@ -202,72 +760,105 @@ label.check-control:has(input[name="upstreamTlsInsecure"]) small{grid-column:2!i label.check-control:has(input[name="upstreamTlsInsecure"]){position:relative;height:44px!important;min-height:44px!important;margin-bottom:42px!important;display:flex!important;flex-wrap:nowrap!important;align-items:center!important} label.check-control:has(input[name="upstreamTlsInsecure"]) span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} label.check-control:has(input[name="upstreamTlsInsecure"]) small{position:absolute;left:0;top:calc(100% + 7px);width:100%;padding:0!important;white-space:normal} + +/* Shared diagnostic lists: Certificates, Access Logs, Gateway Events, Audit */ select{appearance:none!important;-webkit-appearance:none!important;background-repeat:no-repeat!important;background-position:right 14px center!important;background-size:16px!important} -:root[data-theme="light"] select{background-color:#fff;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23132033' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E")!important} -:root[data-theme="light"]{--green:#159a68} -:root[data-theme="light"] .toggle.on{background:#159a68} -:root[data-theme="light"] .status-dot.running{background:#159a68;box-shadow:0 0 0 4px rgba(21,154,104,.14)} -:root[data-theme="light"] .check-control input{accent-color:#159a68} -#certificate-list,#readiness-list{max-height:min(52vh,620px);overflow:auto;border:1px solid var(--line);border-radius:15px;background:var(--panel)} +#certificate-list,#readiness-list{max-height:min(52vh,620px);overflow:auto;border:1px solid var(--line);border-radius:var(--radius-2xl);background:var(--panel)} #certificate-list{scrollbar-gutter:stable} #readiness-list{scrollbar-gutter:stable} - - #gateway-log-list .event-row,#access-log-list .event-row{align-items:center} #gateway-log-list .event-row .activity-mark,#access-log-list .event-row .activity-mark{flex:0 0 20px} #gateway-log-list .event-row>span:last-child,#access-log-list .event-row>span:last-child{display:grid;gap:3px;min-width:0} -.event-technical{margin-top:6px}.event-technical summary{padding:0;color:var(--blue);font-size:.7rem;cursor:pointer}.event-technical code{display:block;margin-top:5px;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--muted);font-size:var(--font-size-xs)} -#audit-list{max-height:min(52vh,620px);overflow:auto;border:1px solid var(--line);border-radius:15px;background:var(--panel);scrollbar-gutter:stable} +.event-technical{margin-top:6px} +.event-technical summary{padding:0;color:var(--blue);font-size:.7rem;cursor:pointer} +.event-technical code{display:block;margin-top:5px;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--muted);font-size:var(--font-size-xs)} +#audit-list{max-height:min(52vh,620px);overflow:auto;border:1px solid var(--line);border-radius:var(--radius-2xl);background:var(--panel);scrollbar-gutter:stable} #audit-list .event-row{align-items:center;padding:18px 20px} -#audit-list .activity-mark{width:8px;height:8px;min-width:8px;border-radius:50%;padding:0;font-size:0;background:var(--green);box-shadow:0 0 0 4px rgba(98,230,167,.1)} -#audit-list .activity-mark.bad{background:var(--danger);box-shadow:0 0 0 4px rgba(255,113,133,.09)} -.diagnostic-section-heading{margin:20px 0 10px;padding:18px 20px;border:1px solid var(--line);border-bottom:0;border-radius:15px 15px 0 0;background:var(--panel)} -.diagnostic-section-heading .eyebrow{margin-bottom:5px}.diagnostic-section-heading h2{margin:0;font-size:1.15rem}.diagnostic-section-heading p:last-child{margin:4px 0 0} +#audit-list .activity-mark{width:8px;height:8px;min-width:8px;border-radius:50%;padding:0;font-size:0;background:var(--green);box-shadow:0 0 0 4px rgba(var(--green-rgb),.1)} +#audit-list .activity-mark.bad{background:var(--danger);box-shadow:0 0 0 4px rgba(var(--danger-rgb),.09)} + +/* Diagnostic section headings & readiness panels */ +.diagnostic-section-heading{margin:20px 0 10px;padding:18px 20px;border:1px solid var(--line);border-bottom:0;border-radius:var(--radius-2xl) 15px 0 0;background:var(--panel)} +.diagnostic-section-heading .eyebrow{margin-bottom:5px} +.diagnostic-section-heading h2{margin:0;font-size:1.15rem} +.diagnostic-section-heading p:last-child{margin:var(--space-1) 0 0} .diagnostic-section-heading{margin-bottom:0} .diagnostic-section-heading + .log-table-wrap{border-top:0;border-radius:0 0 15px 15px} #certificate-list.diagnostic-list,#readiness-list.diagnostic-list,#gateway-log-list.diagnostic-list,#audit-list.diagnostic-list{border-radius:0 0 15px 15px} .data-list>.quiet-state,.diagnostic-list>.quiet-state{padding:22px} .readiness-panel,.log-activity{background:transparent;border:0;padding:0} -.readiness-panel .panel-heading,.log-activity .panel-heading{margin:20px 0 0;padding:18px 20px;border:1px solid var(--line);border-bottom:0;border-radius:15px 15px 0 0;background:var(--panel)} +.readiness-panel .panel-heading,.log-activity .panel-heading{margin:20px 0 0;padding:18px 20px;border:1px solid var(--line);border-bottom:0;border-radius:var(--radius-2xl) 15px 0 0;background:var(--panel)} .log-activity .event-filters{margin:0;padding:0 20px 15px;border-left:1px solid var(--line);border-right:1px solid var(--line);background:var(--panel)} .log-activity .diagnostic-list{border:1px solid var(--line);border-radius:0 0 15px 15px;background:var(--panel);overflow:auto} -.log-activity .event-row{gap:16px;padding:18px 20px;align-items:center} +.log-activity .event-row{gap:var(--space-4);padding:18px 20px;align-items:center} .log-activity .event-row .status-dot{flex:0 0 8px} -.gateway-empty-state{display:grid;justify-items:center;gap:6px;padding:34px 20px;text-align:center;color:var(--muted)}.gateway-empty-state .status-dot{width:9px;height:9px;margin-bottom:3px;background:var(--muted);box-shadow:0 0 0 4px rgba(97,112,138,.1)}.gateway-empty-state strong{color:var(--text);font-size:.86rem}.gateway-empty-state small{font-size:.74rem} +.gateway-empty-state{display:grid;justify-items:center;gap:6px;padding:34px 20px;text-align:center;color:var(--muted)} +.gateway-empty-state .status-dot{width:9px;height:9px;margin-bottom:3px;background:var(--muted);box-shadow:0 0 0 4px rgba(var(--status-dot-idle-rgb),.1)} +.gateway-empty-state strong{color:var(--text);font-size:.86rem} +.gateway-empty-state small{font-size:.74rem} + +/* Upstream-TLS checkbox layout (#app scope) */ .dialog-card select,.settings-form select{appearance:none!important;-webkit-appearance:none!important;background-repeat:no-repeat!important;background-position:right 14px center!important;background-size:16px!important} -:root[data-theme="light"] .dialog-card select,:root[data-theme="light"] .settings-form select{background-color:#fff;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23132033' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E")!important} #app .check-control:has(input[name="upstreamTlsInsecure"]){display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:10px;row-gap:3px} #app .check-control:has(input[name="upstreamTlsInsecure"]) span,#app .check-control:has(input[name="upstreamTlsInsecure"]) small{grid-column:2} #app .check-control:has(input[name="upstreamTlsInsecure"]) small{display:block;margin:0;line-height:1.35} #app .check-control:has(input[name="upstreamTlsInsecure"]){display:flex;flex-wrap:wrap;align-items:center;column-gap:10px;row-gap:3px} #app .check-control:has(input[name="upstreamTlsInsecure"]) span{flex:1 1 0;min-width:0} #app .check-control:has(input[name="upstreamTlsInsecure"]) small{flex:0 0 100%;padding-left:27px} + +/* Dialog close buttons */ #settings-dialog .dialog-heading>.icon-button{display:none} #icon-dialog .dialog-heading>.icon-button{display:none} -:root[data-theme="light"] .retention-run-status,:root[data-theme="light"] .retention-preview,:root[data-theme="light"] .retention-history{background:var(--panel)!important} -:root .retention-history-list{scrollbar-gutter:stable;scrollbar-color:var(--line) transparent}:root .retention-history-list::-webkit-scrollbar{width:10px}:root .retention-history-list::-webkit-scrollbar-track{background:transparent}:root .retention-history-list::-webkit-scrollbar-thumb{background:var(--line);border:3px solid transparent;border-radius:999px;background-clip:padding-box} -:root .site-icon,:root[data-theme="light"] .site-icon,:root .site-card.proxy .site-icon,:root[data-theme="light"] .site-card.proxy .site-icon{background:var(--panel2);color:var(--green);border:1px solid var(--line)} -:root .retention-load-more{display:block;margin:10px auto 0;padding:8px 14px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--panel2);color:var(--text);font-size:.72rem;font-weight:700}:root .retention-load-more:hover{border-color:var(--green);color:var(--green)} + +/* Retention history scrollbar & misc :root overrides */ +:root .retention-history-list{scrollbar-gutter:stable;scrollbar-color:var(--line) transparent} +:root .retention-history-list::-webkit-scrollbar{width:10px} +:root .retention-history-list::-webkit-scrollbar-track{background:transparent} +:root .retention-history-list::-webkit-scrollbar-thumb{background:var(--line);border:3px solid transparent;border-radius:var(--radius-full);background-clip:padding-box} +:root .site-icon,:root .site-card.proxy .site-icon{background:var(--panel2);color:var(--green);border:1px solid var(--line)} +:root .retention-load-more{display:block;margin:10px auto 0;padding:var(--space-2) 14px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--panel2);color:var(--text);font-size:.72rem;font-weight:700} +:root .retention-load-more:hover{border-color:var(--green);color:var(--green)} :root .retention-load-more{display:none!important} #create-dialog .dialog-heading .close-dialog,#settings-dialog .dialog-heading .close-dialog,#proxy-dialog .dialog-heading .close-dialog,#redirect-dialog .dialog-heading .close-dialog,#stream-dialog .dialog-heading .close-dialog{display:none} -#app .site-card.access-card .site-icon{background:#193d38;color:var(--green)}:root[data-theme="light"] #app .site-card.access-card .site-icon{background:#e2f5ed;color:#138a5b} -#app .user-avatar{background:#193d38;color:var(--green)}:root[data-theme="light"] #app .user-avatar{background:#e2f5ed;color:#138a5b} + +/* User avatars & user cards (Administration > Users) */ +#app .site-card.access-card .site-icon{background:var(--icon-tile-green-bg);color:var(--green)} +#app .user-avatar{background:var(--icon-tile-green-bg);color:var(--green)} #app .user-avatar img{filter:grayscale(1) sepia(1) saturate(5) hue-rotate(95deg) brightness(1.1)} #user-dialog .dialog-heading .close-dialog{display:none} -#app .user-card{position:relative;background:linear-gradient(145deg,rgba(20,33,54,.95),rgba(13,23,39,.95));border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:0 14px 40px rgba(0,0,0,.14);transition:.2s}#app .user-card:hover{transform:translateY(-2px);border-color:#344b6e}:root[data-theme="light"] #app .user-card{background:linear-gradient(145deg,#fff,#f6f9fc);box-shadow:0 14px 40px rgba(34,54,80,.1)} +#app .user-card{position:relative;background:linear-gradient(145deg,rgba(var(--panel2-rgb),.95),rgba(var(--card-shade-rgb),.95));border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:0 14px 40px rgba(var(--black-rgb),.14);transition:.2s} +#app .user-card:hover{transform:translateY(-2px);border-color:var(--border-hover)} #app .user-card .user-avatar{background:var(--panel2)!important;color:var(--green)!important;border:1px solid var(--line)} #app .user-avatar img{display:none!important} -#user-list .user-card{background:linear-gradient(145deg,rgba(20,33,54,.95),rgba(13,23,39,.95))!important;border:1px solid var(--line)!important;border-radius:var(--radius-lg)!important;box-shadow:0 14px 40px rgba(0,0,0,.14)!important}#user-list .user-avatar{background:var(--panel2)!important;color:var(--green)!important;border:1px solid var(--line)!important}#user-list .user-avatar img{display:none!important}:root[data-theme="light"] #user-list .user-card{background:linear-gradient(145deg,#fff,#f6f9fc)!important;box-shadow:0 14px 40px rgba(34,54,80,.1)!important} +#user-list .user-card{background:linear-gradient(145deg,rgba(var(--panel2-rgb),.95),rgba(var(--card-shade-rgb),.95))!important;border:1px solid var(--line)!important;border-radius:var(--radius-lg)!important;box-shadow:0 14px 40px rgba(var(--black-rgb),.14)!important} +#user-list .user-avatar{background:var(--panel2)!important;color:var(--green)!important;border:1px solid var(--line)!important} +#user-list .user-avatar img{display:none!important} #password-dialog .dialog-heading .close-dialog{display:none} -#dashboard-jobs{margin:18px 0}.dashboard-jobs-panel .panel-heading{margin-bottom:8px} -#dashboard-view>[data-dashboard-health]{width:100%;margin-top:18px}.dashboard-columns{margin-top:18px}.dashboard-jobs-panel{min-height:100%} -#dashboard-view>[data-dashboard-health] .health-list{grid-template-columns:repeat(4,minmax(0,1fr));gap:0}#dashboard-view>[data-dashboard-health] .health-list>div{min-width:0;padding:12px 18px;border-top:0;border-left:1px solid var(--line)}#dashboard-view>[data-dashboard-health] .health-list>div:first-child{border-left:0;padding-left:3px}#dashboard-view>[data-dashboard-health] .health-list>div:last-child{padding-right:3px}@media(max-width:760px){#dashboard-view>[data-dashboard-health] .health-list{grid-template-columns:repeat(2,minmax(0,1fr))}#dashboard-view>[data-dashboard-health] .health-list>div{border-left:0;border-top:1px solid var(--line);padding:12px 3px}#dashboard-view>[data-dashboard-health] .health-list>div:nth-child(odd){border-left:0}#dashboard-view>[data-dashboard-health] .health-list>div:nth-child(-n+2){border-top:0}} -#dashboard-view>.dashboard-columns:not(.lower){align-items:start}#dashboard-view>.dashboard-columns:not(.lower)>.dashboard-panel{align-self:start;height:auto}#dashboard-view .dashboard-jobs-panel{min-height:0} -#dashboard-view>.dashboard-columns:not(.lower)>.dashboard-panel{align-self:stretch;height:auto}#dashboard-view>.dashboard-columns:not(.lower)>.dashboard-jobs-panel{min-height:100%} -#dashboard-view>.dashboard-columns:not(.lower){align-items:stretch}#dashboard-view>.dashboard-columns:not(.lower)>.dashboard-panel{height:auto;min-height:0}#dashboard-view>.dashboard-columns:not(.lower)>.dashboard-jobs-panel{min-height:0} + +/* Dashboard: scheduled jobs panel & live health list */ +#dashboard-jobs{margin:18px 0} +.dashboard-jobs-panel .panel-heading{margin-bottom:var(--space-2)} +#dashboard-view>[data-dashboard-health]{width:100%;margin-top:18px} +.dashboard-columns{margin-top:18px} +.dashboard-jobs-panel{min-height:100%} +#dashboard-view>[data-dashboard-health] .health-list{grid-template-columns:repeat(4,minmax(0,1fr));gap:0} +#dashboard-view>[data-dashboard-health] .health-list>div{min-width:0;padding:var(--space-3) 18px;border-top:0;border-left:1px solid var(--line)} +#dashboard-view>[data-dashboard-health] .health-list>div:first-child{border-left:0;padding-left:3px} +#dashboard-view>[data-dashboard-health] .health-list>div:last-child{padding-right:3px} +@media(max-width:760px){#dashboard-view>[data-dashboard-health] .health-list{grid-template-columns:repeat(2,minmax(0,1fr))}#dashboard-view>[data-dashboard-health] .health-list>div{border-left:0;border-top:1px solid var(--line);padding:var(--space-3) 3px}#dashboard-view>[data-dashboard-health] .health-list>div:nth-child(odd){border-left:0}#dashboard-view>[data-dashboard-health] .health-list>div:nth-child(-n+2){border-top:0}} +#dashboard-view>.dashboard-columns:not(.lower){align-items:start} +#dashboard-view>.dashboard-columns:not(.lower)>.dashboard-panel{align-self:start;height:auto} +#dashboard-view .dashboard-jobs-panel{min-height:0} +#dashboard-view>.dashboard-columns:not(.lower)>.dashboard-panel{align-self:stretch;height:auto} +#dashboard-view>.dashboard-columns:not(.lower)>.dashboard-jobs-panel{min-height:100%} +#dashboard-view>.dashboard-columns:not(.lower){align-items:stretch} +#dashboard-view>.dashboard-columns:not(.lower)>.dashboard-panel{height:auto;min-height:0} +#dashboard-view>.dashboard-columns:not(.lower)>.dashboard-jobs-panel{min-height:0} #dashboard-view>.dashboard-columns #dashboard-jobs{margin:0;align-self:start} #dashboard-view>.dashboard-columns #dashboard-jobs{align-self:stretch;height:auto} -#access-list.loading { visibility: hidden; } + +/* Performance table & error breakdown */ +#access-list.loading{ visibility: hidden; } .table-wrap.performance-table-wrap{overflow-x:hidden;overflow-y:auto;max-height:min(52vh,620px)} .performance-table{width:100%;border-collapse:collapse;font-size:var(--font-size-md);table-layout:fixed} .performance-table th,.performance-table td{padding:13px 15px;text-align:left;border-top:1px solid var(--line);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} @@ -277,10 +868,16 @@ select{appearance:none!important;-webkit-appearance:none!important;background-re .performance-table th:nth-child(3),.performance-table td:nth-child(3){width:23%;text-align:center} .performance-table th:nth-child(4),.performance-table td:nth-child(4){width:23%;text-align:center} .performance-table .count-divider{color:var(--muted);margin:0 2px} -.performance-table .count-link-button{border:0;background:none;padding:0;font:inherit;color:var(--danger);cursor:pointer;text-decoration:underline dotted;text-underline-offset:3px}.performance-table .count-link-button:hover{text-decoration-style:solid}.error-breakdown-list{margin-top:var(--space-4);border:1px solid var(--line);border-radius:var(--radius-md);background:rgba(8,16,29,.28);padding:0 var(--space-4)}.error-breakdown-row{display:flex;justify-content:space-between;gap:var(--space-4);padding:var(--space-3) 0;border-top:1px solid var(--line);font-size:var(--font-size-md)}.error-breakdown-row:first-child{border-top:0} +.performance-table .count-link-button{border:0;background:none;padding:0;font:inherit;color:var(--danger);cursor:pointer;text-decoration:underline dotted;text-underline-offset:3px} +.performance-table .count-link-button:hover{text-decoration-style:solid} +.error-breakdown-list{margin-top:var(--space-4);border:1px solid var(--line);border-radius:var(--radius-md);background:rgba(var(--bg-rgb),.28);padding:0 var(--space-4)} +.error-breakdown-row{display:flex;justify-content:space-between;gap:var(--space-4);padding:var(--space-3) 0;border-top:1px solid var(--line);font-size:var(--font-size-md)} +.error-breakdown-row:first-child{border-top:0} @media(max-width:760px){.performance-table th:nth-child(2),.performance-table td:nth-child(2){display:none}.performance-table th:nth-child(1),.performance-table td:nth-child(1){width:40%}.performance-table th:nth-child(3),.performance-table td:nth-child(3){width:30%}.performance-table th:nth-child(4),.performance-table td:nth-child(4){width:30%}} -.mfa-qr{display:flex;justify-content:center;padding:16px;background:#fff;border-radius:var(--radius-md);margin:16px 0} -.mfa-qr svg{width:200px;height:200px} -.mfa-recovery-codes{background:var(--panel2);color:var(--text);border:1px solid var(--line);border-radius:10px;padding:16px;font-size:14px;line-height:1.8;letter-spacing:.02em;white-space:pre-wrap;user-select:all} +/* MFA setup: QR code & recovery codes */ +.mfa-qr{display:flex;justify-content:center;padding:var(--space-4);background:var(--white);border-radius:var(--radius-md);margin:var(--space-4) 0} +.mfa-qr svg{width:200px;height:200px} +.mfa-recovery-codes{background:var(--panel2);color:var(--text);border:1px solid var(--line);border-radius:var(--radius-2xs);padding:var(--space-4);font-size:14px;line-height:1.8;letter-spacing:.02em;white-space:pre-wrap;user-select:all} #account-view>.dashboard-panel+.dashboard-panel{margin-top:18px} + diff --git a/src/server.js b/src/server.js index d41ee7f..63077bd 100644 --- a/src/server.js +++ b/src/server.js @@ -407,7 +407,7 @@ async function writeDefaultSitePage() { const message = String(selected.message || "The gateway is responding, but this address has not been configured.").replace(/[<>]/g, ""); const html = selected.mode === "custom" && selected.customHtml ? String(selected.customHtml) - : `${title}
Site Gateway

${title}

${message}

Host. Proxy. Secure.
`; + : `${title}
Site Gateway

${title}

${message}

Host. Proxy. Secure.
`; await fsp.writeFile(path.join(defaultSiteDir, "index.html"), html); } @@ -1205,7 +1205,7 @@ app.get("/api/access-check", (req, res) => { app.get("/_site-gateway/login", (req, res) => { const listId = String(req.query.list || ""), list = accessLists.find(item => item.id === listId && item.enabled !== false); if (!list) return res.status(404).send("Access policy not found."); const safeReturn = String(req.query.return || "/").startsWith("/") ? String(req.query.return || "/") : "/"; - res.type("html").send(`Sign in · Site Gateway
SG
Protected by Site Gateway

Sign in to continue

This service uses the ${String(list.name).replace(/[<>]/g, "")} access policy.

${req.query.error ? '

That username or password was not accepted.

' : ""}
`); + res.type("html").send(`Sign in · Site Gateway
SG
Protected by Site Gateway

Sign in to continue

This service uses the ${String(list.name).replace(/[<>]/g, "")} access policy.

${req.query.error ? '

That username or password was not accepted.

' : ""}
`); }); app.post("/_site-gateway/login", async (req, res, next) => { try {