/* ===== Company accent color ===== */ /* Bootstrap 5.3's own utilities (.text-primary, .link-primary, anything using var(--bs-primary) directly) read this variable, so overriding it catches spots that reference it without needing to be found and edited one by one. It does NOT reach Vuexy's own theme-default.css rules (.btn-primary, etc.) — those bake the hex value in literally rather than referencing this variable, which is why the explicit overrides below still exist for that specific case. */ :root { --bs-primary: var(--company, #7367f0); /* Secondary tone for solid banner backgrounds across the app — a deeper/muted derivative of --company, mixed toward the same near- black already used in the sidebar's dark palette. Kept as a single formula here so the banner look can be retuned everywhere (e.g. swapped for a fixed neutral gray, or set equal to --company) by editing this one line instead of every banner file. */ --company-secondary: color-mix(in srgb, var(--company, #7367f0) 65%, #0f1115); } /* Vuexy's theme-default.css bakes #7367f0 (and its hover/focus/active shades) into .btn-primary as literal hex values — not CSS custom properties — so overriding --bs-primary alone does nothing here. These rules override the same selectors directly, using the same --company variable MenuComponent.js already sets on from the company's brand_color. Scoped to solid .btn-primary only (not outline/label variants) — that's the visible, high-traffic case (every Swal confirm button in this app uses it) without taking on computing faithful tint variants for every button style at once. */ .btn-primary { background-color: var(--company, #7367f0) !important; border-color: var(--company, #7367f0) !important; } .btn-primary:hover, .btn-check:focus + .btn-primary, .btn-primary:focus, .btn-primary.focus, .btn-check:checked + .btn-primary, .btn-check:active + .btn-primary, .btn-primary:active, .btn-primary.active, .btn-primary.show.dropdown-toggle, .show > .btn-primary.dropdown-toggle { background-color: color-mix(in srgb, var(--company, #7367f0) 85%, black) !important; border-color: color-mix(in srgb, var(--company, #7367f0) 85%, black) !important; } .btn-primary.disabled, .btn-primary:disabled { background-color: var(--company, #7367f0) !important; border-color: var(--company, #7367f0) !important; }