优化样式,调整背景模糊效果和颜色,更新组件内边距,增强视觉效果和用户体验。

This commit is contained in:
jxxghp
2025-04-20 09:11:42 +08:00
parent 95f6635591
commit 8e5ffa81a1
7 changed files with 64 additions and 25 deletions

View File

@@ -3,7 +3,7 @@
// -webkit-backdrop-filter: blur(6px);
// backdrop-filter: blur(6px);
/* stylelint-enable */
background-color: rgb(var(--v-theme-surface), 0);
background-color: transparent;
position: relative;
@@ -13,17 +13,57 @@
top: 0;
left: 0;
right: 0;
height: calc(100% + 5rem);
height: calc(env(safe-area-inset-top) + 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%
);
.v-theme--light & {
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%
);
}
.v-theme--dark & {
background: linear-gradient(
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 & {
background: linear-gradient(
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 & {
background: linear-gradient(
to bottom,
rgba(11, 11, 11, 0.8) 0%,
rgba(11, 11, 11, 0.7) 20%,
rgba(11, 11, 11, 0.6) 40%,
rgba(11, 11, 11, 0.3) 60%,
rgba(11, 11, 11, 0.1) 80%,
rgba(11, 11, 11, 0.0) 100%
);
}
}
box-shadow: none;
}