/* ═══════════════════════════════════════════════════════════════ */ /* Shared modal styles — settings-modal + account-dialog (MODAL-001) */ /* */ /* Extracted from editor-v7.css so the landing (/) and projects */ /* (/projects) pages can open the same dialogs the v7 editor uses. */ /* */ /* LINK ORDER: editor-v7.html links this file BEFORE editor-v7.css, */ /* so the editor's own .lightbox-backdrop / [hidden] rules keep */ /* winning the cascade and the editor renders unchanged. On the */ /* landing/projects pages this file is the sole source of the modal */ /* surface and the dimming backdrop. */ /* ═══════════════════════════════════════════════════════════════ */ /* --accent-tint lives in editor-v7.css's :root, not the landing */ /* token files. Define it here so the landing/projects dialogs get */ /* it; editor-v7.css redefines it and (loaded later) wins on the */ /* editor. */ :root { --accent-tint: color-mix(in oklab, var(--accent) 6%, transparent); } /* Backdrop scrim behind the dialog. The component appends a */ /* .lightbox-backdrop element to . On the editor this is */ /* overridden to transparent by editor-v7.css (the editor dims via */ /* its own chrome); on landing/projects it provides the dimming. */ .lightbox-backdrop { position: fixed; inset: 0; background: rgba(4, 4, 6, 0.55); backdrop-filter: blur(3px); z-index: 100; animation: modal-fade var(--dur) ease-out; } @keyframes modal-fade { from { opacity: 0; } } .settings-backdrop { position: fixed; inset: 0; background: transparent; z-index: 100; } .settings { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(720px, calc(100vw - 48px)); max-height: min(640px, calc(100vh - 48px)); background: var(--bg-elevated); border: 1px solid var(--border-accent); border-radius: 14px; box-shadow: var(--shadow-modal); display: grid; grid-template-rows: auto 1fr auto; z-index: 101; animation: settings-slide var(--dur) cubic-bezier(0.2, 0.9, 0.3, 1); overflow: hidden; } @keyframes settings-slide { from { opacity: 0; transform: translate(-50%, calc(-50% + 8px)) scale(0.98); } } .settings-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--border-subtle); } .settings-title { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; margin: 0; flex: 1; } .settings-close { width: 24px; height: 24px; display: grid; place-items: center; color: var(--text-muted); border-radius: 5px; flex-shrink: 0; } .settings-close:hover { color: var(--text-primary); background: var(--bg-card); } .settings-body { display: grid; grid-template-columns: 240px 1fr; min-height: 0; } /* Left: provider list */ .settings-providers { list-style: none; margin: 0; padding: 12px 8px; border-right: 1px solid var(--border-subtle); overflow-y: auto; display: flex; flex-direction: column; gap: 2px; } .settings-provider { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-sm); cursor: pointer; border: 1px solid transparent; transition: background var(--dur-fast); } .settings-provider:hover { background: var(--bg-card); } .settings-provider.is-selected { background: var(--bg-card); border-color: var(--border); } .settings-provider-radio { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--border-accent); background: var(--bg-elevated); flex-shrink: 0; } .settings-provider.is-selected .settings-provider-radio { background: var(--accent); border-color: var(--accent); box-shadow: inset 0 0 0 2px var(--bg-elevated); } .settings-provider-meta { display: flex; flex-direction: column; min-width: 0; } .settings-provider-label { font-size: 13px; font-weight: 500; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .settings-provider-id { font-family: var(--font-mono); font-size: 9.5px; color: var(--text-muted); letter-spacing: 0.04em; } .settings-provider-flag { font-family: var(--font-mono); font-size: 11px; flex-shrink: 0; } .settings-provider.is-default .settings-provider-flag { color: var(--accent-bright); } .settings-provider.is-unconfigured .settings-provider-flag { color: var(--text-muted); } /* Right: provider detail */ .settings-detail { padding: 18px 20px 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; } .settings-detail-title { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; margin: 0; } .settings-detail-id { font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); letter-spacing: 0.04em; margin: -8px 0 4px; } .settings-row { display: grid; grid-template-columns: 80px 1fr; align-items: center; gap: 12px; padding: 6px 0; border-top: 1px solid var(--border-subtle); } .settings-row--block { grid-template-columns: 1fr; align-items: stretch; } .settings-row:first-of-type { border-top: none; } .settings-label { font-family: var(--font-mono); font-size: 9.5px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); } .settings-value { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-primary); } .settings-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-muted); flex-shrink: 0; } .settings-dot[data-state="ok"] { background: #22c55e; } .settings-dot[data-state="error"] { background: #f87171; } .settings-dot[data-state="pending"] { background: var(--accent-bright); animation: settings-pulse 1s ease-in-out infinite; } @keyframes settings-pulse { 50% { opacity: 0.4; } } .settings-key-wrap { display: flex; align-items: stretch; background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); overflow: hidden; } .settings-key-wrap:focus-within { border-color: var(--border-accent); } /* The wrap shows focus via :focus-within above; suppress the global * :focus-visible accent ring on the input itself, which would otherwise * be clipped by the wrap's overflow:hidden into an orange sliver. */ .settings-key-input:focus-visible { outline: none; } .settings-key-input { flex: 1; background: transparent; border: none; outline: none; padding: 8px 10px; font-family: var(--font-mono); font-size: 11.5px; color: var(--text-primary); letter-spacing: 0.02em; min-width: 0; } .settings-key-toggle { width: 32px; border-left: 1px solid var(--border-subtle); color: var(--text-muted); display: grid; place-items: center; flex-shrink: 0; } .settings-key-toggle:hover { color: var(--text-primary); background: var(--bg-elevated); } .settings-model-select { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); padding: 8px 10px; color: var(--text-primary); font-family: inherit; font-size: 12px; cursor: pointer; } .settings-model-select:focus-visible { outline: none; border-color: var(--border-accent); } .settings-model-select:disabled { opacity: 0.5; cursor: not-allowed; } .settings-actions { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; } .settings-action { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 11.5px; color: var(--text-primary); letter-spacing: -0.005em; } .settings-action:hover { background: var(--bg-elevated); border-color: var(--border-accent); } .settings-action:disabled { opacity: 0.4; cursor: not-allowed; } .settings-action--default[aria-pressed="true"] { background: var(--accent-tint); border-color: var(--accent-border); color: var(--accent-bright); } .settings-foot { display: flex; justify-content: flex-end; padding: 12px 16px; border-top: 1px solid var(--border-subtle); } .settings-done { background: var(--accent); color: var(--accent-ink); font-weight: 600; font-size: 12px; padding: 8px 18px; border-radius: var(--radius-sm); } .settings-done:hover { background: var(--accent-bright); } /* Responsive: stack panes on narrow viewports */ @media (max-width: 640px) { .settings-body { grid-template-columns: 1fr; } .settings-providers { border-right: none; border-bottom: 1px solid var(--border-subtle); max-height: 200px; } } /* Settings modal — multi-provider variants the mockup CSS doesn't cover. * Star action toggles per-capability default; muted note replaces the * image-model dropdown for providers without `capabilities.image`; * error variant of .settings-value carries the red Test-connection * message body. */ .settings-action--star { font-family: var(--font-mono); letter-spacing: 0.04em; } .settings-action--star.is-active { background: var(--accent-default, #f59e0b); color: var(--bg-base, #0a0a0a); border-color: transparent; } .settings-value--muted { color: var(--text-muted); font-style: italic; } .settings-value--error { color: var(--text-error, #ef4444); word-break: break-word; } /* CORS / proxy-required warning shown above the Status row when a * non-browser-callable provider is selected. Yellow / advisory tone: * the key is configurable but won't work in BYOK browser mode. */ .settings-warn { margin: 0 0 12px 0; padding: 10px 12px; font-size: 12px; line-height: 1.5; color: var(--text-warn, #f59e0b); background: var(--bg-warn, rgba(245, 158, 11, 0.08)); border: 1px solid var(--border-warn, rgba(245, 158, 11, 0.3)); border-radius: 6px; } /* Neutral counterpart to .settings-warn: an informational note (e.g. a * relayed provider routes through the BYOK key-relay), not a warning. */ .settings-note { margin: 0 0 12px 0; padding: 10px 12px; font-size: 12px; line-height: 1.5; color: var(--text-muted, #9ca3af); background: var(--bg-elevated, rgba(255, 255, 255, 0.03)); border: 1px solid var(--border, rgba(255, 255, 255, 0.12)); border-radius: 6px; } /* ── Capability-first layout (settings-modal only; ADR-008 LLM-008) ── * The settings-modal renders a single scrolling column (.settings-body * --single) instead of the two-pane provider list; account-dialog keeps * the shared two-column .settings-body. :has() narrows just this dialog. */ .settings:has(.settings-body--single) { width: min(560px, calc(100vw - 48px)); } .settings-body--single { display: block; overflow-y: auto; padding: 16px 20px 20px; } .settings-section-label { font-family: var(--font-mono); font-size: 9.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin: 18px 0 10px; } .settings-section-label:first-child { margin-top: 4px; } .settings-caps { display: grid; gap: 8px; } .settings-cap-row { display: grid; grid-template-columns: 56px 10px 1fr; align-items: center; gap: 10px; } .settings-cap-name { font-size: 13px; font-weight: 500; color: var(--text-primary); } .settings-cap-row--disabled .settings-cap-name { color: var(--text-muted); } .settings-cap-row .settings-model-select { width: 100%; } .settings-gen-row { grid-template-columns: 56px 1fr; } /* Provider cards — expandable key editors. */ .settings-pcards { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .settings-pcard { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); overflow: hidden; } .settings-pcard.is-expanded { border-color: var(--border-accent); } .settings-pcard-head { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; text-align: left; background: transparent; cursor: pointer; } .settings-pcard-head:hover { background: var(--bg-elevated); } .settings-pcard-meta { display: flex; flex-direction: column; min-width: 0; } .settings-pcard-name { font-size: 13px; font-weight: 500; color: var(--text-primary); } .settings-pcard-caps { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.04em; color: var(--text-muted); } .settings-pcard-head .settings-value { margin-left: auto; flex-shrink: 0; } .settings-pcard-body { padding: 0 12px 12px; display: flex; flex-direction: column; gap: 10px; } .settings-storage-note { margin: 18px 0 0; font-size: 11px; line-height: 1.5; color: var(--text-muted); } /* Account dialog — identity header. Reuses .settings* shell otherwise. */ .account-identity { display: flex; align-items: center; gap: 12px; padding: 4px 0 16px 0; border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.08)); margin-bottom: 16px; } .account-avatar-lg { width: 48px; height: 48px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 600; background: var(--accent, #6366f1); color: var(--text-on-accent, #ffffff); flex: 0 0 auto; } .account-identity-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; } /* ═══════════════════════════════════════════════════════════════ */ /* Confirm / alert dialog — native