/* ========================================================================== 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; } /* Change-form action buttons ("Save and continue editing", "Save and add another") and the fieldset tab bar — Baton compiles its own Bootstrap 5 build with $primary: darken(#d32d41, 20%) = #7f1b27 (maroon), baked directly into `.btn-primary` / `.btn-outline-primary` / `.nav-pills .nav-link.active` as literal --bs-btn-*/--bs-nav-pills-* hex values (same compile-time-literal pattern as the object-tools fix above, so it's overridden the same way). The plain "Save" button (`.btn-success`, green) and the delete button (`.btn-danger`, red) are left alone on purpose, same as the danger/success message colors above — status colors, not brand color. */ .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; }