diff --git a/src/styles/__tests__/glassOverlayMaterial.spec.ts b/src/styles/__tests__/glassOverlayMaterial.spec.ts index e918aacf..6fbc20bf 100644 --- a/src/styles/__tests__/glassOverlayMaterial.spec.ts +++ b/src/styles/__tests__/glassOverlayMaterial.spec.ts @@ -150,6 +150,21 @@ describe('glass overlay material styles', () => { expect(styles).not.toMatch(/\.v-chip--variant-(?:outlined|text|plain)\s*\{/) }) + it('shares a sampling-free chip material without reducing the main frosted surfaces', () => { + const styles = readFileSync(resolve(cwd(), 'src/styles/themes/glass.scss'), 'utf8') + + expect(styles.match(/--glass-chip-backdrop-filter:[^;]+;/gu)).toEqual(['--glass-chip-backdrop-filter: none;']) + expect(styles.match(/--glass-chip-sheen:/gu)).toHaveLength(2) + expect(styles).toContain('linear-gradient(rgba(11, 19, 34, 42%), rgba(11, 19, 34, 42%))') + expect(styles).toContain('--glass-chip-tint-opacity: calc(') + expect(styles).toContain('--glass-sidebar-backdrop-filter: blur(var(--glass-sidebar-diffusion-blur))') + expect(styles).toContain( + '--glass-native-surface-backdrop-filter: blur(calc(10px * var(--glass-frost-blur-scale, 1)))', + ) + expect(styles).toContain("url('#glass-navbar-live-refraction-high')") + expect(styles).toContain("url('#glass-navbar-live-refraction-balanced')") + }) + it('keeps media source links and episode group cards on glass material tokens', () => { const mediaDetail = readFileSync(resolve(cwd(), 'src/views/discover/MediaDetailView.vue'), 'utf8') const mediaSourceRule = mediaDetail.match( diff --git a/src/styles/themes/glass.scss b/src/styles/themes/glass.scss index bd6f86e0..b649c5ce 100644 --- a/src/styles/themes/glass.scss +++ b/src/styles/themes/glass.scss @@ -67,8 +67,8 @@ html[data-theme='glass'] { --glass-control-shortcut-background: rgba(255, 255, 255, 8%); --glass-control-shortcut-border: rgba(255, 255, 255, 12%); --glass-control-shortcut-color: rgba(242, 245, 250, 68%); - // Chip 面积很小,使用更明显的镜面层与色相透光,避免标签在背景采样中变成灰色。 - --glass-chip-backdrop-filter: saturate(150%) brightness(var(--glass-transmission-brightness)); + // 小标签由透光底色与镜面高光承载材质,不为每个标签重复采样背景;光学预算留给主要表面。 + --glass-chip-backdrop-filter: none; --glass-chip-sheen: linear-gradient(135deg, rgba(255, 255, 255, 12%), transparent 38%, rgba(255, 255, 255, 3%) 72%, transparent), linear-gradient(rgba(11, 19, 34, 36%), rgba(11, 19, 34, 36%)); @@ -190,7 +190,6 @@ html[data-theme='glass'] { --glass-overlay-blur: 0px; --glass-overlay-saturate: 120%; --glass-overlay-scrim: rgba(3, 7, 18, 32%); - --glass-chip-backdrop-filter: saturate(165%) brightness(var(--glass-transmission-brightness)); } // 磨砂材质使用更亮的散射表面,但仍只让高价值层执行实时背景采样。 @@ -261,14 +260,10 @@ html[data-theme='glass'] { --glass-overlay-blur: min(var(--glass-blur-raised), 36px); --glass-overlay-saturate: 135%; --glass-overlay-scrim: rgba(3, 7, 18, 36%); - --glass-chip-backdrop-filter: blur(14px) saturate(175%) brightness(var(--glass-transmission-brightness)); - --glass-chip-sheen: linear-gradient( - 135deg, - rgba(255, 255, 255, 14%), - transparent 36%, - rgba(255, 255, 255, 5%) 72%, - transparent - ); + // 高光负责透光感,轻量吸收底面隔开海报细节与标签文字,不重新建立背景滤镜。 + --glass-chip-sheen: + linear-gradient(135deg, rgba(255, 255, 255, 14%), transparent 36%, rgba(255, 255, 255, 5%) 72%, transparent), + linear-gradient(rgba(11, 19, 34, 42%), rgba(11, 19, 34, 42%)); --glass-blur-surface: 40px; --glass-blur: 40px; --glass-blur-raised: 60px;