Dachsteuerungskasten farblich symolisiert

This commit is contained in:
2026-04-29 08:58:50 +02:00
parent 4abe5f0b97
commit f40f3ca440
+16 -4
View File
@@ -414,20 +414,20 @@ class SternwarteCard extends HTMLElement {
if (state === "on") { if (state === "on") {
return { return {
className: "on", className: "on",
label: "Ein", label: "Dachsteuerung an",
lightStyle: "background:#4caf50; box-shadow:0 0 12px rgba(76, 175, 80, 0.45);", lightStyle: "background:#4caf50; box-shadow:0 0 12px rgba(76, 175, 80, 0.45);",
}; };
} }
if (state === "off") { if (state === "off") {
return { return {
className: "off", className: "off",
label: "Aus", label: "Dachsteuerung aus",
lightStyle: "background:#c62828; box-shadow:0 0 10px rgba(198, 40, 40, 0.25);", lightStyle: "background:#c62828; box-shadow:0 0 10px rgba(198, 40, 40, 0.25);",
}; };
} }
return { return {
className: "unknown", className: "unknown",
label: "?", label: "Dachsteuerung unbekannt",
lightStyle: "background:#d1a94a; box-shadow:0 0 10px rgba(209, 169, 74, 0.3);", lightStyle: "background:#d1a94a; box-shadow:0 0 10px rgba(209, 169, 74, 0.3);",
}; };
} }
@@ -860,6 +860,18 @@ class SternwarteCard extends HTMLElement {
background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.02)); background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.02));
overflow: hidden; overflow: hidden;
} }
.panel.control-panel.on {
border-color: rgba(76, 175, 80, 0.38);
background: linear-gradient(180deg, rgba(76, 175, 80, 0.24), rgba(76, 175, 80, 0.10));
}
.panel.control-panel.off {
border-color: rgba(198, 40, 40, 0.40);
background: linear-gradient(180deg, rgba(198, 40, 40, 0.24), rgba(198, 40, 40, 0.10));
}
.panel.control-panel.unknown {
border-color: rgba(209, 169, 74, 0.35);
background: linear-gradient(180deg, rgba(209, 169, 74, 0.18), rgba(209, 169, 74, 0.08));
}
.title { .title {
font-size: 12px; font-size: 12px;
letter-spacing: 0.08em; letter-spacing: 0.08em;
@@ -1328,7 +1340,7 @@ class SternwarteCard extends HTMLElement {
</div> </div>
</div> </div>
<div class="panel"> <div class="panel control-panel ${powerIndicator.className}">
<div class="title">Steuerung</div> <div class="title">Steuerung</div>
<div class="controls"> <div class="controls">
<button type="button" id="open-btn" ${openButtonDisabled ? "disabled" : ""}>\u00d6ffnen</button> <button type="button" id="open-btn" ${openButtonDisabled ? "disabled" : ""}>\u00d6ffnen</button>