diff --git a/apps/web/src/pages/auth/Login.css b/apps/web/src/pages/auth/Login.css index 60f56656e..7237d2ed4 100644 --- a/apps/web/src/pages/auth/Login.css +++ b/apps/web/src/pages/auth/Login.css @@ -31,7 +31,11 @@ font-size: 15px; font-weight: 700; border-radius: var(--radius-sm); - background: linear-gradient(135deg, var(--color-primary-500), var(--color-primary-600)); + background: linear-gradient( + 135deg, + var(--color-primary-500), + var(--color-primary-600) + ); border: none; box-shadow: 0 4px 14px color-mix(in srgb, var(--primary-color) 30%, transparent); diff --git a/apps/web/src/pages/auth/Register.css b/apps/web/src/pages/auth/Register.css index 1a9ec9d26..c3ec61896 100644 --- a/apps/web/src/pages/auth/Register.css +++ b/apps/web/src/pages/auth/Register.css @@ -31,7 +31,11 @@ font-size: 15px; font-weight: 700; border-radius: var(--radius-sm); - background: linear-gradient(135deg, var(--color-primary-500), var(--color-primary-600)); + background: linear-gradient( + 135deg, + var(--color-primary-500), + var(--color-primary-600) + ); border: none; box-shadow: 0 4px 14px color-mix(in srgb, var(--primary-color) 30%, transparent); diff --git a/apps/web/src/pages/editing-planner/EditingPlanner.css b/apps/web/src/pages/editing-planner/EditingPlanner.css index 9042b4ae4..f5d79e833 100644 --- a/apps/web/src/pages/editing-planner/EditingPlanner.css +++ b/apps/web/src/pages/editing-planner/EditingPlanner.css @@ -551,7 +551,11 @@ display: flex; align-items: center; justify-content: center; - background: linear-gradient(135deg, var(--ep-bg-card-hover, #1a1a2e), var(--ep-bg-deepest, #0a0a14)); + background: linear-gradient( + 135deg, + var(--ep-bg-card-hover, #1a1a2e), + var(--ep-bg-deepest, #0a0a14) + ); height: calc(100% - 20px); position: relative; } @@ -647,7 +651,11 @@ .ep-cover-image { width: 100%; height: 100%; - background: linear-gradient(135deg, var(--ep-bg-card-hover, #1a1a2e), var(--ep-bg-card, #13131f)); + background: linear-gradient( + 135deg, + var(--ep-bg-card-hover, #1a1a2e), + var(--ep-bg-card, #13131f) + ); display: flex; align-items: center; justify-content: center; @@ -880,7 +888,9 @@ .ep-clip-card.selected { border-color: var(--primary, #6366f1); - box-shadow: 0 0 0 2px var(--primary-soft, #eef2ff), 0 4px 12px rgba(99, 102, 241, 0.2); + box-shadow: + 0 0 0 2px var(--primary-soft, #eef2ff), + 0 4px 12px rgba(99, 102, 241, 0.2); } .ep-clip-card.drag-over { @@ -894,7 +904,11 @@ .ep-clip-thumbnail { height: 52px; - background: linear-gradient(135deg, var(--bg-secondary, #f8fafc), var(--border-light, #f1f5f9)); + background: linear-gradient( + 135deg, + var(--bg-secondary, #f8fafc), + var(--border-light, #f1f5f9) + ); display: flex; align-items: center; justify-content: center; @@ -1636,7 +1650,9 @@ stroke: var(--primary, #6366f1); stroke-width: 8; stroke-linecap: round; - transition: stroke-dashoffset 0.5s ease, stroke 0.3s; + transition: + stroke-dashoffset 0.5s ease, + stroke 0.3s; } .ep-gen-progress-pct { @@ -1778,7 +1794,9 @@ font-size: 11px; padding: 2px 4px; border-radius: 3px; - transition: color 0.2s, background 0.2s; + transition: + color 0.2s, + background 0.2s; display: inline-flex; align-items: center; gap: 3px; @@ -1793,11 +1811,15 @@ color: var(--primary-dark); } - /* Skeleton loading */ @keyframes ep-skeleton-pulse { - 0%, 100% { opacity: 0.4; } - 50% { opacity: 0.8; } + 0%, + 100% { + opacity: 0.4; + } + 50% { + opacity: 0.8; + } } .ep-skeleton { @@ -1957,8 +1979,12 @@ } @keyframes ep-fade-in { - from { opacity: 0; } - to { opacity: 1; } + from { + opacity: 0; + } + to { + opacity: 1; + } } .ep-modal { @@ -1971,8 +1997,14 @@ } @keyframes ep-scale-in { - from { opacity: 0; transform: scale(0.95); } - to { opacity: 1; transform: scale(1); } + from { + opacity: 0; + transform: scale(0.95); + } + to { + opacity: 1; + transform: scale(1); + } } .ep-modal-header { @@ -2054,4 +2086,3 @@ text-align: center; min-height: 80px; } - diff --git a/apps/web/src/pages/editing-planner/components/TimelinePanel.tsx b/apps/web/src/pages/editing-planner/components/TimelinePanel.tsx index d440f82e3..3cdd2b7b7 100755 --- a/apps/web/src/pages/editing-planner/components/TimelinePanel.tsx +++ b/apps/web/src/pages/editing-planner/components/TimelinePanel.tsx @@ -224,7 +224,9 @@ const TimelinePanel: React.FC = ({ {clips.length === 0 ? (
🎬
-
点击右侧 + 添加片段,或拖入素材
+
+ 点击右侧 + 添加片段,或拖入素材 +
) : ( clips.map((clip, idx) => ( @@ -270,7 +272,9 @@ const TimelinePanel: React.FC = ({ onClick={() => { if (currentMode !== "one_take") setShowAddPicker((v) => !v); }} - title={currentMode === "one_take" ? "一镜到底模式下不可添加" : "添加片段"} + title={ + currentMode === "one_take" ? "一镜到底模式下不可添加" : "添加片段" + } > {currentMode === "one_take" ? "🔒" : "+"} @@ -294,7 +298,9 @@ const TimelinePanel: React.FC = ({ {ASSET_TYPE_ICONS[asset.type] || "📁"} - {asset.name} + + {asset.name} + {asset.type === "image" ? "图片" diff --git a/apps/web/src/pages/generate/generate.css b/apps/web/src/pages/generate/generate.css index 296eec80b..76331e052 100644 --- a/apps/web/src/pages/generate/generate.css +++ b/apps/web/src/pages/generate/generate.css @@ -408,24 +408,41 @@ } .xx-clone-avatar.ready { - background: linear-gradient(135deg, var(--color-secondary-500), var(--color-secondary-600)); + background: linear-gradient( + 135deg, + var(--color-secondary-500), + var(--color-secondary-600) + ); color: var(--text-inverse); } .xx-clone-avatar.processing { - background: linear-gradient(135deg, var(--color-accent-500), var(--color-accent-600)); + background: linear-gradient( + 135deg, + var(--color-accent-500), + var(--color-accent-600) + ); color: var(--text-inverse); animation: xx-clone-pulse 2s ease-in-out infinite; } .xx-clone-avatar.failed { - background: linear-gradient(135deg, var(--color-gray-400), var(--color-gray-500)); + background: linear-gradient( + 135deg, + var(--color-gray-400), + var(--color-gray-500) + ); color: var(--text-inverse); } @keyframes xx-clone-pulse { - 0%, 100% { opacity: 1; } - 50% { opacity: 0.6; } + 0%, + 100% { + opacity: 1; + } + 50% { + opacity: 0.6; + } } .xx-clone-info { @@ -465,7 +482,11 @@ .xx-clone-progress-bar { height: 100%; - background: linear-gradient(90deg, var(--warning-color), var(--success-color)); + background: linear-gradient( + 90deg, + var(--warning-color), + var(--success-color) + ); border-radius: 3px; transition: width 0.5s ease; } @@ -474,8 +495,10 @@ width: 100%; background: repeating-linear-gradient( 90deg, - var(--warning-color) 0%, var(--warning-color) 25%, - var(--success-color) 25%, var(--success-color) 50%, + var(--warning-color) 0%, + var(--warning-color) 25%, + var(--success-color) 25%, + var(--success-color) 50%, var(--warning-color) 50% ); background-size: 60px 100%; @@ -483,8 +506,12 @@ } @keyframes xx-clone-progress-flow { - from { background-position: 0 0; } - to { background-position: 60px 0; } + from { + background-position: 0 0; + } + to { + background-position: 60px 0; + } } .xx-clone-progress-text { @@ -518,13 +545,23 @@ } @keyframes xx-fade { - 0%, 100% { opacity: 1; } - 50% { opacity: 0.7; } + 0%, + 100% { + opacity: 1; + } + 50% { + opacity: 0.7; + } } @keyframes xx-blink { - 0%, 100% { opacity: 1; } - 50% { opacity: 0.3; } + 0%, + 100% { + opacity: 1; + } + 50% { + opacity: 0.3; + } } /* ============================================================ @@ -640,7 +677,11 @@ aspect-ratio: 9 / 16; max-height: 400px; border-radius: var(--radius-md); - background: linear-gradient(135deg, var(--color-gray-900), var(--color-primary-900)); + background: linear-gradient( + 135deg, + var(--color-gray-900), + var(--color-primary-900) + ); display: grid; place-items: center; color: var(--text-inverse); @@ -654,7 +695,11 @@ content: ""; position: absolute; inset: 0; - background: radial-gradient(circle at 72% 28%, rgba(255, 255, 255, 0.2), transparent 40%); + background: radial-gradient( + circle at 72% 28%, + rgba(255, 255, 255, 0.2), + transparent 40% + ); pointer-events: none; } @@ -777,7 +822,11 @@ .xx-progress-bar-fill { height: 100%; - background: linear-gradient(90deg, var(--color-primary-500), var(--color-primary-600)); + background: linear-gradient( + 90deg, + var(--color-primary-500), + var(--color-primary-600) + ); border-radius: 3px; transition: width 0.3s ease; } diff --git a/apps/web/src/pages/my-voices/my-voices.css b/apps/web/src/pages/my-voices/my-voices.css index 3561799a2..d24d55155 100644 --- a/apps/web/src/pages/my-voices/my-voices.css +++ b/apps/web/src/pages/my-voices/my-voices.css @@ -112,19 +112,11 @@ } .xx-mv-card--processing { - border-color: color-mix( - in srgb, - var(--accent-color) 30%, - transparent - ); + border-color: color-mix(in srgb, var(--accent-color) 30%, transparent); } .xx-mv-card--failed { - border-color: color-mix( - in srgb, - var(--error-color) 25%, - transparent - ); + border-color: color-mix(in srgb, var(--error-color) 25%, transparent); opacity: 0.85; } diff --git a/apps/web/src/pages/voice-clone/voice-clone.css b/apps/web/src/pages/voice-clone/voice-clone.css index a2914ee9d..1eca44c12 100644 --- a/apps/web/src/pages/voice-clone/voice-clone.css +++ b/apps/web/src/pages/voice-clone/voice-clone.css @@ -36,8 +36,7 @@ .vc-card:hover { border-color: var(--primary-light); - box-shadow: 0 4px 20px - color-mix(in srgb, var(--primary-color) 8%); + box-shadow: 0 4px 20px color-mix(in srgb, var(--primary-color) 8%); } /* 右上角操作按钮 */ @@ -103,7 +102,7 @@ width: 52px; height: 52px; border-radius: 50%; - background: linear-gradient(135deg, var(--accent-color))); + background: linear-gradient(135deg, var(--accent-color)); display: grid; place-items: center; font-size: 22px; @@ -282,7 +281,7 @@ font-weight: 500; background: var(--bg-card); border: 1px solid var(--line); - box-shadow: 0 4px 12px var(--shadow-sm)); + box-shadow: 0 4px 12px var(--shadow-sm); animation: vc-toast-in 0.25s ease-out; display: flex; align-items: center; @@ -318,7 +317,7 @@ z-index: 1000; display: grid; place-items: center; - background: var(--overlay-bg)); + background: var(--overlay-bg); animation: vc-fade-in 0.2s; } @@ -337,7 +336,7 @@ padding: 24px; width: 400px; max-width: calc(100vw - 40px); - box-shadow: 0 20px 60px var(--shadow-lg)); + box-shadow: 0 20px 60px var(--shadow-lg); animation: vc-scale-in 0.2s ease-out; }