/* app.css — App-spezifische Restkomponenten, die in Bootstrap keine direkte Entsprechung haben. Reihenfolge im : bootstrap.min.css → bootstrap-icons → homelab.css → app.css */ /* --- Status-Bar oben auf dem Dashboard ----------------------------------- */ .status-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.5rem 0.85rem; margin-bottom: 0.6rem; background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius); font-size: 0.92rem; line-height: 1.4; } .status-bar .sep { color: var(--bs-secondary-color); } .status-bar .grow { flex: 1; } .status-bar a { text-decoration: none; } @media (max-width: 575.98px) { .status-bar { font-size: 0.85rem; } /* Auf sehr schmalem Screen Separator weg, damit Items eigene Zeilen bekommen */ .status-bar .sep { display: none; } .status-bar > span { flex-basis: 100%; } .status-bar > .grow { display: none; } } .backup-ok { color: #15803d; } .backup-warn { color: #b58900; } .backup-stale { color: var(--bs-danger); } [data-bs-theme="dark"] .backup-ok { color: #6ee7b7; } [data-bs-theme="dark"] .backup-warn { color: #fbbf24; } /* --- Einzeiliger Filter direkt unter der Status-Leiste ------------------- */ .inline-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.5rem 0.85rem; margin: 0 0 1rem; background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius); } .inline-filter .filter-label { font-weight: 600; margin-right: 0.25rem; } .inline-filter .dash { color: var(--bs-secondary-color); } .inline-filter input[type="date"], .inline-filter input[type="text"] { padding: 0.4rem 0.55rem; min-height: 36px; font-size: 0.95rem; } .inline-filter input[type="date"] { min-width: 9.5rem; } .inline-filter input[type="text"] { flex: 1; min-width: 10rem; } /* --- Login-Karte zentriert ----------------------------------------------- */ .login-card { max-width: 22rem; margin: 4rem auto 0; } /* --- Schedule-Tabelle (kompakt, max 28rem) ------------------------------- */ .schedule-table { max-width: 28rem; } .schedule-table td { padding: 0.4rem 0.6rem; vertical-align: middle; } .schedule-table input[type="time"] { width: auto; min-width: 6rem; padding: 0.35rem 0.55rem; min-height: 32px; } /* --- Collapsible
-Karten ---------------------------------------- */ .collapsible > summary { cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; user-select: none; } .collapsible > summary::-webkit-details-marker { display: none; } .collapsible > summary::before { content: "▸"; color: var(--bs-secondary-color); font-size: 0.85em; margin-right: 0.1rem; transition: transform 0.15s ease; display: inline-block; } .collapsible[open] > summary::before { transform: rotate(90deg); } .collapsible > summary:hover { color: var(--hl-primary); } .collapsible-summary { color: var(--bs-secondary-color); font-weight: 400; font-size: 0.92rem; } .collapsible[open] .collapsible-summary { opacity: 0.6; } /* --- Badge-Warn (Lehrkraft deaktiviert) ---------------------------------- */ .badge-warn { display: inline-block; background: var(--bs-danger-bg-subtle); color: var(--bs-danger); border-radius: 0.25rem; padding: 0.05em 0.45em; font-size: 0.85em; margin-left: 0.4rem; } /* --- Badge-Schulfrei (Eintrag an Feiertag / Ferientag / Studientag) ------ */ .badge-school-free { display: inline-block; background: var(--bs-success-bg-subtle); color: var(--bs-success); border-radius: 0.25rem; padding: 0.05em 0.45em; font-size: 0.85em; margin-left: 0.4rem; cursor: help; } /* Zeilen-Tönung in der Detail-Tabelle, damit man auf einen Blick sieht, welche Einträge nicht ins Mahnwesen fließen. */ .row-schulfrei td { background: color-mix(in srgb, var(--bs-success-bg-subtle) 35%, transparent); } /* --- Dry-Run-Toggle (Bordered-Hinweis-Box) ------------------------------- */ .dry-run-toggle { display: flex; gap: 0.6rem; align-items: flex-start; margin: 1.25rem 0 0; padding: 0.75rem; background: var(--bs-tertiary-bg); border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius); font-size: 0.95rem; cursor: pointer; } .dry-run-toggle input { margin-top: 0.25rem; } /* --- App-Container-Innenabstand ------------------------------------------ */ main.app-main { max-width: 1140px; margin: 0 auto; padding: 1.5rem 1.25rem; } /* --- Theme-Toggle-Button in der Topbar ----------------------------------- */ .theme-toggle { background: none; border: 1px solid var(--bs-border-color); color: var(--bs-body-color); border-radius: var(--bs-border-radius); padding: 0.35rem 0.6rem; cursor: pointer; min-height: 36px; font-size: 1rem; line-height: 1; } .theme-toggle:hover { background: var(--bs-tertiary-bg); } .theme-toggle .bi-sun-fill { display: none; } [data-bs-theme="dark"] .theme-toggle .bi-moon-stars-fill { display: none; } [data-bs-theme="dark"] .theme-toggle .bi-sun-fill { display: inline-block; } /* --- Backlog-Sparkline in der Lehrkraft-Tabelle -------------------------- */ .hl-sparkline { display: block; overflow: visible; } .hl-sparkline-area { fill: var(--bs-primary); opacity: 0.15; stroke: none; } .hl-sparkline-line { fill: none; stroke: var(--bs-primary); stroke-width: 1.25; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; } .hl-sparkline-dot { fill: var(--bs-primary); }