Skip to content

Fix header blur, dropdowns, and 5 upstream issues #126

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
brandon-claps wants to merge 16 commits into
base: main
Choose a base branch
from
Open

Fix header blur, dropdowns, and 5 upstream issues #126

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
fb8b7ba
Fix dropdown visibility bug and 6 additional theme bugs (v1.3.1)
Feb 24, 2026
b9ddeee
Merge pull request #1 from brandon-claps/fix/v1.3.1-bugfixes-and-drop…
brandon-claps Feb 24, 2026
28f8507
Fix dropdown positioning by removing backdrop-filter from parent cont…
Feb 24, 2026
3fe977f
Merge pull request #2 from brandon-claps/fix/v1.3.2-dropdown-position…
brandon-claps Feb 24, 2026
54ce658
Restore header backdrop-filter for frosted glass gradient effect
claude Feb 28, 2026
2856983
Bump version to 1.3.3
claude Feb 28, 2026
6d9ed07
Merge pull request #3 from brandon-claps/claude/fix-header-gradient-8…
brandon-claps Feb 28, 2026
7eeb5a8
Bump version to 1.3.4
claude Feb 28, 2026
a517117
Merge pull request #4 from brandon-claps/claude/bump-version-1-3-4-pT3Gu
brandon-claps Feb 28, 2026
60b1ce2
Fix dropdown positioning broken by header backdrop-filter
claude Feb 28, 2026
84d272a
Bump version to 1.3.5
claude Feb 28, 2026
05ab74c
Merge pull request #5 from brandon-claps/claude/bump-version-1-3-4-pT3Gu
brandon-claps Feb 28, 2026
d213a36
Bump version to 1.3.6
Feb 28, 2026
c6865a7
Restore header frosted glass blur via ::before pseudo-element
Feb 28, 2026
526d869
Fix 7 upstream issues and bump to v1.3.8
Mar 1, 2026
6565145
Revert contrast(0.4) and ha-card-background alpha changes that broke …
Mar 1, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
90 changes: 77 additions & 13 deletions themes/Frosted Glass Dark Lite.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
# Frosted Glass Dark Lite
# ver. 1.3 - (2025-11-24)
# ver. 1.3.9 - (2026-03-01)

Frosted Glass Dark Lite:
card-mod-theme: 'Frosted Glass Dark Lite'
Expand Down Expand Up @@ -59,13 +59,11 @@ Frosted Glass Dark Lite:
);
}

/* Headings + Glance (kept excluded) */
:host(hui-heading-card) ha-card,
:host(hui-glance-card) ha-card {
/* Headings (kept excluded) */
:host(hui-heading-card) ha-card {
background: none !important;
}
:host(hui-heading-card) ha-card::before,
:host(hui-glance-card) ha-card::before {
:host(hui-heading-card) ha-card::before {
content: none !important;
}

Expand Down Expand Up @@ -122,7 +120,15 @@ Frosted Glass Dark Lite:
background: none !important;
}

/* (Removed) .bubble-button-card-container styling to avoid conflicts # 1.2 Glass – matches Light exclusions */
/* === Prevent frosted/glass from applying to streamline-card wrapper === */
:host(.type-custom-streamline-card) ha-card {
background: none !important;
box-shadow: none !important;
border-radius: 0px !important;
}
:host(.type-custom-streamline-card) ha-card::before {
content: none !important;
}

# =========================
# CARD-MOD-ROOT GLOBAL CSS
Expand All @@ -134,9 +140,9 @@ Frosted Glass Dark Lite:
--ha-card-border-width: 0.5px;
--ha-card-border-color: rgba(234, 235, 238, 0.1);

/* Glass system tokens (new, dark-tuned) */
--ha-card-glass-tint: rgba(28, 29, 33, 0.18); # 1.2 Glass – global tint layer
--ha-card-glass-inset-shadow: # 1.2 Glass – inner bevel/glow (Liquid Glass inspired)
/* Glass system tokens (dark-tuned) */
--ha-card-glass-tint: rgba(28, 29, 33, 0.18);
--ha-card-glass-inset-shadow:
3px 3px 0.5px -3.5px rgba(255, 255, 255, 0.15) inset,
-2px -2px 0.5px -2px rgba(255, 255, 255, 0.1) inset,
0 0 8px 1px rgba(255, 255, 255, 0.06) inset,
Expand Down Expand Up @@ -235,7 +241,7 @@ Frosted Glass Dark Lite:
--token-font-family-primary: -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
--token-weight-font-title-card: 500;

# Additional color variables
/* Additional color variables */
--token-color-red: rgb(var(--token-rgb-red));
--token-color-green: rgb(var(--token-rgb-green));
--token-color-blue: rgb(var(--token-rgb-blue));
Expand All @@ -257,6 +263,64 @@ Frosted Glass Dark Lite:
--token-color-light-blue: rgb(var(--token-rgb-light-blue));
}

/* SIDEBAR */
.mdc-drawer .mdc-drawer__content {
background: rgba(25, 28, 45, 0.8) !important;
box-shadow: var(--ha-card-glass-inset-shadow) !important;
}

