From 712be97636bbec38c80c1154609c478840a9d61e Mon Sep 17 00:00:00 2001
From: Michael Geers <michael@geers.tv>
Date: Fri, 27 Mar 2026 15:10:42 +0100
Subject: [PATCH] Navigation: fix chrome blur (#28602)

---
 assets/css/app.css                           | 4 ++--
 assets/js/components/BottomTabs/Bar.vue      | 9 ++++-----
 assets/js/components/BottomTabs/MoreMenu.vue | 3 +--
 assets/js/views/Sessions.vue                 | 3 +--
 4 files changed, 8 insertions(+), 11 deletions(-)

diff --git a/assets/css/app.css b/assets/css/app.css
index 67b52fef5..7f3d3d336 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -94,6 +94,7 @@
 
 	--tab-bar-height: 3rem;
 	--tab-bar-background: var(--evcc-background);
+	--evcc-backdrop-blur: blur(20px);
 }
 
 :root.dark {
@@ -392,8 +393,7 @@ a:hover {
 
 .modal-backdrop {
 	--bs-backdrop-bg: var(--evcc-backdrop);
-	-webkit-backdrop-filter: blur(8px);
-	backdrop-filter: blur(8px);
+	backdrop-filter: var(--evcc-backdrop-blur);
 }
 
 .modal-backdrop.fade {
diff --git a/assets/js/components/BottomTabs/Bar.vue b/assets/js/components/BottomTabs/Bar.vue
index b7aba7cb8..c4ccd2ed0 100644
--- a/assets/js/components/BottomTabs/Bar.vue
+++ b/assets/js/components/BottomTabs/Bar.vue
@@ -98,11 +98,10 @@ export default defineComponent({
 <style scoped>
 .bottom-tab-bar {
 	z-index: 1030;
-	background: color-mix(in srgb, var(--tab-bar-background) 80%, transparent);
-	backdrop-filter: blur(20px);
-	-webkit-backdrop-filter: blur(20px);
-	border-top: 1px solid var(--evcc-gray-10);
-	box-shadow: 0 -1px 6px rgba(0, 0, 0, 0.05);
+	background: color-mix(in srgb, var(--tab-bar-background) 60%, transparent);
+	backdrop-filter: var(--evcc-backdrop-blur);
+	border-top: 1px solid var(--evcc-gray-25);
+	box-shadow: 0 -1px 6px var(--evcc-gray-25);
 	transition: transform var(--evcc-transition-fast) ease-in;
 }
 
diff --git a/assets/js/components/BottomTabs/MoreMenu.vue b/assets/js/components/BottomTabs/MoreMenu.vue
index ecb26c80d..d36d00cb8 100644
--- a/assets/js/components/BottomTabs/MoreMenu.vue
+++ b/assets/js/components/BottomTabs/MoreMenu.vue
@@ -175,8 +175,7 @@ export default defineComponent({
 	inset: 0;
 	z-index: 1029;
 	background-color: var(--evcc-backdrop);
-	-webkit-backdrop-filter: blur(8px);
-	backdrop-filter: blur(8px);
+	backdrop-filter: var(--evcc-backdrop-blur);
 	opacity: 0;
 	visibility: hidden;
 	transition:
diff --git a/assets/js/views/Sessions.vue b/assets/js/views/Sessions.vue
index a135c8b44..6f84e60a9 100644
--- a/assets/js/views/Sessions.vue
+++ b/assets/js/views/Sessions.vue
@@ -748,8 +748,7 @@ export default defineComponent({
 	right: 0;
 	top: max(0rem, env(safe-area-inset-top)) !important;
 	margin: 0 calc(calc(1.5rem + var(--vertical-shift)) * -1);
-	-webkit-backdrop-filter: blur(35px);
-	backdrop-filter: blur(35px);
+	backdrop-filter: var(--evcc-backdrop-blur);
 	background-color: #0000;
 	box-shadow: 0 1px 8px 0px var(--evcc-background);
 }