2 lines
13 KiB
CSS
2 lines
13 KiB
CSS
.storyboard-video-create-page[data-v-03a4e90e]{height:100vh;background:#0a0a0a;color:#fff;display:flex;flex-direction:column;margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.top-header[data-v-03a4e90e]{display:flex;justify-content:space-between;align-items:center;padding:20px 32px;background:#0a0a0a;border-bottom:1px solid #1f1f1f;min-height:60px}.header-left[data-v-03a4e90e]{display:flex;align-items:center}.back-btn[data-v-03a4e90e]{background:none;border:none;color:#fff;font-size:16px;cursor:pointer;padding:10px 20px;border-radius:8px;transition:all .2s ease;font-weight:500}.back-btn[data-v-03a4e90e]:hover{background:#1a1a1a;transform:translate(-2px)}.header-right[data-v-03a4e90e]{display:flex;align-items:center;gap:24px}.credits-info[data-v-03a4e90e]{display:flex;align-items:center;gap:12px;color:#fff;font-size:14px;font-weight:500}.credits-circle[data-v-03a4e90e]{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#3b82f6,#1d4ed8);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px;box-shadow:0 4px 12px #3b82f64d}.notification-icon[data-v-03a4e90e]{position:relative;font-size:24px;cursor:pointer;padding:8px;border-radius:8px;transition:background .2s ease}.notification-icon[data-v-03a4e90e]:hover{background:#1a1a1a}.notification-badge[data-v-03a4e90e]{position:absolute;top:2px;right:2px;background:#ef4444;color:#fff;border-radius:50%;width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;box-shadow:0 2px 8px #ef444466}.user-avatar[data-v-03a4e90e]{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#374151,#1f2937);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:20px;transition:transform .2s ease}.user-avatar[data-v-03a4e90e]:hover{transform:scale(1.05)}.main-content[data-v-03a4e90e]{flex:1;display:grid;grid-template-columns:400px 1fr;gap:0;height:calc(100vh - 100px)}.left-panel[data-v-03a4e90e]{background:#1a1a1a;border-right:1px solid #2a2a2a;padding:32px 32px 100px;display:flex;flex-direction:column;overflow:hidden;height:100%;position:relative}.left-panel-content[data-v-03a4e90e]{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:32px;min-height:0;padding-right:8px}.left-panel-content[data-v-03a4e90e]::-webkit-scrollbar{width:8px}.left-panel-content[data-v-03a4e90e]::-webkit-scrollbar-track{background:#0a0a0a;border-radius:4px}.left-panel-content[data-v-03a4e90e]::-webkit-scrollbar-thumb{background:#3a3a3a;border-radius:4px}.left-panel-content[data-v-03a4e90e]::-webkit-scrollbar-thumb:hover{background:#4a4a4a}.creation-tabs[data-v-03a4e90e]{display:flex;gap:4px;background:#0a0a0a;padding:4px;border-radius:12px}.tab[data-v-03a4e90e]{flex:1;padding:12px 16px;border-radius:8px;cursor:pointer;transition:all .2s ease;color:#9ca3af;font-size:14px;font-weight:500;text-align:center}.tab.active[data-v-03a4e90e]{background:#3b82f6;color:#fff;box-shadow:0 2px 8px #3b82f64d}.tab[data-v-03a4e90e]:hover:not(.active){background:#2a2a2a;color:#fff}.storyboard-steps[data-v-03a4e90e]{display:flex;gap:4px;background:#0a0a0a;padding:4px;border-radius:12px}.step[data-v-03a4e90e]{flex:1;padding:10px 16px;border-radius:8px;cursor:pointer;transition:all .2s ease;color:#9ca3af;font-size:13px;font-weight:500;text-align:center}.step.active[data-v-03a4e90e]{background:#3b82f6;color:#fff;box-shadow:0 2px 8px #3b82f64d}.step[data-v-03a4e90e]:hover:not(.active):not(.disabled){background:#2a2a2a;color:#fff}.step.disabled[data-v-03a4e90e]{opacity:.5;cursor:not-allowed}.step.disabled[data-v-03a4e90e]:hover{background:transparent}.generated-image-preview[data-v-03a4e90e]{width:100%;aspect-ratio:16/9;background:#0a0a0a;border:2px solid #2a2a2a;border-radius:12px;display:flex;align-items:center;justify-content:center;overflow:hidden}.generated-image-preview img[data-v-03a4e90e]{width:100%;height:100%;object-fit:cover}.generated-image-preview .placeholder-text[data-v-03a4e90e]{color:#6b7280;font-size:14px}.storyboard-section[data-v-03a4e90e]{display:flex;flex-direction:column;gap:16px}.image-upload-btn[data-v-03a4e90e]{width:100%;padding:12px 16px;background:#0a0a0a;border:2px dashed #2a2a2a;border-radius:8px;cursor:pointer;transition:all .2s ease;text-align:center;color:#9ca3af;font-size:14px;display:flex;flex-direction:column;gap:8px;align-items:center}.image-upload-btn[data-v-03a4e90e]:hover{border-color:#3b82f6;background:#1a1a1a;color:#fff}.image-upload-btn.disabled[data-v-03a4e90e]{opacity:.5;cursor:not-allowed;border-color:#1a1a1a;pointer-events:none}.image-upload-btn.disabled[data-v-03a4e90e]:hover{border-color:#1a1a1a;background:#0a0a0a;color:#9ca3af}.image-count[data-v-03a4e90e]{font-size:12px;color:#3b82f6;font-weight:600}.images-preview-grid[data-v-03a4e90e]{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:12px}.image-preview-item[data-v-03a4e90e]{position:relative;width:100%;aspect-ratio:16/9;border-radius:8px;overflow:hidden;border:2px solid #2a2a2a;background:#0a0a0a}.image-preview-item img[data-v-03a4e90e]{width:100%;height:100%;object-fit:cover}.image-preview-item .remove-btn[data-v-03a4e90e]{position:absolute;top:4px;right:4px;width:24px;height:24px;background:rgba(239,68,68,.9);color:#fff;border:none;border-radius:50%;cursor:pointer;font-size:18px;line-height:1;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.image-preview-item .remove-btn[data-v-03a4e90e]:hover{background:rgba(239,68,68,1);transform:scale(1.1)}.image-preview-item .image-index[data-v-03a4e90e]{position:absolute;bottom:4px;left:4px;background:rgba(0,0,0,.7);color:#fff;padding:2px 8px;border-radius:4px;font-size:12px;font-weight:600}.image-preview[data-v-03a4e90e]{position:relative;width:100%;aspect-ratio:16/9}.image-preview img[data-v-03a4e90e]{width:100%;height:100%;object-fit:cover;border-radius:8px}.remove-btn[data-v-03a4e90e]{position:absolute;top:8px;right:8px;width:24px;height:24px;border-radius:50%;background:rgba(0,0,0,.7);color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700}.text-input-section[data-v-03a4e90e]{display:flex;flex-direction:column;gap:16px}.text-input[data-v-03a4e90e]{width:100%;min-height:120px;padding:16px;background:#0a0a0a;border:2px solid #2a2a2a;border-radius:12px;color:#fff;font-size:15px;line-height:1.6;resize:vertical;outline:none;transition:all .2s ease;font-family:inherit}.text-input[data-v-03a4e90e]:focus{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.text-input[data-v-03a4e90e]::placeholder{color:#6b7280}.input-tips[data-v-03a4e90e]{display:flex;flex-direction:column;gap:8px;padding:12px;background:rgba(59,130,246,.05);border-radius:8px;border:1px solid rgba(59,130,246,.2)}.tip-item[data-v-03a4e90e]{font-size:13px;color:#9ca3af;line-height:1.5}.tip-item[data-v-03a4e90e]:first-child{color:#60a5fa;font-weight:500}.optimize-btn[data-v-03a4e90e]{display:flex;justify-content:flex-end}.optimize-button[data-v-03a4e90e]{background:linear-gradient(135deg,#3b82f6,#1d4ed8);color:#fff;border:none;padding:10px 20px;border-radius:8px;cursor:pointer;font-size:14px;font-weight:600;transition:all .2s ease;box-shadow:0 2px 8px #3b82f64d}.optimize-button[data-v-03a4e90e]:hover{transform:translateY(-1px);box-shadow:0 4px 12px #3b82f666}.video-settings[data-v-03a4e90e]{display:flex;flex-direction:column;gap:20px}.setting-item[data-v-03a4e90e]{display:flex;flex-direction:column;gap:10px}.setting-item label[data-v-03a4e90e]{font-size:14px;color:#e5e7eb;font-weight:600}.setting-select[data-v-03a4e90e]{padding:12px 16px;background:#0a0a0a;border:2px solid #2a2a2a;border-radius:8px;color:#fff;font-size:14px;outline:none;cursor:pointer;transition:all .2s ease;font-family:inherit}.setting-select[data-v-03a4e90e]:focus{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.setting-select[data-v-03a4e90e]:hover{border-color:#374151}.hd-setting[data-v-03a4e90e]{display:flex;align-items:center;gap:12px}.hd-switch[data-v-03a4e90e]{width:20px;height:20px;cursor:pointer;accent-color:#3b82f6}.cost-text[data-v-03a4e90e]{font-size:13px;color:#9ca3af;font-weight:500}.generate-section[data-v-03a4e90e]{flex-shrink:0;padding-top:16px;border-top:1px solid #2a2a2a}.generate-section.floating[data-v-03a4e90e]{position:fixed;bottom:32px;left:32px;width:336px;z-index:1000;background:#1a1a1a;padding:16px;border-radius:12px;box-shadow:0 -4px 24px #000c,0 8px 32px #3b82f64d;border:1px solid #3a3a3a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);animation:floatIn-03a4e90e .3s ease-out}@keyframes floatIn-03a4e90e{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.generate-btn[data-v-03a4e90e]{width:100%;background:linear-gradient(135deg,#3b82f6,#1d4ed8);color:#fff;border:none;padding:16px 24px;border-radius:12px;font-size:16px;font-weight:700;cursor:pointer;transition:all .2s ease;box-shadow:0 4px 16px #3b82f64d;text-transform:uppercase;letter-spacing:.5px}.generate-btn[data-v-03a4e90e]:hover{transform:translateY(-2px);box-shadow:0 8px 24px #3b82f666}.generate-btn[data-v-03a4e90e]:active{transform:translateY(0)}.generate-btn[data-v-03a4e90e]:disabled{background:#6b7280;cursor:not-allowed;transform:none;box-shadow:none;opacity:.6}.generate-btn[data-v-03a4e90e]:disabled:hover{transform:none;box-shadow:none}.right-panel[data-v-03a4e90e]{background:#0a0a0a;padding:32px;display:flex;flex-direction:column}.preview-area[data-v-03a4e90e]{flex:1;display:flex;flex-direction:column;gap:20px}.status-checkbox[data-v-03a4e90e]{display:flex;align-items:center;gap:12px;margin-bottom:8px}.status-checkbox input[type=checkbox][data-v-03a4e90e]{width:18px;height:18px;cursor:pointer;accent-color:#3b82f6}.status-checkbox label[data-v-03a4e90e]{font-size:14px;color:#e5e7eb;cursor:pointer;font-weight:500}.preview-content[data-v-03a4e90e]{flex:1;background:#1a1a1a;border:2px solid #2a2a2a;border-radius:12px;display:flex;align-items:center;justify-content:center;transition:all .2s ease;overflow:hidden;min-height:0;position:relative}.preview-content[data-v-03a4e90e]:hover{border-color:#374151}.preview-placeholder[data-v-03a4e90e]{text-align:center;padding:40px}.placeholder-text[data-v-03a4e90e]{font-size:18px;color:#6b7280;font-weight:500;line-height:1.5}.preview-image[data-v-03a4e90e]{width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:20px;overflow:hidden;box-sizing:border-box;position:relative}.preview-image img[data-v-03a4e90e]{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:8px;box-shadow:0 4px 20px #0000004d}.preview-loading[data-v-03a4e90e]{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:40px}.loading-spinner[data-v-03a4e90e]{width:48px;height:48px;border:4px solid #2a2a2a;border-top-color:#3b82f6;border-radius:50%;animation:spin-03a4e90e 1s linear infinite}@keyframes spin-03a4e90e{to{transform:rotate(360deg)}}.loading-text[data-v-03a4e90e]{font-size:16px;color:#9ca3af;font-weight:500}.progress-text[data-v-03a4e90e]{font-size:14px;color:#3b82f6;font-weight:600;margin-top:10px}.preview-video[data-v-03a4e90e]{width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:20px;overflow:hidden;box-sizing:border-box}.preview-video video[data-v-03a4e90e]{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:8px;box-shadow:0 4px 20px #0000004d;background:#000}.video-progress-overlay[data-v-03a4e90e]{position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.7);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;border-radius:8px}.preview-image[data-v-03a4e90e]{position:relative}@media (max-width: 1200px){.main-content[data-v-03a4e90e]{grid-template-columns:350px 1fr}.left-panel[data-v-03a4e90e]{padding:24px 24px 100px}.generate-section.floating[data-v-03a4e90e]{left:24px;width:302px}.right-panel[data-v-03a4e90e]{padding:24px}}@media (max-width: 1024px){.main-content[data-v-03a4e90e]{grid-template-columns:1fr;grid-template-rows:auto 1fr}.left-panel[data-v-03a4e90e]{border-right:none;border-bottom:1px solid #2a2a2a;padding:20px 20px 100px}.generate-section.floating[data-v-03a4e90e]{left:20px;right:20px;width:auto}.right-panel[data-v-03a4e90e]{padding:20px}}@media (max-width: 768px){.top-header[data-v-03a4e90e]{padding:16px 20px}.header-right[data-v-03a4e90e]{gap:16px}.left-panel[data-v-03a4e90e]{padding:16px 16px 100px}.generate-section.floating[data-v-03a4e90e]{left:16px;right:16px;bottom:16px;width:auto}.left-panel[data-v-03a4e90e]{gap:24px}.right-panel[data-v-03a4e90e]{padding:16px}.creation-tabs[data-v-03a4e90e]{flex-direction:column;gap:8px}.tab[data-v-03a4e90e]{text-align:left}.storyboard-steps[data-v-03a4e90e]{flex-direction:column;gap:8px}.step[data-v-03a4e90e]{text-align:left}}
|