/* ========================================================================== * 06-overrides.css — third-party reskins (Bootstrap, Leaflet, Google Maps) * -------------------------------------------------------------------------- * LOADED BY : src/templates/base.html, every page (last of six core files). * OWNS : rebranding Bootstrap's own CSS variables so every Bootstrap * component (buttons, modals, forms, badges) picks up the * Aulex palette with zero per-template work; Leaflet chrome; * Google Maps InfoWindow contrast fixes (mined from the old, * orphaned static/css/style.css, kept for the Grulin/mapa * integration). * RULE : this is the ONLY file allowed !important for vendor-rule * overrides — every occurrence must carry a comment naming the * rule it beats. * * There are exactly two ways to win against Bootstrap/Leaflet/Google Maps * CSS (all loaded from CDN, unmodifiable): * (a) rebrand the *CSS custom property* the vendor's own rule already * reads (e.g. --bs-modal-bg) — the block below does this; * (b) write a rule that beats the vendor rule on plain cascade order — * either a higher-specificity selector (e.g. `.ax-map .leaflet-bar` * beats Leaflet's bare `.leaflet-bar`) or, when specificity can't * differ (same selector, e.g. bare `.navbar`), `!important` plus a * comment naming what it beats, since this file loads after the * vendor's own stylesheet in base.html's . * This project does not use CSS `@layer` — plain source order already * gives every file here correct precedence, and introducing named layers * would flip that: unlayered vendor CSS always wins over anything wrapped * in a layer, regardless of source order, which is the opposite of what * this file needs. * ========================================================================== */ :root { --bs-body-bg: var(--ax-bg); --bs-body-color: var(--ax-text); --bs-body-font-family: var(--ax-font-sans); --bs-border-color: var(--ax-border); --bs-border-color-translucent: var(--ax-border); --bs-border-radius: var(--ax-radius-md); --bs-primary: var(--ax-primary); --bs-primary-rgb: 0, 99, 255; --bs-warning: var(--ax-warning); --bs-warning-rgb: 253, 171, 2; --bs-success: var(--ax-success); --bs-danger: var(--ax-danger); --bs-secondary-color: var(--ax-text-muted); --bs-link-color: var(--ax-primary-text); --bs-link-hover-color: var(--ax-primary-hover); --bs-emphasis-color: var(--ax-text); --bs-card-bg: var(--ax-surface-1); --bs-card-border-color: var(--ax-border); --bs-card-cap-bg: rgba(255, 255, 255, 0.03); --bs-modal-bg: var(--ax-surface-1); --bs-modal-color: var(--ax-text); --bs-modal-border-color: var(--ax-border); --bs-modal-header-border-color: var(--ax-border); --bs-modal-footer-border-color: var(--ax-border); } .navbar { background: rgba(5, 5, 5, 0.85) !important; /* !important: beats Bootstrap's .navbar default background */ backdrop-filter: blur(15px); border-bottom: 1px solid var(--ax-border); transition: all var(--ax-dur) var(--ax-ease); } .btn-close { filter: invert(1) !important; /* !important: makes the black X icon visible on our always-dark modals */ } /* --- Leaflet ------------------------------------------------------------ */ .ax-map .leaflet-container { background: var(--ax-surface-1) !important; /* !important: beats Leaflet's own .leaflet-container background rule */ border-radius: var(--ax-radius-lg); border: 1px solid var(--ax-border); } .ax-theme-light .ax-map .leaflet-container { background: var(--ax-bg) !important; /* !important: same Leaflet rule, light-scope value */ } /* Basemap darkening for dashboards on the dark theme. Opt out per map with .ax-map--light on the map container (used by mapa.html, which needs legible untouched OSM tiles under .ax-theme-light). */ .ax-map--dark .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(95%) contrast(90%); } .ax-map .leaflet-popup-content-wrapper, .ax-map .leaflet-popup-tip, .ax-map .leaflet-tooltip, .ax-map .leaflet-control-zoom a, .ax-map .leaflet-bar { background: var(--ax-surface-1); color: var(--ax-text); border-color: var(--ax-border); } .ax-map .leaflet-control-attribution { background: var(--ax-surface-glass); color: var(--ax-text-muted); } /* --- Google Maps InfoWindow — mined from the old, now-deleted static/css/style.css. Google's InfoWindow ignores page theme and needs forced light contrast regardless of dashboard vs. light page. */ .gm-style .gm-style-iw-c { background: #ffffff !important; /* !important: Google Maps inlines its own background */ color: #111827 !important; /* !important: Google Maps inlines its own color */ } .gm-style .gm-style-iw-d { overflow: auto !important; /* !important: Google Maps sets overflow inline */ color: #111827 !important; /* !important: Google Maps inlines its own color */ } .gm-style .gm-style-iw-t::after { background: #ffffff !important; /* !important: Google Maps inlines the tail background */ } .gm-ui-hover-effect { filter: none !important; /* !important: prevents Google's hover filter from discoloring the close button */ }