/* homelab.css — Theming + Mobile-First-Layer für Klassenbuch-Monitor. Folgt ARD-Standards 8 (Frontend) + 13 (PWA/iOS-Touch) aus mrckch/ARD-homelab-Apps. Lade-Reihenfolge im : 1. bootstrap.min.css 2. bootstrap-icons.min.css 3. homelab.css ← Brand-Variablen + Safe-Area + iOS-Switch 4. app.css ← App-spezifische Restkomponenten */ :root { /* --- Brand-Variablen aus ARD §8.2 -------------------------------------- */ --hl-primary: #2563eb; --hl-accent: #6610f2; --hl-success: #198754; --hl-warning: #ffc107; --hl-danger: #dc3545; --hl-radius: 0.5rem; --hl-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.075); --hl-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Bootstrap-5-Brand-Overrides — damit btn-primary etc. auf unsere Primärfarbe ziehen, ohne SCSS-Build. */ --bs-primary: var(--hl-primary); --bs-primary-rgb: 37, 99, 235; --bs-link-color: var(--hl-primary); --bs-link-color-rgb: 37, 99, 235; --bs-border-radius: var(--hl-radius); --bs-font-sans-serif: var(--hl-font); } [data-bs-theme="dark"] { --bs-primary: var(--hl-primary); --bs-primary-rgb: 37, 99, 235; } /* Hover-Variante für btn-primary auf unsere Brand-Color anpassen */ .btn-primary { --bs-btn-bg: var(--hl-primary); --bs-btn-border-color: var(--hl-primary); --bs-btn-hover-bg: #1d4fd8; --bs-btn-hover-border-color: #1d4fd8; --bs-btn-active-bg: #1d4fd8; --bs-btn-active-border-color: #1d4fd8; } /* --- Safe-Area (ARD §13.3) ------------------------------------------------- */ /* Damit Inhalt nicht unter Notch/Home-Indicator rutscht. */ body { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); } /* Sticky Bottom-Action-Bar — wird auf Wunsch pro Seite gesetzt. */ .hl-bottom-bar { position: sticky; bottom: 0; z-index: 1020; background: var(--bs-body-bg); border-top: 1px solid var(--bs-border-color); padding: 0.75rem 1rem; padding-bottom: calc(0.75rem + env(safe-area-inset-bottom)); margin: 1rem -1rem -1rem; } /* --- iOS-Switch-Override (ARD §13.4) -------------------------------------- */ /* Bootstrap-form-switch bekommt iOS-Anmutung — Touch-typischer Look. */ .form-switch .form-check-input { width: 3.25em; height: 2em; border-radius: 2em; background-color: #e9e9eb; background-image: none; border: none; box-shadow: inset 0 0 0 2px #e9e9eb; transition: background-color .25s, box-shadow .25s; cursor: pointer; position: relative; } .form-switch .form-check-input:checked { background-color: #34c759; background-image: none; box-shadow: inset 0 0 0 2px #34c759; } .form-switch .form-check-input:focus { box-shadow: inset 0 0 0 2px var(--hl-primary); outline: none; background-image: none; } .form-switch .form-check-input:checked:focus { box-shadow: inset 0 0 0 2px #34c759; background-image: none; } .form-switch .form-check-input::before { content: ""; position: absolute; top: 0.125em; left: 0.125em; width: 1.75em; height: 1.75em; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); transform: translateX(0); transition: transform .2s; } .form-switch .form-check-input:checked::before { transform: translateX(1.25em); } [data-bs-theme="dark"] .form-switch .form-check-input { background-color: #3a3a3c; box-shadow: inset 0 0 0 2px #3a3a3c; } [data-bs-theme="dark"] .form-switch .form-check-input:checked { background-color: #30d158; box-shadow: inset 0 0 0 2px #30d158; } /* --- Tap-Target-Minimum für die wichtigsten Links + Buttons --------------- */ /* Bootstrap-Buttons erfüllen 44 px durch Padding; reine Links nicht. */ .navbar .nav-link, .navbar-brand, .table a.action-link, .list-group-item-action { min-height: 44px; display: inline-flex; align-items: center; } /* --- Topbar als Bootstrap-Navbar mit Sticky ------------------------------- */ .navbar.hl-topbar { box-shadow: var(--hl-shadow); background: var(--bs-body-bg); border-bottom: 1px solid var(--bs-border-color); } /* --- Tabellen Mobile-Spaltenpriorisierung (ARD §8.6) ---------------------- */ /* Statt H-Scroll: low-prio-Spalten unter 576 px verstecken. */ @media (max-width: 575.98px) { .table .d-mobile-hide { display: none !important; } } /* --- TomSelect in Flex-Forms --------------------------------------------- Standard-Bootstrap-Theme gibt der .ts-wrapper-Div eine intrinsische Mindestbreite, die in engen Flex-Containern den nachfolgenden Speichern- Button auf die nächste Zeile drückt. Mit max-width:100% und min-width:0 darf sie sauber schrumpfen — der flex-shrink-0-Button bleibt daneben. */ .ts-wrapper { max-width: 100%; min-width: 0; } .d-flex > .ts-wrapper, .d-flex .form-select + .ts-wrapper, .d-flex > div > .ts-wrapper { flex: 1 1 0; min-width: 0; }