/* CARDS RADIUS */
ha-card {
border-radius: var(--token-size-radius-large);
border: var(--ha-card-border, var(--ha-card-border-width) solid var(--ha-card-border-color));
box-shadow: var(--ha-card-box-shadow);
}
ha-card ha-card {
--ha-card-border-width: 0px;
}

/* DRAWER SCRIM */
ha-drawer {
--mdc-drawer-scrim-color: rgba(0, 0, 0, 0.8) !important;
}

/* LABEL BADGE */
ha-label-badge {
--label-badge-background-color: rgba(60, 60, 78, 0.28) !important;
--label-badge-text-color: rgba(234, 235, 238, 0.9) !important;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.10) !important;
border: 0.5px solid rgba(234, 235, 238, 0.22) !important;
}

/* INPUTS */
input, ha-textfield, ha-select {
background: rgba(30, 33, 54, 0.7) !important;
border-radius: var(--token-size-radius-small);
border: none !important;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.09) !important;
}

/* Custom text divider row size fix */
custom-text-divider-row .text-divider-content {
background: #181929 !important;
opacity: 1 !important;
box-shadow: none !important;
border-radius: 10px !important;
padding: 0 8px !important;
--text-divider-font-size: 16px !important;
--text-divider-line-size: 1px;
--text-divider-color: rgba(234, 235, 238, 1) !important;
}

# =========================
# CARD-MOD-VIEW (edit-mode empty card fix)
# =========================
card-mod-view-yaml: |
hui-sections-view $ hui-grid-section $ hui-card-edit-mode $: |
.card-wrapper {
min-height: var(--row-height);
}

# =========================
# TYPOGRAPHY
# =========================
Expand Down Expand Up @@ -388,8 +452,8 @@ Frosted Glass Dark Lite:
paper-toggle-button-checked-bar-color: 'rgb(106, 116, 211)'
paper-toggle-button-unchecked-button-color: 'rgba(234, 235, 238, 0.3)'
paper-toggle-button-unchecked-bar-color: 'rgba(234, 235, 238, 0.18)'
mdc-checkbox-unchecked-color: 'rgba(19, 21, 54, 0.75)'
mdc-radio-unchecked-color: 'rgba(19, 21, 54, 0.75)'
mdc-checkbox-unchecked-color: 'rgba(234, 235, 238, 0.75)'
mdc-radio-unchecked-color: 'rgba(234, 235, 238, 0.75)'
mdc-ripple-hover-opacity: '0.1'

# Inputs
Expand Down
79 changes: 53 additions & 26 deletions themes/Frosted Glass Dark.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
# Frosted Glass Dark
# ver. 1.3 - (2025-11-24)
# ver. 1.3.9 - (2026-03-01)

Frosted Glass Dark:
card-mod-theme: 'Frosted Glass Dark'
Expand All @@ -10,7 +10,6 @@ Frosted Glass Dark:
# =========================
# HEADER (Top Bar)
# =========================
app-header-backdrop-filter: 'blur(8px) saturate(1.1)'
app-header-background-color: 'rgba(30, 30, 30, 0.01)'
app-header-text-color: 'rgba(240, 243, 255, 0.95)'
app-header-edit-background-color: 'rgba(30, 33, 54, 0.8)'
Expand All @@ -29,8 +28,7 @@ Frosted Glass Dark:
# =========================
# DIALOGS
# =========================
ha-dialog-surface-backdrop-filter: 'blur(8px)' # 1.2 Glass – same blur as cards
ha-dialog-surface-background: 'rgba(30, 30, 30, 0.7)'
ha-dialog-surface-background: 'rgba(30, 30, 30, 0.97)'
dialog-box-shadow: '0 12px 20px rgba(0, 0, 0, 0.25)'
paper-dialog-background-color: 'rgba(30, 30, 30, 0.7)'
mdc-dialog-scrim-color: 'rgba(0, 0, 0, 0.8)'
Expand Down Expand Up @@ -65,15 +63,13 @@ Frosted Glass Dark:
);
}

