Spaces:
Sleeping
Sleeping
| * { | |
| box-sizing: border-box; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| [hidden] { | |
| display: none ; | |
| } | |
| body { | |
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; | |
| background: #f5f5ff; | |
| min-height: 100vh; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| /* Header */ | |
| header { | |
| background: white; | |
| border-bottom: 1px solid #e8e8f0; | |
| padding: 0 32px; | |
| height: 52px; | |
| display: flex; | |
| align-items: center; | |
| } | |
| .brand { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| font-weight: 700; | |
| font-size: 16px; | |
| color: #1e1b4b; | |
| } | |
| /* Main layout */ | |
| main { | |
| display: flex; | |
| flex: 1; | |
| height: calc(100vh - 52px); | |
| overflow: hidden; | |
| } | |
| /* Left panel */ | |
| .left-panel { | |
| width: 260px; | |
| min-width: 260px; | |
| background: white; | |
| border-right: 1px solid #e8e8f0; | |
| padding: 20px 16px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 12px; | |
| overflow-y: auto; | |
| } | |
| /* Upload zone */ | |
| .upload-zone { | |
| border: 2px dashed #c7d2fe; | |
| border-radius: 14px; | |
| padding: 28px 16px; | |
| text-align: center; | |
| cursor: pointer; | |
| transition: border-color 0.2s, background 0.2s; | |
| } | |
| .upload-zone:hover, | |
| .upload-zone.dragover { | |
| border-color: #6366f1; | |
| background: #f5f3ff; | |
| } | |
| .upload-title { | |
| font-size: 15px; | |
| font-weight: 600; | |
| color: #1e1b4b; | |
| margin: 10px 0 12px; | |
| } | |
| .choose-btn { | |
| background: white; | |
| border: 1.5px solid #d1d5db; | |
| color: #374151; | |
| padding: 6px 16px; | |
| border-radius: 20px; | |
| font-size: 13px; | |
| cursor: pointer; | |
| transition: border-color 0.2s; | |
| } | |
| .choose-btn:hover { border-color: #6366f1; color: #6366f1; } | |
| /* File card */ | |
| .file-card { | |
| background: #6366f1; | |
| border-radius: 10px; | |
| padding: 10px 12px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| } | |
| .file-info { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| min-width: 0; | |
| } | |
| .file-name { | |
| display: block; | |
| font-size: 13px; | |
| font-weight: 500; | |
| color: white; | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| max-width: 140px; | |
| } | |
| .file-duration { | |
| display: block; | |
| font-size: 11px; | |
| color: #c7d2fe; | |
| margin-top: 2px; | |
| } | |
| .delete-btn { | |
| background: none; | |
| border: none; | |
| color: #c7d2fe; | |
| cursor: pointer; | |
| padding: 4px; | |
| flex-shrink: 0; | |
| display: flex; | |
| align-items: center; | |
| transition: color 0.2s; | |
| } | |
| .delete-btn:hover { color: white; } | |
| /* Process button */ | |
| .process-btn { | |
| width: 100%; | |
| background: #6366f1; | |
| color: white; | |
| border: none; | |
| padding: 12px; | |
| border-radius: 10px; | |
| font-size: 14px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: background 0.2s; | |
| } | |
| .process-btn:hover { background: #4f46e5; } | |
| .process-btn:disabled { background: #a5b4fc; cursor: not-allowed; } | |
| /* Status */ | |
| #status { | |
| font-size: 13px; | |
| color: #6b7280; | |
| text-align: center; | |
| } | |
| #status.error { color: #dc2626; } | |
| #status.success { color: #16a34a; } | |
| /* Right panel */ | |
| .right-panel { | |
| flex: 1; | |
| padding: 28px 32px; | |
| overflow-y: auto; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| /* Empty state */ | |
| .empty-state { | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 12px; | |
| color: #c7d2fe; | |
| font-size: 14px; | |
| } | |
| /* Player section */ | |
| .player-section { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 20px; | |
| } | |
| .player-wrap { | |
| background: white; | |
| border-radius: 16px; | |
| padding: 20px; | |
| box-shadow: 0 2px 12px rgba(99,102,241,0.08); | |
| } | |
| audio { | |
| width: 100%; | |
| border-radius: 8px; | |
| } | |
| video { | |
| width: 100%; | |
| max-height: 60vh; | |
| object-fit: contain; | |
| border-radius: 8px; | |
| background: #000; | |
| } | |
| /* Toggle */ | |
| .toggle-row { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 12px; | |
| } | |
| .toggle-label { | |
| font-size: 14px; | |
| font-weight: 500; | |
| color: #9ca3af; | |
| } | |
| .enhanced-label { color: #6366f1; font-weight: 600; } | |
| .toggle-switch { | |
| position: relative; | |
| display: inline-block; | |
| width: 48px; | |
| height: 26px; | |
| } | |
| .toggle-switch input { display: none; } | |
| .toggle-slider { | |
| position: absolute; | |
| inset: 0; | |
| background: #e5e7eb; | |
| border-radius: 999px; | |
| cursor: pointer; | |
| transition: background 0.2s; | |
| } | |
| .toggle-slider:before { | |
| content: ''; | |
| position: absolute; | |
| width: 20px; | |
| height: 20px; | |
| left: 3px; | |
| top: 3px; | |
| background: white; | |
| border-radius: 50%; | |
| transition: transform 0.2s; | |
| box-shadow: 0 1px 4px rgba(0,0,0,0.15); | |
| } | |
| .toggle-switch input:checked + .toggle-slider { background: #6366f1; } | |
| .toggle-switch input:checked + .toggle-slider:before { transform: translateX(22px); } | |
| /* Control card */ | |
| .control-card { | |
| background: white; | |
| border-radius: 14px; | |
| padding: 16px 20px; | |
| box-shadow: 0 2px 12px rgba(99,102,241,0.06); | |
| } | |
| .control-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 10px; | |
| } | |
| .control-name { | |
| font-size: 14px; | |
| font-weight: 500; | |
| color: #374151; | |
| } | |
| .control-value { | |
| font-size: 13px; | |
| color: #6366f1; | |
| font-weight: 600; | |
| } | |
| input[type="range"] { | |
| width: 100%; | |
| accent-color: #6366f1; | |
| cursor: pointer; | |
| } | |
| .slider-hints { | |
| display: flex; | |
| justify-content: space-between; | |
| font-size: 11px; | |
| color: #9ca3af; | |
| margin-top: 6px; | |
| } | |
| /* Download button */ | |
| .download-btn { | |
| display: block; | |
| text-align: center; | |
| background: white; | |
| color: #6366f1; | |
| border: 1.5px solid #6366f1; | |
| padding: 12px; | |
| border-radius: 10px; | |
| font-size: 14px; | |
| font-weight: 600; | |
| text-decoration: none; | |
| transition: background 0.2s, color 0.2s; | |
| } | |
| .download-btn:hover { | |
| background: #6366f1; | |
| color: white; | |
| } | |
| /* Responsive */ | |
| @media (max-width: 640px) { | |
| main { flex-direction: column; height: auto; } | |
| .left-panel { width: 100%; border-right: none; border-bottom: 1px solid #e8e8f0; } | |
| } | |