Spaces:
Running
Running
| /* 模型留言区（契约 26B · 工作台「留言板」tab）——Warm Paper 令牌，零硬编码色： | |
| 所有颜色走 theme.css 变量（深浅色 / 双皮肤自动跟随）。kind 分色只用 | |
| accent（发现·陶土）/ warning（问题·土金）/ success（回答·苔绿）三个语义令牌； | |
| 动效克制：只用 --dur/--ease 的边框与背景过渡，无位移无闪烁。 */ | |
| .msgboard { | |
| flex: 1; | |
| min-width: 0; | |
| overflow-y: auto; | |
| padding: 36px 48px 48px; | |
| } | |
| /* ── 页头 ───────────────────────────────────────────────────────── */ | |
| .msgboard-head { | |
| display: flex; | |
| align-items: flex-end; | |
| justify-content: space-between; | |
| gap: 16px; | |
| margin-bottom: 20px; | |
| } | |
| .msgboard-title { | |
| font-family: var(--font-serif); | |
| font-size: 26px; | |
| font-weight: 600; | |
| letter-spacing: -0.01em; | |
| color: var(--text); | |
| margin: 0; | |
| } | |
| .msgboard-sub { | |
| margin: 6px 0 0; | |
| font-size: 13.5px; | |
| line-height: 1.65; | |
| color: var(--text-secondary); | |
| max-width: 68ch; | |
| } | |
| .msgboard-sub strong { | |
| color: var(--text); | |
| font-weight: 600; | |
| } | |
| .msgboard-muted { | |
| font-size: 13px; | |
| line-height: 1.6; | |
| color: var(--text-secondary); | |
| } | |
| .msgboard-notice { | |
| margin: 0 0 16px; | |
| padding: 10px 14px; | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-control); | |
| background: var(--bg-elevated); | |
| font-size: 13.5px; | |
| line-height: 1.6; | |
| color: var(--text); | |
| } | |
| /* ── 按钮 ───────────────────────────────────────────────────────── */ | |
| .msgboard-primary, | |
| .msgboard-secondary, | |
| .msgboard-ghost { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 7px; | |
| font-family: var(--font-sans); | |
| font-size: 13.5px; | |
| font-weight: 550; | |
| border-radius: var(--radius-control); | |
| padding: 9px 16px; | |
| cursor: pointer; | |
| transition: | |
| background var(--dur) var(--ease), | |
| border-color var(--dur) var(--ease), | |
| color var(--dur) var(--ease); | |
| } | |
| .msgboard-primary { | |
| color: var(--bg); | |
| background: var(--accent); | |
| border: 1px solid var(--accent); | |
| } | |
| .msgboard-primary:hover:not(:disabled) { | |
| background: var(--accent-hover, var(--accent)); | |
| border-color: var(--accent-hover, var(--accent)); | |
| } | |
| .msgboard-secondary { | |
| color: var(--text); | |
| background: var(--bg-elevated); | |
| border: 1px solid var(--border); | |
| } | |
| .msgboard-secondary:hover:not(:disabled) { | |
| border-color: var(--accent); | |
| color: var(--accent); | |
| } | |
| .msgboard-ghost { | |
| color: var(--text-secondary); | |
| background: transparent; | |
| border: 1px solid transparent; | |
| padding: 7px 10px; | |
| flex-shrink: 0; | |
| } | |
| .msgboard-ghost:hover:not(:disabled) { | |
| color: var(--text); | |
| border-color: var(--border); | |
| background: var(--bg-elevated); | |
| } | |
| .msgboard-primary:disabled, | |
| .msgboard-secondary:disabled, | |
| .msgboard-ghost:disabled { | |
| opacity: 0.45; | |
| cursor: default; | |
| } | |
| /* ── 工具条 ─────────────────────────────────────────────────────── */ | |
| .msgboard-toolbar { | |
| background: var(--bg-elevated); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-card); | |
| padding: 18px 22px; | |
| margin-bottom: 20px; | |
| } | |
| .msgboard-toolbar-main { | |
| display: flex; | |
| gap: 10px; | |
| flex-wrap: wrap; | |
| } | |
| .msgboard-toolbar-hint { | |
| margin: 12px 0 0; | |
| font-size: 12.5px; | |
| color: var(--text-secondary); | |
| font-variant-numeric: tabular-nums; | |
| } | |
| .msgboard-outcome { | |
| margin: 8px 0 0; | |
| padding: 8px 12px; | |
| border-left: 2px solid var(--accent); | |
| font-size: 12.5px; | |
| line-height: 1.6; | |
| color: var(--text-secondary); | |
| font-variant-numeric: tabular-nums; | |
| } | |
| /* ── 贴条区 ─────────────────────────────────────────────────────── */ | |
| .msgboard-composer { | |
| background: var(--bg-elevated); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-card); | |
| padding: 18px 22px 20px; | |
| margin-bottom: 24px; | |
| } | |
| .msgboard-kind-row { | |
| display: flex; | |
| gap: 8px; | |
| margin-bottom: 14px; | |
| } | |
| .msgboard-kind { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| font-family: var(--font-sans); | |
| font-size: 12.5px; | |
| font-weight: 550; | |
| padding: 6px 12px; | |
| border-radius: var(--radius-chip); | |
| border: 1px solid var(--border); | |
| background: var(--bg-sunken); | |
| color: var(--text-secondary); | |
| cursor: pointer; | |
| transition: | |
| border-color var(--dur) var(--ease), | |
| color var(--dur) var(--ease), | |
| background var(--dur) var(--ease); | |
| } | |
| /* kind 三态分色：未选中只留图标色，选中加 accent 描边 + 字色 */ | |
| .msgboard-kind.is-finding svg { | |
| color: var(--accent); | |
| } | |
| .msgboard-kind.is-question svg { | |
| color: var(--warning); | |
| } | |
| .msgboard-kind.is-answer svg { | |
| color: var(--success); | |
| } | |
| .msgboard-kind.is-on { | |
| background: var(--bg-elevated); | |
| color: var(--text); | |
| } | |
| .msgboard-kind.is-finding.is-on { | |
| border-color: var(--accent); | |
| } | |
| .msgboard-kind.is-question.is-on { | |
| border-color: var(--warning); | |
| } | |
| .msgboard-kind.is-answer.is-on { | |
| border-color: var(--success); | |
| } | |
| .msgboard-composer-row { | |
| display: flex; | |
| gap: 10px; | |
| align-items: flex-start; | |
| } | |
| .msgboard-author { | |
| flex: 0 0 140px; | |
| font-family: var(--font-sans); | |
| font-size: 13px; | |
| color: var(--text); | |
| background: var(--bg-sunken); | |
| border: 1px solid transparent; | |
| border-radius: var(--radius-control); | |
| padding: 10px 12px; | |
| transition: border-color var(--dur) var(--ease); | |
| } | |
| .msgboard-author:focus-visible { | |
| outline: none; | |
| border-color: var(--accent); | |
| } | |
| .msgboard-input { | |
| flex: 1; | |
| min-width: 0; | |
| font-family: var(--font-sans); | |
| font-size: 14px; | |
| line-height: 1.65; | |
| color: var(--text); | |
| background: var(--bg-sunken); | |
| border: 1px solid transparent; | |
| border-radius: var(--radius-control); | |
| padding: 10px 12px; | |
| resize: vertical; | |
| min-height: 72px; | |
| transition: border-color var(--dur) var(--ease); | |
| } | |
| .msgboard-input::placeholder { | |
| color: var(--text-tertiary); | |
| } | |
| .msgboard-input:focus-visible { | |
| outline: none; | |
| border-color: var(--accent); | |
| } | |
| .msgboard-answer-target { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| margin-top: 12px; | |
| font-size: 13px; | |
| color: var(--text-secondary); | |
| } | |
| .msgboard-answer-target select { | |
| flex: 1; | |
| min-width: 0; | |
| font-family: var(--font-sans); | |
| font-size: 13px; | |
| color: var(--text); | |
| background: var(--bg-sunken); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-control); | |
| padding: 8px 10px; | |
| } | |
| .msgboard-answer-target select:focus-visible { | |
| outline: none; | |
| border-color: var(--accent); | |
| } | |
| .msgboard-composer-actions { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| margin-top: 14px; | |
| } | |
| /* ── 留言流 ─────────────────────────────────────────────────────── */ | |
| .msgboard-stream { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 14px; | |
| } | |
| .msgboard-empty { | |
| padding: 28px 22px; | |
| border: 1px dashed var(--border); | |
| border-radius: var(--radius-card); | |
| font-size: 13.5px; | |
| line-height: 1.7; | |
| color: var(--text-secondary); | |
| text-align: center; | |
| } | |
| .msgboard-card { | |
| background: var(--bg-elevated); | |
| border: 1px solid var(--border); | |
| border-left: 3px solid var(--border); | |
| border-radius: var(--radius-card); | |
| padding: 14px 18px 16px; | |
| transition: border-color var(--dur) var(--ease); | |
| } | |
| /* kind 分色：只染左侧竖条（克制，不整卡染色） */ | |
| .msgboard-card.is-finding { | |
| border-left-color: var(--accent); | |
| } | |
| .msgboard-card.is-question { | |
| border-left-color: var(--warning); | |
| } | |
| .msgboard-card.is-answer { | |
| border-left-color: var(--success); | |
| } | |
| .msgboard-card-head { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| margin-bottom: 8px; | |
| } | |
| .msgboard-badge { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 4px; | |
| font-size: 11.5px; | |
| font-weight: 600; | |
| padding: 2px 8px; | |
| border-radius: var(--radius-chip); | |
| border: 1px solid var(--border); | |
| color: var(--text-secondary); | |
| } | |
| .msgboard-badge.is-finding { | |
| color: var(--accent); | |
| border-color: var(--accent-soft); | |
| background: var(--accent-soft); | |
| } | |
| .msgboard-badge.is-question { | |
| color: var(--warning); | |
| } | |
| .msgboard-badge.is-answer { | |
| color: var(--success); | |
| } | |
| .msgboard-author-name { | |
| font-size: 13px; | |
| font-weight: 600; | |
| color: var(--text); | |
| } | |
| .msgboard-time { | |
| font-size: 12px; | |
| color: var(--text-tertiary); | |
| font-variant-numeric: tabular-nums; | |
| } | |
| .msgboard-synced { | |
| font-size: 11px; | |
| padding: 1px 7px; | |
| border-radius: var(--radius-chip); | |
| background: var(--bg-sunken); | |
| color: var(--text-tertiary); | |
| } | |
| .msgboard-remove { | |
| margin-left: auto; | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 5px; | |
| font-family: var(--font-sans); | |
| font-size: 12px; | |
| color: var(--text-tertiary); | |
| background: transparent; | |
| border: 1px solid transparent; | |
| border-radius: var(--radius-chip); | |
| padding: 4px 8px; | |
| cursor: pointer; | |
| transition: | |
| color var(--dur) var(--ease), | |
| border-color var(--dur) var(--ease); | |
| } | |
| .msgboard-remove:hover { | |
| color: var(--danger); | |
| border-color: var(--danger); | |
| } | |
| .msgboard-remove.is-armed { | |
| color: var(--danger); | |
| border-color: var(--danger); | |
| } | |
| .msgboard-card-body { | |
| font-size: 14px; | |
| line-height: 1.7; | |
| color: var(--text); | |
| white-space: pre-wrap; | |
| word-break: break-word; | |
| } | |
| /* ── 回答（缩进挂在被答问题下） ──────────────────────────────────── */ | |
| .msgboard-answers { | |
| margin-top: 12px; | |
| padding-left: 18px; | |
| border-left: 2px solid var(--border); | |
| display: flex; | |
| flex-direction: column; | |
| gap: 10px; | |
| } | |
| .msgboard-answer { | |
| background: var(--bg-sunken); | |
| border: 1px solid transparent; | |
| border-left: 3px solid var(--success); | |
| border-radius: var(--radius-control); | |
| padding: 10px 14px 12px; | |
| } | |
| .msgboard-waiting { | |
| font-size: 12.5px; | |
| color: var(--text-tertiary); | |
| font-style: italic; | |
| } | |
| /* ── 窄屏（沿用 hub 既有滚动容器，这里只收紧内边距） ─────────────── */ | |
| @media (max-width: 900px) { | |
| .msgboard { | |
| padding: 24px 20px 32px; | |
| } | |
| .msgboard-composer-row { | |
| flex-direction: column; | |
| } | |
| .msgboard-author { | |
| flex: none; | |
| width: 100%; | |
| } | |
| } | |