Spaces:
Running
Running
| /* Warm Paper 外壳布局 + 通用按钮（颜色一律走 theme.css 令牌） */ | |
| .shell { | |
| display: flex; | |
| height: 100vh; | |
| overflow: hidden; /* 整窗禁止滚动：只有消息流内部滚动 */ | |
| background: var(--bg); | |
| } | |
| /* ---------- 侧栏 ---------- */ | |
| /* 顶部 40px 安全边距：主窗 titleBarStyle=overlay 后 traffic light 悬浮在内容上， | |
| 侧栏品牌位必须让开左上角（实测遮挡区约高 20px，留 40px 余量）。 | |
| .brand 带 data-tauri-drag-region，作为窗口拖拽区。 */ | |
| .sidebar { | |
| width: 232px; | |
| flex-shrink: 0; | |
| display: flex; | |
| flex-direction: column; | |
| padding: 40px 16px 20px; | |
| border-right: 1px solid var(--border); | |
| } | |
| .brand { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| padding: 0 8px 28px; | |
| cursor: default; | |
| } | |
| /* 品牌标：内联 SVG 鸟巢（Brand.tsx），陶土橙单线，不再用色块文字标 */ | |
| .brand-mark { | |
| display: inline-flex; | |
| align-items: center; | |
| color: var(--accent); | |
| } | |
| .brand-name { | |
| font-family: var(--font-serif); | |
| font-size: 16px; | |
| font-weight: 600; | |
| } | |
| .sidebar nav { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 2px; | |
| flex: 1; | |
| } | |
| .nav-item { | |
| position: relative; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: flex-start; | |
| gap: 1px; | |
| padding: 9px 12px; | |
| border: none; | |
| border-radius: var(--radius-control); | |
| background: transparent; | |
| color: var(--text); | |
| font-family: inherit; | |
| font-size: 14px; | |
| text-align: left; | |
| cursor: pointer; | |
| transition: background-color var(--dur) var(--ease); | |
| } | |
| .nav-item:hover { | |
| background: var(--bg-elevated); | |
| } | |
| .nav-item.is-active { | |
| background: var(--accent-soft); | |
| } | |
| /* 激活态左侧 2px accent 竖条（Claude 式）；非激活时淡出 */ | |
| .nav-item::before { | |
| content: ""; | |
| position: absolute; | |
| left: 0; | |
| top: 8px; | |
| bottom: 8px; | |
| width: 2px; | |
| border-radius: 1px; | |
| background: var(--accent); | |
| opacity: 0; | |
| transition: opacity var(--dur) var(--ease); | |
| } | |
| .nav-item.is-active::before { | |
| opacity: 1; | |
| } | |
| .nav-label { | |
| font-weight: 500; | |
| } | |
| /* 设置项：行内齿轮图标 + 文字 */ | |
| .nav-row { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| color: var(--text); | |
| } | |
| .nav-row svg { | |
| color: var(--text-secondary); | |
| } | |
| .nav-hint { | |
| font-size: 12px; | |
| color: var(--text-tertiary); | |
| } | |
| .sidebar-foot { | |
| padding: 8px 12px; | |
| font-size: 12px; | |
| color: var(--text-tertiary); | |
| } | |
| /* ---------- 主区 ---------- */ | |
| .content { | |
| flex: 1; | |
| min-width: 0; | |
| min-height: 0; /* 关键：允许子项收缩，消息流才能在视口内滚动 */ | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| /* ---------- 占位板块空态 ---------- */ | |
| .placeholder { | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| align-items: flex-start; | |
| gap: 12px; | |
| max-width: 620px; | |
| padding: 48px 80px; | |
| } | |
| .placeholder h1 { | |
| font-size: 32px; | |
| } | |
| .placeholder-sub { | |
| margin: 0; | |
| font-size: 16px; | |
| color: var(--text-secondary); | |
| } | |
| .placeholder-note { | |
| margin: 0; | |
| font-size: 13px; | |
| color: var(--text-tertiary); | |
| } | |
| /* ---------- 按钮 ---------- */ | |
| .btn-primary { | |
| height: 40px; | |
| padding: 0 22px; | |
| border: none; | |
| border-radius: var(--radius-control); | |
| background: var(--accent); | |
| color: var(--bg); | |
| font-family: inherit; | |
| font-size: 14px; | |
| font-weight: 500; | |
| cursor: pointer; | |
| transition: background-color var(--dur) var(--ease); | |
| } | |
| .btn-primary:hover { | |
| filter: brightness(0.94); | |
| } | |
| .btn-primary:disabled, | |
| .btn-secondary:disabled { | |
| opacity: 0.6; | |
| cursor: default; | |
| filter: none; | |
| } | |
| .btn-secondary { | |
| height: 36px; | |
| padding: 0 16px; | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-control); | |
| background: transparent; | |
| color: var(--text); | |
| font-family: inherit; | |
| font-size: 13.5px; | |
| cursor: pointer; | |
| transition: background-color var(--dur) var(--ease); | |
| } | |
| .btn-secondary:hover { | |
| background: var(--bg-elevated); | |
| } | |
| .icon-btn { | |
| display: inline-grid; | |
| place-items: center; | |
| width: 28px; | |
| height: 28px; | |
| border: none; | |
| border-radius: var(--radius-control); | |
| background: transparent; | |
| color: var(--text-tertiary); | |
| cursor: pointer; | |
| transition: background-color var(--dur) var(--ease); | |
| } | |
| .icon-btn:hover { | |
| background: var(--bg-elevated); | |
| color: var(--text); | |
| } | |
| .icon-btn-danger:hover { | |
| background: var(--accent-soft); | |
| color: var(--danger); | |
| } | |
| /* ---------- 卡片 hover 统一（design-system §6：克制的 150ms） ---------- | |
| 描边加深 + 极轻上浮 1px；只作用于内容卡片，覆盖看板/诊断/技能/专家/表单。 */ | |
| .metric-card, | |
| .panel, | |
| .diag-card, | |
| .diag-trash, | |
| .skill-card, | |
| .mcp-card, | |
| .cloud-card, | |
| .expert-card { | |
| transition: | |
| border-color var(--dur) var(--ease), | |
| transform var(--dur) var(--ease); | |
| } | |
| .metric-card:hover, | |
| .panel:hover, | |
| .diag-card:hover, | |
| .diag-trash:hover, | |
| .skill-card:hover, | |
| .mcp-card:hover, | |
| .cloud-card:hover, | |
| .expert-card:hover { | |
| border-color: color-mix(in srgb, var(--border) 55%, var(--text-tertiary)); | |
| transform: translateY(-1px); | |
| } | |
| /* 选中态的专家卡保持 accent 描边，不被 hover 色盖掉 */ | |
| .expert-card.is-active, | |
| .expert-card.is-active:hover { | |
| border-color: var(--accent); | |
| } | |
| /* 个人账户（契约 40A） */ | |
| .account-redeem { display: flex; gap: 6px; align-items: center; } | |
| .account-redeem input { | |
| padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; | |
| background: var(--surface); color: var(--ink-1); font-size: 12px; width: 140px; | |
| font-family: ui-monospace, monospace; | |
| } | |
| .account-redeem button { | |
| padding: 6px 12px; border: 1px solid var(--accent); border-radius: 8px; | |
| background: var(--accent-soft); color: var(--accent); font-size: 12px; cursor: pointer; | |
| } | |
| .account-redeem button:disabled { opacity: 0.5; cursor: default; } | |
| .account-msg { font-size: 12px; color: var(--ink-2); margin: 6px 0; } | |
| /* Pro 门控（免费缩水） */ | |
| .pro-gate { | |
| display: flex; flex-direction: column; align-items: center; gap: 8px; | |
| padding: 32px 20px; text-align: center; | |
| border: 1px dashed var(--line); border-radius: 12px; | |
| background: var(--surface-2); | |
| } | |
| .pro-gate-badge { | |
| display: inline-flex; padding: 3px 12px; border-radius: 999px; | |
| background: var(--accent-soft); color: var(--accent); font-weight: 600; font-size: 12px; | |
| } | |
| .pro-gate-text { font-size: 14px; color: var(--ink-1); margin: 0; } | |
| .pro-gate-hint { font-size: 12px; color: var(--ink-3); margin: 0; } | |
| /* 底部状态条（契约 6E）：常驻显示输出速度 + 缓存命中 */ | |
| .stats-bar { | |
| display: flex; align-items: center; gap: 12px; | |
| padding: 4px 14px; border-top: 1px solid var(--line); | |
| font-size: 11px; color: var(--ink-3); | |
| background: var(--surface-2); | |
| flex: 0 0 auto; | |
| } | |
| .stats-dot { | |
| width: 6px; height: 6px; border-radius: 50%; | |
| background: var(--ink-4); flex: 0 0 auto; | |
| } | |
| .stats-dot.is-live { | |
| background: var(--accent); | |
| animation: stats-pulse 1.2s ease-in-out infinite; | |
| } | |
| @keyframes stats-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } } | |
| .stats-item { white-space: nowrap; font-variant-numeric: tabular-nums; } | |
| .stats-spacer { flex: 1; } | |
| .stats-hint { color: var(--ink-4); font-size: 10px; } | |