veenm/ha-dashboard-studio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Dashboard Studio 1.5.0: conditional widgets, appliance card, multi-player media

Browse Source 
- Visibility conditions on every widget (is / is not / above / below,
  all or any); rows that only held hidden widgets close up in view mode
- Appliance card for washer, dryer and dishwasher: status or power
  based, time left, ready time, progress and program; hides when off
- Media card controls several players with a switcher and album art
- Dutch translations and docs for the new features

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Mel van Veen
2026-10-25 22:24:22 +01:00
parent e39a3d93f7
commit 9e7e7beaa0
8 changed files with 317 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dashboard_studio/web/style.css
+35
View File
@@ -432,6 +432,41 @@ body.kiosk #tabnav { top: 6px; max-height: calc(100vh - 20px); }
.waste-day.soon { color: var(--d-accent); }
@container (max-width: 300px) { .waste-row .st { display: none; } }
/* visibility */
.w.cond-hidden { opacity: 0.5; }
.w-hidden { position: absolute; left: 8px; bottom: 8px; z-index: 3; display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 99px; font-size: 12px; font-weight: 600; background: var(--surface); color: var(--text); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); }
.rule { padding: 8px; border-radius: 10px; background: var(--fill); margin-bottom: 8px; display: flex; flex-direction: column; gap: 6px; }
.rule .input { background: var(--surface); }
.rule-row { display: flex; gap: 6px; }
.rule-row select { flex: 1.1; }
.rule-row input { flex: 1; min-width: 0; }
.rule-row .btn { flex: none; }
.vis-status { display: flex; align-items: center; gap: 6px; margin: 0 2px 10px; color: var(--text-2); }
/* media players */
.mp { gap: 8px; }
.mp-switch { display: flex; gap: 6px; overflow-x: auto; flex: none; scrollbar-width: none; }
.mp-switch .chip { flex: none; gap: 6px; }
.mp-switch .chip[aria-selected="true"] { background: var(--d-text); color: var(--d-tile); font-weight: 600; }
.mp-now { display: flex; align-items: center; gap: 12px; min-height: 0; flex: 1; }
.mp-art { width: clamp(48px, 32cqh, 96px); aspect-ratio: 1; border-radius: 10px; object-fit: cover; flex: none; background: var(--d-fill); }
.mp-art.ph { display: grid; place-items: center; font-size: 28px; color: var(--d-text-2); }
.mp-meta { display: flex; flex-direction: column; min-width: 0; }
.eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 11px; }
.eq i { width: 3px; background: currentColor; border-radius: 1px; animation: eq 0.9s ease-in-out infinite; }
.eq i:nth-child(1) { height: 50%; } .eq i:nth-child(2) { height: 100%; animation-delay: -0.3s; } .eq i:nth-child(3) { height: 70%; animation-delay: -0.6s; }
@keyframes eq { 0%, 100% { transform: scaleY(0.4); transform-origin: bottom; } 50% { transform: scaleY(1); transform-origin: bottom; } }
@container (max-height: 170px) { .mp-art { display: none; } }
/* appliance */
.appl { display: flex; flex-direction: column; height: 100%; gap: 8px; justify-content: space-between; }
.appl-status { margin-left: auto; font-size: 13px; font-weight: 600; padding: 3px 10px; border-radius: 99px; background: var(--d-fill); white-space: nowrap; }
.appl.phase-running .appl-status { background: var(--d-accent); color: #fff; }
.appl.phase-done .appl-status { background: color-mix(in srgb, var(--ok) 18%, transparent); color: var(--ok); }
.appl-big { font-size: 22px; font-weight: 700; }
.appl-big .wt { font-size: 14px; font-weight: 400; }
.appl .car-fill { background: var(--d-accent); }
/* photos */
.photos { position: absolute; inset: 0; background: #000; overflow: hidden; }
.ph-layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: var(--fit, cover); opacity: 0; transition: opacity 1.2s ease; }