/* * App-Theme: bildet die Vereinsfarben (Club-Colors) auf Bootstrap-Komponenten ab. * Die konkreten Farben werden zur Laufzeit von saTheme.js als CSS-Variablen * (--app-primary / --app-secondary / --app-accent / --app-on-primary) auf * gesetzt; hier stehen nur die Defaults und das Mapping auf Bootstrap. * * color-mix() wird von den eingesetzten WebViews (WebView2, WKWebView, * Android System WebView) unterstuetzt und erzeugt die Hover-/Active-Schattierungen. */ :root { --app-primary: #0d6efd; --app-secondary: #6c757d; --app-accent: #fd7e14; --app-on-primary: #ffffff; /* abgeleitete Schattierungen */ --app-primary-hover: color-mix(in srgb, var(--app-primary) 85%, black); --app-primary-active: color-mix(in srgb, var(--app-primary) 78%, black); --app-primary-soft: color-mix(in srgb, var(--app-primary) 12%, white); /* globale Bootstrap-Hooks */ --bs-primary: var(--app-primary); --bs-link-color: var(--app-primary); --bs-link-hover-color: var(--app-primary-hover); } /* ── Links ─────────────────────────────────── */ a { color: var(--app-primary); } a:hover { color: var(--app-primary-hover); } /* ── Buttons (solid) ───────────────────────── */ .btn-primary { --bs-btn-bg: var(--app-primary); --bs-btn-border-color: var(--app-primary); --bs-btn-color: var(--app-on-primary); --bs-btn-hover-bg: var(--app-primary-hover); --bs-btn-hover-border-color: var(--app-primary-hover); --bs-btn-hover-color: var(--app-on-primary); --bs-btn-active-bg: var(--app-primary-active); --bs-btn-active-border-color: var(--app-primary-active); --bs-btn-active-color: var(--app-on-primary); --bs-btn-disabled-bg: var(--app-primary); --bs-btn-disabled-border-color: var(--app-primary); --bs-btn-disabled-color: var(--app-on-primary); } /* ── Buttons (outline) ─────────────────────── */ .btn-outline-primary { --bs-btn-color: var(--app-primary); --bs-btn-border-color: var(--app-primary); --bs-btn-hover-bg: var(--app-primary); --bs-btn-hover-border-color: var(--app-primary); --bs-btn-hover-color: var(--app-on-primary); --bs-btn-active-bg: var(--app-primary); --bs-btn-active-border-color: var(--app-primary); --bs-btn-active-color: var(--app-on-primary); --bs-btn-disabled-color: var(--app-primary); --bs-btn-disabled-border-color: var(--app-primary); } /* ── Hintergrund-/Text-/Border-Utilities ───── */ .bg-primary { background-color: var(--app-primary) !important; } .text-primary { color: var(--app-primary) !important; } .border-primary { border-color: var(--app-primary) !important; } .text-bg-primary { background-color: var(--app-primary) !important; color: var(--app-on-primary) !important; } .bg-accent { background-color: var(--app-accent) !important; } .text-accent { color: var(--app-accent) !important; } /* ── Badges / Pills / Listen ───────────────── */ .badge.text-bg-primary { background-color: var(--app-primary) !important; color: var(--app-on-primary) !important; } .nav-pills .nav-link.active, .nav-pills .show > .nav-link { background-color: var(--app-primary); color: var(--app-on-primary); } .list-group-item.active { background-color: var(--app-primary); border-color: var(--app-primary); color: var(--app-on-primary); } /* ── Formulare ─────────────────────────────── */ .form-check-input:checked { background-color: var(--app-primary); border-color: var(--app-primary); } .form-control:focus, .form-select:focus, .form-check-input:focus { border-color: color-mix(in srgb, var(--app-primary) 55%, white); box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--app-primary) 25%, transparent); } /* ── Pagination / Progress / Spinner ───────── */ .page-link { color: var(--app-primary); } .page-item.active .page-link { background-color: var(--app-primary); border-color: var(--app-primary); } .progress-bar { background-color: var(--app-primary); } .spinner-border.text-primary, .spinner-grow.text-primary { color: var(--app-primary) !important; }