Spaces:
Running
Running
| /* 看图问答浮窗：与划词浮层同款 Warm Paper 毛玻璃卡片（颜色一律走 theme.css 令牌）。 | |
| 透明原生窗口上不用 backdrop-filter（坑位实测记录 #1），模糊交给 macOS 窗口特效， | |
| CSS 只保留 85% 暖纸半透明底色。 */ | |
| /* 透明窗口本体：桌面要从圆角外透出来 */ | |
| body.sight-surface { | |
| background: transparent; | |
| } | |
| .sight-root { | |
| height: 100%; | |
| display: flex; | |
| padding: 12px; | |
| box-sizing: border-box; | |
| } | |
| /* ---------- 卡片容器 ---------- */ | |
| .sight-card { | |
| flex: 1; | |
| min-height: 0; | |
| display: flex; | |
| flex-direction: column; | |
| overflow: hidden; | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-float); | |
| background: var(--glass); | |
| box-shadow: var(--shadow-float); | |
| animation: sight-in 180ms var(--ease); | |
| } | |
| @keyframes sight-in { | |
| from { | |
| opacity: 0; | |
| transform: translateY(6px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| /* ---------- 顶栏 ---------- */ | |
| .sight-head { | |
| display: flex; | |
| align-items: baseline; | |
| justify-content: space-between; | |
| gap: 12px; | |
| padding: 16px 20px 4px; | |
| } | |
| .sight-title { | |
| margin: 0; | |
| font-family: var(--font-serif); | |
| font-size: 20px; | |
| font-weight: 600; | |
| letter-spacing: -0.01em; | |
| color: var(--text); | |
| } | |
| .sight-esc { | |
| font-size: 12px; | |
| color: var(--text-tertiary); | |
| white-space: nowrap; | |
| } | |
| /* ---------- 权限状态灯 ---------- */ | |
| .sight-perms { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 10px; | |
| padding: 6px 20px 2px; | |
| } | |
| .sight-perm { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| padding: 0; | |
| border: none; | |
| background: transparent; | |
| color: var(--text-secondary); | |
| font-family: inherit; | |
| font-size: 12px; | |
| cursor: default; | |
| text-align: left; | |
| } | |
| button.sight-perm.is-bad { | |
| cursor: pointer; | |
| text-decoration: underline; | |
| text-underline-offset: 3px; | |
| } | |
| .sight-dot { | |
| width: 7px; | |
| height: 7px; | |
| border-radius: 50%; | |
| background: var(--text-tertiary); | |
| flex-shrink: 0; | |
| } | |
| .sight-perm.is-ok { | |
| color: var(--success); | |
| } | |
| .sight-perm.is-ok .sight-dot { | |
| background: var(--success); | |
| } | |
| .sight-perm.is-bad { | |
| color: var(--warning); | |
| } | |
| .sight-perm.is-bad .sight-dot { | |
| background: var(--warning); | |
| } | |
| .sight-perm.is-mute { | |
| color: var(--text-tertiary); | |
| } | |
| /* ---------- 空态 / 提示 ---------- */ | |
| .sight-note { | |
| margin: 0; | |
| padding: 16px 20px 20px; | |
| font-size: 13.5px; | |
| line-height: 1.6; | |
| color: var(--text-secondary); | |
| } | |
| .sight-note.is-warn { | |
| color: var(--warning); | |
| } | |
| /* ---------- 图片预览 ---------- */ | |
| .sight-preview { | |
| margin: 10px 20px 0; | |
| padding: 0; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 6px; | |
| } | |
| .sight-preview img { | |
| display: block; | |
| max-width: 100%; | |
| max-height: 170px; | |
| object-fit: contain; | |
| object-position: left top; | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-control); | |
| background: var(--bg-sunken); | |
| } | |
| .sight-preview-meta { | |
| font-size: 11.5px; | |
| color: var(--text-tertiary); | |
| font-variant-numeric: tabular-nums; | |
| } | |
| /* ---------- 提问输入 ---------- */ | |
| .sight-custom { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| margin: 10px 20px 0; | |
| padding: 6px 6px 6px 12px; | |
| border: 1px solid transparent; | |
| border-radius: var(--radius-control); | |
| background: var(--bg-sunken); | |
| transition: border-color var(--dur) var(--ease); | |
| } | |
| .sight-custom:focus-within { | |
| border-color: var(--accent); | |
| } | |
| .sight-input { | |
| flex: 1; | |
| min-width: 0; | |
| border: none; | |
| background: transparent; | |
| color: var(--text); | |
| font-family: inherit; | |
| font-size: 13.5px; | |
| outline: none; | |
| cursor: text; | |
| } | |
| .sight-input::placeholder { | |
| color: var(--text-tertiary); | |
| } | |
| .sight-send { | |
| flex-shrink: 0; | |
| height: 28px; | |
| padding: 0 12px; | |
| border: none; | |
| border-radius: var(--radius-chip); | |
| background: var(--accent); | |
| color: var(--bg); | |
| font-family: inherit; | |
| font-size: 13px; | |
| cursor: pointer; | |
| transition: opacity var(--dur) var(--ease); | |
| } | |
| .sight-send:disabled { | |
| opacity: 0.4; | |
| cursor: default; | |
| } | |
| /* ---------- 模型下拉（vision-only 过滤后的清单） ---------- */ | |
| .sight-model-row { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| margin: 8px 20px 0; | |
| } | |
| .sight-model-label { | |
| font-size: 12px; | |
| color: var(--text-tertiary); | |
| white-space: nowrap; | |
| } | |
| .sight-model { | |
| flex: 1; | |
| min-width: 0; | |
| height: 30px; | |
| padding: 0 8px; | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-chip); | |
| background: var(--bg-sunken); | |
| color: var(--text); | |
| font-family: inherit; | |
| font-size: 12.5px; | |
| outline: none; | |
| cursor: pointer; | |
| } | |
| .sight-model:disabled { | |
| opacity: 0.6; | |
| cursor: default; | |
| } | |
| /* ---------- 回答区 ---------- */ | |
| .sight-answer { | |
| flex: 1; | |
| min-height: 0; | |
| display: flex; | |
| flex-direction: column; | |
| margin-top: 10px; | |
| padding: 10px 20px 14px; | |
| border-top: 1px solid var(--border); | |
| } | |
| .sight-answer-body { | |
| flex: 1; | |
| min-height: 0; | |
| overflow-y: auto; | |
| } | |
| .sight-answer-text { | |
| margin: 0; | |
| color: var(--text); | |
| font-size: 13.5px; | |
| line-height: 1.65; | |
| white-space: pre-wrap; | |
| word-break: break-word; | |
| user-select: text; | |
| } | |
| /* 流式呼吸光标（与划词浮层同款；reduced-motion 时 theme.css 全局降级） */ | |
| .sight-cursor { | |
| display: inline-block; | |
| width: 2px; | |
| height: 1.05em; | |
| margin-left: 3px; | |
| border-radius: 1px; | |
| background: var(--accent); | |
| vertical-align: text-bottom; | |
| animation: sight-cursor-breathe 1s ease-in-out infinite; | |
| } | |
| @keyframes sight-cursor-breathe { | |
| 0%, | |
| 100% { | |
| opacity: 1; | |
| } | |
| 50% { | |
| opacity: 0.15; | |
| } | |
| } | |
| .sight-error { | |
| margin: 8px 0 0; | |
| color: var(--danger); | |
| font-size: 12.5px; | |
| line-height: 1.5; | |
| } | |
| .sight-answer-foot { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 12px; | |
| margin-top: 12px; | |
| } | |
| .sight-save { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| height: 30px; | |
| padding: 0 12px; | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-control); | |
| background: transparent; | |
| color: var(--text-secondary); | |
| font-family: inherit; | |
| font-size: 12.5px; | |
| cursor: pointer; | |
| transition: background-color var(--dur) var(--ease); | |
| } | |
| .sight-save:hover:not(:disabled) { | |
| background: var(--accent-soft); | |
| color: var(--text); | |
| } | |
| .sight-save:disabled { | |
| opacity: 0.5; | |
| cursor: default; | |
| } | |
| .sight-foot-hint { | |
| font-size: 12px; | |
| color: var(--text-tertiary); | |
| } | |
| /* ---------- 授权引导态（与划词浮层同款骨架） ---------- */ | |
| .sight-guide { | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| padding: 24px 24px 20px; | |
| } | |
| .sight-guide-head { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| color: var(--accent); | |
| } | |
| .sight-guide .sight-title { | |
| font-size: 22px; | |
| } | |
| .sight-lead { | |
| margin: 12px 0 18px; | |
| color: var(--text-secondary); | |
| font-size: 14px; | |
| line-height: 1.65; | |
| } | |
| .sight-guide-actions { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 10px; | |
| } | |
| .sight-primary { | |
| height: 40px; | |
| padding: 0 20px; | |
| border: none; | |
| border-radius: var(--radius-control); | |
| background: var(--accent); | |
| color: var(--bg); | |
| font-family: inherit; | |
| font-size: 14px; | |
| cursor: pointer; | |
| } | |
| .sight-primary:hover { | |
| filter: brightness(0.94); | |
| } | |
| .sight-secondary { | |
| height: 40px; | |
| padding: 0 16px; | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-control); | |
| background: transparent; | |
| color: var(--text-secondary); | |
| font-family: inherit; | |
| font-size: 13.5px; | |
| cursor: pointer; | |
| } | |
| .sight-secondary:hover { | |
| background: var(--bg-elevated); | |
| color: var(--text); | |
| } | |
| .sight-guide-why { | |
| margin: 16px 0 0; | |
| color: var(--text-tertiary); | |
| font-size: 12.5px; | |
| line-height: 1.7; | |
| } | |
| .sight-guide-hint { | |
| margin-top: auto; | |
| padding-top: 18px; | |
| color: var(--text-tertiary); | |
| font-size: 12.5px; | |
| line-height: 1.6; | |
| } | |
| /* ---------- 实时之眼入口（契约 12B）：摄像头状态点 + 打开 ---------- */ | |
| .sight-perm.is-wait { | |
| color: var(--warning); | |
| } | |
| .sight-perm.is-wait .sight-dot { | |
| background: var(--warning); | |
| } | |
| button.sight-perm.is-live { | |
| cursor: pointer; | |
| color: var(--accent); | |
| } | |
| button.sight-perm.is-live:hover { | |
| text-decoration: underline; | |
| text-underline-offset: 3px; | |
| } | |
| button.sight-perm.is-live.is-ok { | |
| color: var(--success); | |
| } | |
| button.sight-perm.is-live.is-bad { | |
| color: var(--danger); | |
| } | |