fix: soften sidebar dividers and tighten spacing

This commit is contained in:
mesalogo
2026-09-28 20:54:56 +08:00
parent 13ff182858
commit 50e8fde64c
4 changed files with 7 additions and 7 deletions
+1 -1
View File
@@ -293,7 +293,7 @@
- 浅色侧栏使用冰蓝灰表面,与白色主内容画布形成明确边界;深色侧栏使用比主画布略亮的蓝灰表面。
- 一级导航与最近会话之间、最近会话与底部账户区之间必须有可见结构分隔线。浅色主题使用 `--border-default`,深色主题可在可辨前提下使用 `--border-subtle`。
- 当前导航项和当前会话使用一致的淡蓝选中背景、强调色文字和中等字重,不额外描边或添加侧边标记;导航图标随选中状态使用强调色,悬停时保留选中状态。浅深主题遵循相同规则,强制颜色模式保留系统选中边框。
- 固定导航行高至少 `36px`、行间距 `4px`,图标统一为 `16px`;导航与会话区域之间、会话区域与底部入口之间的分隔线上下均各留 `16px`(`--space-4`)。普通待办和待处理建议数量使用中性色徽标,不使用危险红色;徽标高度不得改变导航行高。搜索框获得内部焦点时显示完整焦点环。
- 固定导航行高至少 `36px`、行间距 `4px`,图标统一为 `16px`;导航与会话区域之间、会话区域与底部入口之间的分隔线上下均各留 `8px`(`--space-2`)。普通待办和待处理建议数量使用中性色徽标,不使用危险红色;徽标高度不得改变导航行高。搜索框获得内部焦点时显示完整焦点环。
- 未选中项保持平整,不为每一行添加卡片边框或阴影。悬停反馈不得强于选中状态。
- 最近会话列表在精细指针设备上使用细原生滚动条,滑块使用 `--border-control`、轨道透明;强制颜色与粗指针设备保留系统默认。
- 会话区域使用 `--surface-raised` 与主导航区分,浅色为白底,深色为相邻的深蓝灰底。不显示“最近会话”标题,保留区域的无障碍名称;搜索框固定在区域顶部,仅下方列表滚动。搜索框使用透明背景和 `--border-control` 边框,保留内部清除按钮与焦点环。
@@ -49,7 +49,7 @@
| 末位 | `Settings` | 设置 / Settings | 在当前工作区上打开设置 Modal |
图标使用项目现有 Lucide 库。两个按钮均保留可见文字,沿用主导航的高度、间距和焦点样式;
“应用”文字后显示向上箭头,与菜单展开方向一致。竖分隔线宽 1px、高 `--space-6`,使用 `--border-control`,确保在侧栏背景上可辨。不得把整个容器做成设置按钮。
“应用”文字后显示向上箭头,与菜单展开方向一致。竖分隔线宽 1px、高 `--space-6`,使用 `--border-default`,与上方横分隔线颜色一致。不得把整个容器做成设置按钮。
### 2.1 状态
+1 -1
View File
@@ -218,5 +218,5 @@
.sidebar-footer__divider {
flex: 0 0 1px;
height: var(--space-6);
background: var(--border-control);
background: var(--border-default);
}
+4 -4
View File
@@ -3573,7 +3573,7 @@ textarea:focus-visible {
display: flex;
min-width: 248px;
flex-direction: column;
padding-bottom: var(--space-4);
padding-bottom: var(--space-2);
border-bottom: 1px solid var(--border-default);
gap: var(--space-1);
}
@@ -3652,7 +3652,7 @@ textarea:focus-visible {
flex: 1;
flex-direction: column;
padding: var(--space-2);
margin-top: var(--space-4);
margin-top: var(--space-2);
border-radius: var(--radius-control);
background: var(--surface-raised);
}
@@ -3841,8 +3841,8 @@ textarea:focus-visible {
.sidebar-footer {
min-width: 248px;
padding-top: var(--space-4);
margin-top: var(--space-4);
padding-top: var(--space-2);
margin-top: var(--space-2);
border-top: 1px solid var(--border-default);
}