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

fix(glass-theme): adjust background filter and opacity for improved contrast

Browse Source
This commit is contained in:
jxxghp
2026-07-22 20:10:17 +08:00
parent d039efbefe
commit 19e93edca0
5 changed files with 69 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.vue
+5 -4
View File
@@ -743,18 +743,19 @@ onUnmounted(() => {
.background-container.is-glass-theme .background-image.active,
.background-container.is-glass-theme .background-image.previous {
filter: brightness(0.9) saturate(0.96);
filter: brightness(0.82) saturate(0.9);
}
.background-container.is-glass-theme .background-image.active {
opacity: 0.94;
opacity: 0.92;
}
// 玻璃主题用冷色暗幕压低壁纸对比度，避免轻阴影表面与背景直接冲突。
.background-container.is-glass-theme .background-image.active::after,
.background-container.is-glass-theme .background-image.previous::after {
background:
linear-gradient(rgba(6, 10, 19, 18%) 0%, rgba(6, 10, 19, 42%) 100%),
rgba(11, 19, 34, 5%);
linear-gradient(rgba(6, 10, 19, 30%) 0%, rgba(6, 10, 19, 58%) 100%),
rgba(11, 19, 34, 10%);
}
.background-container.is-transparent-glass-lightweight .background-image.active,
src/components/dialog/UserAddEditDialog.vue
+6 -1
View File
@@ -501,7 +501,7 @@ onMounted(() => {
</div>
</VCardItem>
<VCardText>
<VForm @submit.prevent="() => {}">
<VForm class="user-info-form" @submit.prevent="() => {}">
<VDivider class="my-10">
<span>{{ t('dialog.userAddEdit.saveUserInfo') }}</span>
</VDivider>
@@ -1047,6 +1047,11 @@ onMounted(() => {
}
@media (width <= 960px) {
// 移动端响应式录入行提高右侧控件占比，给实际输入内容留出足够空间。
.user-info-form {
--app-responsive-input-control-width: 65%;
}
.permission-category-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
src/pages/recommend.vue
+2
View File
@@ -310,6 +310,8 @@ onActivated(async () => {
.content-group :deep(.slider-content-wrapper) {
content-visibility: auto;
contain-intrinsic-block-size: 16rem;
margin-block: calc(var(--slider-shadow-bleed-start) * -1) calc(var(--slider-shadow-bleed-end) * -1);
padding-block: var(--slider-shadow-bleed-start) var(--slider-shadow-bleed-end);
}
.empty-category {
src/pages/setting.vue
+1 -1
View File
@@ -62,7 +62,7 @@ watch(activeTab, markTabVisited, { immediate: true })
<template>
<div>
<VWindow v-model="activeTab" class="disable-tab-transition" :touch="false">
<VWindow v-model="activeTab" class="settings-content-window disable-tab-transition" :touch="false">
<VWindowItem v-for="item in settingTabComponents" :key="item.value" :value="item.value">
<transition name="fade-slide" appear>
<div>
src/styles/themes/glass.scss
+55 -16
View File
@@ -10,13 +10,15 @@ html[data-theme='glass'] {
--glass-border-hover: rgba(255, 255, 255, 28%);
--glass-highlight: rgba(255, 255, 255, 22%);
--glass-shadow:
0 16px 40px rgba(3, 7, 18, 50%), inset 0 1px 0 var(--glass-highlight), inset 0 -1px 0 rgba(2, 6, 16, 35%);
0 6px 18px rgba(3, 7, 18, 28%), inset 0 1px 0 rgba(255, 255, 255, 18%), inset 0 -1px 0 rgba(2, 6, 16, 22%);
--glass-shadow-raised:
0 20px 52px rgba(3, 7, 18, 58%), 0 0 0 1px rgba(255, 255, 255, 5%), inset 0 1px 0 rgba(255, 255, 255, 25%),
inset 0 -1px 0 rgba(2, 6, 16, 38%);
0 10px 28px rgba(3, 7, 18, 34%), 0 0 0 1px rgba(255, 255, 255, 4%), inset 0 1px 0 rgba(255, 255, 255, 22%),
inset 0 -1px 0 rgba(2, 6, 16, 26%);
--glass-shadow-hover:
0 22px 60px rgba(3, 7, 18, 64%), 0 0 0 1px rgba(255, 255, 255, 8%), inset 0 1px 0 rgba(255, 255, 255, 32%),
inset 0 -1px 0 rgba(2, 6, 16, 40%);
0 12px 32px rgba(3, 7, 18, 38%), 0 0 0 1px rgba(255, 255, 255, 6%), inset 0 1px 0 rgba(255, 255, 255, 27%),
inset 0 -1px 0 rgba(2, 6, 16, 28%);
--glass-navbar-shadow:
0 3px 12px rgba(3, 7, 18, 18%), inset 0 1px 0 rgba(255, 255, 255, 10%), inset 0 -1px 0 rgba(2, 6, 16, 12%);
--glass-blur: 40px;
--glass-blur-raised: 60px;
--glass-saturate: 180%;
@@ -27,7 +29,7 @@ html[data-theme='glass'] {
--app-fab-shadow-strong: var(--glass-shadow-raised);
--app-fab-shadow-hover: var(--glass-shadow-hover);
--app-fab-shadow-strong-hover: var(--glass-shadow-hover);
--app-fab-shadow-active: 0 8px 22px rgba(3, 7, 18, 48%), inset 0 1px 0 rgba(255, 255, 255, 18%);
--app-fab-shadow-active: 0 3px 10px rgba(3, 7, 18, 24%), inset 0 1px 0 rgba(255, 255, 255, 16%);
--app-overlay-shadow: var(--glass-shadow-raised);
--app-surface-shadow: var(--glass-shadow);
--app-surface-hover-shadow: var(--glass-shadow-hover);
@@ -119,10 +121,6 @@ html[data-theme='glass'] {
z-index: 1;
}
.layout-page-content {
background-color: rgba(255, 255, 255, 2.5%);
}
:where(
.app-surface:not(.no-blur),
.v-card:not(.no-blur, .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-error),
@@ -160,6 +158,11 @@ html[data-theme='glass'] {
box-shadow: var(--glass-shadow-raised) !important;
}
// 顶栏使用更轻的投影，避免与下方内容形成内陷感。
.layout-navbar {
box-shadow: var(--glass-navbar-shadow) !important;
}
.layout-vertical-nav {
border-inline-end: 1px solid var(--glass-border);
}
@@ -170,7 +173,7 @@ html[data-theme='glass'] {
-webkit-backdrop-filter: blur(var(--glass-blur-raised)) saturate(var(--glass-saturate)) !important;
backdrop-filter: blur(var(--glass-blur-raised)) saturate(var(--glass-saturate)) !important;
background: var(--glass-surface-raised) !important;
box-shadow: var(--glass-shadow-raised) !important;
box-shadow: var(--glass-navbar-shadow) !important;
}
.layout-wrapper.window-scrolled.layout-navbar-fixed .layout-navbar .navbar-content-container,
@@ -342,9 +345,9 @@ html[data-theme='glass'] {
backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
background-color: rgba(255, 255, 255, 10%) !important;
box-shadow:
0 4px 16px rgba(3, 7, 18, 45%),
inset 0 1px 0 rgba(255, 255, 255, 25%),
inset 0 -1px 0 rgba(2, 6, 16, 30%) !important;
0 2px 8px rgba(3, 7, 18, 24%),
inset 0 1px 0 rgba(255, 255, 255, 20%),
inset 0 -1px 0 rgba(2, 6, 16, 18%) !important;
}
.v-btn.bg-primary {
@@ -410,6 +413,35 @@ html[data-theme='glass'] {
backdrop-filter: blur(var(--glass-blur-raised)) saturate(var(--glass-saturate));
}
// 移动端文件整理和日历使用自定义容器，需要显式接入玻璃表面材质。
.transfer-history-mobile-page {
--transfer-history-mobile-search-bg: var(--glass-surface-soft);
--transfer-history-mobile-muted-bg: var(--glass-surface-soft);
--transfer-history-mobile-border: var(--glass-border);
--transfer-history-mobile-surface-blur: blur(var(--glass-blur)) saturate(var(--glass-saturate));
}
.transfer-history-mobile-record,
.mobile-calendar-filter-card,
.mobile-calendar-event-card {
border: 1px solid var(--glass-border);
-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
background: var(--glass-surface);
}
.mobile-subscribe-calendar {
--mobile-calendar-control-bg: var(--glass-surface-soft);
--mobile-calendar-placeholder-bg: var(--glass-surface-soft);
--mobile-calendar-surface-blur: blur(var(--glass-blur)) saturate(var(--glass-saturate));
}
// 横向榜单的滚动容器需要完整容纳玻璃卡片向上下扩散的阴影。
.slider-container {
--slider-shadow-bleed-start: 36px;
--slider-shadow-bleed-end: 64px;
}
:where(.v-card, .v-sheet)
:where(.app-surface, .v-card, .v-sheet, .v-list, .v-table, .v-expansion-panel, .v-stepper) {
border-color: transparent !important;
@@ -436,8 +468,8 @@ html[data-theme='glass'] {
border-color: var(--glass-border-hover);
background-color: rgba(255, 255, 255, 15%) !important;
box-shadow:
0 10px 32px rgba(3, 7, 18, 55%),
inset 0 1px 0 rgba(255, 255, 255, 35%) !important;
0 5px 16px rgba(3, 7, 18, 28%),
inset 0 1px 0 rgba(255, 255, 255, 26%) !important;
}
.v-btn.bg-primary:hover {
@@ -475,6 +507,13 @@ html[data-theme='glass'] {
transform: scale(0.97);
}
@media (width <= 960px) {
// 设置页卡片与视口边缘保持阴影缓冲，避免页面横向裁切边界截断投影。
.settings-content-window {
padding-inline: 24px;
}
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
:where(
.app-surface,