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

Dashboard Studio 2.5.0: phone sizes Small, Medium, Large and Row with a phone design per card

Browse Source 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Mel van Veen
2026-10-31 17:30:03 +01:00
parent 0eef8593c8
commit 3b2cbbc96c
7 changed files with 503 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dashboard_studio/web/style.css
+86
View File
@@ -2056,3 +2056,89 @@ button.fader-input { cursor: pointer; }
.lb-acts { margin-top: 6px; }
}
@container (min-height: 260px) and (min-width: 180px) { .lb-ring { display: grid; height: min(50%, 170px); } }
/* ================================================================ phone dashboards: Small cards and Rows
Each card's summary: an icon, the one figure that matters, a name, and at most one control.
A tap anywhere does what the card does (phc-tap lies under everything); controls sit on top. */
.phc { position: relative; height: 100%; min-width: 0; color: var(--d-text); }
.phc-tap { position: absolute; inset: calc(-1 * var(--c-pad)); z-index: 0; background: none; border-radius: inherit; }
.phc-top, .phc-bottom, .phc-text, .phc-ico, .phc-art, .phc-val { position: relative; z-index: 1; pointer-events: none; }
.phc-ctl { position: relative; z-index: 2; display: flex; align-items: center; gap: 6px; flex: none; }
.phc-ico { display: flex; font-size: var(--c-ico); color: var(--d-text-2); }
.phc.on .phc-ico { color: var(--phc-tint, var(--d-accent)); }
.w.lit-lamp .phc .phc-ico, .w.lit-on .phc .phc-ico { color: inherit; }
/* plain and outline surfaces keep the card's own background: the icon lights up instead */
.surface-plain .w.lit-lamp .phc .phc-ico, .surface-outline .w.lit-lamp .phc .phc-ico { color: color-mix(in srgb, var(--lamp, #e3a12f) 70%, #b77a10); }
.surface-plain .w.lit-on .phc .phc-ico, .surface-outline .w.lit-on .phc .phc-ico { color: var(--accent-w); }
.phc-art { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; flex: none; }
.phc-btn { width: var(--c-ctl); height: var(--c-ctl); border-radius: 50%; display: grid; place-items: center; background: var(--d-fill); font-size: 17px; flex: none; }
.phc-btn.wide { width: auto; padding: 0 14px; border-radius: 99px; font-size: var(--c-fs-meta); font-weight: 600; }
.phc-btn:disabled { opacity: .45; }
.phc-btn.wide { display: inline-flex; gap: 6px; }
.phc-s .phc-btn.wide { width: 34px; padding: 0; justify-content: center; }
.phc-s .phc-btn.wide span { display: none; }
.phc-bin { display: flex; }
.phc-val { font-size: 30px; font-weight: 400; letter-spacing: -0.03em; line-height: 1.05; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.phc-val small { font-size: .5em; color: var(--d-text-2); margin-left: 3px; letter-spacing: 0; }
.phc-word { font-size: 21px; letter-spacing: -0.02em; }
.phc-name { font-size: var(--c-fs-body); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.phc-sub { font-size: var(--c-fs-meta); color: var(--d-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.phc-meter { display: block; height: 4px; border-radius: 2px; background: var(--d-fill); margin: 5px 0 6px; overflow: hidden; }
.phc-meter i { display: block; height: 100%; border-radius: inherit; background: var(--phc-tint, var(--d-accent)); }
.tone-ok .phc-val { color: var(--ok); } .tone-ok .phc-meter i { background: var(--ok); }
.tone-warn .phc-val { color: var(--warn); } .tone-warn .phc-meter i { background: var(--warn); }
.tone-crit .phc-val { color: var(--crit); } .tone-crit .phc-meter i { background: var(--crit); }
.tone-accent .phc-val { color: var(--d-accent); }
.w.lit-lamp .phc .phc-val, .w.lit-on .phc .phc-val, .w.lit-lamp .phc-val small, .w.lit-lamp .phc-sub { color: inherit; }
.phc-clock .time { font: inherit; letter-spacing: inherit; }
.phc-clock .date { font-size: var(--c-fs-meta); color: var(--d-text-2); letter-spacing: 0; margin-top: 2px; }
/* Small (and Large): the icon and control on top, the figure and name at the bottom */
.phc-s, .phc-l { display: flex; flex-direction: column; justify-content: space-between; gap: 6px; }
.phc-s .phc-top, .phc-l .phc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; min-height: var(--c-ctl); }
.phc-s .phc-ctl .phc-btn { width: 34px; height: 34px; font-size: 16px; }
.phc-s .phc-bottom, .phc-l .phc-bottom { display: flex; flex-direction: column; min-width: 0; }
.phc-s .phc-sub, .phc-l .phc-sub { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.phc-s .phc-val + .phc-name, .phc-s .phc-meter + .phc-name { margin-top: 2px; }
/* Row: one line: icon, name and what it says, the figure, a control */
.phc-row { display: flex; align-items: center; gap: 12px; }
.phc-row .phc-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.phc-row .phc-val { flex: none; max-width: 45%; font-size: 24px; }
.phc-row .phc-word { font-size: 17px; }
.phc-row .phc-art { width: 36px; height: 36px; }
.phc-row .phc-clock .date { display: none; }
.w.ph-row .w-body { padding-top: 0; padding-bottom: 0; justify-content: center; }
/* a light as a Row: the fader the group card uses, filling the card */
.w.ph-row .w-body:has(.phc-light) { padding: 0; }
.phc-light { height: 100%; }
.phc-light .lf-row { height: 100%; grid-template-columns: auto minmax(0, 1fr) auto auto; padding: 0 10px 0 12px; border-radius: inherit; }
.phc-light .lt-ico { position: relative; z-index: 2; }
.phc-l .phc-ico { font-size: 34px; }
.phc-l .phc-val { font-size: 64px; }
.phc-l .phc-word { font-size: 34px; }
.phc-l .phc-name { font-size: 18px; }
.phc-l .phc-sub { font-size: var(--c-fs-body); }
.phc-l .phc-meter { height: 6px; border-radius: 3px; }
/* Medium: the icon, name and control on one line, the figure large below */
.phc-m { display: flex; flex-direction: column; justify-content: space-between; gap: 6px; }
.phc-m .phc-top { display: flex; align-items: center; gap: 12px; min-width: 0; }
.phc-m .phc-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.phc-m .phc-bottom { display: flex; flex-direction: column; min-width: 0; }
.phc-m .phc-val { font-size: 42px; }
.phc-m .phc-word { font-size: 26px; }
/* Medium cards drawn in full: what doesn't fit two rows on a phone makes way */
.w.ph-m .appl-fact ~ .appl-fact { display: none; }
.w.ph-m .f1-tabs, .w.ph-m .f1-list { display: none; }
.w.ph-m .fc-days { display: none; }
.w.ph-m .graph .legend > span ~ span { display: none; }
/* cards that draw edge to edge (camera, photos) still get their padding as a summary */
.w-body.flush:has(> .phc) { padding: var(--c-pad); }
.w.ph-row .w-body.flush:has(> .phc) { padding: 0 var(--c-pad); }
/* nothing to show but a name (a button): the name, larger, in the middle */
.phc-m:not(:has(.phc-bottom)) { justify-content: center; }
.phc-m:not(:has(.phc-bottom)) .phc-name { font-size: 20px; }
.phc-l:not(:has(.phc-val)) .phc-name { font-size: 24px; }