GithubBackup/MoviePilot-Frontend
1
0
Fork 0
mirror of https://github.com/jxxghp/MoviePilot-Frontend.git synced 2026-06-28 02:51:56 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

60
src/@core/scss/base/placeholders/_misc.scss
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;
}

3
src/@layouts/components/VerticalNavLayout.vue
View File

@@ -105,7 +105,6 @@ export default defineComponent({
position: relative;
z-index: 1;
margin-block-start: 0;
padding-block-start: 0;
}
.layout-wrapper.layout-nav-type-vertical {
@@ -178,7 +177,7 @@ export default defineComponent({
}
&:not(.layout-overlay-nav) .layout-content-wrapper {
padding-inline-start: calc(variables.$layout-vertical-nav-width + 0.5rem);
padding-inline-start: calc(variables.$layout-vertical-nav-width);
}
// Adjust right column pl when vertical nav is collapsed

3
src/@layouts/styles/_default-layout.scss
View File

@@ -40,7 +40,8 @@ body,
// TODO: Use grid gutter variable here;
padding-block: 1.5rem;
padding-block-start: calc(env(safe-area-inset-top) + 4.25rem);
padding-inline: 0.5rem;
padding-block-start: calc(env(safe-area-inset-top) + 4.5rem);
// display: flex;display

2
src/@layouts/styles/_placeholders.scss
View File

@@ -4,7 +4,7 @@
%boxed-content {
@at-root #{&}-spacing {
// TODO: Use grid gutter variable here
padding-inline: 0.5rem;
// padding-inline: 0.5rem;
}
inline-size: 100%;

4
src/App.vue
View File

@@ -206,8 +206,8 @@ onUnmounted(() => {
.global-blur-layer {
position: absolute;
z-index: 1;
backdrop-filter: blur(10px);
background-color: rgba(0, 0, 0, 30%);
backdrop-filter: blur(16px);
background-color: rgba(128, 128, 128, 30%);
block-size: 100%;
inline-size: 100%;
inset-block-start: 0;

15
src/styles/styles.scss
View File

@@ -326,14 +326,9 @@ html.v-overlay-scroll-blocked {
// 侧边导航栏
.layout-vertical-nav {
backdrop-filter: blur(10px);
background-color: rgba(var(--v-theme-surface), 0.5);
border-inline-end: 1px solid rgba(255, 255, 255, 10%);
}
// 导航栏
.navbar-blur::after {
background: transparent;
backdrop-filter: blur(16px);
background-color: rgba(var(--v-theme-surface), 0.2);
border-inline-end: 1px solid rgba(var(--v-theme-on-surface), 0.05);
}
// 列表
@@ -411,5 +406,9 @@ html[data-theme="transparent"] {
backdrop-filter: blur(10px);
background-color: rgb(var(--v-theme-surface), 0.5) !important;
}
.v-table thead {
background-color: rgb(var(--v-theme-surface), 0.5) !important;
}
}
}

2
src/views/setting/AccountSettingSystem.vue
View File

@@ -369,7 +369,7 @@ onDeactivated(() => {
<VCol cols="12" md="3">
<VSelect
v-model="SystemSettings.Basic.WALLPAPER"
label="登录首页壁纸"
label="背景壁纸"
hint="选择登陆页面背景来源"
persistent-hint
:items="wallpaperItems"