diff --git a/frontend/web/src/styles/index.css b/frontend/web/src/styles/index.css index ef21aee..055679a 100644 --- a/frontend/web/src/styles/index.css +++ b/frontend/web/src/styles/index.css @@ -76,31 +76,33 @@ body { box-shadow: var(--mu-shadow-3), inset 0 1px 0 var(--mu-liquid-rim); } -/* 轻量液态玻璃 —— 用于聊天气泡:只在表面叠一层很淡的内高光 + 细折射描边 + - 极轻 backdrop blur,不改变底色/文字色,避免过度玻璃化影响文字观感。 - (对比 .liquid-glass:去掉厚重 blur/shadow,保留液态玻璃的"内高光+折射"精髓) */ +/* 轻量液态玻璃毛玻璃 —— 聊天气泡:半透明(透出底层背景)+ 内高光/折射描边 + + 适度的 backdrop blur 把透出的背景柔化成毛玻璃。主人要求"气泡能隐约看到背景"。 + 不透明度 ~68%,blur 中等,既透背景又不影响文字可读。 */ .liquid-glass-soft { position: relative; background: linear-gradient(135deg, var(--mu-liquid-highlight), transparent 45%), - color-mix(in srgb, var(--mu-surface-3) 94%, transparent); + color-mix(in srgb, var(--mu-surface-3) 68%, transparent); box-shadow: inset 0 1px 0 var(--mu-liquid-rim), inset 0 0 0 1px var(--mu-liquid-rim); - backdrop-filter: blur(1.5px) saturate(1.05); - -webkit-backdrop-filter: blur(1.5px) saturate(1.05); + backdrop-filter: blur(8px) saturate(1.15); + -webkit-backdrop-filter: blur(8px) saturate(1.15); } -/* 用户气泡的轻液态玻璃 —— 保留 accent 主色(白字可读),只叠内高光 + 折射描边, - 不模糊背景/不改主色,避免 accent 上玻璃化后变暗/糊。 */ +/* 用户气泡的半透明毛玻璃 —— accent 主色压到 ~76%(白字仍可读), + 透出背景 + blur 柔化;内高光/折射描边保留。 */ .liquid-glass-accent { position: relative; background: linear-gradient(135deg, var(--mu-liquid-highlight), transparent 45%), - linear-gradient(180deg, color-mix(in srgb, var(--mu-accent) 96%, #ffffff 4%), var(--mu-accent)); + linear-gradient(180deg, color-mix(in srgb, var(--mu-accent) 76%, transparent), color-mix(in srgb, var(--mu-accent) 72%, transparent)); box-shadow: inset 0 1px 0 var(--mu-liquid-rim), inset 0 0 0 1px var(--mu-liquid-rim); + backdrop-filter: blur(8px) saturate(1.2); + -webkit-backdrop-filter: blur(8px) saturate(1.2); } /* Smooth Corner 优先:全局圆角走 token(k=0.55 近似值),落地在组件里用 rounded-smooth */