From 38f8b4e0877da7ca8e19e2650424ea016f096480 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bruno=20Pantalea=CC=83o?= Date: Mon, 8 Apr 2024 14:20:38 +0000 Subject: [PATCH] Add CSS var for header -webkit-backdrop-filter --- hassio/src/ingress-view/hassio-ingress-view.ts | 1 + src/components/ha-top-app-bar-fixed.ts | 3 +++ src/components/ha-top-app-bar.ts | 3 +++ src/layouts/hass-error-screen.ts | 1 + src/layouts/hass-loading-screen.ts | 1 + src/layouts/hass-subpage.ts | 1 + src/panels/developer-tools/ha-panel-developer-tools.ts | 1 + src/panels/energy/ha-panel-energy.ts | 1 + src/panels/lovelace/hui-root.ts | 2 ++ 9 files changed, 14 insertions(+) diff --git a/hassio/src/ingress-view/hassio-ingress-view.ts b/hassio/src/ingress-view/hassio-ingress-view.ts index 1dd895bdfe0f..21a42db0781a 100644 --- 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 index e6fac8a01955..02f239f74317 100644 --- 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 index 40d27b40a86e..9a52fc78aa38 100644 --- 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 index e668b2a3b069..581f75d63828 100644 --- 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 index 9414e41c406d..8a8038866281 100644 --- 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 index cabbeaf689ca..f6ce5a300e2f 100644 --- 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 index 52e98b377077..a16036211e29 100644 --- 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 index 4dd6498ae452..cd69ab36522d 100644 --- 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 index b0115082bb8a..b541c7846834 100644 --- 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;