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

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

View File

@@ -17,13 +17,13 @@ $header: ".layout-navbar";
@if variables.$vertical-nav-navbar-style == "elevated" {
// Add transition
#{$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 variables.$layout-vertical-nav-navbar-is-contained {
#{$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} {
@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));

View File

@@ -7,11 +7,11 @@
}
%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 variables.$layout-vertical-nav-navbar-is-contained {
padding-inline: 1rem;
// padding-inline: 1rem;
}
}

View File

@@ -1,7 +1,29 @@
%blurry-bg {
/* stylelint-disable property-no-vendor-prefix */
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
/* stylelint-enable */
background-color: rgb(var(--v-theme-surface), 0.8);
/* stylelint-disable property-no-vendor-prefix */
// -webkit-backdrop-filter: blur(6px);
// backdrop-filter: blur(6px);
/* stylelint-enable */
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;
}

View File

@@ -131,7 +131,7 @@ export default defineComponent({
@include mixins.boxed-content;
} @else {
.navbar-content-container {
@include mixins.boxed-content;
// @include mixins.boxed-content;
}
}
}

View File

@@ -128,7 +128,7 @@ export default defineComponent({
inset-block-start: 0;
.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 {
@@ -138,7 +138,7 @@ export default defineComponent({
@include mixins.boxed-content;
} @else {
.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-navbar {
inline-size: calc(100% - 0.5rem);
margin-inline-start: 0.5rem;
padding-inline-start: 0;
inline-size: 100%;
padding-inline: 0;
}
}
</style>

View File

@@ -29,6 +29,7 @@ body,
.navbar-content-container {
padding-block-start: env(safe-area-inset-top);
padding-inline: 0.5rem;
}
.layout-page-content {