/* ========================================================================== bodek.css — the ONE shared stylesheet for every Bodek site (accounts, files, forms, dev, admin, tools, support). Source of truth: /var/www/bodek/shared/assets/bodek.css Served on every host as /shared/bodek.css through a symlink public/shared -> /var/www/bodek/shared/assets (see ../README.md). Load order on every page: bootstrap.min.css -> bootstrap-icons -> /shared/bodek.css -> site css Site CSS may override anything here; keep ONLY site-specific rules there. Theme: Bootstrap 5.3 `data-bs-theme` on . A page without the attribute gets the dark look (the historic Bodek default). Sections 1. Design tokens (light + dark) 2. Base + legacy element colours 3. Navbar, brand, user menu, avatars 4. App grid menu + product marks 5. Buttons 6. Forms + search inputs 7. Cards, tables, badges 8. Dropdowns 9. Modals + close button 10. Callouts + toasts 11. Page building blocks (hero, crumbs, headings, tiles, lists) 12. Empty states 13. Footer 14. Prose (article typography) 15. Settings layout + back button 16. Shared product components (header search, storage backend tiles) 17. Utilities ========================================================================== */ /* ========================================================================== 1. DESIGN TOKENS ========================================================================== */ :root { /* Brand */ --bd-brand: #57A7FF; /* Bodek blue: logos, marks, highlights */ --bd-brand-rgb: 87, 167, 255; --bd-accent: #0d6efd; /* interactive accent (buttons, focus rings) */ --bd-accent-rgb: 13, 110, 253; --bd-accent-hover: #0b5ed7; --bd-danger: #dc3545; --bd-danger-hover: #bb2d3b; --bd-success: #198754; --bd-success-hover: #157347; --bd-warning: #ffc107; --bd-info: #0dcaf0; /* Shape */ --bd-radius-xs: 6px; --bd-radius-sm: 9px; --bd-radius: 12px; --bd-radius-md: 14px; --bd-radius-lg: 18px; --bd-radius-pill: 999px; /* Spacing scale */ --bd-space-1: 4px; --bd-space-2: 8px; --bd-space-3: 12px; --bd-space-4: 16px; --bd-space-5: 24px; --bd-space-6: 32px; --bd-space-7: 48px; /* Type */ --bd-font: Arial, sans-serif; --bd-font-mono: SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; /* Layout */ --bd-navbar-h: 70px; --bd-prose-max: 760px; /* Motion */ --bd-ease: .15s ease; } /* Dark (default) */ :root, [data-bs-theme="dark"] { --bd-bg: #121212; --bd-surface: #1e1e1e; /* cards, navbar */ --bd-surface-2: #252525; /* inputs, dropdowns */ --bd-surface-modal: #1c1c1f; --bd-surface-sunken: rgba(125, 140, 160, 0.08); --bd-border: #333; --bd-border-soft: rgba(125, 140, 160, 0.22); --bd-text: #e0e0e0; --bd-muted: #a3a3aa; --bd-hover: rgba(125, 140, 160, 0.18); --bd-active: rgba(125, 140, 160, 0.28); --bd-input-bg: #252525; --bd-input-color: #e0e0e0; --bd-input-border: #333; --bd-link: #57A7FF; --bd-link-rgb: 87, 167, 255; --bd-code-bg: rgba(127, 127, 127, 0.18); --bd-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --bd-shadow: 0 8px 24px rgba(0, 0, 0, 0.28); --bd-shadow-menu: 0 10px 32px rgba(0, 0, 0, 0.28); --bd-shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.45); /* Bootstrap link colours follow the brand (sites used #6ea8fe / #4d9bff / #57a7ff before) */ --bs-link-color: #57A7FF; --bs-link-color-rgb: 87, 167, 255; --bs-link-hover-color: #8cc3ff; --bs-link-hover-color-rgb: 140, 195, 255; } [data-bs-theme="light"] { --bd-bg: #f4f6fa; --bd-surface: #ffffff; --bd-surface-2: #f6f7f9; --bd-surface-modal: #ffffff; --bd-surface-sunken: #f6f7f9; --bd-border: #e3e6ea; --bd-border-soft: rgba(15, 23, 42, 0.12); --bd-text: #1a1a1a; --bd-muted: #5f6570; --bd-hover: rgba(15, 23, 42, 0.06); --bd-active: rgba(15, 23, 42, 0.1); --bd-input-bg: #fff; --bd-input-color: #1a1a1a; --bd-input-border: #ccd2dc; --bd-link: #0b5ed7; --bd-link-rgb: 11, 94, 215; --bd-code-bg: rgba(15, 23, 42, 0.07); --bd-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06); --bd-shadow: 0 8px 24px rgba(15, 23, 42, 0.08); --bd-shadow-menu: 0 10px 32px rgba(15, 23, 42, 0.12); --bd-shadow-modal: 0 20px 60px rgba(15, 23, 42, 0.18); --bs-link-color: #0b5ed7; --bs-link-color-rgb: 11, 94, 215; --bs-link-hover-color: #0a4fb5; --bs-link-hover-color-rgb: 10, 79, 181; } /* ========================================================================== 2. BASE + LEGACY ELEMENT COLOURS ========================================================================== */ body { background-color: var(--bd-bg); color: var(--bd-text); font-family: var(--bd-font); padding-top: 0; } .spinner-border { margin-left: 5px; } /* Historic dark-theme text colour on bare elements (kept so existing pages look the same; zero-specificity prefix so any class still wins). Scoped to dark: in light mode h6/small/li used to stay #e0e0e0 on white, which was unreadable. */ :where(:root:not([data-bs-theme="light"])) :is(h2, h5, h6, p, label, small, td, li) { color: #e0e0e0; } :where(:root:not([data-bs-theme="light"])) .table { color: #e0e0e0; } [data-bs-theme="light"] :is(h2, h5, label, p, td) { color: #1a1a1a; } /* ========================================================================== 3. NAVBAR, BRAND, USER MENU, AVATARS