/* LimCLOUD brand theme — layered on top of Bootstrap 5.3. Swap /img/limula-mark.svg with the official Limula vector to make the logo pixel-exact; nothing here needs to change when you do. Light & dark modes share one palette of --lc-* variables. Light values live in :root; the [data-bs-theme="dark"] block near the bottom overrides them. Because every rule below reads the variables (never a hard-coded colour), dark mode is "free" — set data-bs-theme="dark" on (see js/theme.js). */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/inter-latin-400-normal.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/inter-latin-500-normal.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/inter-latin-600-normal.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/inter-latin-700-normal.woff2') format('woff2'); } :root { --lc-red: #E52421; --lc-red-hover: #c81f1c; --lc-red-active: #b81c1a; --lc-ink: #1a1d21; --lc-muted: #5a6068; --lc-border: #eceef1; --lc-bg: #f4f5f3; --lc-surface: #fff; /* cards, navbar, sticky table headers */ /* Bootstrap-wide tokens (used by links, focus, .text-primary, etc.) */ --bs-primary: var(--lc-red); --bs-primary-rgb: 229, 36, 33; --bs-link-color: var(--lc-red); --bs-link-color-rgb: 229, 36, 33; --bs-link-hover-color: var(--lc-red-hover); } body { font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--lc-ink); background-color: var(--lc-bg); } /* Login / change-password pages set .bg-light on ; keep them on the same brand gray so the white cards stand out. */ body.bg-light { background-color: var(--lc-bg) !important; } /* Bootstrap 5.3 buttons read their own component vars, so the brand colour has to be set at the component level rather than via --bs-primary alone. */ .btn-primary { --bs-btn-bg: var(--lc-red); --bs-btn-border-color: var(--lc-red); --bs-btn-hover-bg: var(--lc-red-hover); --bs-btn-hover-border-color: var(--lc-red-hover); --bs-btn-active-bg: var(--lc-red-active); --bs-btn-active-border-color: var(--lc-red-active); --bs-btn-disabled-bg: var(--lc-red); --bs-btn-disabled-border-color: var(--lc-red); } .btn-outline-primary { --bs-btn-color: var(--lc-red); --bs-btn-border-color: var(--lc-red); --bs-btn-hover-bg: var(--lc-red); --bs-btn-hover-border-color: var(--lc-red); --bs-btn-active-bg: var(--lc-red); --bs-btn-active-border-color: var(--lc-red); } .text-primary { color: var(--lc-red) !important; } .bg-primary { background-color: var(--lc-red) !important; } .form-control:focus, .form-select:focus { border-color: var(--lc-red); box-shadow: 0 0 0 0.2rem rgba(229, 36, 33, 0.2); } /* Light, Swiss-clean navbar (replaces the old navbar-dark bg-dark). */ .lc-nav { background-color: var(--lc-surface); border-bottom: 1px solid var(--lc-border); /* Taller, airier header like limula.ch, giving the wordmark room. */ padding: 1.25rem 1.5rem; } /* Nav links match limula.ch: near-black uppercase by default, gray on hover, red for the current page. */ .lc-nav .nav-link { color: var(--lc-ink); text-transform: uppercase; font-weight: 600; font-size: 0.875rem; letter-spacing: 0.04em; } .lc-nav .nav-link:hover, .lc-nav .nav-link:focus { color: var(--lc-muted); } .lc-nav .nav-link.active { color: var(--lc-red); } /* Reserves the navbar's height in each page's static HTML so content doesn't jump when nav.js mounts the nav into it (the nav is injected by JS after the first paint). Tuned to .lc-nav's ~80px height; the 1.5rem gap below replaces the nav's old mb-4. */ .lc-nav-slot { min-height: 5rem; margin-bottom: 1.5rem; } /* Icon-only light/dark switch in the navbar (see js/nav.js). */ .lc-theme-toggle { display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 0; padding: 0.25rem 0.4rem; border-radius: 8px; line-height: 1; color: var(--lc-muted); cursor: pointer; transition: color 0.12s ease; } .lc-theme-toggle:hover { color: var(--lc-red); } .lc-theme-toggle:focus-visible { outline: 2px solid var(--lc-red); outline-offset: 2px; } /* Uniform list-page header height whether it carries a filter + button (Devices) or just a title + button (Customers, Users). */ .lc-page-head { min-height: 40px; } .lc-page-head .btn-primary { min-width: 7.5rem; } /* Logo lockup: mark + "limCLOUD" wordmark. */ /* Baseline alignment drops the mark's bottom edge onto the wordmark's baseline, matching the limula.ch lockup. */ .lc-brand { display: inline-flex; align-items: baseline; gap: 0.5rem; } .lc-brand .lc-mark { height: 30px; width: auto; display: block; } .lc-wordmark { font-weight: 600; color: var(--lc-red); line-height: 1; letter-spacing: -0.01em; } .lc-wordmark b { font-weight: 600; } /* Large in the navbar so the ascenders nearly reach the top of the mark. */ .lc-nav .lc-wordmark { font-size: 1.9rem; } /* Running version tucked just under the wordmark. Positioned absolutely (out of flow) so that stamping it in after the async /api/version call can't widen the brand and shove the nav links to the right. */ #nav-version { position: absolute; top: 100%; left: 0.15rem; margin-top: -0.15rem; line-height: 1; white-space: nowrap; } /* Dashboard tiles: tinted-red icon chip + subtle red hover. */ .lc-tile { transition: border-color 0.12s ease, background-color 0.12s ease; } .lc-tile:hover { border-color: var(--lc-red); background-color: rgba(229, 36, 33, 0.03); } .lc-chip { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 10px; background: rgba(229, 36, 33, 0.10); color: var(--lc-red); margin-bottom: 0.75rem; } /* Quiet version chip (protocol / app version tags). Reads the palette vars so it stays subtle in both themes — unlike Bootstrap's fixed-bright bg-light. */ .badge.lc-ver { background-color: var(--lc-bg); color: var(--lc-muted); border: 1px solid var(--lc-border); font-weight: 400; } /* Modern, flat tables: airy rows, quiet uppercase headers, hairline separators, and a soft red row-hover. Applies to every Bootstrap .table. */ .table { --bs-table-bg: transparent; --bs-table-hover-bg: rgba(229, 36, 33, 0.04); --bs-table-border-color: var(--lc-border); margin-bottom: 0; color: var(--lc-ink); } .table > thead.table-light { --bs-table-bg: transparent; --bs-table-color: var(--lc-muted); } .table thead th { text-transform: uppercase; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; color: var(--lc-muted); border-bottom: 2px solid var(--lc-border); white-space: nowrap; /* Solid fill so sticky-top headers don't show scrolling rows through them. */ background-color: var(--lc-surface); } .table > :not(caption) > * > * { padding: 0.8rem 0.9rem; } .table > tbody > tr:last-child > * { border-bottom: 0; } /* Sortable column headers (see js/sortable.js). */ .table thead th.lc-sortable { cursor: pointer; user-select: none; } .table thead th.lc-sortable:hover { color: var(--lc-ink); } .table thead th.lc-sortable::after { content: "↕"; margin-left: 0.35em; font-size: 0.9em; opacity: 0.35; } .table thead th.lc-sort-asc::after { content: "↑"; opacity: 1; color: var(--lc-red); } .table thead th.lc-sort-desc::after { content: "↓"; opacity: 1; color: var(--lc-red); } /* Loading & empty placeholder states for tables and lists. */ .lc-state { text-align: center; color: var(--lc-muted); padding: 2rem 1rem; } /* Beat the generic table-cell padding rule above. */ .table td.lc-state { padding: 2rem 1rem; } .lc-loading::before { content: ""; display: inline-block; width: 1rem; height: 1rem; margin-right: 0.5rem; vertical-align: -0.15rem; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: lc-spin 0.6s linear infinite; } @keyframes lc-spin { to { transform: rotate(360deg); } } /* Whole-row link (e.g. device list rows open the device on click). */ .lc-rowlink { cursor: pointer; } /* Expanded CLEF/JSON detail row under a log entry (device Logs tab). */ .table td.lc-log-detail { background-color: var(--lc-bg); } /* ------------------------------------------------------------------ * * Dark mode. Overrides the --lc-* palette; every rule above inherits * automatically. We also repoint a few Bootstrap tokens so its own * components (cards, inputs, dropdowns…) share the same surfaces. * The Limula red stays the accent in both modes. * ------------------------------------------------------------------ */ [data-bs-theme="dark"] { --lc-ink: #e8eaed; --lc-muted: #99a1ab; --lc-border: #2a2f36; --lc-bg: #121417; /* page: near-black, faintly warm */ --lc-surface: #1b1e23; /* cards / navbar / sticky headers, one step up */ /* Point Bootstrap's core tokens at the brand palette. Setting --bs-body-bg to the *surface* colour makes cards (which default to var(--bs-body-bg)) sit one step above the page, mirroring how white cards float on the gray page in light mode. The page itself stays on --lc-bg via the explicit `body` rule above. */ --bs-body-bg: var(--lc-surface); --bs-body-color: var(--lc-ink); --bs-emphasis-color: var(--lc-ink); --bs-secondary-color: var(--lc-muted); --bs-tertiary-bg: var(--lc-bg); --bs-border-color: var(--lc-border); } /* Lift the red tints slightly in dark mode so hovers/chips stay visible against the darker surfaces. */ [data-bs-theme="dark"] .lc-tile:hover { background-color: rgba(229, 36, 33, 0.08); } [data-bs-theme="dark"] .table { --bs-table-hover-bg: rgba(229, 36, 33, 0.10); } /* A hair above the card surface so the chip reads as a quiet raised tag, not the near-white bubble Bootstrap's bg-light would give. */ [data-bs-theme="dark"] .badge.lc-ver { background-color: #262b31; }