Fix header blur, dropdowns, and 5 upstream issues#126
Fix header blur, dropdowns, and 5 upstream issues#126brandon-claps wants to merge 16 commits intowessamlauf:mainfrom
Conversation
- Fix ha-select dropdown menus rendered off-screen due to backdrop-filter
creating a containing block (moved blur to ::before pseudo-element)
- Fix # comments inside YAML | blocks corrupting CSS custom properties
- Fix token variables orphaned outside :host {} in Light Lite themes
- Add missing card-mod-root CSS sections to Dark Lite theme
- Fix checkbox/radio unchecked colors in Dark Lite (was using light values)
- Fix mush-rgb-grey stray parenthesis in light mode themes
- Bump version to 1.3.1
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
…down-fix Fix dropdown visibility bug and 6 theme bugs (v1.3.1)
…ainers backdrop-filter on ancestor elements (header, dialogs, sidebar, label badges, inputs) creates CSS containing blocks that trap position:fixed dropdown popups, causing them to render in the wrong location. Replaced with more opaque backgrounds to maintain visual appearance without breaking dropdown positioning. Bumps version to 1.3.2. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
…ing-fix Fix dropdown positioning (v1.3.2)
PR #2 removed all backdrop-filter properties to fix dropdown positioning, but this made the header a solid opaque color instead of the signature frosted glass look. Restore app-header-backdrop-filter and the original transparent background-color on headers across Frosted Glass, Frosted Glass Light, and Frosted Glass Dark themes (both light and dark modes). The Lite variants are unaffected as they never used header backdrop-filter. https://claude.ai/code/session_01BBjfYy72mxdExasKtL2BBx
…OfgZ Claude/fix header gradient 8 ofg z
Bump version to 1.3.4
Remove app-header-backdrop-filter from Frosted Glass, Frosted Glass Light, and Frosted Glass Dark themes. backdrop-filter on the header creates a CSS containing block that traps position:fixed dropdown popups, causing them to render in the wrong location. Use semi-opaque background colors instead to maintain the tinted header appearance without breaking dropdowns. https://claude.ai/code/session_01GVnaksxo8CHyEc6BgqpYvZ
Claude/bump version 1 3 4 p t3 gu
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Apply backdrop-filter to .header::before instead of .header itself, preventing the CSS containing block issue that breaks dropdown positioning. Same technique already used for ha-card elements. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
|
Will check after work on March 3rd. Anyway, I can see that cloude is absolutely phenomenal when it comes to coding, could you potentially look at the current issues and ask cloude to fix that? I'd be glad to test it out. Wanted to fix it by myself but my kid got holidays now for the whole week so there is no way I could get a whole day for myself to fix the current issues, thank you! |
Your current open issues? |
Yeah, I would extremely appreciate if you could load the YAML into Claude and copy paste the issues. That would extremely help so I can deliver the new update for the folks out there since I promised I'll do it by the end of February but I can't find the time for that :/ |
- wessamlauf#102: Remove forced glance-card exclusion so users can apply glass - wessamlauf#107: Add streamline-card wrapper exclusion for bubble card compat - wessamlauf#110: Add card-mod-view-yaml for empty card min-height in edit mode - wessamlauf#113: Lower ha-card-background fallback alpha (0.9→0.4) so glass loads - wessamlauf#116: Add contrast(0.4) to backdrop-filter for better text legibility - wessamlauf#123: Increase dark mode dialog opacity (0.92→0.97) for readability - wessamlauf#90: Add control-button-background-color for dark mode visibility Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
…glass effect Fix wessamlauf#116 (contrast(0.4)) and Fix wessamlauf#113 (ha-card-background 0.9→0.4) caused mushroom cards to lose their frosted glass transparency. Reverting both: - Remove contrast(0.4) from all backdrop-filter values - Restore ha-card-background alpha to 0.9 Bump version to 1.3.9. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
brandon-claps
changed the title
|
Blue is not being applied on the header while using Frosted Glass in Light mode and the dedicatet Frosted Glass Light. Dark mode works fine, see screenshots. |
3 participants
Summary
::beforepseudo-element techniqueHeader Fix
Applying
backdrop-filter: blur()directly to.headercreates a CSS containing block, which breaks allposition: fixeddropdowns inside it (issues #42, #71, #83, #89, #91, #100, #109, #112, #114, #118, #120, #121).Instead of applying
backdrop-filterto.headeritself, it's now applied to.header::beforeviacard-mod-root. Since::beforehas no DOM children, the containing block it creates affects nothing — dropdowns position correctly.Upstream Issue Fixes
#123 — Dialog transparency/readability (dark mode)
Increased
ha-dialog-surface-backgroundopacity from0.92to0.97so background text doesn't bleed through dialogs.#102 — Glance card excluded from glass effect
Removed the forced
:host(hui-glance-card)exclusion fromcard-mod-cardso glance cards now get the frosted glass styling.#107 — Bubble card broken with streamline-card templates
Added streamline-card exclusion to prevent glass effect misalignment when bubble cards are rendered via
streamline-card.#110 — Can't edit/see empty cards since 2025.11
Added
card-mod-view-yamlwithmin-height: var(--row-height)for.card-wrapperin edit mode.#90 — Button color barely visible (dark mode)
Added explicit
control-button-background-color: rgba(173, 176, 184, 0.2)to dark mode themes.Files Changed
All 6 theme files updated. Version bumped to 1.3.9.
Test plan
🤖 Generated with Claude Code