| @tailwind base; |
| @tailwind components; |
| @tailwind utilities; |
|
|
| |
| |
| |
| |
|
|
| :root { |
| color-scheme: dark; |
| font-family: Inter, ui-sans-serif, system-ui, sans-serif; |
|
|
| |
| --bg: #0a0c12; |
| --surface: #13171f; |
| --surface2: #1c2130; |
| --border: #252d3f; |
| --border-strong:#2f3a52; |
|
|
| |
| --primary: #818cf8; |
| --primary-dim: #4f56b3; |
| --primary-glow: rgba(129,140,248,0.18); |
| --primary-ring: rgba(129,140,248,0.35); |
|
|
| |
| --accent: #f59e0b; |
| --accent-soft: rgba(245,158,11,0.12); |
|
|
| |
| --success: #34d399; |
| --success-soft: rgba(52,211,153,0.12); |
| --danger: #f87171; |
| --danger-soft: rgba(248,113,113,0.12); |
|
|
| |
| --text: #e2e8f0; |
| --text-muted: #8896a8; |
| --text-soft: #4a5568; |
|
|
| |
| --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; |
| } |
|
|
| |
| :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); |
| } |
|
|
| |
| |
| |
| *, |
| *::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; |
| } |
|
|
| |
| |
| |
| @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 { |
| min-height: 100vh; |
| background: var(--bg); |
| color: var(--text); |
| } |
|
|
| |
| |
| |
| .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; |
| } |
|
|
| |
| |
| |
| .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-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); |
| } |
|
|
| |
| |
| |
| .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; |
| } |
|
|
| |
| |
| |
| .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-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 { |
| 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); |
| } |
|
|
| |
| |
| |
| .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); |
| } |
|
|
| |
| .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-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-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-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 { |
| 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 { |
| 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; |
| } |
|
|
| |
| .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-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-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; |
| } |
|
|
| |
| |
| |
| .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; |
| } |
|
|
| |
| .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; |
| } |
|
|
| |
| .nle-preview { |
| grid-area: preview; |
| border-bottom: 1px solid var(--border); |
| } |
|
|
| .preview-stage { |
| position: relative; |
| flex: 1; |
| min-height: 0; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| background: #04060c; |
| overflow: hidden; |
| padding: 12px; |
| } |
|
|
| .preview-stage-canvas { |
| position: relative; |
| width: 100%; |
| height: 100%; |
| max-width: 100%; |
| max-height: 100%; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| overflow: hidden; |
| } |
|
|
| .preview-stage video { |
| display: block; |
| width: 100%; |
| height: 100%; |
| max-width: 100%; |
| max-height: 100%; |
| object-fit: contain; |
| background: #000; |
| border-radius: 4px; |
| } |
|
|
| .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; |
| } |
|
|
| |
| .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 12px; |
| font-size: 0.78rem; |
| font-weight: 700; |
| white-space: nowrap; |
| overflow: hidden; |
| cursor: default; |
| 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.readonly { |
| cursor: default; |
| } |
|
|
| .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.32); |
| border: 1px solid rgba(245, 158, 11, 0.7); |
| color: var(--accent); |
| font-size: 0.68rem; |
| font-weight: 600; |
| padding: 0 12px; |
| display: flex; |
| align-items: center; |
| white-space: nowrap; |
| overflow: hidden; |
| cursor: grab; |
| transition: background 140ms ease; |
| user-select: none; |
| } |
|
|
| .timeline-caption-block:hover { |
| background: rgba(245, 158, 11, 0.45); |
| } |
|
|
| .timeline-caption-block.selected { |
| background: var(--accent); |
| color: #1a1300; |
| border-color: var(--accent); |
| } |
|
|
| .timeline-caption-block .cue-text { |
| flex: 1; |
| min-width: 0; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| pointer-events: none; |
| padding: 0 4px; |
| } |
|
|
| .cue-handle { |
| position: absolute; |
| top: -1px; |
| bottom: -1px; |
| width: 8px; |
| background: rgba(245, 158, 11, 0.85); |
| cursor: ew-resize; |
| z-index: 3; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| transition: background 120ms ease; |
| } |
|
|
| .cue-handle::before { |
| content: ""; |
| width: 2px; |
| height: 10px; |
| background: rgba(0, 0, 0, 0.5); |
| border-radius: 1px; |
| } |
|
|
| .cue-handle:hover { |
| background: #f59e0b; |
| } |
|
|
| .cue-handle.left { |
| left: 0; |
| border-radius: 4px 0 0 4px; |
| } |
|
|
| .cue-handle.right { |
| right: 0; |
| border-radius: 0 4px 4px 0; |
| } |
|
|
| |
| |
| |
| .gpu-tag { |
| display: inline-flex; |
| align-items: center; |
| gap: 4px; |
| font-size: 0.62rem; |
| font-weight: 600; |
| letter-spacing: 0.04em; |
| text-transform: uppercase; |
| padding: 2px 7px; |
| border-radius: 999px; |
| margin-left: 6px; |
| vertical-align: 2px; |
| } |
|
|
| .gpu-tag.active { |
| background: var(--success-soft); |
| color: var(--success); |
| } |
|
|
| .gpu-tag.pending { |
| background: var(--surface2); |
| color: var(--text-muted); |
| border: 1px solid var(--border); |
| } |
|
|
| .gpu-dot { |
| width: 6px; |
| height: 6px; |
| border-radius: 50%; |
| background: currentColor; |
| } |
|
|
| .gpu-tag.active .gpu-dot { |
| animation: gpu-pulse 1.6s ease-in-out infinite; |
| } |
|
|
| @keyframes gpu-pulse { |
| 0%, 100% { opacity: 1; } |
| 50% { opacity: 0.45; } |
| } |
|
|
| .ai-card { |
| margin: 12px 14px; |
| padding: 10px 12px; |
| border-radius: var(--radius-sm); |
| border: 1px solid var(--border); |
| background: var(--surface2); |
| } |
|
|
| .ai-card.vision { |
| border-color: rgba(245, 158, 11, 0.35); |
| background: linear-gradient(135deg, rgba(245, 158, 11, 0.08), transparent); |
| } |
|
|
| .ai-card-head { |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| flex-wrap: wrap; |
| margin-bottom: 6px; |
| } |
|
|
| .ai-card-tag { |
| display: inline-flex; |
| align-items: center; |
| gap: 4px; |
| padding: 2px 7px; |
| border-radius: 999px; |
| background: var(--primary-glow); |
| color: var(--primary); |
| font-size: 0.65rem; |
| font-weight: 700; |
| letter-spacing: 0.03em; |
| } |
|
|
| .ai-card-tag.vision { |
| background: rgba(245, 158, 11, 0.18); |
| color: var(--accent); |
| } |
|
|
| .ai-card-sub { |
| font-size: 0.7rem; |
| color: var(--text-muted); |
| } |
|
|
| .ai-card-score { |
| margin-left: auto; |
| font-size: 0.84rem; |
| font-weight: 700; |
| color: var(--accent); |
| } |
|
|
| .ai-card-body { |
| margin: 0; |
| font-size: 0.82rem; |
| color: var(--text); |
| line-height: 1.5; |
| } |
|
|
| .ai-card-foot { |
| margin: 6px 0 0; |
| font-size: 0.66rem; |
| color: var(--text-muted); |
| font-family: ui-monospace, monospace; |
| } |
|
|
| .ai-actions.compact { |
| padding-top: 8px; |
| } |
|
|
| |
| |
| |
| .subtitle-editor { |
| padding: 12px 14px; |
| border-bottom: 1px solid var(--border); |
| } |
|
|
| .subtitle-editor-head { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| margin-bottom: 10px; |
| } |
|
|
| .subtitle-editor-head h4 { |
| margin: 0; |
| font-size: 0.74rem; |
| font-weight: 700; |
| letter-spacing: 0.04em; |
| text-transform: uppercase; |
| color: var(--text-muted); |
| } |
|
|
| .subtitle-count { |
| font-size: 0.7rem; |
| color: var(--text-muted); |
| background: var(--surface2); |
| border: 1px solid var(--border); |
| border-radius: 999px; |
| padding: 1px 8px; |
| font-weight: 600; |
| } |
|
|
| .cue-rows { |
| display: flex; |
| flex-direction: column; |
| gap: 8px; |
| max-height: 320px; |
| overflow-y: auto; |
| scrollbar-width: thin; |
| padding-right: 2px; |
| } |
|
|
| .cue-row { |
| border: 1px solid var(--border); |
| border-radius: var(--radius-sm); |
| padding: 8px; |
| background: var(--surface2); |
| cursor: pointer; |
| transition: border-color 140ms ease, background 140ms ease; |
| } |
|
|
| .cue-row:hover { |
| border-color: var(--border-strong); |
| } |
|
|
| .cue-row.active { |
| border-color: var(--primary); |
| background: var(--primary-glow); |
| box-shadow: var(--shadow-glow); |
| } |
|
|
| .cue-row-times { |
| display: flex; |
| align-items: center; |
| gap: 4px; |
| margin-bottom: 6px; |
| } |
|
|
| .cue-row-sep { |
| color: var(--text-muted); |
| font-size: 0.78rem; |
| } |
|
|
| .cue-row-jump, |
| .cue-row-delete { |
| margin-left: auto; |
| display: inline-flex; |
| align-items: center; |
| justify-content: center; |
| width: 22px; |
| height: 22px; |
| border: 1px solid var(--border); |
| background: var(--surface); |
| color: var(--text-muted); |
| border-radius: 4px; |
| cursor: pointer; |
| transition: all 140ms ease; |
| } |
|
|
| .cue-row-delete { |
| margin-left: 0; |
| color: var(--danger); |
| border-color: rgba(248, 113, 113, 0.3); |
| } |
|
|
| .cue-row-jump:hover { |
| background: var(--primary-glow); |
| color: var(--primary); |
| border-color: var(--primary-dim); |
| } |
|
|
| .cue-row-delete:hover { |
| background: var(--danger-soft); |
| } |
|
|
| .num-stepper input { |
| width: 56px; |
| padding: 3px 6px; |
| font-size: 0.74rem; |
| font-family: ui-monospace, monospace; |
| text-align: center; |
| border: 1px solid var(--border); |
| border-radius: 4px; |
| background: var(--surface); |
| color: var(--text); |
| } |
|
|
| .cue-row-text { |
| width: 100%; |
| padding: 6px 8px; |
| border-radius: 4px; |
| border: 1px solid var(--border); |
| background: var(--surface); |
| color: var(--text); |
| font-family: inherit; |
| font-size: 0.82rem; |
| resize: vertical; |
| min-height: 38px; |
| } |
|
|
| .cue-add { |
| margin-top: 10px; |
| width: 100%; |
| justify-content: center; |
| border-style: dashed; |
| } |
|
|
| |
| .ai-subtitle-actions { |
| margin-top: 14px; |
| padding-top: 12px; |
| border-top: 1px dashed var(--border); |
| } |
|
|
| .ai-subtitle-head { |
| margin: 0 0 8px; |
| font-size: 0.72rem; |
| font-weight: 700; |
| letter-spacing: 0.04em; |
| text-transform: uppercase; |
| color: var(--text-muted); |
| } |
|
|
| .ai-subtitle-row { |
| display: flex; |
| gap: 6px; |
| margin-bottom: 6px; |
| } |
|
|
| .ai-subtitle-row .btn { |
| flex: 1; |
| justify-content: center; |
| } |
|
|
| .ai-subtitle-row.translate select { |
| flex: 0 0 110px; |
| padding: 6px 8px; |
| border: 1px solid var(--border); |
| background: var(--surface); |
| color: var(--text); |
| border-radius: var(--radius-sm); |
| font-size: 0.78rem; |
| } |
|
|
| .spin { |
| animation: spin 800ms linear infinite; |
| } |
|
|
| @keyframes spin { |
| to { transform: rotate(360deg); } |
| } |
|
|
| |
| |
| |
| .clip-edit-panel { |
| padding: 12px 14px; |
| border-bottom: 1px solid var(--border); |
| } |
|
|
| .clip-edit-panel h4 { |
| margin: 0 0 10px; |
| font-size: 0.74rem; |
| font-weight: 700; |
| letter-spacing: 0.04em; |
| text-transform: uppercase; |
| color: var(--text-muted); |
| } |
|
|
| .clip-edit-row { |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| margin-bottom: 8px; |
| } |
|
|
| .clip-edit-row.vertical { |
| flex-direction: column; |
| align-items: stretch; |
| } |
|
|
| .clip-edit-label { |
| flex: 0 0 auto; |
| font-size: 0.72rem; |
| color: var(--text-muted); |
| font-weight: 600; |
| } |
|
|
| .clip-edit-buttons { |
| display: flex; |
| gap: 4px; |
| flex-wrap: wrap; |
| } |
|
|
| .clip-edit-buttons .btn { |
| min-width: 42px; |
| padding: 4px 8px; |
| font-size: 0.72rem; |
| font-family: ui-monospace, monospace; |
| } |
|
|
| .clip-skip-input { |
| display: flex; |
| align-items: center; |
| gap: 4px; |
| } |
|
|
| .clip-skip-input input { |
| width: 60px; |
| padding: 4px 6px; |
| font-size: 0.74rem; |
| font-family: ui-monospace, monospace; |
| text-align: center; |
| border: 1px solid var(--border); |
| border-radius: 4px; |
| background: var(--surface); |
| color: var(--text); |
| } |
|
|
| .clip-skip-input span { |
| color: var(--text-muted); |
| } |
|
|
| .clip-skip-input .btn { |
| flex: 1; |
| padding: 4px 8px; |
| font-size: 0.72rem; |
| } |
|
|
| .skip-list { |
| list-style: none; |
| margin: 8px 0 0; |
| padding: 0; |
| display: flex; |
| flex-direction: column; |
| gap: 4px; |
| } |
|
|
| .skip-list li { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| padding: 4px 8px; |
| background: var(--surface2); |
| border: 1px solid var(--border); |
| border-radius: 4px; |
| font-size: 0.72rem; |
| font-family: ui-monospace, monospace; |
| } |
|
|
| .clip-edit-rerender { |
| margin-top: 10px; |
| width: 100%; |
| justify-content: center; |
| } |
|
|
| .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); |
| } |
|
|
| |
| .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; |
| } |
|
|
| |
| .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; |
| } |
|
|
| |
| @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 { |
| 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; |
| } |
|
|
| |
| |
| |
| .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); |
| } |
|
|
| |
| |
| |
| .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; |
| } |
|
|
| |
| |
| |
| .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-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 { |
| 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 { |
| 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; |
| } |
|
|
| |
| |
| |
| .spin { |
| animation: spin 0.85s linear infinite; |
| } |
|
|
| |
| |
| |
| @media (max-width: 1300px) { |
| .workspace-grid { |
| grid-template-columns: 290px minmax(0, 1fr); |
| } |
| } |
|
|
| |
| |
| |
| @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)); |
| } |
| } |
|
|
| |
| |
| |
| @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; |
| } |
| } |
|
|
