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

fix(glass): align toast bubbles with menu material

Browse Source
This commit is contained in:
jxxghp
2026-08-01 07:51:25 +08:00
parent bcc5543f4c
commit ed5d955ae7
2 changed files with 28 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/styles/__tests__/glassOverlayMaterial.spec.ts
View File

@@ -76,6 +76,17 @@ describe('glass overlay material styles', () => {
)
})
it('reuses the menu overlay material for toast and assistant bubbles', () => {
const styles = readFileSync(resolve(cwd(), 'src/styles/themes/glass.scss'), 'utf8')
expect(styles).toMatch(
/:where\(\.Vue-Toastification__toast, \.agent-assistant-fab__bubble\)\s*\{[\s\S]*?backdrop-filter:\s*var\(--glass-overlay-backdrop-filter\)\s*!important;[\s\S]*?background-color:\s*var\(--glass-overlay-surface\)\s*!important;/,
)
expect(styles).toMatch(
/\.agent-assistant-fab__bubbles::before\s*\{[\s\S]*?background-color:\s*var\(--glass-overlay-surface\)\s*!important;/,
)
})
it('uses the shared hover-card contract instead of a Dashboard-specific shadow rule', () => {
const styles = readFileSync(resolve(cwd(), 'src/styles/themes/glass.scss'), 'utf8')

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

@@ -408,7 +408,7 @@ html[data-theme='glass'] {
}
}
:where(.layout-navbar, .Vue-Toastification__toast) {
.layout-navbar {
border-color: var(--glass-border-raised) !important;
-webkit-backdrop-filter: var(--glass-raised-backdrop-filter);
backdrop-filter: var(--glass-raised-backdrop-filter);
@@ -417,6 +417,22 @@ html[data-theme='glass'] {
box-shadow: var(--glass-shadow-raised) !important;
}
// Toast 与助手气泡属于临时浮层，直接复用菜单材质 token，避免磨砂档出现不同的底色与模糊强度。
:where(.Vue-Toastification__toast, .agent-assistant-fab__bubble) {
border-color: var(--glass-border-raised) !important;
-webkit-backdrop-filter: var(--glass-overlay-backdrop-filter) !important;
backdrop-filter: var(--glass-overlay-backdrop-filter) !important;
background-color: var(--glass-overlay-surface) !important;
background-image: var(--glass-sheen) !important;
box-shadow: var(--glass-shadow-raised) !important;
}
// 气泡箭头与主体使用同一菜单表面，避免边缘露出组件默认的不透明底色。
.agent-assistant-fab__bubbles::before {
background-color: var(--glass-overlay-surface) !important;
background-image: var(--glass-sheen) !important;
}
// 固定浮层、移动底栏与 Vuetify 弹出层共用材质参数，避免各入口出现不同的模糊和底色。
:where(.theme-customizer-panel-host, .agent-assistant-panel, .footer-nav-card) {
border-color: var(--glass-border-raised) !important;
@@ -586,7 +602,6 @@ html[data-theme='glass'] {
--agent-assistant-assistant-bg: var(--glass-surface);
}
.agent-assistant-fab__bubble,
.nav-button,
.compact-fab .v-btn,
.global-action-buttons .v-btn {