Navigation: fix chrome blur (#28602)

This commit is contained in:
Michael Geers 2026-03-27 15:10:42 +01:00 • committed by GitHub
parent 0afa2b90b0
commit 712be97636
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 8 additions and 11 deletions

View file

@ -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 {

View file

@ -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;
}

View file

@ -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:

View file

@ -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);
}