Spaces:
Running
Running
| :root { | |
| color-scheme: light; | |
| --bg: #eef3f8; | |
| --panel: #ffffff; | |
| --text: #162033; | |
| --muted: #607089; | |
| --line: #d8e0ec; | |
| --accent: #1f6feb; | |
| --accent-dark: #174ea6; | |
| --success: #168557; | |
| --error: #c43c39; | |
| --terminal: #111827; | |
| } | |
| * { | |
| box-sizing: border-box; | |
| } | |
| body { | |
| margin: 0; | |
| background: var(--bg); | |
| color: var(--text); | |
| font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; | |
| } | |
| .shell { | |
| width: min(1380px, calc(100vw - 40px)); | |
| margin: 24px auto; | |
| } | |
| .topbar, | |
| .panel-heading, | |
| .preview-header { | |
| display: flex; | |
| align-items: flex-start; | |
| justify-content: space-between; | |
| gap: 16px; | |
| } | |
| .topbar { | |
| align-items: center; | |
| margin-bottom: 18px; | |
| } | |
| .eyebrow, | |
| .preview-kicker, | |
| .summary-label { | |
| font-size: 12px; | |
| font-weight: 850; | |
| letter-spacing: 0.08em; | |
| text-transform: uppercase; | |
| } | |
| .eyebrow, | |
| .preview-kicker { | |
| color: var(--accent-dark); | |
| } | |
| h1, | |
| h2, | |
| h3, | |
| p { | |
| margin-top: 0; | |
| } | |
| h1 { | |
| margin-bottom: 0; | |
| font-size: 30px; | |
| } | |
| h2 { | |
| margin-bottom: 10px; | |
| font-size: 18px; | |
| } | |
| h3 { | |
| margin: 3px 0 0; | |
| font-size: 17px; | |
| } | |
| p { | |
| color: var(--muted); | |
| line-height: 1.5; | |
| } | |
| .workspace { | |
| display: grid; | |
| grid-template-columns: 320px 1fr; | |
| grid-template-areas: | |
| "upload workflow" | |
| "upload preview" | |
| "upload changes" | |
| "upload terminal" | |
| "summary summary"; | |
| gap: 16px; | |
| } | |
| .upload-panel, | |
| .workflow-panel, | |
| .preview-panel, | |
| .changes-panel, | |
| .terminal-panel, | |
| .summary-panel, | |
| .doc-preview, | |
| .summary-item, | |
| .summary-empty { | |
| border: 1px solid var(--line); | |
| border-radius: 8px; | |
| background: var(--panel); | |
| } | |
| .upload-panel, | |
| .workflow-panel, | |
| .preview-panel, | |
| .changes-panel, | |
| .terminal-panel, | |
| .summary-panel { | |
| padding: 18px; | |
| box-shadow: 0 12px 32px rgba(31, 48, 75, 0.08); | |
| } | |
| .upload-panel { grid-area: upload; } | |
| .workflow-panel { grid-area: workflow; } | |
| .preview-panel { grid-area: preview; } | |
| .changes-panel { grid-area: changes; } | |
| .terminal-panel { grid-area: terminal; } | |
| .summary-panel { grid-area: summary; } | |
| .status-pill, | |
| .preview-count { | |
| border-radius: 999px; | |
| padding: 7px 11px; | |
| font-size: 12px; | |
| font-weight: 800; | |
| white-space: nowrap; | |
| } | |
| .status-pill.ok, | |
| .doc-preview.result .preview-count { | |
| background: #def7e9; | |
| color: var(--success); | |
| } | |
| .preview-count { | |
| background: #edf3fb; | |
| color: var(--muted); | |
| } | |
| .dropzone { | |
| display: flex; | |
| min-height: 164px; | |
| cursor: pointer; | |
| align-items: center; | |
| justify-content: center; | |
| flex-direction: column; | |
| gap: 7px; | |
| border: 2px dashed #abc0dc; | |
| border-radius: 8px; | |
| background: #f8fbff; | |
| margin: 16px 0 12px; | |
| padding: 18px; | |
| text-align: center; | |
| } | |
| .dropzone.dragging { | |
| border-color: var(--accent); | |
| background: #edf5ff; | |
| } | |
| .dropzone input { | |
| display: none; | |
| } | |
| .drop-title { | |
| font-size: 18px; | |
| font-weight: 800; | |
| } | |
| .drop-subtitle, | |
| .file-card { | |
| color: var(--muted); | |
| font-size: 14px; | |
| } | |
| .file-card { | |
| min-height: 44px; | |
| border: 1px solid var(--line); | |
| border-radius: 8px; | |
| padding: 11px 12px; | |
| overflow-wrap: anywhere; | |
| } | |
| .mode-switch { | |
| border: 1px solid var(--line); | |
| border-radius: 8px; | |
| margin: 14px 0 0; | |
| padding: 12px; | |
| } | |
| .mode-switch legend { | |
| padding: 0 6px; | |
| color: var(--muted); | |
| font-size: 12px; | |
| font-weight: 850; | |
| letter-spacing: 0.08em; | |
| text-transform: uppercase; | |
| } | |
| .mode-switch label { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| border: 1px solid var(--line); | |
| border-radius: 8px; | |
| cursor: pointer; | |
| margin-top: 8px; | |
| padding: 11px; | |
| } | |
| .mode-switch label:has(input:checked) { | |
| border-color: var(--accent); | |
| background: #edf5ff; | |
| } | |
| .mode-switch label.disabled { | |
| cursor: not-allowed; | |
| opacity: 0.64; | |
| } | |
| .mode-switch input { | |
| width: 16px; | |
| height: 16px; | |
| accent-color: var(--accent); | |
| } | |
| .mode-switch span { | |
| display: grid; | |
| gap: 2px; | |
| } | |
| .mode-switch strong { | |
| font-size: 15px; | |
| } | |
| .mode-switch small { | |
| color: var(--muted); | |
| font-size: 12px; | |
| line-height: 1.35; | |
| } | |
| .mode-note { | |
| margin: 12px 0 0; | |
| padding: 12px 14px; | |
| border: 1px solid #d8b84a; | |
| border-left: 4px solid #c49214; | |
| border-radius: 8px; | |
| background: #fff8e6; | |
| color: #5c4a12; | |
| font-size: 13px; | |
| line-height: 1.45; | |
| } | |
| .mode-note strong { | |
| display: block; | |
| margin-bottom: 4px; | |
| font-size: 12px; | |
| letter-spacing: 0.06em; | |
| text-transform: uppercase; | |
| } | |
| .mode-note p { | |
| margin: 0; | |
| } | |
| button, | |
| .download-link { | |
| display: inline-flex; | |
| width: 100%; | |
| min-height: 44px; | |
| align-items: center; | |
| justify-content: center; | |
| border: 0; | |
| border-radius: 8px; | |
| margin-top: 12px; | |
| background: var(--accent); | |
| color: #ffffff; | |
| cursor: pointer; | |
| font-weight: 800; | |
| line-height: 1.25; | |
| overflow-wrap: anywhere; | |
| padding: 10px 12px; | |
| text-decoration: none; | |
| } | |
| button:disabled { | |
| background: #9aa8bd; | |
| cursor: not-allowed; | |
| } | |
| .download-link { | |
| background: var(--success); | |
| } | |
| .hidden { | |
| display: none; | |
| } | |
| .workflow { | |
| display: grid; | |
| grid-template-columns: repeat(3, minmax(180px, 1fr)); | |
| gap: 12px; | |
| margin-top: 18px; | |
| } | |
| .node { | |
| position: relative; | |
| min-height: 112px; | |
| border: 1px solid var(--line); | |
| border-radius: 8px; | |
| background: #fbfdff; | |
| padding: 14px; | |
| } | |
| .node-status { | |
| display: inline-flex; | |
| border-radius: 999px; | |
| padding: 3px 8px; | |
| background: #e9edf5; | |
| color: var(--muted); | |
| font-size: 12px; | |
| font-weight: 800; | |
| text-transform: uppercase; | |
| } | |
| .node.done { | |
| border-color: #9dd8bd; | |
| } | |
| .node.done .node-status { | |
| background: #def7e9; | |
| color: var(--success); | |
| } | |
| .node.running { | |
| border-color: #9fc4ff; | |
| } | |
| .node.running .node-status { | |
| background: #e2eeff; | |
| color: var(--accent-dark); | |
| } | |
| .node.error { | |
| border-color: #efb0ad; | |
| } | |
| .node.error .node-status { | |
| background: #ffe4e2; | |
| color: var(--error); | |
| } | |
| .node-title { | |
| margin: 10px 0 6px; | |
| font-size: 15px; | |
| font-weight: 800; | |
| } | |
| .node-detail { | |
| color: var(--muted); | |
| font-size: 13px; | |
| line-height: 1.35; | |
| overflow-wrap: anywhere; | |
| } | |
| .preview-grid { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 14px; | |
| margin-top: 16px; | |
| } | |
| .doc-preview { | |
| overflow: hidden; | |
| } | |
| .doc-preview.result { | |
| border-color: #abd9c1; | |
| } | |
| .preview-header { | |
| align-items: center; | |
| border-bottom: 1px solid var(--line); | |
| padding: 14px 16px; | |
| } | |
| #uploadedPreview, | |
| #resultPreview, | |
| #terminal { | |
| overflow: auto; | |
| font-family: "Cascadia Mono", Consolas, monospace; | |
| font-size: 13px; | |
| line-height: 1.6; | |
| margin: 0; | |
| padding: 16px; | |
| white-space: pre-wrap; | |
| overflow-wrap: anywhere; | |
| } | |
| #uploadedPreview, | |
| #resultPreview { | |
| min-height: 320px; | |
| max-height: 520px; | |
| background: #f8fbff; | |
| color: #1d2a3d; | |
| } | |
| #terminal { | |
| min-height: 220px; | |
| max-height: 340px; | |
| border-radius: 8px; | |
| background: var(--terminal); | |
| color: #d1fae5; | |
| margin-top: 16px; | |
| } | |
| .changes-list { | |
| display: grid; | |
| gap: 12px; | |
| margin-top: 16px; | |
| } | |
| .changes-count, | |
| .changes-empty, | |
| .change-card { | |
| border: 1px solid var(--line); | |
| border-radius: 8px; | |
| background: #fbfdff; | |
| } | |
| .changes-count, | |
| .changes-empty { | |
| padding: 12px 14px; | |
| color: var(--muted); | |
| font-weight: 750; | |
| } | |
| .change-card { | |
| display: grid; | |
| grid-template-columns: 64px 1fr 1fr; | |
| gap: 12px; | |
| padding: 12px; | |
| } | |
| .change-number { | |
| display: inline-flex; | |
| min-height: 38px; | |
| align-items: center; | |
| justify-content: center; | |
| border-radius: 8px; | |
| background: #edf3fb; | |
| color: var(--accent-dark); | |
| font-weight: 850; | |
| } | |
| .change-pair { | |
| min-width: 0; | |
| } | |
| .change-label { | |
| display: inline-flex; | |
| border-radius: 999px; | |
| padding: 3px 8px; | |
| margin-bottom: 7px; | |
| font-size: 11px; | |
| font-weight: 850; | |
| letter-spacing: 0.06em; | |
| text-transform: uppercase; | |
| } | |
| .change-label.before { | |
| background: #fff1e6; | |
| color: #a34f00; | |
| } | |
| .change-label.after { | |
| background: #def7e9; | |
| color: var(--success); | |
| } | |
| .change-pair code { | |
| display: block; | |
| min-height: 48px; | |
| border: 1px solid var(--line); | |
| border-radius: 8px; | |
| background: #f8fbff; | |
| color: #1d2a3d; | |
| font-family: "Cascadia Mono", Consolas, monospace; | |
| font-size: 12px; | |
| line-height: 1.55; | |
| overflow-wrap: anywhere; | |
| padding: 10px; | |
| white-space: pre-wrap; | |
| } | |
| .summary-grid { | |
| display: grid; | |
| grid-template-columns: repeat(5, minmax(140px, 1fr)); | |
| gap: 12px; | |
| } | |
| .summary-item, | |
| .summary-empty { | |
| padding: 14px; | |
| background: #fbfdff; | |
| } | |
| .summary-label { | |
| color: var(--muted); | |
| } | |
| .summary-value { | |
| margin-top: 6px; | |
| font-size: 24px; | |
| font-weight: 850; | |
| } | |
| @media (max-width: 960px) { | |
| .workspace { | |
| grid-template-columns: 1fr; | |
| grid-template-areas: | |
| "upload" | |
| "workflow" | |
| "preview" | |
| "changes" | |
| "terminal" | |
| "summary"; | |
| } | |
| .workflow, | |
| .summary-grid, | |
| .preview-grid, | |
| .change-card { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |