Fix real tab-bar-icons-vanish bug, dropdown popup color, wheel/Montiert swap
The reported "whole tab bar disappears when hiding labels" bug was real,
just one level deeper than first checked. .tabbar.ohne .tab span{display:
none} targeted the label span, but the icon is also wrapped in a <span
class="tabpille"> - a bare "span" type selector doesn't care about class,
so the icon's own wrapper collapsed too. Confirmed by measuring the <svg>
directly (0x0 bounding rect) after a live screenshot showed all 5 tab
buttons empty. Fixed with :not(.tabpille) in both stylesheets.
The Modell dropdown was still bright despite the color-scheme hint from
the last commit: a <select>'s opened option list is rendered by the
browser/OS as its own surface, entirely outside the page's paint tree -
confirmed when a screenshot call hung 30s trying to capture it open.
color-scheme only gets partial credit there; explicit background-color/
color on <option> is what Chrome/Firefox/Edge actually honor for the
popup rows. Added that, verified via getComputedStyle since the open
popup itself can't be screenshotted by this tooling.
Swapped the wheel photo (now right-aligned via margin-left:auto on the
now-correctly-square .bildbox.radbild) and Montiert (already left) per
request.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
@@ -214,8 +214,12 @@ main#view{--seitenrand:16px;padding:0 var(--seitenrand) 30px;scroll-behavior:smo
|
||||
:host([data-theme="tag"]) .tabbar{background:rgba(242,242,247,.78)}
|
||||
.tab{border-top:0;margin-top:0;padding:7px 2px 6px;gap:3px;
|
||||
font-size:10px;letter-spacing:0;text-transform:none;color:var(--ios-grau)}
|
||||
/* Beschriftung folgt weiter dem Schalter in den Einstellungen */
|
||||
.tabbar.ohne .tab span{display:none}
|
||||
/* Beschriftung folgt weiter dem Schalter in den Einstellungen.
|
||||
:not(.tabpille) ist Pflicht: die Icon-Huelle ist ebenfalls ein <span> (span
|
||||
class="tabpille"), ein blosses ".tab span" traf also nicht nur das Label
|
||||
sondern auch die Pille selbst - das Icon verschwand mit, nicht nur der
|
||||
Text. Genau das war der gemeldete "ganze Menueleiste verschwindet"-Bug. */
|
||||
.tabbar.ohne .tab span:not(.tabpille){display:none}
|
||||
.tab svg{width:26px;height:26px;stroke-width:1.5}
|
||||
/* myAudi-Menueleiste: das aktive Symbol sitzt hell in einer gefuellten Pille,
|
||||
die uebrigen bleiben grau - kein farbiger Tint, kein Oberkantenstrich. */
|
||||
|
||||
@@ -268,7 +268,11 @@ main#view::-webkit-scrollbar { width: 0; height: 0; }
|
||||
.tab svg.voll { fill: currentColor; stroke: none; }
|
||||
.tab:active svg { transform: scale(.9); }
|
||||
.tab span { font-size: 11px; letter-spacing: .01em; }
|
||||
.tabbar.ohne .tab span { display: none; }
|
||||
/* :not(.tabpille) - die Icon-Huelle ist selbst ein <span>, ein blosses
|
||||
".tab span" hier hiess frueher auch der Pille (samt Icon) display:none.
|
||||
Ueberschrieben von derselben Regel in audi-dashboard-ios.css (dieselbe
|
||||
Spezifitaet, spaeter geladen), aber auch hier falsch und daher fixiert. */
|
||||
.tabbar.ohne .tab span:not(.tabpille) { display: none; }
|
||||
.tabbar.ohne .tab { padding: 14px 0 12px; }
|
||||
.tabbar.ohne .tab svg { width: 26px; height: 26px; }
|
||||
|
||||
@@ -449,8 +453,10 @@ button.tile, .tilebtn { transition: background .15s, transform .1s; }
|
||||
/* .bildbox.radbild statt .radbild allein: .bildbox unten setzt width/aspect-
|
||||
ratio auf derselben Spezifitaet (eine Klasse) und gewinnt als spaeter
|
||||
notierte Regel sonst automatisch - die Box blieb dadurch bislang die volle
|
||||
Kachelbreite im 4:3-Format statt eines echten 96x96-Quadrats. */
|
||||
.bildbox.radbild { width: 96px; height: 96px; aspect-ratio: 1 / 1; }
|
||||
Kachelbreite im 4:3-Format statt eines echten 96x96-Quadrats.
|
||||
margin-left:auto schiebt das feste 96px-Quadrat an den rechten Rand des
|
||||
vollbreiten data-bildklick-Wrappers - Montiert sitzt links (siehe unten). */
|
||||
.bildbox.radbild { width: 96px; height: 96px; aspect-ratio: 1 / 1; margin-left: auto; }
|
||||
|
||||
.bildbox { position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; }
|
||||
.bildbox img { display: block; width: 100%; height: 100%; object-fit: cover; }
|
||||
@@ -527,6 +533,13 @@ button.tile, .tilebtn { transition: background .15s, transform .1s; }
|
||||
appearance: none;
|
||||
}
|
||||
.feld input:focus, .feld select:focus, .notiz:focus { outline: none; border-color: var(--red); }
|
||||
/* Das AUFGEKLAPPTE <select>-Popup ist Browser-/OS-Chrome, kein Teil des
|
||||
Seiten-DOMs - color-scheme (siehe :host weiter oben) beeinflusst es nur
|
||||
teilweise, der Rest bleibt hell. Einzige zuverlaessige Stellschraube:
|
||||
Chrome (u.a.) rendert die Zeilen im Popup tatsaechlich mit dem hier
|
||||
gesetzten background-color/color statt Systemfarben - deckende Werte,
|
||||
var(--tile-2) im Nacht-Theme ist transparent und wuerde durchscheinen. */
|
||||
.feld select option { background-color: var(--canvas); color: var(--fg); }
|
||||
/* Pull-down-Button-Optik (Apple HIG): einzelner Abwaerts-Chevron statt des
|
||||
durch appearance:none oben entfernten nativen Browser-Pfeils. */
|
||||
.feld select {
|
||||
|
||||
@@ -214,8 +214,12 @@ main#view{--seitenrand:16px;padding:0 var(--seitenrand) 30px;scroll-behavior:smo
|
||||
:host([data-theme="tag"]) .tabbar{background:rgba(242,242,247,.78)}
|
||||
.tab{border-top:0;margin-top:0;padding:7px 2px 6px;gap:3px;
|
||||
font-size:10px;letter-spacing:0;text-transform:none;color:var(--ios-grau)}
|
||||
/* Beschriftung folgt weiter dem Schalter in den Einstellungen */
|
||||
.tabbar.ohne .tab span{display:none}
|
||||
/* Beschriftung folgt weiter dem Schalter in den Einstellungen.
|
||||
:not(.tabpille) ist Pflicht: die Icon-Huelle ist ebenfalls ein <span> (span
|
||||
class="tabpille"), ein blosses ".tab span" traf also nicht nur das Label
|
||||
sondern auch die Pille selbst - das Icon verschwand mit, nicht nur der
|
||||
Text. Genau das war der gemeldete "ganze Menueleiste verschwindet"-Bug. */
|
||||
.tabbar.ohne .tab span:not(.tabpille){display:none}
|
||||
.tab svg{width:26px;height:26px;stroke-width:1.5}
|
||||
/* myAudi-Menueleiste: das aktive Symbol sitzt hell in einer gefuellten Pille,
|
||||
die uebrigen bleiben grau - kein farbiger Tint, kein Oberkantenstrich. */
|
||||
|
||||
@@ -268,7 +268,11 @@ main#view::-webkit-scrollbar { width: 0; height: 0; }
|
||||
.tab svg.voll { fill: currentColor; stroke: none; }
|
||||
.tab:active svg { transform: scale(.9); }
|
||||
.tab span { font-size: 11px; letter-spacing: .01em; }
|
||||
.tabbar.ohne .tab span { display: none; }
|
||||
/* :not(.tabpille) - die Icon-Huelle ist selbst ein <span>, ein blosses
|
||||
".tab span" hier hiess frueher auch der Pille (samt Icon) display:none.
|
||||
Ueberschrieben von derselben Regel in audi-dashboard-ios.css (dieselbe
|
||||
Spezifitaet, spaeter geladen), aber auch hier falsch und daher fixiert. */
|
||||
.tabbar.ohne .tab span:not(.tabpille) { display: none; }
|
||||
.tabbar.ohne .tab { padding: 14px 0 12px; }
|
||||
.tabbar.ohne .tab svg { width: 26px; height: 26px; }
|
||||
|
||||
@@ -449,8 +453,10 @@ button.tile, .tilebtn { transition: background .15s, transform .1s; }
|
||||
/* .bildbox.radbild statt .radbild allein: .bildbox unten setzt width/aspect-
|
||||
ratio auf derselben Spezifitaet (eine Klasse) und gewinnt als spaeter
|
||||
notierte Regel sonst automatisch - die Box blieb dadurch bislang die volle
|
||||
Kachelbreite im 4:3-Format statt eines echten 96x96-Quadrats. */
|
||||
.bildbox.radbild { width: 96px; height: 96px; aspect-ratio: 1 / 1; }
|
||||
Kachelbreite im 4:3-Format statt eines echten 96x96-Quadrats.
|
||||
margin-left:auto schiebt das feste 96px-Quadrat an den rechten Rand des
|
||||
vollbreiten data-bildklick-Wrappers - Montiert sitzt links (siehe unten). */
|
||||
.bildbox.radbild { width: 96px; height: 96px; aspect-ratio: 1 / 1; margin-left: auto; }
|
||||
|
||||
.bildbox { position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; }
|
||||
.bildbox img { display: block; width: 100%; height: 100%; object-fit: cover; }
|
||||
@@ -527,6 +533,13 @@ button.tile, .tilebtn { transition: background .15s, transform .1s; }
|
||||
appearance: none;
|
||||
}
|
||||
.feld input:focus, .feld select:focus, .notiz:focus { outline: none; border-color: var(--red); }
|
||||
/* Das AUFGEKLAPPTE <select>-Popup ist Browser-/OS-Chrome, kein Teil des
|
||||
Seiten-DOMs - color-scheme (siehe :host weiter oben) beeinflusst es nur
|
||||
teilweise, der Rest bleibt hell. Einzige zuverlaessige Stellschraube:
|
||||
Chrome (u.a.) rendert die Zeilen im Popup tatsaechlich mit dem hier
|
||||
gesetzten background-color/color statt Systemfarben - deckende Werte,
|
||||
var(--tile-2) im Nacht-Theme ist transparent und wuerde durchscheinen. */
|
||||
.feld select option { background-color: var(--canvas); color: var(--fg); }
|
||||
/* Pull-down-Button-Optik (Apple HIG): einzelner Abwaerts-Chevron statt des
|
||||
durch appearance:none oben entfernten nativen Browser-Pfeils. */
|
||||
.feld select {
|
||||
|
||||
Reference in New Issue
Block a user