mirror of
https://github.com/jxxghp/MoviePilot-Frontend.git
synced 2026-09-06 08:06:43 +08:00
Optimize glass theme rendering performance
This commit is contained in:
@@ -19,9 +19,9 @@ html[data-theme='glass'] {
|
|||||||
inset 0 -1px 0 rgba(2, 6, 16, 28%);
|
inset 0 -1px 0 rgba(2, 6, 16, 28%);
|
||||||
--glass-navbar-shadow:
|
--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%);
|
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: 24px;
|
||||||
--glass-blur-raised: 60px;
|
--glass-blur-raised: 32px;
|
||||||
--glass-saturate: 180%;
|
--glass-saturate: 150%;
|
||||||
--glass-motion: 500ms cubic-bezier(0.16, 1, 0.3, 1);
|
--glass-motion: 500ms cubic-bezier(0.16, 1, 0.3, 1);
|
||||||
--app-card-rest-shadow: var(--glass-shadow);
|
--app-card-rest-shadow: var(--glass-shadow);
|
||||||
--app-card-hover-shadow: var(--glass-shadow-hover);
|
--app-card-hover-shadow: var(--glass-shadow-hover);
|
||||||
@@ -131,7 +131,8 @@ html[data-theme='glass'] {
|
|||||||
.fade-slide-enter-active,
|
.fade-slide-enter-active,
|
||||||
.fade-slide-leave-active,
|
.fade-slide-leave-active,
|
||||||
.fade-transition-enter-active,
|
.fade-transition-enter-active,
|
||||||
.fade-transition-leave-active
|
.fade-transition-leave-active,
|
||||||
|
.module-item-enter-active
|
||||||
) {
|
) {
|
||||||
animation: none !important;
|
animation: none !important;
|
||||||
transition: none !important;
|
transition: none !important;
|
||||||
@@ -146,13 +147,24 @@ html[data-theme='glass'] {
|
|||||||
.fade-slide-enter-from,
|
.fade-slide-enter-from,
|
||||||
.fade-slide-leave-to,
|
.fade-slide-leave-to,
|
||||||
.fade-transition-enter-from,
|
.fade-transition-enter-from,
|
||||||
.fade-transition-leave-to
|
.fade-transition-leave-to,
|
||||||
|
.module-item-enter-from,
|
||||||
|
.module-item-enter-to
|
||||||
) {
|
) {
|
||||||
filter: none !important;
|
filter: none !important;
|
||||||
opacity: 1 !important;
|
opacity: 1 !important;
|
||||||
transform: none !important;
|
transform: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 异步卡片批次不再通过父层透明度或位移动画入场,避免整组玻璃表面重新合成。
|
||||||
|
.dashboard-grid,
|
||||||
|
.stream-result-item {
|
||||||
|
animation: none !important;
|
||||||
|
opacity: 1 !important;
|
||||||
|
transform: none !important;
|
||||||
|
transition: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
// Overlay 的过渡类挂在玻璃表面的父层上,统一保持最终合成状态可覆盖菜单、选择器和弹窗。
|
// Overlay 的过渡类挂在玻璃表面的父层上,统一保持最终合成状态可覆盖菜单、选择器和弹窗。
|
||||||
.v-overlay__content[class*='-transition-enter-'],
|
.v-overlay__content[class*='-transition-enter-'],
|
||||||
.v-overlay__content[class*='-transition-leave-'] {
|
.v-overlay__content[class*='-transition-leave-'] {
|
||||||
@@ -164,6 +176,34 @@ html[data-theme='glass'] {
|
|||||||
will-change: auto !important;
|
will-change: auto !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 提前为实际使用背景滤镜的表面建立合成提示,减少动态插入后的首帧材质延迟。
|
||||||
|
:where(
|
||||||
|
.app-surface:not(.no-blur),
|
||||||
|
.v-card:not(.no-blur, .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-error),
|
||||||
|
.v-sheet:not(.no-blur, .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-error),
|
||||||
|
.v-list,
|
||||||
|
.v-toolbar,
|
||||||
|
.v-footer,
|
||||||
|
.v-expansion-panel,
|
||||||
|
.v-stepper,
|
||||||
|
.v-table,
|
||||||
|
.layout-vertical-nav,
|
||||||
|
.layout-navbar,
|
||||||
|
.footer-nav-card,
|
||||||
|
.theme-customizer-panel-host,
|
||||||
|
.agent-assistant-panel,
|
||||||
|
.v-tooltip > .v-overlay__content,
|
||||||
|
.v-snackbar__wrapper,
|
||||||
|
.transfer-history-mobile-record,
|
||||||
|
.mobile-calendar-filter-card,
|
||||||
|
.mobile-calendar-event-card,
|
||||||
|
.mobile-scheduler-card,
|
||||||
|
.logging-shell,
|
||||||
|
.ai-agent-settings-card
|
||||||
|
) {
|
||||||
|
will-change: backdrop-filter;
|
||||||
|
}
|
||||||
|
|
||||||
:where(
|
:where(
|
||||||
.app-surface:not(.no-blur),
|
.app-surface:not(.no-blur),
|
||||||
.v-card:not(.no-blur, .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-error),
|
.v-card:not(.no-blur, .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-error),
|
||||||
@@ -533,6 +573,7 @@ html[data-theme='glass'] {
|
|||||||
-webkit-backdrop-filter: none;
|
-webkit-backdrop-filter: none;
|
||||||
backdrop-filter: none;
|
backdrop-filter: none;
|
||||||
box-shadow: none !important;
|
box-shadow: none !important;
|
||||||
|
will-change: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
:where(.v-card, .v-sheet)
|
:where(.v-card, .v-sheet)
|
||||||
|
|||||||
Reference in New Issue
Block a user