/* ========================================================================== PMS — single site-wide color theme (header, sidebar, footer, mobile nav). Palette is the blue + dark-navy combination already used on the desktop topbar (#2f6fed, from admin-topbar.css). This file extends the same two colors to the pieces Baton still renders with its own stock palette (dark-red active menu item, slate-grey pagination, yellow-green footer links, dark mobile header) so every surface reads as one theme. Baton injects its own CSS at runtime (from the bundled baton.min.js), and several of the rules being overridden here carry `!important` themselves (confirmed against the installed django-baton package's compiled source). To win regardless of the two stylesheets' relative order in , selectors below are deliberately padded above Baton's own specificity (repeating a class/id, or stacking an extra `:not()`) rather than relying on `!important` + load order alone. Presentation only — no markup, ids, labels or behaviour are touched. ========================================================================== */ :root { --pms-primary: #2f6fed; --pms-primary-dark: #1f4fc4; --pms-primary-light: #9dc0ff; --pms-primary-soft: #eaf1fd; --pms-ink: #171d24; --pms-ink-soft: #232b34; --pms-sidebar: #f3f3f3; --pms-sidebar-soft: #e6e6e6; --pms-sidebar-text: #2b333a; } /* Desktop topbar already uses --pms-primary via admin-topbar.css's literal #2f6fed; kept as a literal there on purpose (loaded first) and mirrored here as a variable for every other surface. */ /* ========================================================================== Django's own admin CSS (admin/css/base.css) drives every button, link and breadcrumb it renders itself through the :root custom properties below. Overriding them here — this stylesheet loads after base.css — recolors the whole layout (submit buttons, "Add" button, in-content links, breadcrumbs) without touching Baton's own compiled CSS at all. Danger/error and success colors (--delete-button-bg, --error-fg, --message-* ) are left on Django's defaults on purpose: they are safety signals (delete = red), not brand color, and recoloring them would make destructive actions harder to spot at a glance. ========================================================================== */ :root { --primary: var(--pms-primary); --secondary: var(--pms-ink); --link-fg: var(--pms-primary); --link-hover-color: var(--pms-primary-dark); --link-selected-fg: var(--pms-primary-dark); --button-hover-bg: var(--pms-primary-dark); --default-button-bg: var(--pms-primary); --default-button-hover-bg: var(--pms-primary-dark); --object-tools-bg: var(--pms-primary); --object-tools-hover-bg: var(--pms-primary-dark); } /* Mobile header (shown below 992px, where admin-topbar.css hides the desktop bar) — recolored to match instead of Baton's dark navbar. */ #header#header { background: var(--pms-primary) !important; } #header#header a, #header#header strong { color: #fff !important; } /* Sidebar shell — light surface, so text/link colors are overridden too (Baton's stock #ccc/#fff link colors are unreadable on a light bg). */ .sidebar-menu.sidebar-menu { border-right: 1px solid #d7dfe3 !important; } .sidebar-menu.sidebar-menu, .sidebar-menu.sidebar-menu .depth-0, .sidebar-menu.sidebar-menu .depth-1 { background: var(--pms-sidebar) !important; color: var(--pms-sidebar-text) !important; } .sidebar-menu.sidebar-menu .depth-0 a, .sidebar-menu.sidebar-menu .depth-0 span, .sidebar-menu.sidebar-menu .depth-1 a, .sidebar-menu.sidebar-menu .depth-1 span { color: var(--pms-sidebar-text) !important; } .sidebar-menu.sidebar-menu .depth-0 a:hover, .sidebar-menu.sidebar-menu .depth-0 span:hover, .sidebar-menu.sidebar-menu .depth-1 a:hover, .sidebar-menu.sidebar-menu .depth-1 span:hover { color: var(--pms-primary) !important; } .sidebar-menu.sidebar-menu #branding, .sidebar-menu.sidebar-menu #branding > h1 { background: var(--pms-sidebar-soft) !important; border-bottom-color: var(--pms-sidebar-soft) !important; } .sidebar-menu.sidebar-menu #branding a { color: var(--pms-sidebar-text) !important; } .sidebar-menu.sidebar-menu .depth-0 > li:hover, .sidebar-menu.sidebar-menu .depth-1 li:hover { background: var(--pms-sidebar-soft) !important; } /* `.with-active` marks a branch containing the current page (set once at load); `.open`/`.default-open` mark a branch the user expanded by clicking — a manually-opened submenu carries only the latter, and Baton's own rule for it is `!important`, hence the doubled class here. */ .sidebar-menu.sidebar-menu .with-active ul, .sidebar-menu.sidebar-menu .with-active li, .sidebar-menu.sidebar-menu .open ul, .sidebar-menu.sidebar-menu .open li, .sidebar-menu.sidebar-menu .default-open ul, .sidebar-menu.sidebar-menu .default-open li { background: var(--pms-sidebar) !important; } /* Collapsed (icons-only) mode flyout dropdown — Baton ships this as a white popup card; matched to the sidebar's own background instead. */ body.admin-menu-icons-only .sidebar-menu .depth-0 > li > .depth-1 { background: var(--pms-sidebar) !important; } /* Active menu item — Baton ships this as a dark-red bar; recolored blue to match the topbar, with a light-blue tint that reads clearly against the light sidebar. */ .sidebar-menu.sidebar-menu .active:not(.with-active):not(.with-active) { background: var(--pms-primary-soft) !important; border-left: 5px solid var(--pms-primary) !important; } .sidebar-menu.sidebar-menu .active:not(.with-active):not(.with-active) > a, .sidebar-menu.sidebar-menu .active:not(.with-active):not(.with-active) > a > i { color: var(--pms-primary) !important; } .sidebar-menu.sidebar-menu #user-tools-sidebar a::after { color: var(--pms-primary) !important; } /* Footer. */ .site-footer { background: var(--pms-ink) !important; border-top-color: var(--pms-primary) !important; color: #fff !important; } .site-footer a { color: var(--pms-primary-light) !important; } .site-footer a:hover { color: #fff !important; } /* Baton's own pagination (history / admindocs / any list not covered by pms-ui-standard.css's change-list paginator) — slate-grey by default. */ .paginator .this-page, .paginator a.this-page { background: var(--pms-primary) !important; border-color: var(--pms-primary) !important; color: #fff !important; } /* Change-list toolbar ("Add", "Print", "Export" etc.) — these ship as `.object-tools a`, which Baton's runtime-injected Bootstrap 5 build styles as `.btn.btn-secondary` hardcoded to its lime accent (#b3c100) via --bs-btn-bg/--bs-btn-hover-bg custom properties on the `.btn` base rule. Overridden directly (rather than replicating every --bs-btn-* variable), anchored on #content — the same ancestor Baton's own compiled CSS uses — so this beats both that plain `.btn` rule and Baton's own (non-!important) `.object-tools a:hover` rule regardless of stylesheet order. */ #content .object-tools a, #content .object-tools a:visited { background-color: var(--pms-primary) !important; border-color: var(--pms-primary) !important; color: #fff !important; } #content .object-tools a:hover, #content .object-tools a:focus, #content .object-tools a:active { background-color: var(--pms-primary-dark) !important; border-color: var(--pms-primary-dark) !important; color: #fff !important; } .btn-primary, .btn-primary:visited { background-color: var(--pms-primary) !important; border-color: var(--pms-primary) !important; } .btn-primary:hover, .btn-primary:focus, .btn-primary:active { background-color: var(--pms-primary-dark) !important; border-color: var(--pms-primary-dark) !important; } .btn-outline-primary { color: var(--pms-primary) !important; border-color: var(--pms-primary) !important; } .btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active { background-color: var(--pms-primary) !important; border-color: var(--pms-primary) !important; color: #fff !important; } .nav-pills .nav-link.active, .nav-pills .nav-item.show .nav-link { background-color: var(--pms-primary) !important; color: #fff !important; } /* ========================================================================== Breadcrumbs — match the theme blue (#2f6fed) across every admin change / add form, including proxy model forms (plan, tender, quotation, etc.). Baton ships a slate-grey / dark-red breadcrumb palette; both the link color and the separator hover state are overridden here. The `#breadcrumbs` id alone is enough specificity to beat Baton’s `.breadcrumbs a` rule, but the selector is doubled (`.breadcrumbs.breadcrumbs`) so it also survives Baton’s runtime-injected styles regardless of load order — same technique already used in this file for the sidebar. ========================================================================== */ /* Base breadcrumb bar — subtle tint, no Baton red */ .breadcrumbs.breadcrumbs { background: #f3f6f7 !important; border-bottom: 1px solid #d7dfe3 !important; color: #68777f !important; } /* All breadcrumb links: theme blue, no underline by default */ .breadcrumbs.breadcrumbs a, .breadcrumbs.breadcrumbs a:link, .breadcrumbs.breadcrumbs a:visited, #breadcrumbs a, #breadcrumbs a:link, #breadcrumbs a:visited { color: var(--pms-primary, #2f6fed) !important; text-decoration: none !important; font-weight: 500; } /* Hover / focus: darker blue + underline for affordance */ .breadcrumbs.breadcrumbs a:hover, .breadcrumbs.breadcrumbs a:focus, #breadcrumbs a:hover, #breadcrumbs a:focus { color: var(--pms-primary-dark, #1f4fc4) !important; text-decoration: underline !important; } /* Current page (last item) — muted text, not a link, keep it plain */ .breadcrumbs.breadcrumbs .breadcrumb-item.active, .breadcrumbs.breadcrumbs > :last-child:not(a) { color: #22323a !important; } /* Separator glyphs (“›”, “/”) — keep them muted, never blue */ .breadcrumbs.breadcrumbs .breadcrumb-separator, .breadcrumbs.breadcrumbs span:not(:has(a)) { color: #97a4ab !important; }