feat(web): P0-5 剪辑计划编辑器V21全面浅色化（第四波）
Deploy / Staging E2E Tests (push) Has been skipped
Deploy / Build Production Runtime Images (push) Has been skipped
Deploy / Deploy Production (push) Has been skipped
Deploy / Production Browser E2E (push) Has been skipped
Deploy / Deploy Staging (push) Failing after 85h40m57s
CI/CD Pipeline / Frontend Lint (push) Failing after 85h41m25s
CI/CD Pipeline / Validate Code Quality And Tests (push) Failing after 85h41m31s
Deploy / Staging E2E Tests (push) Has been skipped
Deploy / Build Production Runtime Images (push) Has been skipped
Deploy / Deploy Production (push) Has been skipped
Deploy / Production Browser E2E (push) Has been skipped
Deploy / Deploy Staging (push) Failing after 85h40m57s
CI/CD Pipeline / Frontend Lint (push) Failing after 85h41m25s
CI/CD Pipeline / Validate Code Quality And Tests (push) Failing after 85h41m31s
左侧面板： - 搜索框：36px高度 + bg-secondary背景 + radius-xs + focus ring - 分类chip：胶囊样式(radius-full) + 12px字号 + primary激活态 - 模板卡片：radius-sm + hover上浮+阴影 + active用primary-soft - 模板标签/元信息：全部对齐V21字号色阶 时间线区域： - 轨道背景：bg-secondary(浅灰) + 16px内边距 - 片段卡片：白色背景 + radius-sm(14px) + hover上浮阴影 - 选中态：2px primary-soft ring + 外阴影 - 缩略图：浅灰渐变 + 20px图标 - 删除按钮：红色+白边+阴影 - 播放头：primary色 - 一镜到底提示：accent色系（琥珀色） 弹窗系统： - 通用Modal：radius-lg(24px) + 白色背景 + 毛玻璃遮罩 - 生成进度：环形进度条primary色 + 进度条primary色 - 生成结果：更大的图标和间距 - 历史表格：浅色分割线 + hover行背景 + 胶囊状态标签 其他： - 骨架屏：bg-secondary + radius-sm - 按钮active态统一用primary-soft - danger按钮统一用全局danger变量 - 手机预览屏幕内部保持暗色（模拟屏幕效果），但强调色换为primary
This commit is contained in:
xiaoxia
@@ -145,12 +145,12 @@
|
||||
}
|
||||
|
||||
.ep-btn-danger:hover {
|
||||
background: color-mix(in srgb, var(--ep-danger, #ff4757), white 20%);
|
||||
background: color-mix(in srgb, var(--danger, #ef4444), white 20%);
|
||||
}
|
||||
|
||||
.ep-btn-danger:active {
|
||||
transform: scale(0.96);
|
||||
background: color-mix(in srgb, var(--ep-danger, #ff4757), black 10%);
|
||||
background: color-mix(in srgb, var(--danger, #ef4444), black 10%);
|
||||
}
|
||||
|
||||
.ep-btn-danger:disabled {
|
||||
@@ -244,147 +244,157 @@
|
||||
|
||||
/* 搜索 */
|
||||
.ep-search-wrap {
|
||||
padding: 8px;
|
||||
padding: 12px 16px 8px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.ep-search-input {
|
||||
width: 100%;
|
||||
height: 28px;
|
||||
background: var(--ep-bg-card, #13131f);
|
||||
border: 1px solid var(--ep-border, #1f1f30);
|
||||
border-radius: 4px;
|
||||
padding: 0 8px 0 28px;
|
||||
color: var(--ep-text-primary, #e8e8f0);
|
||||
height: 36px;
|
||||
background: var(--bg-secondary, #f8fafc);
|
||||
border: 1px solid var(--border-color, #e2e8f0);
|
||||
border-radius: var(--radius-xs, 8px);
|
||||
padding: 0 12px 0 36px;
|
||||
color: var(--text-primary, #1e293b);
|
||||
font-size: 12px;
|
||||
outline: none;
|
||||
transition: border-color 0.2s ease;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.ep-search-input::placeholder {
|
||||
color: var(--ep-text-muted, #4b5563);
|
||||
color: var(--text-tertiary, #94a3b8);
|
||||
}
|
||||
|
||||
.ep-search-input:focus {
|
||||
border-color: var(--ep-accent, #6c5ce7);
|
||||
border-color: var(--primary, #6366f1);
|
||||
background: var(--bg-primary, #ffffff);
|
||||
box-shadow: 0 0 0 3px var(--primary-soft, #eef2ff);
|
||||
}
|
||||
|
||||
.ep-search-icon {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
left: 28px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: var(--ep-text-muted, #4b5563);
|
||||
font-size: 12px;
|
||||
color: var(--text-tertiary, #94a3b8);
|
||||
font-size: 14px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Chip 筛选 */
|
||||
.ep-filter-chips {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
padding: 0 8px 8px;
|
||||
gap: 6px;
|
||||
padding: 0 16px 12px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.ep-filter-chip {
|
||||
padding: 3px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 11px;
|
||||
background: var(--ep-bg-card, #13131f);
|
||||
color: var(--ep-text-secondary, #9ca3af);
|
||||
border: 1px solid var(--ep-border, #1f1f30);
|
||||
padding: 5px 12px;
|
||||
border-radius: var(--radius-full, 9999px);
|
||||
font-size: 12px;
|
||||
background: var(--bg-secondary, #f8fafc);
|
||||
color: var(--text-secondary, #64748b);
|
||||
border: 1px solid var(--border-color, #e2e8f0);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.ep-filter-chip:hover {
|
||||
border-color: var(--ep-accent, #6c5ce7);
|
||||
color: var(--ep-text-primary, #e8e8f0);
|
||||
border-color: var(--primary, #6366f1);
|
||||
color: var(--primary, #6366f1);
|
||||
background: var(--primary-soft, #eef2ff);
|
||||
}
|
||||
|
||||
.ep-filter-chip.active {
|
||||
background: var(--ep-accent, #6c5ce7);
|
||||
background: var(--primary, #6366f1);
|
||||
color: #fff;
|
||||
border-color: var(--ep-accent, #6c5ce7);
|
||||
border-color: var(--primary, #6366f1);
|
||||
}
|
||||
|
||||
/* 模板列表 */
|
||||
.ep-template-list {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 0 8px 8px;
|
||||
padding: 0 16px 16px;
|
||||
}
|
||||
|
||||
.ep-template-list::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.ep-template-list::-webkit-scrollbar-thumb {
|
||||
background: var(--ep-border, #1f1f30);
|
||||
border-radius: 2px;
|
||||
background: var(--border-color, #e2e8f0);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.ep-template-card {
|
||||
background: var(--ep-bg-card, #13131f);
|
||||
border: 1px solid var(--ep-border, #1f1f30);
|
||||
border-radius: 6px;
|
||||
padding: 10px;
|
||||
margin-bottom: 6px;
|
||||
background: var(--bg-primary, #ffffff);
|
||||
border: 1px solid var(--border-color, #e2e8f0);
|
||||
border-radius: var(--radius-sm, 14px);
|
||||
padding: 12px;
|
||||
margin-bottom: 8px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.ep-template-card:hover {
|
||||
border-color: var(--ep-accent, #6c5ce7);
|
||||
background: var(--ep-bg-card-hover, #1a1a2e);
|
||||
border-color: var(--primary, #6366f1);
|
||||
background: var(--primary-soft, #eef2ff);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(99, 102, 241, 0.1);
|
||||
}
|
||||
|
||||
.ep-template-card.active {
|
||||
border-color: var(--ep-accent, #6c5ce7);
|
||||
background: rgba(108, 92, 231, 0.1);
|
||||
border-color: var(--primary, #6366f1);
|
||||
background: var(--primary-soft, #eef2ff);
|
||||
box-shadow: 0 2px 8px rgba(99, 102, 241, 0.15);
|
||||
}
|
||||
|
||||
.ep-template-card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 6px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.ep-template-card-name {
|
||||
font-size: 12px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--ep-text-primary, #e8e8f0);
|
||||
color: var(--text-primary, #1e293b);
|
||||
}
|
||||
|
||||
.ep-template-card-mode {
|
||||
font-size: 10px;
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
background: rgba(108, 92, 231, 0.15);
|
||||
color: var(--ep-accent, #6c5ce7);
|
||||
font-size: 11px;
|
||||
padding: 3px 8px;
|
||||
border-radius: var(--radius-xs, 8px);
|
||||
background: var(--primary-soft, #eef2ff);
|
||||
color: var(--primary, #6366f1);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.ep-template-card-meta {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
font-size: 10px;
|
||||
color: var(--ep-text-muted, #4b5563);
|
||||
gap: 12px;
|
||||
font-size: 11px;
|
||||
color: var(--text-tertiary, #94a3b8);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.ep-template-card-tags {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
margin-top: 6px;
|
||||
gap: 6px;
|
||||
margin-top: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.ep-template-tag {
|
||||
font-size: 10px;
|
||||
padding: 1px 6px;
|
||||
border-radius: 3px;
|
||||
background: var(--ep-bg-card-hover, #1a1a2e);
|
||||
color: var(--ep-text-secondary, #9ca3af);
|
||||
font-size: 11px;
|
||||
padding: 2px 8px;
|
||||
border-radius: var(--radius-xs, 8px);
|
||||
background: var(--bg-secondary, #f8fafc);
|
||||
color: var(--text-secondary, #64748b);
|
||||
}
|
||||
|
||||
/* Loading / Empty */
|
||||
@@ -394,18 +404,18 @@
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 32px 16px;
|
||||
color: var(--ep-text-muted, #4b5563);
|
||||
padding: 40px 16px;
|
||||
color: var(--text-tertiary, #94a3b8);
|
||||
font-size: 12px;
|
||||
gap: 6px;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.ep-loading > svg,
|
||||
.ep-empty > svg {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
color: var(--ep-text-muted, #4b5563);
|
||||
opacity: 0.6;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
color: var(--text-tertiary, #94a3b8);
|
||||
opacity: 0.5;
|
||||
animation: ep-skeleton-pulse 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@@ -483,7 +493,7 @@
|
||||
}
|
||||
|
||||
.ep-phone-play-btn:hover {
|
||||
background: var(--ep-accent, #6c5ce7);
|
||||
background: var(--primary, #6366f1);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
@@ -493,12 +503,12 @@
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 3px;
|
||||
background: var(--ep-border, #1f1f30);
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.ep-phone-progress-fill {
|
||||
height: 100%;
|
||||
background: var(--ep-accent, #6c5ce7);
|
||||
background: var(--primary, #6366f1);
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
@@ -575,7 +585,7 @@
|
||||
}
|
||||
|
||||
.ep-cover-ai-btn:hover {
|
||||
background: var(--ep-accent, #6c5ce7);
|
||||
background: var(--primary-hover, #4f46e5);
|
||||
}
|
||||
|
||||
.ep-cover-ai-btn:disabled {
|
||||
@@ -587,33 +597,35 @@
|
||||
.ep-cover-tags {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.ep-cover-tag {
|
||||
height: 28px;
|
||||
padding: 0 12px;
|
||||
border-radius: 4px;
|
||||
font-size: 11px;
|
||||
background: var(--ep-bg-card, #13131f);
|
||||
color: var(--ep-text-secondary, #9ca3af);
|
||||
border: 1px solid var(--ep-border, #1f1f30);
|
||||
height: 32px;
|
||||
padding: 0 14px;
|
||||
border-radius: var(--radius-xs, 8px);
|
||||
font-size: 12px;
|
||||
background: var(--bg-secondary, #f8fafc);
|
||||
color: var(--text-secondary, #64748b);
|
||||
border: 1px solid var(--border-color, #e2e8f0);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
white-space: nowrap;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.ep-cover-tag:hover {
|
||||
border-color: var(--ep-accent, #6c5ce7);
|
||||
color: var(--ep-text-primary, #e8e8f0);
|
||||
border-color: var(--primary, #6366f1);
|
||||
color: var(--primary, #6366f1);
|
||||
background: var(--primary-soft, #eef2ff);
|
||||
}
|
||||
|
||||
.ep-cover-tag.active {
|
||||
background: var(--ep-accent, #6c5ce7);
|
||||
background: var(--primary, #6366f1);
|
||||
color: #fff;
|
||||
border-color: var(--ep-accent, #6c5ce7);
|
||||
border-color: var(--primary, #6366f1);
|
||||
}
|
||||
|
||||
/* ─── 下半部：水平时间线（V21风格）─── */
|
||||
@@ -712,7 +724,7 @@
|
||||
left: 0;
|
||||
width: 1px;
|
||||
height: 6px;
|
||||
background: var(--ep-border, #1f1f30);
|
||||
background: var(--border-color, #e2e2f0);
|
||||
}
|
||||
|
||||
/* 水平片段轨道 — 带底色 */
|
||||
@@ -721,30 +733,30 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 12px;
|
||||
padding: 12px 16px;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
background: var(--ep-bg-dark, #0e0e1a);
|
||||
background: var(--bg-secondary, #f8fafc);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.ep-clip-track::-webkit-scrollbar {
|
||||
height: 4px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
.ep-clip-track::-webkit-scrollbar-thumb {
|
||||
background: var(--ep-border, #1f1f30);
|
||||
border-radius: 2px;
|
||||
background: var(--border-color, #e2e2e2);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
/* 水平片段卡片 — 统一高度96px、圆角6px、hover高亮 */
|
||||
/* 水平片段卡片 — 统一高度96px、圆角、hover高亮 */
|
||||
.ep-clip-card {
|
||||
width: 100px;
|
||||
min-width: 100px;
|
||||
height: 96px;
|
||||
background: var(--ep-bg-card, #13131f);
|
||||
border: 1px solid var(--ep-border, #1f1f30);
|
||||
border-radius: 6px;
|
||||
background: var(--bg-primary, #ffffff);
|
||||
border: 1px solid var(--border-color, #e2e2e2);
|
||||
border-radius: var(--radius-sm, 14px);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
display: flex;
|
||||
@@ -754,19 +766,19 @@
|
||||
}
|
||||
|
||||
.ep-clip-card:hover {
|
||||
border-color: var(--ep-text-muted, #4b5563);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
|
||||
border-color: var(--primary, #6366f1);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15);
|
||||
}
|
||||
|
||||
.ep-clip-card.selected {
|
||||
border-color: var(--ep-accent, #6c5ce7);
|
||||
box-shadow: 0 0 0 1px var(--ep-accent, #6c5ce7), 0 2px 8px rgba(108, 92, 231, 0.2);
|
||||
border-color: var(--primary, #6366f1);
|
||||
box-shadow: 0 0 0 2px var(--primary-soft, #eef2ff), 0 4px 12px rgba(99, 102, 241, 0.2);
|
||||
}
|
||||
|
||||
.ep-clip-card.drag-over {
|
||||
border-color: var(--ep-accent, #6c5ce7);
|
||||
background: rgba(108, 92, 231, 0.08);
|
||||
border-color: var(--primary, #6366f1);
|
||||
background: var(--primary-soft, #eef2ff);
|
||||
}
|
||||
|
||||
.ep-clip-card.dragging {
|
||||
@@ -775,16 +787,16 @@
|
||||
|
||||
.ep-clip-thumbnail {
|
||||
height: 52px;
|
||||
background: linear-gradient(135deg, var(--ep-bg-card-hover, #1a1a2e), var(--ep-bg-dark, #0e0e1a));
|
||||
background: linear-gradient(135deg, var(--bg-secondary, #f8fafc), var(--border-light, #f1f5f9));
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 18px;
|
||||
font-size: 20px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.ep-clip-info {
|
||||
padding: 4px 6px;
|
||||
padding: 6px 8px;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -792,27 +804,28 @@
|
||||
}
|
||||
|
||||
.ep-clip-name {
|
||||
font-size: 10px;
|
||||
color: var(--ep-text-primary, #e8e8f0);
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
color: var(--text-primary, #1e293b);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.ep-clip-duration {
|
||||
font-size: 9px;
|
||||
color: var(--ep-text-muted, #4b5563);
|
||||
font-size: 10px;
|
||||
color: var(--text-tertiary, #94a3b8);
|
||||
}
|
||||
|
||||
.ep-clip-remove {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
right: 2px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
top: 4px;
|
||||
right: 4px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 71, 87, 0.8);
|
||||
border: none;
|
||||
background: rgba(239, 68, 68, 0.9);
|
||||
border: 2px solid #fff;
|
||||
color: #fff;
|
||||
font-size: 10px;
|
||||
cursor: pointer;
|
||||
@@ -820,6 +833,7 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
line-height: 1;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.ep-clip-card:hover .ep-clip-remove {
|
||||
@@ -832,7 +846,7 @@
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 2px;
|
||||
background: var(--ep-accent, #6c5ce7);
|
||||
background: var(--primary, #6366f1);
|
||||
z-index: 10;
|
||||
pointer-events: none;
|
||||
}
|
||||
@@ -844,7 +858,7 @@
|
||||
left: -4px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: var(--ep-accent, #6c5ce7);
|
||||
background: var(--primary, #6366f1);
|
||||
clip-path: polygon(0 0, 100% 0, 50% 100%);
|
||||
}
|
||||
|
||||
@@ -854,17 +868,19 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--ep-text-muted, #4b5563);
|
||||
color: var(--text-tertiary, #94a3b8);
|
||||
font-size: 12px;
|
||||
min-height: 96px;
|
||||
}
|
||||
|
||||
/* 一镜到底提示 */
|
||||
.ep-one-take-hint {
|
||||
padding: 4px 12px;
|
||||
background: rgba(255, 165, 2, 0.08);
|
||||
border-bottom: 1px solid rgba(255, 165, 2, 0.15);
|
||||
color: #ffa502;
|
||||
padding: 6px 16px;
|
||||
background: var(--color-accent-50, #fffbeb);
|
||||
border-bottom: 1px solid var(--color-accent-100, #fef3c7);
|
||||
color: var(--accent-color, #f59e0b);
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
font-size: 11px;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -1185,27 +1201,29 @@
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════
|
||||
弹窗补充样式
|
||||
弹窗补充样式（V21浅色主题）
|
||||
═══════════════════════════════════════ */
|
||||
|
||||
.ep-modal-field {
|
||||
margin-bottom: 12px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.ep-modal-field label {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
color: var(--ep-text-secondary, #9ca3af);
|
||||
margin-bottom: 4px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: var(--text-primary, #1e293b);
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.ep-modal-info {
|
||||
padding: 8px 12px;
|
||||
background: var(--ep-bg-card, #13131f);
|
||||
border-radius: 4px;
|
||||
padding: 12px 14px;
|
||||
background: var(--bg-secondary, #f8fafc);
|
||||
border-radius: var(--radius-xs, 8px);
|
||||
font-size: 12px;
|
||||
color: var(--ep-text-secondary, #9ca3af);
|
||||
color: var(--text-secondary, #64748b);
|
||||
margin-top: 8px;
|
||||
border: 1px solid var(--border-color, #e2e8f0);
|
||||
}
|
||||
|
||||
/* 生成弹窗 */
|
||||
@@ -1215,42 +1233,46 @@
|
||||
|
||||
.ep-gen-field-label {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
color: var(--ep-text-secondary, #9ca3af);
|
||||
margin-bottom: 6px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: var(--text-primary, #1e293b);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.ep-gen-duration-input {
|
||||
width: 100%;
|
||||
height: 32px;
|
||||
background: var(--ep-bg-card, #13131f);
|
||||
border: 1px solid var(--ep-border, #1f1f30);
|
||||
border-radius: 4px;
|
||||
padding: 0 10px;
|
||||
color: var(--ep-text-primary, #e8e8f0);
|
||||
font-size: 13px;
|
||||
height: 40px;
|
||||
background: var(--bg-primary, #ffffff);
|
||||
border: 1px solid var(--border-color, #e2e8f0);
|
||||
border-radius: var(--radius-xs, 8px);
|
||||
padding: 0 12px;
|
||||
color: var(--text-primary, #1e293b);
|
||||
font-size: 14px;
|
||||
outline: none;
|
||||
margin-bottom: 12px;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.ep-gen-duration-input:focus {
|
||||
border-color: var(--ep-accent, #6c5ce7);
|
||||
border-color: var(--primary, #6366f1);
|
||||
box-shadow: 0 0 0 3px var(--primary-soft, #eef2ff);
|
||||
}
|
||||
|
||||
.ep-gen-estimate {
|
||||
font-size: 12px;
|
||||
color: var(--ep-text-secondary, #9ca3af);
|
||||
padding: 8px 12px;
|
||||
background: var(--ep-bg-card, #13131f);
|
||||
border-radius: 4px;
|
||||
color: var(--text-secondary, #64748b);
|
||||
padding: 12px 14px;
|
||||
background: var(--bg-secondary, #f8fafc);
|
||||
border-radius: var(--radius-xs, 8px);
|
||||
border: 1px solid var(--border-color, #e2e8f0);
|
||||
}
|
||||
|
||||
.ep-gen-progress {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 16px 0;
|
||||
gap: 16px;
|
||||
padding: 24px 0;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.ep-gen-progress-ring-wrap {
|
||||
@@ -1267,12 +1289,13 @@
|
||||
|
||||
.ep-gen-progress-ring-bg {
|
||||
fill: none;
|
||||
stroke: var(--ep-border, #1f1f30);
|
||||
stroke: var(--border-color, #e2e8f0);
|
||||
stroke-width: 8;
|
||||
}
|
||||
|
||||
.ep-gen-progress-ring-fill {
|
||||
fill: none;
|
||||
stroke: var(--primary, #6366f1);
|
||||
stroke-width: 8;
|
||||
stroke-linecap: round;
|
||||
transition: stroke-dashoffset 0.5s ease, stroke 0.3s;
|
||||
@@ -1285,76 +1308,80 @@
|
||||
transform: translate(-50%, -50%);
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary, #1e293b);
|
||||
}
|
||||
|
||||
.ep-gen-step-text {
|
||||
font-size: 14px;
|
||||
color: var(--ep-text-primary, #e8e8f0);
|
||||
color: var(--text-primary, #1e293b);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.ep-gen-progress-bar {
|
||||
width: 100%;
|
||||
height: 6px;
|
||||
background: var(--ep-border, #1f1f30);
|
||||
background: var(--border-color, #e2e8f0);
|
||||
border-radius: 3px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.ep-gen-progress-bar-fill {
|
||||
height: 100%;
|
||||
background: var(--primary, #6366f1);
|
||||
border-radius: 3px;
|
||||
transition: width 0.5s ease;
|
||||
}
|
||||
|
||||
.ep-gen-task-id {
|
||||
font-size: 11px;
|
||||
color: var(--ep-text-muted, #4b5563);
|
||||
color: var(--text-tertiary, #94a3b8);
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.ep-gen-result {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 24px 0;
|
||||
padding: 32px 0;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.ep-gen-result-icon {
|
||||
font-size: 48px;
|
||||
font-size: 56px;
|
||||
}
|
||||
|
||||
.ep-gen-result-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: var(--ep-text-primary, #e8e8f0);
|
||||
color: var(--text-primary, #1e293b);
|
||||
}
|
||||
|
||||
.ep-gen-result-msg {
|
||||
font-size: 12px;
|
||||
color: var(--ep-text-secondary, #9ca3af);
|
||||
font-size: 13px;
|
||||
color: var(--text-secondary, #64748b);
|
||||
}
|
||||
|
||||
.ep-gen-result-msg--error {
|
||||
color: var(--ep-danger, #ff4757);
|
||||
color: var(--danger, #ef4444);
|
||||
}
|
||||
|
||||
.ep-gen-result-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-top: 8px;
|
||||
gap: 10px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.ep-btn-primary:active {
|
||||
background: #5a4bd6;
|
||||
background: var(--primary-dark, #4338ca);
|
||||
transform: scale(0.97);
|
||||
}
|
||||
.ep-btn-secondary:active {
|
||||
background: #252540;
|
||||
border-color: var(--ep-accent-hover, #7c6cf7);
|
||||
color: #fff;
|
||||
background: var(--bg-secondary, #f8fafc);
|
||||
border-color: var(--primary, #6366f1);
|
||||
color: var(--primary, #6366f1);
|
||||
}
|
||||
.ep-btn-danger:active {
|
||||
background: #e03e4e;
|
||||
background: #dc2626;
|
||||
transform: scale(0.97);
|
||||
}
|
||||
|
||||
@@ -1372,19 +1399,19 @@
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.ep-cover-ai-btn:active {
|
||||
background: #5a4bd6;
|
||||
background: var(--primary-dark, #4338ca);
|
||||
transform: scale(0.96);
|
||||
}
|
||||
.ep-filter-chip:active {
|
||||
transform: scale(0.95);
|
||||
background: var(--ep-bg-card-hover, #1a1a2e);
|
||||
background: var(--primary-soft, #eef2ff);
|
||||
}
|
||||
.ep-cover-tag:active {
|
||||
transform: scale(0.96);
|
||||
background: var(--ep-bg-card-hover, #1a1a2e);
|
||||
background: var(--primary-soft, #eef2ff);
|
||||
}
|
||||
.ep-timeline-action-btn:active {
|
||||
background: var(--ep-bg-card-hover, #1a1a2e);
|
||||
background: var(--primary-soft, #eef2ff);
|
||||
transform: scale(0.96);
|
||||
}
|
||||
|
||||
@@ -1444,8 +1471,8 @@
|
||||
|
||||
.ep-skeleton-item {
|
||||
height: 48px;
|
||||
background: var(--ep-bg-card, #13131f);
|
||||
border-radius: 6px;
|
||||
background: var(--bg-secondary, #f8fafc);
|
||||
border-radius: var(--radius-sm, 14px);
|
||||
animation: ep-skeleton-pulse 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@@ -1491,7 +1518,7 @@
|
||||
|
||||
/* ═══ 预览区 — 补充样式 ═══ */
|
||||
.ep-phone-empty-hint {
|
||||
color: var(--ep-text-muted, #4b5563);
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
font-size: var(--font-size-xs, 11px);
|
||||
}
|
||||
|
||||
@@ -1520,8 +1547,8 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 24px;
|
||||
color: var(--ep-text-muted, #4b5563);
|
||||
padding: 32px;
|
||||
color: var(--text-tertiary, #94a3b8);
|
||||
font-size: var(--font-size-sm, 13px);
|
||||
}
|
||||
|
||||
@@ -1531,43 +1558,52 @@
|
||||
}
|
||||
|
||||
.ep-gh-table-header-row {
|
||||
border-bottom: 1px solid var(--ep-border, #1f1f30);
|
||||
border-bottom: 1px solid var(--border-color, #e2e8f0);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.ep-gh-th {
|
||||
padding: 8px 12px;
|
||||
padding: 10px 12px;
|
||||
font-size: var(--font-size-xs, 11px);
|
||||
color: var(--ep-text-secondary, #9ca3af);
|
||||
font-weight: 500;
|
||||
color: var(--text-secondary, #64748b);
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.ep-gh-table-row {
|
||||
border-bottom: 1px solid var(--ep-border, #1f1f30);
|
||||
border-bottom: 1px solid var(--border-light, #f1f5f9);
|
||||
transition: background 0.2s ease;
|
||||
}
|
||||
|
||||
.ep-gh-table-row:hover {
|
||||
background: var(--bg-secondary, #f8fafc);
|
||||
}
|
||||
|
||||
.ep-gh-td {
|
||||
padding: 8px 12px;
|
||||
padding: 10px 12px;
|
||||
font-size: var(--font-size-sm, 13px);
|
||||
color: var(--ep-text-primary, #e8e8f0);
|
||||
color: var(--text-primary, #1e293b);
|
||||
}
|
||||
|
||||
.ep-gh-td-id {
|
||||
font-family: "SF Mono", "Fira Code", monospace;
|
||||
font-size: var(--font-size-xs, 11px);
|
||||
color: var(--text-secondary, #64748b);
|
||||
}
|
||||
|
||||
.ep-gh-td-time {
|
||||
color: var(--ep-text-secondary, #9ca3af);
|
||||
color: var(--text-tertiary, #94a3b8);
|
||||
font-size: var(--font-size-xs, 11px);
|
||||
}
|
||||
|
||||
.ep-gh-status-tag {
|
||||
display: inline-block;
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
padding: 3px 10px;
|
||||
border-radius: var(--radius-full, 9999px);
|
||||
font-size: var(--font-size-xs, 11px);
|
||||
line-height: 1.4;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* ═══ 生成历史弹窗 — 基础 Modal 结构 ═══ */
|
||||
@@ -1577,8 +1613,9 @@
|
||||
z-index: 1050;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
background: rgba(0, 0, 0, 0.55);
|
||||
background: var(--bg-overlay, rgba(15, 23, 42, 0.45));
|
||||
animation: ep-fade-in 0.2s ease;
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
@keyframes ep-fade-in {
|
||||
@@ -1587,10 +1624,10 @@
|
||||
}
|
||||
|
||||
.ep-modal {
|
||||
background: var(--ep-bg-card, #13131f);
|
||||
border: 1px solid var(--ep-border, #1f1f30);
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
|
||||
background: var(--bg-primary, #ffffff);
|
||||
border: 1px solid var(--border-color, #e2e8f0);
|
||||
border-radius: var(--radius-lg, 24px);
|
||||
box-shadow: 0 20px 60px rgba(15, 23, 42, 0.15);
|
||||
animation: ep-scale-in 0.2s ease-out;
|
||||
overflow: hidden;
|
||||
}
|
||||
@@ -1604,51 +1641,51 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px 20px;
|
||||
border-bottom: 1px solid var(--ep-border, #1f1f30);
|
||||
padding: 20px 24px;
|
||||
border-bottom: 1px solid var(--border-light, #f1f5f9);
|
||||
}
|
||||
|
||||
.ep-modal-header h3 {
|
||||
margin: 0;
|
||||
font-size: 15px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--ep-text-primary, #e8e8f0);
|
||||
color: var(--text-primary, #1e293b);
|
||||
}
|
||||
|
||||
.ep-modal-close {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
border-radius: var(--radius-xs, 8px);
|
||||
background: transparent;
|
||||
color: var(--ep-text-secondary, #9ca3af);
|
||||
font-size: 14px;
|
||||
color: var(--text-secondary, #64748b);
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.ep-modal-close:hover {
|
||||
background: var(--ep-bg-card-hover, #1a1a2e);
|
||||
color: var(--ep-text-primary, #e8e8f0);
|
||||
background: var(--bg-secondary, #f8fafc);
|
||||
color: var(--text-primary, #1e293b);
|
||||
}
|
||||
|
||||
.ep-modal-close:active {
|
||||
transform: scale(0.92);
|
||||
background: var(--ep-border, #1f1f30);
|
||||
background: var(--border-color, #e2e8f0);
|
||||
}
|
||||
|
||||
.ep-modal-body {
|
||||
padding: 16px 20px;
|
||||
padding: 20px 24px;
|
||||
}
|
||||
|
||||
.ep-modal-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
padding: 12px 20px;
|
||||
border-top: 1px solid var(--ep-border, #1f1f30);
|
||||
gap: 10px;
|
||||
padding: 16px 24px;
|
||||
border-top: 1px solid var(--border-light, #f1f5f9);
|
||||
}
|
||||
|
||||
/* 状态标签变体 */
|
||||
|
||||
Reference in New Issue
Block a user