Eigene Auswahllisten ueberall: dunkel und ueber der Seite statt im Fluss
Chrome zeichnet die Liste eines <select> hell auf grau und laesst sich davon nicht abbringen. js/solar/auswahl.js ergaenzt jedes <select> um einen eigenen Knopf; die Liste haengt an <body> und liegt ueber der Seite, damit ein Modal nicht hoeher wird und der Inhalt nicht springt. Ab neun Eintraegen mit Suchfeld. Der eigene Picker im Raumfenster faellt dafuer weg. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Claude Opus 5
+78
-19
@@ -111,6 +111,78 @@ body.bg-body-tertiary,
|
||||
mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22%3E%3Crect x=%221.5%22 y=%221.6%22 width=%2213%22 height=%222.6%22 rx=%22.9%22/%3E%3Crect x=%222.6%22 y=%225.7%22 width=%2210.8%22 height=%221.7%22 rx=%22.85%22/%3E%3Crect x=%222.6%22 y=%228.6%22 width=%2210.8%22 height=%221.7%22 rx=%22.85%22/%3E%3Crect x=%221.5%22 y=%2211.8%22 width=%2213%22 height=%222.6%22 rx=%22.9%22/%3E%3C/svg%3E") center / contain no-repeat;
|
||||
}
|
||||
|
||||
/* --- Auswahllisten -------------------------------------------------------
|
||||
Eigener Knopf statt der Liste, die der Browser zeichnet (js/solar/auswahl.js).
|
||||
Chrome malt sie hell auf grau, und gestalten laesst sie sich nicht. Die
|
||||
aufgeklappte Liste haengt an <body> und liegt ueber der Seite - im Fluss
|
||||
machte sie ein Modal hoeher, und der ganze Inhalt sprang.
|
||||
-------------------------------------------------------------------------- */
|
||||
.aw { display: block; position: relative; min-width: 0; }
|
||||
.aw.aw-text { display: inline-block; max-width: 100%; }
|
||||
.aw > select { display: none; }
|
||||
.aw .aw-knopf {
|
||||
display: flex; align-items: center; justify-content: space-between; gap: .4rem;
|
||||
width: 100%; min-width: 0; padding: .35rem .6rem;
|
||||
border: 1px solid var(--ton-linie-satt, rgba(138, 148, 158, .38));
|
||||
border-radius: var(--ton-radius-klein, .5rem);
|
||||
background: var(--ton-flaeche-2, #2b3237); color: var(--ton-schrift, #e8ede9);
|
||||
font: inherit; text-align: left; cursor: pointer;
|
||||
}
|
||||
.aw .aw-knopf:hover { border-color: var(--bs-link-color, #f0b429); }
|
||||
.aw .aw-knopf:focus-visible { outline: 2px solid var(--bs-link-color, #f0b429); outline-offset: 1px; }
|
||||
.aw .aw-knopf[aria-expanded="true"] { border-color: var(--bs-link-color, #f0b429); }
|
||||
.aw .aw-knopf:disabled { opacity: .55; cursor: default; }
|
||||
.aw .aw-wert { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
.aw .aw-wert.aw-leer { color: var(--ton-schrift-3, #6f7a81); }
|
||||
.aw .aw-knopf > .bi { flex: none; font-size: .7em; color: var(--ton-schrift-2, #9aa6ad); transition: transform .2s; }
|
||||
.aw .aw-knopf[aria-expanded="true"] > .bi { transform: rotate(180deg); }
|
||||
/* Als Text im Fliesstext (Automatik-Editor): der Knopf traegt dort die
|
||||
Gestaltung von .feld-als-text, nur der Pfeil kommt dazu. */
|
||||
.aw .aw-knopf.feld-als-text { display: inline-flex; width: auto; max-width: 100%; }
|
||||
.input-group > .aw { flex: 1 1 auto; width: 1%; }
|
||||
.input-group > .aw .aw-knopf { border-radius: 0; height: 100%; }
|
||||
.input-group > .aw:last-child .aw-knopf { border-top-right-radius: var(--ton-radius-klein, .5rem); border-bottom-right-radius: var(--ton-radius-klein, .5rem); }
|
||||
|
||||
/* Ein <select> mit schwebender Beschriftung (.form-floating): Bootstrap
|
||||
laesst die Beschriftung nur dann nach oben ruecken, wenn es das Feld
|
||||
selbst kennt. Unser Knopf ist keins - also steht sie hier fest oben, was
|
||||
bei einer Auswahl ohnehin immer gilt: sie hat immer einen Wert. */
|
||||
.form-floating > .aw .aw-knopf { height: calc(3.5rem + 2px); padding: 1.625rem .75rem .625rem; }
|
||||
.form-floating > .aw ~ label { opacity: .65; transform: scale(.85) translateY(-.5rem) translateX(.15rem); }
|
||||
|
||||
.aw-panel {
|
||||
position: fixed; z-index: 2000; display: flex; flex-direction: column; gap: .35rem;
|
||||
padding: .35rem; border-radius: var(--ton-radius-klein, .5rem);
|
||||
border: 1px solid var(--ton-linie-satt, rgba(138, 148, 158, .38));
|
||||
background: var(--ton-flaeche, #23282c); box-shadow: 0 .8rem 2rem rgba(0, 0, 0, .5);
|
||||
animation: aw-auf .15s cubic-bezier(.2, .7, .2, 1);
|
||||
}
|
||||
@keyframes aw-auf { from { opacity: 0; transform: translateY(-4px); } }
|
||||
.aw-panel .aw-suche {
|
||||
flex: none; padding: .35rem .55rem; border: 0; border-radius: .4rem;
|
||||
background: var(--ton-flaeche-2, #2b3237); color: var(--ton-schrift, #e8ede9); font: inherit;
|
||||
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
|
||||
}
|
||||
.aw-panel .aw-suche::placeholder { color: var(--ton-schrift-3, #6f7a81); }
|
||||
.aw-panel .aw-suche:focus { outline: 0; box-shadow: inset 0 0 0 1.5px var(--bs-link-color, #f0b429); }
|
||||
.aw-panel .aw-liste { display: block; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #3f474e transparent; }
|
||||
.aw-panel .aw-gruppe {
|
||||
padding: .4rem .55rem .15rem; font-size: .7rem; font-weight: 600; letter-spacing: .06em;
|
||||
text-transform: uppercase; color: var(--ton-schrift-3, #6f7a81);
|
||||
}
|
||||
.aw-panel .aw-gruppe[hidden] { display: none; }
|
||||
.aw-panel .aw-eintrag {
|
||||
display: block; box-sizing: border-box; width: 100%; margin: 0; cursor: pointer;
|
||||
padding: .35rem .55rem; border: 0; border-radius: .4rem; background: none; appearance: none;
|
||||
font: inherit; font-size: .9rem; line-height: 1.5; text-align: left;
|
||||
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
|
||||
color: var(--ton-schrift, #e8ede9);
|
||||
}
|
||||
.aw-panel .aw-eintrag[hidden] { display: none; }
|
||||
.aw-panel .aw-eintrag:hover, .aw-panel .aw-eintrag.aktiv { background: var(--ton-flaeche-2, #2b3237); }
|
||||
.aw-panel .aw-eintrag[aria-selected="true"] { color: var(--bs-link-color, #f0b429); font-weight: 600; }
|
||||
.aw-panel .aw-eintrag:disabled { opacity: .45; cursor: default; }
|
||||
|
||||
/* --- Karten --------------------------------------------------------------
|
||||
Eine Karte ist eine Flaeche, kein Kasten: ein Ton heller als der Grund, eine
|
||||
Haarlinie als Rand, kein Schlagschatten. Der Schatten trennte frueher, was
|
||||
@@ -1131,30 +1203,17 @@ 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%; }
|
||||
/* 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); }
|
||||
/* Preset und Effekt: Titel links, Chips oder die allgemeine Auswahl rechts
|
||||
(js/solar/auswahl.js) - lange Listen waeren als Chips eine Wand. */
|
||||
.rf .rf-liste { display: grid; grid-template-columns: 4.3rem minmax(0, 1fr); align-items: center; 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; }
|
||||
.rf .rf-liste .aw .aw-knopf { background: #22292d; border-color: transparent; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); font-size: .82rem; font-weight: 500; }
|
||||
.rf .rf-liste .aw .aw-knopf:hover { background: #283035; }
|
||||
.rf .rf-liste .aw .aw-knopf[aria-expanded="true"] { border-color: transparent; box-shadow: inset 0 0 0 1.5px var(--a); }
|
||||
@media (max-width: 575.98px) {
|
||||
.rf .rf-liste { grid-template-columns: 1fr; gap: .3rem; }
|
||||
.rf .rf-liste > .rf-reihe-titel { padding-top: 0; }
|
||||
}
|
||||
|
||||
/* --- Schalter --- */
|
||||
|
||||
Reference in New Issue
Block a user