源码
packages/desktop/src/renderer/pane-tabs.css
.pane-header-action {
display: inline-flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border: 1px solid transparent;
border-radius: 6px;
color: var(--color-foreground);
}
.pane-header-action:hover,
.pane-header-action[aria-expanded="true"] {
background: var(--color-fill-hover);
}
.pane-tab-overview {
/* 窄窗口的右栏为 z-index:20,portal 必须在其上,才能覆盖网页并接收点击。 */
z-index: 60;
width: 288px;
border: 1px solid var(--color-border);
border-radius: 8px;
overflow: hidden;
background: var(--color-popover);
color: var(--color-foreground);
box-shadow:
0 4px 6px -1px #0000001a,
0 2px 4px -2px #0000001a;
font-size: var(--ui-font-size);
-webkit-app-region: no-drag;
}
.pane-overview-search {
display: flex;
gap: 8px;
align-items: center;
padding: 0 12px;
border-bottom: 1px solid var(--color-border);
color: var(--color-text-subtle);
}
.pane-overview-search input {
height: 32px;
width: 100%;
min-width: 0;
outline: none;
background: transparent;
font-size: inherit;
}
.pane-tab-overview [cmdk-list] {
max-height: 320px;
overflow: auto;
}
.pane-tab-overview [cmdk-group] {
padding: 4px;
border-bottom: 1px solid var(--color-border);
}
.pane-tab-overview [cmdk-group]:last-child {
border-bottom: 0;
}
.pane-tab-overview [cmdk-group-heading] {
padding: 8px;
font-weight: 500;
color: var(--color-text-subtle);
}
.pane-tab-overview [cmdk-item] {
display: flex;
align-items: center;
gap: 8px;
min-height: 32px;
margin-bottom: 2px;
padding: 0 8px;
border-radius: 6px;
cursor: pointer;
}
.pane-tab-overview [cmdk-item]:last-child {
margin-bottom: 0;
}
.pane-tab-overview [cmdk-item][data-selected="true"],
.pane-tab-overview [cmdk-item][data-active] {
background: var(--color-active);
}
.pane-tab-overview [cmdk-empty] {
padding: 20px 16px;
color: var(--color-text-subtle);
text-align: center;
}
.pane-overview-icon {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
color: var(--color-text-subtle);
}
.pane-overview-title {
flex: 1;
min-width: 0;
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.pane-overview-time {
flex-shrink: 0;
margin-right: 2px;
color: var(--color-text-subtle);
}
.pane-tab-overview [cmdk-item] button {
display: grid;
width: 20px;
height: 20px;
flex-shrink: 0;
place-items: center;
opacity: 0.7;
border-radius: 4px;
}
.pane-tab-overview [cmdk-item] button:hover {
opacity: 1;
background: var(--color-fill-hover);
}
.pane-header .pane-tab:hover:not(.selected) {
background: var(--color-fill-hover);
}
.pane-tab-menu {
width: 176px;
}
.pane-tab[data-dragging],
.pane-tab-drag-overlay {
cursor: grabbing;
box-shadow:
0 4px 6px -1px #0000001a,
0 2px 4px -2px #0000001a;
}
.pane-tab-drag-overlay {
display: inline-flex;
align-items: center;
width: 156px;
min-width: 60px;
max-width: 156px;
height: 28px;
gap: 6px;
padding: 0 4px 0 6px;
border: 1px solid transparent;
border-radius: 8px;
background: var(--color-active);
color: var(--color-text);
font-size: var(--text-body);
font-weight: 500;
white-space: nowrap;
}
.shell.pane-full-view .right-pane {
position: relative;
top: auto;
right: auto;
bottom: auto;
z-index: auto;
box-shadow: none;
max-width: none;
flex: 1;
width: 0;
}
.shell.pane-full-view .right-pane-content {
max-width: none;
}
.shell.left-collapsed.pane-full-view .right-pane {
margin-left: 4px;
}
.shell.pane-full-view .right-resizer {
display: none;
}
.shell.left-collapsed.pane-full-view .pane-header {
padding-left: 80px;
}
.shell.mac-desktop.left-collapsed.pane-full-view .pane-header {
padding-left: 160px;
}
.shell.pane-full-view .main {
position: fixed;
z-index: 5;
background: var(--color-bg);
margin: 0;
flex: none;
min-width: 0;
min-height: 0;
}
.shell.pane-full-view .main > .topbar {
display: none;
}
.shell.pane-full-conversation .main {
left: var(--pane-slot-left);
top: var(--pane-slot-top);
width: var(--pane-slot-width);
height: var(--pane-slot-height);
border: 0;
border-radius: 0 0 var(--workspace-panel-radius) var(--workspace-panel-radius);
}
.shell.pane-full-floating .main {
left: var(--pane-float-left, auto);
top: var(--pane-float-top, auto);
width: min(560px, max(0px, calc(var(--pane-slot-width) - 32px)));
max-height: max(0px, calc(var(--pane-slot-height) - 32px));
border: 0;
border-radius: 16px;
background: transparent;
overflow: visible;
}
/* 抽屉铺在输入框后面,收起时外壳就是输入框,避免双层边框和额外留白。 */
.shell.pane-full-floating .main::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
border: 1px solid var(--color-border);
border-radius: inherit;
background: var(--color-bg);
box-shadow:
0 10px 15px -3px #0000001a,
0 4px 6px -4px #0000001a;
transition: opacity 150ms ease-out;
}
.shell.pane-full-floating .main .task-body {
position: relative;
overflow: visible;
scrollbar-gutter: auto;
}
.shell.pane-full-floating .main .composer-container {
padding: 0;
width: 100%;
max-width: none;
margin: 0;
}
.shell.pane-full-floating .main .task-activity,
.shell.pane-full-floating .main > .notice-config,
.shell.pane-full-floating .main .model-performance {
display: none;
}
.shell.pane-float-expanded .main {
height: min(640px, max(0px, calc(var(--pane-slot-height) - 32px)));
}
.shell.pane-float-expanded .main .task-body {
margin: 0 1px 1px;
border-radius: 0 0 16px 16px;
overflow: hidden;
background: var(--color-bg);
}
.shell.pane-float-collapsed .main {
height: auto;
}
.shell.pane-float-collapsed .main .composer {
box-shadow:
0 10px 15px -3px #0000001a,
0 4px 6px -4px #0000001a;
}
.shell.pane-float-collapsed .main .conversation-wrap {
flex: none;
height: 0;
min-height: 0;
overflow: visible;
}
.shell.pane-float-collapsed .main .conversation {
display: none;
}
.shell.pane-float-collapsed .main .composer-container {
flex: none;
}
.shell.pane-float-collapsed .main .task-body {
flex: none;
}
.pane-full-view-controls {
display: flex;
align-items: center;
gap: 4px;
height: 40px;
flex-shrink: 0;
padding: 0 8px;
-webkit-app-region: no-drag;
z-index: 1;
transition: height 150ms ease-out;
}
.pane-floating-status {
display: inline-flex;
gap: 6px;
align-items: center;
width: 24px;
height: 24px;
justify-content: center;
font-size: var(--ui-font-size);
color: var(--color-text-subtle);
}
.pane-floating-grip {
margin-left: auto;
cursor: grab;
touch-action: none;
}
.pane-floating-menu {
width: 208px;
}
.shell.pane-float-minimized .main {
width: 48px;
height: 48px;
border-radius: 9999px;
}
.shell.pane-float-minimized .main .task-body {
display: none;
}
.shell.pane-float-minimized .pane-full-view-controls {
width: 48px;
height: 48px;
padding: 0;
}
.pane-floating-restore {
width: 48px;
height: 48px;
display: grid;
place-items: center;
border-radius: 9999px;
touch-action: none;
color: var(--color-text-subtle);
}
.pane-floating-answer {
position: absolute;
left: 0;
right: 0;
bottom: calc(100% + 8px);
}
.pane-full-view-controls[data-anchor^="top"] .pane-floating-answer {
bottom: auto;
top: calc(100% + 8px);
}
.pane-floating-answer > button:first-child {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
width: 100%;
padding: 12px 16px;
border: 1px solid var(--color-border);
border-radius: 16px;
background: var(--color-bg);
text-align: left;
font-size: var(--ui-font-size);
}
.pane-floating-answer .pane-floating-answer-close {
position: absolute;
left: -8px;
top: -8px;
width: 24px;
height: 24px;
border: 1px solid var(--color-border);
display: grid;
place-items: center;
border-radius: 9999px;
background: var(--color-bg);
}
/* ZCode 只由焦点、菜单和拖动控制抽屉;tooltip 的 portal hover 不应反复开合上栏。 */
.shell.pane-float-collapsed
.main:not(:focus-within):not(:has([data-menu-open="true"], [data-dragging="true"]))::before {
opacity: 0;
}
.shell.pane-float-collapsed
.main:not(:focus-within):not(:has([data-menu-open="true"], [data-dragging="true"]))
.pane-full-view-controls {
height: 0;
padding: 0;
overflow: visible;
}
.shell.pane-float-collapsed
.main:not(:focus-within):not(:has([data-menu-open="true"], [data-dragging="true"]))
.pane-full-view-controls
> :not(.pane-floating-answer) {
visibility: hidden;
pointer-events: none;
}
.pane-conversation-tab {
flex: 0 0 auto;
width: auto;
max-width: 240px;
padding: 0 8px 0 6px;
gap: 6px;
cursor: default;
-webkit-app-region: no-drag;
}
.pane-conversation-title {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}