/* Project overrides on top of stock Bootstrap 5. */ /* * SHBV colours. Taken from shbv-ev.de's own stylesheet: #2c3acb is the blue it uses for * links, icons and the footer wash, #2633b5 the darker shade in its theme file, and * #880e4f the wine red behind its news ticker. Nothing is loaded from that site — these * are values, copied once, so the app still makes zero cross-origin requests. * * Only Bootstrap's own custom properties are overridden. This is not a theme package: * stock bootstrap.min.css stays exactly as vendored. */ :root { --shbv-blue: #2c3acb; --shbv-blue-rgb: 44, 58, 203; --shbv-blue-hover: #2633b5; --shbv-blue-active: #232ea2; /* Readable blue for text and outlines. 8.2:1 on white. */ --shbv-blue-text: #2c3acb; --shbv-accent: #880e4f; --bs-primary: var(--shbv-blue); --bs-primary-rgb: var(--shbv-blue-rgb); --bs-primary-text-emphasis: #1b2379; --bs-primary-bg-subtle: #e2e4f8; --bs-primary-border-subtle: #bbc0ee; --bs-link-color: var(--shbv-blue-text); --bs-link-color-rgb: var(--shbv-blue-rgb); --bs-link-hover-color: var(--shbv-blue-active); --bs-link-hover-color-rgb: 35, 46, 162; --bs-focus-ring-color: rgba(var(--shbv-blue-rgb), 0.25); } /* The brand blue is far too dark to read on a dark background, so text-ish uses of it get a lightened tint (5.4:1 on Bootstrap's dark body). Solid buttons keep the real brand colour in both modes — white on it is 8.2:1 either way. */ [data-bs-theme="dark"] { --shbv-blue-text: #8b93e2; --bs-primary-text-emphasis: #b0b6ec; --bs-primary-bg-subtle: #191d43; --bs-primary-border-subtle: #2f3a92; --bs-link-color: var(--shbv-blue-text); --bs-link-color-rgb: 139, 147, 226; --bs-link-hover-color: #b0b6ec; --bs-link-hover-color-rgb: 176, 182, 236; } .btn-primary { --bs-btn-bg: var(--shbv-blue); --bs-btn-border-color: var(--shbv-blue); --bs-btn-hover-bg: var(--shbv-blue-hover); --bs-btn-hover-border-color: var(--shbv-blue-hover); --bs-btn-active-bg: var(--shbv-blue-active); --bs-btn-active-border-color: var(--shbv-blue-active); --bs-btn-disabled-bg: var(--shbv-blue); --bs-btn-disabled-border-color: var(--shbv-blue); --bs-btn-focus-shadow-rgb: var(--shbv-blue-rgb); } .btn-outline-primary { --bs-btn-color: var(--shbv-blue-text); --bs-btn-border-color: var(--shbv-blue-text); --bs-btn-hover-bg: var(--shbv-blue); --bs-btn-hover-border-color: var(--shbv-blue); --bs-btn-active-bg: var(--shbv-blue-active); --bs-btn-active-border-color: var(--shbv-blue-active); --bs-btn-disabled-color: var(--shbv-blue-text); --bs-btn-disabled-border-color: var(--shbv-blue-text); --bs-btn-focus-shadow-rgb: var(--shbv-blue-rgb); } /* .progress hardcodes the bar colour rather than reading --bs-primary. */ .progress, .progress-stacked { --bs-progress-bar-bg: var(--shbv-blue); } /* Form focus and checked states are hardcoded too. */ .form-control:focus, .form-select:focus { border-color: var(--shbv-blue-text); box-shadow: 0 0 0 0.25rem rgba(var(--shbv-blue-rgb), 0.25); } .form-check-input:checked { background-color: var(--shbv-blue); border-color: var(--shbv-blue); } .form-check-input:focus { border-color: var(--shbv-blue-text); box-shadow: 0 0 0 0.25rem rgba(var(--shbv-blue-rgb), 0.25); } /* The navbar carries the brand colour, as it does on shbv-ev.de. data-bs-theme on the element itself is what makes its links and dropdown legible on that blue. */ .navbar.bg-primary { --bs-border-color: var(--shbv-blue-active); /* Bootstrap's 55%-opacity white leaves an inactive nav link at about 2.5:1 on this blue. 85% brings it to ~6:1, and the active one stays full white. */ --bs-navbar-color: rgba(255, 255, 255, 0.85); --bs-navbar-hover-color: #fff; --bs-navbar-active-color: #fff; --bs-navbar-brand-color: #fff; --bs-navbar-brand-hover-color: #fff; } /* The date picker panel (public/js/date-picker.js). It hangs off and is positioned in script, so only the things Bootstrap has no utility for live here. */ .date-picker { position: absolute; z-index: 1060; width: 20rem; } .date-picker-grid td { padding: 0.0625rem; } .date-picker-grid .btn { --bs-btn-padding-y: 0.15rem; --bs-btn-padding-x: 0; }