---
name: visual-style
description: Nebflow 客户端 UI 视觉裁定——弹窗禁 overlay 遮罩但面板必须毛玻璃、可交互控件统一玻璃质感、中度字重、克制的专业感。Use when 修改 Nebflow 前端（src/main/resources/web/）的弹窗、按钮、气泡、侧边栏样式，或新增任何 UI 组件。
audience: nebflow-project
status: active
last_verified: 2026-08-15
language: zh
---

# Nebflow Visual Style — 用户视觉裁定

用户对 Nebflow 客户端 UI 的成文裁定（经 [USER-RULING] 纠偏闭环沉淀）。改 Nebflow 前端样式前必读；与本 skill 冲突的旧做法、旧记忆一律以本 skill 为准。

## 铁律

1. **弹窗（dialog/modal）**
   - 禁止 overlay 遮罩层：不要背景暗化、不要背景模糊，弹窗直接浮在界面上方
   - 面板本身必须是毛玻璃质感（`backdrop-filter: blur()` + 半透明背景），绝不许纯透明面板
   - 适用于**所有**弹窗（设置、聊天搜索、Agent 对话……），不是某个弹窗的特例
2. **可交互控件**：统一玻璃质感标准（`.glass-control`）——主发送按钮 `#send-btn` 用**微信绿实色族（#07C160，白字）**；其余可交互控件复用其玻璃质感（blur + 立体边缘）。具体数值以本项目前端 CSS 实现为准（`#send-btn` 规则）
   - **灰族语义登记（中性灰玻璃族）**：三处次级「发送」语义控件——dropbox 发送（`#dropbox-send-btn`）、好友消息发送（`.fm-send-btn`）、联系人验证发送（`.fm-verify-box` 内 `.glass-control`）——保持**中性灰**：值域 rest `rgba(255,255,255,0.45)`（暗档 `0.05`），四态 rest/hover/active/disabled 齐备，规则与 token（`--glass-send-*`）落本项目前端 CSS 的灰族块；**严禁并入微信绿实色族**（灰族无色相）
   - **亮档反馈用「边框 + 投影」，禁用白 alpha 填充递进**：亮底衬上白玻璃填充的 rest/hover/active 合成亮度为 253.00 / 253.33 / 254.00（Δ ≤ 0.67/255）肉眼不可辨——亮档 hover/active 只用**边框**（白 → 黑 alpha）与**投影**（外投影抬升 / inset 内陷）表达，填充值域与 rest 边框保持不动；暗档不受此限（暗底衬同组值 Δ 13–27 可辨）。裁定来源：作者可视化裁定 **B（保留白玻璃材质）**；落地实现 `sapphire.css` 灰族块（亮档专用 `--glass-send-shadow*`，规则限 `@media (prefers-color-scheme: light)`）
3. **字重（方案 B 中度）**：body 400 / 标题 600 / 按钮 500 / 代码 500
4. **消息气泡**：边缘自然不刻意——rgba(0,0,0,0.04) 极淡 border；注入消息（蓝色气泡）顶栏显示来源 `SOURCE · AGENT_NAME · EVENT_TYPE`（Team 消息标注 Team name），内容区不重复这些信息
5. **侧边栏激活态**：用阴影，不用竖线
6. **总基调**：低调克制、专业感优先（Apple 式简约）；弹窗、按钮、字体、配色复用既有设计语言，不造新轮子

## Evidence

用户原话（verbatim）：

- "现在是透明面板，正常我们应该是毛玻璃面板。"
- "排查一下就是还有哪些弹窗是没有毛玻璃的，至少我发现消息对话框是没有的。"（适用范围推广到全部弹窗）
- "弹窗不需要模糊背景。玻璃质感需要统一，清透一点。"（"背景不模糊"与"面板玻璃质感"分层的最早根源）
- "发送按钮调回绿色，但是用淡绿，而且要有玻璃质感，边缘很明显的立体玻璃。"
- "移除侧边栏按钮点击后会有竖线显示状态的效果。改为仅用阴影。"
- "字重调细——可以给我几个方案让我确认。"
- "蓝色气泡的内容要显示内容的来源"；"蓝色气泡，如果是Team的消息，需要标注Team name。"
- "参考Apple多选的设计，简约一点。"

补充语义（同轮二次澄清）：禁的是弹窗**背后的 overlay 层**（背景暗化/模糊）；面板**本身**反而必须毛玻璃。首次实施曾误把面板毛玻璃一起去掉导致透明面板（即第一条 Evidence 的纠正场景）——两个层次不可混淆。

后续裁定（**非原话，转述**）：绿色基准改裁为**微信绿实色族（#07C160，白字）**，上文「淡绿玻璃 0.55」口径作废；同批裁定三处次级「发送」语义控件（dropbox / 好友消息 / 联系人）保持**中性灰**、只补缺失状态档，不并入绿族。

## 维护

- 新视觉裁定到达 → [USER-RULING] 上报 → Nebula 终审后**替换**对应铁律，不并存（用户改主意 = 最高优先级删除信号）
- 具体数值参数以本项目前端 CSS 实现为准（`.glass-control` 等类名在本项目前端资源下 Grep 可得）——本 skill 锁定语义与出处，不复制可从代码读到的东西