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

Unify glass theme backdrop filters

Browse Source
This commit is contained in:
jxxghp
2026-07-23 07:05:43 +08:00
parent 1ed69ccc64
commit 441f2ecc06
1 changed files with 46 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
src/styles/themes/glass.scss
View File

@@ -37,9 +37,9 @@ html[data-theme='glass'] {
0 0 0 2px rgba(var(--v-theme-primary), 16%), inset 0 1px 0 rgba(255, 255, 255, 24%),
inset 0 -1px 0 rgba(2, 6, 16, 16%);
--glass-surface-backdrop-filter: none;
--glass-raised-backdrop-filter: blur(var(--glass-blur-raised)) saturate(var(--glass-saturate));
--glass-raised-backdrop-filter: none;
--glass-control-backdrop-filter: none;
--glass-control-prominent-backdrop-filter: blur(20px) saturate(var(--glass-saturate));
--glass-control-prominent-backdrop-filter: none;
--glass-control-icon-color: rgba(242, 245, 250, 70%);
--glass-control-placeholder-color: rgba(242, 245, 250, 54%);
--glass-control-shortcut-background: rgba(255, 255, 255, 8%);
@@ -78,7 +78,7 @@ html[data-theme='glass'] {
--app-card-light-border: 1px solid var(--glass-border);
--app-overlay-border: 1px solid var(--glass-border);
--app-grouped-list-background: var(--glass-surface);
--app-grouped-list-backdrop-filter: none;
--app-grouped-list-backdrop-filter: var(--glass-surface-backdrop-filter);
--app-grouped-list-border: 1px solid var(--glass-border);
--app-grouped-list-separator-color: rgba(255, 255, 255, 10%);
--app-grouped-list-header-color: rgba(242, 245, 250, 68%);
@@ -150,6 +150,8 @@ html[data-theme='glass'] {
--glass-control-prominent-focus-shadow:
0 0 0 2px rgba(var(--v-theme-primary), 17%), inset 0 1px 0 rgba(255, 255, 255, 34%),
inset 0 -1px 0 rgba(2, 6, 16, 18%);
--glass-surface-backdrop-filter: blur(var(--glass-blur-surface)) saturate(var(--glass-saturate));
--glass-raised-backdrop-filter: blur(var(--glass-blur-raised)) saturate(var(--glass-saturate));
--glass-control-prominent-backdrop-filter: blur(24px) saturate(150%);
--glass-blur-surface: 28px;
--glass-saturate: 150%;
@@ -377,8 +379,8 @@ html[data-theme='glass'] {
.layout-wrapper.window-scrolled.layout-navbar-fixed .layout-navbar,
.layout-wrapper.layout-horizontal-nav-active.layout-horizontal-nav-scrolled.layout-navbar-fixed .layout-navbar {
border-color: var(--glass-border) !important;
-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;
-webkit-backdrop-filter: var(--glass-raised-backdrop-filter) !important;
backdrop-filter: var(--glass-raised-backdrop-filter) !important;
background-color: var(--glass-surface-raised) !important;
background-image: var(--glass-sheen) !important;
box-shadow: var(--glass-navbar-shadow) !important;
@@ -473,8 +475,8 @@ html[data-theme='glass'] {
}
.v-overlay__scrim {
-webkit-backdrop-filter: blur(12px) saturate(120%);
backdrop-filter: blur(12px) saturate(120%);
-webkit-backdrop-filter: var(--glass-surface-backdrop-filter);
backdrop-filter: var(--glass-surface-backdrop-filter);
background: rgba(3, 7, 18, 48%);
}
@@ -486,8 +488,8 @@ html[data-theme='glass'] {
border-radius: var(--app-overlay-radius);
> :where(.v-card, .v-sheet, .v-list) {
-webkit-backdrop-filter: var(--glass-raised-backdrop-filter);
backdrop-filter: var(--glass-raised-backdrop-filter);
-webkit-backdrop-filter: var(--glass-raised-backdrop-filter) !important;
backdrop-filter: var(--glass-raised-backdrop-filter) !important;
background-color: var(--glass-surface-raised) !important;
background-image: var(--glass-sheen) !important;
box-shadow: var(--glass-shadow-raised) !important;
@@ -497,8 +499,8 @@ html[data-theme='glass'] {
.v-tooltip > .v-overlay__content,
.v-snackbar__wrapper {
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));
-webkit-backdrop-filter: var(--glass-raised-backdrop-filter);
backdrop-filter: var(--glass-raised-backdrop-filter);
background: rgba(11, 19, 34, 76%) !important;
box-shadow: var(--glass-shadow);
}
@@ -629,24 +631,30 @@ html[data-theme='glass'] {
--app-card-stripe-opacity: 0.12;
--app-card-surface-opacity: 0.08;
-webkit-backdrop-filter: none;
backdrop-filter: none;
-webkit-backdrop-filter: var(--glass-surface-backdrop-filter);
backdrop-filter: var(--glass-surface-backdrop-filter);
}
// 移动端文件整理和日历使用自定义容器，需要显式接入玻璃表面材质。
// 文件整理、日历和缓存使用自定义容器，需要同时覆盖桌面与移动端表面。
.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: none;
--transfer-history-mobile-surface-blur: var(--glass-surface-backdrop-filter);
}
.transfer-history-mobile-record,
.calendar-event-card,
.mobile-calendar-filter-card,
.mobile-calendar-event-card {
.mobile-calendar-event-card,
.cache-desktop-stat,
.cache-mobile-stat,
.cache-mobile-card,
.cache-panel-stat,
.recognition-cache-mobile-item {
border: 1px solid var(--glass-border);
-webkit-backdrop-filter: none;
backdrop-filter: none;
-webkit-backdrop-filter: var(--glass-surface-backdrop-filter);
backdrop-filter: var(--glass-surface-backdrop-filter);
background: var(--glass-surface);
}
@@ -657,12 +665,12 @@ html[data-theme='glass'] {
--logging-record-bg-even: rgba(255, 255, 255, 6%);
--logging-record-bg-odd: rgba(255, 255, 255, 3%);
--logging-shadow: inset 0 1px 0 rgba(255, 255, 255, 10%);
--logging-shell-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
--logging-shell-backdrop-filter: var(--glass-surface-backdrop-filter);
--logging-shell-background: var(--glass-surface-soft);
}
.mobile-scheduler-view {
--mobile-scheduler-card-backdrop-filter: none;
--mobile-scheduler-card-backdrop-filter: var(--glass-surface-backdrop-filter);
--mobile-scheduler-card-background: var(--glass-surface);
--mobile-scheduler-card-border: 1px solid var(--glass-border);
--mobile-scheduler-card-shadow: var(--glass-shadow);
@@ -671,7 +679,14 @@ html[data-theme='glass'] {
.mobile-subscribe-calendar {
--mobile-calendar-control-bg: var(--glass-surface-soft);
--mobile-calendar-placeholder-bg: var(--glass-surface-soft);
--mobile-calendar-surface-blur: none;
--mobile-calendar-surface-blur: var(--glass-surface-backdrop-filter);
}
// 磨砂卡片不参与仪表板整体透明度入场，避免合成层切换造成先透明后模糊的闪变。
&[data-glass-appearance='frosted'] .dashboard-grid {
opacity: 1;
transform: none;
transition: none;
}
// 用户权限编辑器由普通容器构成，通过主题变量接入玻璃表面材质。
@@ -689,8 +704,8 @@ html[data-theme='glass'] {
// 智能助手折叠区使用均匀的玻璃描边，替换普通主题渐变产生的顶部黑边。
.ai-agent-settings-card {
border: 1px solid rgba(255, 255, 255, 10%) !important;
-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) !important;
backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) !important;
-webkit-backdrop-filter: var(--glass-surface-backdrop-filter) !important;
backdrop-filter: var(--glass-surface-backdrop-filter) !important;
background: var(--glass-surface-soft) !important;
box-shadow: none !important;
}
@@ -773,11 +788,6 @@ html[data-theme='glass'] {
background: transparent !important;
box-shadow: none !important;
}
// 设置页卡片与视口边缘保持阴影缓冲，避免页面横向裁切边界截断投影。
.settings-content-window {
padding-inline: 24px;
}
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
@@ -855,13 +865,13 @@ html:is([data-glass-quality='balanced'], [data-glass-quality='high'])[data-glass
body[data-theme='glass'] {
.layout-vertical-nav::before,
.layout-navbar {
-webkit-backdrop-filter: blur(10px) saturate(140%) !important;
backdrop-filter: blur(10px) saturate(140%) !important;
-webkit-backdrop-filter: var(--glass-surface-backdrop-filter) !important;
backdrop-filter: var(--glass-surface-backdrop-filter) !important;
}
.v-overlay__content > :where(.v-card, .v-sheet, .v-list) {
-webkit-backdrop-filter: blur(12px) saturate(140%) !important;
backdrop-filter: blur(12px) saturate(140%) !important;
-webkit-backdrop-filter: var(--glass-surface-backdrop-filter) !important;
backdrop-filter: var(--glass-surface-backdrop-filter) !important;
}
.dashboard-grid-item-content > .dashboard-grid-auto-size > .dashboard-grid-content-measure > .v-card,
@@ -901,8 +911,8 @@ html[data-theme='glass'] body[data-theme='glass'] {
}
.login-card__glass {
-webkit-backdrop-filter: blur(14px) saturate(162%) contrast(108%) !important;
backdrop-filter: blur(14px) saturate(162%) contrast(108%) !important;
-webkit-backdrop-filter: var(--glass-surface-backdrop-filter) !important;
backdrop-filter: var(--glass-surface-backdrop-filter) !important;
background:
radial-gradient(
220px 190px at var(--login-card-light-x) var(--login-card-light-y),
@@ -944,8 +954,8 @@ html[data-theme='glass'] body[data-theme='glass'] {
.native-login-field {
border-color: rgba(255, 255, 255, 0.15);
background: rgba(7, 16, 28, 0.2);
-webkit-backdrop-filter: blur(10px) saturate(132%);
backdrop-filter: blur(10px) saturate(132%);
-webkit-backdrop-filter: var(--glass-control-backdrop-filter);
backdrop-filter: var(--glass-control-backdrop-filter);
}
}