Navigation: solid blur fallback (#28755)
This commit is contained in:
parent
196c56fab7
commit
fe5492cba0
2 changed files with 16 additions and 4 deletions
|
|
@ -98,13 +98,19 @@ export default defineComponent({
|
|||
<style scoped>
|
||||
.bottom-tab-bar {
|
||||
z-index: 1030;
|
||||
background: color-mix(in srgb, var(--tab-bar-background) 60%, transparent);
|
||||
backdrop-filter: var(--evcc-backdrop-blur);
|
||||
background: var(--tab-bar-background);
|
||||
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;
|
||||
}
|
||||
|
||||
@supports (backdrop-filter: blur(1px)) {
|
||||
.bottom-tab-bar {
|
||||
background: color-mix(in srgb, var(--tab-bar-background) 60%, transparent);
|
||||
backdrop-filter: var(--evcc-backdrop-blur);
|
||||
}
|
||||
}
|
||||
|
||||
.bottom-tab-bar--hidden {
|
||||
transform: translateY(100%);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -748,11 +748,17 @@ export default defineComponent({
|
|||
right: 0;
|
||||
top: max(0rem, env(safe-area-inset-top)) !important;
|
||||
margin: 0 calc(calc(1.5rem + var(--vertical-shift)) * -1);
|
||||
backdrop-filter: var(--evcc-backdrop-blur);
|
||||
background-color: #0000;
|
||||
background-color: var(--evcc-background);
|
||||
box-shadow: 0 1px 8px 0px var(--evcc-background);
|
||||
}
|
||||
|
||||
@supports (backdrop-filter: blur(1px)) {
|
||||
.header-outer {
|
||||
background-color: #0000;
|
||||
backdrop-filter: var(--evcc-backdrop-blur);
|
||||
}
|
||||
}
|
||||
|
||||
@media (--sm-and-up) {
|
||||
.header-outer {
|
||||
--vertical-shift: calc((100vw - 560px) / 2);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue