Modul pihole

2026-03-09 01:32:39 +01:00
parent 74b179a9ce
commit c77b4b3ea7
9 changed files with 1246 additions and 0 deletions
--- a/modules/pihole/assets/pihole.css
+++ b/modules/pihole/assets/pihole.css
@@ -0,0 +1,173 @@
+.pihole-page .card { background: var(--panel); }
+
+.pihole-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  gap: 14px;
+}
+
+.pihole-stat {
+  padding: 16px;
+  background: var(--panel-2);
+}
+
+.pihole-stat-value {
+  font-size: 1.6rem;
+  font-weight: 700;
+  margin-top: 6px;
+}
+
+.pihole-stat-sub {
+  margin-top: 4px;
+  color: var(--muted);
+}
+
+.pihole-section-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.pihole-actions {
+  margin-top: 12px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+}
+
+.pihole-inline {
+  display: inline-flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.pihole-inline input {
+  width: 110px;
+}
+
+.pihole-instance-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+  gap: 14px;
+  margin-top: 12px;
+}
+
+.pihole-instance {
+  padding: 16px;
+  background: var(--panel-2);
+}
+
+.pihole-instance-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 12px;
+}
+
+.pihole-instance-stats {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+  gap: 10px;
+  margin-top: 12px;
+}
+
+.pihole-instance-value {
+  font-weight: 700;
+  margin-top: 4px;
+}
+
+.pihole-status {
+  padding: 6px 10px;
+  border-radius: 999px;
+  font-size: 0.85rem;
+  font-weight: 600;
+  background: rgba(0, 179, 164, 0.15);
+  color: #0a6b63;
+}
+
+.pihole-status.is-disabled {
+  background: rgba(255, 90, 61, 0.15);
+  color: #a83a28;
+}
+
+.pihole-status.is-partial {
+  background: rgba(255, 166, 0, 0.18);
+  color: #8a5a00;
+}
+
+.pihole-split {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+  gap: 14px;
+}
+
+.pihole-list {
+  display: grid;
+  gap: 8px;
+  margin-top: 12px;
+}
+
+.pihole-list-row {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 8px 10px;
+  border-radius: 12px;
+  background: rgba(255, 255, 255, 0.7);
+}
+
+.pihole-list-row strong {
+  font-weight: 600;
+}
+
+.pihole-update {
+  margin-top: 10px;
+  font-size: 0.95rem;
+  color: var(--muted);
+}
+
+.pihole-blocked {
+  display: grid;
+  gap: 8px;
+  margin-top: 12px;
+}
+
+.pihole-blocked-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 8px 10px;
+  border-radius: 12px;
+  background: rgba(255, 90, 61, 0.08);
+}
+
+.pihole-form {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: 12px;
+  align-items: end;
+  margin-top: 12px;
+}
+
+.pihole-form label {
+  display: grid;
+  gap: 6px;
+}
+
+@media (max-width: 680px) {
+  .pihole-actions {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .pihole-inline {
+    width: 100%;
+  }
+
+  .pihole-inline input {
+    width: 100%;
+  }
+}