GithubBackup/MoviePilot-Frontend
1
0
Fork 0
mirror of https://github.com/jxxghp/MoviePilot-Frontend.git synced 2026-06-12 03:01:54 +08:00
Code Issues Packages Projects Releases Wiki Activity

优化移动端Header UI

Browse Source
This commit is contained in:
jxxghp
2025-07-06 00:02:25 +08:00
parent a00f6ab8ff
commit 23b09d09ce
4 changed files with 35 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
src/@core/scss/template/placeholders/_misc.scss
View File

@@ -1,47 +1,38 @@
%blurry-bg {
position: relative;
background: transparent;
box-shadow: none;
&::before {
position: absolute;
z-index: -1;
// 磨砂渐变效果
backdrop-filter: blur(20px);
block-size: calc(env(safe-area-inset-top, 0px) + var(--navbar-height) + 6rem);
content: "";
inset-block-start: 0;
inset-inline: 0;
// 使用遮罩实现渐变效果
mask: linear-gradient(
to bottom,
rgba(0, 0, 0, 100%) 0%,
rgba(0, 0, 0, 90%) calc(env(safe-area-inset-top, 0px) + var(--navbar-height) + 1rem),
rgba(0, 0, 0, 70%) calc(env(safe-area-inset-top, 0px) + var(--navbar-height) + 2rem),
rgba(0, 0, 0, 50%) calc(env(safe-area-inset-top, 0px) + var(--navbar-height) + 3rem),
rgba(0, 0, 0, 30%) calc(env(safe-area-inset-top, 0px) + var(--navbar-height) + 4rem),
rgba(0, 0, 0, 10%) calc(env(safe-area-inset-top, 0px) + var(--navbar-height) + 5rem),
rgba(0, 0, 0, 0%) 100%
);
pointer-events: none;
transition: all 0.5s ease-in-out;
.v-theme--light & {
background: rgba(var(--v-theme-surface), 0.8);
}
.v-theme--dark & {
background: rgba(var(--v-theme-background), 0.6);
}
.v-theme--purple & {
background: rgba(var(--v-theme-background), 0.6);
}
@media (width <= 768px) {
background: transparent;
.v-theme--transparent & {
background: rgba(var(--v-theme-background), 0.3);
}
&::before {
position: absolute;
z-index: -1;
backdrop-filter: blur(24px);
block-size: calc(env(safe-area-inset-top, 0px) + var(--navbar-height) + 4.5rem);
box-shadow: 0 1px 3px rgba(0, 0, 0, 4%), 0 1px 2px rgba(0, 0, 0, 2%);
content: "";
inset-block-start: 0;
inset-inline: 0;
pointer-events: none;
transition: all 0.3s ease-in-out;
.v-theme--light & {
background: rgba(var(--v-theme-surface), 0.6);
}
.v-theme--dark & {
background: rgba(var(--v-theme-background), 0.5);
}
.v-theme--purple & {
background: rgba(var(--v-theme-background), 0.5);
}
.v-theme--transparent & {
background: rgba(var(--v-theme-background), 0.3);
}
}
}
}