Spaces:
Running on Zero
Running on Zero
| :root { | |
| color-scheme: light; | |
| --app-bg: #f5f6f6; | |
| --surface: #ffffff; | |
| --surface-muted: #f8f9f9; | |
| --border: #dfe3e1; | |
| --border-strong: #c6ceca; | |
| --text: #17201e; | |
| --muted: #68716f; | |
| --viewer: #101413; | |
| --primary: #087f62; | |
| --primary-hover: #066b53; | |
| --accent: #c27616; | |
| --surface-hover: #edf8f4; | |
| --upload-hover: #f0f7f4; | |
| --ready-bg: #edf8f4; | |
| --ready-hover: #e3f4ee; | |
| --ready-border: #8ac6b5; | |
| --ready-text: #075e49; | |
| --danger-border: #e59a9a; | |
| --danger-text: #9f2929; | |
| --panel-shadow: 0 8px 28px rgba(23, 32, 30, 0.055); | |
| --button-shadow: 0 4px 12px rgba(8, 127, 98, 0.16); | |
| --toast-shadow: 0 8px 28px rgba(23, 32, 30, 0.16); | |
| font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; | |
| letter-spacing: 0; | |
| } | |
| :root[data-theme="dark"] { | |
| color-scheme: dark; | |
| --app-bg: #101513; | |
| --surface: #1a211f; | |
| --surface-muted: #141a18; | |
| --border: #303a36; | |
| --border-strong: #46534e; | |
| --text: #edf2f0; | |
| --muted: #9da9a5; | |
| --viewer: #080b0a; | |
| --primary: #2fb88e; | |
| --primary-hover: #42c79b; | |
| --accent: #e2a14d; | |
| --surface-hover: #20332c; | |
| --upload-hover: #1c2924; | |
| --ready-bg: #193027; | |
| --ready-hover: #1e3a30; | |
| --ready-border: #3e7f69; | |
| --ready-text: #9ce2cc; | |
| --danger-border: #8f4a4a; | |
| --danger-text: #ffb2b2; | |
| --panel-shadow: 0 8px 28px rgba(0, 0, 0, 0.22); | |
| --button-shadow: 0 4px 12px rgba(0, 0, 0, 0.24); | |
| --toast-shadow: 0 8px 28px rgba(0, 0, 0, 0.32); | |
| } | |
| * { box-sizing: border-box; } | |
| [hidden] { display: none ; } | |
| html, body { | |
| min-height: 100%; | |
| margin: 0; | |
| background: var(--app-bg); | |
| color: var(--text); | |
| } | |
| button, input { font: inherit; } | |
| .app-shell { | |
| width: calc(100% - clamp(28px, 5vw, 64px)); | |
| max-width: 1240px; | |
| margin: 0 auto; | |
| } | |
| .app-header { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 24px; | |
| padding: 28px 2px 18px; | |
| } | |
| .app-header h1 { | |
| display: flex; | |
| align-items: baseline; | |
| flex: 1; | |
| flex-wrap: wrap; | |
| gap: 0.35em; | |
| margin: 0; | |
| line-height: 1.2; | |
| } | |
| .app-header h1 strong { | |
| font-size: clamp(1.75rem, 2.5vw, 2.2rem); | |
| font-weight: 720; | |
| } | |
| .app-header h1 span { | |
| color: var(--muted); | |
| font-size: clamp(0.92rem, 1.35vw, 1.08rem); | |
| font-weight: 550; | |
| } | |
| .header-actions { | |
| display: flex; | |
| align-items: center; | |
| flex-shrink: 0; | |
| gap: 9px; | |
| } | |
| .project-links { | |
| display: flex; | |
| gap: 9px; | |
| } | |
| .header-actions a { | |
| display: inline-flex; | |
| align-items: center; | |
| min-height: 38px; | |
| padding: 0 14px; | |
| border: 1px solid var(--border-strong); | |
| border-radius: 6px; | |
| background: var(--surface); | |
| color: var(--text); | |
| font-size: 0.78rem; | |
| font-weight: 650; | |
| text-decoration: none; | |
| transition: border-color 150ms ease-out, background 150ms ease-out; | |
| } | |
| .header-actions a:hover { | |
| border-color: var(--primary); | |
| background: var(--surface-hover); | |
| } | |
| .theme-toggle { | |
| position: relative; | |
| display: grid; | |
| place-items: center; | |
| width: 44px; | |
| height: 38px; | |
| border: 1px solid var(--border-strong); | |
| border-radius: 6px; | |
| background: var(--surface); | |
| cursor: pointer; | |
| } | |
| .theme-toggle input { | |
| position: absolute; | |
| width: 1px; | |
| height: 1px; | |
| opacity: 0; | |
| } | |
| .theme-track { | |
| position: relative; | |
| width: 28px; | |
| height: 16px; | |
| border-radius: 999px; | |
| background: var(--border-strong); | |
| transition: background 150ms ease-out; | |
| } | |
| .theme-track::after { | |
| position: absolute; | |
| top: 2px; | |
| left: 2px; | |
| width: 12px; | |
| height: 12px; | |
| border-radius: 50%; | |
| background: var(--surface); | |
| content: ""; | |
| transition: background 150ms ease-out, transform 150ms ease-out; | |
| } | |
| .theme-toggle input:checked + .theme-track { background: var(--primary); } | |
| .theme-toggle input:checked + .theme-track::after { background: #ffffff; transform: translateX(12px); } | |
| .theme-toggle input:focus-visible + .theme-track { outline: 2px solid var(--primary); outline-offset: 3px; } | |
| .theme-toggle:hover { border-color: var(--primary); } | |
| .workspace { | |
| display: grid; | |
| grid-template-columns: minmax(300px, 2fr) minmax(360px, 3fr); | |
| align-items: stretch; | |
| gap: 18px; | |
| margin-bottom: 26px; | |
| } | |
| .tool-panel { | |
| min-width: 0; | |
| overflow: hidden; | |
| border: 1px solid var(--border); | |
| border-radius: 8px; | |
| background: var(--surface); | |
| box-shadow: var(--panel-shadow); | |
| } | |
| .panel-heading { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| width: 100%; | |
| min-width: 0; | |
| min-height: 56px; | |
| padding: 17px 12px 15px; | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .panel-heading h2 { | |
| display: flex; | |
| align-items: center; | |
| flex-shrink: 0; | |
| gap: 9px; | |
| margin: 0; | |
| font-size: 0.9rem; | |
| font-weight: 700; | |
| line-height: 1.2; | |
| white-space: nowrap; | |
| } | |
| .panel-heading h2 span { | |
| color: var(--accent); | |
| font-size: 0.7rem; | |
| font-variant-numeric: tabular-nums; | |
| } | |
| .panel-heading p { | |
| margin: 0; | |
| color: var(--muted); | |
| font-size: 0.75rem; | |
| line-height: 1.2; | |
| } | |
| .source-panel .panel-heading p { | |
| flex: 1; | |
| min-width: 0; | |
| margin-left: 12px; | |
| font-size: clamp(0.58rem, 0.72vw, 0.66rem); | |
| text-align: right; | |
| } | |
| .panel-content { padding: 12px; } | |
| .upload-surface { | |
| position: relative; | |
| display: grid; | |
| place-items: center; | |
| width: 100%; | |
| min-height: 510px; | |
| overflow: hidden; | |
| border: 1px solid var(--border); | |
| border-radius: 6px; | |
| background: var(--surface-muted); | |
| cursor: pointer; | |
| transition: border-color 150ms ease-out, background 150ms ease-out; | |
| } | |
| .upload-surface:hover, | |
| .upload-surface.dragover { | |
| border-color: var(--primary); | |
| background: var(--upload-hover); | |
| } | |
| .upload-surface input { | |
| position: absolute; | |
| width: 1px; | |
| height: 1px; | |
| opacity: 0; | |
| } | |
| .upload-surface img { | |
| width: 100%; | |
| height: 510px; | |
| object-fit: contain; | |
| background: var(--surface-muted); | |
| } | |
| .upload-empty { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 5px; | |
| color: var(--muted); | |
| text-align: center; | |
| } | |
| .upload-empty strong { color: var(--text); font-size: 0.9rem; } | |
| .upload-empty small { font-size: 0.75rem; } | |
| .source-actions, | |
| .download-bar { | |
| display: flex; | |
| gap: 10px; | |
| padding: 0 12px 12px; | |
| } | |
| #reconstructButton { | |
| width: 100%; | |
| min-height: 46px; | |
| border: 1px solid var(--primary); | |
| border-radius: 6px; | |
| background: var(--primary); | |
| color: #ffffff; | |
| font-weight: 700; | |
| cursor: pointer; | |
| box-shadow: var(--button-shadow); | |
| } | |
| #reconstructButton:hover:not(:disabled) { | |
| border-color: var(--primary-hover); | |
| background: var(--primary-hover); | |
| } | |
| #reconstructButton:disabled { cursor: not-allowed; opacity: 0.55; } | |
| .viewer-shell { | |
| position: relative; | |
| width: 100%; | |
| height: 510px; | |
| overflow: hidden; | |
| border-radius: 6px; | |
| background: var(--viewer); | |
| } | |
| .viewer-frame { | |
| display: block; | |
| width: 100%; | |
| height: 100%; | |
| border: 0; | |
| opacity: 0; | |
| transition: opacity 180ms ease-out; | |
| } | |
| .viewer-preloader { | |
| position: absolute; | |
| width: 1px; | |
| height: 1px; | |
| border: 0; | |
| opacity: 0; | |
| pointer-events: none; | |
| } | |
| .viewer-state { | |
| position: absolute; | |
| inset: 0; | |
| z-index: 2; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 8px; | |
| color: #f4f7f6; | |
| text-align: center; | |
| transition: opacity 180ms ease-out, visibility 180ms ease-out; | |
| } | |
| .viewer-state strong { font-size: 0.9rem; font-weight: 650; } | |
| .viewer-state span { color: #94a19d; font-size: 0.75rem; } | |
| .viewer-indicator { | |
| width: 32px; | |
| height: 2px; | |
| margin-bottom: 7px; | |
| background: #46514e; | |
| } | |
| .viewer-shell[data-state="loading"] .viewer-indicator, | |
| .viewer-shell[data-state="timeout"] .viewer-indicator { | |
| width: 34px; | |
| height: 34px; | |
| border: 3px solid #35413d; | |
| border-top-color: #34d399; | |
| border-radius: 50%; | |
| background: transparent; | |
| animation: viewer-spin 0.9s linear infinite; | |
| } | |
| .viewer-shell[data-state="error"] .viewer-indicator { | |
| width: 32px; | |
| height: 3px; | |
| background: #f87171; | |
| } | |
| .viewer-shell[data-state="ready"] .viewer-frame { opacity: 1; } | |
| .viewer-shell[data-state="ready"] .viewer-state { visibility: hidden; opacity: 0; } | |
| @keyframes viewer-spin { to { transform: rotate(360deg); } } | |
| .artifact-button { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| flex: 1; | |
| min-height: 42px; | |
| padding: 0 12px; | |
| border: 1px solid var(--border-strong); | |
| border-radius: 6px; | |
| background: var(--surface-muted); | |
| color: var(--text); | |
| font-size: 0.84rem; | |
| font-weight: 650; | |
| text-decoration: none; | |
| transition: border-color 150ms ease-out, background 150ms ease-out; | |
| } | |
| .artifact-button.ready { | |
| border-color: var(--ready-border); | |
| background: var(--ready-bg); | |
| color: var(--ready-text); | |
| } | |
| .artifact-button.ready:hover { | |
| border-color: var(--primary); | |
| background: var(--ready-hover); | |
| } | |
| .artifact-button.disabled { color: var(--muted); pointer-events: none; } | |
| .examples-section { | |
| margin-bottom: 36px; | |
| padding: 4px 2px 0; | |
| } | |
| .section-heading { | |
| display: flex; | |
| align-items: baseline; | |
| justify-content: space-between; | |
| gap: 16px; | |
| margin-bottom: 11px; | |
| } | |
| .section-heading h2 { margin: 0; font-size: 0.9rem; font-weight: 700; } | |
| .section-heading span { color: var(--muted); font-size: 0.75rem; } | |
| .examples-grid { | |
| display: grid; | |
| grid-template-columns: repeat(28, minmax(0, 1fr)); | |
| grid-auto-flow: row dense; | |
| grid-auto-rows: 158px; | |
| gap: 10px; | |
| } | |
| .example-item { | |
| min-width: 0; | |
| overflow: hidden; | |
| padding: 0; | |
| border: 0; | |
| border-radius: 7px; | |
| background: transparent; | |
| cursor: pointer; | |
| } | |
| .example-item img { | |
| display: block; | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| transition: opacity 150ms ease-out, transform 150ms ease-out; | |
| } | |
| .example-item:hover img { opacity: 0.9; transform: scale(1.015); } | |
| .example-item:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } | |
| .toast { | |
| position: fixed; | |
| bottom: 22px; | |
| left: 50%; | |
| z-index: 20; | |
| max-width: min(90vw, 620px); | |
| padding: 9px 14px; | |
| border: 1px solid var(--border-strong); | |
| border-radius: 6px; | |
| background: var(--surface); | |
| color: var(--text); | |
| font-size: 0.8rem; | |
| box-shadow: var(--toast-shadow); | |
| opacity: 0; | |
| pointer-events: none; | |
| transform: translate(-50%, 8px); | |
| transition: opacity 180ms ease-out, transform 180ms ease-out; | |
| } | |
| .toast.visible { opacity: 1; transform: translate(-50%, 0); } | |
| .toast.error { border-color: var(--danger-border); color: var(--danger-text); } | |
| @media (prefers-reduced-motion: reduce) { | |
| *, *::before, *::after { scroll-behavior: auto ; transition-duration: 0.01ms ; } | |
| .viewer-indicator { animation-duration: 1.8s ; } | |
| } | |
| @media (max-width: 980px) { | |
| .app-shell { width: calc(100% - 28px); } | |
| .workspace { grid-template-columns: 1fr; } | |
| .upload-surface { min-height: 420px; } | |
| .upload-surface img, .viewer-shell { height: 420px; } | |
| .examples-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } | |
| .example-item { grid-column: span 2 ; } | |
| } | |
| @media (max-width: 560px) { | |
| .app-shell { width: calc(100% - 20px); } | |
| .app-header { align-items: flex-start; flex-direction: column; gap: 13px; padding: 22px 2px 15px; } | |
| .app-header h1 strong { font-size: 1.7rem; } | |
| .app-header h1 span { font-size: 0.9rem; } | |
| .header-actions { width: 100%; justify-content: space-between; } | |
| .panel-heading { min-height: 52px; padding: 14px; } | |
| .source-panel .panel-heading p { margin-left: 8px; } | |
| .panel-content { padding: 9px; } | |
| .source-actions, .download-bar { padding: 0 9px 9px; } | |
| .upload-surface { min-height: 360px; } | |
| .upload-surface img, .viewer-shell { height: 360px; } | |
| .examples-section { margin-bottom: 24px; padding: 0; } | |
| .examples-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 132px; } | |
| .example-item { grid-column: span 2 ; } | |
| .example-item:last-child:nth-child(odd) { grid-column: span 4 ; } | |
| } | |