/* Headings + Glance (kept excluded) */
:host(hui-heading-card) ha-card,
:host(hui-glance-card) ha-card {
/* Headings (kept excluded) */
:host(hui-heading-card) ha-card {
background: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
:host(hui-heading-card) ha-card::before,
:host(hui-glance-card) ha-card::before {
:host(hui-heading-card) ha-card::before {
content: none !important;
}

Expand Down Expand Up @@ -143,7 +139,17 @@ Frosted Glass Dark:
-webkit-backdrop-filter: none !important;
}

/* (Removed) .bubble-button-card-container styling to avoid conflicts # 1.2 Glass – matches Light exclusions */
/* === Prevent frosted/glass from applying to streamline-card wrapper === */
:host(.type-custom-streamline-card) ha-card {
background: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
box-shadow: none !important;
border-radius: 0px !important;
}
:host(.type-custom-streamline-card) ha-card::before {
content: none !important;
}

# =========================
# CARD-MOD-ROOT GLOBAL CSS
Expand All @@ -154,11 +160,11 @@ Frosted Glass Dark:
--ha-card-box-shadow: 0 12px 20px rgba(0, 0, 0, 0.28);
--ha-card-border-width: 0.5px;
--ha-card-border-color: rgba(234, 235, 238, 0.1);
--ha-card-backdrop-filter: blur(10px) saturate(1.2); # 1.2 Glass – same engine as Light, tuned for Dark
--ha-card-backdrop-filter: blur(10px) saturate(1.2);

/* Glass system tokens (new, dark-tuned) */
--ha-card-glass-tint: rgba(28, 29, 33, 0.18); # 1.2 Glass – global tint layer
--ha-card-glass-inset-shadow: # 1.2 Glass – inner bevel/glow (Liquid Glass inspired)
/* Glass system tokens (dark-tuned) */
--ha-card-glass-tint: rgba(28, 29, 33, 0.18);
--ha-card-glass-inset-shadow:
3px 3px 0.5px -3.5px rgba(255, 255, 255, 0.15) inset,
-2px -2px 0.5px -2px rgba(255, 255, 255, 0.1) inset,
0 0 8px 1px rgba(255, 255, 255, 0.06) inset,
Expand Down Expand Up @@ -257,7 +263,7 @@ Frosted Glass Dark:
--token-font-family-primary: -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
--token-weight-font-title-card: 500;

# Additional color variables
/* Additional color variables */
--token-color-red: rgb(var(--token-rgb-red));
--token-color-green: rgb(var(--token-rgb-green));
--token-color-blue: rgb(var(--token-rgb-blue));
Expand All @@ -279,18 +285,16 @@ Frosted Glass Dark:
--token-color-light-blue: rgb(var(--token-rgb-light-blue));
}

/* SIDEBAR BLUR */
/* SIDEBAR */
.mdc-drawer .mdc-drawer__content {
backdrop-filter: blur(8px) saturate(1.1) !important;
-webkit-backdrop-filter: blur(8px) saturate(1.1) !important;
background: rgba(25, 28, 45, 0.8) !important;
box-shadow: var(--ha-card-glass-inset-shadow) !important; # 1.2 Glass – subtle inner edge for consistency
background: rgba(25, 28, 45, 0.9) !important;
box-shadow: var(--ha-card-glass-inset-shadow) !important;
}

/* CARDS RADIUS */
ha-card {
border-radius: var(--token-size-radius-large);
border: var(--ha-card-border, var(--ha-card-border-width) solid var(--ha-card-border-color)); # 1.2 Glass – ensure border follows tokens
border: var(--ha-card-border, var(--ha-card-border-width) solid var(--ha-card-border-color));
box-shadow: var(--ha-card-box-shadow);
}
ha-card ha-card {
Expand All @@ -304,9 +308,7 @@ Frosted Glass Dark:

/* LABEL BADGE */
ha-label-badge {
--label-badge-background-color: rgba(60, 60, 78, 0.28) !important;
backdrop-filter: blur(10px) saturate(1.1) !important;
-webkit-backdrop-filter: blur(10px) saturate(1.1) !important;
--label-badge-background-color: rgba(60, 60, 78, 0.85) !important;
--label-badge-text-color: rgba(234, 235, 238, 0.9) !important;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.10) !important;
border: 0.5px solid rgba(234, 235, 238, 0.22) !important;
Expand All @@ -315,8 +317,6 @@ Frosted Glass Dark:
/* INPUTS */
input, ha-textfield, ha-select {
background: rgba(30, 33, 54, 0.7) !important;
backdrop-filter: blur(6px) !important;
-webkit-backdrop-filter: blur(6px);
border-radius: var(--token-size-radius-small);
border: none !important;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.09) !important;
Expand All @@ -334,6 +334,30 @@ Frosted Glass Dark:
--text-divider-color: rgba(234, 235, 238, 1) !important;
}

/* HEADER frosted glass via ::before (avoids containing block issue with dropdowns) */
.header::before {
content: '';
position: absolute;
inset: 0;
background: rgba(30, 30, 30, 0.15);
backdrop-filter: blur(8px) saturate(1.1);
-webkit-backdrop-filter: blur(8px) saturate(1.1);
z-index: -1;
pointer-events: none;
}
.edit-mode .header::before {
background: rgba(30, 33, 54, 0.8);
}

# =========================
# CARD-MOD-VIEW (edit-mode empty card fix)
# =========================
card-mod-view-yaml: |
hui-sections-view $ hui-grid-section $ hui-card-edit-mode $: |
.card-wrapper {
min-height: var(--row-height);
}

# =========================
# TYPOGRAPHY
# =========================
Expand Down Expand Up @@ -451,6 +475,9 @@ Frosted Glass Dark:
ha-view-sections-column-gap: '17px'
ha-view-sections-column-min-width: 320px

# Control buttons
control-button-background-color: 'rgba(173, 176, 184, 0.2)'

# Sliders, toggles, switches
paper-slider-knob-color: 'rgb(106, 116, 211)'
paper-slider-knob-start-color: 'rgb(106, 116, 211)'
Expand Down
Loading