Add CSS var for header -webkit-backdrop-filter

home-assistant · Apr 9, 2024 · 38f8b4e · 38f8b4e
1 parent 0d3e730
commit 38f8b4e
Show file tree

Hide file tree

Showing 9 changed files with 14 additions and 0 deletions.
diff --git a/hassio/src/ingress-view/hassio-ingress-view.ts b/hassio/src/ingress-view/hassio-ingress-view.ts
@@ -352,6 +352,7 @@ class HassioIngressView extends LitElement {
         padding: 0 16px;
         pointer-events: none;
         background-color: var(--app-header-background-color);
+        -webkit-backdrop-filter: var(--app-header-backdrop-filter, unset);
         font-weight: 400;
         color: var(--app-header-text-color, white);
         border-bottom: var(--app-header-border-bottom, none);

diff --git a/src/components/ha-top-app-bar-fixed.ts b/src/components/ha-top-app-bar-fixed.ts
@@ -27,6 +27,9 @@ export class HaTopAppBarFixed extends TopAppBarFixedBase {
         padding-inline-start: 20px;
         padding-inline-end: initial;
       }
+      .header {
+        -webkit-backdrop-filter: var(--app-header-backdrop-filter, unset);
+      }
     `,
   ];
 }

diff --git a/src/components/ha-top-app-bar.ts b/src/components/ha-top-app-bar.ts
@@ -23,6 +23,9 @@ export class HaTopAppBar extends TopAppBarBase {
           var(--mdc-theme-primary)
         );
       }
+      .header {
+        -webkit-backdrop-filter: var(--app-header-backdrop-filter, unset);
+      }
     `,
   ];
 }

diff --git a/src/layouts/hass-error-screen.ts b/src/layouts/hass-error-screen.ts
@@ -68,6 +68,7 @@ class HassErrorScreen extends LitElement {
           padding: 8px 12px;
           pointer-events: none;
           background-color: var(--app-header-background-color);
+          -webkit-backdrop-filter: var(--app-header-backdrop-filter, unset);
           font-weight: 400;
           color: var(--app-header-text-color, white);
           border-bottom: var(--app-header-border-bottom, none);

diff --git a/src/layouts/hass-loading-screen.ts b/src/layouts/hass-loading-screen.ts
@@ -75,6 +75,7 @@ class HassLoadingScreen extends LitElement {
           padding: 8px 12px;
           pointer-events: none;
           background-color: var(--app-header-background-color);
+          -webkit-backdrop-filter: var(--app-header-backdrop-filter, unset);
           font-weight: 400;
           color: var(--app-header-text-color, white);
           border-bottom: var(--app-header-border-bottom, none);

diff --git a/src/layouts/hass-subpage.ts b/src/layouts/hass-subpage.ts
@@ -100,6 +100,7 @@ class HassSubpage extends LitElement {
           height: var(--header-height);
           padding: 8px 12px;
           background-color: var(--app-header-background-color);
+          -webkit-backdrop-filter: var(--app-header-backdrop-filter, unset);
           font-weight: 400;
           color: var(--app-header-text-color, white);
           border-bottom: var(--app-header-border-bottom, none);

diff --git a/src/panels/developer-tools/ha-panel-developer-tools.ts b/src/panels/developer-tools/ha-panel-developer-tools.ts
@@ -127,6 +127,7 @@ class PanelDeveloperTools extends LitElement {
           top: 0;
           z-index: 4;
           background-color: var(--app-header-background-color);
+          -webkit-backdrop-filter: var(--app-header-backdrop-filter, unset);
           width: var(--mdc-top-app-bar-width, 100%);
           padding-top: env(safe-area-inset-top);
           color: var(--app-header-text-color, white);

diff --git a/src/panels/energy/ha-panel-energy.ts b/src/panels/energy/ha-panel-energy.ts
@@ -353,6 +353,7 @@ class PanelEnergy extends LitElement {
         }
         .header {
           background-color: var(--app-header-background-color);
+          -webkit-backdrop-filter: var(--app-header-backdrop-filter, unset);
           color: var(--app-header-text-color, white);
           border-bottom: var(--app-header-border-bottom, none);
           position: fixed;

diff --git a/src/panels/lovelace/hui-root.ts b/src/panels/lovelace/hui-root.ts
@@ -908,6 +908,8 @@ class HUIRoot extends LitElement {
           position: fixed;
           top: 0;
           width: var(--mdc-top-app-bar-width, 100%);
+          -webkit-backdrop-filter: var(--app-header-backdrop-filter, unset);
+          backdrop-filter: var(--app-header-backdrop-filter, unset);
           padding-top: env(safe-area-inset-top);
           z-index: 4;
           transition: box-shadow 200ms linear;
-Original file line number
+Diff line change
@@ Expand Up / @@ -23,6 +23,9 @@ export class HaTopAppBar extends TopAppBarBase { @@
               var(--mdc-theme-primary)
             );
           }
+          .header {
+            -webkit-backdrop-filter: var(--app-header-backdrop-filter, unset);
+          }
         `,
       ];
     }
@@ Expand Down @@