refactor(theme-yun): unify nav menu glassmorphism styles with CSS variables

YunYouJun · YunYouJun · commit c64d52107ecb · 2026-03-30T03:25:42.000+08:00
- Extract nav bg color and blur as CSS variables (--yun-nav-bg-color, --yun-nav-blur)
- Add light/dark mode defaults in css-vars.scss
- Replace hardcoded shadow in Nimbo .play with UnoCSS shadow class
- Simplify Nimbo .play styles: remove redundant top/left/right, unused border-color and box-shadow
- Replace transition: all with explicit property list for better performance
- Add scoped styles to Strato nav menu for consistent glassmorphism effect
- Reduce home layout bottom padding (pb-8 → pb-4)
diff --git a/packages/valaxy-theme-yun/components/theme/nimbo/YunNimboNavMenu.vue b/packages/valaxy-theme-yun/components/theme/nimbo/YunNimboNavMenu.vue
@@ -47,7 +47,7 @@ const app = useAppStore()
       v-if="showMenu"
       class="yun-nav-menu z-$yun-z-nav-menu fixed bg-transparent"
       :class="{
-        play: playAnimation,
+        'shadow play': playAnimation,
       }"
     >
       <!--  -->
@@ -113,7 +113,6 @@ const app = useAppStore()
   // safari not support
   // animation-timeline: scroll();
   // animation-range: 0 calc(30vh), exit;
-  box-shadow: none;
   display: flex;
 
   // top: var(--rect-margin);
@@ -126,19 +125,14 @@ const app = useAppStore()
   align-items: center;
   justify-content: space-between;
   height: var(--yun-nav-height, 50px);
-  transition: all var(--va-transition-duration-moderate) map.get($cubic-bezier, 'ease-in');
+  transition: background-color var(--va-transition-duration-moderate) map.get($cubic-bezier, 'ease-in'),
+    backdrop-filter var(--va-transition-duration-moderate) map.get($cubic-bezier, 'ease-in'),
+    box-shadow var(--va-transition-duration-moderate) map.get($cubic-bezier, 'ease-in');
 
   &.play {
-    top: 0;
-    left: 0;
-    right: 0;
-    background-color: var(--va-c-bg);
-    border-color: rgb(0 0 0 / 0.1);
-
-    --un-shadow: var(--un-shadow-inset) 0 20px 25px -5px var(--un-shadow-color, rgb(0 0 0 / 0.1)), var(--un-shadow-inset) 0 8px 10px -6px var(--un-shadow-color, rgb(0 0 0 / 0.1));
-
-    box-shadow: var(--un-ring-offset-shadow), var(--un-ring-shadow),
-      var(--un-shadow);
+    background-color: var(--yun-nav-bg-color);
+    backdrop-filter: blur(var(--yun-nav-blur));
+    -webkit-backdrop-filter: blur(var(--yun-nav-blur));
   }
 
   .vt-hamburger-top, .vt-hamburger-middle, .vt-hamburger-bottom {
diff --git a/packages/valaxy-theme-yun/components/theme/strato/YunStratoNavMenu.vue b/packages/valaxy-theme-yun/components/theme/strato/YunStratoNavMenu.vue
@@ -87,3 +87,19 @@ const isHomePage = computed(() => route.meta.layout === 'home')
     </div>
   </Transition>
 </template>
+
+<style lang="scss" scoped>
+@use 'sass:map';
+@use 'valaxy-theme-yun/styles/vars.scss' as *;
+
+.yun-nav-menu {
+  height: var(--yun-nav-height, 50px);
+  transition: all var(--va-transition-duration-moderate) map.get($cubic-bezier, 'ease-in');
+
+  &.play {
+    background-color: var(--yun-nav-bg-color);
+    backdrop-filter: blur(var(--yun-nav-blur));
+    -webkit-backdrop-filter: blur(var(--yun-nav-blur));
+  }
+}
+</style>
diff --git a/packages/valaxy-theme-yun/layouts/home.vue b/packages/valaxy-theme-yun/layouts/home.vue
@@ -19,7 +19,7 @@ const showNotice = computed(() => {
 
 <template>
   <YunLayoutWrapper :no-margin="!isPage">
-    <div class="w-full flex flex-col items-center pb-8">
+    <div class="w-full flex flex-col items-center pb-4">
       <template v-if="themeConfig.banner?.enable">
         <template v-if="!isPage">
           <div class="w-full">
diff --git a/packages/valaxy-theme-yun/styles/css-vars.scss b/packages/valaxy-theme-yun/styles/css-vars.scss
@@ -9,6 +9,8 @@
   --yun-home-hero-name-background: linear-gradient(120deg, var(--va-c-text) 30%, black);
   --yun-home-hero-image-background-image: linear-gradient(-45deg, #bd34fe 50%, #47caff 50%);
   --yun-nav-height: 50px;
+  --yun-nav-bg-color: rgb(255 255 255 / 0.8);
+  --yun-nav-blur: 12px;
 }
 
 :root {
@@ -31,6 +33,7 @@ html.dark {
   --va-c-bg: #1a1a1d;
   --va-c-bg-soft: #121215;
   --yun-home-hero-name-background: linear-gradient(120deg, var(--va-c-primary) 30%, #41d1ff);
+  --yun-nav-bg-color: rgb(26 26 29 / 0.8);
 }
 
 // animation

Original file line number	Diff line number	Diff line change
`@@ -9,6 +9,8 @@`
`9`	`9`	`--yun-home-hero-name-background: linear-gradient(120deg, var(--va-c-text) 30%, black);`
`10`	`10`	`--yun-home-hero-image-background-image: linear-gradient(-45deg, #bd34fe 50%, #47caff 50%);`
`11`	`11`	`--yun-nav-height: 50px;`
	`12`	`+ --yun-nav-bg-color: rgb(255 255 255 / 0.8);`
	`13`	`+ --yun-nav-blur: 12px;`
`12`	`14`	`}`
`13`	`15`
`14`	`16`	`:root {`
`@@ -31,6 +33,7 @@ html.dark {`
`31`	`33`	`--va-c-bg: #1a1a1d;`
`32`	`34`	`--va-c-bg-soft: #121215;`
`33`	`35`	`--yun-home-hero-name-background: linear-gradient(120deg, var(--va-c-primary) 30%, #41d1ff);`
	`36`	`+ --yun-nav-bg-color: rgb(26 26 29 / 0.8);`
`34`	`37`	`}`
`35`	`38`
`36`	`39`	`// animation`