diff --git a/AGENTS.md b/AGENTS.md index eed8d09..5af68f3 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -977,18 +977,48 @@ wraps the web app for iPhone; a PWA home-screen install is the accepted intermed (6) **Back arrow changed from red (`--ios-tint`) to the neutral headline color (`--fg`)** in `audi-dashboard-ios.css`, matching every other navigation-color decision made this project (red stays reserved for destructive actions per Apple's HIG). - Investigated but could not reproduce: user reported that hiding tab labels ("Beschriftung in der - Menüleiste" off) makes the *entire* tab bar disappear. Traced the full CSS cascade and the exact - commit that added the sixth round's icon+label highlight (`git show` on the relevant lines) — - the new rules are correctly scoped to `:not(.ohne)` and provably never touched the icon-only - path; live DOM/computed-style testing (toggle the switch, click the actual label, navigate away - and back, both mobile and desktop container widths) showed the tab bar staying visible, correctly - sized, and correctly classed in every case tried in the in-app Chromium browser. Left unchanged - pending a repro (screenshot or the exact device/browser) from the user, since no defect could be - located to fix. + Initially investigated but could not reproduce (see below for the real fix, found later the same + day): user reported that hiding tab labels ("Beschriftung in der Menüleiste" off) makes the + *entire* tab bar disappear. First pass traced the CSS cascade and the commit that added the sixth + round's icon+label highlight and found it correctly scoped to `:not(.ohne)`; live DOM/computed- + style testing (toggle, click the label, navigate away/back, both container widths) checked + `#tabbar`'s and each `.tab`'s own box — all stayed visible, sized, and classed correctly — so the + bug looked unreproducible and was provisionally left alone. Deployed to `audi_ha_test`; wheel-photo squareness, Montiert position, back-arrow color, and the image-cycle dots all confirmed live via direct DOM/computed-style checks (no visual screenshot tool available this session — see running note below). + Follow-up same day: user reported the `color-scheme` fix alone wasn't enough — dropdowns were + "still very bright." Correct: a `-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 { diff --git a/homeassistant/www/audi-dashboard-ios.css b/homeassistant/www/audi-dashboard-ios.css index 22cf15c..83ecf0f 100644 --- a/homeassistant/www/audi-dashboard-ios.css +++ b/homeassistant/www/audi-dashboard-ios.css @@ -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 + 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. */ diff --git a/homeassistant/www/audi-dashboard.css b/homeassistant/www/audi-dashboard.css index 2a9c3d4..5a91c0b 100644 --- a/homeassistant/www/audi-dashboard.css +++ b/homeassistant/www/audi-dashboard.css @@ -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 , 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