GithubBackup/MoviePilot-Frontend
1
0
Fork 0
mirror of https://github.com/jxxghp/MoviePilot-Frontend.git synced 2026-09-08 17:26:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

调整背景透明度

Browse Source
This commit is contained in:
jxxghp
2025-06-23 19:57:35 +08:00
parent 61805d13ab
commit bed21856ab
1 changed files with 22 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/@core/scss/template/placeholders/_misc.scss
+22 -48
View File
@@ -3,70 +3,44 @@
background: transparent; background: transparent;
box-shadow: none; box-shadow: none;
.v-theme--light & {
backdrop-filter: blur(16px);
background: rgba(var(--v-theme-surface), 0.9);
box-shadow: 0 0 8px 0 rgba(var(--v-theme-on-surface), 0.1);
}
&::before { &::before {
position: absolute; position: absolute;
z-index: -1; z-index: -1;
// 磨砂渐变效果
backdrop-filter: blur(20px);
block-size: calc(env(safe-area-inset-top, 0px) + 5rem); block-size: calc(env(safe-area-inset-top, 0px) + 5rem);
content: ""; content: "";
inset-block-start: 0; inset-block-start: 0;
inset-inline: 0; inset-inline: 0;
pointer-events: none;
transition: all 0.2s ease-in-out;
// 使用遮罩实现渐变效果
mask: linear-gradient(
to bottom,
rgba(0, 0, 0, 100%) 0%,
rgba(0, 0, 0, 90%) calc(env(safe-area-inset-top, 0px) + 1rem),
rgba(0, 0, 0, 70%) calc(env(safe-area-inset-top, 0px) + 2rem),
rgba(0, 0, 0, 50%) calc(env(safe-area-inset-top, 0px) + 3rem),
rgba(0, 0, 0, 20%) calc(env(safe-area-inset-top, 0px) + 4rem),
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 & { .v-theme--dark & {
background: linear-gradient( background: rgba(var(--v-theme-background), 0.6);
to bottom,
rgba(var(--v-theme-background), 1) 0%,
rgba(var(--v-theme-background), 0.8) 20%,
rgba(var(--v-theme-background), 0.6) 40%,
rgba(var(--v-theme-background), 0.4) 60%,
rgba(var(--v-theme-background), 0.2) 80%,
rgba(var(--v-theme-background), 0.0) 100%
);
} }
.v-theme--purple & { .v-theme--purple & {
background: linear-gradient( background: rgba(var(--v-theme-background), 0.6);
to bottom,
rgba(var(--v-theme-background), 1) 0%,
rgba(var(--v-theme-background), 0.8) 20%,
rgba(var(--v-theme-background), 0.6) 40%,
rgba(var(--v-theme-background), 0.4) 60%,
rgba(var(--v-theme-background), 0.2) 80%,
rgba(var(--v-theme-background), 0.0) 100%
);
} }
.v-theme--transparent & { .v-theme--transparent & {
background: linear-gradient( background: rgba(var(--v-theme-background), 0.3);
to bottom,
rgba(var(--v-theme-background), 0.5) 0%,
rgba(var(--v-theme-background), 0.4) 20%,
rgba(var(--v-theme-background), 0.3) 40%,
rgba(var(--v-theme-background), 0.2) 60%,
rgba(var(--v-theme-background), 0.1) 80%,
rgba(var(--v-theme-background), 0.0) 100%
);
@media (width <= 640px) {
background: linear-gradient(
to bottom,
rgba(var(--v-theme-background), 0.9) 0%,
rgba(var(--v-theme-background), 0.7) 20%,
rgba(var(--v-theme-background), 0.5) 40%,
rgba(var(--v-theme-background), 0.3) 60%,
rgba(var(--v-theme-background), 0.1) 80%,
rgba(var(--v-theme-background), 0.0) 100%
);
}
} }
} }
} }