/* HACI Network Management — premium theme overlay for GenieACS UI * Injected via nginx sub_filter ( insertion), served statically. * Targets GenieACS's stock CSS class names (public/app-*.css) plus the * .haci-* hook classes added by haci-brand.js and the ui.device 'element' * overrides (e.g. 'div.haci-panel.haci-panel-device') set in MongoDB config. * Does not modify GenieACS's own compiled CSS/JS — additive only. * * DOM reference (GenieACS 1.2.16 ui/layout.ts, ui/login-page.ts — confirmed * from the shipped app-*.js.map, not guessed): * body > #header top chrome, present on EVERY route incl. login * #header > .logo stock GenieACS logo + version (branded by JS) * #header > .user-menu "Log in" link (logged out) / "Log out" (in) * #header > nav > ul > li top-level route tabs * #header > .drawer-wrapper task-queue popover (NOT a sidebar — the * "Sidebar / drawer" block below styles this * floating widget, not app navigation) * body > #content-wrapper * #content-wrapper > #side-menu admin sub-nav (presets/provisions/etc only) * #content-wrapper > #content.page-{name} e.g. #content.page-login * #content.page-login children, in DOM order: * .haci-login-header (inserted by haci-brand.js, before the native h1) * h1 "Log in" (hidden here; header block above replaces it) * form (Username/Password/Login — styled as the card) * a "Change password" (native, un-classed — styled as the card's footer) */ :root { --haci-navy-900: #0a1628; --haci-navy-800: #0f2138; --haci-navy-700: #16304d; --haci-blue: #2563eb; --haci-blue-light: #3b82f6; --haci-green: #10b981; --haci-green-light: #34d399; --haci-accent-gradient: linear-gradient(135deg, var(--haci-blue) 0%, var(--haci-green) 100%); --haci-text-light: #e2e8f0; --haci-text-muted: #94a3b8; --haci-border-glass: rgba(255, 255, 255, 0.08); --haci-surface: var(--haci-navy-800); --haci-surface-hover: rgba(255, 255, 255, 0.05); --haci-radius: 10px; --haci-radius-lg: 22px; } html, body { min-height: 100%; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; background: var(--haci-navy-900); color: var(--haci-text-light); } /* ---------- Application shell: top header (all pages) ---------- */ #header { background: linear-gradient(180deg, var(--haci-navy-800) 0%, var(--haci-navy-900) 100%); border-bottom: 1px solid var(--haci-border-glass); } #header > .logo > .version { color: var(--haci-text-muted); } #header > nav > ul > li { background: transparent !important; border-color: transparent !important; } #header > nav > ul > li > a, #header > nav > ul > li > a:visited { color: var(--haci-text-muted) !important; } #header > nav > ul > li:hover, #header > nav > ul > li.active { background: rgba(37, 99, 235, 0.22) !important; } #header > nav > ul > li:hover > a, #header > nav > ul > li.active > a { color: #fff !important; } #header > .user-menu { color: var(--haci-text-muted); } #header > .user-menu > a { color: var(--haci-text-muted); } #header > .user-menu > button { background: transparent; border: 1px solid var(--haci-border-glass); color: var(--haci-text-light); border-radius: 6px; padding: 5px 12px; } #header > .user-menu > button:hover:enabled { background: var(--haci-surface-hover); color: #fff; } /* ---------- Application shell: admin sub-nav ---------- */ #side-menu { background: var(--haci-surface); border-right: 1px solid var(--haci-border-glass); padding-top: 10px; } #side-menu > ul > li > a { background: transparent !important; color: var(--haci-text-muted) !important; } #side-menu > ul > li > a:hover { background: var(--haci-surface-hover) !important; color: #fff !important; } #side-menu > ul > li.active > a { background: linear-gradient(90deg, rgba(37, 99, 235, 0.28), rgba(16, 185, 129, 0.14)) !important; color: #fff !important; font-weight: 600; } /* ---------- Application shell: page background & headings ---------- */ #content-wrapper, #content { background: transparent; } #content h1, #content h2 { color: var(--haci-text-light); } #content h3 { color: var(--haci-blue-light); } /* ---------- Task-queue popover (#header > .drawer-wrapper) ---------- * Not app navigation — see DOM reference note above. */ .drawer, .drawer-wrapper { background: linear-gradient(180deg, var(--haci-navy-900) 0%, var(--haci-navy-800) 100%) !important; color: var(--haci-text-light) !important; border-right: 1px solid var(--haci-border-glass); } .drawer a, .drawer-wrapper a { color: var(--haci-text-muted) !important; transition: background-color 0.15s ease, color 0.15s ease; border-left: 3px solid transparent; } .drawer a:hover, .drawer-wrapper a:hover { color: #fff !important; background: rgba(255, 255, 255, 0.06) !important; } .drawer li.active a, .drawer-wrapper li.active a, .drawer a.active, .drawer-wrapper a.active { background: linear-gradient(90deg, rgba(37, 99, 235, 0.28), rgba(16, 185, 129, 0.14)) !important; color: #fff !important; border-left-color: var(--haci-green); } .drawer .logo, .drawer-wrapper .logo { display: flex; align-items: center; gap: 10px; padding: 20px 16px 16px; border-bottom: 1px solid var(--haci-border-glass); margin-bottom: 8px; } .haci-brand-logo { max-height: 36px; width: auto; } .haci-brand-text { display: flex; flex-direction: column; line-height: 1.15; } .haci-brand-name { font-weight: 700; font-size: 14px; color: #fff; letter-spacing: 0.2px; } .haci-brand-sub { font-size: 9px; color: var(--haci-green-light); letter-spacing: 0.6px; text-transform: uppercase; margin-top: 2px; } /* ---------- Buttons / links ---------- */ a { color: var(--haci-blue-light); } button.primary, input[type="submit"].primary, .btn-primary { background: var(--haci-accent-gradient) !important; border: none !important; color: #fff !important; transition: filter 0.15s ease; } button.primary:hover, input[type="submit"].primary:hover, .btn-primary:hover { filter: brightness(1.08); } /* ========================================================================== LOGIN PAGE — full-viewport redesign Scope: strictly `body.haci-login` (set by haci-brand.js only when the native "Log in" h1 is detected) so none of this leaks into the logged-in shell. `#content.page-login` (Mithril's own class, set synchronously by ui/app.ts's pagify()) is used as a secondary, JS-independent hook for the structural/layout rules so the card never depends on the MutationObserver timing — only the injected header block and #header hiding need the JS class. ========================================================================== */ body.haci-login { min-height: 100vh; min-height: 100dvh; background: radial-gradient(circle at 15% 15%, rgba(37, 99, 235, 0.30), transparent 42%), radial-gradient(circle at 85% 85%, rgba(16, 185, 129, 0.24), transparent 42%), radial-gradient(circle at 50% 100%, rgba(59, 130, 246, 0.10), transparent 60%), var(--haci-navy-900); } /* Stock header (cream bar, duplicated logo, "Log in" link, top nav) is * fully hidden on the login route — the composition below replaces it. */ body.haci-login #header { display: none; } body.haci-login h1 { display: none; } #content.page-login { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; min-height: 100dvh; margin: 0; padding: 32px 20px; box-sizing: border-box; } .haci-login-header { text-align: center; color: #fff; max-width: 420px; margin: 0 0 28px; } .haci-login-header img { max-width: 240px; width: 100%; height: auto; margin-bottom: 20px; filter: drop-shadow(0 6px 24px rgba(37, 99, 235, 0.35)); } .haci-login-header h2 { font-size: 24px; font-weight: 700; letter-spacing: 0.2px; margin: 0 0 6px; color: #fff; } .haci-login-header p { font-size: 13px; color: var(--haci-text-muted); margin: 2px 0; } .haci-login-header .haci-tagline { display: inline-block; color: var(--haci-green-light); font-weight: 600; letter-spacing: 0.6px; margin-top: 14px; font-size: 11px; text-transform: uppercase; } #content.page-login form { width: 100%; max-width: 440px; box-sizing: border-box; background: rgba(255, 255, 255, 0.06); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--haci-border-glass); border-radius: var(--haci-radius-lg) var(--haci-radius-lg) 0 0; padding: 40px 36px 30px; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55); margin: 0; } #content.page-login form p { margin: 0 0 18px; } #content.page-login form p:last-child { margin-bottom: 0; margin-top: 8px; } #content.page-login form label { display: block; color: var(--haci-text-light); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 7px; } #content.page-login form input { display: block; width: 100%; box-sizing: border-box; background: rgba(255, 255, 255, 0.07) !important; border: 1px solid rgba(255, 255, 255, 0.16) !important; color: #fff !important; border-radius: 8px !important; padding: 13px 14px !important; font-size: 14px; height: 48px; transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease; } #content.page-login form input::placeholder { color: var(--haci-text-muted); } #content.page-login form input:hover { border-color: rgba(255, 255, 255, 0.28) !important; } #content.page-login form input:focus { border-color: var(--haci-blue-light) !important; background: rgba(255, 255, 255, 0.1) !important; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.28); outline: none; } #content.page-login form button, #content.page-login form input[type="submit"] { background: var(--haci-accent-gradient) !important; border: none !important; border-radius: 8px !important; color: #fff !important; font-weight: 700; font-size: 14px; letter-spacing: 0.2px; height: 50px; width: 100%; cursor: pointer; transition: filter 0.15s ease, transform 0.05s ease; } #content.page-login form button:hover:enabled, #content.page-login form input[type="submit"]:hover:enabled { filter: brightness(1.1); } #content.page-login form button:active:enabled, #content.page-login form input[type="submit"]:active:enabled { transform: translateY(1px); } /* Native "Change password" link — always rendered as a sibling of
, * never inside it (see DOM reference note above). Styled as a joined * footer strip so it reads as part of the same card rather than a floating * link, without moving it in the DOM. */ #content.page-login > a { display: block; width: 100%; max-width: 440px; box-sizing: border-box; text-align: center; background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--haci-border-glass); border-top: 1px solid rgba(255, 255, 255, 0.06); border-radius: 0 0 var(--haci-radius-lg) var(--haci-radius-lg); margin: -1px 0 0; padding: 14px; font-size: 12.5px; font-weight: 500; color: var(--haci-text-muted) !important; } #content.page-login > a:hover { color: #fff !important; background: rgba(255, 255, 255, 0.06); } @media (max-width: 480px) { .haci-login-header img { max-width: 180px; } .haci-login-header h2 { font-size: 19px; } #content.page-login form { padding: 30px 22px 24px; } } /* ---------- Device detail overview panels ---------- * .haci-panel is set via ui.device.N.element in MongoDB config * (e.g. 'div.haci-panel.haci-panel-device'); haci-brand.js also tags * plain container sections by their

label as a fallback. */ .haci-panel, .haci-sec-device, .haci-sec-connection, .haci-sec-optical, .haci-sec-wifi { border: 1px solid var(--haci-border-glass); border-radius: var(--haci-radius); padding: 16px 20px; margin-bottom: 16px; background: var(--haci-surface); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); color: var(--haci-text-light); } #content .haci-panel h3, #content .haci-sec-device h3, #content .haci-sec-connection h3, #content .haci-sec-optical h3, #content .haci-sec-wifi h3 { margin-top: 0; font-size: 12px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--haci-blue-light); border-bottom: 2px solid var(--haci-green-light); padding-bottom: 8px; margin-bottom: 12px; } /* ---------- Tables (device list, parameter lists) ---------- */ table.table, .table { border-collapse: separate !important; border-spacing: 0; color: var(--haci-text-light); } .table th { background: var(--haci-navy-700); font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--haci-text-muted); } .table tr:hover td { background: rgba(37, 99, 235, 0.1); } /* ---------- Overlays / modals (e.g. Change password dialog, add/edit forms) ---------- */ .overlay-wrapper > .overlay { background: var(--haci-navy-800); border: 1px solid var(--haci-border-glass); color: var(--haci-text-light); } .overlay-wrapper > .overlay h1, .overlay-wrapper > .overlay h2, .overlay-wrapper > .overlay h3 { color: var(--haci-text-light); } .overlay-wrapper > .overlay label { color: var(--haci-text-light); } .overlay-wrapper > .overlay input:not([type="submit"]) { background: rgba(255, 255, 255, 0.06) !important; border: 1px solid rgba(255, 255, 255, 0.16) !important; color: #fff !important; } /* ---------- Misc polish ---------- */ .page-overview h1, .page-overview h2 { letter-spacing: 0.2px; } ::selection { background: rgba(16, 185, 129, 0.25); }