/* bluegate.css — Ergänzungen zu styles/style.css (aus der BlueBox-Oberfläche
übernommen). Nur, was es dort nicht gibt: die BlueBox-Auswahl und die
Benutzeranzeige in der Kopfleiste. Farben kommen aus den Tokens von
style.css, damit helles und dunkles Schema ohne Zutun mitlaufen. */
/* ── BlueBox-Auswahl in der Toolbar ─────────────────────────────────── */
.bb-select {
padding: 7px 12px;
background: var(--btn-bg, #2a2e35);
color: var(--text-soft, #f8f9fa);
border: 1px solid var(--border, #3f4458);
border-radius: 6px;
font-size: 0.86rem;
font-family: inherit;
cursor: pointer;
transition: border-color 0.2s ease;
}
.bb-select:hover { border-color: #007bff; }
.bb-select:focus { outline: none; border-color: #007bff; box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25); }
/* style.css gibt input/select global margin-left:20px — das schöbe die
BlueBox-Auswahl in der Sensor-Toolbar aus der Flucht der Tabelle darunter.
Hier für die Toolbar zurücksetzen, damit sie linksbündig steht. */
.sensor-toolbar select,
.sensor-toolbar input { margin-left: 0; }
/* ── Benutzer in der Kopfleiste ─────────────────────────────────────── */
.header-user {
display: flex;
flex-direction: column;
align-items: flex-end;
margin-right: 4px;
font-size: 0.84rem;
line-height: 1.25;
color: var(--text-soft, #f8f9fa);
white-space: nowrap;
}
.header-user-sub {
font-size: 0.72rem;
color: var(--text-dim, #a0a0a0);
}
/* ── Sensortabelle: BlueGate-eigene Spalten ─────────────────────────── */
.sensor-val { font-weight: 600; font-variant-numeric: tabular-nums; }
.sensor-param { margin-left: 6px; font-size: 0.78rem; color: var(--text-dim, #a0a0a0); }
.sensor-none { color: var(--text-dim, #a0a0a0); }
/* ── Hinweis, wenn nichts freigegeben ist ───────────────────────────── */
.hinweis {
max-width: 640px;
margin: 24px 20px;
padding: 16px 18px;
background: var(--nav-bg, #23272e);
border: 1px solid var(--border, #3f4458);
border-radius: 8px;
color: var(--text-dim, #a0a0a0);
font-size: 0.9rem;
}
/* Vorgemerkte BlueBoxen (lib/bb_vormerkung.php) — im Dashboard und in der
Sensorliste. Eigene Regeln statt .badge/.mono aus app.css: sensoren.php
lädt app.css nicht. */
.bb-vorgemerkt p { margin: 0; }
.bb-vorgemerkt p + p {
margin-top: 10px;
display: flex;
flex-wrap: wrap;
gap: 8px 16px;
}
.bb-vorgemerkt-sn {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
color: var(--text-light, #e0e0e0);
}
.bb-vorgemerkt-badge {
display: inline-block;
margin-left: 6px;
padding: 2px 8px;
border-radius: 20px;
font-size: 0.72rem;
font-weight: 600;
background-color: rgba(240, 173, 78, 0.18);
color: #f0ad4e;
}
/* ── Icon-Spalten der Sensortabelle (Chart / Edit) ──────────────────── */
table#t01 td.cell-icon { text-align: center; width: 70px; }
.cell-icon a { display: inline-flex; opacity: 0.75; transition: opacity 0.2s ease; }
.cell-icon a:hover { opacity: 1; }
/* ── Sensor bearbeiten (Ergänzung zu sensor_edit.css) ───────────────── */
.sensor-sub {
margin: -6px 0 16px 20px;
font-size: 0.85rem;
color: var(--text-dim, #777);
}
.sensor-msg { margin: 0 20px 18px; }
.sensor-actions {
display: flex;
align-items: center;
gap: 12px;
margin-top: 28px;
padding-top: 20px;
border-top: 1px solid var(--border-soft, rgba(255,255,255,0.07));
}
/* Löschen rechts abgesetzt — nicht neben Speichern, wo man es verwechselt */
.sensor-delete { margin-left: auto; }
/* Spaltenkopf der Export-Vorschau: BlueBox unter dem Sensornamen —
die Spalten können aus verschiedenen Geräten stammen. */
.exp-preview-table .th-sub {
font-weight: 400;
font-size: 0.72rem;
color: var(--text-dim, #777);
}
/* ── Live Monitor und die Auswerteseite ─────────────────────────────── */
.monitor-hint {
margin: 12px 2px 10px;
font-size: 0.8rem;
color: var(--text-dim, #777);
}
/* Aufgenommene Sensoren — in der BlueBox stehen sie nur in der Legende,
hier einzeln entfernbar. Dieselben Kärtchen tragen auf kalibrierung.php die
aufgenommenen Auswertungen: dieselbe Bedienung, also dasselbe Aussehen. */
.monitor-chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 14px;
}
.monitor-chips:empty { display: none; }
.monitor-chip {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 5px 8px 5px 10px;
background: var(--field-bg, #1f232b);
border: 1px solid var(--border, #444);
border-left-width: 3px;
border-radius: 6px;
font-size: 0.82rem;
color: var(--text-soft, #d0d5de);
}
.monitor-chip-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.monitor-chip-unit { color: var(--text-dim, #777); }
.monitor-chip-bb { font-family: Consolas, monospace; font-size: 0.72rem; color: var(--text-dim, #777); }
.monitor-chip-x {
padding: 0 2px;
background: none;
border: none;
color: var(--text-dim, #777);
font-size: 1rem;
line-height: 1;
cursor: pointer;
}
.monitor-chip-x:hover { color: #ff7a6b; }
/* Anklickbares Kärtchen (kalibrierung.php): Es wählt die Reihe, für die
Speichern und Löschen im Seitenkopf gelten, und öffnet ihre Skalierung.
Auf monitor.php sind die Kärtchen nur Anzeige und bleiben davon unberührt. */
.monitor-chip[tabindex] { cursor: pointer; }
.monitor-chip.aktiv {
background: var(--accent-lo-e, rgba(0, 123, 255, 0.15));
box-shadow: 0 0 0 1px var(--accent-e, #007bff) inset;
}
/* ── Hinweis auf nahenden Ablauf des Zugangs ────────────────────────── */
.ablauf-banner {
padding: 9px 24px;
background: rgba(240, 173, 78, 0.14);
border-bottom: 1px solid rgba(240, 173, 78, 0.45);
color: #f0ad4e;
font-size: 0.85rem;
text-align: center;
}
/* Wartungsankündigung des Admins — blaugrün, damit sie sich vom bernsteinfarbenen
Ablaufhinweis abhebt. Erscheint auf jeder Seite und auf der Login-Seite. */
.wartung-banner {
padding: 9px 24px;
background: rgba(52, 152, 219, 0.14);
border-bottom: 1px solid rgba(52, 152, 219, 0.45);
color: #3498db;
font-size: 0.85rem;
text-align: center;
}
.wartung-banner .wartung-zeit {
opacity: 0.85;
white-space: nowrap;
}
/* Vertretung: Der Admin arbeitet in der Sitzung eines Kundenkontos. Violett,
damit es weder mit dem bernsteinfarbenen Ablaufhinweis noch mit der
blaugrünen Wartungsankündigung zu verwechseln ist — und mit dem Rückweg
gleich daneben, denn genau ihn sucht man, wenn man das Banner liest. */
.vertretung-banner {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 6px 14px;
padding: 9px 24px;
background: rgba(155, 89, 182, 0.16);
border-bottom: 1px solid rgba(155, 89, 182, 0.5);
color: #b07cc6;
font-size: 0.85rem;
text-align: center;
}
.vertretung-zurueck {
background: none;
border: 1px solid rgba(155, 89, 182, 0.7);
color: #b07cc6;
border-radius: 4px;
padding: 3px 10px;
font-size: 0.8rem;
cursor: pointer;
}
.vertretung-zurueck:hover { background: rgba(155, 89, 182, 0.22); color: #fff; }
/* Zwei nebeneinanderliegende Felder (von/bis); bricht auf schmalen Schirmen um. */
.field-grid-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
@media (max-width: 520px) {
.field-grid-2 { grid-template-columns: 1fr; }
}
/* flatpickr-Feld mit Leeren-Knopf. Der globale input{margin-left:20px} aus
style.css würde das Feld einrücken — hier zurücksetzen und volle Breite geben. */
.fp-wrap { position: relative; display: block; }
.fp-wrap input {
margin-left: 0;
width: 100%;
padding-right: 30px; /* Platz für den Leeren-Knopf */
box-sizing: border-box;
}
.fp-clear {
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
cursor: pointer;
color: var(--text-muted);
font-size: 1.15rem;
line-height: 1;
text-decoration: none;
user-select: none;
}
.fp-clear:hover { color: var(--status-offline, #e74c3c); }
/* Wartungsverlauf — Tabelle beendeter Wartungen unter dem Formular. */
.wartung-verlauf-titel {
margin: 32px 0 12px;
font-size: 1rem;
font-weight: 600;
color: var(--text-light);
}
.wartung-verlauf { overflow-x: auto; }
.wartung-log {
width: 100%;
border-collapse: collapse;
font-size: 0.85rem;
}
.wartung-log th,
.wartung-log td {
padding: 8px 12px;
text-align: left;
border-bottom: 1px solid var(--border);
vertical-align: top;
}
.wartung-log th {
font-weight: 500;
color: var(--text-muted);
white-space: nowrap;
}
.wartung-log td { color: var(--text-light); }
.wartung-log-text {
max-width: 380px;
white-space: normal;
word-break: break-word;
}
.wartung-badge {
display: inline-block;
padding: 2px 9px;
border-radius: 10px;
font-size: 0.75rem;
white-space: nowrap;
}
.wartung-badge--abgelaufen {
background: rgba(52, 152, 219, 0.16);
color: #3498db;
}
.wartung-badge--erledigt {
background: rgba(46, 204, 113, 0.16);
color: var(--status-online, #2ecc71);
}
/* „Als erledigt markieren“ steht links, „Speichern“ bleibt rechts (die Zeile
ist flex/justify-flex-end); margin-right:auto schiebt beide auseinander.
align-self:center verhindert das Strecken auf Speichern-Höhe. */
.wartung-erledigt-btn {
margin-right: auto;
align-self: center;
}
/* ── Alarmierung: zwei Spalten ───────────────────────────────────────
Raster wie .mqtt-cols in setup.css (setup_mqtt.html der BlueBox): zwei
gleich breite Spalten, ab 860px untereinander.
Genau ein Kind je Spalte — links die Offline-Überwachung, rechts
Alarmzeiten, Speichern und die Empfänger. Ausdrücklich nicht ein Kind je
Karte: Raster-Zeilen gelten über beide Spalten hinweg, die lange
BlueBox-Liste links schöbe rechts alles unter sich nach unten. Wer hier
eine Karte zu einem eigenen Raster-Kind macht, holt sich das zurück.
Ein Formular gibt es nicht: die Seite hat keinen Speichern-Knopf, jede
Änderung geht sofort an api/alarm_config.php. Die Spalten sind deshalb
gewöhnliche Kinder des Rasters. */
/* Breiter als die 1060px von .mqtt-wide: rechts stehen inzwischen Alarmzeiten,
Empfänger und das Protokoll übereinander, und die Alarmzeiten-Zeile braucht
gemessene ~580px, die Protokolltabelle ~640px. */
.setup-form-wrap.alarm-wide { max-width: 1180px; }
/* Nicht 1fr 1fr: gemessen braucht die BlueBox-Liste links ~440px, die rechte
Spalte ~640px. Halbe/halbe verschenkt links Platz und schneidet rechts ab.
5:7 gibt jeder Spalte, was sie braucht.
minmax(0, …) ist nötig, weil ein blosses fr eine automatische Mindestbreite
hat: die Spalte könnte dann nicht unter ihren Inhalt schrumpfen, und die
Protokolltabelle machte Spalte 2 je nach Eintrag verschieden breit. */
.alarm-cols {
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
gap: 14px 22px;
align-items: start;
}
/* Anstelle des Speichern-Knopfs: die Zeile sagt, was gerade passiert ist.
Sie steht auch im Ruhezustand da (mit dem Hinweis, dass sofort übernommen
wird), damit die Karte darunter beim Speichern nicht springt. */
.alarm-autosave {
margin-top: 10px;
min-height: 1.2em;
font-size: 0.85rem;
color: var(--text-dim, #9aa0a6);
text-align: right;
}
.alarm-autosave.ok { color: #49b58f; }
.alarm-autosave.err { color: #eb5d7d; }
/* .setup-section-card hat overflow:hidden — was nicht passt, wird abgeschnitten,
nicht gescrollt. In der halben Spalte trifft das die Alarmzeiten-Zeile (Von,
Bis, Schnellwahl) und die sieben Wochentage. Umbrechen lassen ist die
Notbremse: lieber zwei Zeilen als ein fehlender Sonntag. */
.alarm-rechts .setup-field-row { flex-wrap: wrap; }
/* Zwei Spalten erst, wenn rechts genug Platz ist — sonst bricht dort alles um,
während links die halbe Seite leer steht. Unterhalb ist einspaltig ehrlicher. */
@media (max-width: 1120px) {
.alarm-cols { grid-template-columns: minmax(0, 1fr); }
.alarm-rechts .setup-field-row { flex-wrap: nowrap; }
}
/* Halb so breite Spalte, gleiche Zeile: die Schnellwahl bräche sonst mitten
im Wort um („Mo–“ / „Fr“). Nur hier, nicht an .setup-log-refresh selbst —
die Klasse tragen auch die Log-Knöpfe anderer Seiten. */
.alarm-rechts .setup-log-refresh { white-space: nowrap; }
/* Abstand zur Karte darüber — in der Spalte folgen die Empfänger direkt auf
den Speichern-Knopf und klebten sonst an ihm. */
.alarm-empfaenger { margin-top: 22px; }
/* ── Offline-Überwachung: Wartezeit je BlueBox ───────────────────────
Drei Dinge in der Zeile: Häkchen mit Name, Seriennummer, Wartezeit. Die
Zeit steht rechtsbündig am Rand, damit die Zahlen untereinander eine
Spalte bilden — sonst wandert jede mit der Länge des Gerätenamens. */
.offline-bb { flex-wrap: wrap; }
.offline-bb-sernr { flex: 0 1 auto; }
.offline-bb-wait {
display: flex;
align-items: center;
gap: 6px;
margin-inline-start: auto; /* schiebt die Zeit an den rechten Rand */
flex: none;
}
/* Schmaler als .setup-input-sm: hier stehen höchstens vier Ziffern. */
.offline-bb-wait .offline-wait { width: 62px; text-align: center; }
/* Der Zusatz „Min." trägt sonst den Abstand von .setup-card-desc nach oben
und säße tiefer als das Feld daneben. */
.offline-bb-wait .setup-card-desc { margin-top: 0; }
/* Ausgegraut, solange das Gerät nicht überwacht wird — bedienbar bleibt es:
Wer die Zeit zuerst einstellt und dann anhakt, soll nicht zweimal klicken. */
.offline-bb-wait.aus { opacity: 0.45; }
/* ── Fußzeile (lib/fuss.php) ─────────────────────────────────────────────
Impressum und Datenschutz auf jeder Seite des angemeldeten Bereichs. Sie
steht am Ende des Inhalts, nicht als festes Element darüber: Auf den
Diagramm-, Karten- und Monitorseiten hätte eine Überlagerung im Weg
gestanden. bluegate.css, weil jede Seite mit Kopfleiste sie lädt — app.css
und setup.css tun das nicht alle. */
.seiten-fuss {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
/* Knapp unter dem Inhalt: Der Abstand der Karte darüber zählt schon mit,
32px oben ließen die Zeile verloren wirken. */
padding: 12px 24px 18px;
font-size: 0.8rem;
color: var(--text-dim);
}
.seiten-fuss a {
color: var(--text-muted);
text-decoration: none;
transition: var(--transition);
}
.seiten-fuss a:hover { color: var(--primary-color); }
.seiten-fuss-trenner { color: var(--text-dim); }
/* ── Protokollseite (alarm_log.php) ──────────────────────────────────
Aufbau wie das gewachsene sms-log.php: Register und Zeitraum in einer
Leiste, darunter die Tabelle. Volle Seitenbreite statt .setup-form-wrap —
sechs Spalten sind kein Formular. */
.log-wrap { padding: 8px 28px 48px; }
.log-leiste {
display: flex;
align-items: center;
gap: 18px;
flex-wrap: wrap;
margin-bottom: 14px;
}
.log-filter {
display: flex;
align-items: center;
gap: 8px;
}
/* .setup-input-sm ist 90px breit — das reicht für HH:MM der Alarmzeiten, aber
nicht für ein Datum: die Jahreszahl fiel weg (01.07. statt 01.07.2026). */
.log-filter input[type=date] { width: 140px; }
/* Schiebt den CSV-Verweis ans rechte Ende der Leiste */
.log-csv { margin-left: auto; text-decoration: none; }
/* Datum, Uhrzeit und Rufnummern gehören auf eine Zeile — sonst wird jede
Tabellenzeile doppelt hoch, ohne dass mehr dasteht. */
.log-tabelle .log-nowrap { white-space: nowrap; }
/* Der Nachrichtentext ist die einzige Spalte, die umbrechen darf; ohne Grenze
zieht eine lange Alarmmeldung die Tabelle über den Bildschirm hinaus. */
.log-tabelle .log-text { max-width: 520px; white-space: normal; word-break: break-word; }
/* „Neu laden" auf der Logfile-Seite (logfiles.php) ist ein Verweis, kein
Knopf — derselbe Aufruf mit derselben Auswahl. Als brächte es die
Unterstreichung mit und sähe neben den Registern aus wie Fliesstext. */
a.setup-log-refresh { text-decoration: none; }
.alarm-log-tabs {
display: flex;
gap: 8px;
margin-bottom: 10px;
}
/* Die Register sind , keine Knöpfe: der Wechsel ist ein Seitenaufruf und
hält den Zeitraum in der Adresse fest. Deshalb inline-block und ohne
Unterstreichung — sonst sähen sie aus wie Fliesstext. */
.alarm-log-tab {
display: inline-block;
background: none;
border: 1px solid var(--border-soft);
color: var(--text-muted);
border-radius: 6px;
padding: 6px 14px;
font-size: 12px;
font-family: inherit;
text-decoration: none;
cursor: pointer;
transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.alarm-log-tab:hover { color: var(--text-light); border-color: var(--border-hi); }
.alarm-log-tab.is-aktiv {
color: #49b58f;
border-color: #49b58f;
background: rgba(73, 181, 143, 0.12);
}
/* Der Status kommt roh aus der Tabelle: mail_status schreibt SENT, sms_status
reicht die Meldungen des CM-Gateways durch. Die Farbe ordnet ihn ein,
log_ampel() in alarmierung.php entscheidet welche. */
.alarm-log-badge {
display: inline-block;
padding: 2px 8px;
border-radius: 10px;
font-size: 11px;
white-space: nowrap;
}
.alarm-log-badge--ok { background: rgba(73, 181, 143, 0.15); color: #49b58f; }
.alarm-log-badge--err { background: rgba(235, 93, 125, 0.15); color: #eb5d7d; }
.alarm-log-badge--wait { background: var(--hover-bg); color: var(--text-muted); }
/* ── Empfängerlisten: übernommen aus setup_notify.html der BlueBox
(dort inline). E-Mail-Liste und Telefonbuch als Dialog mit
nummerierten Zeilen — gleiche Bedienung wie am Gerät. */
.notify-del-btn {
background: none;
border: 1px solid #eb5d7d;
color: #eb5d7d;
border-radius: 4px;
padding: 4px 10px;
cursor: pointer;
font-size: 0.85rem;
}
.notify-del-btn:hover { background: #eb5d7d; color: #fff; }
.notify-add-row { margin: 6px 0 18px 0; }
.notify-add-btn {
background: none;
border: 1px dashed #49b58f;
color: #49b58f;
border-radius: 6px;
padding: 10px 16px;
cursor: pointer;
font-size: 0.95rem;
width: 100%;
}
.notify-add-btn:hover { background: rgba(73,181,143,0.12); }
.notify-list-btn {
flex: 1 1 200px;
background: none;
border: 1px solid #49b58f;
color: #49b58f;
border-radius: 6px;
padding: 10px 16px;
cursor: pointer;
font-size: 0.95rem;
}
.notify-list-btn:hover { background: rgba(73,181,143,0.12); }
/* Festgelegte Breite wie .vars-dialog und .dash-dialog.
Ohne sie bemisst der Browser den Dialog am Inhalt — und weil die Zeilenliste
darunter wegen `overflow-y: auto` auch waagerecht ein Scrollbereich ist,
zählt ihr Inhalt dabei nicht voll mit. Firefox machte den Dialog deshalb
schmaler als eine Zeile lang ist, und der Löschknopf am Zeilenende lag
außerhalb und war abgeschnitten. */
.notify-dialog { width: min(600px, 94vw); }
.notify-dialog::backdrop { background: rgba(0,0,0,0.55); }
.notify-dialog-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 6px;
}
.notify-dialog-head h2 { margin: 0; font-size: 1.1rem; }
.notify-dialog-close {
background: none; border: none; color: var(--text-muted);
font-size: 1.5rem; line-height: 1; cursor: pointer;
}
.notify-dialog-close:hover { color: var(--text-light); }
.notify-dialog-rows {
display: flex;
flex-direction: column;
gap: 8px;
max-height: 50vh;
overflow-y: auto;
margin: 10px 0;
}
.notify-dialog-row { display: flex; align-items: center; gap: 8px; }
.notify-dialog-row .idx {
flex: 0 0 28px;
text-align: right;
color: var(--text-muted);
font-size: 0.82rem;
font-variant-numeric: tabular-nums;
}
.notify-dialog-row input {
flex: 1;
/* Darf schrumpfen. Ohne min-width behält ein Eingabefeld seine
Eigenbreite (Firefox: die 20 Zeichen des size-Vorgabewerts) als
Untergrenze und schiebt Test- und Löschknopf aus der Zeile. */
min-width: 0;
margin-left: 0;
text-align: left;
padding: 6px 8px;
background: var(--field-bg);
border: 1px solid var(--border);
border-radius: 4px;
color: var(--text-light);
}
.notify-dialog-row input.invalid { border-color: #eb5d7d; background: rgba(235,93,125,0.08); }
.notify-dialog-row .notify-del-btn { flex: 0 0 auto; padding: 4px 8px; }
/* Zustand einer Rufnummer aus dem letzten Zustellbericht des SMS-Gateways.
flex: 0 0 auto und die feste Breite, damit die Marke die beiden Eingabefelder
der Zeile nicht je nach Textlänge unterschiedlich weit zusammenschiebt —
sonst stünden die Felder von Zeile zu Zeile an anderer Stelle. */
.sms-state {
flex: 0 0 auto;
width: 96px;
text-align: center;
padding: 3px 6px;
border-radius: 20px;
font-size: 0.7rem;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sms-state-ok { background: rgba(73,181,143,0.18); color: #49b58f; }
.sms-state-offen { background: rgba(240,173,78,0.18); color: #f0ad4e; }
.sms-state-fehler { background: rgba(235,93,125,0.18); color: #eb5d7d; }
.sms-state-unbekannt { background: rgba(160,160,160,0.16); color: var(--text-muted); }
.sms-state-aus { background: rgba(235,93,125,0.28); color: #eb5d7d; }
/* Der Test-Knopf steht neben dem Löschen-Knopf, darf aber nicht wie einer
aussehen: grün wie die übrigen Handlungen, nicht rot wie das Verwerfen. */
.notify-test-btn {
flex: 0 0 auto;
background: none;
border: 1px solid #49b58f;
color: #49b58f;
border-radius: 4px;
padding: 4px 10px;
cursor: pointer;
font-size: 0.85rem;
}
.notify-test-btn:hover { background: rgba(73,181,143,0.12); }
/* Während der Versand läuft — sonst löst ein zweiter Klick eine zweite SMS aus */
.notify-test-btn:disabled { opacity: 0.5; cursor: default; }
.notify-test-btn:disabled:hover { background: none; }
/* Leer, solange nichts getestet wurde — dann nimmt die Zeile auch keinen Platz */
.notify-dialog-msg { font-size: 0.85rem; margin: 8px 0; min-height: 1em; }
.notify-dialog-msg.ok { color: #49b58f; }
.notify-dialog-msg.err { color: #eb5d7d; }
/* Ein- und ausgeblendet wird per style-Attribut — beim Aufbau durch
alarmierung.php, danach beim Hinzufügen und Entfernen von Zeilen durch das
Skript. Ein display:none hier wäre kein Grundzustand, sondern würde beide
übersteuern: der Hinweis erschiene nie. */
.notify-dialog-empty { color: var(--text-muted); font-size: 0.85rem; margin: 8px 0; }
.notify-dialog-foot {
display: flex;
justify-content: flex-end;
gap: 12px;
margin-top: 12px;
}
/* ── Alarm-Symbol in der Sensorliste ────────────────────────────────── */
.alarm-icon { display: inline-flex; opacity: 1; transition: transform 0.15s ease; }
.alarm-icon:hover { transform: scale(1.12); }
/* Farben wie die Statusspalte (style.css): grau/grün/rot */
.alarm-icon--keiner { color: #6b7280; opacity: 0.55; }
.alarm-icon--ok { color: #49b58f; }
/* hinterlegt, aber kein Messwert — blass, damit es nicht wie „ok" aussieht */
.alarm-icon--unbek { color: #f0ad4e; opacity: 0.6; }
/* ausgelöster Alarm — kräftig rot, leicht vergrößert und pulsierend,
damit er sich klar von den ruhigen Zuständen abhebt */
.alarm-icon--alarm {
color: #ff2d55;
transform: scale(1.25);
filter: drop-shadow(0 0 3px rgba(255, 45, 85, 0.75));
animation: alarm-pulse 1.1s ease-in-out infinite;
}
.alarm-icon--alarm:hover { transform: scale(1.4); }
@keyframes alarm-pulse {
0%, 100% { filter: drop-shadow(0 0 2px rgba(255, 45, 85, 0.55)); }
50% { filter: drop-shadow(0 0 6px rgba(255, 45, 85, 1)); }
}
@media (prefers-reduced-motion: reduce) {
.alarm-icon--alarm { animation: none; }
}
/* ── Wartezeiger, solange Daten geladen werden ──────────────────────────────
Gesetzt von js/busy.js, sobald eine fetch-Abfrage länger als 150 ms läuft.
'progress' statt 'wait': Die Seite bleibt bedienbar — man kann weiter
scrollen, den Zeitraum ändern oder die Seite wechseln. 'wait' signalisiert
dagegen "nichts geht mehr" und wäre gelogen.
Die zweite Regel ist nötig, weil Schaltflächen, Verweise und Eingabefelder
ihren eigenen Zeiger setzen; ohne sie bliebe über genau den Elementen, auf
denen der Benutzer gerade steht, der gewohnte Zeiger stehen — also dort, wo
die Rückmeldung am meisten zählt. */
body.laedt,
body.laedt * { cursor: progress !important; }
/* ═══════════════════════════════════════════════════════════════════════════
Durchsuchbares