:root { /* Donker thema = default (ook zonder data-theme attribuut) */ --bg: #1a1f2e; --bg-alt: #1f2937; --bg-card: #1f2937; --card: #252d3d; --card-hover: #2d3548; --border: #3d4a5c; --text: #e6edf3; --text-dim: #8b949e; --accent: #58a6ff; --green: #3fb950; --warn: #d29922; --danger: #f85149; --radius: 12px; --shadow: 0 4px 18px rgba(0, 0, 0, .35); /* Theming-hulpvariabelen (worden in light-thema overschreven) */ --header-bg: rgba(26, 31, 46, .92); --term-bg: #0f1419; --chart-tick: #8b949e; --chart-grid: #2a2f45; --chart-title: #a5b4fc; --chart-legend: #aaaaaa; --flip-bg: #f4f4f5; --flip-fg: #0c0c0e; } @font-face { font-family: 'Material Icons'; font-style: normal; font-weight: 400; font-display: block; src: url('/vendor/material-icons.woff2') format('woff2'); } .mi { font-family: 'Material Icons'; font-weight: normal; font-style: normal; font-size: 1.15em; line-height: 1; display: inline-flex; align-items: center; justify-content: center; letter-spacing: normal; text-transform: none; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; vertical-align: -0.15em; color: inherit; } .tab-btn .mi { font-size: 1.25rem; margin-right: 6px; vertical-align: -3px; color: inherit; } .kwh-section-title .mi, .haos-title .mi, .win-title .mi, .vac-title .mi, .kwh-title .mi { font-size: 1.3rem; margin-right: 6px; vertical-align: -2px; } /* Licht thema — alleen actief met */ :root[data-theme="light"] { --bg: #f6f8fa; --bg-alt: #ffffff; --bg-card: #ffffff; --card: #ffffff; --card-hover: #eef1f5; --border: #d0d7de; --text: #1f2328; --text-dim: #656d76; --accent: #0969da; --green: #1a7f37; --warn: #9a6700; --danger: #cf222e; --shadow: 0 4px 18px rgba(140, 149, 159, .18); --header-bg: rgba(255, 255, 255, .92); --term-bg: #eef1f5; --chart-tick: #656d76; --chart-grid: #d8dee4; --chart-title: #0969da; --chart-legend: #656d76; --flip-bg: #1f2328; --flip-fg: #f4f4f5; } * { box-sizing: border-box; margin: 0; padding: 0; } html { overflow-x: hidden; scroll-behavior: smooth; } html, body { margin: 0; padding: 0; width: 100%; min-width: 100vw; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: var(--bg); color: var(--text); line-height: 1.5; min-height: 100vh; /* Ruimte onderaan reserveren voor de vaste Anna-inzicht-balk (position:fixed, bottom:16px) zodat die geen aantikbare knoppen aan de onderkant van de pagina (bv. de node-Wake-knop) kan overlappen. */ padding-bottom: 84px; } /* ── Weer-achtergrond (animatie o.b.v. Open-Meteo WMO-code, Turnhout) ── Zit BINNEN de klok-kaart op de Wall (position:absolute, geclipt door de kaart). De animatie schemert achter de klok-cijfers/datum (die op z-index:1 staan). pointer-events:none zodat kliks doorgaan. */ #weather-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; border-radius: inherit; } /* Zon / helder-droog: warme gloed die zacht pulseert. */ #weather-bg .wb-sun { position: absolute; top: -160px; right: -160px; width: 480px; height: 480px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 214, 102, .55) 0%, rgba(255, 183, 77, .22) 42%, transparent 70%); filter: blur(6px); animation: wbSunPulse 6s ease-in-out infinite; } @keyframes wbSunPulse { 0%, 100% { transform: scale(1); opacity: .82; } 50% { transform: scale(1.08); opacity: 1; } } /* Regendruppel (dunne vallende streep). Valt kaart-relatief (top %). */ #weather-bg .wb-drop { position: absolute; width: 2px; background: linear-gradient(transparent, rgba(150, 197, 255, .75)); border-radius: 2px; animation: wbFall linear infinite; } @keyframes wbFall { from { top: -15%; } to { top: 115%; } } /* Sneeuwvlok. Dwarrelt kaart-relatief naar beneden (top %). */ #weather-bg .wb-flake { position: absolute; color: rgba(255, 255, 255, .85); text-shadow: 0 0 4px rgba(255, 255, 255, .4); animation: wbSnow linear infinite; } @keyframes wbSnow { from { top: -10%; transform: translateX(0) rotate(0deg); } to { top: 112%; transform: translateX(16px) rotate(360deg); } } /* Drijvende wolk. Drijft kaart-relatief opzij (left %). */ #weather-bg .wb-cloud { position: absolute; left: 0; border-radius: 100px; background: radial-gradient(circle at 38% 55%, rgba(210, 219, 235, .5), rgba(210, 219, 235, .2) 55%, transparent 75%); filter: blur(5px); animation: wbDrift linear infinite; } @keyframes wbDrift { from { left: -50%; } to { left: 150%; } } /* Mist-sluier. */ #weather-bg.wb-fog::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(168, 178, 193, .07), rgba(168, 178, 193, .03)); animation: wbFog 8s ease-in-out infinite alternate; } @keyframes wbFog { from { opacity: .3; } to { opacity: .7; } } /* Onweer-flits. */ #weather-bg .wb-flash { position: absolute; inset: 0; background: rgba(200, 220, 255, .5); opacity: 0; animation: wbFlash 8s linear infinite; } @keyframes wbFlash { 0%, 92%, 100% { opacity: 0; } 93% { opacity: .30; } 94% { opacity: 0; } 95% { opacity: .45; } 96% { opacity: 0; } } /* Header */ header { position: sticky; top: 0; z-index: 100; background: var(--header-bg); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); padding: 12px 20px; } .header-inner { max-width: none; margin: 0 auto; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .brand { display: flex; align-items: center; gap: 8px; font-size: 1.15rem; font-weight: 700; white-space: nowrap; } .brand .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); flex-shrink: 0; } /* HA/NR gezondheids-dot in de header-metabalk */ .svc-health-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin: 0 3px; cursor: pointer; flex-shrink: 0; transition: box-shadow .3s; } .svc-health-dot.ok { background: var(--green); box-shadow: 0 0 6px var(--green); } .svc-health-dot.warn { background: #d29922; box-shadow: 0 0 6px #d29922; } .svc-health-dot.err { background: #f85149; box-shadow: 0 0 6px #f85149; } .search-wrap { flex: 1; min-width: 200px; position: relative; } #search { width: 100%; padding: 9px 14px 9px 36px; background: var(--bg-alt); border: 1px solid var(--border); border-radius: 10px; color: var(--text); font-size: .9rem; outline: none; } #search:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(88, 166, 255, .15); } .search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-dim); font-size: .85rem; } .search-icon .mi { font-size: 1rem; vertical-align: -2px; } /* Kleurgecodeerde status-cirkels (was 🟢/⚫/🔴/⚪). Font-size stuurt de diameter. */ .status-dot { font-size: .9em; vertical-align: -2px; } .status-dot.status-green { color: #4ade80; } .status-dot.status-red { color: #f85149; } .status-dot.status-grey { color: #8b949e; } .status-dot.status-warn { color: #fbbf24; } /* Hamburger + thema/density-toggles: mi-icoon op de juiste maat. */ .hamburger .mi, .theme-toggle .mi { font-size: 1.3rem; vertical-align: -3px; } .meta { font-size: .78rem; color: var(--text-dim); display: flex; gap: 14px; align-items: center; white-space: nowrap; min-width: 0; /* mag krimpen binnen de flex-header -> voorkomt dat de header de pagina verbredt zodra de iconen (mi) iets breder zijn dan de oude emoji's. */ flex-shrink: 1; overflow: hidden; } /* Weer-voorspelling in de header, rechts naast de realtime-indicator. */ .header-weer { display: inline-flex; align-items: center; gap: 8px; font-size: .78rem; color: var(--text-dim); white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .header-weer:empty { display: none; } /* Automatische tuinverlichting in de header. */ .header-tuin { display: inline-flex; align-items: center; gap: 4px; font-size: .74rem; color: var(--text-dim); white-space: nowrap; } .header-tuin:empty { display: none; } .header-tuin .ht-icon { font-size: .9rem; } .wall-day-totals { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 7px 14px; background: var(--card); border: 1px solid var(--border); border-radius: 10px; } .wall-day-summary { display: flex; align-items: stretch; gap: 10px; min-width: 0; } .wall-day-summary>.wall-day-totals, .wall-day-devices { flex: 1 1 0; min-width: 0; } .wall-day-devices { padding: 0; background: transparent; border: none; overflow: visible; } .wall-device-tiles { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; } .wall-device-tile { flex: 1 1 80px; min-width: 75px; max-width: 120px; background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 8px 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; transition: all 0.2s ease; } .wall-device-tile.active { border-color: rgba(56, 189, 248, 0.4); background: rgba(56, 189, 248, 0.08); } .wdt-icon { display: flex; align-items: center; justify-content: center; margin-bottom: 3px; color: var(--text-dim); } .wdt-icon .mat-icon { width: 22px; height: 22px; } .wall-device-tile.active .wdt-icon { color: #38bdf8; } .wdt-val { font-size: 1.05rem; font-weight: 800; color: var(--text-dim); font-variant-numeric: tabular-nums; line-height: 1.1; } .wall-device-tile.active .wdt-val { color: #38bdf8; } .wdt-unit { font-size: .65rem; font-weight: 600; margin-left: 1px; } .wdt-name { font-size: .72rem; color: var(--text-dim); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .wall-device-tile.active .wdt-name { color: var(--text); font-weight: 600; } .wall-device-empty { color: var(--text-dim); font-size: .84rem; padding: 10px; } .wall-day-title { color: var(--text-dim); font-size: .78rem; font-weight: 600; white-space: nowrap; } .wall-day-values { display: flex; justify-content: space-around; gap: 28px; flex: 1; } .wall-day-values>div { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; } .wall-day-values b { font-size: .95rem; font-variant-numeric: tabular-nums; } .wall-day-values span { color: var(--text-dim); font-size: .68rem; } .wall-day-pv { color: #fbbf24; } .wall-day-use { color: #a78bfa; } .wall-day-import { color: #f87171; } .wall-day-now b { color: #38bdf8; } /* Hostbelasting (CPU/RAM/Disk) in de top-header — gekleurde compacte uitlezing. */ .header-sys { display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; color: var(--text-dim); white-space: nowrap; } .header-sys:empty { display: none; } .header-weer .hw-now { font-weight: 700; color: var(--text); } .header-weer .hw-sep { opacity: .35; } .tabs { display: flex; gap: 0; margin-bottom: 0; /* Op smalle schermen (mobiel) passen de 8 tabs niet naast elkaar; laat de balk horizontaal scrollen i.p.v. de hele pagina breder te maken. */ min-width: 0; /* flex-item mag krimpen -> overflow werkt */ overflow-x: auto; scrollbar-width: none; /* Firefox: verberg scrollbar */ -webkit-overflow-scrolling: touch; /* soepel swipen op iOS */ } .tabs::-webkit-scrollbar { display: none; /* Chrome/Safari: verberg scrollbar */ } .tab-btn { padding: 12px 22px; min-height: 52px; /* wand-tablet: ruime touch-targets, zie /design-review 2026-09-12 */ background: transparent; border: none; border-bottom: 2px solid transparent; color: var(--text-dim); font-size: .9rem; font-weight: 600; cursor: pointer; transition: all .15s; flex: 0 0 auto; /* niet krimpen -> tabs blijven leesbaar/aantikbaar */ white-space: nowrap; /* label niet over 2 regels breken */ } .tab-btn:hover { color: var(--text); } .tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); } /* ── Ramen-tab ── */ .win-view { max-width: 1100px; margin: 0 auto; padding: 18px 16px 40px; } .win-head { margin-bottom: 18px; } .win-title { margin: 0 0 6px; font-size: 1.2rem; } .win-note { font-size: .78rem; color: var(--text-dim); max-width: 640px; line-height: 1.5; } .win-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; } .win-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 16px; } .win-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; } .win-name { font-weight: 700; font-size: 1rem; } .win-status { font-size: .72rem; font-weight: 600; padding: 3px 8px; border-radius: 999px; white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; color: var(--ctrl-accent, #2ea043); background: var(--ctrl-soft, #2a2a2a); border: 1px solid var(--ctrl-line, #30363d); } .win-status .mi { font-size: .95rem; margin-right: 3px; vertical-align: 0; } .win-status-open { background: rgba(34, 197, 94, .16); color: #22c55e; } .win-status-dicht { background: rgba(96, 165, 250, .16); color: #60a5fa; } .win-status-stop { background: rgba(251, 191, 36, .16); color: #fbbf24; } .win-status-deels { background: rgba(251, 191, 36, .16); color: #fbbf24; } .win-status-unknown { background: rgba(139, 148, 158, .16); color: var(--text-dim); } .win-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; } .win-row:last-child { margin-bottom: 0; } .win-btn { flex: 1 1 auto; min-width: 88px; min-height: 48px; padding: 14px 10px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-soft, rgba(255, 255, 255, .03)); color: var(--text); font-size: .9rem; font-weight: 600; cursor: pointer; transition: filter .12s, transform .05s; display: inline-flex; align-items: center; justify-content: center; } .win-btn .mi { font-size: 1.2rem; margin-right: 6px; vertical-align: 0; } .win-btn:hover { filter: brightness(1.15); } .win-btn:active { transform: scale(.97); } .win-btn:disabled { opacity: .5; cursor: default; } .win-btn-open { border-color: rgba(34, 197, 94, .5); color: #22c55e; } .win-btn-dicht { border-color: rgba(96, 165, 250, .5); color: #60a5fa; } .win-btn-stop { border-color: rgba(251, 191, 36, .5); color: #fbbf24; } .win-empty { color: var(--text-dim); font-size: .85rem; padding: 20px; } /* ── Cleaning-tab (robotstofzuiger) ── */ .vac-view { max-width: 1100px; margin: 0 auto; padding: 18px 16px 40px; } .vac-head { margin-bottom: 18px; } .vac-title { margin: 0 0 6px; font-size: 1.2rem; } .vac-note { font-size: .78rem; color: var(--text-dim); max-width: 640px; line-height: 1.5; } .vac-empty { color: var(--text-dim); font-size: .85rem; padding: 20px; } /* ── HAOS-tab (Home Assistant OS-bediening) ── */ .haos-view { max-width: 1100px; margin: 0 auto; padding: 18px 16px 40px; } .haos-head { margin-bottom: 18px; } .haos-title { margin: 0 0 6px; font-size: 1.2rem; } .haos-note { font-size: .78rem; color: var(--text-dim); max-width: 640px; line-height: 1.5; } .haos-empty { color: var(--text-dim); font-size: .85rem; padding: 20px; } /* De iMac-kaart in de HAOS-tab hergebruikt de wall-ctrl-card, maar staat nu los (geen wall-grid): geef de rij wat ademruimte zodat hij niet plakt aan de kop erboven. */ #tab-haos .wall-ctrls-row { margin-top: 4px; } #tab-haos .wall-ctrl-card { max-width: 420px; } .vac-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; } .vac-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 16px; } .vac-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 14px; } .vac-name { font-weight: 700; font-size: 1rem; } .vac-badge { font-size: .72rem; font-weight: 600; padding: 3px 10px; border-radius: 999px; white-space: nowrap; } .vac-badge-docked { background: rgba(96, 165, 250, .16); color: #60a5fa; } .vac-badge-cleaning { background: rgba(34, 197, 94, .16); color: #22c55e; } .vac-badge-returning { background: rgba(251, 191, 36, .16); color: #fbbf24; } .vac-badge-paused { background: rgba(251, 191, 36, .16); color: #fbbf24; } .vac-badge-idle { background: rgba(139, 148, 158, .16); color: var(--text-dim); } .vac-badge-error { background: rgba(239, 68, 68, .16); color: #ef4444; } .vac-badge-unknown { background: rgba(139, 148, 158, .16); color: var(--text-dim); } .vac-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 14px; } .vac-stat { text-align: center; padding: 8px 4px; background: var(--bg-soft, rgba(255, 255, 255, .03)); border-radius: 8px; } .vac-stat-val { font-size: 1.1rem; font-weight: 700; } .vac-stat-lbl { font-size: .68rem; color: var(--text-dim); margin-top: 2px; } .batt-high { color: #22c55e; } .batt-mid { color: #fbbf24; } .batt-low { color: #ef4444; } .batt-unknown { color: var(--text-dim); } .vac-controls { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; } .vac-btn { flex: 1 1 auto; min-width: 80px; min-height: 46px; padding: 12px 8px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-soft, rgba(255, 255, 255, .03)); color: var(--text); font-size: .85rem; font-weight: 600; cursor: pointer; transition: filter .12s, transform .05s; } .vac-btn:hover { filter: brightness(1.15); } .vac-btn:active { transform: scale(.97); } .vac-btn:disabled { opacity: .5; cursor: default; } .vac-btn-start { border-color: rgba(34, 197, 94, .5); color: #22c55e; } .vac-btn-pause { border-color: rgba(251, 191, 36, .5); color: #fbbf24; } .vac-btn-stop { border-color: rgba(239, 68, 68, .5); color: #ef4444; } .vac-btn-dock { border-color: rgba(96, 165, 250, .5); color: #60a5fa; } .vac-btn-locate { border-color: rgba(167, 139, 250, .5); color: #a78bfa; } .vac-fan-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .vac-fan-lbl { font-size: .78rem; color: var(--text-dim); margin-right: 4px; } .vac-fan { padding: 6px 14px; border-radius: 999px; border: 1px solid var(--border); background: transparent; color: var(--text-dim); font-size: .78rem; font-weight: 600; cursor: pointer; transition: all .12s; } .vac-fan:hover { border-color: var(--accent); color: var(--accent); } .vac-fan.active { background: var(--accent); border-color: var(--accent); color: #fff; } .vac-life { margin-bottom: 10px; } .vac-life-head { display: flex; justify-content: space-between; font-size: .78rem; margin-bottom: 4px; } .vac-life-val { font-weight: 700; } .vac-life-bar { height: 6px; border-radius: 3px; background: var(--bg-soft, rgba(255, 255, 255, .06)); overflow: hidden; } .vac-life-fill { height: 100%; border-radius: 3px; transition: width .4s ease; } .vac-life-fill.high { background: #22c55e; } .vac-life-fill.mid { background: #fbbf24; } .vac-life-fill.low { background: #ef4444; } .vac-life-fill.unknown { background: var(--text-dim); width: 0 !important; } .vac-totals { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); font-size: .75rem; color: var(--text-dim); } /* ── Actief-status banner ── */ .vac-activity { font-size: 1.15rem; font-weight: 800; text-align: center; padding: 14px 16px; border-radius: 10px; margin-bottom: 14px; letter-spacing: .02em; } .vac-activity-cleaning { background: rgba(34, 197, 94, .18); color: #22c55e; animation: vacPulse 2s ease-in-out infinite; } .vac-activity-returning { background: rgba(251, 191, 36, .18); color: #fbbf24; } .vac-activity-docked { background: rgba(96, 165, 250, .12); color: #60a5fa; } .vac-activity-paused { background: rgba(251, 191, 36, .12); color: #fbbf24; } .vac-activity-idle, .vac-activity-unknown { background: rgba(139, 148, 158, .1); color: var(--text-dim); } .vac-activity-error { background: rgba(239, 68, 68, .18); color: #ef4444; } @keyframes vacPulse { 0%, 100% { opacity: 1; } 50% { opacity: .7; } } /* ── Energie-tab (kWh-inzicht) ── */ .kwh-view { max-width: 1200px; margin: 0 auto; padding: 18px 16px 40px; } .kwh-head { /* Sticky werkbalk: periode-chips + sectie-spronglinks blijven zichtbaar tijdens het scrollen door de (lange) Energie-tab. Dockt onder de sticky site-header; diens hoogte staat in --hdr-h (wordt gemeten door app.js, want de header wrapt op smallere viewports). */ position: sticky; top: var(--hdr-h, 62px); z-index: 90; margin: -18px -16px 14px; padding: 10px 16px; background: var(--header-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); } .kwh-head-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; } .kwh-title { font-size: 1.15rem; font-weight: 700; margin: 0; color: var(--text); } /* Sectie-spronglinks (ankers) binnen de Energie-tab */ .kwh-toc { display: flex; gap: 6px; margin-top: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; } .kwh-toc::-webkit-scrollbar { display: none; } .kwh-toc-link { flex: 0 0 auto; font-size: .75rem; font-weight: 600; color: var(--text-dim); text-decoration: none; padding: 4px 11px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-alt); white-space: nowrap; transition: color .15s, border-color .15s; } .kwh-toc-link:hover { color: var(--text); border-color: var(--accent); } /* Mobiel: houd de sticky werkbalk compact — chips op één horizontaal scrollbare rij i.p.v. 3 gewrapte rijen. */ @media (max-width: 768px) { .kwh-head { padding: 8px 12px; margin-bottom: 10px; } .kwh-head-row { gap: 8px; } .kwh-periods { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: 100%; width: 100%; } .kwh-periods::-webkit-scrollbar { display: none; } .kwh-chip { min-height: 34px; padding: 6px 12px; flex: 0 0 auto; } } .kwh-periods { display: flex; flex-wrap: wrap; gap: 6px; } .kwh-chip { min-height: 40px; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-alt); color: var(--text-dim); font-size: .8rem; font-weight: 600; cursor: pointer; transition: all .15s; } .kwh-chip:hover { color: var(--text); border-color: var(--accent); } .kwh-chip.active { background: var(--accent); border-color: var(--accent); color: #0b1120; } .kwh-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 18px; } /* Anker-doelen niet onder de sticky header + werkbalk verstoppen */ #kwh-cards, .kwh-section-title { scroll-margin-top: calc(var(--hdr-h, 62px) + 112px); } .kwh-card { background: var(--bg-alt); border: 1px solid var(--border); border-left: 4px solid var(--kwh-accent, var(--accent)); border-radius: 12px; padding: 14px 16px; position: relative; transition: border-color .15s, box-shadow .15s; } .kwh-card:hover { border-color: var(--kwh-accent, var(--accent)); box-shadow: 0 2px 10px rgba(0, 0, 0, .25); } .kwh-card .kwh-ico { font-size: 1.1rem; display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 30px; padding: 0 4px; border-radius: 9px; color: var(--kwh-accent, var(--accent)); } .kwh-card .kwh-val { font-size: 1.6rem; font-weight: 800; line-height: 1.1; margin: 4px 0 2px; color: var(--text); } .kwh-card .kwh-unit { font-size: .8rem; font-weight: 600; color: var(--text-dim); } .kwh-card .kwh-lbl { font-size: .78rem; color: var(--text-dim); font-weight: 600; } .kwh-card .kwh-sub { font-size: .72rem; color: var(--text-dim); margin-top: 6px; opacity: .85; } /* Relatief-aandeel-balkje (apparaat vs. grootste in de groep, zelfvoorziening %) */ .kwh-share { height: 5px; border-radius: 3px; background: rgba(139, 148, 158, .18); margin-top: 8px; overflow: hidden; } .kwh-share>i { display: block; height: 100%; border-radius: 3px; background: var(--kwh-accent, var(--accent)); } .kwh-chart-box { background: var(--bg-alt); border: 1px solid var(--border); border-radius: 12px; padding: 14px; height: 360px; margin-bottom: 18px; } .kwh-extra { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; } .kwh-section-title { display: flex; align-items: center; font-size: 1rem; font-weight: 700; color: var(--text); margin: 26px 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border); } .kwh-section-title::before { content: ''; width: 4px; height: 1.05em; border-radius: 2px; background: var(--sec-accent, var(--accent)); margin-right: 4px; flex: 0 0 auto; } .kwh-section-title .mi { color: var(--sec-accent, var(--accent)); } .kwh-subgroup-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: .82rem; font-weight: 700; color: var(--text-dim); margin: 14px 0 8px; text-transform: uppercase; letter-spacing: .04em; } .kwh-subgroup-total { font-size: .75rem; font-weight: 600; color: var(--text-dim); text-transform: none; letter-spacing: 0; } /* ── Verbruik per apparaat: uitgelijnde rijen i.p.v. losse kaartjes ── Zelfde kolomtemplate voor de legenda (.kwh-devhead) en de rijen, zodat de getallen in elke groep onder elkaar staan en dus vergelijkbaar zijn. */ .kwh-devhead, .kwh-devrow { display: grid; /* Vaste breedtes voor de cijferkolommen: zo staan de getallen en de aandeel-balkjes in élke groep op dezelfde plek en lengte. */ grid-template-columns: minmax(0, 1fr) 76px 148px 112px; gap: 4px 12px; align-items: center; } .kwh-devhead { font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim); opacity: .75; padding: 0 10px 6px; border-bottom: 1px solid var(--border); } .kwh-devrow { padding: 8px 10px; margin-bottom: 4px; border: 1px solid var(--border); border-left: 3px solid var(--kwh-accent, var(--accent)); border-radius: 9px; background: var(--bg-alt); font-size: .84rem; transition: border-color .15s, background .15s; } .kwh-devrow:hover { border-color: var(--kwh-accent, var(--accent)); } /* Spaarlast (nul verbruik in de periode) niet even hard laten schreeuwen als een echte verbruiker. */ .kwh-devrow.is-zero .kwh-dev-name, .kwh-devrow.is-zero .kwh-dev-usage-val { color: var(--text-dim); } /* Detail-regels (P1-tariefsplitsing) hangen onder hun hoofdmeter. */ .kwh-devrow.is-detail { background: transparent; border-left-color: transparent; padding-top: 5px; padding-bottom: 5px; font-size: .78rem; opacity: .8; } .kwh-dev-tree { color: var(--text-dim); margin-right: -2px; } /* Tariefdetail standaard dicht (knop in de groepskop klapt het open). */ .kwh-devlist.is-folded .kwh-devrow.is-detail { display: none; } .kwh-devfold { display: inline-flex; align-items: center; gap: 3px; margin-left: 8px; padding: 2px 9px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg); color: var(--text-dim); font: inherit; font-size: .72rem; font-weight: 600; text-transform: none; letter-spacing: 0; cursor: pointer; transition: color .15s, border-color .15s; } .kwh-devfold:hover { color: var(--text); border-color: var(--accent); } .kwh-devfold .mi { font-size: .95em; } /* ── Grootste verbruikers (kop boven de apparatenlijst) ── */ .kwh-top-title .mi { color: var(--accent); } .kwh-toplist { margin-bottom: 18px; } .kwh-toprow { display: grid; grid-template-columns: 22px minmax(0, 1fr) 96px 140px 46px; gap: 4px 12px; align-items: center; padding: 9px 13px; border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 9px; background: var(--bg-alt); font-size: .84rem; } .kwh-top-rank { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(255, 255, 255, .07); color: var(--text-dim); font-size: .72rem; font-weight: 700; font-variant-numeric: tabular-nums; } .kwh-toprow:first-child .kwh-top-rank { background: var(--accent); color: #0b1120; } .kwh-top-name { min-width: 0; font-weight: 600; overflow-wrap: anywhere; } .kwh-top-val { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; } .kwh-top-val>i { font-style: normal; font-size: .8em; font-weight: 600; color: var(--text-dim); } .kwh-top-bar { height: 5px; border-radius: 3px; background: rgba(139, 148, 158, .18); overflow: hidden; } .kwh-top-bar>i { display: block; height: 100%; border-radius: 3px; background: var(--accent); } .kwh-top-pct { text-align: right; color: var(--text-dim); font-size: .78rem; font-variant-numeric: tabular-nums; } @media (max-width: 640px) { .kwh-toprow { grid-template-columns: 22px minmax(0, 1fr) auto; grid-template-areas: "rank name val" "rank bar pct"; } .kwh-top-rank { grid-area: rank; } .kwh-top-name { grid-area: name; } .kwh-top-val { grid-area: val; } .kwh-top-bar { grid-area: bar; } .kwh-top-pct { grid-area: pct; } } .kwh-dev-name { display: flex; align-items: center; gap: 6px; min-width: 0; font-weight: 600; overflow-wrap: anywhere; } .kwh-dev-dot { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--kwh-accent, var(--accent)); } .kwh-dev-dot.stale { background: #fbbf24; } .kwh-dev-dot.nodata { background: #64748b; } .kwh-dev-live { display: inline-flex; align-items: center; justify-content: flex-end; gap: 2px; font-size: .78rem; font-weight: 600; color: var(--accent); white-space: nowrap; font-variant-numeric: tabular-nums; } .kwh-dev-live .mi { font-size: .95rem; } .kwh-dev-none { color: var(--text-dim); font-style: normal; } .kwh-dev-usage { display: flex; flex-direction: column; gap: 4px; } .kwh-dev-usage-val { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; } .kwh-dev-usage-val i { font-style: normal; font-size: .68rem; font-weight: 600; color: var(--text-dim); } .kwh-dev-bar { display: block; height: 4px; border-radius: 2px; background: rgba(139, 148, 158, .18); overflow: hidden; } .kwh-dev-bar>i { display: block; height: 100%; border-radius: 2px; background: var(--kwh-accent, var(--accent)); } .kwh-dev-total { text-align: right; font-size: .76rem; color: var(--text-dim); font-variant-numeric: tabular-nums; white-space: nowrap; } /* Gemarkeerde afwijking (verbruik > meterstand) — zie kwhDevRow(). */ .kwh-devrow.is-odd { border-style: dashed; } .kwh-devnote { font-size: .72rem; color: var(--text-dim); opacity: .8; margin: 4px 2px 18px; } /* Mobiel: rijen worden tweetraps-blokken (naam + nu, daaronder het verbruik op volle breedte met balkje, dan de meterstand). */ @media (max-width: 640px) { .kwh-devhead { display: none; } .kwh-devrow { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name live" "usage usage" "total total"; row-gap: 5px; padding: 10px 12px; margin-bottom: 6px; } .kwh-dev-name { grid-area: name; } .kwh-dev-live { grid-area: live; } .kwh-dev-usage { grid-area: usage; gap: 5px; } .kwh-dev-usage-val { text-align: left; font-size: 1.05rem; } .kwh-dev-total { grid-area: total; text-align: left; } } .gridheat-box { background: var(--bg-alt); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; margin-bottom: 18px; overflow-x: auto; } .gridheat-table { border-collapse: collapse; font-size: 9px; color: var(--text-dim, #94a3b8); } .gridheat-table th { font-weight: 600; text-align: center; padding: 0 1px; white-space: nowrap; } .gridheat-table th.day { text-align: right; padding-right: 6px; } .gridheat-table td { width: 15px; height: 15px; border: 1px solid rgba(148, 163, 184, .08); border-radius: 2px; } .gridheat-legend { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 11px; color: var(--text-dim, #94a3b8); } .gridheat-legend .swatch { width: 14px; height: 14px; border-radius: 3px; border: 1px solid rgba(148, 163, 184, .15); } .kwh-panel { background: var(--bg-alt); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; } .kwh-panel h3 { margin: 0 0 10px; font-size: .85rem; color: var(--text); font-weight: 700; } .kwh-panel .kwh-row { display: flex; justify-content: space-between; gap: 10px; font-size: .82rem; padding: 4px 0; color: var(--text-dim); } .kwh-panel .kwh-row b { color: var(--text); font-weight: 700; } .kwh-loading { text-align: center; color: var(--text-dim); padding: 30px; font-size: .9rem; } .theme-toggle { background: var(--bg-alt); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-size: 1rem; line-height: 1; padding: 6px 10px; cursor: pointer; transition: all .15s; } .theme-toggle:hover { border-color: var(--accent); } /* Thema-schakelaar: 3 standen (auto / licht / donker) als één segmentgroep. Auto volgt de zon — de actieve knop toont de GEKOZEN modus, niet of het scherm nu licht of donker is. */ .theme-seg { display: inline-flex; align-items: stretch; background: var(--bg-alt); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; } .theme-seg-btn { background: transparent; border: 0; border-left: 1px solid var(--border); color: var(--text-dim); font-size: 1rem; line-height: 1; padding: 6px 9px; cursor: pointer; transition: color .15s, background .15s; } .theme-seg-btn:first-child { border-left: 0; } .theme-seg-btn:hover { color: var(--text); } .theme-seg-btn.active { background: var(--accent); color: #0d1117; border-color: var(--accent); } /* De 'auto'-stand hangt aan de zon; die mag je zien. */ .theme-seg-btn[data-theme-mode="auto"].active { background: var(--accent); } /* Hamburger-knop: alleen zichtbaar op mobiel (zie media-query). */ .hamburger { display: none; background: var(--bg-alt); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-size: 1.1rem; line-height: 1; padding: 6px 11px; cursor: pointer; transition: all .15s; } .hamburger:hover { border-color: var(--accent); } /* Dashboard grid */ .dash-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 10px; padding: 5px; max-width: none; margin: 0; width: 100vw; min-width: 100vw; grid-auto-flow: dense; } /* Full-width variant (Alles tab): responsive masonry i.p.v. 1 gerekte kolom. Media-regels van .dash-grid geven 2 kolommen ≤1024px en 1 kolom ≤768px. grid-auto-rows: kleine rij-eenheid + JS row-span (masonryLayout) = echte masonry zonder gaten, terwijl .col2-widgets breed (span 2) blijven. */ .dash-grid-full { width: 100vw; min-width: 100vw; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); grid-auto-rows: 8px; align-items: start; gap: 12px; padding: 10px; } /* Layout switcher */ .layout-bar { display: flex; gap: 0; } .layout-btn { padding: 6px 12px; background: var(--bg-alt); border: 1px solid var(--border); color: var(--text-dim); font-size: .72rem; cursor: pointer; font-weight: 600; white-space: nowrap; } .layout-btn:first-child { border-radius: 6px 0 0 6px; } .layout-btn:last-child { border-radius: 0 6px 6px 0; } .layout-btn.active { background: var(--accent); color: #0d1117; border-color: var(--accent); } /* Layout: Compact */ .dash-grid.layout-compact { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px; padding: 6px; } .dash-grid.layout-compact .widget { padding: 8px; border-radius: 8px; } .dash-grid.layout-compact .widget-header { font-size: .72rem; margin-bottom: 5px; } .dash-grid.layout-compact .sys-grid { grid-template-columns: 1fr 1fr 1fr 1fr; gap: 4px; } .dash-grid.layout-compact .sys-stat .val { font-size: .9rem; } .dash-grid.layout-compact .sys-stat .lbl { font-size: .55rem; } .dash-grid.layout-compact .enr-stat .val { font-size: .8rem; } .dash-grid.layout-compact .wol-node { font-size: .6rem; padding: 3px; } .dash-grid.layout-compact .svc-row { font-size: .62rem; } .dash-grid.layout-compact .docker-row { font-size: .6rem; padding: 1px 0; } .dash-grid.layout-compact .col2 { grid-column: span 2; } .dash-grid.layout-compact .chart-box canvas { max-height: 100px; } /* Layout: Focus (single column) */ .dash-grid.layout-focus { grid-template-columns: 1fr; max-width: 900px; margin: 0 auto; gap: 10px; } .dash-grid.layout-focus .col2 { grid-column: span 1; } .dash-grid.layout-focus .widget { padding: 16px; } .dash-grid.layout-focus .sys-grid { grid-template-columns: 1fr 1fr 1fr 1fr; } .dash-grid.layout-focus .wol-grid { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); } /* Layout: Grid (fixed 2-column) */ .dash-grid.layout-grid { grid-template-columns: 1fr 1fr; } .dash-grid.layout-grid .col2 { grid-column: span 2; } @media (max-width: 800px) { .dash-grid.layout-grid { grid-template-columns: 1fr; } .dash-grid.layout-grid .col2 { grid-column: span 1; } } /* Layout: One Page (alles op één scherm, geen scroll) */ .dash-grid.layout-onepage { grid-template-columns: repeat(6, 1fr); gap: 3px; padding: 3px; font-size: .55rem; max-height: calc(100vh - 40px); overflow-y: auto; } .dash-grid.layout-onepage .widget { padding: 4px 5px; border-radius: 4px; border-width: 1px; } .dash-grid.layout-onepage .widget-header { font-size: .58rem; margin-bottom: 2px; font-weight: 700; } .dash-grid.layout-onepage .widget-header .count { font-size: .5rem; color: var(--text-dim); } .dash-grid.layout-onepage .col2 { grid-column: span 3; } .dash-grid.layout-onepage .sys-grid { grid-template-columns: 1fr 1fr 1fr 1fr; gap: 2px; } .dash-grid.layout-onepage .sys-stat .val { font-size: .65rem; } .dash-grid.layout-onepage .sys-stat .lbl { font-size: .45rem; } .dash-grid.layout-onepage .sys-info { grid-column: span 4; font-size: .5rem; margin-top: 1px; padding-top: 1px; } .dash-grid.layout-onepage .bar-wrap { height: 2px; margin-top: 1px; } .dash-grid.layout-onepage .enr-grid { grid-template-columns: 1fr 1fr; gap: 2px; } .dash-grid.layout-onepage .enr-stat .val { font-size: .7rem; } .dash-grid.layout-onepage .enr-stat .lbl { font-size: .45rem; } .dash-grid.layout-onepage .enr-stat { padding: 2px; } .dash-grid.layout-onepage .wol-grid { grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); gap: 2px; } .dash-grid.layout-onepage .wol-node { font-size: .48rem; padding: 2px; } .dash-grid.layout-onepage .wol-ip { font-size: .42rem; } .dash-grid.layout-onepage .wol-wake, .dash-grid.layout-onepage .wol-off { font-size: .45rem; padding: 1px 4px; } .dash-grid.layout-onepage .svc-row { font-size: .5rem; padding: 0; } .dash-grid.layout-onepage .svc-cat-title { font-size: .45rem; } .dash-grid.layout-onepage .docker-list { font-size: .48rem; } .dash-grid.layout-onepage .docker-row { font-size: .48rem; padding: 0; } .dash-grid.layout-onepage .docker-stat { font-size: .42rem; } .dash-grid.layout-onepage .short-grid { grid-template-columns: repeat(auto-fill, minmax(50px, 1fr)); gap: 2px; } .dash-grid.layout-onepage .short-btn { font-size: .45rem; padding: 3px 1px; border-radius: 4px; } .dash-grid.layout-onepage .trk-table { font-size: .48rem; } .dash-grid.layout-onepage .trk-table td { padding: 0 2px; } .dash-grid.layout-onepage .cron-table { font-size: .48rem; } .dash-grid.layout-onepage .cron-table td { padding: 0 2px; } .dash-grid.layout-onepage .hm-grid { font-size: .5rem; gap: 2px; } .dash-grid.layout-onepage .hm-stat .val { font-size: .6rem; } .dash-grid.layout-onepage .hm-stat .lbl { font-size: .42rem; } .dash-grid.layout-onepage .hm-stat { padding: 2px; } .dash-grid.layout-onepage .chart-box { padding: 2px; margin-bottom: 2px; } .dash-grid.layout-onepage .chart-box canvas { max-height: 90px; } .dash-grid.layout-onepage .wea-current { gap: 4px; } .dash-grid.layout-onepage .wea-icon { font-size: 1.1rem; } .dash-grid.layout-onepage .wea-temp { font-size: .9rem; } .dash-grid.layout-onepage .wea-forecast { gap: 2px; margin-top: 2px; } .dash-grid.layout-onepage .wea-day { font-size: .5rem; padding: 1px; } .dash-grid.layout-onepage .wol-btn { font-size: .5rem; padding: 3px 8px; } /* Alle charts in One Page extra klein */ .dash-grid.layout-onepage .chart-box canvas { max-height: 90px !important; } /* Widget */ .widget { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; } .widget:hover { border-color: var(--accent); } .widget-header { font-weight: 600; font-size: .85rem; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; } .widget-header .count { font-size: .7rem; color: var(--text-dim); } .col2 { grid-column: span 2; } /* System */ .sys-grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 8px; } .sys-stat { text-align: center; } .sys-stat .val { font-size: 1.2rem; font-weight: 700; } .sys-stat .lbl { font-size: .65rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: .05em; } .bar-wrap { background: var(--bg); border-radius: 3px; height: 5px; margin-top: 3px; overflow: hidden; } .bar-fill { height: 100%; border-radius: 3px; transition: width .5s; } .sys-info { grid-column: span 4; font-size: .7rem; color: var(--text-dim); margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--border); } /* Energy */ .enr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .enr-stat { text-align: center; padding: 5px; background: var(--bg); border-radius: 8px; } .enr-stat .val { font-size: 1.1rem; font-weight: 700; } .enr-stat .lbl { font-size: .6rem; color: var(--text-dim); text-transform: uppercase; } .enr-green { color: var(--green); } .enr-red { color: var(--danger); } .enr-warn { color: var(--warn); } /* WOL */ .wol-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 5px; } .wol-node { text-align: center; padding: 5px; background: var(--bg); border-radius: 8px; font-size: .72rem; } .wol-node.online { border-left: 3px solid var(--green); } .wol-node.offline { border-left: 3px solid var(--danger); opacity: .7; } .wol-node.critical { border-left-width: 4px; } .wol-ip { font-size: .6rem; color: var(--text-dim); } .wol-badge { font-size: .5rem; padding: 1px 4px; border-radius: 3px; font-weight: 700; vertical-align: middle; } .wol-badge.critical { background: rgba(248, 81, 73, .2); color: var(--danger); } .wol-badge.standard { background: rgba(139, 148, 158, .2); color: var(--text-dim); } .wol-wake, .wol-off { display: block; margin: 3px auto 0; padding: 2px 8px; border: none; border-radius: 4px; font-size: .6rem; cursor: pointer; font-weight: 600; } .wol-wake { background: rgba(63, 185, 80, .2); color: var(--green); } .wol-wake:hover { background: rgba(63, 185, 80, .4); } .wol-off { background: rgba(248, 81, 73, .2); color: var(--danger); } .wol-off:hover { background: rgba(248, 81, 73, .4); } .wol-btn { padding: 5px 12px; border: 1px solid var(--border); border-radius: 6px; font-size: .7rem; font-weight: 600; cursor: pointer; } .wol-btn-wake { background: rgba(63, 185, 80, .15); color: var(--green); border-color: rgba(63, 185, 80, .3); } .wol-btn-wake:hover { background: rgba(63, 185, 80, .3); } .wol-btn-off { background: rgba(248, 81, 73, .15); color: var(--danger); border-color: rgba(248, 81, 73, .3); } .wol-btn-off:hover { background: rgba(248, 81, 73, .3); } .wol-toast { position: fixed; bottom: 20px; right: 20px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 10px 16px; font-size: .75rem; z-index: 999; box-shadow: var(--shadow); max-width: 360px; } /* ── Live actie-notificaties (linksonder) ── */ .action-toasts { position: fixed; left: 16px; bottom: 16px; z-index: 1000; display: flex; flex-direction: column-reverse; gap: 10px; width: 320px; max-width: calc(100vw - 32px); pointer-events: none; } .action-toast { position: relative; pointer-events: auto; cursor: pointer; background: #fde047; color: #1c1917; border: 1px solid #eab308; border-left: 4px solid var(--at-accent, #8b949e); border-radius: 10px; box-shadow: var(--shadow); overflow: hidden; animation: atIn .25s ease; } /* Aan (groen) vs uit (rood): de melding kleurt mee met de toestand van het event, zodat je in één oogopslag ziet of iets aanging of uitging. */ .action-toast.at-on { background: #dcfce7; color: #14532d; border-color: #22c55e; border-left-color: var(--green, #2ea043); } .action-toast.at-on .at-detail, .action-toast.at-on .at-time { color: #166534; } .action-toast.at-off { background: #fee2e2; color: #7f1d1d; border-color: #ef4444; border-left-color: var(--danger, #f85149); } .action-toast.at-off .at-detail, .action-toast.at-off .at-time { color: #991b1b; } /* Sluitknop (×) rechtsboven om een notificatie handmatig weg te klikken. */ .action-toast .at-close { position: absolute; top: 4px; right: 4px; z-index: 2; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; padding: 0; border: none; border-radius: 6px; background: rgba(28, 25, 23, .12); color: #1c1917; font-size: 1rem; line-height: 1; cursor: pointer; -webkit-tap-highlight-color: transparent; } .action-toast .at-close:hover { background: rgba(28, 25, 23, .28); } .action-toast.at-out { animation: atOut .3s ease forwards; } @keyframes atIn { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } } @keyframes atOut { to { opacity: 0; transform: translateX(-24px); } } .action-toast .at-body { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; } .action-toast .at-icon { font-size: 1.1rem; line-height: 1.3; } .action-toast .at-text { flex: 1; min-width: 0; } .action-toast .at-title { font-size: .82rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 24px; } .action-toast .at-detail { font-size: .72rem; color: #57534e; margin-top: 1px; } .action-toast .at-time { font-size: .66rem; color: #57534e; margin-top: 2px; } .action-toast img.at-snap { display: block; width: 100%; max-height: 180px; object-fit: cover; background: #000; } /* Bewegings-snapshot als thumbnail in de Acties-lijst (klik = vergroten). */ img.action-snap { height: 40px; width: 60px; object-fit: cover; border-radius: 4px; background: #000; cursor: pointer; border: 1px solid var(--border); } /* Instellingen-tab: camera-rapportage. */ .settings-hint { color: var(--text-dim); font-size: 13px; margin: 2px 0 10px; } /* Instellingen-tab: Home Assistant-gezondheid — stat-tegels + lijstgroepen. */ .ha-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; } .ha-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 8px; margin: 2px 0 4px; } .ha-stat { display: flex; align-items: center; gap: 9px; padding: 8px 10px; background: rgba(127, 127, 127, .08); border: 1px solid var(--border); border-radius: 10px; min-width: 0; } .ha-stat .ha-stat-ico { font-size: 1rem; line-height: 1; } .ha-stat .ha-stat-txt { display: flex; flex-direction: column; min-width: 0; } .ha-stat b { font-size: .58rem; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: var(--text-dim); white-space: nowrap; } .ha-stat .ha-stat-val { font-size: 1.05rem; font-weight: 700; line-height: 1.15; white-space: nowrap; } .ha-stat.warn { border-color: rgba(248, 81, 73, .5); } .ha-stat.warn .ha-stat-val { color: #f85149; } .ha-list { margin-top: 10px; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; } .ha-sub { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 12px; background: rgba(127, 127, 127, .1); font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: var(--text-dim); } .ha-sub-count { font-size: .68rem; font-weight: 700; color: var(--text); background: rgba(127, 127, 127, .2); border-radius: 999px; padding: 1px 8px; flex: 0 0 auto; } .ha-row { display: flex; align-items: center; gap: 8px; padding: 6px 12px; font-size: .82rem; border-top: 1px solid var(--border); } .ha-row .ha-ico { font-size: .85rem; line-height: 1; } .ha-row .ha-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ha-row .ha-tag { font-size: .68rem; color: var(--text-dim); background: rgba(127, 127, 127, .14); border-radius: 999px; padding: 1px 8px; white-space: nowrap; font-variant-numeric: tabular-nums; flex: 0 0 auto; } .ha-row .ha-tag.warn { color: #f85149; } .ha-meta { margin-top: 10px; font-size: .68rem; color: var(--text-dim); } .anna-audit-tbl { width: 100%; border-collapse: collapse; font-size: 13px; } .anna-audit-tbl th { color: var(--text-dim); font-weight: 600; text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; } .anna-audit-tbl td { padding: 6px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; } .anna-audit-tbl tbody tr:last-child td { border-bottom: none; } /* Instellingen-tab: gecentreerde kolom met wat lucht links/rechts en tussenruimte tussen de secties, i.p.v. edge-to-edge. */ #settings-content { max-width: 1080px; margin: 0 auto; padding: 16px 20px 32px; display: flex; flex-direction: column; gap: 16px; } #settings-content>div { margin: 0; } @media (max-width: 640px) { #settings-content { padding: 10px 12px 24px; } } .cam-report-list { display: flex; flex-direction: column; } .cam-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--border); } .cam-row:last-child { border-bottom: 0; } .cam-name { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cam-report-btn { flex: 0 0 auto; min-width: 96px; min-height: 44px; padding: 10px 14px; border-radius: 9px; border: 1px solid var(--border); background: var(--bg-soft, #2a2a2a); color: var(--text-dim); font-weight: 700; font-size: 13px; cursor: pointer; } .cam-report-btn.on { background: var(--green, #2ea043); border-color: var(--green, #2ea043); color: #fff; } .cam-report-btn:disabled { opacity: .6; cursor: default; } /* Instellingen-tab: energietarief-editor. */ .tariff-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px 14px; margin: 6px 0 4px; } .tariff-field { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--text-dim); } .tariff-field input, .tariff-field select { min-height: 44px; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-soft, #1c1c1c); color: var(--text, #eee); font-size: 15px; } .tariff-sub { margin: 16px 0 6px; font-weight: 700; font-size: 14px; display: flex; align-items: center; gap: 10px; } .tariff-toggle { font-size: 12px; font-weight: 500; color: var(--text-dim); display: inline-flex; align-items: center; gap: 5px; } .tariff-actions { margin-top: 14px; text-align: right; } .tariff-save-btn { min-height: 46px; padding: 10px 24px; border-radius: 9px; border: 1px solid var(--green, #2ea043); background: var(--green, #2ea043); color: #fff; font-weight: 700; font-size: 14px; cursor: pointer; } .tariff-save-btn:disabled { opacity: .6; cursor: default; } /* Instellingen-tab: financieel overzicht. */ .fin-periods { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 12px; } .fin-period { padding: 5px 12px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg-soft, #2a2a2a); color: var(--text-dim); font-size: 12px; font-weight: 600; cursor: pointer; } .fin-period.on { background: var(--accent, #388bfd); border-color: var(--accent, #388bfd); color: #fff; } .cost-block { margin: 10px 0; } .cost-title { font-weight: 700; font-size: 13px; margin-bottom: 4px; color: var(--text-dim); } .cost-row { display: flex; justify-content: space-between; gap: 12px; padding: 5px 4px; font-size: 14px; border-bottom: 1px solid var(--border); } .cost-row:last-child { border-bottom: 0; } .cost-row.total { font-weight: 700; border-bottom: 0; } .cost-row.credit span:last-child { color: var(--green, #2ea043); } .cost-row.grand-total { font-weight: 800; font-size: 16px; border: 0; border-top: 2px solid var(--border); padding-top: 10px; margin-top: 4px; } /* Lightbox-overlay voor een vergroot snapshot. */ .snap-overlay { position: fixed; inset: 0; z-index: 1200; background: rgba(0, 0, 0, .82); display: flex; align-items: center; justify-content: center; padding: 24px; cursor: zoom-out; } .snap-overlay img { max-width: 96vw; max-height: 92vh; border-radius: 8px; box-shadow: var(--shadow); } /* ── Power-tab ── */ #power-content { padding: 20px; } .pwr-wrap { max-width: 1400px; margin: 0 auto; } .pwr-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; } .pwr-head h1 { font-size: 1.4rem; font-weight: 800; } .pwr-sub { font-size: .8rem; color: var(--text-dim); } .pwr-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; margin-bottom: 18px; } .pwr-stat { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 14px 18px; text-align: center; } .pwr-stat .v { font-size: 1.9rem; font-weight: 800; line-height: 1.1; } .pwr-stat .l { font-size: .68rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: .06em; margin-top: 2px; } .pwr-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 22px; } .pwr-big { min-height: 46px; padding: 11px 18px; border-radius: 10px; font-size: .85rem; font-weight: 700; cursor: pointer; border: 1px solid var(--border); background: var(--bg-alt); color: var(--text); transition: all .15s; } .pwr-big:disabled { opacity: .4; cursor: not-allowed; } .pwr-btn-wake { background: rgba(63, 185, 80, .15); color: var(--green); border-color: rgba(63, 185, 80, .35); } .pwr-big.pwr-btn-wake:hover:not(:disabled) { background: rgba(63, 185, 80, .3); } .pwr-btn-off { background: rgba(248, 81, 73, .15); color: var(--danger); border-color: rgba(248, 81, 73, .35); } .pwr-big.pwr-btn-off:hover:not(:disabled) { background: rgba(248, 81, 73, .3); } .pwr-btn-ghost:hover { border-color: var(--accent); color: var(--accent); } .pwr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; } .pwr-node { background: var(--bg-card); border: 1px solid var(--border); border-left: 4px solid var(--border); border-radius: 14px; padding: 16px; transition: transform .15s, border-color .15s, box-shadow .15s; } .pwr-node:hover { transform: translateY(-2px); box-shadow: var(--shadow); } .pwr-node.online { border-left-color: var(--green); } .pwr-node.offline { border-left-color: var(--danger); } .pwr-node-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; } .pwr-node-name { font-size: 1.05rem; font-weight: 700; display: flex; align-items: center; gap: 8px; } .pwr-status-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } .pwr-status-dot.on { background: var(--green); box-shadow: 0 0 8px var(--green); } .pwr-status-dot.off { background: var(--danger); } .pwr-badge { font-size: .58rem; font-weight: 700; padding: 3px 9px; border-radius: 20px; letter-spacing: .04em; white-space: nowrap; } .pwr-badge.crit { background: rgba(248, 81, 73, .15); color: var(--danger); } .pwr-badge.std { background: rgba(139, 148, 158, .15); color: var(--text-dim); } .pwr-meta { font-size: .72rem; color: var(--text-dim); font-family: ui-monospace, "SF Mono", Menlo, monospace; margin-bottom: 3px; } /* UPS-status (Power-tab): zelfde kaart-taal als .pwr-node, met een rode linkerrand + pulse zodra een unit op accu draait (stroomstoring). */ .pwr-ups-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; } .pwr-ups-card { background: var(--bg-card); border: 1px solid var(--border); border-left: 4px solid var(--green); border-radius: 14px; padding: 16px; } .pwr-ups-card.unavailable { border-left-color: var(--border); opacity: .7; } .pwr-ups-card.on-battery { border-left-color: var(--danger); animation: upsOnBatteryPulse 2s ease-in-out infinite; } @keyframes upsOnBatteryPulse { 0%, 100% { box-shadow: none; } 50% { box-shadow: 0 0 0 2px rgba(248, 81, 73, .25); } } .pwr-ups-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; } .pwr-ups-name { font-size: 1rem; font-weight: 700; } .pwr-ups-badge { font-size: .72rem; font-weight: 700; white-space: nowrap; } .pwr-ups-meta { font-size: .78rem; color: var(--text-dim); } .pwr-state { font-size: .74rem; font-weight: 600; margin: 8px 0 2px; } .pwr-state.on { color: var(--green); } .pwr-state.off { color: var(--danger); } .pwr-node-btn { width: 100%; min-height: 44px; margin-top: 10px; padding: 10px; border: none; border-radius: 9px; font-size: .85rem; font-weight: 700; cursor: pointer; transition: background .15s, transform .1s; } .pwr-node-btn:active { transform: scale(.97); } .pwr-node-btn.pwr-btn-lock { background: var(--bg); color: var(--text-dim); cursor: not-allowed; } .pwr-node-actions { display: flex; gap: 8px; margin-top: 10px; } .pwr-node-actions .pwr-node-btn { margin-top: 0; flex: 1; } .pwr-protect { background: rgba(255, 255, 255, .05); border: 1px solid var(--border) !important; color: var(--text-dim); } .pwr-protect:hover { color: var(--text); border-color: var(--accent) !important; } .pwr-protect.is-prot { background: rgba(251, 191, 36, .12); color: var(--warn); border-color: rgba(251, 191, 36, .4) !important; } .pwr-empty { grid-column: 1 / -1; text-align: center; color: var(--text-dim); padding: 40px; } /* Power-tab: energie + apparaten/schakelaars */ .pwr-section { margin-top: 30px; } .pwr-section-title { font-size: 1.05rem; font-weight: 800; margin-bottom: 12px; color: var(--text); } .pwr-dev-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; } .pwr-live { font-size: .62rem; font-weight: 700; color: var(--green); background: rgba(74, 222, 128, .14); border: 1px solid rgba(74, 222, 128, .3); border-radius: 999px; padding: 2px 8px; margin-left: 8px; vertical-align: middle; white-space: nowrap; } @media (max-width: 560px) { .pwr-dev-grid { grid-template-columns: 1fr; gap: 10px; } .pwr-dev { padding: 13px; } } .pwr-dev { background: var(--bg-card); border: 1px solid var(--border); border-left: 4px solid var(--border); border-radius: 14px; padding: 16px; } .pwr-dev.on { border-left-color: var(--green); } .pwr-dev.off { border-left-color: var(--text-dim); } .pwr-dev.unavail { opacity: .55; } .pwr-dev-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .pwr-dev-icon { font-size: 1.2rem; } .pwr-dev-name { font-size: 1rem; font-weight: 700; flex: 1; } .pwr-dev-state { font-size: .72rem; font-weight: 700; white-space: nowrap; } .pwr-dev-meta { font-size: .78rem; color: var(--text-dim); margin-bottom: 10px; } .pwr-dev-sp { display: flex; gap: 5px; margin-bottom: 10px; } .pwr-sp-btn { flex: 1; min-height: 44px; padding: 8px 0; border: 1px solid var(--border); background: var(--bg-alt); color: var(--text); border-radius: 9px; font-size: .78rem; font-weight: 700; cursor: pointer; transition: all .12s; } .pwr-sp-btn:hover { border-color: var(--accent); } .pwr-sp-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); } .pwr-dev-btns { display: flex; gap: 8px; } .pwr-dev-toggle, .pwr-dev-auto { flex: 1; min-height: 44px; padding: 10px; border: 1px solid var(--border); background: var(--bg-alt); color: var(--text); border-radius: 9px; font-size: .8rem; font-weight: 700; cursor: pointer; transition: all .12s; } .pwr-dev-toggle:hover:not(:disabled), .pwr-dev-auto:hover { border-color: var(--accent); color: var(--accent); } .pwr-dev-toggle:disabled { opacity: .5; cursor: not-allowed; } .pwr-radio-row { display: flex; gap: 10px; flex-wrap: wrap; } .pwr-radio-btn, .pwr-radio-stop { min-height: 46px; padding: 11px 18px; border: 1px solid var(--border); background: var(--bg-alt); color: var(--text); border-radius: 10px; font-size: .85rem; font-weight: 700; cursor: pointer; transition: all .12s; } .pwr-radio-btn:hover { border-color: var(--accent); color: var(--accent); } .pwr-radio-stop { background: rgba(248, 81, 73, .12); color: var(--danger); border-color: rgba(248, 81, 73, .3); } /* Catalog-zoekveld */ .cat-search-wrap { position: relative; max-width: 480px; margin-bottom: 14px; } #cat-search { width: 100%; padding: 10px 14px 10px 38px; background: var(--bg-alt); border: 1px solid var(--border); border-radius: 10px; color: var(--text); font-size: .9rem; outline: none; } #cat-search:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(88, 166, 255, .15); } .cat-search-wrap .search-icon { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--text-dim); font-size: .85rem; } /* Weather */ .wea-current { display: flex; align-items: center; gap: 10px; } .wea-icon { font-size: 2.2rem; } .wea-temp { font-size: 1.6rem; font-weight: 700; } .wea-forecast { display: flex; gap: 6px; margin-top: 6px; } .wea-day { flex: 1; text-align: center; font-size: .7rem; padding: 3px; background: var(--bg); border-radius: 6px; } .wea-day .hi { color: var(--danger); } .wea-day .lo { color: var(--accent); } /* Services monitor */ .svc-cat { margin-bottom: 6px; } .svc-cat-title { font-size: .65rem; color: var(--text-dim); text-transform: uppercase; margin-bottom: 2px; letter-spacing: .05em; } .svc-row { display: flex; justify-content: space-between; font-size: .75rem; padding: 1px 0; } .svc-ok { color: var(--green); } .svc-fail { color: var(--danger); } /* Docker */ .docker-list { font-size: .72rem; } .docker-row { display: flex; justify-content: space-between; padding: 2px 0; border-bottom: 1px solid var(--border); } .docker-stat { font-size: .65rem; color: var(--text-dim); } /* Shortcuts */ .short-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 5px; } .short-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 52px; padding: 10px 6px; background: var(--bg); border: 1px solid var(--border); border-radius: 9px; text-decoration: none; color: var(--text); font-size: .7rem; transition: border-color .2s; } .short-btn:hover { border-color: var(--accent); } .short-btn .si { font-size: 1.1rem; } /* Catalog */ .catalog { max-width: none; width: 100vw; min-width: 100vw; margin: 0; padding: 8px; } #catalog-dash { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 8px; margin-bottom: 16px; } #catalog-dash .widget { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; } #catalog-dash .widget-header { font-size: .8rem; font-weight: 700; color: var(--accent); margin-bottom: 8px; display: flex; align-items: center; gap: 8px; } #catalog-dash .widget-header .count { font-size: .65rem; color: var(--text-dim); font-weight: 400; } #catalog-dash .enr-grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 6px; } #catalog-dash .enr-stat { text-align: center; padding: 4px; } #catalog-dash .enr-stat .val { font-size: 1.2rem; font-weight: 700; } #catalog-dash .enr-stat .lbl { font-size: .6rem; color: var(--text-dim); } #catalog-dash .sys-grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 4px; } #catalog-dash .sys-stat { text-align: center; padding: 2px; } #catalog-dash .sys-stat .val { font-size: .9rem; font-weight: 700; color: var(--accent); } #catalog-dash .sys-stat .lbl { font-size: .55rem; color: var(--text-dim); } #catalog-dash .bar-wrap { height: 4px; background: var(--bg); border-radius: 2px; margin-top: 2px; } #catalog-dash .bar-fill { height: 100%; border-radius: 2px; } #catalog-dash .ctrl-row { display: flex; gap: 6px; flex-wrap: wrap; } #catalog-dash .ctrl-mini { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; font-size: .7rem; cursor: pointer; display: flex; align-items: center; gap: 6px; min-width: 120px; transition: all .15s; } #catalog-dash .ctrl-mini:hover { border-color: var(--accent); } #catalog-dash .ctrl-mini.on { background: rgba(63, 185, 80, .15); border-color: var(--green); } #catalog-dash .ctrl-mini.off-card { background: var(--bg); } #catalog-dash .ctrl-mini .dot { width: 8px; height: 8px; border-radius: 50%; } #catalog-dash .ctrl-mini.on .dot { background: var(--green); } #catalog-dash .ctrl-mini.off-card .dot { background: #555; } #catalog-dash .shortcuts { display: flex; gap: 6px; flex-wrap: wrap; } #catalog-dash .shortcut { padding: 5px 10px; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; font-size: .65rem; color: var(--text-dim); text-decoration: none; font-weight: 600; white-space: nowrap; } #catalog-dash .shortcut:hover { border-color: var(--accent); color: var(--text); } .filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; } .chip { background: var(--bg-alt); border: 1px solid var(--border); color: var(--text-dim); min-height: 40px; padding: 9px 16px; border-radius: 20px; font-size: .8rem; cursor: pointer; font-weight: 600; transition: all .15s; } .chip:hover { color: var(--text); border-color: var(--accent); } .chip.active { background: var(--accent); color: #0d1117; border-color: var(--accent); } .category { margin-bottom: 30px; } .category h2 { font-size: .95rem; font-weight: 700; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; } .category h2 .count { font-size: .7rem; color: var(--text-dim); font-weight: 500; background: var(--bg-alt); padding: 2px 8px; border-radius: 10px; } .cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; } .card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; transition: transform .12s, border-color .12s, box-shadow .12s; display: flex; flex-direction: column; gap: 8px; cursor: pointer; text-decoration: none; color: inherit; } .card:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: var(--shadow); } .card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; } .card-title { font-size: .9rem; font-weight: 700; } .card-desc { font-size: .75rem; color: var(--text-dim); } .badge-xs { font-size: .6rem; font-weight: 700; padding: 2px 7px; border-radius: 5px; text-transform: uppercase; white-space: nowrap; } .badge-https { background: rgba(63, 185, 80, .15); color: var(--green); } .badge-http { background: rgba(210, 153, 34, .15); color: var(--warn); } .card-meta { display: flex; gap: 8px; font-size: .7rem; color: var(--text-dim); } .card-meta code { background: var(--bg); padding: 1px 5px; border-radius: 4px; font-size: .65rem; } /* Terminal + Cron */ .term { background: var(--term-bg); border: 1px solid #1a3a1a; border-radius: 8px; padding: 6px; font-family: monospace; font-size: .68rem; max-height: 150px; overflow-y: auto; } .cron-list { font-size: .68rem; max-height: 150px; overflow-y: auto; } .empty { color: var(--text-dim); font-size: .75rem; text-align: center; padding: 10px; } /* Toggle */ .toggle-bar { display: flex; gap: 0; margin-bottom: 16px; } .toggle-btn { padding: 8px 18px; background: var(--bg-alt); border: 1px solid var(--border); color: var(--text-dim); font-size: .8rem; cursor: pointer; font-weight: 600; } .toggle-btn:first-child { border-radius: 8px 0 0 8px; } .toggle-btn:last-child { border-radius: 0 8px 8px 0; } .toggle-btn.active { background: var(--accent); color: #0d1117; border-color: var(--accent); } /* Trackr + Cron + Hermes */ .trk-pills { display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; } .trk-pill { padding: 3px 8px; border-radius: 10px; font-size: .65rem; font-weight: 700; } .trk-pill.ok { background: rgba(63, 185, 80, .15); color: var(--green); } .trk-pill.warn { background: rgba(210, 153, 34, .15); color: var(--warn); } .trk-pill.err { background: rgba(248, 81, 73, .15); color: var(--danger); } .trk-table { width: 100%; font-size: .7rem; border-collapse: collapse; } .trk-table td { padding: 2px 4px; border-bottom: 1px solid var(--border); } .trk-table .st { font-size: .65rem; font-weight: 700; white-space: nowrap; padding-right: 6px; } .st-in_progress { color: var(--accent); } .st-blocked { color: var(--danger); } .st-needs_input { color: var(--warn); } /* Kanban (Alles-tab widget + Wall-tegel) — Hermes multi-agent board */ .kb-st { font-size: .65rem; font-weight: 700; white-space: nowrap; padding-right: 6px; } .kb-st-running { color: var(--accent); } .kb-st-blocked { color: var(--danger); } .kb-st-ready { color: var(--green); } .kb-st-triage, .kb-st-review, .kb-st-needs_input { color: var(--warn); } .kb-st-todo { color: var(--text-dim); } .kb-table .kb-title { color: var(--text); } .kb-assignee { color: var(--text-dim); font-size: .62rem; white-space: nowrap; text-align: right; } .kb-wall-list { margin-top: 6px; font-size: .62rem; line-height: 1.5; text-align: left; } .kb-wall-item { display: flex; align-items: center; gap: 6px; margin-top: 3px; } .kb-wall-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); } .kb-wall-item .kb-assignee { flex: 0 0 auto; } .cron-table { width: 100%; font-size: .68rem; border-collapse: collapse; } .cron-table td { padding: 1px 4px; border-bottom: 1px solid var(--border); } .cron-table .st { font-size: .6rem; } .cron-table .ok { color: var(--green); } .cron-table .err { color: var(--danger); } .cron-table .warn { color: var(--warn); } .hm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; font-size: .7rem; } .hm-stat { text-align: center; padding: 4px; background: var(--bg); border-radius: 6px; } .hm-stat .val { font-size: .95rem; font-weight: 700; color: var(--accent); } .hm-stat .lbl { font-size: .6rem; color: var(--text-dim); } .hm-watchdogs { margin-top: 6px; font-size: .65rem; color: var(--text-dim); } .hm-watchdogs span { margin-right: 8px; white-space: nowrap; } .chart-box { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 6px; margin-bottom: 6px; } .chart-box canvas { max-height: 180px; } /* Alles-tab: volle-breedte widget (bv. de grafieken-band) */ .dash-grid-full .col-full { grid-column: 1 / -1; } /* Grafieken naast elkaar i.p.v. gestapeld in de volle-breedte widget */ .chart-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px; } .chart-grid .chart-box { margin-bottom: 0; } .no-results { text-align: center; color: var(--text-dim); padding: 40px; font-size: .9rem; display: none; } @media (max-width: 1024px) { .dash-grid { grid-template-columns: repeat(2, 1fr); } .col2 { grid-column: span 2; } } @media (max-width: 768px) { .dash-grid { grid-template-columns: 1fr; } .col2 { grid-column: span 1; } .sys-grid { grid-template-columns: 1fr 1fr; } .sys-info { grid-column: span 2; } .header-inner { position: relative; gap: 8px 10px; flex-wrap: nowrap; align-items: center; } /* Op mobiel verdwijnen de losse tabs achter een hamburger-menu; de voorspelling krijgt de vrijgekomen ruimte naast de hamburger. */ .brand { display: none; } .hamburger { display: inline-flex; align-items: center; justify-content: center; order: 0; flex: 0 0 auto; } /* .meta (thema + verbinding + weer) pakt de ruimte naast de hamburger. */ .meta { order: 1; flex: 1 1 auto; min-width: 0; gap: 8px; white-space: normal; } /* Weer eerst binnen .meta (links, groeit/breekt), thema rechts. */ .header-weer { order: 0; display: flex; flex: 1 1 auto; min-width: 0; white-space: normal; font-size: .74rem; line-height: 1.3; } .header-weer .hw-day { white-space: normal; } #theme-toggle { order: 2; flex: 0 0 auto; } /* "realtime/polling"-tekst verbergen op mobiel; scheelt ruimte (de weer- regel + thema-knop volstaan). */ #conn-mode { display: none; } /* Hostbelasting CPU/RAM/Disk verbergen op mobiel (de wall-sys-row toont dezelfde info al); voorkomt horizontale overflow in de smalle header. */ #header-sys { display: none; } .header-tuin { display: none; } /* Tabs als uitklap-menu onder de header (getoond via .menu-open). */ .tabs { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 2px; padding: 6px; background: var(--card); border: 1px solid var(--border); border-top: none; border-radius: 0 0 12px 12px; box-shadow: 0 14px 30px rgba(0, 0, 0, .45); max-height: 72vh; overflow-x: hidden; overflow-y: auto; z-index: 200; } .header-inner.menu-open .tabs { display: flex; } .tab-btn { width: 100%; text-align: left; padding: 12px 14px; font-size: .92rem; border: none; border-bottom: none; border-radius: 8px; } .tab-btn.active { background: var(--bg-alt); border-bottom-color: transparent; } } /* Wall Controls — large tablet-friendly buttons */ .wall-ctrls-wrap { display: flex; gap: 14px; flex-wrap: wrap; align-items: stretch; justify-content: center; } .wall-ctrl-card { /* Accent-variabelen worden per stand overschreven (.state-*). Zo is de rest van de kaart-styling DRY: alles leest var(--ctrl-accent/soft/line/glow). */ --ctrl-accent: #6b7280; --ctrl-soft: rgba(255, 255, 255, .04); --ctrl-line: var(--border, #30363d); --ctrl-glow: transparent; flex: 1; min-width: 360px; max-width: 380px; min-height: 130px; display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; gap: 14px; background: linear-gradient(180deg, rgba(255, 255, 255, .025), rgba(0, 0, 0, .18)); border: 1px solid var(--ctrl-line); border-radius: 18px; padding: 16px; text-align: center; cursor: default; transition: box-shadow .18s ease, border-color .25s; user-select: none; position: relative; overflow: hidden; } /* Kleur per stand: aan=groen, koelen=blauw, verwarmen=oranje, uit=grijs. */ .wall-ctrl-card.state-on { --ctrl-accent: #22c55e; --ctrl-soft: rgba(34, 197, 94, .15); --ctrl-line: rgba(34, 197, 94, .42); --ctrl-glow: rgba(34, 197, 94, .5); } .wall-ctrl-card.state-cool { --ctrl-accent: #38bdf8; --ctrl-soft: rgba(56, 189, 248, .15); --ctrl-line: rgba(56, 189, 248, .42); --ctrl-glow: rgba(56, 189, 248, .5); } .wall-ctrl-card.state-heat { --ctrl-accent: #fb923c; --ctrl-soft: rgba(251, 146, 60, .15); --ctrl-line: rgba(251, 146, 60, .42); --ctrl-glow: rgba(251, 146, 60, .5); } .wall-ctrl-card.state-off { --ctrl-accent: #6b7280; --ctrl-soft: rgba(255, 255, 255, .04); --ctrl-line: var(--border, #30363d); --ctrl-glow: transparent; } /* Zachte accent-tint als achtergrond wanneer de control actief is. */ .wall-ctrl-card:not(.state-off) { background: linear-gradient(180deg, var(--ctrl-soft), rgba(0, 0, 0, .18)); } .wall-ctrl-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--ctrl-accent); opacity: 0; transition: opacity .3s; } .wall-ctrl-card:not(.state-off)::before { opacity: 1; box-shadow: 0 0 14px var(--ctrl-glow); } .wall-ctrl-card:hover { border-color: var(--ctrl-accent); box-shadow: 0 8px 22px rgba(0, 0, 0, .38); } /* Linker info-kolom: icoon, naam, stand-pill en temp — gecentreerd. */ .wall-ctrl-card .ctrl-info { flex: 1; min-width: 120px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; } /* Icoon in een zachte, gloeiende cirkel-badge. */ .wall-ctrl-card .ctrl-icon { font-size: 1.7rem; line-height: 1; width: 54px; height: 54px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--ctrl-soft); border: 1px solid var(--ctrl-line); transition: box-shadow .25s, background .25s; } .wall-ctrl-card:not(.state-off) .ctrl-icon { box-shadow: 0 0 18px var(--ctrl-glow); } .wall-ctrl-card.state-off .ctrl-icon { filter: grayscale(.35) opacity(.75); } .wall-ctrl-card .ctrl-name { font-size: .98rem; font-weight: 700; letter-spacing: .01em; } .wall-ctrl-card .ctrl-state { font-size: .8rem; font-weight: 700; padding: 4px 12px; border-radius: 999px; display: inline-flex; align-items: center; gap: 5px; color: var(--ctrl-accent); background: var(--ctrl-soft); border: 1px solid var(--ctrl-line); } .wall-ctrl-card.state-off .ctrl-state { color: var(--text-dim); } .wall-ctrl-card .ctrl-temp { font-size: .76rem; color: var(--text-dim); } /* Staleness-markering op sensoren (bv. jacuzzi-watertemp): gedempte waarde + waarschuwingslabel wanneer de sensor al even niets meer meldt. */ .wall-ctrl-card .ctrl-temp .stale-val { opacity: .6; } .wall-ctrl-card .ctrl-temp .stale-age { color: var(--warn, #d29922); font-weight: 600; } /* Reden van de laatste auto-evaluatie (bv. "overschot -3886W < 100W -> uit"). Kleiner en gedempter dan .ctrl-temp — het is uitleg, geen kernstatus. */ .wall-ctrl-card .ctrl-reason { font-size: .74rem; line-height: 1.3; color: var(--text-dim); opacity: .95; margin-top: 2px; } /* Raam-status op de airco-kaart (bv. Slaapkamer 2). Volle-breedte balk onderaan de kaart (order:10 = na alle kolommen dankzij flex-wrap). Open = rood (waarschuwing: airco mag niet aan met open raam), deels = amber, dicht = blauw. */ .wall-ctrl-card .ctrl-window { order: 10; flex-basis: 100%; box-sizing: border-box; font-size: .74rem; font-weight: 600; padding: 7px 10px; border-radius: 12px; margin-top: 2px; text-align: center; white-space: normal; display: flex; align-items: center; justify-content: center; gap: 6px; } .wall-ctrl-card .ctrl-window-open { background: rgba(248, 81, 73, .18); color: #f85149; border: 1px solid rgba(248, 81, 73, .32); } .wall-ctrl-card .ctrl-window-deels { background: rgba(251, 191, 36, .18); color: #fbbf24; } .wall-ctrl-card .ctrl-window-dicht { background: rgba(96, 165, 250, .16); color: #60a5fa; } /* Verborgen placeholder voor alle airco's zonder raam-status, zodat de kaarten dezelfde hoogte behouden ongeacht raam-waarschuwing. */ .wall-ctrl-card .ctrl-window-placeholder { visibility: hidden; height: 0; min-height: 0; padding: 0; margin: 0; border: none; } /* Setpoint-kiezer (airco): smalle verticale kolom met graden-knoppen, tussen de info en de Aan/Uit+Auto-knoppen. De actieve setpoint kleurt mee met het stand-accent van de kaart. */ .wall-ctrl-card .ctrl-setpoint { display: flex; flex-direction: column; gap: 5px; flex: 0 0 auto; width: 52px; align-self: stretch; justify-content: center; align-items: center; } .wall-ctrl-card .sp-btn { width: 100%; min-width: 40px; min-height: 44px; /* wand-tablet: aantikbaar, zie /design-review 2026-09-12 */ padding: 8px; font-size: .8rem; font-weight: 700; border-radius: 9px; border: 1px solid var(--border, #30363d); background: rgba(255, 255, 255, .04); color: var(--text-dim); cursor: pointer; transition: background .15s, color .15s, border-color .15s, transform .1s; } .wall-ctrl-card .sp-btn:hover { color: var(--text); border-color: var(--ctrl-accent); background: rgba(255, 255, 255, .1); } .wall-ctrl-card .sp-btn:active { transform: scale(.92); } .wall-ctrl-card .sp-btn.active { color: var(--ctrl-accent); background: var(--ctrl-soft); border-color: var(--ctrl-line); box-shadow: 0 0 8px var(--ctrl-glow); } /* Knoppen-kolom rechts op elke control-kaart: boven Aan/Uit, onder Auto/Handmatig. Twee grote knoppen die de kaarthoogte vullen (eigen click-handlers in JS). */ .wall-ctrl-card .ctrl-split { display: flex; flex-direction: column; gap: 10px; flex: 0 0 auto; width: 120px; } .wall-ctrl-card .ctrl-split>button { flex: 1; min-width: 0; min-height: 42px; font-size: .82rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 8px 10px; border-radius: 11px; border: 1px solid var(--border, #30363d); background: rgba(255, 255, 255, .035); color: var(--text-dim); cursor: pointer; transition: background .15s, color .15s, border-color .15s, transform .1s, box-shadow .15s; } .wall-ctrl-card .ctrl-split>button:hover { background: rgba(255, 255, 255, .1); color: var(--text); border-color: var(--ctrl-accent); } .wall-ctrl-card .ctrl-split>button:active { transform: scale(.95); } /* Aan/Uit-knop kleurt mee met de stand als 'ie AAN staat. */ .wall-ctrl-card .ctrl-power.on { color: var(--ctrl-accent); background: var(--ctrl-soft); border-color: var(--ctrl-line); } /* Auto/Handmatig-knop: handmatig = amber. */ .wall-ctrl-card .ctrl-mode.manual { border-color: var(--warn, #d29922); color: var(--warn, #d29922); background: rgba(210, 153, 34, .14); } /* Plafondventilator: snelheidskolom is breder (labels als "1 · laag"). */ .wall-ctrl-card .ctrl-fan-speed { width: 74px; } /* Richting-knop (vooruit/achteruit) — achteruit kleurt mee met het stand-accent. */ .wall-ctrl-card .ctrl-fan-dir.rev { color: var(--ctrl-accent); background: var(--ctrl-soft); border-color: var(--ctrl-line); } .wall-ctrl-card.loading { opacity: .5; pointer-events: none; animation: pulse 0.8s infinite; } @keyframes pulse { 0%, 100% { opacity: .5 } 50% { opacity: .8 } } /* Shortcuts row */ .wall-shortcuts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 4px; } /* Zelfde formaat als .tab-btn: min-height 52px, padding 12px 22px, font .9rem/600 */ .wall-shortcut { flex: 0 0 auto; min-height: 52px; padding: 12px 22px; border-radius: 10px; background: var(--bg-card); border: 1px solid var(--border); color: var(--text-dim); font-size: .9rem; font-weight: 600; cursor: pointer; text-decoration: none; transition: all .15s; display: flex; align-items: center; gap: 6px; white-space: nowrap; } /* Icoon op tab-formaat (gelijk aan .tab-btn .mi) */ .wall-shortcut .mi { font-size: 1.25rem; vertical-align: -3px; color: inherit; } .wall-shortcut:hover { color: var(--text); border-color: var(--accent); background: var(--card-hover); } /* Radio-kaart — 4e tegel rechts náást de control-kaarten */ .wall-radio-card { flex: 1 1 200px; min-width: 190px; max-width: 270px; align-self: center; display: flex; flex-direction: column; justify-content: center; gap: 12px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 18px; padding: 16px; } /* iMac naast de radio-tegel: compacte status + wake/hibernate op de Wall. */ .imac-wall-card { flex: 1 1 220px; min-width: 220px; max-width: 300px; min-height: 130px; padding: 14px; } .imac-wall-card .ctrl-info { min-width: 0; } .imac-wall-card .ctrl-split { min-width: 116px; } .imac-btn.active { color: #86efac !important; background: rgba(34, 197, 94, .18) !important; border-color: #22c55e !important; box-shadow: 0 0 0 1px rgba(34, 197, 94, .2), 0 0 14px rgba(34, 197, 94, .18); } .imac-btn[data-imac="hibernate"].active { color: #fbbf24 !important; background: rgba(251, 191, 36, .14) !important; border-color: #f59e0b !important; box-shadow: 0 0 0 1px rgba(251, 191, 36, .18), 0 0 14px rgba(251, 191, 36, .14); } .wall-radio-card .radio-btns { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .radio-btn { aspect-ratio: 1 / 1; width: 100%; min-height: 0; padding: 8px; border-radius: 11px; background: rgba(88, 166, 255, .12); border: 1px solid rgba(88, 166, 255, .35); color: var(--text-dim); font-size: .78rem; font-weight: 700; cursor: pointer; transition: background .15s, color .15s, border-color .15s, transform .1s; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; white-space: normal; text-align: center; line-height: 1.2; } .radio-btn:hover { border-color: var(--accent); background: rgba(88, 166, 255, .2); color: var(--text); } .radio-btn:active { transform: scale(.95); } /* Stop-knop en groep-toggle (Tuin aan/uit): neutraal in plaats van accent-blauw (het zijn geen 'stations' — de toggle kleurt zelf al mee met aan/uit hieronder). */ .radio-btn.radio-stop, .radio-btn.radio-group { background: rgba(255, 255, 255, .04); border-color: var(--border); } .radio-btn.radio-stop { color: var(--text-dim); } .radio-btn.radio-stop:hover { color: var(--danger); border-color: var(--danger); } /* In de 2x2-grid staat elke knop al los in zijn eigen vak; een scheidingslijn tussen radiostations en groep-toggle(s) is dan overbodig. */ .wall-radio-card .radio-sep { display: none; } /* Volumebalk onderaan de radio-kaart (radio-volume; over de volle breedte van het 2-koloms grid, onder Stop + de groep-toggles). */ .radio-vol-slot { grid-column: 1 / -1; } .radio-vol { display: flex; flex-direction: column; } .radio-vol-head { display: flex; align-items: center; gap: 5px; font-size: .7rem; font-weight: 600; color: var(--text-dim); } .radio-vol-head .mi { font-size: .95rem; } .radio-vol-val { margin-left: auto; color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; } .radio-vol .ud-vol-bar { height: 20px; } /* Groep-toggle (bv. tuin): groen als AAN, grijs als UIT. */ .radio-btn.radio-group.on { color: #22c55e; border-color: rgba(34, 197, 94, .5); background: rgba(34, 197, 94, .14); } .radio-btn.radio-group.on:hover { border-color: #22c55e; background: rgba(34, 197, 94, .22); } .radio-btn.radio-group.off { color: var(--text-dim); } .radio-btn.radio-group.off:hover { color: var(--text); border-color: var(--accent); } /* Modal — kies op welke speaker het station speelt */ .ud-modal-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, .6); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; z-index: 1000; } .ud-modal { background: var(--bg-card); border: 1px solid var(--border); border-radius: 18px; padding: 24px; width: min(92vw, 420px); box-shadow: 0 20px 60px rgba(0, 0, 0, .5); } .ud-modal-title { font-size: 1.05rem; font-weight: 700; color: var(--text); margin: 0 0 4px; } .ud-modal-sub { font-size: .8rem; color: var(--text-dim); margin: 0 0 18px; } .ud-modal-speakers { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .ud-spk-btn { aspect-ratio: 1 / 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 12px; border-radius: 11px; background: rgba(255, 255, 255, .04); border: 1px solid var(--border); color: var(--text); font-size: .85rem; font-weight: 600; cursor: pointer; transition: background .15s, color .15s, border-color .15s, transform .1s; text-align: center; line-height: 1.2; } .ud-spk-btn:hover { background: rgba(255, 255, 255, .1); border-color: var(--accent); } .ud-spk-btn:active { transform: scale(.95); } .ud-spk-btn .spk-emoji { font-size: 1.8rem; } /* Volumebalk in de radio-modal (volume kiezen vóór het afspelen) */ .ud-modal-vol { margin-top: 16px; } .ud-vol-head { display: flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 600; color: var(--text-dim); margin-bottom: 8px; } .ud-vol-head .mi { font-size: 1rem; } .ud-vol-val { margin-left: auto; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; } .ud-vol-bar { -webkit-appearance: none; appearance: none; width: 100%; height: 22px; background: transparent; cursor: pointer; margin: 0; } .ud-vol-bar::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; /* --border werkt in beide thema's (donker #3d4a5c / licht #d0d7de) i.p.v. een witte rgba die op de lichte kaart onzichtbaar zou zijn. */ background: var(--border); } .ud-vol-bar::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; margin-top: -7px; border-radius: 50%; background: var(--accent); border: 2px solid var(--bg-card); box-shadow: 0 2px 6px rgba(0, 0, 0, .45); } .ud-vol-bar::-moz-range-track { height: 6px; border-radius: 999px; background: var(--border); } .ud-vol-bar::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--accent); border: 2px solid var(--bg-card); box-shadow: 0 2px 6px rgba(0, 0, 0, .45); } .ud-vol-bar:focus-visible { outline: none; } .ud-vol-bar:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px rgba(56, 189, 248, .35); } .ud-vol-scale { display: flex; justify-content: space-between; font-size: .62rem; color: var(--text-dim); opacity: .7; margin-top: 2px; } .ud-modal-cancel { margin-top: 16px; width: 100%; min-height: 52px; padding: 12px; border-radius: 11px; background: rgba(255, 255, 255, .04); border: 1px solid var(--border); color: var(--text-dim); font-size: .9rem; font-weight: 700; cursor: pointer; transition: background .15s, color .15s, border-color .15s, transform .1s; } .ud-modal-cancel:active { transform: scale(.97); } .ud-modal-cancel:hover { color: var(--text); border-color: var(--accent); } .ud-modal-actions { display: flex; gap: 10px; margin-top: 20px; } .ud-modal-actions .ud-modal-cancel { margin-top: 0; flex: 1; } .ud-modal-confirm { flex: 1; min-height: 52px; padding: 12px; border-radius: 11px; background: var(--accent); border: 1px solid var(--accent); color: #fff; font-size: .9rem; font-weight: 700; cursor: pointer; transition: background .15s, transform .1s; } .ud-modal-confirm:active { transform: scale(.97); } .ud-modal-confirm:hover { filter: brightness(1.1); } .ud-modal-confirm.danger { background: var(--danger); border-color: var(--danger); } /* Grafiek-analyse-modal: klik op een grafiek → grote weergave + periodekiezer */ .chart-modal { width: min(96vw, 1100px); max-height: 92vh; display: flex; flex-direction: column; } .chart-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .chart-modal-head h3 { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--text); } .chart-modal-close { background: transparent; border: 1px solid var(--border); color: var(--text-dim); border-radius: 10px; width: 34px; height: 34px; font-size: 1.05rem; cursor: pointer; flex: 0 0 auto; transition: all .15s; } .chart-modal-close:hover { color: var(--text); border-color: var(--accent); } .chart-period-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; } .chart-chip { padding: 7px 14px; border-radius: 999px; background: rgba(255, 255, 255, .04); border: 1px solid var(--border); color: var(--text-dim); font-size: .8rem; font-weight: 600; cursor: pointer; transition: all .15s; } .chart-chip:hover { color: var(--text); border-color: var(--accent); } .chart-chip.active { background: var(--accent); border-color: var(--accent); color: #fff; } .chart-modal-canvas-wrap { position: relative; flex: 1 1 auto; min-height: 340px; } .chart-modal-canvas-wrap canvas { width: 100% !important; } .chart-modal-msg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--text-dim); font-size: .9rem; } .chart-stats { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 14px; } .chart-stat { display: flex; flex-direction: column; gap: 2px; min-width: 120px; } .chart-stat .cs-name { display: flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 700; color: var(--text); } .chart-stat .cs-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: 0 0 auto; } .chart-stat .cs-vals { font-size: .72rem; color: var(--text-dim); } /* Klikbaar-hint (vergrootglas) op de mini-grafieken */ .chart-box, .wall-chart { cursor: pointer; position: relative; } .chart-box::after, .wall-chart::after { content: '🔍'; position: absolute; top: 6px; right: 9px; font-size: .72rem; opacity: .45; transition: opacity .15s; pointer-events: none; } .chart-box:hover::after, .wall-chart:hover::after { opacity: .9; } /* Anna-inzichten als drijvende meldingsbalk (onderaan, midden), met een sluitknop (×). Zweeft over alle tabbladen; komt terug als Anna nieuwe inzichten levert (dismiss is per inhoud/timestamp). */ .anna-insight { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 990; max-width: min(920px, calc(100vw - 32px)); padding: 12px 42px 12px 16px; background: linear-gradient(135deg, rgba(88, 166, 255, .16), rgba(163, 113, 247, .16)), var(--card); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 12px; box-shadow: var(--shadow); display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: baseline; font-size: .9rem; line-height: 1.4; animation: annaSlideUp .25s ease; /* Zwevende balk mag nooit knoppen erachter blokkeren (bv. de Wake-knop op de Nodes-tegel onderaan de pagina (bv. de node-Wake-knop) kan overlappen. */ pointer-events: none; } .anna-insight .ai-close, .anna-insight .ai-action-btn { pointer-events: auto; } /* Anna-melding binnen een widget/kaart (bv. Instellingen) — geen zwevende balk maar een rustige, volle-breedte infostrook die netjes in de kaart past. */ .anna-insight.inline { position: static; left: auto; bottom: auto; transform: none; z-index: auto; max-width: none; width: 100%; padding: 9px 12px; margin: 0 0 12px; border-radius: 10px; box-shadow: none; align-items: flex-start; font-size: .85rem; animation: none; /* Zit in de normale flow (geen overlap-risico) — gewoon aanklikbaar. */ pointer-events: auto; } .anna-insight.inline .ai-label { flex: 0 0 auto; padding-top: 1px; } @keyframes annaSlideUp { from { opacity: 0; transform: translate(-50%, 16px); } to { opacity: 1; transform: translate(-50%, 0); } } .anna-insight.ai-out { animation: annaSlideDown .25s ease forwards; } @keyframes annaSlideDown { to { opacity: 0; transform: translate(-50%, 16px); } } .anna-insight .ai-label { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; color: var(--accent); letter-spacing: .3px; white-space: nowrap; } /* Ronde Anna-avatar-indicator in de banner en de header. Geen portret-asset beschikbaar — toont de 🤖-emoji in een ronde badge. */ .anna-avatar { width: 22px; height: 22px; border-radius: 50%; flex: 0 0 auto; box-shadow: 0 0 0 1px rgba(127, 127, 127, .35); display: inline-flex; align-items: center; justify-content: center; } .anna-avatar-emoji { font-size: 13px; line-height: 1; } .anna-status .anna-avatar { width: 18px; height: 18px; } /* UPS op-accu-alarm: bovenaan (i.p.v. onderaan zoals Anna) zodat het niet samenvalt met de Anna-balk, en duidelijk urgenter (rood, pulserend) dan een gewone melding. pointer-events volgt hetzelfde patroon als .anna-insight: de balk zelf blokkeert niets erachter, alleen de sluitknoppen zijn aanklikbaar. */ .ups-alert { position: fixed; left: 50%; /* top wordt dynamisch gezet door positionUpsAlert() in app.js (volgt de werkelijke sticky-headerhoogte, die verschilt per breedte/hamburgermenu); deze waarde is alleen een fallback vóór de eerste JS-render. */ top: 76px; transform: translateX(-50%); z-index: 995; max-width: min(920px, calc(100vw - 32px)); display: flex; flex-wrap: wrap; gap: 8px; pointer-events: none; animation: upsAlertSlideIn .25s ease; } @keyframes upsAlertSlideIn { from { opacity: 0; transform: translate(-50%, -16px); } } .ups-alert-item { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: linear-gradient(135deg, rgba(248, 81, 73, .22), rgba(248, 81, 73, .1)), var(--card); border: 1px solid rgba(248, 81, 73, .5); border-left: 3px solid var(--danger); border-radius: 12px; box-shadow: var(--shadow); font-size: .9rem; color: var(--text); animation: upsAlertPulse 1.6s ease-in-out infinite; pointer-events: auto; } @keyframes upsAlertPulse { 0%, 100% { box-shadow: var(--shadow); } 50% { box-shadow: 0 0 0 3px rgba(248, 81, 73, .3); } } .ups-alert-close { min-height: 32px; min-width: 32px; padding: 0; border: none; background: rgba(255, 255, 255, .1); color: var(--text); border-radius: 8px; cursor: pointer; font-size: 1rem; flex: 0 0 auto; transition: background .15s; } .ups-alert-close:hover { background: rgba(255, 255, 255, .2); } .anna-status .anna-avatar-emoji { font-size: 10px; } .anna-insight .ai-item { display: inline-flex; gap: 6px; align-items: baseline; color: var(--text); min-width: 0; } .anna-insight .ai-item .ai-ico { opacity: .85; } /* Sluitknop (×) rechtsboven om de balk handmatig weg te klikken. */ .anna-insight .ai-close { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; padding: 0; border: none; border-radius: 6px; background: rgba(127, 127, 127, .15); color: var(--text); font-size: 1rem; line-height: 1; cursor: pointer; -webkit-tap-highlight-color: transparent; } .anna-insight .ai-close:hover { background: rgba(127, 127, 127, .3); } /* "Anna leeft"-indicator in de header: 🤖 + bolletje (groen = vers, grijs = verouderd). Verborgen zolang er geen Anna-data is. */ .anna-status { display: inline-flex; align-items: center; gap: 5px; font-size: .95rem; cursor: default; line-height: 1; white-space: nowrap; } .anna-status .as-dot { width: 8px; height: 8px; border-radius: 50%; background: #3fb950; box-shadow: 0 0 6px #3fb950; animation: annaPulse 2.4s ease-in-out infinite; } .anna-status.stale { opacity: .55; } .anna-status.stale .as-dot { background: var(--text-dim); box-shadow: none; animation: none; } @keyframes annaPulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } } .wall-grid { display: grid; /* Grafieken (kol 1) breder dan de camera (kol 2), ~1.6:1 — camera niet te wijd. Volle-breedte rijen (.wall-full) overspannen beide kolommen. */ grid-template-columns: 1.6fr 1fr; /* Rijen: energie(auto) → grafieken/camera(1fr, groeit) → controls/links/systeem(auto). De 1fr-rij vult de resthoogte zodat het scherm helemaal gevuld is (geen lege ruimte onderin) en de camera hoger wordt op tablet/wand. */ grid-template-rows: auto 1fr auto auto auto; min-height: calc(100vh - 72px); min-height: calc(100dvh - 72px); gap: 10px; padding: 5px; max-width: none; width: 100%; box-sizing: border-box; } /* Kiosk/Wall fullscreen: de wall vult exact de viewport (zonder verticale scrollbar), ook op een Surface in kiosk-mode. body krijgt wall-mode zodra de Wall-tab actief is (showTab). fitWall() (app.js) meet de natuurlijke hoogte van de wall-inhoud en schaalt die proportioneel (transform:scale) wanneer hij hoger is dan de viewport — zo blijven álle knoppen en gegevens zichtbaar op elke monitor, zonder scrollbar. Past de inhoud wél, dan vult de groeirij (grafieken/camera) de resthoogte (height:100%). Op mobiel (<769px) blijft de wall gewoon stapelen en scrollen (daar gelden de bestaande media-queries). */ @media (min-width: 769px) { body.wall-mode { overflow: hidden; height: 100dvh; /* De 84px onderruimte is voor de zwevende Anna-balk op scrollende tabs; de wall past exact in de viewport en heeft die reservering niet nodig. */ padding-bottom: 0; display: flex; flex-direction: column; } body.wall-mode #app-content { flex: 1 1 auto; min-height: 0; /* De wall wordt proportioneel geschaald (fitWall) zodat alles past; op desktop is een scrollbar dus nooit nodig. */ overflow: hidden; } body.wall-mode #tab-wall { height: 100%; } body.wall-mode .wall-grid { /* Natuurlijke hoogte; fitWall() zet inline óf transform:scale() (verkleinen) óf height:100% (groeirij vult de rest). */ height: auto; min-height: 0; transform-origin: top center; will-change: transform; } /* ── Compacte wall: alles kleiner zodat de wall de viewport vult (rand-tot-rand, geen schaling/marges) i.p.v. te hoog te worden. De controls passen op één rij (min-width 220px), de flip-klok/tegels/camera/grafieken krimpen mee, en de groeirij (grafieken/camera) vult de rest via height:100%. Alleen op extreem kleine vensters (<~1000px hoog) schaalt fitWall() als laatste redmiddel. */ body.wall-mode .wall-grid { gap: 8px; } /* Tijdens de fitWall()-meting klappen de grafieken in (flexibel), zodat de 1fr-groeirij naar zijn 140px-vloer zakt en de meting niet opgeblazen wordt. */ body.wall-mode .wall-grid.fit-measuring .wall-chart { height: 0; min-height: 0; overflow: hidden; } /* Controls: kleinere kaarten zodat ze op één rij passen (210px minimaal, 5 kaarten + radiokaart = ~1280px), met compacte interne kolommen. */ body.wall-mode .wall-ctrls-wrap { gap: 10px; } body.wall-mode .wall-ctrl-card { flex: 1 1 210px; min-width: 210px; max-width: none; min-height: 0; gap: 8px; padding: 10px; } body.wall-mode .wall-ctrl-card .ctrl-info { min-width: 70px; gap: 6px; } body.wall-mode .wall-ctrl-card .ctrl-icon { width: 40px; height: 40px; font-size: 1.35rem; } body.wall-mode .wall-ctrl-card .ctrl-name { font-size: .84rem; } body.wall-mode .wall-ctrl-card .ctrl-state { font-size: .7rem; padding: 2px 8px; } body.wall-mode .wall-ctrl-card .ctrl-temp { font-size: .68rem; } body.wall-mode .wall-ctrl-card .ctrl-reason { font-size: .66rem; /* Uitleg is bijzaak: max 2 regels zodat de kaart laag blijft. */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } body.wall-mode .wall-ctrl-card .ctrl-setpoint { width: 30px; gap: 3px; } body.wall-mode .wall-ctrl-card .sp-btn { min-width: 28px; min-height: 20px; padding: 2px; font-size: .62rem; border-radius: 7px; } /* Lounge-verwarming F1/F2/F3: grotere aantikbare knoppen (ook in wall-mode), want '1 · laag' is op 20px te klein om te raken. */ body.wall-mode .wall-ctrl-card .ctrl-heater-level { width: 78px; gap: 5px; } body.wall-mode .wall-ctrl-card .sp-btn.heater-lvl { min-height: 38px; padding: 6px 8px; font-size: .74rem; } body.wall-mode .wall-ctrl-card .ctrl-fan-speed { width: 56px; } body.wall-mode .wall-ctrl-card .ctrl-split { width: 74px; gap: 6px; } body.wall-mode .wall-ctrl-card .ctrl-split>button { min-height: 28px; padding: 4px 4px; font-size: .68rem; } body.wall-mode .wall-ctrl-card .ctrl-window { font-size: .66rem; padding: 4px 8px; } /* Radiokaart naast de controls. */ body.wall-mode .wall-radio-card { flex: 1 1 170px; min-width: 150px; max-width: 210px; padding: 10px; gap: 8px; } body.wall-mode .wall-radio-card .radio-btns { gap: 8px; } body.wall-mode .radio-btn { padding: 5px; gap: 4px; font-size: .68rem; } /* Energie-rij: compactere flip-klok + stat-tegels. */ body.wall-mode .flip-wrap { gap: 8px; } body.wall-mode .flip-card { min-width: 56px; height: 64px; border-radius: 10px; } body.wall-mode .flip-card>span { font-size: 2.3rem; } body.wall-mode .wall-stat-big { padding: 8px 10px; } body.wall-mode .wall-stat-big .val { font-size: 1.6rem; } body.wall-mode .wall-stat-big .lbl { font-size: .68rem; margin-top: 3px; } body.wall-mode .wall-stat-big .sub { font-size: .68rem; } /* Systeem-strip + shortcuts: compacter. */ body.wall-mode .wall-mini { padding: 6px; } body.wall-mode .wall-mini .val { font-size: 1.05rem; } body.wall-mode .wall-mini .lbl { font-size: .58rem; } /* Shortcuts bewust NIET compacter: zelfde 52px touch-target als de tabs. */ /* Grafieken: strakke subplots binnen het paneel; op desktop vult de subplot de begrensde groeirij (height:auto + grid-stretch), geen vaste min-hoogte. */ body.wall-mode .wall-chart { height: auto; min-height: 0; padding: 0; } /* Camera: base min-height is 220px; die mag de groeirij niet opblazen. De groeirij zelf heeft al een 100px-vloer (JS), dus de camera vult gewoon mee. */ body.wall-mode .wall-cam { min-height: 0; } /* Weer-inline in de energie-rij: dit was het hoogste element (icon 2rem + temp 1.6rem + 3 forecast-regels). Compacter zodat de rij ~90px blijft. De maten staan inline in de HTML (app.js), vandaar !important. */ body.wall-mode .wall-weer-inline { gap: 2px; } body.wall-mode .wall-weer-inline>div { line-height: 1.15; } body.wall-mode .wall-weer-inline>div:nth-child(1) { font-size: .62rem !important; margin-bottom: 1px !important; } body.wall-mode .wall-weer-inline>div:nth-child(2) { font-size: 1.3rem !important; } body.wall-mode .wall-weer-inline>div:nth-child(3) { font-size: 1.05rem !important; } body.wall-mode .wall-weer-inline>div:nth-child(n+4) { font-size: .64rem !important; margin-top: 2px !important; } } .wall-full { grid-column: span 2; } /* Weer-kaart die op mobiel ná de camera verschijnt; op desktop verborgen. */ .wall-weer-mobile { display: none; } .wall-stat-big { text-align: center; padding: 12px 14px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); display: flex; flex-direction: column; justify-content: center; } .wall-stat-big .val { font-size: 2.2rem; font-weight: 800; line-height: 1.1; } .wall-stat-big .lbl { font-size: .8rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: .1em; margin-top: 4px; } .wall-stat-big .sub { font-size: .75rem; color: var(--text-dim); margin-top: 2px; } .wall-stat-big .sub.e-accu-runtime { color: #a78bfa; font-weight: 600; } .wall-stat-big .sub.e-accu-runtime:empty { display: none; } /* Accu-kaart: trend-pijl naast het percentage + SOC-balkje */ .wall-stat-big .accu-main { display: flex; align-items: baseline; justify-content: center; gap: 4px; } .wall-stat-big .accu-trend { font-size: 1.3rem; line-height: 1; } .wall-stat-big .accu-bar { margin-top: 7px; height: 5px; border-radius: 3px; background: var(--border); overflow: hidden; } .wall-stat-big .accu-bar-fill { height: 100%; border-radius: 3px; transition: width .6s ease, background .6s ease; } /* Subplot: flex-column zodat de inline titel boven het canvas staat en het canvas de rest van de subplot vult (Chart.js responsive vult de flexruimte). Definitieve height (niet min-height) zodat Chart.js' responsive sizing op mobiel niet in een feedback-loop groeit (auto-hoogte + flex:1 canvas). */ .wall-chart { display: flex; flex-direction: column; min-width: 0; height: 150px; overflow: hidden; } .wall-chart .wall-chart-title { flex: 0 0 auto; font-size: .66rem; font-weight: 700; letter-spacing: .02em; color: var(--text-dim); padding: 1px 4px 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wall-chart canvas { flex: 1 1 auto; min-height: 0; max-height: 100%; } /* Grafieken (2x2) links + camerafeed rechts, naast elkaar op desktop. Eén paneel met 4 subplots i.p.v. 4 losse kaarten: rustiger en lager. */ .wall-charts-row { grid-column: 1; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 8px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px; } .wall-cam-row-el { grid-column: 2; } .wall-cam { position: relative; height: 100%; min-height: 220px; background: #000; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .wall-cam-slot, .wall-cam video-stream, .wall-cam video { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; } .wall-cam .wall-cam-bar { position: absolute; top: 6px; left: 8px; right: 8px; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 8px; } .wall-cam .wall-cam-label { font-size: .7rem; color: #fff; background: rgba(0, 0, 0, .55); padding: 2px 8px; border-radius: 8px; } .wall-cam .wall-cam-tabs { display: flex; gap: 4px; } .wall-cam .wall-cam-tab { font-size: .65rem; color: #fff; background: rgba(0, 0, 0, .45); border: 1px solid rgba(255, 255, 255, .18); border-radius: 8px; padding: 2px 8px; cursor: pointer; } .wall-cam .wall-cam-tab.active { background: #2563eb; border-color: transparent; } .wall-cam .wall-cam-msg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--text-dim); font-size: .85rem; } /* go2rtc's ingebouwde status/mode-overlay verbergen (schone muurweergave). */ .wall-cam .info { display: none !important; } /* 24u flip-clock */ .flip-wrap { display: flex; gap: 12px; } .flip-card { position: relative; background: var(--flip-bg); border-radius: 14px; min-width: 96px; height: 108px; display: flex; align-items: center; justify-content: center; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08), 0 8px 24px rgba(0, 0, 0, .55); } .flip-card>span { font-size: 4rem; font-weight: 700; color: var(--flip-fg); line-height: 1; letter-spacing: 1px; font-variant-numeric: tabular-nums; } .flip-card::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: rgba(0, 0, 0, .12); transform: translateY(-1px); z-index: 2; } .flip-sec { position: absolute !important; bottom: 6px; right: 10px; font-size: .9rem !important; font-weight: 600 !important; color: #6b7280 !important; letter-spacing: 0 !important; } .wall-row { display: flex; gap: 12px; flex-wrap: wrap; } /* Nacht-dimming (burn-in-preventie voor altijd-aan wandscherm). De filter staat bewust op #app-content (+ header/overlays apart) i.p.v. op : een filter op body maakt een containing block waardoor position:fixed overlays (toasts, Anna-balk) t.o.v. de hele pagina i.p.v. het scherm gaan. */ body.night #app-content, body.night header, body.night #action-toasts, body.night #anna-insight { filter: brightness(.55); transition: filter 2s ease; } .wall-mini { flex: 1; min-width: 140px; text-align: center; padding: 12px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; } .wall-mini .val { font-size: 1.5rem; font-weight: 700; } .wall-mini .lbl { font-size: .65rem; color: var(--text-dim); } /* Material-icoon in een sys-strip header (lbl is inline tekst; houd het icoon op dezelfde lijn/maat als de letters ernaast). */ .wall-mini .lbl .mi { font-size: .78rem; vertical-align: -2px; } .energy-alerts { display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; } .energy-alerts:empty { display: none; } .energy-alert { display: flex; align-items: center; gap: 10px; border-radius: 8px; padding: 10px 14px; font-size: .82rem; font-weight: 600; border: 1px solid #f85149; background: rgba(248, 81, 73, .12); color: #f85149; } .energy-alert.ea-warn { border-color: #fbbf24; background: rgba(251, 191, 36, .12); color: #fbbf24; } .energy-alert.ea-info { border-color: #60a5fa; background: rgba(96, 165, 250, .12); color: #60a5fa; } .energy-alert .ea-detail { font-weight: 400; color: var(--text-dim); } .wall-node-wake { font-size: .72rem; font-weight: 700; min-height: 36px; padding: 8px 14px; border-radius: 8px; background: rgba(74, 222, 128, .15); color: #4ade80; border: 1px solid #4ade80; cursor: pointer; white-space: nowrap; transition: background .15s, transform .1s; } .wall-node-wake:active { transform: scale(.95); } .wall-node-wake:hover { background: rgba(74, 222, 128, .3); } @media (max-width: 768px) { /* minmax(0, 1fr) i.p.v. 1fr: voorkomt dat de kolom uitrekt naar de min-content van het breedste kind (grid "blowout" → horizontale scroll). */ .wall-grid { grid-template-columns: minmax(0, 1fr); /* Portret/mobiel: alles stapelt en scrollt -> geen vaste hoogte/rijen. */ grid-template-rows: none; min-height: 0; } .wall-full, .wall-row { grid-column: span 1; min-width: 0; } /* Weer verschijnt op mobiel ná de camera (inline-variant is dan verborgen). */ .wall-weer-inline { display: none; } .wall-weer-mobile { display: block; } /* Grafieken stapelen enkel-koloms; camera als 16:9-tegel. */ .wall-charts-row { grid-column: 1; grid-template-columns: 1fr; grid-template-rows: none; } .wall-cam-row-el { grid-column: 1; min-width: 0; /* grid-item niet laten uitrekken naar cam-intrinsiek */ overflow: hidden; /* camerabeeld nooit buiten de kolom laten bleeden */ } .wall-cam { height: auto; aspect-ratio: 16 / 9; max-width: 100%; } /* Mobiele volgorde: energie → camera → knoppen → grafieken → weer → rest. */ .wall-energy-row { order: 0; } .wall-day-totals { align-items: stretch; flex-direction: column; gap: 6px; min-width: 0; } .wall-day-summary { flex-direction: column; } .wall-day-values { gap: 6px; min-width: 0; width: 100%; } .wall-day-values>div { flex: 1 1 0; justify-content: center; min-width: 0; } #wall-cam-row { order: 1; } .wall-ctrls-row { order: 2; } #wall-charts-row { order: 3; } .wall-weer-mobile { order: 4; } .wall-shortcuts { order: 5; } .wall-sys-row { order: 6; } /* Flip-klok schaalt mee op telefoon i.p.v. de vaste 96x108px. */ .flip-clock { flex: 1 1 100% !important; } .flip-wrap { gap: 8px; } .flip-card { min-width: 0; flex: 1; max-width: 150px; height: 96px; border-radius: 10px; } .flip-card>span { font-size: 3.4rem; } .flip-sec { font-size: .75rem !important; } /* Energie-tegels: vaste wrap (2 per rij) met min-width:0, zodat de rij niet verspringt wanneer een waarde van 3 naar 4 cijfers gaat. */ .wall-row>.wall-stat-big, .wall-row>.wall-mini:not(.flip-clock) { flex: 1 1 44% !important; min-width: 0; } } /* Smalle telefoons: control-kaarten vullen de volledige breedte (1 per rij) zodat ze niet klemmen; de split-knoppen (Aan/Uit + Auto/Handmatig) blijven binnen elke kaart naast elkaar staan. */ @media (max-width: 560px) { .wall-ctrls-wrap .wall-ctrl-card { flex: 1 1 100%; max-width: none; } /* Radiokaart ook full-width op telefoon, net als de control-kaarten */ .wall-ctrls-wrap .wall-radio-card { flex: 1 1 100%; max-width: none; } } /* ── CAMERA FULLSCREEN OVERLAY (deurbel auto-maximize) ─────────────────── */ /* Bij persoon-detectie op de deurbel: fullscreen video-overlay die na 30s automatisch sluit. Fade-in/out animaties voor smooth UX. */ .cam-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 9999; background: rgba(0, 0, 0, 0.92); display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; animation: cam-overlay-in 0.32s ease-out; } .cam-overlay.cam-overlay-out { animation: cam-overlay-out 0.32s ease-in; opacity: 0; } .cam-overlay-label { color: #fff; font-size: 1.1rem; font-weight: 500; margin-bottom: 16px; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6); } .cam-overlay-slot { width: 97vw; max-width: none; height: 88vh; max-height: none; background: #000; border-radius: 8px; overflow: hidden; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5); border: 4px solid #ff0000; animation: cam-overlay-blink 1s step-start infinite; } @keyframes cam-overlay-blink { 0%, 49% { border-color: #ff0000; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 24px 4px rgba(255, 0, 0, 0.7); } 50%, 100% { border-color: transparent; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5); } } .cam-overlay-slot video-stream, .cam-overlay-slot video { width: 100%; height: 100%; display: block; } .cam-overlay-close { position: absolute; top: 24px; right: 24px; width: 44px; height: 44px; border-radius: 50%; border: none; background: rgba(255, 255, 255, 0.15); color: #fff; font-size: 28px; line-height: 1; cursor: pointer; transition: background 0.2s; backdrop-filter: blur(8px); } .cam-overlay-close:hover { background: rgba(255, 255, 255, 0.25); } @keyframes cam-overlay-in { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } } @keyframes cam-overlay-out { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.95); } } /* Mobiel: kleinere padding, label bovenaan */ @media (max-width: 768px) { .cam-overlay-slot { width: 97vw; height: 80vh; } .cam-overlay-label { font-size: 1rem; margin-bottom: 12px; } .cam-overlay-close { top: 16px; right: 16px; width: 40px; height: 40px; font-size: 24px; } } /* ── COMPACTE DESKTOP-WEERGAVE (data-density="desktop") ─────────────────── Standaard is elke knop hier groot/aantikbaar, want dit dashboard hangt primair als wand-tablet (touchscreen). Vanaf een muis/toetsenbord-desktop is die ruimte verspilling; deze knop (📱/🖥️ in de header) schakelt naar een compactere variant van dezelfde knoppen, zonder de tablet-default te wijzigen. Zie toggleDensity() in app.js. */ :root[data-density="desktop"] .tab-btn { padding: 6px 14px; min-height: 34px; font-size: .78rem; } :root[data-density="desktop"] .wall-ctrl-card .sp-btn { min-height: 30px; padding: 4px; font-size: .72rem; } :root[data-density="desktop"] .wall-ctrl-card .ctrl-split>button { min-height: 30px; padding: 4px 6px; font-size: .72rem; } :root[data-density="desktop"] .wall-radio-card { max-width: 190px; padding: 10px; gap: 8px; } :root[data-density="desktop"] .radio-btn { padding: 4px; font-size: .68rem; gap: 3px; } :root[data-density="desktop"] .ud-spk-btn { padding: 8px; font-size: .72rem; gap: 4px; } :root[data-density="desktop"] .ud-spk-btn .spk-emoji { font-size: 1.3rem; } :root[data-density="desktop"] .ud-modal-cancel, :root[data-density="desktop"] .ud-modal-confirm { min-height: 38px; padding: 8px; font-size: .8rem; } /* Power-tab */ :root[data-density="desktop"] .pwr-node-btn { min-height: 32px; padding: 6px; font-size: .74rem; } :root[data-density="desktop"] .pwr-sp-btn { min-height: 32px; padding: 4px 0; font-size: .68rem; } :root[data-density="desktop"] .pwr-dev-toggle, :root[data-density="desktop"] .pwr-dev-auto { min-height: 32px; padding: 6px; font-size: .72rem; } :root[data-density="desktop"] .pwr-radio-btn, :root[data-density="desktop"] .pwr-radio-stop, :root[data-density="desktop"] .pwr-big { min-height: 34px; padding: 7px 12px; font-size: .78rem; } /* Ramen / Cleaning */ :root[data-density="desktop"] .win-btn { min-height: 34px; padding: 8px 8px; font-size: .78rem; } :root[data-density="desktop"] .vac-btn { min-height: 32px; padding: 6px 6px; font-size: .74rem; } /* Instellingen */ :root[data-density="desktop"] .cam-report-btn { min-height: 30px; padding: 4px 10px; font-size: 11px; } :root[data-density="desktop"] .tariff-save-btn { min-height: 34px; padding: 6px 16px; font-size: 12px; } /* Catalogus / shortcuts */ :root[data-density="desktop"] .chip, :root[data-density="desktop"] .kwh-chip { min-height: 28px; padding: 5px 12px; font-size: .74rem; } :root[data-density="desktop"] .short-btn { min-height: 40px; padding: 6px 4px; font-size: .62rem; } :root[data-density="desktop"] .wall-shortcut { min-height: 34px; padding: 6px 14px; font-size: .78rem; } :root[data-density="desktop"] .wall-shortcut .mi { font-size: 1.05rem; } :root[data-density="desktop"] .wall-node-wake { min-height: 24px; padding: 3px 9px; font-size: .62rem; } :root[data-density="desktop"] .tariff-field input, :root[data-density="desktop"] .tariff-field select { min-height: 30px; padding: 7px 9px; font-size: 13px; } /* Tablet-wall: gebruik extra verticale ruimte voor de kerninformatie, zonder de compacte desktopmodus of de mobiele stapeling te veranderen. */ @media (min-width: 769px) { :root:not([data-density="desktop"]) .tabs { gap: 6px; } :root:not([data-density="desktop"]) .tab-btn { min-height: 50px; padding: 11px 18px; border: 1px solid var(--border); border-radius: 10px; background: rgba(255, 255, 255, .035); box-shadow: 0 2px 5px rgba(0, 0, 0, .14); } :root:not([data-density="desktop"]) .tab-btn:hover { background: var(--card-hover); border-color: var(--accent); } :root:not([data-density="desktop"]) .tab-btn.active { color: var(--text); background: rgba(88, 166, 255, .16); border-color: var(--accent); box-shadow: 0 0 0 1px rgba(88, 166, 255, .18), 0 3px 8px rgba(0, 0, 0, .18); } :root:not([data-density="desktop"]) .tab-btn:active, :root:not([data-density="desktop"]) .wall-shortcut:active { transform: translateY(1px); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .2); } :root:not([data-density="desktop"]) .wall-shortcuts { gap: 10px; } :root:not([data-density="desktop"]) .wall-shortcut { min-height: 50px; padding: 11px 18px; border-radius: 10px; background: var(--bg-card); color: var(--text); font-size: .9rem; box-shadow: 0 2px 5px rgba(0, 0, 0, .14); } :root:not([data-density="desktop"]) .wall-shortcut:hover { background: var(--card-hover); border-color: var(--accent); } :root:not([data-density="desktop"]) body.wall-mode .wall-stat-big { padding: 14px 12px; } :root:not([data-density="desktop"]) body.wall-mode .wall-stat-big .val { font-size: 1.9rem; } :root:not([data-density="desktop"]) body.wall-mode .wall-stat-big .lbl { font-size: .76rem; } :root:not([data-density="desktop"]) body.wall-mode .wall-stat-big .sub { font-size: .74rem; } :root:not([data-density="desktop"]) body.wall-mode .wall-ctrl-card { min-height: 148px; padding: 14px; } :root:not([data-density="desktop"]) body.wall-mode .wall-ctrl-card .ctrl-info { align-items: flex-start; text-align: left; } :root:not([data-density="desktop"]) body.wall-mode .wall-ctrl-card .ctrl-icon { width: 48px; height: 48px; font-size: 1.55rem; } :root:not([data-density="desktop"]) body.wall-mode .wall-ctrl-card .ctrl-split { width: 86px; } :root:not([data-density="desktop"]) body.wall-mode .wall-ctrl-card .ctrl-split>button { min-height: 34px; font-size: .74rem; } :root:not([data-density="desktop"]) body.wall-mode .wall-ctrl-card .ctrl-setpoint { width: 36px; } :root:not([data-density="desktop"]) body.wall-mode .wall-ctrl-card .sp-btn { min-width: 32px; min-height: 25px; font-size: .68rem; } :root:not([data-density="desktop"]) body.wall-mode .wall-ctrl-card .sp-btn.heater-lvl { min-height: 40px; padding: 7px 8px; font-size: .8rem; } }