feat(web): 聊天气泡加轻量 Miuix 液态玻璃(不动底色/文字,不糊观感)
- index.css 加 .liquid-glass-soft(assistant: surface-3 底+内高光+折射描边+极轻blur) + .liquid-glass-accent(用户: accent 主色+内高光+折射描边,不加blur保留白字可读) - chat.tsx: ChatBody(她)/UserParaBubble+UserBubble(你) 气泡容器加对应轻玻璃类 - 设计原则: 只叠'内高光+折射'精髓(inset rim), 不用厚重blur/shadow, 保文字观感; 与现有 .liquid-glass(重) 区分 - 修: 之前气泡纯 surface/accent 平面; 前端 build 绿 注: 工作树中 kook identity.go/admin.go 是 agent-116(KOOK自动获取)进行中, 未触碰
This commit is contained in:
1 parent
aeb9fea64c
commit
6489910f64
2 files changed
+30
-3
No files matched your search
@@ -76,6 +76,33 @@ body {
|
||||
box-shadow: var(--mu-shadow-3), inset 0 1px 0 var(--mu-liquid-rim);
|
||||
}
|
||||
|
||||
/* 轻量液态玻璃 —— 用于聊天气泡:只在表面叠一层很淡的内高光 + 细折射描边 +
|
||||
极轻 backdrop blur,不改变底色/文字色,避免过度玻璃化影响文字观感。
|
||||
(对比 .liquid-glass:去掉厚重 blur/shadow,保留液态玻璃的"内高光+折射"精髓) */
|
||||
.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);
|
||||
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);
|
||||
}
|
||||
|
||||
/* 用户气泡的轻液态玻璃 —— 保留 accent 主色(白字可读),只叠内高光 + 折射描边,
|
||||
不模糊背景/不改主色,避免 accent 上玻璃化后变暗/糊。 */
|
||||
.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));
|
||||
box-shadow:
|
||||
inset 0 1px 0 var(--mu-liquid-rim),
|
||||
inset 0 0 0 1px var(--mu-liquid-rim);
|
||||
}
|
||||
|
||||
/* Smooth Corner 优先:全局圆角走 token(k=0.55 近似值),落地在组件里用 rounded-smooth */
|
||||
* {
|
||||
border-radius: var(--mu-radius);
|
||||
|
||||
Reference in new issue
Block a user