Spaces:
Sleeping
Sleeping
| /* ═══════════════════════════════════════════════════════════════════════ | |
| SetupWizard — premium onboarding flow | |
| ═══════════════════════════════════════════════════════════════════════ */ | |
| .setup-wizard { | |
| width: 100%; | |
| max-width: none; | |
| margin: 0; | |
| padding: 0 32px; | |
| display: flex; | |
| flex-direction: column; | |
| height: 100%; | |
| min-height: 0; | |
| overflow: hidden; | |
| } | |
| /* ── Slide transition for step content ──────────────────────────────── */ | |
| @keyframes swiz-enter { | |
| from { opacity: 0; transform: translateX(16px); } | |
| to { opacity: 1; transform: translateX(0); } | |
| } | |
| @keyframes swiz-enter-back { | |
| from { opacity: 0; transform: translateX(-16px); } | |
| to { opacity: 1; transform: translateX(0); } | |
| } | |
| .swiz-slide { | |
| animation: swiz-enter 0.3s cubic-bezier(0.22, 1, 0.36, 1) both; | |
| display: contents; | |
| } | |
| /* ── Step pills — connected stepper bar ─────────────────────────────── */ | |
| .setup-wizard__steps { | |
| display: flex; | |
| gap: 4px; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 8px 12px 0; | |
| flex-shrink: 0; | |
| flex-wrap: wrap; | |
| position: relative; | |
| } | |
| .setup-wizard__step { | |
| padding: 6px 16px; | |
| border-radius: 999px; | |
| font-size: 0.74rem; | |
| letter-spacing: 0.02em; | |
| line-height: 1.4; | |
| color: var(--color-fg-muted, #928374); | |
| background: rgba(255, 255, 255, 0.025); | |
| border: 1px solid rgba(255, 255, 255, 0.06); | |
| cursor: pointer; | |
| transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1); | |
| position: relative; | |
| font-weight: 500; | |
| } | |
| .setup-wizard__step:hover:not(.setup-wizard__step--active) { | |
| background: rgba(255, 255, 255, 0.05); | |
| border-color: rgba(255, 255, 255, 0.1); | |
| transform: translateY(-1px); | |
| } | |
| .setup-wizard__step--active { | |
| background: linear-gradient(135deg, rgba(211, 134, 155, 0.2), rgba(211, 134, 155, 0.1)); | |
| border-color: rgba(211, 134, 155, 0.4); | |
| color: #f3a5b6; | |
| font-weight: 600; | |
| box-shadow: | |
| 0 0 0 1px rgba(211, 134, 155, 0.15), | |
| 0 0 12px rgba(211, 134, 155, 0.1); | |
| } | |
| .setup-wizard__step--done { | |
| color: #8ec07c; | |
| border-color: rgba(142, 192, 124, 0.3); | |
| background: rgba(142, 192, 124, 0.06); | |
| } | |
| /* Connector lines between pills */ | |
| .setup-wizard__step-connector { | |
| width: 20px; | |
| height: 1px; | |
| background: rgba(255, 255, 255, 0.08); | |
| flex-shrink: 0; | |
| } | |
| .setup-wizard__step-connector--done { | |
| background: rgba(142, 192, 124, 0.3); | |
| } | |
| /* ── Hero — horizontal single-line ───────────────────────────────────── */ | |
| .setup-wizard__hero { | |
| display: flex; | |
| flex-direction: row; | |
| align-items: center; | |
| gap: 12px; | |
| padding: 6px 12px 4px; | |
| flex-shrink: 0; | |
| max-width: 760px; | |
| margin-left: auto; | |
| margin-right: auto; | |
| } | |
| .setup-wizard__logo { | |
| width: 32px; | |
| height: 32px; | |
| flex-shrink: 0; | |
| filter: drop-shadow(0 0 8px rgba(211, 134, 155, 0.3)); | |
| } | |
| .setup-wizard__hero-text { | |
| display: flex; | |
| align-items: baseline; | |
| gap: 10px; | |
| flex-wrap: wrap; | |
| min-width: 0; | |
| } | |
| .setup-wizard__hero h1 { | |
| margin: 0; | |
| font-size: 1.2rem; | |
| font-family: var(--font-display, var(--font-sans)); | |
| font-weight: 700; | |
| letter-spacing: -0.025em; | |
| line-height: 1.2; | |
| white-space: nowrap; | |
| } | |
| .setup-wizard__sub { | |
| margin: 0; | |
| color: var(--color-fg-muted); | |
| font-size: 0.78rem; | |
| line-height: 1.4; | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| opacity: 0.8; | |
| } | |
| /* ── Embed panel — the ONLY scrollable region ────────────────────────── */ | |
| .setup-wizard__embed { | |
| padding: 4px 0; | |
| margin-top: 4px; | |
| flex: 1 1 0; | |
| min-height: 0; | |
| overflow-y: auto; | |
| overflow-x: hidden; | |
| } | |
| /* ── Nav bar — pinned to bottom ──────────────────────────────────────── */ | |
| .setup-wizard__nav { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| gap: 8px; | |
| flex-shrink: 0; | |
| padding: 8px 0 6px; | |
| background: var(--color-bg, #1d2021); | |
| border-top: 1px solid rgba(255, 255, 255, 0.04); | |
| } | |
| /* ── Card / checklist rows ───────────────────────────────────────────── */ | |
| .setup-wizard__card { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 10px; | |
| } | |
| .setup-wizard__card--error { | |
| background: rgba(251, 73, 52, 0.06); | |
| border-color: rgba(251, 73, 52, 0.3); | |
| color: var(--color-danger); | |
| } | |
| .setup-wizard__card-head { | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| font-size: 0.72rem; | |
| color: var(--color-fg-muted); | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 0.04em; | |
| } | |
| .setup-wizard__row { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| } | |
| .setup-wizard__row-body { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; } | |
| .setup-wizard__row-title { font-weight: 600; font-size: 0.84rem; line-height: 1.4; } | |
| .setup-wizard__muted { | |
| color: var(--color-fg-muted); | |
| font-size: 0.74rem; | |
| line-height: 1.5; | |
| } | |
| .setup-wizard__muted code { color: var(--color-fg-subtle); } | |
| .setup-wizard__warn { color: var(--color-warn, #fabd2f); font-weight: 600; } | |
| /* ── Welcome step — glassmorphism cards with stagger ─────────────────── */ | |
| .setup-wizard__welcome { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 10px; | |
| } | |
| .setup-wizard__welcome-grid { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 6px; | |
| } | |
| @keyframes swiz-card-in { | |
| from { | |
| opacity: 0; | |
| transform: translateY(12px) scale(0.98); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0) scale(1); | |
| } | |
| } | |
| .swiz-welcome-card { | |
| display: flex; | |
| align-items: flex-start; | |
| gap: 12px; | |
| padding: 10px 14px; | |
| border-radius: 10px; | |
| background: rgba(255, 255, 255, 0.03); | |
| border: 1px solid rgba(255, 255, 255, 0.06); | |
| backdrop-filter: blur(12px); | |
| -webkit-backdrop-filter: blur(12px); | |
| transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1); | |
| animation: swiz-card-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) both; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .swiz-welcome-card::before { | |
| content: ''; | |
| position: absolute; | |
| left: 0; | |
| top: 0; | |
| bottom: 0; | |
| width: 3px; | |
| background: linear-gradient(to bottom, rgba(211, 134, 155, 0.5), rgba(211, 134, 155, 0.1)); | |
| border-radius: 3px 0 0 3px; | |
| } | |
| .swiz-welcome-card:nth-child(1) { animation-delay: 0s; } | |
| .swiz-welcome-card:nth-child(2) { animation-delay: 0.08s; } | |
| .swiz-welcome-card:nth-child(3) { animation-delay: 0.16s; } | |
| .swiz-welcome-card:hover { | |
| background: rgba(255, 255, 255, 0.045); | |
| border-color: rgba(255, 255, 255, 0.1); | |
| transform: translateX(2px); | |
| } | |
| .swiz-welcome-card__icon { | |
| flex-shrink: 0; | |
| width: 28px; | |
| height: 28px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| border-radius: 8px; | |
| background: rgba(211, 134, 155, 0.1); | |
| color: #d3869b; | |
| } | |
| .swiz-welcome-card__body { | |
| flex: 1; | |
| min-width: 0; | |
| } | |
| .swiz-welcome-card__title { | |
| font-weight: 600; | |
| font-size: 0.82rem; | |
| line-height: 1.3; | |
| margin-bottom: 2px; | |
| display: block; | |
| } | |
| .swiz-welcome-card__desc { | |
| margin: 0; | |
| color: var(--color-fg-muted); | |
| font-size: 0.78rem; | |
| line-height: 1.55; | |
| } | |
| .swiz-welcome-note { | |
| margin: 0; | |
| color: var(--color-fg-subtle); | |
| font-size: 0.74rem; | |
| line-height: 1.5; | |
| text-align: center; | |
| opacity: 0; | |
| animation: swiz-card-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.28s both; | |
| } | |
| /* ── Preflight checklist ─────────────────────────────────────────────── */ | |
| .swiz-checklist { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 2px; | |
| } | |
| .swiz-check-header { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| margin-bottom: 6px; | |
| } | |
| .swiz-check-header__label { | |
| font-size: 0.72rem; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| color: var(--color-fg-muted); | |
| } | |
| @keyframes swiz-check-in { | |
| from { opacity: 0; transform: translateX(-8px); } | |
| to { opacity: 1; transform: translateX(0); } | |
| } | |
| .swiz-check-row { | |
| animation: swiz-check-in 0.25s cubic-bezier(0.22, 1, 0.36, 1) both; | |
| } | |
| .swiz-check-row:nth-child(2) { animation-delay: 0.04s; } | |
| .swiz-check-row:nth-child(3) { animation-delay: 0.08s; } | |
| .swiz-check-row:nth-child(4) { animation-delay: 0.12s; } | |
| .swiz-check-row:nth-child(5) { animation-delay: 0.16s; } | |
| .swiz-check-row:nth-child(6) { animation-delay: 0.20s; } | |
| .swiz-check-icon { | |
| flex-shrink: 0; | |
| width: 22px; | |
| height: 22px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| border-radius: 50%; | |
| } | |
| .swiz-check-icon--pass { | |
| background: rgba(142, 192, 124, 0.12); | |
| color: #8ec07c; | |
| } | |
| .swiz-check-icon--warn { | |
| background: rgba(250, 189, 47, 0.12); | |
| color: #fabd2f; | |
| } | |
| .swiz-check-icon--fail { | |
| background: rgba(251, 73, 52, 0.12); | |
| color: #fb4934; | |
| } | |
| .swiz-loading { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 16px; | |
| color: var(--color-fg-muted); | |
| font-size: 0.8rem; | |
| } | |
| .swiz-loading .spinner { animation: spin 1s linear infinite; } | |
| /* ── Model list ──────────────────────────────────────────────────────── */ | |
| .setup-wizard__models { | |
| list-style: none; | |
| margin: 0; | |
| padding: 0; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 6px; | |
| } | |
| .setup-wizard__models li { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| font-size: 0.78rem; | |
| } | |
| .setup-wizard__models code { font-size: 0.68rem; } | |
| .setup-wizard__aggregate { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 6px; | |
| } | |
| .setup-wizard__files { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 8px; | |
| max-height: 280px; | |
| overflow-y: auto; | |
| padding: 4px 2px 2px; | |
| } | |
| .setup-wizard__file { | |
| display: grid; | |
| grid-template-columns: 1fr 120px 44px; | |
| align-items: center; | |
| gap: 10px; | |
| font-size: 0.72rem; | |
| } | |
| .setup-wizard__file-name { | |
| font-family: var(--font-mono); | |
| color: var(--chrome-fg-muted); | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| .setup-wizard__file-pct { | |
| text-align: right; | |
| font-variant-numeric: tabular-nums; | |
| color: var(--color-fg-muted); | |
| } | |
| .setup-wizard__actions { | |
| display: flex; | |
| gap: 10px; | |
| justify-content: center; | |
| padding-top: 8px; | |
| } | |
| /* ── Inline HF token ─────────────────────────────────────────────────── */ | |
| .models-toolbar__actions { | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| } | |
| .models-toolbar__hf-btn { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 4px; | |
| padding: 3px 8px; | |
| border-radius: 6px; | |
| font-size: 0.68rem; | |
| color: #fe8019; | |
| background: rgba(254, 128, 25, 0.08); | |
| border: 1px solid rgba(254, 128, 25, 0.2); | |
| cursor: pointer; | |
| transition: all 0.15s; | |
| white-space: nowrap; | |
| } | |
| .models-toolbar__hf-btn:hover { | |
| background: rgba(254, 128, 25, 0.15); | |
| border-color: rgba(254, 128, 25, 0.35); | |
| } | |
| .models-toolbar__hf-row { | |
| display: flex; | |
| align-items: center; | |
| gap: 4px; | |
| } | |
| .models-toolbar__hf-input { | |
| width: 150px; | |
| padding: 3px 8px; | |
| border-radius: 5px; | |
| border: 1px solid rgba(254, 128, 25, 0.25); | |
| background: rgba(255, 255, 255, 0.04); | |
| color: var(--chrome-fg, #ebdbb2); | |
| font-size: 0.7rem; | |
| font-family: var(--font-mono); | |
| outline: none; | |
| transition: border-color 0.15s; | |
| } | |
| .models-toolbar__hf-input:focus { | |
| border-color: rgba(254, 128, 25, 0.5); | |
| } | |
| .models-toolbar__hf-input::placeholder { | |
| color: var(--chrome-fg-dim, #665c54); | |
| } | |
| .models-toolbar__hf-ok { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 3px; | |
| font-size: 0.66rem; | |
| color: #8ec07c; | |
| padding: 2px 6px; | |
| border-radius: 999px; | |
| background: rgba(142, 192, 124, 0.08); | |
| border: 1px solid rgba(142, 192, 124, 0.2); | |
| } | |
| .models-toolbar__hf-link { | |
| font-size: 0.68rem; | |
| color: #83a598; | |
| text-decoration: none; | |
| white-space: nowrap; | |
| transition: color 0.15s; | |
| } | |
| .models-toolbar__hf-link:hover { | |
| color: #b8bb26; | |
| text-decoration: underline; | |
| } | |
| /* ── Footnote — polished ─────────────────────────────────────────────── */ | |
| .setup-wizard__footnote { | |
| color: var(--color-fg-subtle, #665c54); | |
| font-size: 0.66rem; | |
| margin: 0; | |
| padding: 6px 0 8px; | |
| text-align: center; | |
| line-height: 1.5; | |
| flex-shrink: 0; | |
| opacity: 0.7; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 6px; | |
| flex-wrap: wrap; | |
| } | |
| .setup-wizard__footnote code { | |
| font-size: 0.62rem; | |
| color: var(--chrome-fg-dim, #665c54); | |
| background: rgba(255, 255, 255, 0.03); | |
| padding: 1px 5px; | |
| border-radius: 4px; | |
| } | |
| .setup-wizard__footnote-link { | |
| color: var(--chrome-accent, #d3869b); | |
| font-size: 0.64rem; | |
| cursor: pointer; | |
| background: none; | |
| border: none; | |
| padding: 0; | |
| text-decoration: none; | |
| opacity: 0.8; | |
| transition: opacity 0.15s; | |
| } | |
| .setup-wizard__footnote-link:hover { | |
| opacity: 1; | |
| text-decoration: underline; | |
| } | |
| /* ── Missing models indicator ────────────────────────────────────────── */ | |
| .swiz-missing { | |
| padding: 6px 10px; | |
| border-radius: 6px; | |
| background: rgba(251, 73, 52, 0.06); | |
| border: 1px solid rgba(251, 73, 52, 0.15); | |
| font-size: 0.72rem; | |
| } | |
| .swiz-status-loading { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 8px; | |
| padding: 20px; | |
| color: var(--color-fg-muted); | |
| font-size: 0.78rem; | |
| } | |
| .swiz-status-loading .spinner { animation: spin 1s linear infinite; } | |
| /* ── Responsive ──────────────────────────────────────────────────────── */ | |
| @media (max-width: 640px) { | |
| .setup-wizard { | |
| padding: 0 14px; | |
| } | |
| .setup-wizard__steps { gap: 3px; padding: 8px 8px 0; } | |
| .setup-wizard__step { padding: 4px 10px; font-size: 0.7rem; } | |
| .setup-wizard__step-connector { width: 10px; } | |
| .setup-wizard__hero { gap: 8px; padding: 6px 8px 4px; } | |
| .setup-wizard__hero h1 { font-size: 1rem; } | |
| .setup-wizard__sub { font-size: 0.72rem; } | |
| .swiz-welcome-card { padding: 10px 14px; gap: 10px; } | |
| .swiz-welcome-card__icon { width: 26px; height: 26px; } | |
| } | |