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

Dashboard Studio 2.4.0: litter box on the appliance card

Browse Source 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Mel van Veen
2026-10-31 13:48:15 +01:00
parent 095b23481e
commit 0b2027083a
8 changed files with 153 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dashboard_studio/web/style.css
+27
View File
@@ -1575,6 +1575,32 @@ 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); }
.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-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; } }
/* camera and photos: square label plates (above) */
/* car */
@@ -2006,3 +2032,4 @@ 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; } }