/* * Armada IDP Intelligence — Django admin theme (Jazzmin reskin) * * Reskins Jazzmin's AdminLTE4/Bootstrap5 base to the Armada IDP dark/teal * design system (.claude/ui/skill.md). Loaded after adminlte.min.css, * the (default/no-op) bootswatch theme, and jazzmin/css/main.css — see * admin/base.html — so these overrides win the cascade. * * Strategy: Bootstrap 5.3 bakes literal hex into *some* component-local * custom properties (e.g. .btn-primary's --bs-btn-bg) rather than * referencing --bs-primary at the point of use, so a handful of * components need direct overrides in addition to the root-level tokens. */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); /* ── Armada design tokens ──────────────────────────────────────────── */ :root { --armada-bg: #06161B; --armada-mid: #0b1d23; --armada-fore: #192a30; --armada-border: #2a3d45; --armada-border-faint: rgba(42, 61, 69, 0.6); --armada-text-primary: #e6f0f3; --armada-text-secondary: rgba(230, 240, 243, 0.45); --armada-text-dim: rgba(230, 240, 243, 0.35); --armada-brand: #20C7C7; --armada-success: #34D399; --armada-warning: #FBBF24; --armada-danger: #F87171; --armada-info: #60A5FA; --armada-purple: #8b5cf6; --armada-font: 'Inter', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; } /* ── Core surface & text variables (cascades into cards/forms/tables) ─ */ :root, [data-bs-theme="dark"] { --bs-body-bg: var(--armada-bg); --bs-body-bg-rgb: 6, 22, 27; --bs-body-color: var(--armada-text-primary); --bs-body-color-rgb: 230, 240, 243; --bs-body-font-family: var(--armada-font); --bs-emphasis-color: var(--armada-text-primary); --bs-secondary-color: var(--armada-text-secondary); --bs-secondary-bg: var(--armada-mid); --bs-secondary-bg-rgb: 11, 29, 35; --bs-tertiary-color: var(--armada-text-dim); --bs-tertiary-bg: var(--armada-fore); --bs-tertiary-bg-rgb: 25, 42, 48; --bs-border-color: var(--armada-border); --bs-border-color-translucent: var(--armada-border-faint); --bs-link-color: var(--armada-brand); --bs-link-color-rgb: 32, 199, 199; --bs-link-hover-color: var(--armada-brand); --bs-heading-color: var(--armada-text-primary); /* Base theme colors + rgb companions (drives .text-bg-*, spinners, form validation icons) */ --bs-primary: var(--armada-brand); --bs-primary-rgb: 32, 199, 199; --bs-success: var(--armada-success); --bs-success-rgb: 52, 211, 153; --bs-warning: var(--armada-warning); --bs-warning-rgb: 251, 191, 36; --bs-danger: var(--armada-danger); --bs-danger-rgb: 248, 113, 113; --bs-info: var(--armada-info); --bs-info-rgb: 96, 165, 250; /* Subtle/emphasis/border-subtle triplets — same recipe as the badge system below, used by Bootstrap's alerts, callouts, and .text-bg-*-subtle */ --bs-primary-text-emphasis: var(--armada-brand); --bs-primary-bg-subtle: rgba(32, 199, 199, 0.12); --bs-primary-border-subtle: rgba(32, 199, 199, 0.30); --bs-success-text-emphasis: var(--armada-success); --bs-success-bg-subtle: rgba(52, 211, 153, 0.12); --bs-success-border-subtle: rgba(52, 211, 153, 0.25); --bs-warning-text-emphasis: var(--armada-warning); --bs-warning-bg-subtle: rgba(251, 191, 36, 0.12); --bs-warning-border-subtle: rgba(251, 191, 36, 0.25); --bs-danger-text-emphasis: var(--armada-danger); --bs-danger-bg-subtle: rgba(248, 113, 113, 0.12); --bs-danger-border-subtle: rgba(248, 113, 113, 0.25); --bs-info-text-emphasis: var(--armada-info); --bs-info-bg-subtle: rgba(96, 165, 250, 0.12); --bs-info-border-subtle: rgba(96, 165, 250, 0.25); } html, body { background-color: var(--armada-bg) !important; font-family: var(--armada-font); } /* jazzmin's carries the .bg-body-tertiary utility class, whose rgba(var(--bs-tertiary-bg-rgb), ...) resolves to a muddy grey — a class selector beats the plain `body` rule above even with !important, so this needs the extra element+class specificity to actually win. */ body.bg-body-tertiary { background-color: var(--armada-bg) !important; } /* ── Cards & panels ─────────────────────────────────────────────────── */ .card { --bs-card-bg: var(--armada-mid); --bs-card-border-color: var(--armada-border); --bs-card-cap-bg: rgba(230, 240, 243, 0.03); --bs-card-cap-color: var(--armada-text-secondary); border-radius: 12px; transition: border-color 0.15s ease; } .card:hover { border-color: rgba(32, 199, 199, 0.25); } .small-box, .info-box { background: var(--armada-mid) !important; border: 1px solid var(--armada-border); border-radius: 12px; } /* ── App header (top navbar) ───────────────────────────────────────── */ .app-header { background-color: var(--armada-mid) !important; border-bottom: 1px solid var(--armada-border); } .app-header .nav-link { color: var(--armada-text-secondary); transition: color 0.15s ease; } .app-header .nav-link:hover, .app-header .nav-link:focus { color: var(--armada-text-primary); } .brand-link { color: var(--armada-text-primary) !important; font-weight: 600; } /* Icon-only sidebar brand — no site name text next to the logo */ .brand-text { display: none !important; } /* ── Sidebar ────────────────────────────────────────────────────────── */ .app-sidebar { --lte-sidebar-hover-bg: var(--armada-fore); --lte-sidebar-hover-color: var(--armada-text-primary); --lte-sidebar-color: var(--armada-text-secondary); --lte-sidebar-active-color: var(--armada-text-primary); --lte-sidebar-menu-active-bg: rgba(32, 199, 199, 0.15); --lte-sidebar-menu-active-color: var(--armada-brand); --lte-sidebar-submenu-bg: transparent; --lte-sidebar-submenu-color: var(--armada-text-secondary); --lte-sidebar-submenu-hover-bg: var(--armada-fore); --lte-sidebar-submenu-hover-color: var(--armada-text-primary); --lte-sidebar-submenu-active-bg: rgba(32, 199, 199, 0.12); --lte-sidebar-submenu-active-color: var(--armada-brand); --lte-sidebar-header-color: var(--armada-text-dim); background-color: var(--armada-mid) !important; border-right: 1px solid var(--armada-border); } .app-sidebar .nav-link { border-radius: 8px; margin: 1px 8px; transition: background-color 0.15s ease, color 0.15s ease; } .app-sidebar .nav-header { color: var(--armada-text-dim); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .app-sidebar .nav-icon { opacity: 0.75; } .app-sidebar .nav-link.active .nav-icon { opacity: 1; } /* ── Buttons — component-local vars, must be set directly ───────────── (Bootstrap bakes literal colors into .btn-* rather than var(--bs-primary)) */ .btn { border-radius: 8px; font-weight: 600; transition: filter 0.15s ease, background-color 0.15s ease, border-color 0.15s ease; } .btn-primary { --bs-btn-color: var(--armada-bg); --bs-btn-bg: var(--armada-brand); --bs-btn-border-color: var(--armada-brand); --bs-btn-hover-color: var(--armada-bg); --bs-btn-hover-bg: #35d4d4; --bs-btn-hover-border-color: #35d4d4; --bs-btn-active-color: var(--armada-bg); --bs-btn-active-bg: #1ab3b3; --bs-btn-active-border-color: #1ab3b3; --bs-btn-disabled-bg: var(--armada-brand); --bs-btn-disabled-border-color: var(--armada-brand); } .btn-success { --bs-btn-color: #06161B; --bs-btn-bg: var(--armada-success); --bs-btn-border-color: var(--armada-success); --bs-btn-hover-color: #06161B; --bs-btn-hover-bg: #4ade9f; --bs-btn-hover-border-color: #4ade9f; --bs-btn-active-color: #06161B; --bs-btn-active-bg: #26b382; --bs-btn-active-border-color: #26b382; } .btn-warning { --bs-btn-color: #06161B; --bs-btn-bg: var(--armada-warning); --bs-btn-border-color: var(--armada-warning); --bs-btn-hover-color: #06161B; --bs-btn-hover-bg: #fcc94f; --bs-btn-hover-border-color: #fcc94f; --bs-btn-active-color: #06161B; --bs-btn-active-bg: #e0a80f; --bs-btn-active-border-color: #e0a80f; } .btn-danger { --bs-btn-color: #06161B; --bs-btn-bg: var(--armada-danger); --bs-btn-border-color: var(--armada-danger); --bs-btn-hover-color: #06161B; --bs-btn-hover-bg: #f99a9a; --bs-btn-hover-border-color: #f99a9a; --bs-btn-active-color: #06161B; --bs-btn-active-bg: #f45252; --bs-btn-active-border-color: #f45252; } .btn-info { --bs-btn-color: #06161B; --bs-btn-bg: var(--armada-info); --bs-btn-border-color: var(--armada-info); --bs-btn-hover-color: #06161B; --bs-btn-hover-bg: #7fb5fb; --bs-btn-hover-border-color: #7fb5fb; } .btn-secondary, .btn-outline-secondary { --bs-btn-color: var(--armada-text-primary); --bs-btn-bg: var(--armada-fore); --bs-btn-border-color: var(--armada-border); --bs-btn-hover-color: var(--armada-text-primary); --bs-btn-hover-bg: #223640; --bs-btn-hover-border-color: rgba(32, 199, 199, 0.3); } .btn:hover { filter: brightness(1.03); } .btn:disabled, .btn.disabled { opacity: 0.4; } /* ── Forms ──────────────────────────────────────────────────────────── */ /* jazzmin only swaps