2 lines
8.3 KiB
CSS
2 lines
8.3 KiB
CSS
.text-to-video-page[data-v-8b215bcc]{display:flex;height:100vh;background:#0a0a0a;color:#fff;margin:0;padding:0}.sidebar[data-v-8b215bcc]{width:280px!important;background:#1a1a1a!important;padding:24px 0!important;border-right:1px solid #1a1a1a!important;flex-shrink:0!important;z-index:100!important;display:block!important;position:relative!important}.logo[data-v-8b215bcc]{padding:0 24px 32px;font-size:20px;font-weight:500;color:#fff}.nav-menu[data-v-8b215bcc]{padding:0 24px}.nav-item[data-v-8b215bcc]{display:flex;align-items:center;padding:14px 18px;margin-bottom:4px;border-radius:8px;cursor:pointer;transition:all .3s ease;position:relative}.nav-item[data-v-8b215bcc]:hover{background:#2a2a2a}.nav-item.active[data-v-8b215bcc]{background:#1e3a8a}.nav-item .el-icon[data-v-8b215bcc]{margin-right:14px;font-size:20px}.nav-item span[data-v-8b215bcc]{font-size:15px;flex:1}.nav-divider[data-v-8b215bcc]{height:1px;background:#333;margin:16px 0}.sora-tag[data-v-8b215bcc]{margin-left:8px}.storyboard-item[data-v-8b215bcc]{position:relative}.storyboard-item .sora-tag[data-v-8b215bcc]{background:linear-gradient(135deg,#667eea,#764ba2)!important;border:none!important;color:#fff!important;font-weight:700!important;font-size:11px!important;padding:2px 8px!important;border-radius:12px!important;box-shadow:0 2px 6px #667eea4d!important;animation:pulse-glow-8b215bcc 2s ease-in-out infinite alternate}@keyframes pulse-glow-8b215bcc{0%{box-shadow:0 2px 6px #667eea4d}to{box-shadow:0 2px 12px #667eea99}}.main-content[data-v-8b215bcc]{flex:1;padding:24px;display:flex;flex-direction:column;gap:24px}.user-info-card[data-v-8b215bcc]{background:#1a1a1a;border:1px solid #333;border-radius:12px;padding:24px;display:flex;align-items:center;gap:20px}.user-avatar[data-v-8b215bcc]{width:80px;height:80px;border-radius:50%;background:#000;display:flex;align-items:center;justify-content:center;border:2px solid #333}.avatar-placeholder[data-v-8b215bcc]{color:#fff;font-size:24px;font-weight:700;letter-spacing:2px}.user-details[data-v-8b215bcc]{flex:1;display:flex;flex-direction:column;gap:8px}.username[data-v-8b215bcc]{font-size:18px;font-weight:600;color:#fff}.profile-prompt[data-v-8b215bcc]{font-size:14px;color:#9ca3af}.user-id[data-v-8b215bcc]{font-size:12px;color:#6b7280}.edit-profile-btn[data-v-8b215bcc]{margin-left:auto}.published-works[data-v-8b215bcc]{display:flex;flex-direction:column;gap:20px}.works-tabs[data-v-8b215bcc]{display:flex;gap:24px}.tab[data-v-8b215bcc]{padding:8px 0;color:#9ca3af;cursor:pointer;position:relative}.tab.active[data-v-8b215bcc]{color:#fff}.tab.active[data-v-8b215bcc]:after{content:"";position:absolute;bottom:-8px;left:0;right:0;height:2px;background:#3b82f6}.works-grid[data-v-8b215bcc]{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px}.work-item[data-v-8b215bcc]{background:#1a1a1a;border:1px solid #333;border-radius:12px;overflow:hidden;transition:all .2s;cursor:pointer}.work-item[data-v-8b215bcc]:hover{border-color:#3b82f6;transform:translateY(-2px)}.work-thumbnail[data-v-8b215bcc]{position:relative;aspect-ratio:16/9;overflow:hidden}.work-thumbnail img[data-v-8b215bcc],.work-thumbnail video[data-v-8b215bcc]{width:100%;height:100%;object-fit:cover}.work-video-thumbnail[data-v-8b215bcc]{display:block;background:#000}.work-placeholder[data-v-8b215bcc]{width:100%;height:100%;background:#000;display:flex;align-items:center;justify-content:center}.play-icon[data-v-8b215bcc]{width:60px;height:60px;border-radius:50%;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;color:#fff;font-size:24px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.hover-create-btn[data-v-8b215bcc]{position:absolute;right:8px;bottom:8px;opacity:0;transform:translateY(10px);transition:all .3s ease;z-index:10}.work-thumbnail:hover .hover-create-btn[data-v-8b215bcc]{opacity:1;transform:translateY(0)}.hover-create-btn .el-button[data-v-8b215bcc]{background:rgba(64,158,255,.9);border:none;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 4px 12px #409eff4d}.hover-create-btn .el-button[data-v-8b215bcc]:hover{background:rgba(64,158,255,1);transform:scale(1.05)}.work-overlay[data-v-8b215bcc]{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,rgba(0,0,0,.8));padding:20px}.overlay-text[data-v-8b215bcc]{font-size:16px;font-weight:600;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.8)}.work-info[data-v-8b215bcc]{padding:16px;display:flex;flex-direction:column;gap:8px}.work-title[data-v-8b215bcc]{font-size:16px;font-weight:600;color:#fff}.work-meta[data-v-8b215bcc]{font-size:12px;color:#9ca3af}.work-actions[data-v-8b215bcc]{padding:0 16px 16px;opacity:0;transition:opacity .2s ease}.work-item:hover .work-actions[data-v-8b215bcc]{opacity:1}.create-similar-btn[data-v-8b215bcc]{width:100%}.work-director[data-v-8b215bcc]{padding:0 16px 16px;text-align:center}.work-director span[data-v-8b215bcc]{font-size:12px;color:#6b7280;font-style:italic}@media (max-width: 1024px){.sidebar[data-v-8b215bcc]{width:260px}.works-grid[data-v-8b215bcc]{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}}@media (max-width: 768px){.text-to-video-page[data-v-8b215bcc]{flex-direction:column}.sidebar[data-v-8b215bcc]{width:100%;height:auto}.nav-menu[data-v-8b215bcc]{flex-direction:row;overflow-x:auto;padding:0 16px}.nav-item[data-v-8b215bcc]{white-space:nowrap}.works-grid[data-v-8b215bcc]{grid-template-columns:1fr}}[data-v-8b215bcc] .detail-dialog .el-dialog{background:#0a0a0a!important;border-radius:12px;border:1px solid #333!important;box-shadow:0 4px 20px #000c}[data-v-8b215bcc] .detail-dialog .el-dialog__wrapper{background-color:#000c!important}[data-v-8b215bcc] .detail-dialog .el-dialog__header{background:#0a0a0a!important;padding:16px 20px;border-bottom:1px solid #333}[data-v-8b215bcc] .detail-dialog .el-dialog__title{color:#fff!important;font-size:18px;font-weight:600}[data-v-8b215bcc] .detail-dialog .el-dialog__headerbtn{color:#fff!important}[data-v-8b215bcc] .detail-dialog .el-dialog__body{background:#0a0a0a!important;padding:0!important}[data-v-8b215bcc] .detail-dialog .el-overlay{background-color:#000c!important}[data-v-8b215bcc] .el-dialog{background:#0a0a0a!important;border:1px solid #333!important}[data-v-8b215bcc] .el-dialog__wrapper{background-color:#000c!important}[data-v-8b215bcc] .el-dialog__header,[data-v-8b215bcc] .el-dialog__body{background:#0a0a0a!important}[data-v-8b215bcc] .el-overlay{background-color:#000c!important}.detail-content[data-v-8b215bcc]{display:flex;height:50vh;background:#0a0a0a}.detail-left[data-v-8b215bcc]{flex:1;padding:20px;display:flex;align-items:center;justify-content:center}.video-player[data-v-8b215bcc]{position:relative;width:100%;max-width:400px;aspect-ratio:16/9;border-radius:8px;overflow:hidden;cursor:pointer}.video-thumbnail[data-v-8b215bcc]{width:100%;height:100%;object-fit:cover}.play-overlay[data-v-8b215bcc]{position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.3);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s ease}.video-player:hover .play-overlay[data-v-8b215bcc]{opacity:1}.play-button[data-v-8b215bcc]{width:60px;height:60px;border-radius:50%;background:rgba(255,255,255,.9);display:flex;align-items:center;justify-content:center;font-size:24px;color:#000;font-weight:700}.detail-right[data-v-8b215bcc]{flex:1;padding:20px;background:#0a0a0a;display:flex;flex-direction:column;gap:20px}.metadata-section[data-v-8b215bcc]{display:flex;flex-direction:column;gap:12px}.metadata-item[data-v-8b215bcc]{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid #2a2a2a}.metadata-item[data-v-8b215bcc]:last-child{border-bottom:none}.label[data-v-8b215bcc]{font-size:14px;color:#9ca3af;font-weight:500}.value[data-v-8b215bcc]{font-size:14px;color:#fff;font-weight:600}.description-section[data-v-8b215bcc]{flex:1}.section-title[data-v-8b215bcc]{font-size:16px;color:#fff;font-weight:600;margin-bottom:12px}.description-text[data-v-8b215bcc]{font-size:14px;color:#d1d5db;line-height:1.6;margin:0}.action-section[data-v-8b215bcc]{margin-top:auto}.create-similar-btn[data-v-8b215bcc]{width:100%;background:linear-gradient(135deg,#3b82f6,#1d4ed8);color:#fff;border:none;padding:12px 24px;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;transition:all .2s ease;box-shadow:0 2px 8px #3b82f64d}.create-similar-btn[data-v-8b215bcc]:hover{transform:translateY(-1px);box-shadow:0 4px 12px #3b82f666}
|