Spaces:
Runtime error
Runtime error
| @tailwind base; | |
| @tailwind components; | |
| @tailwind utilities; | |
| /* ============================================================ | |
| ElevenClip.AI — Design System | |
| Dark-first professional. Human-crafted feel. | |
| ============================================================ */ | |
| :root { | |
| color-scheme: dark; | |
| font-family: Inter, ui-sans-serif, system-ui, sans-serif; | |
| /* Core palette — dark (default) */ | |
| --bg: #0a0c12; | |
| --surface: #13171f; | |
| --surface2: #1c2130; | |
| --border: #252d3f; | |
| --border-strong:#2f3a52; | |
| /* Brand */ | |
| --primary: #818cf8; | |
| --primary-dim: #4f56b3; | |
| --primary-glow: rgba(129,140,248,0.18); | |
| --primary-ring: rgba(129,140,248,0.35); | |
| /* Accent / score */ | |
| --accent: #f59e0b; | |
| --accent-soft: rgba(245,158,11,0.12); | |
| /* Semantic */ | |
| --success: #34d399; | |
| --success-soft: rgba(52,211,153,0.12); | |
| --danger: #f87171; | |
| --danger-soft: rgba(248,113,113,0.12); | |
| /* Text */ | |
| --text: #e2e8f0; | |
| --text-muted: #8896a8; | |
| --text-soft: #4a5568; | |
| /* Shadows */ | |
| --shadow-sm: 0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3); | |
| --shadow-md: 0 4px 16px rgba(0,0,0,0.45), 0 1px 4px rgba(0,0,0,0.3); | |
| --shadow-lg: 0 8px 32px rgba(0,0,0,0.55), 0 2px 8px rgba(0,0,0,0.4); | |
| --shadow-glow: 0 0 0 1px var(--primary-ring), 0 8px 28px rgba(129,140,248,0.14); | |
| --radius: 10px; | |
| --radius-sm: 6px; | |
| --radius-lg: 14px; | |
| } | |
| /* Light theme overrides */ | |
| :root[data-theme="light"] { | |
| color-scheme: light; | |
| --bg: #f0f2f7; | |
| --surface: #ffffff; | |
| --surface2: #f5f7fb; | |
| --border: #d8dde8; | |
| --border-strong:#b6bece; | |
| --primary: #4f56e8; | |
| --primary-dim: #3b43d6; | |
| --primary-glow: rgba(79,86,232,0.12); | |
| --primary-ring: rgba(79,86,232,0.3); | |
| --accent: #d97706; | |
| --accent-soft: rgba(217,119,6,0.1); | |
| --success: #059669; | |
| --success-soft: rgba(5,150,105,0.1); | |
| --danger: #dc2626; | |
| --danger-soft: rgba(220,38,38,0.1); | |
| --text: #111827; | |
| --text-muted: #4b5563; | |
| --text-soft: #9ca3af; | |
| --shadow-sm: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04); | |
| --shadow-md: 0 4px 16px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,0.04); | |
| --shadow-lg: 0 8px 32px rgba(0,0,0,0.1), 0 2px 8px rgba(0,0,0,0.06); | |
| --shadow-glow: 0 0 0 1px var(--primary-ring), 0 8px 28px rgba(79,86,232,0.1); | |
| } | |
| /* ============================================================ | |
| Base reset | |
| ============================================================ */ | |
| *, | |
| *::before, | |
| *::after { | |
| box-sizing: border-box; | |
| } | |
| body { | |
| margin: 0; | |
| background: var(--bg); | |
| color: var(--text); | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| } | |
| button, | |
| input, | |
| select, | |
| textarea { | |
| font: inherit; | |
| } | |
| button, | |
| select { | |
| cursor: pointer; | |
| } | |
| button:disabled { | |
| cursor: not-allowed; | |
| opacity: 0.5; | |
| } | |
| /* ============================================================ | |
| Keyframe animations | |
| ============================================================ */ | |
| @keyframes fadeInUp { | |
| from { | |
| opacity: 0; | |
| transform: translateY(8px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| @keyframes spin { | |
| to { transform: rotate(360deg); } | |
| } | |
| @keyframes progress-shimmer { | |
| 0% { background-position: -200% center; } | |
| 100% { background-position: 200% center; } | |
| } | |
| @keyframes caption-pop { | |
| from { transform: translateX(-50%) scale(0.97); } | |
| to { transform: translateX(-50%) scale(1.04); } | |
| } | |
| @keyframes caption-bounce { | |
| from { transform: translateX(-50%) translateY(0); } | |
| to { transform: translateX(-50%) translateY(-8px); } | |
| } | |
| @keyframes pulse-ring { | |
| 0% { box-shadow: 0 0 0 0 var(--primary-ring); } | |
| 70% { box-shadow: 0 0 0 6px transparent; } | |
| 100% { box-shadow: 0 0 0 0 transparent; } | |
| } | |
| /* ============================================================ | |
| App shell | |
| ============================================================ */ | |
| .app-shell { | |
| min-height: 100vh; | |
| background: var(--bg); | |
| color: var(--text); | |
| } | |
| /* ============================================================ | |
| Header | |
| ============================================================ */ | |
| .app-header { | |
| position: sticky; | |
| top: 0; | |
| z-index: 30; | |
| display: flex; | |
| min-height: 72px; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 20px; | |
| padding: 0 clamp(16px, 4vw, 48px); | |
| border-bottom: 1px solid var(--border); | |
| background: rgba(10, 12, 18, 0.88); | |
| backdrop-filter: blur(20px); | |
| -webkit-backdrop-filter: blur(20px); | |
| } | |
| .app-header.compact { | |
| min-height: 56px; | |
| height: 56px; | |
| padding: 0 clamp(12px, 3vw, 32px); | |
| gap: 14px; | |
| } | |
| .app-header.compact .brand-mark { | |
| width: 32px; | |
| height: 32px; | |
| } | |
| .app-header.compact h1 { | |
| font-size: 0.95rem; | |
| } | |
| :root[data-theme="light"] .app-header { | |
| background: rgba(255, 255, 255, 0.88); | |
| } | |
| .brand-block { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| min-width: 0; | |
| } | |
| .brand-mark { | |
| display: grid; | |
| place-items: center; | |
| width: 42px; | |
| height: 42px; | |
| flex: 0 0 auto; | |
| border-radius: var(--radius-sm); | |
| background: linear-gradient(135deg, var(--primary-dim), var(--primary)); | |
| color: #fff; | |
| box-shadow: 0 2px 8px var(--primary-glow); | |
| transition: box-shadow 150ms ease, transform 150ms ease; | |
| } | |
| .brand-mark:hover { | |
| box-shadow: 0 4px 16px var(--primary-ring); | |
| transform: scale(1.05); | |
| } | |
| .brand-block h1 { | |
| margin: 0; | |
| font-size: 1.15rem; | |
| font-weight: 800; | |
| color: var(--text); | |
| letter-spacing: -0.01em; | |
| } | |
| .brand-block p { | |
| margin: 2px 0 0; | |
| font-size: 0.78rem; | |
| color: var(--text-muted); | |
| line-height: 1.4; | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| max-width: 340px; | |
| } | |
| .header-actions { | |
| display: flex; | |
| align-items: center; | |
| flex-wrap: wrap; | |
| justify-content: flex-end; | |
| gap: 8px; | |
| } | |
| /* ============================================================ | |
| Pills | |
| ============================================================ */ | |
| .mode-pill, | |
| .status-pill { | |
| display: inline-flex; | |
| align-items: center; | |
| min-height: 30px; | |
| padding: 0 10px; | |
| border: 1px solid var(--border); | |
| border-radius: 999px; | |
| background: var(--surface2); | |
| color: var(--text-muted); | |
| font-size: 0.7rem; | |
| font-weight: 700; | |
| letter-spacing: 0.06em; | |
| text-transform: uppercase; | |
| transition: color 150ms ease, background 150ms ease, border-color 150ms ease; | |
| } | |
| .mode-pill.prod, | |
| .status-pill.completed { | |
| border-color: rgba(52, 211, 153, 0.35); | |
| background: var(--success-soft); | |
| color: var(--success); | |
| } | |
| .mode-pill.demo, | |
| .status-pill.running, | |
| .status-pill.queued { | |
| border-color: rgba(129, 140, 248, 0.35); | |
| background: var(--primary-glow); | |
| color: var(--primary); | |
| animation: pulse-ring 2s ease-out infinite; | |
| } | |
| .status-pill.failed { | |
| border-color: rgba(248, 113, 113, 0.35); | |
| background: var(--danger-soft); | |
| color: var(--danger); | |
| } | |
| /* ============================================================ | |
| Toolbar controls | |
| ============================================================ */ | |
| .toolbar-select { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| min-height: 34px; | |
| padding: 0 10px; | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-sm); | |
| background: var(--surface); | |
| color: var(--text-muted); | |
| font-size: 0.82rem; | |
| transition: border-color 150ms ease, background 150ms ease, color 150ms ease; | |
| } | |
| .toolbar-select:hover { | |
| border-color: var(--border-strong); | |
| background: var(--surface2); | |
| color: var(--text); | |
| } | |
| .toolbar-select select { | |
| border: 0; | |
| background: transparent; | |
| color: inherit; | |
| outline: none; | |
| min-width: 44px; | |
| -webkit-text-fill-color: currentColor; | |
| } | |
| .toolbar-select select option, | |
| .text-input option { | |
| background: #1c2130; | |
| color: #e2e8f0; | |
| } | |
| :root[data-theme="light"] .toolbar-select select option, | |
| :root[data-theme="light"] .text-input option { | |
| background: #ffffff; | |
| color: #111827; | |
| } | |
| .icon-button { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| width: 34px; | |
| height: 34px; | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-sm); | |
| background: var(--surface); | |
| color: var(--text-muted); | |
| text-decoration: none; | |
| transition: border-color 150ms ease, background 150ms ease, color 150ms ease, transform 150ms ease; | |
| } | |
| .icon-button:hover { | |
| border-color: var(--border-strong); | |
| background: var(--surface2); | |
| color: var(--text); | |
| transform: scale(1.08); | |
| } | |
| .icon-button:active { | |
| transform: scale(0.94); | |
| } | |
| /* ============================================================ | |
| Layout — workspace | |
| ============================================================ */ | |
| .workspace-grid { | |
| display: grid; | |
| grid-template-columns: 320px minmax(0, 1fr); | |
| grid-template-rows: auto; | |
| gap: 16px; | |
| align-items: start; | |
| padding: 20px clamp(16px, 3vw, 44px) 48px; | |
| } | |
| .sidebar-column { | |
| position: sticky; | |
| top: 88px; | |
| max-height: calc(100vh - 104px); | |
| overflow-y: auto; | |
| scrollbar-width: thin; | |
| scrollbar-color: var(--border) transparent; | |
| } | |
| .sidebar-column::-webkit-scrollbar { | |
| width: 4px; | |
| } | |
| .sidebar-column::-webkit-scrollbar-thumb { | |
| background: var(--border); | |
| border-radius: 999px; | |
| } | |
| .main-column { | |
| display: grid; | |
| gap: 16px; | |
| align-content: start; | |
| } | |
| /* ============================================================ | |
| Panels | |
| ============================================================ */ | |
| .panel { | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-lg); | |
| background: var(--surface); | |
| box-shadow: var(--shadow-sm); | |
| animation: fadeInUp 240ms ease both; | |
| } | |
| .panel-body { | |
| padding: 18px; | |
| } | |
| .input-panel, | |
| .progress-panel, | |
| .transcript-panel, | |
| .clips-panel { | |
| padding: 20px; | |
| } | |
| .panel-heading { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 12px; | |
| margin-bottom: 16px; | |
| } | |
| .panel-heading.compact { | |
| margin-bottom: 12px; | |
| } | |
| .panel-heading h2, | |
| .editor-topbar h2, | |
| .mini-transcript h3 { | |
| margin: 0; | |
| font-size: 0.78rem; | |
| font-weight: 700; | |
| letter-spacing: 0.08em; | |
| text-transform: uppercase; | |
| color: var(--text); | |
| } | |
| .panel-heading p { | |
| margin: 3px 0 0; | |
| font-size: 0.82rem; | |
| color: var(--text-muted); | |
| line-height: 1.4; | |
| } | |
| .panel-heading-icon { | |
| display: grid; | |
| place-items: center; | |
| width: 32px; | |
| height: 32px; | |
| border-radius: var(--radius-sm); | |
| background: var(--surface2); | |
| color: var(--text-muted); | |
| flex: 0 0 auto; | |
| } | |
| /* ============================================================ | |
| Form elements | |
| ============================================================ */ | |
| .form-stack { | |
| display: grid; | |
| gap: 14px; | |
| } | |
| .form-grid-two { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 10px; | |
| } | |
| .field-block { | |
| display: grid; | |
| gap: 6px; | |
| } | |
| .field-label { | |
| font-size: 0.78rem; | |
| font-weight: 600; | |
| color: var(--text-muted); | |
| letter-spacing: 0.02em; | |
| } | |
| .text-input, | |
| textarea, | |
| .file-input { | |
| width: 100%; | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-sm); | |
| background: var(--surface2); | |
| color: var(--text); | |
| outline: none; | |
| transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease; | |
| } | |
| .text-input, | |
| .file-input { | |
| min-height: 40px; | |
| padding: 8px 12px; | |
| font-size: 0.88rem; | |
| } | |
| textarea { | |
| resize: vertical; | |
| padding: 9px 12px; | |
| font-size: 0.88rem; | |
| line-height: 1.55; | |
| } | |
| .text-input:hover, | |
| textarea:hover, | |
| .file-input:hover { | |
| border-color: var(--border-strong); | |
| } | |
| .text-input:focus, | |
| textarea:focus, | |
| .file-input:focus { | |
| border-color: var(--primary); | |
| background: var(--surface); | |
| box-shadow: 0 0 0 3px var(--primary-ring); | |
| } | |
| .helper-text, | |
| .file-name { | |
| margin: 0; | |
| font-size: 0.76rem; | |
| color: var(--text-soft); | |
| line-height: 1.45; | |
| } | |
| .divider { | |
| height: 1px; | |
| background: var(--border); | |
| } | |
| /* ============================================================ | |
| Segmented control | |
| ============================================================ */ | |
| .segmented { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 3px; | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-sm); | |
| background: var(--surface2); | |
| padding: 3px; | |
| } | |
| .segmented button { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 7px; | |
| min-height: 36px; | |
| border: 1px solid transparent; | |
| border-radius: 5px; | |
| background: transparent; | |
| color: var(--text-muted); | |
| font-size: 0.84rem; | |
| font-weight: 600; | |
| transition: background 150ms ease, color 150ms ease, border-color 150ms ease, box-shadow 150ms ease; | |
| } | |
| .segmented button:hover { | |
| color: var(--text); | |
| background: rgba(255,255,255,0.04); | |
| } | |
| .segmented button.active { | |
| border-color: var(--border); | |
| background: var(--surface); | |
| color: var(--text); | |
| box-shadow: var(--shadow-sm); | |
| } | |
| /* ============================================================ | |
| Buttons | |
| ============================================================ */ | |
| .primary-button { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 8px; | |
| min-height: 42px; | |
| padding: 0 18px; | |
| border: 1px solid var(--primary-dim); | |
| border-radius: var(--radius-sm); | |
| background: linear-gradient(135deg, var(--primary-dim), var(--primary)); | |
| color: #fff; | |
| font-size: 0.88rem; | |
| font-weight: 700; | |
| letter-spacing: 0.01em; | |
| transition: filter 150ms ease, transform 150ms ease, box-shadow 150ms ease; | |
| box-shadow: 0 2px 8px var(--primary-glow); | |
| } | |
| .primary-button:hover:not(:disabled) { | |
| filter: brightness(1.12); | |
| box-shadow: 0 4px 16px var(--primary-ring); | |
| } | |
| .primary-button:active:not(:disabled) { | |
| transform: scale(0.97); | |
| filter: brightness(0.95); | |
| } | |
| .primary-button:disabled { | |
| opacity: 0.45; | |
| } | |
| .ghost-button { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| min-height: 36px; | |
| padding: 0 14px; | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-sm); | |
| background: var(--surface); | |
| color: var(--text-muted); | |
| font-size: 0.84rem; | |
| font-weight: 600; | |
| text-decoration: none; | |
| transition: background 150ms ease, color 150ms ease, border-color 150ms ease, transform 150ms ease; | |
| } | |
| .ghost-button:hover { | |
| background: var(--surface2); | |
| border-color: var(--border-strong); | |
| color: var(--text); | |
| } | |
| .ghost-button:active { | |
| transform: scale(0.97); | |
| } | |
| /* Inline action buttons (clip cards, inspector) */ | |
| .btn { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 6px; | |
| min-height: 34px; | |
| padding: 0 10px; | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-sm); | |
| background: var(--surface2); | |
| color: var(--text-muted); | |
| font-size: 0.8rem; | |
| font-weight: 600; | |
| text-decoration: none; | |
| transition: background 150ms ease, color 150ms ease, border-color 150ms ease, transform 150ms ease; | |
| white-space: nowrap; | |
| } | |
| .btn:hover { | |
| background: var(--surface); | |
| border-color: var(--border-strong); | |
| color: var(--text); | |
| filter: brightness(1.08); | |
| } | |
| .btn:active { | |
| transform: scale(0.95); | |
| } | |
| .btn-primary { | |
| border-color: var(--primary-dim); | |
| background: var(--primary-glow); | |
| color: var(--primary); | |
| } | |
| .btn-primary:hover { | |
| background: var(--primary); | |
| color: #fff; | |
| border-color: var(--primary); | |
| } | |
| .btn-success { | |
| border-color: rgba(52,211,153,0.35); | |
| background: var(--success-soft); | |
| color: var(--success); | |
| } | |
| .btn-success:hover { | |
| background: var(--success); | |
| color: #0a0c12; | |
| border-color: var(--success); | |
| } | |
| .btn-danger { | |
| border-color: rgba(248,113,113,0.3); | |
| background: var(--danger-soft); | |
| color: var(--danger); | |
| } | |
| .btn-danger:hover { | |
| background: var(--danger); | |
| color: #fff; | |
| border-color: var(--danger); | |
| } | |
| .btn-icon { | |
| width: 34px; | |
| padding: 0; | |
| flex: 0 0 auto; | |
| } | |
| /* ============================================================ | |
| Error / status boxes | |
| ============================================================ */ | |
| .error-box { | |
| padding: 10px 14px; | |
| border: 1px solid rgba(248,113,113,0.35); | |
| border-radius: var(--radius-sm); | |
| background: var(--danger-soft); | |
| color: var(--danger); | |
| font-size: 0.86rem; | |
| line-height: 1.5; | |
| } | |
| /* ============================================================ | |
| Progress panel | |
| ============================================================ */ | |
| .progress-percent { | |
| font-size: 2rem; | |
| font-weight: 800; | |
| font-variant-numeric: tabular-nums; | |
| color: var(--text); | |
| flex: 0 0 auto; | |
| } | |
| .progress-track { | |
| height: 8px; | |
| overflow: hidden; | |
| border-radius: 999px; | |
| background: var(--surface2); | |
| margin-top: 4px; | |
| margin-bottom: 16px; | |
| } | |
| .progress-bar { | |
| height: 100%; | |
| border-radius: 999px; | |
| background-size: 200% auto; | |
| background-image: linear-gradient(90deg, var(--primary-dim), var(--primary), var(--accent), var(--primary)); | |
| animation: progress-shimmer 2.4s linear infinite; | |
| transition: width 300ms ease; | |
| } | |
| .step-list { | |
| display: grid; | |
| grid-template-columns: repeat(6, minmax(0, 1fr)); | |
| gap: 6px; | |
| } | |
| .step-item { | |
| display: grid; | |
| gap: 5px; | |
| color: var(--text-soft); | |
| font-size: 0.7rem; | |
| font-weight: 600; | |
| } | |
| .step-item span { | |
| display: grid; | |
| width: 26px; | |
| height: 26px; | |
| place-items: center; | |
| border: 1px solid var(--border); | |
| border-radius: 50%; | |
| background: var(--surface2); | |
| font-variant-numeric: tabular-nums; | |
| font-size: 0.7rem; | |
| transition: background 200ms ease, border-color 200ms ease, color 200ms ease; | |
| } | |
| .step-item p { | |
| margin: 0; | |
| overflow-wrap: anywhere; | |
| line-height: 1.35; | |
| } | |
| .step-item.done { | |
| color: var(--success); | |
| } | |
| .step-item.done span { | |
| border-color: rgba(52,211,153,0.5); | |
| background: var(--success-soft); | |
| color: var(--success); | |
| } | |
| .step-item.active { | |
| color: var(--primary); | |
| } | |
| .step-item.active span { | |
| border-color: var(--primary); | |
| background: var(--primary-glow); | |
| color: var(--primary); | |
| } | |
| .timing-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(108px, 1fr)); | |
| gap: 8px; | |
| margin-top: 12px; | |
| } | |
| .timing-grid div { | |
| padding: 10px 12px; | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-sm); | |
| background: var(--surface2); | |
| } | |
| .timing-grid span { | |
| display: block; | |
| font-size: 0.7rem; | |
| font-weight: 600; | |
| color: var(--text-muted); | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| } | |
| .timing-grid strong { | |
| display: block; | |
| margin-top: 4px; | |
| font-size: 1.1rem; | |
| font-weight: 700; | |
| font-variant-numeric: tabular-nums; | |
| color: var(--text); | |
| } | |
| /* ============================================================ | |
| Transcript panel | |
| ============================================================ */ | |
| .transcript-list { | |
| display: grid; | |
| gap: 6px; | |
| max-height: 380px; | |
| overflow-y: auto; | |
| padding-right: 4px; | |
| scrollbar-width: thin; | |
| scrollbar-color: var(--border) transparent; | |
| } | |
| .transcript-row { | |
| display: grid; | |
| grid-template-columns: 108px 1fr; | |
| gap: 10px; | |
| padding-bottom: 8px; | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .transcript-row span { | |
| font-size: 0.72rem; | |
| font-weight: 600; | |
| color: var(--text-muted); | |
| font-variant-numeric: tabular-nums; | |
| padding-top: 2px; | |
| } | |
| .transcript-row p { | |
| margin: 0; | |
| font-size: 0.86rem; | |
| color: var(--text); | |
| line-height: 1.55; | |
| } | |
| /* ============================================================ | |
| Empty state | |
| ============================================================ */ | |
| .empty-state { | |
| display: grid; | |
| min-height: 260px; | |
| place-items: center; | |
| align-content: center; | |
| gap: 10px; | |
| border: 1px dashed var(--border-strong); | |
| border-radius: var(--radius); | |
| background: var(--surface2); | |
| color: var(--text-muted); | |
| text-align: center; | |
| padding: 32px 24px; | |
| } | |
| .empty-state h3 { | |
| margin: 0; | |
| font-size: 1rem; | |
| font-weight: 700; | |
| color: var(--text); | |
| } | |
| .empty-state p { | |
| max-width: 260px; | |
| margin: 0; | |
| font-size: 0.84rem; | |
| line-height: 1.55; | |
| } | |
| /* ============================================================ | |
| Clip grid & cards | |
| ============================================================ */ | |
| .clip-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); | |
| gap: 16px; | |
| align-items: start; | |
| } | |
| .clip-card { | |
| display: grid; | |
| overflow: hidden; | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-lg); | |
| background: var(--surface); | |
| box-shadow: var(--shadow-sm); | |
| transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease; | |
| animation: fadeInUp 240ms ease both; | |
| cursor: default; | |
| } | |
| .clip-card:hover { | |
| transform: translateY(-3px) scale(1.012); | |
| box-shadow: var(--shadow-md), 0 0 0 1px var(--border-strong); | |
| border-color: var(--border-strong); | |
| } | |
| .clip-video { | |
| display: grid; | |
| aspect-ratio: 9 / 16; | |
| max-height: 240px; | |
| place-items: center; | |
| background: #070b14; | |
| color: var(--text-soft); | |
| overflow: hidden; | |
| } | |
| .clip-video video { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: contain; | |
| } | |
| .clip-body { | |
| display: grid; | |
| gap: 10px; | |
| padding: 14px; | |
| } | |
| /* Title row: title + score badge side by side */ | |
| .clip-meta { | |
| display: flex; | |
| align-items: flex-start; | |
| justify-content: space-between; | |
| gap: 10px; | |
| } | |
| .clip-title { | |
| margin: 0; | |
| font-size: 0.9rem; | |
| font-weight: 700; | |
| color: var(--text); | |
| line-height: 1.35; | |
| } | |
| .clip-reason { | |
| margin: 4px 0 0; | |
| font-size: 0.78rem; | |
| color: var(--text-muted); | |
| line-height: 1.45; | |
| display: -webkit-box; | |
| -webkit-box-orient: vertical; | |
| -webkit-line-clamp: 2; | |
| overflow: hidden; | |
| } | |
| .score-badge { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 4px; | |
| min-width: 52px; | |
| height: 28px; | |
| flex: 0 0 auto; | |
| padding: 0 8px; | |
| border-radius: 999px; | |
| background: var(--accent-soft); | |
| border: 1px solid rgba(245,158,11,0.25); | |
| color: var(--accent); | |
| font-size: 0.78rem; | |
| font-weight: 800; | |
| font-variant-numeric: tabular-nums; | |
| } | |
| .clip-duration-row { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 8px; | |
| font-size: 0.76rem; | |
| font-weight: 600; | |
| color: var(--text-muted); | |
| } | |
| .clip-duration-row span { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 4px; | |
| } | |
| .subtitle-snippet { | |
| margin: 0; | |
| padding: 8px 10px; | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-sm); | |
| background: var(--surface2); | |
| color: var(--text-muted); | |
| font-size: 0.78rem; | |
| line-height: 1.5; | |
| display: -webkit-box; | |
| -webkit-box-orient: vertical; | |
| -webkit-line-clamp: 2; | |
| overflow: hidden; | |
| min-height: 46px; | |
| } | |
| /* Clip action row — primary CTA full-width on top, icon row below */ | |
| .clip-actions { | |
| display: grid; | |
| grid-template-columns: minmax(0, 1fr); | |
| gap: 8px; | |
| align-items: stretch; | |
| } | |
| .clip-actions > .btn-primary { | |
| width: 100%; | |
| justify-content: center; | |
| } | |
| .clip-actions-icons { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 6px; | |
| } | |
| .clip-actions-icons > .btn { | |
| flex: 1 1 auto; | |
| min-width: 40px; | |
| justify-content: center; | |
| } | |
| /* ============================================================ | |
| Editor page | |
| ============================================================ */ | |
| .editor-shell { | |
| display: flex; | |
| flex-direction: column; | |
| min-height: calc(100vh - 72px); | |
| padding: 0; | |
| } | |
| .editor-topbar { | |
| display: flex; | |
| align-items: center; | |
| gap: 14px; | |
| padding: 14px clamp(16px, 3vw, 44px); | |
| border-bottom: 1px solid var(--border); | |
| background: var(--surface); | |
| position: sticky; | |
| top: 72px; | |
| z-index: 20; | |
| } | |
| .editor-topbar-info { | |
| flex: 1; | |
| min-width: 0; | |
| } | |
| .editor-topbar-info h2 { | |
| margin: 0; | |
| font-size: 0.9rem; | |
| font-weight: 700; | |
| color: var(--text); | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| } | |
| .editor-topbar-info p { | |
| margin: 3px 0 0; | |
| font-size: 0.76rem; | |
| color: var(--text-muted); | |
| } | |
| .editor-topbar-actions { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| flex: 0 0 auto; | |
| } | |
| .editor-body { | |
| display: grid; | |
| grid-template-columns: minmax(0, 3fr) minmax(320px, 2fr); | |
| gap: 0; | |
| flex: 1; | |
| align-items: start; | |
| } | |
| .editor-left { | |
| padding: 20px clamp(12px, 2vw, 28px) 32px; | |
| border-right: 1px solid var(--border); | |
| display: grid; | |
| gap: 20px; | |
| align-content: start; | |
| } | |
| .editor-right { | |
| padding: 20px clamp(12px, 2vw, 24px) 32px; | |
| display: grid; | |
| gap: 20px; | |
| align-content: start; | |
| max-height: calc(100vh - 132px); | |
| overflow-y: auto; | |
| scrollbar-width: thin; | |
| scrollbar-color: var(--border) transparent; | |
| position: sticky; | |
| top: 132px; | |
| } | |
| /* ============================================================ | |
| NLE 4-panel editor (Premiere-style) | |
| ============================================================ */ | |
| .editor-shell.nle { | |
| height: calc(100vh - 56px); | |
| min-height: calc(100vh - 56px); | |
| overflow: hidden; | |
| } | |
| .editor-shell.nle .editor-topbar { | |
| position: relative; | |
| top: auto; | |
| z-index: auto; | |
| padding: 10px clamp(14px, 2vw, 28px); | |
| flex: 0 0 auto; | |
| } | |
| .editor-shell.nle .editor-topbar-info h2 { | |
| font-size: 0.86rem; | |
| } | |
| .editor-shell.nle .editor-topbar-info p { | |
| font-size: 0.72rem; | |
| margin-top: 2px; | |
| } | |
| .editor-grid-nle { | |
| display: grid; | |
| grid-template-columns: 240px minmax(0, 1fr) 340px; | |
| grid-template-rows: minmax(0, 1fr) minmax(220px, 38%); | |
| grid-template-areas: | |
| "bin preview ai" | |
| "bin timeline inspector"; | |
| gap: 1px; | |
| background: var(--border); | |
| flex: 1; | |
| min-height: 0; | |
| overflow: hidden; | |
| } | |
| .nle-panel { | |
| background: var(--surface); | |
| display: flex; | |
| flex-direction: column; | |
| min-width: 0; | |
| min-height: 0; | |
| overflow: hidden; | |
| } | |
| .nle-panel-head { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 8px; | |
| padding: 10px 14px; | |
| border-bottom: 1px solid var(--border); | |
| background: var(--surface2); | |
| flex: 0 0 auto; | |
| } | |
| .nle-panel-head h3 { | |
| margin: 0; | |
| font-size: 0.78rem; | |
| font-weight: 700; | |
| letter-spacing: 0.04em; | |
| text-transform: uppercase; | |
| color: var(--text-muted); | |
| } | |
| .nle-panel-head .nle-panel-icon { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| width: 22px; | |
| height: 22px; | |
| border-radius: 6px; | |
| background: var(--surface); | |
| color: var(--text-muted); | |
| border: 1px solid var(--border); | |
| } | |
| .nle-panel-body { | |
| flex: 1; | |
| min-height: 0; | |
| overflow: auto; | |
| scrollbar-width: thin; | |
| scrollbar-color: var(--border) transparent; | |
| } | |
| /* Media bin (left column) */ | |
| .nle-bin { | |
| grid-area: bin; | |
| border-right: 1px solid var(--border); | |
| } | |
| .nle-bin-list { | |
| display: flex; | |
| flex-direction: column; | |
| padding: 8px; | |
| gap: 6px; | |
| } | |
| .nle-bin-item { | |
| display: grid; | |
| grid-template-columns: 48px minmax(0, 1fr); | |
| gap: 10px; | |
| padding: 8px; | |
| border-radius: var(--radius-sm); | |
| border: 1px solid transparent; | |
| background: var(--surface); | |
| cursor: pointer; | |
| transition: background 140ms ease, border-color 140ms ease, transform 140ms ease; | |
| text-align: left; | |
| color: inherit; | |
| font: inherit; | |
| } | |
| .nle-bin-item:hover { | |
| background: var(--surface2); | |
| border-color: var(--border); | |
| transform: translateX(2px); | |
| } | |
| .nle-bin-item.active { | |
| background: var(--primary-glow); | |
| border-color: var(--primary-dim); | |
| box-shadow: var(--shadow-glow); | |
| } | |
| .nle-bin-thumb { | |
| width: 48px; | |
| height: 64px; | |
| border-radius: 4px; | |
| background: #050810; | |
| display: grid; | |
| place-items: center; | |
| color: var(--text-soft); | |
| overflow: hidden; | |
| position: relative; | |
| } | |
| .nle-bin-thumb video, | |
| .nle-bin-thumb img { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| } | |
| .nle-bin-meta { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 3px; | |
| min-width: 0; | |
| } | |
| .nle-bin-title { | |
| font-size: 0.78rem; | |
| font-weight: 600; | |
| color: var(--text); | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| } | |
| .nle-bin-sub { | |
| font-size: 0.7rem; | |
| color: var(--text-muted); | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| white-space: nowrap; | |
| overflow: hidden; | |
| } | |
| .nle-bin-sub .nle-bin-score { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 3px; | |
| padding: 1px 5px; | |
| border-radius: 4px; | |
| background: var(--accent-soft); | |
| color: var(--accent); | |
| font-weight: 600; | |
| font-size: 0.66rem; | |
| } | |
| /* Preview stage (center top) */ | |
| .nle-preview { | |
| grid-area: preview; | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .preview-stage { | |
| position: relative; | |
| flex: 1; | |
| min-height: 0; | |
| display: grid; | |
| place-items: center; | |
| background: #04060c; | |
| overflow: hidden; | |
| } | |
| .preview-stage-canvas { | |
| position: relative; | |
| width: 100%; | |
| height: 100%; | |
| display: grid; | |
| place-items: center; | |
| } | |
| .preview-stage video { | |
| max-width: 100%; | |
| max-height: 100%; | |
| width: auto; | |
| height: auto; | |
| object-fit: contain; | |
| } | |
| .caption-overlay { | |
| position: absolute; | |
| transform: translate(-50%, -50%); | |
| font-weight: 900; | |
| letter-spacing: 0; | |
| line-height: 1.15; | |
| text-align: center; | |
| white-space: pre-wrap; | |
| cursor: grab; | |
| user-select: none; | |
| padding: 4px 10px; | |
| border-radius: 4px; | |
| border: 1px dashed transparent; | |
| transition: border-color 140ms ease, background 140ms ease; | |
| max-width: 80%; | |
| } | |
| .caption-overlay:hover { | |
| border-color: var(--primary-ring); | |
| background: rgba(129, 140, 248, 0.06); | |
| } | |
| .caption-overlay:active, | |
| .caption-overlay.dragging { | |
| cursor: grabbing; | |
| border-color: var(--primary); | |
| background: rgba(129, 140, 248, 0.14); | |
| } | |
| .caption-overlay .lit { | |
| color: var(--accent); | |
| } | |
| .caption-overlay.pop { | |
| animation: caption-pop 900ms ease-in-out infinite alternate; | |
| } | |
| .caption-overlay.bounce { | |
| animation: caption-bounce 760ms ease-in-out infinite alternate; | |
| } | |
| .preview-toolbar { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 12px; | |
| padding: 10px 14px; | |
| background: var(--surface2); | |
| border-top: 1px solid var(--border); | |
| flex: 0 0 auto; | |
| } | |
| .preview-toolbar-left, | |
| .preview-toolbar-right { | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| } | |
| .preview-time { | |
| font-family: ui-monospace, "SF Mono", Menlo, monospace; | |
| font-size: 0.78rem; | |
| color: var(--text-muted); | |
| letter-spacing: 0.02em; | |
| } | |
| .preview-time strong { | |
| color: var(--text); | |
| font-weight: 700; | |
| } | |
| /* Timeline editor (center bottom) */ | |
| .nle-timeline { | |
| grid-area: timeline; | |
| } | |
| .timeline-toolbar { | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| padding: 6px 12px; | |
| border-bottom: 1px solid var(--border); | |
| flex: 0 0 auto; | |
| background: var(--surface); | |
| font-size: 0.74rem; | |
| color: var(--text-muted); | |
| } | |
| .timeline-toolbar .timeline-zoom { | |
| margin-left: auto; | |
| display: inline-flex; | |
| gap: 4px; | |
| } | |
| .timeline-zoom button { | |
| width: 24px; | |
| height: 22px; | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| border: 1px solid var(--border); | |
| background: var(--surface2); | |
| color: var(--text-muted); | |
| border-radius: 4px; | |
| font-size: 0.72rem; | |
| cursor: pointer; | |
| } | |
| .timeline-zoom button:hover { | |
| background: var(--surface); | |
| color: var(--text); | |
| } | |
| .timeline-area { | |
| flex: 1; | |
| min-height: 0; | |
| display: flex; | |
| flex-direction: column; | |
| overflow: hidden; | |
| } | |
| .timeline-ruler { | |
| position: relative; | |
| height: 22px; | |
| border-bottom: 1px solid var(--border); | |
| background: var(--surface2); | |
| cursor: pointer; | |
| flex: 0 0 auto; | |
| overflow: hidden; | |
| } | |
| .timeline-tick { | |
| position: absolute; | |
| top: 0; | |
| bottom: 0; | |
| width: 1px; | |
| background: var(--border); | |
| } | |
| .timeline-tick.major { | |
| background: var(--border-strong); | |
| } | |
| .timeline-tick-label { | |
| position: absolute; | |
| top: 4px; | |
| font-size: 0.62rem; | |
| color: var(--text-muted); | |
| font-family: ui-monospace, monospace; | |
| pointer-events: none; | |
| transform: translateX(2px); | |
| } | |
| .timeline-stack { | |
| position: relative; | |
| flex: 1; | |
| min-height: 0; | |
| display: flex; | |
| flex-direction: column; | |
| overflow-y: auto; | |
| scrollbar-width: thin; | |
| } | |
| .timeline-track { | |
| position: relative; | |
| display: grid; | |
| grid-template-columns: 60px 1fr; | |
| border-bottom: 1px solid var(--border); | |
| flex: 0 0 auto; | |
| } | |
| .timeline-track-label { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| background: var(--surface2); | |
| border-right: 1px solid var(--border); | |
| font-size: 0.7rem; | |
| font-weight: 700; | |
| color: var(--text-muted); | |
| letter-spacing: 0.05em; | |
| user-select: none; | |
| } | |
| .timeline-track-lane { | |
| position: relative; | |
| background: var(--bg); | |
| height: 56px; | |
| overflow: hidden; | |
| } | |
| .timeline-track-lane.video { | |
| height: 72px; | |
| } | |
| .timeline-track-lane.audio { | |
| height: 48px; | |
| background: linear-gradient(180deg, var(--bg), var(--surface2)); | |
| } | |
| .timeline-clip { | |
| position: absolute; | |
| top: 6px; | |
| bottom: 6px; | |
| border-radius: 6px; | |
| border: 1px solid #6366f1; | |
| background: linear-gradient(180deg, #6366f1 0%, #4f46e5 100%); | |
| color: #ffffff; | |
| display: flex; | |
| align-items: center; | |
| padding: 0 22px; | |
| font-size: 0.78rem; | |
| font-weight: 700; | |
| white-space: nowrap; | |
| overflow: hidden; | |
| cursor: grab; | |
| user-select: none; | |
| transition: filter 140ms ease, box-shadow 140ms ease, transform 100ms ease; | |
| box-shadow: 0 2px 10px rgba(79, 70, 229, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.18); | |
| } | |
| .timeline-clip:hover { | |
| filter: brightness(1.1); | |
| box-shadow: 0 4px 14px rgba(79, 70, 229, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.22); | |
| } | |
| .timeline-clip.dragging { | |
| cursor: grabbing; | |
| filter: brightness(1.18); | |
| box-shadow: 0 0 0 2px var(--accent), 0 6px 18px rgba(79, 70, 229, 0.6); | |
| transform: scale(1.005); | |
| } | |
| .timeline-clip-label { | |
| flex: 1; | |
| min-width: 0; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| pointer-events: none; | |
| text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); | |
| padding: 0 4px; | |
| } | |
| .timeline-handle { | |
| position: absolute; | |
| top: -2px; | |
| bottom: -2px; | |
| width: 14px; | |
| background: var(--accent); | |
| cursor: ew-resize; | |
| z-index: 4; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| opacity: 0.95; | |
| transition: opacity 140ms ease, background 140ms ease, transform 140ms ease; | |
| border: 1px solid rgba(0, 0, 0, 0.35); | |
| box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); | |
| } | |
| .timeline-handle::before { | |
| content: ""; | |
| width: 3px; | |
| height: 18px; | |
| background: #1a1300; | |
| border-radius: 1.5px; | |
| box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25); | |
| } | |
| .timeline-handle:hover, | |
| .timeline-handle.dragging { | |
| opacity: 1; | |
| background: #fbbf24; | |
| transform: scaleY(1.06); | |
| } | |
| .timeline-handle.left { | |
| left: 0; | |
| border-radius: 4px 0 0 4px; | |
| } | |
| .timeline-handle.right { | |
| right: 0; | |
| border-radius: 0 4px 4px 0; | |
| } | |
| .timeline-clip { | |
| padding: 0 22px; | |
| } | |
| .timeline-caption-block { | |
| position: absolute; | |
| top: 8px; | |
| bottom: 8px; | |
| border-radius: 4px; | |
| background: rgba(245, 158, 11, 0.22); | |
| border: 1px solid rgba(245, 158, 11, 0.55); | |
| color: var(--accent); | |
| font-size: 0.68rem; | |
| font-weight: 600; | |
| padding: 0 6px; | |
| display: flex; | |
| align-items: center; | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| cursor: pointer; | |
| } | |
| .timeline-caption-block:hover { | |
| background: rgba(245, 158, 11, 0.35); | |
| } | |
| .timeline-caption-block.selected { | |
| background: var(--accent); | |
| color: #1a1300; | |
| border-color: var(--accent); | |
| } | |
| .timeline-waveform { | |
| position: absolute; | |
| inset: 4px 0; | |
| display: flex; | |
| align-items: center; | |
| gap: 2px; | |
| padding: 0 4px; | |
| } | |
| .timeline-waveform span { | |
| flex: 1 1 0; | |
| background: var(--text-muted); | |
| opacity: 0.55; | |
| border-radius: 1px; | |
| min-width: 2px; | |
| } | |
| .timeline-playhead { | |
| position: absolute; | |
| top: 0; | |
| bottom: 0; | |
| width: 2px; | |
| background: var(--danger); | |
| pointer-events: none; | |
| z-index: 5; | |
| box-shadow: 0 0 8px rgba(248, 113, 113, 0.65); | |
| } | |
| .timeline-playhead::before { | |
| content: ""; | |
| position: absolute; | |
| top: -2px; | |
| left: -5px; | |
| border-left: 6px solid transparent; | |
| border-right: 6px solid transparent; | |
| border-top: 8px solid var(--danger); | |
| } | |
| /* AI Assistant (right top) */ | |
| .nle-ai { | |
| grid-area: ai; | |
| border-left: 1px solid var(--border); | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .ai-reason { | |
| margin: 0; | |
| padding: 14px 16px; | |
| font-size: 0.86rem; | |
| color: var(--text); | |
| line-height: 1.55; | |
| border-bottom: 1px solid var(--border); | |
| background: linear-gradient(135deg, rgba(129, 140, 248, 0.08), transparent); | |
| } | |
| .ai-reason::before { | |
| content: ""; | |
| display: inline-block; | |
| width: 4px; | |
| height: 14px; | |
| background: var(--primary); | |
| border-radius: 2px; | |
| margin-right: 10px; | |
| vertical-align: -2px; | |
| } | |
| .ai-actions { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 8px; | |
| padding: 14px 16px; | |
| } | |
| .ai-action { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| padding: 10px 12px; | |
| border-radius: var(--radius-sm); | |
| border: 1px solid var(--border); | |
| background: var(--surface2); | |
| color: var(--text); | |
| font-size: 0.82rem; | |
| font-weight: 600; | |
| text-align: left; | |
| cursor: pointer; | |
| transition: background 140ms ease, border-color 140ms ease, transform 140ms ease; | |
| } | |
| .ai-action:hover { | |
| background: var(--surface); | |
| border-color: var(--primary-dim); | |
| transform: translateX(2px); | |
| } | |
| .ai-action:active { | |
| transform: translateX(2px) scale(0.98); | |
| } | |
| .ai-action-icon { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| width: 28px; | |
| height: 28px; | |
| border-radius: 6px; | |
| background: var(--primary-glow); | |
| color: var(--primary); | |
| flex: 0 0 auto; | |
| } | |
| .ai-action-text { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 2px; | |
| min-width: 0; | |
| } | |
| .ai-action-text strong { | |
| font-size: 0.84rem; | |
| font-weight: 700; | |
| color: var(--text); | |
| } | |
| .ai-action-text small { | |
| font-size: 0.7rem; | |
| color: var(--text-muted); | |
| font-weight: 500; | |
| } | |
| /* Inspector (right bottom) */ | |
| .nle-inspector { | |
| grid-area: inspector; | |
| border-left: 1px solid var(--border); | |
| } | |
| .inspector-stack { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0; | |
| } | |
| .inspector-stack > section { | |
| padding: 14px 16px; | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .inspector-stack > section:last-child { | |
| border-bottom: none; | |
| } | |
| .inspector-stack h4 { | |
| margin: 0 0 10px; | |
| font-size: 0.72rem; | |
| font-weight: 700; | |
| letter-spacing: 0.05em; | |
| text-transform: uppercase; | |
| color: var(--text-muted); | |
| } | |
| .inspector-meta { | |
| display: grid; | |
| grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); | |
| gap: 10px 16px; | |
| margin: 0; | |
| } | |
| .inspector-meta dt { | |
| font-size: 0.66rem; | |
| letter-spacing: 0.03em; | |
| text-transform: uppercase; | |
| color: var(--text-muted); | |
| margin: 0; | |
| } | |
| .inspector-meta dd { | |
| margin: 2px 0 0; | |
| font-size: 0.84rem; | |
| color: var(--text); | |
| font-weight: 600; | |
| word-break: break-word; | |
| } | |
| .inspector-meta dd.score-value { | |
| color: var(--accent); | |
| font-size: 1.1rem; | |
| } | |
| /* NLE responsive collapse */ | |
| @media (max-width: 1280px) { | |
| .editor-grid-nle { | |
| grid-template-columns: 200px minmax(0, 1fr) 300px; | |
| } | |
| } | |
| @media (max-width: 1080px) { | |
| .editor-shell.nle { | |
| height: auto; | |
| min-height: calc(100vh - 72px); | |
| overflow: visible; | |
| } | |
| .editor-grid-nle { | |
| grid-template-columns: minmax(0, 1fr); | |
| grid-template-rows: auto auto auto auto auto; | |
| grid-template-areas: | |
| "preview" | |
| "timeline" | |
| "ai" | |
| "inspector" | |
| "bin"; | |
| overflow: visible; | |
| } | |
| .nle-panel { | |
| overflow: visible; | |
| } | |
| .nle-bin, | |
| .nle-ai, | |
| .nle-inspector { | |
| border-left: none; | |
| border-right: none; | |
| } | |
| .nle-preview { | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .preview-stage { | |
| min-height: 320px; | |
| } | |
| .timeline-area { | |
| min-height: 240px; | |
| } | |
| } | |
| /* ============================================================ | |
| Editor preview | |
| ============================================================ */ | |
| .editor-preview { | |
| position: relative; | |
| display: grid; | |
| place-items: center; | |
| min-height: 400px; | |
| max-height: 60vh; | |
| overflow: hidden; | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-lg); | |
| background: #050810; | |
| color: var(--text-soft); | |
| } | |
| .editor-preview video { | |
| width: 100%; | |
| height: 100%; | |
| max-height: 60vh; | |
| object-fit: contain; | |
| } | |
| .caption-preview { | |
| position: absolute; | |
| left: 50%; | |
| width: min(84%, 640px); | |
| transform: translateX(-50%); | |
| font-weight: 900; | |
| letter-spacing: 0; | |
| line-height: 1.1; | |
| text-align: center; | |
| pointer-events: none; | |
| } | |
| .caption-preview .lit { | |
| color: var(--accent); | |
| } | |
| .caption-preview.pop { | |
| animation: caption-pop 900ms ease-in-out infinite alternate; | |
| } | |
| .caption-preview.bounce { | |
| animation: caption-bounce 760ms ease-in-out infinite alternate; | |
| } | |
| /* ============================================================ | |
| Range editor / timeline | |
| ============================================================ */ | |
| .section-panel { | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius); | |
| background: var(--surface2); | |
| padding: 16px; | |
| } | |
| .section-panel .panel-heading { | |
| margin-bottom: 14px; | |
| } | |
| .editor-toolbox { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 6px; | |
| align-items: center; | |
| margin-bottom: 2px; | |
| } | |
| .editor-toolbox-label { | |
| font-size: 0.75rem; | |
| font-weight: 700; | |
| color: var(--text-muted); | |
| text-transform: uppercase; | |
| letter-spacing: 0.06em; | |
| margin-right: 4px; | |
| flex: 0 0 auto; | |
| } | |
| .timeline-visual { | |
| position: relative; | |
| height: 48px; | |
| overflow: hidden; | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-sm); | |
| background: var(--surface); | |
| } | |
| .timeline-fill { | |
| position: absolute; | |
| inset: 20px 12px; | |
| border-radius: 999px; | |
| background: var(--surface2); | |
| } | |
| .timeline-window { | |
| position: absolute; | |
| top: 11px; | |
| height: 26px; | |
| border: 2px solid var(--primary); | |
| border-radius: 999px; | |
| background: var(--primary-glow); | |
| box-shadow: 0 0 8px var(--primary-glow); | |
| transition: left 120ms ease, width 120ms ease; | |
| } | |
| .timeline-window::before, | |
| .timeline-window::after { | |
| content: ""; | |
| position: absolute; | |
| top: 5px; | |
| width: 2px; | |
| height: 12px; | |
| border-radius: 999px; | |
| background: var(--primary); | |
| } | |
| .timeline-window::before { left: 7px; } | |
| .timeline-window::after { right: 7px; } | |
| .timeline-visual span { | |
| position: absolute; | |
| top: 16px; | |
| width: 1px; | |
| height: 16px; | |
| background: var(--border); | |
| } | |
| .range-sliders { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 12px; | |
| } | |
| .range-sliders label { | |
| display: grid; | |
| gap: 5px; | |
| font-size: 0.74rem; | |
| font-weight: 700; | |
| color: var(--text-muted); | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| } | |
| .range-sliders input[type="range"] { | |
| width: 100%; | |
| accent-color: var(--primary); | |
| } | |
| .timeline { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr 72px; | |
| gap: 10px; | |
| align-items: end; | |
| } | |
| .timeline label { | |
| display: grid; | |
| gap: 5px; | |
| font-size: 0.74rem; | |
| font-weight: 700; | |
| color: var(--text-muted); | |
| } | |
| .timeline input { | |
| width: 100%; | |
| min-height: 36px; | |
| padding: 7px 10px; | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-sm); | |
| background: var(--surface); | |
| color: var(--text); | |
| outline: none; | |
| font-variant-numeric: tabular-nums; | |
| transition: border-color 150ms ease, box-shadow 150ms ease; | |
| } | |
| .timeline input:focus { | |
| border-color: var(--primary); | |
| box-shadow: 0 0 0 3px var(--primary-ring); | |
| } | |
| .timeline strong { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| min-height: 36px; | |
| border-radius: var(--radius-sm); | |
| background: var(--surface2); | |
| color: var(--text-muted); | |
| font-size: 0.82rem; | |
| font-variant-numeric: tabular-nums; | |
| border: 1px solid var(--border); | |
| } | |
| /* ============================================================ | |
| Timeline tracks workbench | |
| ============================================================ */ | |
| .track-stack { | |
| display: grid; | |
| gap: 8px; | |
| } | |
| .track-row { | |
| display: grid; | |
| grid-template-columns: 80px 1fr; | |
| gap: 10px; | |
| align-items: center; | |
| } | |
| .track-row > span { | |
| font-size: 0.72rem; | |
| font-weight: 700; | |
| color: var(--text-muted); | |
| text-transform: uppercase; | |
| letter-spacing: 0.04em; | |
| } | |
| .track-lane { | |
| position: relative; | |
| min-height: 38px; | |
| overflow: hidden; | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-sm); | |
| background: | |
| repeating-linear-gradient( | |
| 90deg, | |
| transparent 0, | |
| transparent 11.8%, | |
| rgba(255,255,255,0.03) 12%, | |
| transparent 12.2% | |
| ), | |
| var(--surface2); | |
| } | |
| .track-clip { | |
| position: absolute; | |
| top: 5px; | |
| bottom: 5px; | |
| display: flex; | |
| min-width: 44px; | |
| align-items: center; | |
| overflow: hidden; | |
| border-radius: 5px; | |
| font-size: 0.68rem; | |
| font-weight: 700; | |
| padding: 0 7px; | |
| white-space: nowrap; | |
| text-overflow: ellipsis; | |
| } | |
| .track-clip.video { | |
| background: linear-gradient(90deg, var(--primary-dim), var(--primary)); | |
| color: #fff; | |
| } | |
| .track-clip.subtitle { | |
| background: var(--accent-soft); | |
| border: 1px solid rgba(245,158,11,0.25); | |
| color: var(--accent); | |
| } | |
| .waveform { | |
| position: absolute; | |
| inset: 6px 8px; | |
| display: flex; | |
| align-items: center; | |
| gap: 3px; | |
| } | |
| .waveform span { | |
| width: 3px; | |
| border-radius: 999px; | |
| background: var(--primary); | |
| opacity: 0.6; | |
| } | |
| /* ============================================================ | |
| Subtitle cue editor | |
| ============================================================ */ | |
| .cue-list { | |
| display: grid; | |
| gap: 8px; | |
| } | |
| .cue-row { | |
| display: grid; | |
| grid-template-columns: 104px 1fr; | |
| gap: 8px; | |
| align-items: start; | |
| } | |
| .cue-row > span { | |
| font-size: 0.72rem; | |
| font-weight: 600; | |
| color: var(--text-muted); | |
| font-variant-numeric: tabular-nums; | |
| padding-top: 10px; | |
| } | |
| /* ============================================================ | |
| Inspector panel | |
| ============================================================ */ | |
| .inspector-list { | |
| display: grid; | |
| gap: 10px; | |
| margin: 0; | |
| } | |
| .inspector-list div { | |
| display: grid; | |
| gap: 3px; | |
| padding-bottom: 10px; | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .inspector-list div:last-child { | |
| border-bottom: none; | |
| padding-bottom: 0; | |
| } | |
| .inspector-list dt { | |
| font-size: 0.7rem; | |
| font-weight: 700; | |
| text-transform: uppercase; | |
| letter-spacing: 0.06em; | |
| color: var(--text-muted); | |
| } | |
| .inspector-list dd { | |
| margin: 0; | |
| font-size: 0.86rem; | |
| color: var(--text); | |
| line-height: 1.45; | |
| } | |
| .inspector-actions { | |
| display: grid; | |
| gap: 8px; | |
| } | |
| .inspector-actions a, | |
| .inspector-actions button { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 7px; | |
| min-height: 38px; | |
| padding: 0 14px; | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-sm); | |
| background: var(--surface2); | |
| color: var(--text-muted); | |
| font-size: 0.84rem; | |
| font-weight: 600; | |
| text-decoration: none; | |
| cursor: pointer; | |
| transition: background 150ms ease, color 150ms ease, border-color 150ms ease, transform 150ms ease; | |
| } | |
| .inspector-actions a:hover, | |
| .inspector-actions button:hover { | |
| background: var(--surface); | |
| border-color: var(--border-strong); | |
| color: var(--text); | |
| } | |
| .inspector-actions button:active, | |
| .inspector-actions a:active { | |
| transform: scale(0.97); | |
| } | |
| .inspector-actions .btn-success { | |
| border-color: rgba(52,211,153,0.35); | |
| background: var(--success-soft); | |
| color: var(--success); | |
| } | |
| .inspector-actions .btn-success:hover { | |
| background: var(--success); | |
| color: #0a0c12; | |
| } | |
| .inspector-actions .btn-danger { | |
| border-color: rgba(248,113,113,0.3); | |
| background: var(--danger-soft); | |
| color: var(--danger); | |
| } | |
| .inspector-actions .btn-danger:hover { | |
| background: var(--danger); | |
| color: #fff; | |
| } | |
| .inspector-actions .btn-primary { | |
| border-color: var(--primary-dim); | |
| background: var(--primary-glow); | |
| color: var(--primary); | |
| } | |
| .inspector-actions .btn-primary:hover { | |
| background: var(--primary); | |
| color: #fff; | |
| } | |
| /* ============================================================ | |
| Caption style panel | |
| ============================================================ */ | |
| .caption-style-panel { | |
| display: grid; | |
| gap: 12px; | |
| } | |
| .preset-row { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 7px; | |
| } | |
| .preset-row button { | |
| min-height: 34px; | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-sm); | |
| background: var(--surface2); | |
| color: var(--text-muted); | |
| font-size: 0.78rem; | |
| font-weight: 700; | |
| transition: background 150ms ease, color 150ms ease, border-color 150ms ease, transform 150ms ease; | |
| } | |
| .preset-row button:hover { | |
| background: var(--primary-glow); | |
| border-color: var(--primary-dim); | |
| color: var(--primary); | |
| } | |
| .preset-row button:active { | |
| transform: scale(0.95); | |
| } | |
| .style-grid, | |
| .color-grid { | |
| display: grid; | |
| gap: 10px; | |
| } | |
| .color-grid { | |
| grid-template-columns: 1fr 1fr; | |
| } | |
| .color-field, | |
| .range-control { | |
| display: grid; | |
| gap: 6px; | |
| } | |
| .color-field span, | |
| .range-control span { | |
| display: flex; | |
| justify-content: space-between; | |
| font-size: 0.72rem; | |
| font-weight: 700; | |
| color: var(--text-muted); | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| } | |
| .range-control strong { | |
| color: var(--text); | |
| font-variant-numeric: tabular-nums; | |
| } | |
| .color-field input { | |
| width: 100%; | |
| height: 36px; | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-sm); | |
| background: var(--surface2); | |
| padding: 3px; | |
| cursor: pointer; | |
| transition: border-color 150ms ease; | |
| } | |
| .color-field input:hover { | |
| border-color: var(--border-strong); | |
| } | |
| .range-control input[type="range"] { | |
| width: 100%; | |
| accent-color: var(--primary); | |
| } | |
| /* ============================================================ | |
| Mini transcript | |
| ============================================================ */ | |
| .mini-transcript { | |
| display: grid; | |
| gap: 8px; | |
| } | |
| .mini-transcript h3 { | |
| font-size: 0.72rem; | |
| text-transform: uppercase; | |
| letter-spacing: 0.07em; | |
| color: var(--text-muted); | |
| margin: 0 0 4px; | |
| } | |
| .mini-transcript > div { | |
| display: grid; | |
| gap: 3px; | |
| padding-bottom: 8px; | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .mini-transcript > div:last-child { | |
| border-bottom: none; | |
| padding-bottom: 0; | |
| } | |
| .mini-transcript span { | |
| font-size: 0.7rem; | |
| font-weight: 600; | |
| color: var(--text-muted); | |
| font-variant-numeric: tabular-nums; | |
| } | |
| .mini-transcript p { | |
| margin: 0; | |
| font-size: 0.82rem; | |
| color: var(--text); | |
| line-height: 1.5; | |
| } | |
| /* ============================================================ | |
| Utility | |
| ============================================================ */ | |
| .spin { | |
| animation: spin 0.85s linear infinite; | |
| } | |
| /* ============================================================ | |
| Responsive — 1300px | |
| ============================================================ */ | |
| @media (max-width: 1300px) { | |
| .workspace-grid { | |
| grid-template-columns: 290px minmax(0, 1fr); | |
| } | |
| } | |
| /* ============================================================ | |
| Responsive — 1000px | |
| ============================================================ */ | |
| @media (max-width: 1000px) { | |
| .workspace-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .sidebar-column { | |
| position: static; | |
| max-height: none; | |
| overflow: visible; | |
| } | |
| .editor-body { | |
| grid-template-columns: 1fr; | |
| } | |
| .editor-left { | |
| border-right: none; | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .editor-right { | |
| position: static; | |
| max-height: none; | |
| overflow: visible; | |
| } | |
| .clip-grid { | |
| grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| } | |
| .step-list { | |
| grid-template-columns: repeat(3, minmax(0, 1fr)); | |
| } | |
| } | |
| /* ============================================================ | |
| Responsive — 720px | |
| ============================================================ */ | |
| @media (max-width: 720px) { | |
| .app-header { | |
| align-items: flex-start; | |
| flex-direction: column; | |
| padding-top: 12px; | |
| padding-bottom: 12px; | |
| gap: 10px; | |
| } | |
| .brand-block p { | |
| max-width: 100%; | |
| white-space: normal; | |
| } | |
| .editor-topbar { | |
| align-items: flex-start; | |
| flex-wrap: wrap; | |
| } | |
| .clip-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .range-sliders, | |
| .timeline, | |
| .cue-row, | |
| .track-row, | |
| .transcript-row { | |
| grid-template-columns: 1fr; | |
| } | |
| .color-grid, | |
| .preset-row { | |
| grid-template-columns: 1fr; | |
| } | |
| .form-grid-two { | |
| grid-template-columns: 1fr; | |
| } | |
| .step-list { | |
| grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| } | |
| .progress-percent { | |
| font-size: 1.6rem; | |
| } | |
| } | |