/* PBX Device Portal — Custom Styles */ /* --- Design-Tokens ------------------------------------------------------- Zentrale Statusfarben-Ampel (einzige Quelle — nirgends mehr hart hexcodieren). Zwei Ebenen: - ``--pbx-``: gesaettigte Flaechenfarbe (Pills/Badges, weisse Schrift). - ``--pbx--text``: Textfarbe auf Seitenhintergrund; im Dark-Mode aufgehellt, damit der Kontrast auf dunklem Grund erhalten bleibt. */ :root { --pbx-ok: #2e7d32; --pbx-warn: #ef6c00; --pbx-crit: #c62828; --pbx-neutral: #546e7a; --pbx-hold: #1565c0; --pbx-ok-text: #2e7d32; --pbx-warn-text: #b35300; --pbx-crit-text: #c62828; } /* Dark-Mode: Pico steuert das Grundthema ueber ``data-theme`` am (theme.js) bzw. das OS-Schema. Nur die Text-Tokens brauchen hellere Varianten; die Pill-Flaechen funktionieren in beiden Themes. */ [data-theme="dark"] { --pbx-ok-text: #81c784; --pbx-warn-text: #ffb74d; --pbx-crit-text: #ef5350; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --pbx-ok-text: #81c784; --pbx-warn-text: #ffb74d; --pbx-crit-text: #ef5350; } } nav { border-bottom: 1px solid var(--pico-muted-border-color); padding: 0.5rem 0; } footer { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--pico-muted-border-color); text-align: center; } .range-btn[data-range].active { background-color: var(--pico-primary); color: var(--pico-primary-inverse); } /* Geraete-Detailseite: Kopf mit Serial + Status-Pills (Sofort-Blick). */ .device-head { display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 1rem; } .device-head-serial { margin: 0; } /* "Jetzt"-Zone: KPIs (breit) neben Status (schmal). Auf schmalen Screens gestapelt. minmax(0,...) verhindert, dass Inhalte die Spalten sprengen. */ .device-overview { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 1rem; align-items: start; margin-bottom: 1rem; } .device-overview .summary-grid { margin-bottom: 0; } .device-status-card { margin: 0; } @media (max-width: 768px) { .device-overview { grid-template-columns: 1fr; } } /* "Verlauf"-Zone: Chart als Hero. Kopf = Titel links + Zoom-Reset rechts; der Zeitraum-Umschalter steht als segmentierte Leiste in eigener Zeile darunter (steuert Chart UND Betriebsstunden-Fusszeile). */ .chart-card-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 0.75rem; } .range-group { margin: 0; width: 100%; } /* Staff-only Von-Bis-Selektor (ADR-028): kompakte Zeile unter den Range-Buttons. Umbricht auf schmalen Screens; .active hebt die Zeile hervor, solange ein Custom-Fenster aktiv ist. */ .custom-range { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.6rem; margin: 0.6rem 0 0; padding: 0.5rem 0.6rem; border: 1px dashed var(--pico-muted-border-color, #b3c0d1); border-radius: 6px; } .custom-range.active { border-style: solid; border-color: var(--pico-primary, #3b7ddd); } .custom-range label { margin: 0; font-size: 0.8rem; } .custom-range input[type="date"] { margin: 0.15rem 0 0; padding: 0.2rem 0.5rem; font-size: 0.85rem; width: auto; } .custom-range button { margin: 0; padding: 0.25rem 0.8rem; font-size: 0.85rem; width: auto; } #zoom-reset { margin: 0; padding: 0.2rem 0.7rem; font-size: 0.8rem; width: auto; } /* Feste, responsive Hoehe gibt dem Chart Gewicht (Hero); das Canvas fuellt den Wrapper via maintainAspectRatio:false. */ .chart-canvas-wrap { position: relative; height: clamp(320px, 48vh, 540px); margin-top: 0.75rem; } .chart-hint, .chart-info { display: block; text-align: center; color: var(--pico-muted-color); } .chart-hint { margin-top: 0.25rem; } .chart-info { margin: 0.5rem 0 0 0; } /* Betriebsstunden als schlanke Chart-Fusszeile — der Zeitraum-Umschalter darueber steuert sie sichtbar mit. */ .ophours-strip { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 1.5rem; margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--pico-muted-border-color); } .ophours-strip strong { font-size: 1.15rem; } /* Diagnose-Parameter (Staff): kompaktes Zeitungs-Spaltenlayout statt einer langen einspaltigen Liste. column-* packt die Gruppen dicht; break-inside haelt jede Achsen-Gruppe zusammen. */ #chart-param-controls { column-width: 11rem; column-gap: 1.5rem; margin-top: 0.75rem; } .param-group { break-inside: avoid; margin: 0 0 1rem 0; padding-top: 0; } .param-group label { display: block; margin-bottom: 0.1rem; } .summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 1rem; margin-bottom: 1rem; } .summary-card { margin: 0; } .summary-card strong { display: block; font-size: 1.8rem; line-height: 1.1; } .summary-active { border-top: 4px solid var(--pbx-ok); } .summary-recent { border-top: 4px solid var(--pbx-warn); } .summary-stale { border-top: 4px solid var(--pbx-crit); } .reverse-ssh-filter-form { align-items: end; margin-bottom: 1rem; } .status-pill { display: inline-block; border-radius: 999px; padding: 0.15rem 0.55rem; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.03em; } /* Pills mit erklaerendem Tooltip signalisieren das per Hilfe-Cursor. */ .status-pill[title]:not([title=""]) { cursor: help; } .status-active { background: var(--pbx-ok); color: #fff; } .status-recent { background: var(--pbx-warn); color: #fff; } .status-stale { background: var(--pbx-crit); color: #fff; } .status-unknown { background: var(--pbx-neutral); color: #fff; } /* Service-Hold (ADR-010): aktiv festgehaltene Anlage. */ .status-hold { background: var(--pbx-hold); color: #fff; } .hold-toggle-form { margin: 0.35rem 0 0 0; } .hold-toggle-form button { margin: 0; padding: 0.15rem 0.6rem; font-size: 0.8rem; } .muted-note { color: var(--pico-muted-color); } .warning-box { border-left: 4px solid var(--pbx-warn); } .mono-wrap { white-space: nowrap; } .compact-table td, .compact-table th { vertical-align: top; } /* Zurueck-Link oben auf der Geraete-Detailseite. */ .back-link { margin-bottom: 0.25rem; font-size: 0.9rem; } /* Ansichts-Umschalter (Kacheln/Liste) rechtsbuendig ueber der Liste. */ .view-toggle { display: flex; justify-content: flex-end; margin-bottom: 1rem; } .view-toggle .view-btn { width: auto; margin: 0; padding: 0.3rem 0.9rem; } .view-btn.active { background-color: var(--pico-primary); color: var(--pico-primary-inverse); } /* Kachel-Raster: bricht um statt alle Karten in eine Zeile zu pressen (Picos .grid legt sonst alles in eine Reihe -> Karten unbrauchbar schmal). auto-fill + minmax ~ 5 Karten pro Zeile auf Desktop, responsiv weniger. */ .device-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr)); gap: 1rem; margin-bottom: 1rem; } /* Geraete-Karte (Dashboard): Seriennummer links, aktuelle Ist-Temperatur rechts im Header als Schnellanzeige. min-width:0 erlaubt das Kuerzen der Serial per Ellipsis, damit die Temperatur nie in den Namen rutscht. */ .device-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; } .device-card-serial { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .device-card-temp { font-size: 1.3rem; font-weight: 700; white-space: nowrap; flex-shrink: 0; } /* Rohdaten-Tabelle: Steuerleiste + horizontaler Scroll auf schmalen Screens. */ .log-controls { display: flex; align-items: center; gap: 0.75rem; margin: 0.75rem 0; } .log-controls button { margin: 0; padding: 0.2rem 0.7rem; width: auto; } .log-table-wrap { overflow-x: auto; } /* Listen-Ansicht: kompakte, scannbare Tabelle fuer grosse Flotten. */ .device-list-table { margin-bottom: 1rem; } .device-list-table th, .device-list-table td { vertical-align: middle; } .device-list-table a[role="button"] { margin: 0; padding: 0.2rem 0.7rem; white-space: nowrap; } /* Klickbare Spaltenkoepfe: der Button fuellt die (weiterhin gepolsterte) Zelle, sieht selbst aber nicht wie ein Button aus — er erbt die th-Schrift und bleibt links buendig zu den Datenzellen. Pfeil (.sort-arrow) setzt JS. */ .device-list-table th[data-sort] .th-sort { width: 100%; margin: 0; padding: 0; background: none; border: none; color: inherit; font: inherit; text-align: left; cursor: pointer; display: inline-flex; align-items: center; } .device-list-table th[data-sort] .th-sort:hover { color: var(--pico-primary); } .device-list-table th[data-sort] .th-sort:focus-visible { outline: 2px solid var(--pico-primary); outline-offset: 2px; } /* Geraete-Status-Block (Dashboard-Karte + Detailseite): drei beschriftete Zeilen Verbindung / Zustand / Letzte Daten. Label und Pill nebeneinander. */ .device-status { display: flex; flex-direction: column; gap: 0.4rem; margin: 0.5rem 0; } .device-status-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .device-status-label { min-width: 7rem; color: var(--pico-muted-color); font-size: 0.85rem; } /* Server-Dashboard (ADR-029, staff-only): Chart-Hoehe + Journal-Viewer. Journal-Messages sind Fremdinhalt (Container-/System-Logs) — monospaced, umbruchsicher, damit lange Zeilen das Layout nicht sprengen. */ .srvdash-chart-wrap { position: relative; height: clamp(260px, 38vh, 420px); } .srvdash-journal-ts { white-space: nowrap; font-size: 0.8rem; } .srvdash-journal-msg { font-family: monospace; font-size: 0.8rem; white-space: pre-wrap; word-break: break-word; max-width: 42rem; } .srvdash-prio-err { color: var(--pbx-crit-text); font-weight: 600; } .srvdash-prio-warn { color: var(--pbx-warn-text); font-weight: 600; } .srvdash-journal-nav { display: flex; align-items: center; gap: 1rem; margin: 0.5rem 0 1.5rem; } .srvdash-journal-nav button { width: auto; padding: 0.25rem 0.9rem; margin: 0; } /* Server-Dashboard Tranche 2: Dienste/Timer nebeneinander (Desktop). */ .srvdash-two-col { display: grid; grid-template-columns: 1fr 2fr; gap: 1rem; } @media (max-width: 768px) { .srvdash-two-col { grid-template-columns: 1fr; } } /* --- Utility-Klassen ------------------------------------------------------ Ersetzen die frueheren, dutzendfach kopierten Inline-Styles der Admin-Templates (Buttons/Inline-Forms/Tabellen-Scroll). */ /* Kompakter Aktions-Button in Tabellenzeilen und Formularleisten. */ .btn-sm { width: auto; margin: 0; padding: 0.2rem 0.6rem; font-size: 0.85rem; } /* Formular ohne Block-Layout (z.B. Aktions-Buttons in Tabellenzellen). */ .form-inline { display: inline; margin: 0; padding: 0; } /* Scroll-Container um breite Tabellen — Pflicht auf Mobile, sonst sprengt die Tabelle das Seitenlayout. */ .table-wrap { overflow-x: auto; } /* Einheitliche Breite fuer Anlage-/Bearbeitungs-Formulare. */ .form-narrow { max-width: 36rem; } /* Kompaktes Inline-Select in Tabellenzellen (Tenants/Gruppen). */ .select-compact { display: inline-block; width: auto; margin: 0; padding: 0.2rem 1.75rem 0.2rem 0.4rem; font-size: 0.85rem; } /* Zuweisungs-Chip (Geraete-Zuordnung): Name + Aufheben-Button als Einheit. */ .assign-chip { display: inline-flex; align-items: center; gap: 0.25rem; margin-right: 0.5rem; } /* Gruppen-Karten (Geraete-/User-Gruppen): Kopfzeile mit Loeschen rechts (ersetzt das fragile float:right) + Abschnitts-Abstand. */ .group-head { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .group-section { margin-top: 1rem; } /* Kompakte "Auswahl + Hinzufuegen"-Zeile in den Gruppen-Karten. */ .inline-add-form { display: flex; gap: 0.5rem; align-items: center; max-width: 32rem; } .inline-add-form select { margin: 0; padding: 0.2rem 1.75rem 0.2rem 0.4rem; font-size: 0.85rem; } /* --- Flash-Meldungen (zentral, _flash.html) ------------------------------ */ .flash { padding: 0.6rem 0.9rem; margin-bottom: 1rem; border-radius: 6px; border-left: 4px solid var(--pbx-neutral); background: color-mix(in srgb, var(--pbx-neutral) 10%, transparent); } .flash-success { border-left-color: var(--pbx-ok); background: color-mix(in srgb, var(--pbx-ok) 10%, transparent); } .flash-error { border-left-color: var(--pbx-crit); background: color-mix(in srgb, var(--pbx-crit) 10%, transparent); } .flash-warning { border-left-color: var(--pbx-warn); background: color-mix(in srgb, var(--pbx-warn) 10%, transparent); } /* Bestand: reverse_ssh/quarantine referenzierten .success-box, die es nie gab (Erfolg sah aus wie eine Warnung). Jetzt definiert. */ .success-box { border-left: 4px solid var(--pbx-ok); } /* --- Severity-Badges (Alarme/Alarmregeln) -------------------------------- Einheitliches Badge statt pro Seite neu erfundener -Inline-Styles. */ .badge { display: inline-block; border-radius: 4px; padding: 0.15rem 0.45rem; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.03em; color: #fff; background: var(--pbx-neutral); } .badge-critical { background: var(--pbx-crit); } .badge-warning { background: var(--pbx-warn); } .badge-info { background: var(--pbx-neutral); } /* --- Nav: Alarm-Badge + Aktiv-Markierung + Dropdowns ---------------------- */ .nav-badge { display: inline-block; background: var(--pbx-warn); color: #fff; border-radius: 999px; padding: 0.05rem 0.45rem; font-size: 0.75rem; font-weight: 700; margin-left: 0.3rem; } .nav-badge--critical { background: var(--pbx-crit); } /* Aktive Seite in der Hauptnavigation sichtbar machen (nicht nur Farbe: Unterstreichung als zweites Signal). */ nav a[aria-current="page"], nav details.dropdown summary.nav-current { color: var(--pico-primary); font-weight: 600; text-decoration: underline; text-underline-offset: 0.35rem; } /* Pico-Dropdowns in der Nav: kompakte Breite, Menue nicht abschneiden. */ nav details.dropdown { margin: 0; } nav details.dropdown summary { margin: 0; } /* Theme-Umschalter: schlanker Icon-Button. */ #theme-toggle { width: auto; margin: 0; padding: 0.25rem 0.55rem; font-size: 0.9rem; line-height: 1; } /* Sprachumschalter in der Nav (vorher inline gestylt). */ nav select.locale-select { padding: 0.25rem 1.75rem 0.25rem 0.5rem; margin: 0; font-size: 0.85rem; width: auto; } /* --- Chart-Ladezustand (app.js) ------------------------------------------- Halbtransparente Abdeckung + Spinner, solange Daten geladen werden. */ .chart-canvas-wrap.loading::after { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--pico-background-color) 55%, transparent); z-index: 2; } .chart-canvas-wrap.loading::before { content: ""; position: absolute; top: calc(50% - 1rem); left: calc(50% - 1rem); width: 2rem; height: 2rem; border: 3px solid var(--pico-muted-border-color); border-top-color: var(--pico-primary); border-radius: 50%; animation: pbx-spin 0.8s linear infinite; z-index: 3; } @keyframes pbx-spin { to { transform: rotate(360deg); } } /* --- Dashboard: Suche + Status-Filter (dashboard.js) ---------------------- */ .dash-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 1rem; } .dash-controls input[type="search"] { margin: 0; max-width: 16rem; padding: 0.3rem 0.7rem; } .dash-controls .filter-btn { width: auto; margin: 0; padding: 0.3rem 0.9rem; } .filter-btn.active { background-color: var(--pico-primary); color: var(--pico-primary-inverse); } /* Rechtsbuendiger Ansichts-Umschalter in derselben Zeile wie die Filter. */ .dash-controls .view-group { margin-left: auto; display: flex; gap: 0.25rem; } /* Sortier-Chips (#sort-bar): sitzen zwischen der Uebersicht und den Kacheln und gelten nur fuer die Kachel-Ansicht. Optik wie die Filter-Chips (aktiv = Primary), plus vorangestelltes Label; Umbruch auf schmalen Screens ueber flex-wrap. */ .sort-group { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; margin-bottom: 1rem; } .sort-group-label { color: var(--pico-muted-color); font-size: 0.85rem; margin-right: 0.15rem; } .sort-btn { width: auto; margin: 0; padding: 0.3rem 0.9rem; } .sort-btn.active { background-color: var(--pico-primary); color: var(--pico-primary-inverse); }