Yif
92dd231ce4
1. 统一会话列宽度轴：新增 --dsh-chat-content-width（748px），输入框、todo、goal、queue、approval、plan review、ask question 等容器的宽度与边距全部由该变量推导，消除各面板之间的像素漂移，窄视口下的边缘留白也保持一致。 2. 输入框自适应与细节：控制行改为容器查询（460px 阈值以下权限选择器只显示图标+下拉，隐藏文字）；卡片圆角 20→22、行内边距调整并整体下移 2px（发送按钮除外）；permission/model 触发器统一 24px 圆角；Plan 与 Read Only 间距 +8。 3. 修复浮层菜单溢出：slash 菜单与命令弹层钳制到输入卡片宽度，超长行以省略号截断；Tooltip 增加 12px 视口边缘安全距离。 4. 增加与替换图标：Add provider 改用输入框同款加号图标（IconPlusOutline16），统一图标尺寸与字号。 5. 统一 Settings → Models 组件：补齐按钮 hover 态、select 下拉箭头不再贴边、标题区与 provider 卡片间距 +12。 6. 侧边栏交互：add workspace / group by / create session / 收起侧边栏四个图标按钮增加 500ms 延迟 tooltip（前两个向下弹出）；展开态的 New Session 不再重复显示 tooltip；侧边栏窄屏自适应收起逻辑微调。 7. 其他：hero 区 workspace 徽章右移对齐；附带 Agent Note（中英双语）记录共享宽度轴与容器查询的设计取舍。
147 lines
3.1 KiB
CSS
147 lines
3.1 KiB
CSS
/* Todo strip in the composer context stack (Figma 1236:32276): tip surface,
|
|
status icons + secondary item labels. Its visible card aligns with the
|
|
GoalBar and the Queue panel inside their shared dock column: 12px radius,
|
|
36px collapsed row, 12px side padding, 14px tertiary leading glyph. */
|
|
|
|
.root {
|
|
box-sizing: border-box;
|
|
flex: none;
|
|
overflow: hidden;
|
|
margin: 0 auto;
|
|
width: calc(
|
|
100% -
|
|
var(--dsh-composer-side-clearance) -
|
|
var(--dsh-composer-side-clearance) -
|
|
var(--dsh-composer-dock-inset) -
|
|
var(--dsh-composer-dock-inset) -
|
|
var(--dsh-composer-dock-inset) -
|
|
var(--dsh-composer-dock-inset)
|
|
);
|
|
max-width: calc(
|
|
var(--dsh-composer-card-max-width) -
|
|
var(--dsh-composer-dock-inset) -
|
|
var(--dsh-composer-dock-inset) -
|
|
var(--dsh-composer-dock-inset) -
|
|
var(--dsh-composer-dock-inset)
|
|
);
|
|
border: 1px solid var(--dsw-alias-border-l1);
|
|
border-radius: 12px;
|
|
background: var(--dsw-specific-tip);
|
|
/* Elevated surface: `--dsw-specific-tip` is the same dark rung as the menu
|
|
surface, and `.list` scrolls inside this card, so the thumb takes the l2
|
|
elevation tokens. Declared here because the elevation belongs to the
|
|
surface, and the custom properties inherit down to `.list` (see ui-theme
|
|
styles/scrollbar.css for the rebinding contract). */
|
|
--dsh-scrollbar-thumb: var(--dsw-alias-scrollbar-bg-l2);
|
|
--dsh-scrollbar-thumb-hover: var(--dsw-alias-scrollbar-hover-l2);
|
|
}
|
|
|
|
.body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
padding: 6px 12px;
|
|
}
|
|
|
|
.header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
width: 100%;
|
|
padding: 0;
|
|
border: none;
|
|
background: transparent;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.lead {
|
|
display: grid;
|
|
flex: none;
|
|
place-items: center;
|
|
color: var(--dsw-alias-label-tertiary);
|
|
}
|
|
|
|
.title {
|
|
flex: none;
|
|
font-size: 13px;
|
|
line-height: 24px;
|
|
font-weight: 500;
|
|
color: var(--dsw-alias-label-primary);
|
|
}
|
|
|
|
.progress {
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
font-size: 13px;
|
|
line-height: 20px;
|
|
font-weight: 400;
|
|
color: var(--dsw-alias-label-tertiary);
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.chevron {
|
|
display: grid;
|
|
flex: none;
|
|
place-items: center;
|
|
color: var(--dsw-alias-label-tertiary);
|
|
}
|
|
|
|
.list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
max-height: 180px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
min-width: 0;
|
|
font-size: 13px;
|
|
line-height: 20px;
|
|
color: var(--dsw-alias-label-secondary);
|
|
}
|
|
|
|
.glyph {
|
|
display: grid;
|
|
flex: none;
|
|
place-items: center;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
.glyphCompleted {
|
|
color: var(--dsw-alias-state-success-primary);
|
|
}
|
|
|
|
.glyphPending {
|
|
color: var(--dsw-alias-label-caption);
|
|
}
|
|
|
|
.glyphProgress {
|
|
color: var(--dsw-alias-state-business-primary);
|
|
animation: todo-progress-spin 1s linear infinite;
|
|
}
|
|
|
|
@keyframes todo-progress-spin {
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
/* Figma strip is single-line; long items ellipsize with no inline expand. */
|
|
.content {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|