optovia/webapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): refresh glass header and map bottom sheets
All checks were successful
Build Docker Image / build (push) Successful in 5m23s
Details

Browse Source
This commit is contained in:
Ruslan Bakiev
2026-03-08 08:56:58 +07:00
parent 4001756c3c
commit e4d6c9ce81
4 changed files with 118 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
app/layouts/topnav.vue
View File

@@ -8,7 +8,8 @@
<div class="flex-1 flex flex-col" :style="contentStyle">
<!-- Fixed Header Container -->
<div class="fixed top-0 left-0 right-0 z-40" :style="headerContainerStyle">
<div class="liquid-header fixed top-0 left-0 right-0 z-40" :style="headerContainerStyle">
<div class="liquid-header-backdrop" aria-hidden="true" />
<!-- Animated background for home page -->
<HeroBackground v-if="isHomePage" :collapse-progress="collapseProgress" />
@@ -357,3 +358,21 @@ const onSearch = () => {
searchTrigger.value++
}
</script>
<style scoped>
.liquid-header {
background: transparent;
}
.liquid-header-backdrop {
position: absolute;
inset: 0;
height: 320%;
background: rgba(255, 255, 255, 0.08);
-webkit-backdrop-filter: blur(16px) saturate(180%);
backdrop-filter: blur(16px) saturate(180%);
-webkit-mask-image: linear-gradient(to bottom, black 0%, black 22%, rgba(0, 0, 0, 0.45) 42%, rgba(0, 0, 0, 0.12) 68%, transparent 100%);
mask-image: linear-gradient(to bottom, black 0%, black 22%, rgba(0, 0, 0, 0.45) 42%, rgba(0, 0, 0, 0.12) 68%, transparent 100%);
pointer-events: none;
}
</style>