/* ============================================================ BOOTSTRAP 5 — KOMPLETTES THEME OVERRIDE Wagtail CRX / Bootstrap 5.3 ============================================================ */ :root { /* ---------------------------------------------------------- SEMANTISCHE FARBEN — nur hier Hex-Werte eintragen ---------------------------------------------------------- */ --bs-primary: #F85522; --bs-primary-rgb: 248, 85, 34; --bs-secondary: #37526D; --bs-secondary-rgb: 55, 82, 109; --bs-success: #41A30D; --bs-success-rgb: 65, 163, 13; --bs-info: #A1DCDC; --bs-info-rgb: 161, 220, 220; --bs-warning: #F85522; --bs-warning-rgb: 248, 85, 34; --bs-danger: #AC2900; --bs-danger-rgb: 172, 41, 0; --bs-light: #A1DCDC; --bs-light-rgb: 161, 220, 220; --bs-dark: #449797; --bs-dark-rgb: 68, 151, 151; /* Hover — automatisch 20% dunkler als Basisfarbe */ --bs-primary-hover: color-mix(in srgb, var(--bs-primary) 80%, black); --bs-secondary-hover: color-mix(in srgb, var(--bs-secondary) 80%, black); --bs-success-hover: color-mix(in srgb, var(--bs-success) 80%, black); --bs-danger-hover: color-mix(in srgb, var(--bs-danger) 80%, black); --bs-warning-hover: color-mix(in srgb, var(--bs-warning) 80%, black); --bs-info-hover: color-mix(in srgb, var(--bs-info) 80%, black); /* Text-Emphasis — automatisch 40% dunkler */ --bs-primary-text-emphasis: color-mix(in srgb, var(--bs-primary) 60%, black); --bs-secondary-text-emphasis: color-mix(in srgb, var(--bs-secondary) 60%, black); --bs-success-text-emphasis: color-mix(in srgb, var(--bs-success) 60%, black); --bs-info-text-emphasis: color-mix(in srgb, var(--bs-info) 60%, black); --bs-warning-text-emphasis: color-mix(in srgb, var(--bs-warning) 60%, black); --bs-danger-text-emphasis: color-mix(in srgb, var(--bs-danger) 60%, black); --bs-light-text-emphasis: color-mix(in srgb, var(--bs-light) 60%, black); --bs-dark-text-emphasis: color-mix(in srgb, var(--bs-dark) 60%, black); /* BG-Subtle — automatisch 20% Farbe + 85% weiß */ --bs-primary-bg-subtle: color-mix(in srgb, var(--bs-primary) 20%, white); --bs-secondary-bg-subtle: color-mix(in srgb, var(--bs-secondary) 20%, white); --bs-success-bg-subtle: color-mix(in srgb, var(--bs-success) 20%, white); --bs-info-bg-subtle: color-mix(in srgb, var(--bs-info) 20%, white); --bs-warning-bg-subtle: color-mix(in srgb, var(--bs-warning) 20%, white); --bs-danger-bg-subtle: color-mix(in srgb, var(--bs-danger) 20%, white); --bs-light-bg-subtle: color-mix(in srgb, var(--bs-light) 20%, white); --bs-dark-bg-subtle: color-mix(in srgb, var(--bs-dark) 20%, white); /* Border-Subtle — automatisch 30% Farbe + 70% weiß */ --bs-primary-border-subtle: color-mix(in srgb, var(--bs-primary) 30%, white); --bs-secondary-border-subtle: color-mix(in srgb, var(--bs-secondary) 30%, white); --bs-success-border-subtle: color-mix(in srgb, var(--bs-success) 30%, white); --bs-info-border-subtle: color-mix(in srgb, var(--bs-info) 30%, white); --bs-warning-border-subtle: color-mix(in srgb, var(--bs-warning) 30%, white); --bs-danger-border-subtle: color-mix(in srgb, var(--bs-danger) 30%, white); --bs-light-border-subtle: color-mix(in srgb, var(--bs-light) 30%, white); --bs-dark-border-subtle: color-mix(in srgb, var(--bs-dark) 30%, white); /* ---------------------------------------------------------- BODY ---------------------------------------------------------- */ --bs-body-bg: #D5F4F4; --bs-body-bg-rgb: 213, 244, 244; --bs-body-color: #212529; --bs-body-color-rgb: 33, 37, 41; --bs-body-font-family: var(--bs-font-sans-serif); --bs-body-font-size: 1rem; --bs-body-font-weight: 400; --bs-body-line-height: 1.5; /* ---------------------------------------------------------- LINKS ---------------------------------------------------------- */ --bs-link-color: var(--bs-primary); --bs-link-color-rgb: var(--bs-primary-rgb); --bs-link-hover-color: var(--bs-primary-hover); --bs-link-decoration: underline; --link-underline-offset: .24rem; /* ---------------------------------------------------------- BORDERS & RADIUS ---------------------------------------------------------- */ --bs-border-width: 1px; --bs-border-style: solid; --bs-border-color: #dee2e6; --bs-border-color-translucent: rgba(0, 0, 0, 0.175); --bs-border-radius: 0.375rem; --bs-border-radius-sm: 0.25rem; --bs-border-radius-lg: 0.5rem; --bs-border-radius-xl: 1rem; --bs-border-radius-xxl: 2rem; --bs-border-radius-pill: 50rem; /* ---------------------------------------------------------- FOCUS RING ---------------------------------------------------------- */ --bs-focus-ring-width: 0.25rem; --bs-focus-ring-opacity: 0.25; --bs-focus-ring-color: rgba(var(--bs-primary-rgb), 0.25); /* ---------------------------------------------------------- FORMULARE — Validierung ---------------------------------------------------------- */ --bs-form-valid-color: var(--bs-success); --bs-form-valid-border-color: var(--bs-success); --bs-form-invalid-color: var(--bs-danger); --bs-form-invalid-border-color: var(--bs-danger); /* ---------------------------------------------------------- SEKUNDÄRE & TERTIÄRE FARBEN ---------------------------------------------------------- */ --bs-secondary-color: rgba(33, 37, 41, 0.75); --bs-secondary-color-rgb: 33, 37, 41; --bs-secondary-bg: #e9ecef; --bs-secondary-bg-rgb: 233, 236, 239; --bs-tertiary-color: rgba(33, 37, 41, 0.5); --bs-tertiary-color-rgb: 33, 37, 41; --bs-tertiary-bg: #f8f9fa; --bs-tertiary-bg-rgb: 248, 249, 250; /* ---------------------------------------------------------- SONSTIGES ---------------------------------------------------------- */ --bs-emphasis-color: var(--bs-body-color); --bs-emphasis-color-rgb: 0, 0, 0; --bs-heading-color: var(--bs-body-color); --bs-highlight-color: var(--bs-body-color); --bs-highlight-bg: var(--bs-warning-bg-subtle); --bs-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); --bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); --bs-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175); --bs-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075); } /* ============================================================ BUTTONS ============================================================ */ .btn-primary { --bs-btn-color: #fff; --bs-btn-bg: var(--bs-primary); --bs-btn-border-color: var(--bs-primary); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--bs-primary-hover); --bs-btn-hover-border-color: var(--bs-primary-hover); --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb); --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--bs-primary-hover); --bs-btn-active-border-color: var(--bs-primary-hover); --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: var(--bs-primary); --bs-btn-disabled-border-color: var(--bs-primary); } .btn-secondary { --bs-btn-color: #fff; --bs-btn-bg: var(--bs-secondary); --bs-btn-border-color: var(--bs-secondary); --bs-btn-hover-bg: var(--bs-secondary-hover); --bs-btn-hover-border-color: var(--bs-secondary-hover); --bs-btn-focus-shadow-rgb: var(--bs-secondary-rgb); --bs-btn-active-bg: var(--bs-secondary-hover); --bs-btn-disabled-bg: var(--bs-secondary); --bs-btn-disabled-border-color: var(--bs-secondary); } .btn-success { --bs-btn-color: #fff; --bs-btn-bg: var(--bs-success); --bs-btn-border-color: var(--bs-success); --bs-btn-hover-bg: var(--bs-success-hover); --bs-btn-hover-border-color: var(--bs-success-hover); --bs-btn-focus-shadow-rgb: var(--bs-success-rgb); --bs-btn-active-bg: var(--bs-success-hover); --bs-btn-disabled-bg: var(--bs-success); --bs-btn-disabled-border-color: var(--bs-success); } .btn-danger { --bs-btn-color: #fff; --bs-btn-bg: var(--bs-danger); --bs-btn-border-color: var(--bs-danger); --bs-btn-hover-bg: var(--bs-danger-hover); --bs-btn-hover-border-color: var(--bs-danger-hover); --bs-btn-focus-shadow-rgb: var(--bs-danger-rgb); --bs-btn-active-bg: var(--bs-danger-hover); --bs-btn-disabled-bg: var(--bs-danger); --bs-btn-disabled-border-color: var(--bs-danger); } .btn-warning { --bs-btn-bg: var(--bs-warning); --bs-btn-border-color: var(--bs-warning); --bs-btn-hover-bg: var(--bs-warning-hover); --bs-btn-hover-border-color: var(--bs-warning-hover); --bs-btn-focus-shadow-rgb: var(--bs-warning-rgb); --bs-btn-active-bg: var(--bs-warning-hover); --bs-btn-disabled-bg: var(--bs-warning); --bs-btn-disabled-border-color: var(--bs-warning); } .btn-info { --bs-btn-color: var(--bs-info-text-emphasis); --bs-btn-bg: var(--bs-info); --bs-btn-border-color: var(--bs-info); --bs-btn-hover-color: var(--bs-info-text-emphasis); --bs-btn-hover-bg: var(--bs-info-hover); --bs-btn-hover-border-color: var(--bs-info-hover); --bs-btn-focus-shadow-rgb: var(--bs-info-rgb); --bs-btn-active-bg: var(--bs-info-hover); --bs-btn-disabled-bg: var(--bs-info); --bs-btn-disabled-border-color: var(--bs-info); } .btn-outline-primary { --bs-btn-color: var(--bs-primary); --bs-btn-border-color: var(--bs-primary); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--bs-primary); --bs-btn-hover-border-color: var(--bs-primary); --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--bs-primary); --bs-btn-active-border-color: var(--bs-primary); --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb); } /* ============================================================ UTILITY-KLASSEN ============================================================ */ .bg-primary { background-color: var(--bs-primary) !important; } .bg-secondary { background-color: var(--bs-secondary) !important; } .bg-success { background-color: var(--bs-success) !important; } .bg-danger { background-color: var(--bs-danger) !important; } .bg-warning { background-color: var(--bs-warning) !important; } .bg-info { background-color: var(--bs-info) !important; } .bg-light { background-color: var(--bs-light) !important; } .bg-dark { background-color: var(--bs-dark) !important; } .text-primary { color: var(--bs-primary) !important; } .text-secondary{ color: var(--bs-secondary) !important; } .text-success { color: var(--bs-success) !important; } .text-danger { color: var(--bs-danger) !important; } .border-primary { border-color: var(--bs-primary) !important; } /* ============================================================ BADGES ============================================================ */ .badge.bg-primary { background-color: var(--bs-primary) !important; } .badge.bg-secondary { background-color: var(--bs-secondary) !important; } .badge.bg-success { background-color: var(--bs-success) !important; } .badge.bg-danger { background-color: var(--bs-danger) !important; } .badge.bg-warning { background-color: var(--bs-warning) !important; } .badge.bg-info { background-color: var(--bs-info) !important; color: var(--bs-info-text-emphasis); } /* ============================================================ PAGINATION ============================================================ */ .pagination { --bs-pagination-color: var(--bs-primary); --bs-pagination-hover-color: var(--bs-primary-hover); --bs-pagination-active-bg: var(--bs-primary); --bs-pagination-active-border-color: var(--bs-primary); --bs-pagination-focus-color: var(--bs-primary); --bs-pagination-focus-box-shadow: 0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color); } /* ============================================================ PROGRESS BAR ============================================================ */ .progress-bar { background-color: var(--bs-primary); } .progress-bar.bg-primary { background-color: var(--bs-primary) !important; } /* ============================================================ TABS & PILLS ============================================================ */ .nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { color: var(--bs-primary); border-color: var(--bs-primary) var(--bs-primary) #fff; } .nav-tabs .nav-link:hover { color: var(--bs-primary-hover); } .nav-pills .nav-link.active, .nav-pills .show > .nav-link { background-color: var(--bs-primary); } .nav-pills .nav-link:not(.active):hover { color: var(--bs-primary); } /* ============================================================ DROPDOWN ============================================================ */ .dropdown-item.active, .dropdown-item:active { background-color: var(--bs-primary); } .dropdown-item:hover { color: var(--bs-primary-hover); } /* ============================================================ LIST GROUP ============================================================ */ .list-group { --bs-list-group-active-bg: var(--bs-primary); --bs-list-group-active-border-color: var(--bs-primary); --bs-list-group-action-hover-color: var(--bs-primary-hover); } /* ============================================================ ACCORDION ============================================================ */ .accordion { --bs-accordion-active-color: var(--bs-primary); --bs-accordion-btn-focus-box-shadow: 0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color); } .accordion-button:not(.collapsed) { color: var(--bs-primary); } /* ============================================================ SPINNER ============================================================ */ .spinner-border.text-primary, .spinner-grow.text-primary { color: var(--bs-primary) !important; } /* ============================================================ TABLE ============================================================ */ .table-primary { --bs-table-bg: var(--bs-primary-bg-subtle); --bs-table-border-color: var(--bs-primary-border-subtle); }