admin/Smart-Dashboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Raum-Modal Licht: Preset als Chips, Effekt als durchsuchbarer Picker, WLED-Zustand live

Browse Source 
Die native Auswahlliste zeichnete Chrome hell auf hell. Welcher Effekt und
welches Preset gerade laufen, liest room.php?action=wled direkt von der Lampe.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
admin
2026-09-15 22:27:40 +02:00
co-authored by Claude Opus 5
parent d5d2d8f336
commit 0eb01403c5
5 changed files with 173 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/solar.css
+25 -1
View File
@@ -1111,7 +1111,31 @@ input[type='range']::-webkit-slider-runnable-track {
.rf .rf-farbe:focus-visible, .rf .rf-farbe-eigen:focus-within { outline: 2px solid #f7c000; outline-offset: 3px; }
.rf .rf-farbe-eigen { background: conic-gradient(#f55, #fd5, #5f7, #5df, #75f, #f5d, #f55); }
.rf .rf-farbe-eigen input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.rf .rf-auswahl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .5rem; align-items: center; font-size: .78rem; color: var(--ton-schrift-2, #9aa6ad); margin: 0; }
/* Preset, Effekt: Titel links, Chips oder Picker rechts. Lange Listen
klappen als durchsuchbarer Kasten unter der Zeile auf. */
.rf .rf-liste { display: grid; grid-template-columns: 4.3rem minmax(0, 1fr); align-items: start; gap: .4rem .5rem; padding-top: .55rem; border-top: 1px solid rgba(255, 255, 255, .06); }
.rf .rf-liste + .rf-liste { border-top: 0; padding-top: 0; }
.rf .rf-liste > .rf-reihe-titel { padding-top: .35rem; }
.rf .rf-liste .rf-chip { padding: .28rem .65rem; font-size: .78rem; }
.rf .rf-liste .rf-chip[aria-pressed="true"] { color: #1a1406; }
.rf .rf-picker-knopf { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-width: 0; padding: .38rem .7rem; border-radius: .6rem; background: #22292d; font-size: .82rem; font-weight: 500; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.rf .rf-picker-knopf span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rf .rf-picker-knopf .bi { font-size: .75rem; color: var(--ton-schrift-2, #9aa6ad); transition: transform .2s; }
.rf .rf-picker-knopf:hover { background: #283035; }
.rf .rf-picker-knopf[aria-expanded="true"] { box-shadow: inset 0 0 0 1.5px var(--a); }
.rf .rf-picker-knopf[aria-expanded="true"] .bi { transform: rotate(180deg); }
.rf .rf-picker-knopf:focus-visible { outline: 2px solid var(--a); outline-offset: 1px; }
.rf .rf-picker { grid-column: 1 / -1; display: grid; gap: .45rem; padding: .5rem; border-radius: .65rem; background: #22292d; animation: rf-auf .2s cubic-bezier(.2, .7, .2, 1); }
.rf .rf-picker[hidden] { display: none; }
.rf .rf-suche { all: unset; box-sizing: border-box; width: 100%; padding: .4rem .65rem; border-radius: .5rem; background: var(--ton-flaeche-2, #2b3237); color: var(--ton-schrift, #e8ede9); font-size: .82rem; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.rf .rf-suche::placeholder { color: var(--ton-schrift-3, #6f7a81); }
.rf .rf-suche:focus { box-shadow: inset 0 0 0 1.5px var(--a); }
.rf .rf-picker-liste { display: flex; flex-wrap: wrap; align-content: flex-start; gap: .3rem; max-height: 11rem; overflow-y: auto; padding-right: .25rem; scrollbar-width: thin; scrollbar-color: #3f474e transparent; }
.rf .rf-picker-liste .rf-chip[hidden] { display: none; }
@media (max-width: 575.98px) {
.rf .rf-liste { grid-template-columns: 1fr; gap: .3rem; }
.rf .rf-liste > .rf-reihe-titel { padding-top: 0; }
}
/* --- Schalter --- */
.rf .rf-schalter-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: .5rem; }