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

Dashboard Studio 2.4.1: compact litter box card

Browse Source 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Mel van Veen
2026-10-31 16:07:31 +01:00
parent 0b2027083a
commit db6684b787
6 changed files with 76 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dashboard_studio/web/style.css
+43 -20
View File
@@ -1575,31 +1575,46 @@ body.in-haven #btn-new { display: none; }
.appl-fact { font-size: var(--c-fs-meta); font-weight: 500; }
.appl-big { font-size: clamp(22px, 17cqh, 34px); }
/* litter box: what it's doing in words, today's figures, clean now and auto clean */
.lb .appl-text { gap: 4px; }
.lb .appl-main-text { flex-wrap: nowrap; overflow: hidden; }
.lb .appl-big { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb.phase-cleaning .appl-big { color: var(--d-accent); }
.lb.phase-attention .appl-big { color: var(--warn); }
.lb.phase-cleaning .appl-ico { color: var(--d-accent); }
.lb.phase-attention .appl-ico { color: var(--warn); }
/* litter box: compact; icon, name and controls on top, what it's doing, today's figures in one line */
.lb { display: flex; align-items: stretch; gap: 16px; height: 100%; min-width: 0; }
.lb-ring { display: none; }
.lb-ring > svg { transform: none; }
.lb-spin { transform-origin: 50px 50px; animation: lb-spin 1.6s linear infinite; }
@keyframes lb-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .lb-spin { animation: none; } }
.lb-figs { display: flex; gap: 18px; min-width: 0; }
.lb-fig { display: flex; flex-direction: column; min-width: 0; }
.lb-fig b { font-size: var(--c-fs-mid); font-weight: 400; line-height: 1.15; white-space: nowrap; }
.lb-s { display: none; }
.lb-fig span { font-size: var(--c-fs-meta); color: var(--d-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-clean { flex: none; display: inline-flex; align-items: center; gap: 6px; height: var(--c-ctl); padding: 0 14px; border-radius: 99px; background: var(--d-fill); font-size: var(--c-fs-body); font-weight: 600; }
.lb-body { flex: 1; min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "ico name name" "state state acts" "figs figs figs" "warn warn warn";
align-content: space-between; align-items: center; column-gap: 8px; row-gap: 2px; }
.lb-ico { grid-area: ico; display: flex; font-size: var(--c-ico); color: var(--d-text-2); }
.lb-name { grid-area: name; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-acts { grid-area: acts; display: flex; align-items: center; gap: 8px; }
.lb-state { grid-area: state; min-width: 0; font-size: clamp(20px, 16cqh, 32px); font-weight: 400; letter-spacing: -0.03em; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-figs { grid-area: figs; min-width: 0; display: flex; flex-wrap: wrap; column-gap: 12px; font-size: var(--c-fs-meta); color: var(--d-text-2); }
.lb-fig { white-space: nowrap; }
.lb-fig b { font-size: var(--c-fs-body); font-weight: 500; color: var(--d-text); }
.lb-warn { grid-area: warn; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; min-width: 0; }
.lb.phase-cleaning .lb-state, .lb.phase-cleaning .lb-ico, .lb.phase-cleaning .appl-ico { color: var(--d-accent); }
.lb.phase-attention .lb-state, .lb.phase-attention .lb-ico, .lb.phase-attention .appl-ico { color: var(--warn); }
.lb-clean { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: var(--c-ctl); min-width: var(--c-ctl); padding: 0 12px; border-radius: 99px; background: var(--d-fill); font-size: var(--c-fs-meta); font-weight: 600; }
.lb-clean:disabled { opacity: .5; cursor: default; }
@media (hover: hover) { .lb-clean:not(:disabled):hover { background: color-mix(in srgb, var(--d-text) 14%, transparent); } }
.lb-auto { flex: none; display: inline-flex; align-items: center; gap: 8px; font-size: var(--c-fs-meta); color: var(--d-text-2); }
.lb-fig .unit { font-size: var(--c-fs-meta); }
@container (max-width: 240px) { .lb-fig:nth-child(3) { display: none; } }
@container (max-width: 400px) { .lb-figs { gap: 12px; } .lb-auto-l { display: none; } .lb-clean span { display: none; } .lb-clean { width: var(--c-ctl); padding: 0; justify-content: center; } }
@container (max-height: 180px) { .lb .appl-text { gap: 2px; } .lb-fig { flex-direction: row; align-items: baseline; gap: 5px; } .lb-fig b { font-size: var(--c-fs-body); } .lb-l { display: none; } .lb-s { display: inline; } }
.lb-auto { flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: var(--c-fs-meta); color: var(--d-text-2); }
/* narrow: the controls as icons */
@container (max-width: 320px) { .lb-clean { padding: 0; } .lb-clean span { display: none; } }
/* narrow: clean now stays, auto clean (a setting you rarely change) goes; the tiniest cards keep just the state */
@container (max-width: 260px) { .lb-auto-l { display: none; } .lb-acts:has(.lb-clean) .lb-auto { display: none; } .lb-figs { column-gap: 8px; } }
@container (max-width: 150px) { .lb-acts { display: none; } .lb-ico { display: none; } .lb-body { column-gap: 0; } }
/* one row high: everything on one line */
@container (max-height: 110px) {
.lb-body { grid-template-columns: auto minmax(0, max-content) minmax(0, 1fr) auto; grid-template-areas: "ico state figs acts"; align-content: center; column-gap: 12px; }
.lb-name, .lb-warn { display: none; }
.lb-state { font-size: var(--c-fs-mid); }
.lb-figs { line-height: 22px; height: 22px; overflow: hidden; } /* figures that don't fit wrap out of sight, whole */
}
@container (max-height: 110px) and (max-width: 360px) {
.lb-figs { display: none; }
.lb-body { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "ico state acts"; }
}
@container (max-height: 110px) and (max-width: 280px) { .lb-acts:has(.lb-clean) .lb-auto { display: none; } }
/* camera and photos: square label plates (above) */
@@ -2032,4 +2047,12 @@ button.fader-input { cursor: pointer; }
.lt-colors { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; }
.lt-colors .swatches { flex: 1; min-width: 0; margin: 0; justify-content: flex-start; }
.lt-colors .swatch { width: 28px; height: 28px; }
@container (min-height: 260px) { .lb-figs { justify-content: center; } .lb-fig { align-items: center; } .lb .appl-main { flex-direction: column; } }
/* tall: a ring on top, the rest centred below */
@container (min-height: 260px) {
.lb { flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.lb-body { flex: none; width: 100%; grid-template-columns: minmax(0, 1fr); grid-template-areas: "name" "state" "figs" "acts" "warn"; justify-items: center; row-gap: 4px; }
.lb-ico { display: none; }
.lb-figs { justify-content: center; }
.lb-acts { margin-top: 6px; }
}
@container (min-height: 260px) and (min-width: 180px) { .lb-ring { display: grid; height: min(50%, 170px); } }