/* ========================================================================= LSCentral — application theme ------------------------------------------------------------------------- Themes Bootstrap 5.3 via its native color-mode system. Loaded AFTER bootstrap.min.css (see assets/app.js), so these overrides win. Rules baked in here: - Lemon (brand) is used for interactive/brand affordances ONLY: logo mark, active nav, focus rings, primary "Sign in" button. - Disk status is a SEPARATE green / amber(orange) / red scale so the brand yellow never gets mistaken for a "warning". Thresholds: < 75% = ok (green) 75–89% = caution (orange) >= 90% = critical (red) These match the existing template logic in monitoring/index & show. Colours are OKLCH; hairlines use color-mix; type scales with clamp(). ========================================================================= */ /* ---- Design tokens (mode-independent) ---- */ :root { --ls-lemon: oklch(0.86 0.17 98); --ls-lemon-deep: oklch(0.74 0.16 92); /* readable on light surfaces */ --ls-lemon-glow: oklch(0.86 0.17 98 / 0.28); --ls-ink: oklch(0.16 0.012 260); --ls-ok: oklch(0.72 0.15 155); /* green — < 75% */ --ls-warn: oklch(0.73 0.16 60); /* orange — 75–89% (deliberately NOT lemon) */ --ls-crit: oklch(0.63 0.21 25); /* red — >= 90% */ --ls-radius: 16px; --ls-radius-sm: 11px; --ls-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", "Menlo", monospace; color-scheme: light dark; } /* ---- Dark surfaces ---- */ [data-bs-theme="dark"] { color-scheme: dark; --bs-body-bg: oklch(0.19 0.016 264); --bs-body-color: oklch(0.93 0.008 250); --bs-emphasis-color: oklch(0.98 0.008 250); --bs-link-color: var(--ls-lemon); --bs-link-hover-color: oklch(0.90 0.16 98); --bs-border-color: oklch(0.93 0.008 250 / 0.12); --ls-surface: oklch(0.23 0.018 264); --ls-surface-2: oklch(0.26 0.02 264); --ls-border: oklch(0.93 0.008 250 / 0.12); --ls-muted: oklch(0.72 0.012 250); --ls-topbar: oklch(0.20 0.016 264 / 0.72); --ls-track: oklch(0.93 0.008 250 / 0.10); --ls-link: var(--ls-lemon); --ls-glow-a: oklch(0.86 0.17 98 / 0.10); --ls-glow-b: oklch(0.55 0.13 260 / 0.14); } /* ---- Light surfaces ---- */ [data-bs-theme="light"] { color-scheme: light; --bs-body-bg: oklch(0.985 0.006 95); --bs-body-color: oklch(0.24 0.015 262); --bs-emphasis-color: oklch(0.16 0.015 262); --bs-link-color: var(--ls-lemon-deep); --bs-link-hover-color: oklch(0.66 0.15 90); --bs-border-color: oklch(0.24 0.015 262 / 0.12); --ls-surface: oklch(1 0 0); --ls-surface-2: oklch(0.975 0.006 95); --ls-border: oklch(0.24 0.015 262 / 0.12); --ls-muted: oklch(0.48 0.012 262); --ls-topbar: oklch(1 0 0 / 0.72); --ls-track: oklch(0.24 0.015 262 / 0.08); --ls-link: var(--ls-lemon-deep); --ls-glow-a: oklch(0.86 0.17 98 / 0.22); --ls-glow-b: oklch(0.80 0.09 230 / 0.16); } /* ---- Base ---- */ body { min-height: 100vh; background: radial-gradient(60rem 40rem at 88% -10%, var(--ls-glow-a), transparent 60%), radial-gradient(50rem 40rem at -8% 8%, var(--ls-glow-b), transparent 55%), var(--bs-body-bg); background-attachment: fixed; } .mono { font-family: var(--ls-mono); font-variant-numeric: tabular-nums; } .text-muted, .text-secondary { color: var(--ls-muted) !important; } ::selection { background: var(--ls-lemon-glow); } :focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ls-lemon-glow), 0 0 0 1.5px var(--ls-lemon); border-radius: 8px; } /* ========================================================================= Theme toggle icon (driven by [data-bs-theme] on ) ========================================================================= */ .theme-icon-light { display: none; } [data-bs-theme="light"] .theme-icon-dark { display: none; } [data-bs-theme="light"] .theme-icon-light { display: inline; } /* ========================================================================= Top bar ========================================================================= */ .ls-topbar { position: sticky; top: 0; z-index: 1030; background: var(--ls-topbar); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); border-bottom: 1px solid var(--ls-border); } .ls-brand { display: inline-flex; align-items: center; gap: .6rem; font-weight: 700; letter-spacing: -0.02em; font-size: 1.05rem; color: var(--bs-body-color); text-decoration: none; } .ls-brand .lemon { width: 26px; height: 26px; border-radius: 9px; display: grid; place-items: center; background: linear-gradient(150deg, var(--ls-lemon), oklch(0.80 0.16 78)); box-shadow: 0 4px 14px var(--ls-lemon-glow); color: oklch(0.22 0.05 90); font-weight: 800; font-size: .82rem; } .ls-nav a { color: var(--ls-muted); text-decoration: none; font-weight: 500; font-size: .9rem; padding: .35rem .2rem; position: relative; } .ls-nav a:hover { color: var(--bs-body-color); } .ls-nav a.active { color: var(--bs-body-color); } .ls-nav a.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.9rem; height: 2px; background: var(--ls-lemon); border-radius: 2px; } .ls-userchip { display: inline-flex; align-items: center; gap: .5rem; padding: .3rem .3rem .3rem .7rem; border-radius: 999px; border: 1px solid var(--ls-border); background: var(--ls-surface); font-size: .82rem; color: var(--ls-muted); } .ls-avatar { width: 26px; height: 26px; border-radius: 999px; display: grid; place-items: center; background: color-mix(in oklab, var(--ls-lemon) 30%, var(--ls-surface-2)); color: var(--bs-body-color); font-weight: 600; font-size: .74rem; text-transform: uppercase; } .ls-icon-btn { width: 38px; height: 38px; border-radius: 11px; border: 1px solid var(--ls-border); background: var(--ls-surface); color: var(--bs-body-color); display: grid; place-items: center; cursor: pointer; transition: background .18s ease, transform .18s ease; line-height: 1; } .ls-icon-btn:hover { background: var(--ls-surface-2); transform: translateY(-1px); } /* ========================================================================= Cards / bento ========================================================================= */ .ls-card { background: var(--ls-surface); border: 1px solid var(--ls-border); border-radius: var(--ls-radius); box-shadow: 0 1px 0 color-mix(in oklab, var(--bs-body-color) 4%, transparent), 0 12px 30px -22px color-mix(in oklab, var(--ls-ink) 70%, transparent); } .ls-inst { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .ls-inst:hover { transform: translateY(-3px); border-color: color-mix(in oklab, var(--ls-lemon) 40%, var(--ls-border)); box-shadow: 0 18px 40px -24px color-mix(in oklab, var(--ls-ink) 85%, transparent); } .ls-card-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .9rem 1.1rem; border-bottom: 1px solid var(--ls-border); } .ls-card-body { padding: 1.1rem; } .ls-inst-id { font-weight: 600; letter-spacing: -0.01em; text-decoration: none; color: var(--bs-body-color); } .ls-inst-id:hover { color: var(--ls-link); } .ls-region { font-family: var(--ls-mono); font-size: .68rem; color: var(--ls-muted); border: 1px solid var(--ls-border); border-radius: 6px; padding: .05rem .35rem; } /* KPI stat cards */ .ls-kpi { padding: 1rem 1.15rem; } .ls-kpi .label { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ls-muted); } .ls-kpi .value { font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.2rem); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .ls-dot { width: 9px; height: 9px; border-radius: 999px; display: inline-block; } .ls-dot.ok { background: var(--ls-ok); } .ls-dot.warn { background: var(--ls-warn); } .ls-dot.crit { background: var(--ls-crit); } /* ========================================================================= Filesystem rows + status ========================================================================= */ .fs-row { padding: .55rem 0; } .fs-row + .fs-row { border-top: 1px dashed var(--ls-border); } .fs-top { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; } .fs-mount { font-family: var(--ls-mono); font-size: .84rem; font-weight: 500; } .fs-pct { font-family: var(--ls-mono); font-variant-numeric: tabular-nums; font-weight: 600; font-size: .84rem; } .fs-meta { font-size: .74rem; color: var(--ls-muted); margin-top: .3rem; display: flex; gap: .6rem; flex-wrap: wrap; } .ls-track { height: 8px; border-radius: 999px; background: var(--ls-track); overflow: hidden; margin-top: .4rem; } .ls-fill { height: 100%; border-radius: 999px; background-image: linear-gradient(90deg, color-mix(in oklab, var(--c) 80%, black 6%), var(--c)); box-shadow: 0 0 12px -2px color-mix(in oklab, var(--c) 60%, transparent); transform-origin: left; animation: ls-grow .9s cubic-bezier(.22, 1, .36, 1) both; } .ls-fill.ok, .fs-pct.ok { --c: var(--ls-ok); } .ls-fill.warn, .fs-pct.warn { --c: var(--ls-warn); } .ls-fill.crit, .fs-pct.crit { --c: var(--ls-crit); } .fs-pct.ok { color: var(--ls-ok); } .fs-pct.warn { color: var(--ls-warn); } .fs-pct.crit { color: var(--ls-crit); } @keyframes ls-grow { from { transform: scaleX(0); } } /* status pill */ .ls-pill { display: inline-flex; align-items: center; gap: .35rem; font-size: .68rem; font-weight: 600; letter-spacing: .02em; padding: .12rem .5rem; border-radius: 999px; border: 1px solid color-mix(in oklab, var(--c) 45%, transparent); background: color-mix(in oklab, var(--c) 14%, transparent); color: var(--c); } .ls-pill.ok { --c: var(--ls-ok); } .ls-pill.warn { --c: var(--ls-warn); } .ls-pill.crit { --c: var(--ls-crit); } .ls-pill.none { --c: var(--ls-muted); } .ls-pill .ls-dot { background: var(--c); } /* ========================================================================= Buttons ========================================================================= */ .btn-lemon { --c: var(--ls-lemon); background: linear-gradient(150deg, var(--ls-lemon), oklch(0.80 0.16 80)); color: oklch(0.20 0.05 90); font-weight: 600; border: none; box-shadow: 0 8px 20px -10px var(--ls-lemon-glow); } .btn-lemon:hover, .btn-lemon:focus { filter: brightness(1.05); color: oklch(0.18 0.05 90); transform: translateY(-1px); } .btn-ghost { background: var(--ls-surface); border: 1px solid var(--ls-border); color: var(--bs-body-color); } .btn-ghost:hover { background: var(--ls-surface-2); color: var(--bs-body-color); } /* search / plain inputs */ .ls-search { background: var(--ls-surface); border: 1px solid var(--ls-border); color: var(--bs-body-color); border-radius: 11px; padding: .5rem .85rem; } .ls-search::placeholder { color: var(--ls-muted); } .ls-search:focus { outline: none; border-color: var(--ls-lemon); box-shadow: 0 0 0 3px var(--ls-lemon-glow); } /* ========================================================================= Tables (per-instance history) ========================================================================= */ .ls-table-wrap { background: var(--ls-surface); border: 1px solid var(--ls-border); border-radius: var(--ls-radius); overflow: hidden; } .table.ls-table { margin: 0; color: var(--bs-body-color); --bs-table-bg: transparent; } .ls-table thead th { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ls-muted); font-weight: 600; border-bottom: 1px solid var(--ls-border); background: var(--ls-surface-2); } .ls-table td, .ls-table th { border-color: var(--ls-border); padding: .6rem .9rem; vertical-align: middle; } .ls-table tbody tr:hover td { background: color-mix(in oklab, var(--ls-lemon) 6%, transparent); } /* ========================================================================= Alerts (flash messages + form errors) ------------------------------------------------------------------------- Overrides Bootstrap 5.3's per-variant colour/bg/border with tokenised tints. Same --c pattern used by .ls-pill / .ls-fill so success/danger/ warning stay aligned with the disk-status scale, never with lemon. ========================================================================= */ .alert { border-radius: var(--ls-radius-sm); border: 1px solid color-mix(in oklab, var(--c, var(--ls-border)) 40%, var(--ls-border)); background: color-mix(in oklab, var(--c, var(--ls-surface-2)) 12%, var(--ls-surface)); color: var(--bs-body-color); padding: .75rem 1rem; } .alert-success { --c: var(--ls-ok); } .alert-danger { --c: var(--ls-crit); } .alert-warning { --c: var(--ls-warn); } .alert-info { --c: var(--ls-muted); } .alert-dismissible .btn-close { padding: .95rem 1rem; filter: none; opacity: .7; } .alert-dismissible .btn-close:hover { opacity: 1; } [data-bs-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } /* ========================================================================= Login / auth card ========================================================================= */ .ls-auth { width: 100%; max-width: 400px; margin-inline: auto; padding: 2rem; background: var(--ls-surface); border: 1px solid var(--ls-border); border-radius: 22px; box-shadow: 0 30px 70px -40px color-mix(in oklab, var(--ls-ink) 90%, transparent); } .lemon-lg { width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; background: linear-gradient(150deg, var(--ls-lemon), oklch(0.80 0.16 78)); box-shadow: 0 10px 26px -8px var(--ls-lemon-glow); color: oklch(0.20 0.05 90); font-weight: 800; font-size: 1.1rem; } .ls-label { font-size: .8rem; font-weight: 500; color: var(--ls-muted); margin-bottom: .35rem; } .ls-auth .form-control { background: var(--ls-surface-2); border: 1px solid var(--ls-border); color: var(--bs-body-color); border-radius: 11px; padding: .6rem .8rem; } .ls-auth .form-control:focus { background: var(--ls-surface-2); color: var(--bs-body-color); border-color: var(--ls-lemon); box-shadow: 0 0 0 3px var(--ls-lemon-glow); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } }