mirror of
https://github.com/jxxghp/MoviePilot-Frontend.git
synced 2026-09-05 07:28:37 +08:00
优化样式文件,注释掉冗余的样式设置,调整背景颜色和边框半径,以提升整体视觉效果和用户体验。
This commit is contained in:
@@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -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;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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 {
|
||||||
|
|||||||
Reference in New Issue
Block a user