/* static/assets/css/theme-brand.css * * Brand override layer. Loaded after soft-ui-dashboard.css + theme-enhance.css. * Re-points Soft UI's *brand* affordances to the deployment --ca-* tokens * (values injected per-request into the by the theme_css_vars context * processor). The vendored SCSS is never recompiled; we only override the * handful of brand-identity surfaces here. Semantic status colors stay as * Soft UI ships them unless the operator opts into advanced overrides, which * arrive as --ca-success / --ca-info / --ca-warning / --ca-danger. * * BRAND affordances carry explicit fallback values so a default (unconfigured) * deployment renders correctly even when the theme_css_vars block is empty. * NEUTRAL / ADVANCED vars have NO fallback: an unset var makes the declaration * invalid → the rule is silently ignored → soft-ui + theme-enhance keep control. */ /* Re-point Bootstrap's brand custom properties to the deployment palette. * soft-ui-dashboard.css ships a recompiled Bootstrap whose --bs-primary / * --bs-link-color are baked to orange (#f97316); every Bootstrap affordance * (links, .text-primary, .btn-outline-primary, badges, pagination) reads from * these. Feeding them --ca-* (with the stock orange as fallback) recolors all * of them at once without touching the vendored file. */ :root { --bs-primary: var(--ca-primary, #ea580c); --bs-primary-rgb: var(--ca-primary-rgb, 234, 88, 12); --bs-link-color: var(--ca-primary, #ea580c); --bs-link-color-rgb: var(--ca-primary-rgb, 234, 88, 12); --bs-link-hover-color: var(--ca-primary-hover, #c2410c); } /* Primary brand gradient (buttons, headers, badges using bg-gradient-primary) */ .bg-gradient-primary { background-image: var(--ca-brand-gradient, linear-gradient(310deg, #ea580c 0%, #facc15 100%)) !important; } /* Primary buttons */ .btn-primary, .btn.bg-gradient-primary { background-image: var(--ca-brand-gradient, linear-gradient(310deg, #ea580c 0%, #facc15 100%)) !important; border-color: var(--ca-primary, #ea580c) !important; } .btn-primary:hover { border-color: var(--ca-primary-hover, #c2410c) !important; } /* Primary text + links */ .text-primary { color: var(--ca-primary, #ea580c) !important; } a:not(.btn):not(.nav-link) { color: var(--ca-primary, #ea580c); } /* Outline primary buttons compile to literal-orange --bs-btn-* vars (Bootstrap * bakes the color in rather than reading --bs-primary), so re-point them here. */ .btn-outline-primary { --bs-btn-color: var(--ca-primary, #ea580c); --bs-btn-border-color: var(--ca-primary, #ea580c); --bs-btn-hover-bg: var(--ca-primary, #ea580c); --bs-btn-hover-border-color: var(--ca-primary, #ea580c); --bs-btn-active-bg: var(--ca-primary, #ea580c); --bs-btn-active-border-color: var(--ca-primary, #ea580c); --bs-btn-disabled-color: var(--ca-primary, #ea580c); --bs-btn-disabled-border-color: var(--ca-primary, #ea580c); } /* Solid primary surfaces */ .bg-primary { background-color: var(--ca-primary, #ea580c) !important; } /* Sidebar active item */ .sidenav .nav-link.active { background-image: var(--ca-brand-gradient, linear-gradient(310deg, #ea580c 0%, #facc15 100%)) !important; } /* Active item legibility: the gradient above can end on a dark brand color * (e.g. Colorado Colo's #1e2a2f slate), but Soft UI leaves the active label / * chevron dark — unreadable. Force white text, and replace Soft UI's hardcoded * orange icon chip (soft-ui-dashboard.css: .sidenav[data-color] ... .active * .icon) with a white chip carrying a brand-colored glyph. */ .sidenav .nav-link.active, .sidenav .nav-link.active .nav-link-text, .sidenav .nav-link.active .sidenav-normal, .sidenav .nav-link.active .sidenav-mini-icon, .sidenav .nav-link.active > i { color: #fff !important; } .sidenav .nav-link.active .icon { background-image: none !important; background-color: #fff !important; } .sidenav .nav-link.active .icon i, .sidenav .nav-link.active .icon svg { color: var(--ca-primary, #ea580c) !important; } /* Focus rings on form controls */ .form-control:focus, .form-select:focus { border-color: var(--ca-primary, #ea580c); box-shadow: 0 0 0 2px var(--ca-focus-ring, rgba(234, 88, 12, 0.22)); } /* Optional advanced overrides — only bite when the operator sets them. Heading: no fallback, no !important, so an unset var leaves Soft UI in control. */ .text-dark, h1, h2, h3, h4, h5, h6 { color: var(--ca-heading); } /* Status badges: when the operator sets --ca- the badge goes flat to that color; when unset, each stop falls back to Soft UI's own gradient stop so the badge keeps its stock two-tone fill. (Without per-stop fallbacks the !important rule wins the cascade then collapses to background-image:none, blanking the badge — the bug this replaces.) */ .badge.bg-gradient-success, .bg-gradient-success { background-image: linear-gradient(310deg, var(--ca-success, #22c55e) 0%, var(--ca-success, #98ec2d) 100%) !important; } .badge.bg-gradient-danger, .bg-gradient-danger { background-image: linear-gradient(310deg, var(--ca-danger, #ef4444) 0%, var(--ca-danger, #ec4899) 100%) !important; } .badge.bg-gradient-warning, .bg-gradient-warning { background-image: linear-gradient(310deg, var(--ca-warning, #eab308) 0%, var(--ca-warning, #f97316) 100%) !important; } .badge.bg-gradient-info, .bg-gradient-info { background-image: linear-gradient(310deg, var(--ca-info, #0ea5e9) 0%, var(--ca-info, #06b6d4) 100%) !important; }