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

feat: add transparent glass quality options (#507)

Browse Source 
* feat(theme): add lightweight transparent glass mode

* perf(theme): reduce realtime glass backdrop filters

* fix(theme): align transparency presets
This commit is contained in:
InfinityPacer
2026-06-30 13:39:22 +08:00
committed by GitHub
parent 39ce8d93dd
commit effc83b9a1
10 changed files with 287 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/common.scss
+7
View File
@@ -707,6 +707,13 @@ html[data-theme="transparent"] .app-card-colorful,
--app-surface-border: 0 solid transparent;
}
html[data-theme="transparent"].transparent-glass-lightweight .app-card-colorful,
html[data-theme="transparent"].transparent-glass-lightweight .v-theme--transparent .app-card-colorful,
html[data-theme="transparent"].transparent-glass-realtime .app-card-colorful,
html[data-theme="transparent"].transparent-glass-realtime .v-theme--transparent .app-card-colorful {
backdrop-filter: none;
}
// 保证卡片右上角的浮动操作区始终高于可点击的卡片内容层，避免误触发详情打开。
.app-card-top-action {
z-index: 2;
src/styles/themes/transparent.scss
+119
View File
@@ -165,3 +165,122 @@ html[data-theme="transparent"] {
background-color: rgba(var(--v-theme-surface), var(--transparent-opacity-heavy));
}
}
html[data-theme="transparent"].transparent-background-blur-disabled {
.global-blur-layer,
.background-image.active {
backdrop-filter: none;
filter: none;
transform: none;
}
}
html[data-theme="transparent"].transparent-glass-lightweight {
.global-blur-layer {
display: none !important;
backdrop-filter: none !important;
}
.layout-vertical-nav,
.v-toolbar,
.v-footer,
.theme-customizer-panel-host,
.theme-customizer-panel,
.agent-assistant-panel,
.agent-assistant-fab__bubble,
.nav-button,
.layout-navbar {
backdrop-filter: blur(var(--transparent-blur));
}
.layout-vertical-nav,
.theme-customizer-panel-host,
.agent-assistant-panel {
backdrop-filter: blur(var(--transparent-blur-heavy));
}
.v-list,
.v-card:not(.no-blur, .bg-primary),
.v-sheet,
.v-expansion-panel {
backdrop-filter: none;
}
.v-card:not(.no-blur, .bg-primary),
.v-sheet,
.v-expansion-panel,
.v-list {
background-color: rgba(var(--v-theme-surface), var(--transparent-opacity));
}
.v-overlay__content,
.v-overlay__content .v-card:not(.bg-primary),
.v-overlay__content .v-list {
backdrop-filter: blur(var(--transparent-blur));
}
.v-overlay__content .v-card:not(.bg-primary),
.v-overlay__content .v-list {
background-color: rgba(var(--v-theme-surface), var(--transparent-opacity-heavy));
}
.app-card-colorful {
backdrop-filter: none;
}
}
html[data-theme="transparent"].transparent-glass-realtime {
.background-image.active {
filter: none;
transform: none;
}
.v-list,
.v-card:not(.no-blur, .bg-primary),
.v-sheet,
.v-expansion-panel {
backdrop-filter: none;
}
.layout-vertical-nav,
.v-toolbar,
.v-footer,
.theme-customizer-panel-host,
.theme-customizer-panel,
.agent-assistant-panel,
.agent-assistant-fab__bubble,
.nav-button,
.layout-navbar,
.v-overlay__content,
.v-overlay__content .v-card:not(.bg-primary),
.v-overlay__content .v-list {
backdrop-filter: blur(var(--transparent-blur));
}
.layout-vertical-nav,
.theme-customizer-panel-host,
.agent-assistant-panel {
backdrop-filter: blur(var(--transparent-blur-heavy));
}
}
html[data-theme="transparent"].transparent-blur-disabled {
.layout-vertical-nav,
.v-list,
.v-card:not(.no-blur),
.v-toolbar,
.v-footer,
.v-sheet,
.v-expansion-panel,
.v-overlay__content,
.v-overlay__content .v-card:not(.bg-primary),
.v-overlay__content .v-list,
.theme-customizer-panel-host,
.theme-customizer-panel,
.agent-assistant-panel,
.agent-assistant-fab__bubble,
.nav-button,
.layout-navbar {
backdrop-filter: none !important;
}
}