From 91a94586f9ba85b359dfda99e05e3ee531413603 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bruno=20Pantalea=CC=83o?= Date: Mon, 8 Apr 2024 14:43:00 +0000 Subject: [PATCH] Improve PR --- 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/layouts/home-assistant-main.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 +- 10 files changed, 13 insertions(+), 2 deletions(-) diff --git a/hassio/src/ingress-view/hassio-ingress-view.ts b/hassio/src/ingress-view/hassio-ingress-view.ts index 1dd895bdfe0f..5cb576ccab9f 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(--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..85d53e7f2a56 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(--header-backdrop-filter, unset); + } `, ]; } diff --git a/src/components/ha-top-app-bar.ts b/src/components/ha-top-app-bar.ts index 40d27b40a86e..b7e6853c3540 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(--header-backdrop-filter, unset); + } `, ]; } diff --git a/src/layouts/hass-error-screen.ts b/src/layouts/hass-error-screen.ts index e668b2a3b069..c680e0fe2cc3 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(--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..0cc4aa465fe9 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(--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..360bb5f67274 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(--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/home-assistant-main.ts b/src/layouts/home-assistant-main.ts index 025f1a3ec503..b984910c503d 100644 --- a/src/layouts/home-assistant-main.ts +++ b/src/layouts/home-assistant-main.ts @@ -177,7 +177,6 @@ export class HomeAssistantMain extends LitElement { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); --mdc-drawer-width: 56px; --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width)); - --backdrop-filter: unset; } :host([expanded]) { --mdc-drawer-width: calc(256px + env(safe-area-inset-left)); diff --git a/src/panels/developer-tools/ha-panel-developer-tools.ts b/src/panels/developer-tools/ha-panel-developer-tools.ts index 52e98b377077..5366d6c128fb 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(--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..9a4caff85611 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(--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 eb64b4f15784..7df9386a12f2 100644 --- a/src/panels/lovelace/hui-root.ts +++ b/src/panels/lovelace/hui-root.ts @@ -908,7 +908,7 @@ class HUIRoot extends LitElement { position: fixed; top: 0; width: var(--mdc-top-app-bar-width, 100%); - -webkit-backdrop-filter: var(--backdrop-filter, unset); + -webkit-backdrop-filter: var(--header-backdrop-filter, unset); padding-top: env(safe-area-inset-top); z-index: 4; transition: box-shadow 200ms linear;