Spaces:
Running
Running
| /* 选择服务商（Phase 6B）：搜索 + 厂商 chips + 预置表单。 | |
| Warm Paper 全令牌配色（design-system.md），无硬编码颜色。 */ | |
| .vp-wrap { | |
| margin-bottom: 18px; | |
| padding: 16px 18px; | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-card); | |
| background: var(--bg-elevated); | |
| } | |
| .vp-head { | |
| margin-bottom: 12px; | |
| } | |
| .vp-head h3 { | |
| margin: 0; | |
| font-size: 16px; | |
| } | |
| .vp-head p { | |
| margin: 4px 0 0; | |
| font-size: 12.5px; | |
| color: var(--text-secondary); | |
| } | |
| /* ── 搜索框 ────────────────────────────────────────────────────── */ | |
| .vp-search { | |
| width: 100%; | |
| height: 36px; | |
| margin-bottom: 12px; | |
| padding: 0 14px; | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-control); | |
| background: var(--bg-sunken); | |
| color: var(--text); | |
| font-family: inherit; | |
| font-size: 13.5px; | |
| } | |
| .vp-search::placeholder { | |
| color: var(--text-tertiary); | |
| } | |
| .vp-search:focus-visible { | |
| outline: none; | |
| border-color: var(--accent); | |
| box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-soft) 65%, transparent); | |
| } | |
| /* ── 厂商 chips 网格 ───────────────────────────────────────────── */ | |
| .vp-grid { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 8px; | |
| } | |
| .vp-chip { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 9px; | |
| padding: 7px 12px 7px 9px; | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-control); | |
| background: var(--bg); | |
| color: var(--text); | |
| font-family: inherit; | |
| text-align: left; | |
| cursor: pointer; | |
| transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease); | |
| } | |
| .vp-chip:hover { | |
| background: var(--accent-soft); | |
| } | |
| .vp-chip.is-active { | |
| border-color: var(--accent); | |
| background: var(--accent-soft); | |
| } | |
| .vp-chip.is-custom { | |
| border-style: dashed; | |
| } | |
| /* 衬线首字母圆标（logo 位） */ | |
| .vp-avatar { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| width: 26px; | |
| height: 26px; | |
| flex: none; | |
| border: 1px solid var(--border); | |
| border-radius: 50%; | |
| background: var(--bg-sunken); | |
| font-family: var(--font-serif); | |
| font-size: 13px; | |
| font-weight: 600; | |
| color: var(--text-secondary); | |
| } | |
| .vp-chip.is-active .vp-avatar { | |
| color: var(--accent); | |
| } | |
| .vp-chip-text { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 1px; | |
| min-width: 0; | |
| } | |
| .vp-chip-name { | |
| font-size: 13px; | |
| font-weight: 500; | |
| line-height: 1.3; | |
| } | |
| .vp-chip-alias { | |
| font-size: 11.5px; | |
| color: var(--text-tertiary); | |
| line-height: 1.3; | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| max-width: 150px; | |
| } | |
| /* ── 没搜到 ────────────────────────────────────────────────────── */ | |
| .vp-empty { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 12px; | |
| flex-wrap: wrap; | |
| padding: 10px 12px; | |
| border: 1px dashed var(--border); | |
| border-radius: var(--radius-control); | |
| background: var(--bg-sunken); | |
| } | |
| .vp-empty p { | |
| margin: 0; | |
| font-size: 13px; | |
| color: var(--text-secondary); | |
| } | |
| /* ── 选中后的预置表单 ──────────────────────────────────────────── */ | |
| .vp-form { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 14px; | |
| margin-top: 14px; | |
| padding-top: 14px; | |
| border-top: 1px solid var(--border); | |
| } | |
| .vp-form-head { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| } | |
| .vp-avatar.is-big { | |
| width: 36px; | |
| height: 36px; | |
| font-size: 16px; | |
| } | |
| .vp-form-head h4 { | |
| margin: 0; | |
| font-size: 15.5px; | |
| } | |
| .vp-form-head p { | |
| margin: 3px 0 0; | |
| font-size: 12.5px; | |
| color: var(--text-secondary); | |
| } | |
| .vp-form-head a { | |
| color: var(--accent); | |
| text-decoration: underline; | |
| text-underline-offset: 2px; | |
| cursor: pointer; | |
| } | |
| /* Base URL 预置展示：只读一行 + 「改」按钮解锁 */ | |
| .vp-baseurl { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .vp-baseurl code { | |
| flex: 1; | |
| min-width: 0; | |
| padding: 8px 12px; | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-control); | |
| background: var(--bg-sunken); | |
| font-family: var(--font-mono); | |
| font-size: 12.5px; | |
| color: var(--text-secondary); | |
| word-break: break-all; | |
| } | |