Spaces:
Sleeping
Sleeping
| /* ============================================================================ */ | |
| /* Embed Studio - Full-screen chart editor panel */ | |
| /* ============================================================================ */ | |
| .embed-studio { | |
| position: fixed; | |
| inset: 0; | |
| z-index: var(--z-modal); | |
| display: flex; | |
| flex-direction: column; | |
| background: var(--page-bg); | |
| color: var(--text-color); | |
| } | |
| /* --- Header --- */ | |
| .es-header { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 8px 16px; | |
| border-bottom: 1px solid var(--border-color); | |
| background: var(--surface-bg); | |
| flex-shrink: 0; | |
| } | |
| .es-header__left { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .es-header__icon { | |
| font-size: 16px; | |
| } | |
| .es-header__title { | |
| font-size: 14px; | |
| font-weight: 600; | |
| } | |
| .es-header__src { | |
| font-family: var(--font-mono); | |
| font-size: 12px; | |
| color: var(--muted-color); | |
| background: var(--code-bg); | |
| padding: 2px 6px; | |
| border-radius: 4px; | |
| } | |
| .es-header__actions { | |
| display: flex; | |
| gap: 4px; | |
| } | |
| /* --- Body: split panel --- */ | |
| .es-body { | |
| display: flex; | |
| flex: 1; | |
| min-height: 0; | |
| } | |
| /* --- Chat panel (left) --- */ | |
| .es-chat { | |
| width: 400px; | |
| min-width: 320px; | |
| max-width: 480px; | |
| display: flex; | |
| flex-direction: column; | |
| border-right: 1px solid var(--border-color); | |
| } | |
| .es-chat__messages { | |
| flex: 1; | |
| overflow-y: auto; | |
| padding: 16px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 12px; | |
| } | |
| .es-chat__empty { | |
| text-align: center; | |
| color: var(--muted-color); | |
| padding: 40px 20px; | |
| font-size: 13px; | |
| line-height: 1.6; | |
| } | |
| .es-chat__hint { | |
| font-size: 12px; | |
| opacity: 0.7; | |
| font-style: italic; | |
| margin-top: 8px; | |
| } | |
| /* Messages */ | |
| .es-message { | |
| max-width: 90%; | |
| font-size: 13px; | |
| line-height: 1.5; | |
| } | |
| .es-message--user { | |
| align-self: flex-end; | |
| } | |
| .es-message--ai { | |
| align-self: flex-start; | |
| } | |
| .es-message__text { | |
| padding: 8px 12px; | |
| border-radius: 12px; | |
| word-break: break-word; | |
| font-size: 0.82rem; | |
| line-height: 1.55; | |
| } | |
| .es-message--user .es-message__text { white-space: pre-wrap; } | |
| /* Markdown inside embed assistant bubbles */ | |
| .es-message__text p { margin: 0 0 0.4em; } | |
| .es-message__text p:last-child { margin-bottom: 0; } | |
| .es-message__text ul, | |
| .es-message__text ol { margin: 0.3em 0; padding-left: 1.4em; } | |
| .es-message__text li { margin-bottom: 0.15em; } | |
| .es-message__text code { | |
| font-family: 'SF Mono', 'Fira Code', monospace; | |
| font-size: 0.85em; | |
| background: rgba(0,0,0,0.15); | |
| padding: 1px 4px; | |
| border-radius: 3px; | |
| } | |
| .es-message__text pre { | |
| background: rgba(0,0,0,0.15); | |
| padding: 8px 10px; | |
| border-radius: 6px; | |
| overflow-x: auto; | |
| margin: 0.4em 0; | |
| } | |
| .es-message__text pre code { background: none; padding: 0; } | |
| .es-message__text strong { font-weight: 600; } | |
| .es-message__text a { color: var(--primary-color); text-decoration: underline; } | |
| .es-message__text blockquote { | |
| margin: 0.4em 0; | |
| padding-left: 10px; | |
| border-left: 2px solid var(--border-color); | |
| opacity: 0.7; | |
| } | |
| .es-message--user .es-message__text { | |
| background: var(--primary-color); | |
| color: var(--on-primary); | |
| border-bottom-right-radius: 4px; | |
| } | |
| .es-message--ai .es-message__text { | |
| background: var(--surface-bg); | |
| border: 1px solid var(--border-color); | |
| border-bottom-left-radius: 4px; | |
| } | |
| .es-message__tool { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| padding: 4px 8px; | |
| font-size: 11px; | |
| font-family: var(--font-mono); | |
| background: var(--code-bg); | |
| border-radius: 6px; | |
| color: var(--muted-color); | |
| margin-top: 4px; | |
| max-width: 100%; | |
| } | |
| .es-message__tool-name { | |
| font-weight: 600; | |
| white-space: nowrap; | |
| } | |
| .es-message__tool-subtitle { | |
| font-family: var(--font-mono); | |
| font-size: 10.5px; | |
| opacity: 0.75; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| max-width: 180px; | |
| } | |
| .es-message__tool--running { | |
| color: var(--primary-color); | |
| background: color-mix(in srgb, var(--primary-color) 12%, var(--code-bg)); | |
| } | |
| .es-message__tool--done { | |
| color: var(--success-color, var(--muted-color)); | |
| } | |
| .es-message__tool-status--running { | |
| color: var(--primary-color); | |
| } | |
| .es-message__tool-status--done { | |
| color: var(--success-color); | |
| } | |
| /* Input area */ | |
| .es-chat__input-area { | |
| padding: 12px; | |
| border-top: 1px solid var(--border-color); | |
| background: var(--surface-bg); | |
| flex-shrink: 0; | |
| } | |
| .es-chat__error { | |
| font-size: 12px; | |
| color: var(--danger-color); | |
| padding: 4px 0 8px; | |
| } | |
| .es-chat__input-row { | |
| display: flex; | |
| align-items: flex-end; | |
| gap: 8px; | |
| } | |
| .es-chat__textarea { | |
| flex: 1; | |
| resize: none; | |
| border: 1px solid var(--border-color); | |
| border-radius: 8px; | |
| padding: 8px 12px; | |
| font-size: 13px; | |
| font-family: inherit; | |
| line-height: 1.5; | |
| background: var(--page-bg); | |
| color: var(--text-color); | |
| outline: none; | |
| min-height: 36px; | |
| max-height: 160px; | |
| } | |
| .es-chat__textarea:focus { | |
| border-color: var(--primary-color); | |
| } | |
| .es-chat__send-btn { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| width: 36px; | |
| height: 36px; | |
| border: none; | |
| border-radius: 8px; | |
| background: var(--primary-color); | |
| color: var(--on-primary); | |
| cursor: pointer; | |
| flex-shrink: 0; | |
| transition: opacity 120ms ease; | |
| } | |
| .es-chat__send-btn:hover { | |
| opacity: 0.85; | |
| } | |
| .es-chat__send-btn:disabled { | |
| opacity: 0.4; | |
| cursor: default; | |
| } | |
| /* --- Preview panel (right) --- */ | |
| .es-preview { | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| min-width: 0; | |
| } | |
| .es-preview__toolbar { | |
| display: flex; | |
| align-items: center; | |
| gap: 4px; | |
| padding: 6px 12px; | |
| border-bottom: 1px solid var(--border-color); | |
| background: var(--surface-bg); | |
| flex-shrink: 0; | |
| } | |
| .es-preview__tab { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 4px; | |
| padding: 4px 10px; | |
| border: 1px solid transparent; | |
| border-radius: 6px; | |
| background: none; | |
| font-size: 12px; | |
| color: var(--muted-color); | |
| cursor: pointer; | |
| transition: all 120ms ease; | |
| } | |
| .es-preview__tab:hover { | |
| background: var(--border-color); | |
| color: var(--text-color); | |
| } | |
| .es-preview__tab--active { | |
| background: var(--border-color); | |
| color: var(--text-color); | |
| font-weight: 600; | |
| } | |
| /* Iframe container */ | |
| .es-preview__frame-container { | |
| flex: 1; | |
| position: relative; | |
| overflow: hidden; | |
| /* The iframe body is set to `background: transparent` by build-doc, | |
| so whatever sits behind the iframe is what actually shows. Pin the | |
| container to --page-bg so the preview tracks the theme instead of | |
| falling through to the browser's default white. */ | |
| background: var(--page-bg); | |
| } | |
| /* Stage: the positioned context the double-buffered iframes fill (inset:0). | |
| Default: fills the whole frame container (chart previews). */ | |
| .es-preview__stage { | |
| position: relative; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| /* Banner mode: center a 5:2 box matching .hero-banner so the preview is a | |
| true WYSIWYG of how the banner renders in the article header. */ | |
| .es-preview__frame-container--banner { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 24px; | |
| } | |
| .es-preview__frame-container--banner .es-preview__stage { | |
| height: auto; | |
| width: 100%; | |
| max-width: 980px; | |
| aspect-ratio: 5 / 2; | |
| border: 1px solid var(--border-color); | |
| border-radius: 8px; | |
| overflow: hidden; | |
| } | |
| .es-preview__frame-container iframe { | |
| /* Some browsers paint a default white canvas on `srcdoc` iframes | |
| before the document's own <style> applies. Forcing the element | |
| itself to transparent lets --page-bg show through, which keeps | |
| dark mode clean while the chart is (re)loading. */ | |
| background: transparent; | |
| color-scheme: light dark; | |
| } | |
| .es-hidden { | |
| display: none ; | |
| } | |
| .es-preview__empty { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| height: 100%; | |
| gap: 12px; | |
| color: var(--muted-color); | |
| font-size: 13px; | |
| } | |
| /* Code view */ | |
| .es-preview__code { | |
| flex: 1; | |
| overflow: auto; | |
| padding: 16px; | |
| background: var(--code-bg); | |
| } | |
| .es-preview__pre { | |
| margin: 0; | |
| font-family: var(--font-mono); | |
| font-size: 12px; | |
| line-height: 1.6; | |
| white-space: pre-wrap; | |
| word-break: break-all; | |
| color: var(--text-color); | |
| } | |
| /* --- Files sidebar (far left) --- */ | |
| .es-files { | |
| width: 240px; | |
| min-width: 220px; | |
| max-width: 260px; | |
| display: flex; | |
| flex-direction: column; | |
| border-right: 1px solid var(--border-color); | |
| background: var(--surface-bg); | |
| overflow-y: auto; | |
| } | |
| .es-files__section { | |
| display: flex; | |
| flex-direction: column; | |
| padding: 10px 12px 14px; | |
| border-bottom: 1px solid var(--border-color); | |
| } | |
| .es-files__section:last-child { | |
| border-bottom: none; | |
| } | |
| .es-files__section-title { | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| text-transform: uppercase; | |
| font-size: 10.5px; | |
| font-weight: 700; | |
| letter-spacing: 0.06em; | |
| color: var(--muted-color); | |
| margin-bottom: 8px; | |
| } | |
| .es-files__count { | |
| margin-left: auto; | |
| font-size: 10.5px; | |
| font-weight: 600; | |
| color: var(--muted-color); | |
| background: var(--code-bg); | |
| padding: 1px 6px; | |
| border-radius: 10px; | |
| } | |
| .es-files__list { | |
| list-style: none; | |
| margin: 0 0 8px; | |
| padding: 0; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 2px; | |
| } | |
| .es-files__empty { | |
| font-size: 11.5px; | |
| color: var(--muted-color); | |
| padding: 4px 0 6px; | |
| font-style: italic; | |
| } | |
| .es-files__item { | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| padding: 5px 8px; | |
| border-radius: 6px; | |
| font-size: 12px; | |
| color: var(--text-color); | |
| min-width: 0; | |
| } | |
| .es-files__item--current { | |
| background: color-mix(in srgb, var(--primary-color) 14%, transparent); | |
| color: var(--text-color); | |
| } | |
| .es-files__item--data, | |
| .es-files__item:has(> .es-files__item-main) { | |
| padding: 0; | |
| overflow: hidden; | |
| } | |
| .es-files__item-main { | |
| flex: 1; | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| background: transparent; | |
| border: none; | |
| padding: 5px 8px; | |
| font-size: 12px; | |
| color: inherit; | |
| cursor: pointer; | |
| text-align: left; | |
| min-width: 0; | |
| border-radius: 6px; | |
| } | |
| .es-files__item-main:hover { | |
| background: var(--code-bg); | |
| } | |
| .es-files__item--current .es-files__item-main:hover { | |
| background: color-mix(in srgb, var(--primary-color) 20%, transparent); | |
| } | |
| .es-files__name { | |
| flex: 1; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| min-width: 0; | |
| } | |
| .es-files__size { | |
| font-size: 10.5px; | |
| color: var(--muted-color); | |
| font-variant-numeric: tabular-nums; | |
| } | |
| .es-files__badge { | |
| font-size: 9.5px; | |
| text-transform: uppercase; | |
| letter-spacing: 0.06em; | |
| font-weight: 700; | |
| color: var(--primary-color); | |
| background: var(--page-bg); | |
| padding: 1px 5px; | |
| border-radius: 10px; | |
| } | |
| .es-files__item-remove { | |
| background: transparent; | |
| border: none; | |
| color: var(--muted-color); | |
| cursor: pointer; | |
| padding: 4px 8px; | |
| display: flex; | |
| align-items: center; | |
| opacity: 0; | |
| transition: opacity 120ms ease, color 120ms ease; | |
| } | |
| .es-files__item--data:hover .es-files__item-remove { | |
| opacity: 1; | |
| } | |
| .es-files__item-remove:hover { | |
| color: var(--danger-color, #e44); | |
| } | |
| .es-files__error { | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| margin-top: 6px; | |
| padding: 6px 8px; | |
| font-size: 11.5px; | |
| color: var(--danger-color, #e44); | |
| background: color-mix(in srgb, var(--danger-color, #e44) 10%, transparent); | |
| border-radius: 6px; | |
| } | |
| /* --- Upload zone --- */ | |
| .es-upload-zone { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 8px; | |
| padding: 14px 10px; | |
| margin-top: 4px; | |
| border: 1.5px dashed var(--border-color); | |
| border-radius: 8px; | |
| color: var(--muted-color); | |
| font-size: 12px; | |
| cursor: pointer; | |
| transition: background 120ms ease, border-color 120ms ease, color 120ms ease; | |
| text-align: center; | |
| flex-direction: column; | |
| } | |
| .es-upload-zone:hover, | |
| .es-upload-zone:focus-visible { | |
| border-color: var(--primary-color); | |
| color: var(--text-color); | |
| background: color-mix(in srgb, var(--primary-color) 6%, transparent); | |
| outline: none; | |
| } | |
| .es-upload-zone--active { | |
| border-color: var(--primary-color); | |
| background: color-mix(in srgb, var(--primary-color) 12%, transparent); | |
| color: var(--text-color); | |
| } | |
| .es-upload-zone--compact { | |
| flex-direction: row; | |
| padding: 8px 10px; | |
| font-size: 11.5px; | |
| } | |
| .es-upload-zone__text { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 2px; | |
| align-items: center; | |
| } | |
| .es-upload-zone__text strong { | |
| color: var(--text-color); | |
| font-size: 12.5px; | |
| font-weight: 600; | |
| } | |
| .es-upload-zone__text span { | |
| font-size: 10.5px; | |
| color: var(--muted-color); | |
| } | |
| /* --- Data file viewer --- */ | |
| .es-data-viewer { | |
| position: absolute; | |
| inset: 0; | |
| display: flex; | |
| flex-direction: column; | |
| background: var(--page-bg); | |
| z-index: 3; | |
| } | |
| .es-preview { | |
| position: relative; | |
| } | |
| .es-data-viewer__header { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| padding: 8px 12px; | |
| border-bottom: 1px solid var(--border-color); | |
| background: var(--surface-bg); | |
| flex-shrink: 0; | |
| } | |
| .es-data-viewer__title { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 2px; | |
| min-width: 0; | |
| } | |
| .es-data-viewer__title strong { | |
| font-size: 13px; | |
| font-weight: 600; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| .es-data-viewer__meta { | |
| font-size: 11px; | |
| color: var(--muted-color); | |
| font-variant-numeric: tabular-nums; | |
| } | |
| .es-data-viewer__actions { | |
| margin-left: auto; | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .es-data-viewer__tabs { | |
| display: flex; | |
| gap: 2px; | |
| } | |
| .es-data-viewer__body { | |
| flex: 1; | |
| overflow: auto; | |
| padding: 12px; | |
| min-height: 0; | |
| } | |
| .es-data-viewer__raw { | |
| margin: 0; | |
| padding: 12px 14px; | |
| background: var(--code-bg); | |
| border-radius: 6px; | |
| font-family: var(--font-mono); | |
| font-size: 12px; | |
| line-height: 1.6; | |
| color: var(--text-color); | |
| overflow-x: auto; | |
| white-space: pre; | |
| } | |
| .es-data-table-wrap { | |
| border: 1px solid var(--border-color); | |
| border-radius: 6px; | |
| overflow: auto; | |
| } | |
| .es-data-table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| font-family: var(--font-mono); | |
| font-size: 11.5px; | |
| } | |
| .es-data-table th, | |
| .es-data-table td { | |
| padding: 6px 10px; | |
| border-right: 1px solid var(--border-color); | |
| border-bottom: 1px solid var(--border-color); | |
| text-align: left; | |
| vertical-align: top; | |
| max-width: 280px; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| .es-data-table th:last-child, | |
| .es-data-table td:last-child { | |
| border-right: none; | |
| } | |
| .es-data-table thead th { | |
| position: sticky; | |
| top: 0; | |
| background: var(--surface-bg); | |
| font-weight: 600; | |
| color: var(--text-color); | |
| z-index: 1; | |
| } | |
| .es-data-table tbody tr:nth-child(even) { | |
| background: color-mix(in srgb, var(--border-color) 20%, transparent); | |
| } | |
| .es-data-table__footer { | |
| padding: 8px 12px; | |
| font-size: 11px; | |
| color: var(--muted-color); | |
| border-top: 1px solid var(--border-color); | |
| background: var(--surface-bg); | |
| font-style: italic; | |
| text-align: center; | |
| } | |