feat(web): P0-5 剪辑计划编辑器V21右侧属性面板浅色化
CI/CD Pipeline / Validate Code Quality And Tests (push) Has been cancelled
CI/CD Pipeline / Frontend Lint (push) Has been cancelled
Deploy / Deploy Staging (push) Has been cancelled
Deploy / Staging E2E Tests (push) Has been cancelled
Deploy / Build Production Runtime Images (push) Has been cancelled
Deploy / Deploy Production (push) Has been cancelled
Deploy / Production Browser E2E (push) Has been cancelled
CI/CD Pipeline / Validate Code Quality And Tests (push) Has been cancelled
CI/CD Pipeline / Frontend Lint (push) Has been cancelled
Deploy / Deploy Staging (push) Has been cancelled
Deploy / Staging E2E Tests (push) Has been cancelled
Deploy / Build Production Runtime Images (push) Has been cancelled
Deploy / Deploy Production (push) Has been cancelled
Deploy / Production Browser E2E (push) Has been cancelled
右侧面板全部对齐V21浅色主题： - 标题设置/字幕设置/BGM设置/片段详情 四大区块浅色化 - 表单select: 32px高度 + radius-xs + 下拉箭头图标 + focus ring - Toggle开关: 40x22 + 白色knob带阴影 + primary色激活 - Slider滑块: 16px拇指 + 白色边框 + 阴影 - 样式按钮组: 32px方形 + radius-xs + hover/active态 - AI推荐按钮: 36px高度 + gradient-primary + hover上浮效果 - 片段详情卡片: bg-secondary背景 + radius-sm + 底部分隔线 - 全部颜色走全局CSS变量，零硬编码
This commit is contained in:
xiaoxia
@@ -894,13 +894,15 @@
|
||||
/* 设置区块 */
|
||||
.ep-settings-section {
|
||||
margin-bottom: 16px;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.ep-section-title {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--ep-text-primary, #e8e8f0);
|
||||
margin-bottom: 10px;
|
||||
color: var(--text-primary, #1e293b);
|
||||
margin-bottom: 12px;
|
||||
margin-top: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
@@ -912,37 +914,44 @@
|
||||
|
||||
/* 表单字段 */
|
||||
.ep-field {
|
||||
margin-bottom: 8px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.ep-field-label {
|
||||
display: block;
|
||||
font-size: 11px;
|
||||
color: var(--ep-text-secondary, #9ca3af);
|
||||
margin-bottom: 4px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: var(--text-secondary, #64748b);
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.ep-form-input,
|
||||
.ep-form-select {
|
||||
width: 100%;
|
||||
height: 28px;
|
||||
background: var(--ep-bg-card, #13131f);
|
||||
border: 1px solid var(--ep-border, #1f1f30);
|
||||
border-radius: 4px;
|
||||
padding: 0 8px;
|
||||
color: var(--ep-text-primary, #e8e8f0);
|
||||
height: 32px;
|
||||
background: var(--bg-primary, #ffffff);
|
||||
border: 1px solid var(--border-color, #e2e8f0);
|
||||
border-radius: var(--radius-xs, 8px);
|
||||
padding: 0 10px;
|
||||
color: var(--text-primary, #1e293b);
|
||||
font-size: 12px;
|
||||
outline: none;
|
||||
transition: border-color 0.2s ease;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.ep-form-input:focus,
|
||||
.ep-form-select:focus {
|
||||
border-color: var(--ep-accent, #6c5ce7);
|
||||
border-color: var(--primary, #6366f1);
|
||||
box-shadow: 0 0 0 3px var(--primary-soft, #eef2ff);
|
||||
}
|
||||
|
||||
.ep-form-select {
|
||||
cursor: pointer;
|
||||
appearance: none;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 10px center;
|
||||
padding-right: 28px;
|
||||
}
|
||||
|
||||
/* Toggle 开关 */
|
||||
@@ -950,177 +959,195 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 8px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.ep-toggle-label {
|
||||
font-size: 11px;
|
||||
color: var(--ep-text-secondary, #9ca3af);
|
||||
font-size: 12px;
|
||||
color: var(--text-primary, #1e293b);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.ep-toggle {
|
||||
width: 36px;
|
||||
height: 20px;
|
||||
background: var(--ep-border, #1f1f30);
|
||||
border-radius: 10px;
|
||||
width: 40px;
|
||||
height: 22px;
|
||||
background: var(--border-color, #e2e8f0);
|
||||
border-radius: 11px;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s ease;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.ep-toggle.active {
|
||||
background: var(--ep-accent, #6c5ce7);
|
||||
background: var(--primary, #6366f1);
|
||||
}
|
||||
|
||||
.ep-toggle-knob {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background: var(--ep-text-primary, #e8e8f0);
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
background: #ffffff;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 2px;
|
||||
transition: left 0.2s ease;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.ep-toggle.active .ep-toggle-knob {
|
||||
left: 18px;
|
||||
left: 20px;
|
||||
}
|
||||
|
||||
/* 滑块 */
|
||||
.ep-slider-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.ep-slider {
|
||||
flex: 1;
|
||||
-webkit-appearance: none;
|
||||
height: 4px;
|
||||
background: var(--ep-border, #1f1f30);
|
||||
background: var(--border-color, #e2e8f0);
|
||||
border-radius: 2px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.ep-slider::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background: var(--ep-accent, #6c5ce7);
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background: var(--primary, #6366f1);
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 2px 4px rgba(99, 102, 241, 0.3);
|
||||
border: 2px solid #fff;
|
||||
}
|
||||
|
||||
.ep-slider-value {
|
||||
font-size: 11px;
|
||||
color: var(--ep-text-secondary, #9ca3af);
|
||||
min-width: 30px;
|
||||
font-size: 12px;
|
||||
color: var(--text-secondary, #64748b);
|
||||
min-width: 36px;
|
||||
text-align: right;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 样式按钮组 */
|
||||
.ep-style-btns {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.ep-style-btn {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
background: var(--ep-bg-card, #13131f);
|
||||
border: 1px solid var(--ep-border, #1f1f30);
|
||||
border-radius: 4px;
|
||||
color: var(--ep-text-secondary, #9ca3af);
|
||||
font-size: 12px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background: var(--bg-primary, #ffffff);
|
||||
border: 1px solid var(--border-color, #e2e8f0);
|
||||
border-radius: var(--radius-xs, 8px);
|
||||
color: var(--text-secondary, #64748b);
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.2s ease;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.ep-style-btn: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-style-btn.active {
|
||||
background: rgba(108, 92, 231, 0.15);
|
||||
border-color: var(--ep-accent, #6c5ce7);
|
||||
color: var(--ep-accent, #6c5ce7);
|
||||
background: var(--primary-soft, #eef2ff);
|
||||
border-color: var(--primary, #6366f1);
|
||||
color: var(--primary, #6366f1);
|
||||
}
|
||||
|
||||
/* AI推荐按钮 */
|
||||
.ep-ai-recommend-btn {
|
||||
width: 100%;
|
||||
height: 28px;
|
||||
padding: 0 8px;
|
||||
background: linear-gradient(135deg, var(--ep-accent, #6c5ce7), #a29bfe);
|
||||
height: 36px;
|
||||
padding: 0 12px;
|
||||
background: var(--gradient-primary, linear-gradient(135deg, #6366f1, #4f46e5));
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
border-radius: var(--radius-xs, 8px);
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
margin-top: 8px;
|
||||
margin-top: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.ep-ai-recommend-btn:hover {
|
||||
opacity: 0.9;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
|
||||
}
|
||||
|
||||
.ep-ai-recommend-btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
transform: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/* 片段详情卡片 */
|
||||
.ep-clip-detail {
|
||||
background: var(--ep-bg-card, #13131f);
|
||||
border: 1px solid var(--ep-border, #1f1f30);
|
||||
border-radius: 6px;
|
||||
padding: 12px;
|
||||
background: var(--bg-secondary, #f8fafc);
|
||||
border: 1px solid var(--border-color, #e2e8f0);
|
||||
border-radius: var(--radius-sm, 14px);
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
.ep-clip-detail-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: 12px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid var(--border-light, #f1f5f9);
|
||||
}
|
||||
|
||||
.ep-clip-detail-name {
|
||||
font-size: 12px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--ep-text-primary, #e8e8f0);
|
||||
color: var(--text-primary, #1e293b);
|
||||
}
|
||||
|
||||
.ep-clip-detail-type {
|
||||
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-clip-detail-field {
|
||||
margin-bottom: 8px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.ep-clip-detail-label {
|
||||
font-size: 10px;
|
||||
color: var(--ep-text-muted, #4b5563);
|
||||
margin-bottom: 3px;
|
||||
font-size: 11px;
|
||||
color: var(--text-tertiary, #94a3b8);
|
||||
margin-bottom: 4px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.ep-clip-detail-value {
|
||||
font-size: 11px;
|
||||
color: var(--ep-text-primary, #e8e8f0);
|
||||
font-size: 12px;
|
||||
color: var(--text-primary, #1e293b);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.ep-clip-detail-row {
|
||||
@@ -1130,20 +1157,23 @@
|
||||
}
|
||||
|
||||
.ep-duration-input {
|
||||
width: 60px;
|
||||
height: 24px;
|
||||
background: var(--ep-bg-deepest, #0a0a14);
|
||||
border: 1px solid var(--ep-border, #1f1f30);
|
||||
border-radius: 4px;
|
||||
padding: 0 6px;
|
||||
color: var(--ep-text-primary, #e8e8f0);
|
||||
font-size: 11px;
|
||||
width: 70px;
|
||||
height: 28px;
|
||||
background: var(--bg-primary, #ffffff);
|
||||
border: 1px solid var(--border-color, #e2e8f0);
|
||||
border-radius: var(--radius-xs, 8px);
|
||||
padding: 0 8px;
|
||||
color: var(--text-primary, #1e293b);
|
||||
font-size: 12px;
|
||||
outline: none;
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.ep-duration-input:focus {
|
||||
border-color: var(--ep-accent, #6c5ce7);
|
||||
border-color: var(--primary, #6366f1);
|
||||
box-shadow: 0 0 0 3px var(--primary-soft, #eef2ff);
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════
|
||||
@@ -1363,8 +1393,8 @@
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.ep-style-btn:active {
|
||||
background: rgba(108, 92, 231, 0.08);
|
||||
transform: scale(0.93);
|
||||
background: var(--primary-soft, #eef2ff);
|
||||
transform: scale(0.95);
|
||||
}
|
||||
.ep-ai-recommend-btn:active {
|
||||
opacity: 0.8;
|
||||
@@ -1436,13 +1466,16 @@
|
||||
/* ═══ 片段属性面板 — 补充样式 ═══ */
|
||||
.ep-clip-detail-unit {
|
||||
font-size: var(--font-size-xs, 11px);
|
||||
color: var(--ep-text-muted, #4b5563);
|
||||
color: var(--text-tertiary, #94a3b8);
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
.ep-clip-detail-linked {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
color: var(--primary, #6366f1);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.ep-clip-detail-linked::before {
|
||||
@@ -1450,7 +1483,7 @@
|
||||
display: inline-block;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E");
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236366f1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E");
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
flex-shrink: 0;
|
||||
|
||||
Reference in New Issue
Block a user