33c7b2ba65
- JSON panel header (bg-slate-900) no longer flips to light gray inside the dark terminal block — scoped override keeps it #161b22 - Title text and copy button styled consistently for dark context - Orange Ansible status card gets proper light-mode colors (orange-50 bg, orange-200 border, orange-600 text) - application/json badge tweaked to text-indigo-400 for consistency
633 lines
19 KiB
CSS
633 lines
19 KiB
CSS
/* Fonts are self-hosted via @fontsource (imported in main.tsx) - no external CDN. */
|
||
@import "tailwindcss";
|
||
|
||
@theme {
|
||
--font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
|
||
--font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
|
||
}
|
||
|
||
/* ── AirIT brand tokens ────────────────────────────────────────── */
|
||
:root {
|
||
--airit-navy: #003A70;
|
||
--airit-navy-dark: #002B55;
|
||
--airit-blue: #005AA0;
|
||
--airit-gray: #6F7478;
|
||
--airit-text: #1F2933;
|
||
--airit-bg: #FFFFFF;
|
||
--airit-bg-soft: #F3F5F7;
|
||
--airit-border: #D6DADF;
|
||
}
|
||
|
||
/* ── CSS custom properties ─────────────────────────────────────── */
|
||
:root {
|
||
--bg: #0b0f19;
|
||
--bg-header: #0f172a;
|
||
--bg-card: #1e293b;
|
||
--bg-inner: #090d16;
|
||
--bg-input: #020408;
|
||
--border: #1e293b;
|
||
--border-muted:#334155;
|
||
--text: #f1f5f9;
|
||
--text-muted: #94a3b8;
|
||
--text-label: #cbd5e1;
|
||
}
|
||
|
||
:root.light {
|
||
--bg: #f1f5f9;
|
||
--bg-header: #ffffff;
|
||
--bg-card: #ffffff;
|
||
--bg-inner: #f8fafc;
|
||
--bg-input: #ffffff;
|
||
--border: #e2e8f0;
|
||
--border-muted:#cbd5e1;
|
||
--text: #0f172a;
|
||
--text-muted: #475569;
|
||
--text-label: #334155;
|
||
}
|
||
|
||
/* ── LIGHT MODE OVERRIDES ─────────────────────────────────────── */
|
||
|
||
/* Root / body */
|
||
:root.light body,
|
||
:root.light #main-root {
|
||
background-color: var(--bg) !important;
|
||
color: var(--text) !important;
|
||
}
|
||
|
||
/* ── Backgrounds: all dark hex variants → card/inner */
|
||
:root.light .bg-\[\#0B0F19\],
|
||
:root.light .bg-\[\#0b0f19\] {
|
||
background-color: var(--bg) !important;
|
||
}
|
||
|
||
:root.light .bg-\[\#0F172A\],
|
||
:root.light .bg-\[\#0f172a\] {
|
||
background-color: var(--bg-header) !important;
|
||
border-color: var(--border) !important;
|
||
}
|
||
|
||
:root.light .bg-\[\#1E293B\],
|
||
:root.light .bg-\[\#1e293b\] {
|
||
background-color: var(--bg-card) !important;
|
||
border-color: var(--border) !important;
|
||
}
|
||
|
||
/* Amber-tinted warning/safety card used in Dashboard */
|
||
:root.light .bg-\[\#1D2535\],
|
||
:root.light .bg-\[\#1d2535\] {
|
||
background-color: #fffbeb !important;
|
||
border-color: #fde68a !important;
|
||
}
|
||
|
||
/* ── Header & nav ─────────────────────────────────────────────── */
|
||
:root.light header,
|
||
:root.light #app-header {
|
||
background-color: var(--bg-header) !important;
|
||
border-color: var(--border) !important;
|
||
color: var(--text) !important;
|
||
}
|
||
|
||
:root.light aside,
|
||
:root.light #nav-sidebar {
|
||
background-color: #f8fafc !important;
|
||
border-color: var(--border) !important;
|
||
}
|
||
|
||
/* ── Slate utility backgrounds ────────────────────────────────── */
|
||
:root.light .bg-slate-950,
|
||
:root.light .bg-slate-900 {
|
||
background-color: #f1f5f9 !important;
|
||
border-color: var(--border) !important;
|
||
}
|
||
|
||
:root.light .bg-slate-800 {
|
||
background-color: #e2e8f0 !important;
|
||
}
|
||
|
||
/* opacity variants */
|
||
:root.light .bg-slate-950\/10,
|
||
:root.light .bg-slate-950\/20,
|
||
:root.light .bg-slate-950\/30,
|
||
:root.light .bg-slate-950\/40,
|
||
:root.light .bg-slate-950\/60,
|
||
:root.light .bg-slate-950\/80 {
|
||
background-color: rgba(241, 245, 249, 0.85) !important;
|
||
}
|
||
|
||
:root.light .bg-slate-900\/10,
|
||
:root.light .bg-slate-900\/35,
|
||
:root.light .bg-slate-900\/40,
|
||
:root.light .bg-slate-900\/60,
|
||
:root.light .bg-slate-900\/80 {
|
||
background-color: #f8fafc !important;
|
||
}
|
||
|
||
:root.light .bg-slate-800\/50,
|
||
:root.light .bg-slate-800\/60,
|
||
:root.light .bg-slate-800\/80 {
|
||
background-color: #e9ecf0 !important;
|
||
}
|
||
|
||
/* ── Dashboard banner gradient ────────────────────────────────── */
|
||
:root.light .bg-gradient-to-br {
|
||
background-image: linear-gradient(to bottom right, #ffffff, #f1f5f9) !important;
|
||
border-color: var(--border) !important;
|
||
}
|
||
|
||
/* ── Inputs, selects, textareas ───────────────────────────────── */
|
||
:root.light input,
|
||
:root.light select,
|
||
:root.light textarea {
|
||
background-color: var(--bg-input) !important;
|
||
border-color: var(--border-muted) !important;
|
||
color: var(--text) !important;
|
||
}
|
||
|
||
:root.light option {
|
||
background-color: #ffffff !important;
|
||
color: var(--text) !important;
|
||
}
|
||
|
||
:root.light input:focus,
|
||
:root.light select:focus,
|
||
:root.light textarea:focus {
|
||
border-color: #6366f1 !important;
|
||
}
|
||
|
||
/* ── Borders ──────────────────────────────────────────────────── */
|
||
:root.light .border-slate-800,
|
||
:root.light .border-slate-850,
|
||
:root.light .border-slate-855,
|
||
:root.light .border-slate-700,
|
||
:root.light .border-\[\#1E293B\],
|
||
:root.light .border-\[\#1e293b\] {
|
||
border-color: var(--border) !important;
|
||
}
|
||
|
||
:root.light .divide-slate-800 > *,
|
||
:root.light .divide-slate-850 > * {
|
||
border-color: var(--border) !important;
|
||
}
|
||
|
||
/* ── Text colours ─────────────────────────────────────────────── */
|
||
:root.light .text-white,
|
||
:root.light .text-slate-100,
|
||
:root.light .text-slate-200 {
|
||
color: var(--text) !important;
|
||
}
|
||
|
||
:root.light .text-slate-300 {
|
||
color: #334155 !important;
|
||
}
|
||
|
||
:root.light .text-slate-400 {
|
||
color: #64748b !important;
|
||
}
|
||
|
||
:root.light .text-slate-500 {
|
||
color: #94a3b8 !important;
|
||
}
|
||
|
||
/* Accent colours - slightly darkened for readability on white */
|
||
:root.light .text-emerald-400 {
|
||
color: #059669 !important;
|
||
}
|
||
|
||
:root.light .text-cyan-400 {
|
||
color: #0891b2 !important;
|
||
}
|
||
|
||
:root.light .text-indigo-400 {
|
||
color: #4f46e5 !important;
|
||
}
|
||
|
||
:root.light .text-amber-400,
|
||
:root.light .text-amber-500 {
|
||
color: #d97706 !important;
|
||
}
|
||
|
||
:root.light .text-rose-400,
|
||
:root.light .text-rose-450 {
|
||
color: #be123c !important;
|
||
}
|
||
|
||
/* ── Accent / status badge backgrounds ───────────────────────── */
|
||
:root.light .bg-emerald-950\/60,
|
||
:root.light .bg-emerald-950\/50,
|
||
:root.light .bg-emerald-950\/40,
|
||
:root.light .bg-emerald-950\/20,
|
||
:root.light .bg-emerald-950\/80 {
|
||
background-color: #d1fae5 !important;
|
||
border-color: #6ee7b7 !important;
|
||
color: #065f46 !important;
|
||
}
|
||
|
||
:root.light .bg-indigo-950\/60,
|
||
:root.light .bg-indigo-950\/50,
|
||
:root.light .bg-indigo-950\/40 {
|
||
background-color: #e0e7ff !important;
|
||
border-color: #a5b4fc !important;
|
||
color: #3730a3 !important;
|
||
}
|
||
|
||
:root.light .bg-rose-950\/60,
|
||
:root.light .bg-rose-950\/40,
|
||
:root.light .bg-rose-950\/20 {
|
||
background-color: #ffe4e6 !important;
|
||
border-color: #fca5a5 !important;
|
||
color: #9f1239 !important;
|
||
}
|
||
|
||
:root.light .bg-red-950\/60,
|
||
:root.light .bg-red-950\/40,
|
||
:root.light .bg-red-950\/20 {
|
||
background-color: #fee2e2 !important;
|
||
border-color: #fca5a5 !important;
|
||
color: #b91c1c !important;
|
||
}
|
||
|
||
:root.light .border-red-800\/60 {
|
||
border-color: #fca5a5 !important;
|
||
}
|
||
|
||
:root.light .text-red-300 {
|
||
color: #b91c1c !important;
|
||
}
|
||
|
||
:root.light .text-red-400 {
|
||
color: #dc2626 !important;
|
||
}
|
||
|
||
:root.light .bg-cyan-950\/40 {
|
||
background-color: #cffafe !important;
|
||
border-color: #67e8f9 !important;
|
||
color: #155e75 !important;
|
||
}
|
||
|
||
:root.light .bg-amber-950\/40,
|
||
:root.light .bg-amber-900\/30 {
|
||
background-color: #fef3c7 !important;
|
||
border-color: #fde68a !important;
|
||
color: #92400e !important;
|
||
}
|
||
|
||
/* ── Nav sidebar active item ──────────────────────────────────── */
|
||
:root.light #nav-sidebar button {
|
||
color: #475569 !important;
|
||
}
|
||
|
||
:root.light #nav-sidebar button:hover:not(.bg-gradient-to-r) {
|
||
background-color: rgba(0, 0, 0, 0.05) !important;
|
||
color: var(--text) !important;
|
||
}
|
||
|
||
/* ── Sidebar telemetry box ────────────────────────────────────── */
|
||
:root.light #nav-sidebar .bg-slate-950 {
|
||
background-color: #f1f5f9 !important;
|
||
border-color: var(--border-muted) !important;
|
||
}
|
||
|
||
/* ── Dropdown panels (mail, bell) ─────────────────────────────── */
|
||
:root.light .bg-\[\#1E293B\].rounded-xl,
|
||
:root.light .shadow-2xl.rounded-xl {
|
||
background-color: #ffffff !important;
|
||
border-color: var(--border-muted) !important;
|
||
}
|
||
|
||
/* ── Table internals ──────────────────────────────────────────── */
|
||
:root.light table {
|
||
color: var(--text) !important;
|
||
}
|
||
|
||
:root.light thead {
|
||
background-color: #f8fafc !important;
|
||
}
|
||
|
||
:root.light tbody tr:hover {
|
||
background-color: #f1f5f9 !important;
|
||
}
|
||
|
||
:root.light .bg-\[\#0f172a\]\/60,
|
||
:root.light tr.bg-\[\#0f172a\] {
|
||
background-color: #f1f5f9 !important;
|
||
}
|
||
|
||
/* ── Dashed empty states ──────────────────────────────────────── */
|
||
:root.light .border-dashed {
|
||
border-color: var(--border-muted) !important;
|
||
}
|
||
|
||
/* ── DeviceInventory ──────────────────────────────────────────── */
|
||
|
||
/* Emergency Sheet container (amber-tinted dark card) */
|
||
:root.light .bg-\[\#1D2432\],
|
||
:root.light .bg-\[\#1d2432\] {
|
||
background-color: #fffbeb !important;
|
||
border-color: #fde68a !important;
|
||
}
|
||
|
||
/* Emergency sheet markdown content area - light in light mode */
|
||
:root.light .bg-\[\#1D2432\] .bg-slate-950\/80,
|
||
:root.light .bg-\[\#1d2432\] .bg-slate-950\/80 {
|
||
background-color: #ffffff !important;
|
||
border-color: var(--border) !important;
|
||
color: var(--text) !important;
|
||
}
|
||
|
||
:root.light .bg-\[\#1D2432\] .bg-slate-950\/80 *,
|
||
:root.light .bg-\[\#1d2432\] .bg-slate-950\/80 * {
|
||
color: var(--text) !important;
|
||
}
|
||
|
||
/* Keep emerald headings readable */
|
||
:root.light .bg-\[\#1D2432\] .bg-slate-950\/80 h5,
|
||
:root.light .bg-\[\#1d2432\] .bg-slate-950\/80 h5 {
|
||
color: #059669 !important;
|
||
}
|
||
|
||
/* Device type icon pill backgrounds */
|
||
:root.light .bg-rose-950\/20 { background-color: #fff1f2 !important; border-color: #fecdd3 !important; }
|
||
:root.light .bg-amber-950\/20 { background-color: #fffbeb !important; border-color: #fde68a !important; }
|
||
:root.light .bg-cyan-950\/20 { background-color: #ecfeff !important; border-color: #a5f3fc !important; }
|
||
:root.light .bg-teal-950\/20 { background-color: #f0fdfa !important; border-color: #99f6e4 !important; }
|
||
|
||
/* Filter toolbar type-filter buttons */
|
||
:root.light .bg-slate-850,
|
||
:root.light .hover\:bg-slate-850:hover {
|
||
background-color: #e2e8f0 !important;
|
||
}
|
||
|
||
/* Device card selected state */
|
||
:root.light #inventory-list-container .bg-slate-900.border-emerald-500\/80 {
|
||
background-color: #f0fdf4 !important;
|
||
border-color: #10b981 !important;
|
||
}
|
||
|
||
/* Device card unselected/hover */
|
||
:root.light #inventory-list-container .bg-slate-900\/40 {
|
||
background-color: #f8fafc !important;
|
||
border-color: var(--border) !important;
|
||
}
|
||
|
||
:root.light #inventory-list-container .hover\:bg-slate-900\/60:hover {
|
||
background-color: #f1f5f9 !important;
|
||
}
|
||
|
||
/* SPECS ID badge and code block inside right panel */
|
||
:root.light #inventory-details-container .bg-slate-950 {
|
||
background-color: #f1f5f9 !important;
|
||
border-color: var(--border) !important;
|
||
color: var(--text) !important;
|
||
}
|
||
|
||
:root.light #inventory-details-container .bg-slate-900\/50,
|
||
:root.light #inventory-details-container .bg-slate-900\/60 {
|
||
background-color: #f8fafc !important;
|
||
border-color: var(--border) !important;
|
||
}
|
||
|
||
/* Amber rescue badge */
|
||
:root.light .bg-amber-950 {
|
||
background-color: #fef3c7 !important;
|
||
border-color: #fde68a !important;
|
||
color: #92400e !important;
|
||
}
|
||
|
||
/* ── Dashboard "NET" watermark: invisible in light mode ───────── */
|
||
:root.light #dashboard-cockpit-root .text-slate-800 {
|
||
color: transparent !important;
|
||
}
|
||
|
||
/* ── Modal overlays ───────────────────────────────────────────── */
|
||
:root.light .fixed.inset-0 {
|
||
background-color: rgba(15, 23, 42, 0.45) !important;
|
||
}
|
||
|
||
:root.light .fixed.inset-0 > div,
|
||
:root.light .bg-\[\#0F172A\].rounded-2xl {
|
||
background-color: #ffffff !important;
|
||
border-color: var(--border-muted) !important;
|
||
}
|
||
|
||
/* ── Lab Template Modal internals ─────────────────────────────── */
|
||
|
||
/* Modal header bar */
|
||
:root.light .fixed.inset-0 .bg-slate-900.border-b {
|
||
background-color: #f8fafc !important;
|
||
border-color: var(--border) !important;
|
||
}
|
||
|
||
/* Modal form body */
|
||
:root.light .fixed.inset-0 form {
|
||
background-color: #ffffff !important;
|
||
}
|
||
|
||
/* Device-toggle buttons inside modal */
|
||
:root.light .fixed.inset-0 .bg-slate-900.border-slate-800 {
|
||
background-color: #f1f5f9 !important;
|
||
border-color: var(--border) !important;
|
||
color: var(--text-label) !important;
|
||
}
|
||
|
||
:root.light .fixed.inset-0 .bg-slate-900.border-slate-850 {
|
||
background-color: #f1f5f9 !important;
|
||
}
|
||
|
||
/* Device grid area */
|
||
:root.light .bg-slate-950\/60 {
|
||
background-color: #f8fafc !important;
|
||
border-color: var(--border) !important;
|
||
}
|
||
|
||
/* Link builder row */
|
||
:root.light .bg-slate-1000,
|
||
:root.light .bg-slate-1000\/40 {
|
||
background-color: #f1f5f9 !important;
|
||
border-color: var(--border) !important;
|
||
}
|
||
|
||
/* Existing link row badges */
|
||
:root.light .fixed.inset-0 .bg-slate-900\/40 {
|
||
background-color: #f8fafc !important;
|
||
}
|
||
|
||
/* border-slate-700 in modal context */
|
||
:root.light .border-slate-700 {
|
||
border-color: var(--border) !important;
|
||
}
|
||
|
||
/* ── Login / Register pages ───────────────────────────────────── */
|
||
:root.light .min-h-screen.bg-\[\#0B0F19\] {
|
||
background-color: var(--bg) !important;
|
||
}
|
||
|
||
:root.light .bg-slate-950\/80 {
|
||
background-color: rgba(255, 255, 255, 0.9) !important;
|
||
border-color: var(--border) !important;
|
||
}
|
||
|
||
/* ── Code / terminal blocks - always dark ─────────────────────── */
|
||
:root.light pre,
|
||
:root.light code,
|
||
:root.light .font-mono.bg-slate-950 {
|
||
background-color: #0d1117 !important;
|
||
color: #00f0ff !important;
|
||
border-color: #1f242c !important;
|
||
}
|
||
|
||
:root.light pre *,
|
||
:root.light code * {
|
||
color: inherit !important;
|
||
}
|
||
|
||
/* ── Settings page – blue (Entra ID) tokens ─────────────────────── */
|
||
:root.light .bg-blue-950\/60,
|
||
:root.light .bg-blue-950\/50,
|
||
:root.light .bg-blue-950\/40 {
|
||
background-color: #dbeafe !important;
|
||
border-color: #93c5fd !important;
|
||
color: #1d4ed8 !important;
|
||
}
|
||
|
||
:root.light .border-blue-900\/50,
|
||
:root.light .border-blue-900\/40 {
|
||
border-color: #93c5fd !important;
|
||
}
|
||
|
||
:root.light .text-blue-400 {
|
||
color: #1d4ed8 !important;
|
||
}
|
||
|
||
/* ── AirIT badge - always white text on navy, regardless of theme ─ */
|
||
.airit-badge {
|
||
color: #ffffff !important;
|
||
background-color: var(--airit-navy) !important;
|
||
}
|
||
|
||
/* ── Text selection ───────────────────────────────────────────── */
|
||
:root.light ::selection {
|
||
background-color: rgba(5, 150, 105, 0.2) !important;
|
||
color: #047857 !important;
|
||
}
|
||
|
||
/* ── Reservation Details Modal (BookingDetailsModal) ──────────── */
|
||
|
||
/* Device node cards inside right panel */
|
||
:root.light #booking-details-modal .bg-slate-950\/65 {
|
||
background-color: #f8fafc !important;
|
||
border-color: var(--border) !important;
|
||
}
|
||
|
||
/* JSON REST Response panel – always dark (code/terminal aesthetic) */
|
||
:root.light #booking-details-modal .font-mono.bg-slate-950 {
|
||
background-color: #0d1117 !important;
|
||
color: #c9d1d9 !important;
|
||
border-color: #30363d !important;
|
||
}
|
||
|
||
/* Header bar inside the dark JSON panel – keep dark to match the block */
|
||
:root.light #booking-details-modal .font-mono.bg-slate-950 .bg-slate-900 {
|
||
background-color: #161b22 !important;
|
||
border-color: #30363d !important;
|
||
}
|
||
|
||
/* Title label and icon in dark panel header */
|
||
:root.light #booking-details-modal .font-mono.bg-slate-950 .text-indigo-400 {
|
||
color: #818cf8 !important;
|
||
}
|
||
|
||
/* Copy button inside dark panel */
|
||
:root.light #booking-details-modal .font-mono.bg-slate-950 button {
|
||
background-color: #21262d !important;
|
||
border-color: #30363d !important;
|
||
color: #8b949e !important;
|
||
}
|
||
:root.light #booking-details-modal .font-mono.bg-slate-950 button:hover {
|
||
background-color: #30363d !important;
|
||
color: #f0f6fc !important;
|
||
}
|
||
|
||
/* Ansible status card – orange accent in light mode */
|
||
:root.light #booking-details-modal .bg-orange-950\/10 {
|
||
background-color: #fff7ed !important;
|
||
}
|
||
:root.light #booking-details-modal .border-orange-900\/40 {
|
||
border-color: #fdba74 !important;
|
||
}
|
||
:root.light .text-orange-400 {
|
||
color: #ea580c !important;
|
||
}
|
||
:root.light .bg-orange-950\/60,
|
||
:root.light .bg-orange-900\/40 {
|
||
background-color: #fed7aa !important;
|
||
border-color: #fb923c !important;
|
||
color: #9a3412 !important;
|
||
}
|
||
:root.light .border-orange-800\/50 {
|
||
border-color: #fb923c !important;
|
||
}
|
||
|
||
/* bg-slate-900/40 rows (notice box etc.) – light in light mode */
|
||
:root.light #booking-details-modal .bg-slate-900\/40 {
|
||
background-color: #f1f5f9 !important;
|
||
border-color: var(--border) !important;
|
||
color: var(--text) !important;
|
||
}
|
||
|
||
/* ── Reserve Slot selects & date pickers (BookingCalendar) ───── */
|
||
:root.light #booking-actions-card select,
|
||
:root.light #booking-actions-card input[type="text"],
|
||
:root.light #booking-actions-card input[type="date"],
|
||
:root.light #booking-actions-card textarea {
|
||
background-color: #ffffff !important;
|
||
border-color: var(--border-muted) !important;
|
||
color: var(--text) !important;
|
||
}
|
||
|
||
/* Date picker calendar icon - invert to dark in light mode */
|
||
:root.light input[type="date"]::-webkit-calendar-picker-indicator {
|
||
filter: invert(0.6);
|
||
cursor: pointer;
|
||
}
|
||
|
||
/* ── Define Ports dropdowns & Link Builder (LabTemplates modal) ── */
|
||
|
||
/* Non-standard text/border classes used in the link builder */
|
||
:root.light .text-slate-250 {
|
||
color: var(--text) !important;
|
||
}
|
||
|
||
:root.light .border-slate-805 {
|
||
border-color: var(--border) !important;
|
||
}
|
||
|
||
/* Selects and inputs inside any fixed modal overlay */
|
||
:root.light .fixed.inset-0 select,
|
||
:root.light .fixed.inset-0 input[type="text"],
|
||
:root.light .fixed.inset-0 input[type="email"],
|
||
:root.light .fixed.inset-0 input[type="password"],
|
||
:root.light .fixed.inset-0 input[type="date"],
|
||
:root.light .fixed.inset-0 textarea {
|
||
background-color: #ffffff !important;
|
||
border-color: var(--border-muted) !important;
|
||
color: var(--text) !important;
|
||
}
|
||
|
||
/* Link row items inside modal */
|
||
:root.light .fixed.inset-0 .bg-slate-950.font-mono {
|
||
background-color: #f8fafc !important;
|
||
border-color: var(--border) !important;
|
||
color: var(--text) !important;
|
||
}
|
||
|
||
/* "Add Link" button - keep readable white label on indigo in light mode
|
||
(the global :root.light .text-white override would otherwise darken it) */
|
||
:root.light #add-link-btn {
|
||
background-color: #4f46e5 !important;
|
||
color: #ffffff !important;
|
||
}
|
||
|
||
:root.light #add-link-btn:hover {
|
||
background-color: #6366f1 !important;
|
||
}
|