优化样式文件,注释掉冗余的样式设置,调整背景颜色和边框半径,以提升整体视觉效果和用户体验。

This commit is contained in:
jxxghp
2025-04-19 21:43:25 +08:00
parent af20a6c821
commit 78f04c4b4b
6 changed files with 38 additions and 16 deletions
@@ -17,13 +17,13 @@ $header: ".layout-navbar";
@if variables.$vertical-nav-navbar-style == "elevated" { @if variables.$vertical-nav-navbar-style == "elevated" {
// Add transition // Add transition
#{$header} { #{$header} {
transition: padding 0.2s ease, background-color 0.18s ease; // transition: padding 0.2s ease, background-color 0.18s ease;
} }
// If navbar is contained => Add border radius to header // If navbar is contained => Add border radius to header
@if variables.$layout-vertical-nav-navbar-is-contained { @if variables.$layout-vertical-nav-navbar-is-contained {
#{$header} { #{$header} {
border-radius: 0 0 variables.$default-layout-with-vertical-nav-navbar-footer-roundness variables.$default-layout-with-vertical-nav-navbar-footer-roundness; // border-radius: 0 0 variables.$default-layout-with-vertical-nav-navbar-footer-roundness variables.$default-layout-with-vertical-nav-navbar-footer-roundness;
} }
} }
@@ -64,7 +64,7 @@ $header: ".layout-navbar";
#{$header} { #{$header} {
@if variables.$layout-vertical-nav-navbar-is-contained { @if variables.$layout-vertical-nav-navbar-is-contained {
border-radius: variables.$default-layout-with-vertical-nav-navbar-footer-roundness; // border-radius: variables.$default-layout-with-vertical-nav-navbar-footer-roundness;
} }
background-color: rgb(var(--v-theme-surface)); background-color: rgb(var(--v-theme-surface));
@@ -7,11 +7,11 @@
} }
%default-layout-vertical-nav-floating-navbar-and-sticky-elevated-navbar-scrolled { %default-layout-vertical-nav-floating-navbar-and-sticky-elevated-navbar-scrolled {
@include mixins.elevation(variables.$vertical-nav-navbar-elevation); // @include mixins.elevation(variables.$vertical-nav-navbar-elevation);
// If navbar is contained => Squeeze navbar content on scroll // If navbar is contained => Squeeze navbar content on scroll
@if variables.$layout-vertical-nav-navbar-is-contained { @if variables.$layout-vertical-nav-navbar-is-contained {
padding-inline: 1rem; // padding-inline: 1rem;
} }
} }
+27 -5
View File
@@ -1,7 +1,29 @@
%blurry-bg { %blurry-bg {
/* stylelint-disable property-no-vendor-prefix */ /* stylelint-disable property-no-vendor-prefix */
-webkit-backdrop-filter: blur(6px); // -webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px); // backdrop-filter: blur(6px);
/* stylelint-enable */ /* stylelint-enable */
background-color: rgb(var(--v-theme-surface), 0.8); background-color: rgb(var(--v-theme-surface), 0);
position: relative;
&::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: calc(100% + 5rem);
pointer-events: none;
z-index: -1;
background: linear-gradient(
to bottom,
rgba(var(--v-theme-background), 1) 0%,
rgba(var(--v-theme-background), 0.9) 25%,
rgba(var(--v-theme-background), 0.7) 50%,
rgba(var(--v-theme-background), 0.3) 75%,
rgba(var(--v-theme-background), 0.0) 100%
);
}
box-shadow: none;
} }
+1 -1
View File
@@ -131,7 +131,7 @@ export default defineComponent({
@include mixins.boxed-content; @include mixins.boxed-content;
} @else { } @else {
.navbar-content-container { .navbar-content-container {
@include mixins.boxed-content; // @include mixins.boxed-content;
} }
} }
} }
@@ -128,7 +128,7 @@ export default defineComponent({
inset-block-start: 0; inset-block-start: 0;
.navbar-content-container { .navbar-content-container {
block-size: calc(env(safe-area-inset-top) + variables.$layout-vertical-nav-navbar-height); block-size: calc(env(safe-area-inset-top) + variables.$layout-vertical-nav-navbar-height + 15px);
} }
@at-root { @at-root {
@@ -138,7 +138,7 @@ export default defineComponent({
@include mixins.boxed-content; @include mixins.boxed-content;
} @else { } @else {
.navbar-content-container { .navbar-content-container {
@include mixins.boxed-content; // @include mixins.boxed-content;
} }
} }
} }
@@ -210,9 +210,8 @@ export default defineComponent({
.layout-wrapper.layout-nav-type-vertical.layout-overlay-nav { .layout-wrapper.layout-nav-type-vertical.layout-overlay-nav {
.layout-navbar { .layout-navbar {
inline-size: calc(100% - 0.5rem); inline-size: 100%;
margin-inline-start: 0.5rem; padding-inline: 0;
padding-inline-start: 0;
} }
} }
</style> </style>
+1
View File
@@ -29,6 +29,7 @@ body,
.navbar-content-container { .navbar-content-container {
padding-block-start: env(safe-area-inset-top); padding-block-start: env(safe-area-inset-top);
padding-inline: 0.5rem;
} }
.layout-page-content { .layout-page-content {