Z ZPI 文档 v0.3.8
介绍页

源码

packages/desktop/src/renderer/pane-tabs.css

css389 行查看原文
.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;
}