zyc/video-shuoshan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(theme): V2-fix — 清除残留 30+ 处死黑/死白硬编码 (用户反馈表格线死黑)

Browse Source 
用户反馈: UsersPage 表格线浅色下死黑死黑。
全扫定位:V1 sub-agent 当年标注 "unmapped/near-match" 保留的硬编码,
在 V2 浅色重做下集中暴露为"死黑/死白"问题。

新增 5 个主题感知 token:
  --color-bg-glass-hover           DARK rgba(255,255,255,0.12) / LIGHT rgba(0,0,0,0.06)
  --color-border-glass-hover       DARK rgba(255,255,255,0.15) / LIGHT rgba(0,0,0,0.12)
  --color-bg-thumbnail             DARK rgba(0,0,0,0.30) / LIGHT rgba(0,0,0,0.05)
  --color-bg-thumbnail-hover       DARK rgba(0,0,0,0.15) / LIGHT rgba(0,0,0,0.04)
  --color-shadow-thumb             DARK rgba(0,0,0,0.30) / LIGHT rgba(0,0,0,0.10)

修复(10 个文件, 30+ 处):

表格死黑线 (用户主诉):
  UsersPage / TeamsPage .table td border-bottom: rgba(42,42,56,0.5) 死紫黑
    → var(--color-border-row) (浅色 rgba(0,0,0,0.06) 浅灰)
  .table tr:hover td bg: rgba(255,255,255,0.02) 浅色下消失
    → var(--color-bg-row-hover) (浅色 rgba(0,0,0,0.03))

玻璃面 hover 白透 alpha (浅色下死白看不见):
  VideoDetailModal closeBtn/floatingBtn/iconBtn hover:
    rgba(255,255,255,0.12-0.15) → var(--color-bg-glass-hover)
  TeamsPage detailClose hover: 同上
  GenerationCard moreBtn:hover border:
    rgba(255,255,255,0.15) → var(--color-border-glass-hover)

视频缩略图 bg (浅色下不该死黑):
  AssetsPage thumbnail bg / hover overlay: rgba(0,0,0,0.3/0.15)
    → var(--color-bg-thumbnail / -hover)
  UniversalUpload thumbInner box-shadow: rgba(0,0,0,0.3)
    → var(--color-shadow-thumb)

Modal/Upload overlay & hover:
  UsersPage drawerOverlay: rgba(0,0,0,0.5) → var(--color-overlay-soft)
  TeamsPage detailOverlay: rgba(0,0,0,0.65) → var(--color-modal-overlay)
  UniversalUpload uploadOverlay: rgba(0,0,0,0.5) → var(--color-overlay-soft)

Upload trigger 虚线边 hover:
  KeyframeUpload / UniversalUpload trigger hover: #5a5a6a / #1e1e2a
    → var(--color-border-modal-hover / -bg-modal-hover) (已有 var)
  trigger bg: rgba(255,255,255,0.03) → var(--color-bg-upload)

TeamsPage memberTable:
  memberTableWrapper bg: rgba(255,255,255,0.03) → var(--color-bg-upload)
  memberTable th bg: rgba(255,255,255,0.02) → var(--color-bg-row-hover)

AssetLibraryModal 状态 / 主色 alpha:
  addAssetCard hover bg rgba(108,99,255,0.04) → var(--color-primary-bg)
  dropZone hover/active: 同上 + var(--color-primary-bg-hover)
  statusActive 0.12: rgba(0,184,148,0.12) → var(--color-success-bg)
  statusProcessing 0.12: rgba(243,156,18,0.12) → var(--color-warning-bg)
  statusFailed 0.12: rgba(231,76,60,0.12) → var(--color-danger-bg)
  dropZoneWarning #ff4d4f + alpha → var(--color-danger-hover/-bg/-border)

UniversalUpload uploadError:
  rgba(239,68,68,0.25) → var(--color-danger-bg)

ProfilePage warningBanner:
  rgba(243,156,18,0.12/0.3) → var(--color-warning-bg / -border)

验证: tsc 通过, vitest 71 fail / 162 pass 与基线一致, 24 张 V2 截图重出
关键页对比 (docs/screenshots/v2/):
  - UsersPage / TeamsPage 浅色表格线变浅灰 GitBook 风
  - VideoDetailModal close 浅色下能看到 hover
  - 视频缩略图浅色不死黑

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
seaislee1209 2026-05-11 20:24:24 +08:00
parent f8a39d55c7
commit 0c9aaa11cd
10 changed files with 55 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
web/src/components/AssetLibraryModal.module.css
View File

@ -256,7 +256,7 @@
.addAssetCard:hover {
border-color: var(--color-primary);
color: var(--color-primary);
background: rgba(108, 99, 255, 0.04); /* unmapped: primary alpha 0.04 */
background: var(--color-primary-bg);
}
.assetThumb {
@ -289,17 +289,17 @@
.statusActive {
color: var(--color-success);
background: rgba(0, 184, 148, 0.12); /* near-match: ~--color-success-bg-hover (0.10) */
background: var(--color-success-bg);
}
.statusProcessing {
color: var(--color-warning);
background: rgba(243, 156, 18, 0.12); /* unmapped: warning alpha 0.12 */
background: var(--color-warning-bg);
}
.statusFailed {
color: var(--color-danger);
background: rgba(231, 76, 60, 0.12); /* near-match: ~--color-danger-bg-hover (0.10) */
background: var(--color-danger-bg);
}
/* Upload view */
@ -344,12 +344,12 @@
.dropZone:hover {
border-color: var(--color-primary);
background: rgba(108, 99, 255, 0.04); /* unmapped: primary alpha 0.04 */
background: var(--color-primary-bg);
}
.dropZoneActive {
border-color: var(--color-primary);
background: rgba(108, 99, 255, 0.08); /* unmapped: primary alpha 0.08 */
background: var(--color-primary-bg-hover);
}
.dropZoneText {
@ -366,11 +366,11 @@
.dropZoneWarning {
font-size: 14px;
font-weight: 600;
color: #ff4d4f; /* unmapped: distinct red shade, no var */
color: var(--color-danger-hover);
margin-top: 12px;
padding: 8px 12px;
background: rgba(255, 77, 79, 0.08); /* unmapped: tied to #ff4d4f */
border: 1px solid rgba(255, 77, 79, 0.25); /* unmapped: tied to #ff4d4f */
background: var(--color-danger-hover-bg);
border: 1px solid var(--color-danger-hover-border);
border-radius: 6px;
}

2
web/src/components/GenerationCard.module.css
View File

@ -418,7 +418,7 @@
.moreBtn:hover {
color: var(--color-text-secondary);
background: var(--color-bg-hover);
border-color: rgba(255, 255, 255, 0.15);
border-color: var(--color-border-glass-hover);
}
.moreDropdown {
position: absolute;

4
web/src/components/KeyframeUpload.module.css
View File

@ -13,7 +13,7 @@
height: var(--thumbnail-size);
aspect-ratio: 3 / 4;
border: 1.5px dashed var(--color-border-modal);
background: rgba(255, 255, 255, 0.03); /* near-match: ~--color-bg-upload (0.04) */
background: var(--color-bg-upload);
border-radius: var(--radius-btn);
display: flex;
flex-direction: column;
@ -26,7 +26,7 @@
}
.trigger:hover {
border-color: #5a5a6a; /* unmapped: hover border lighter than --color-border-modal */
border-color: var(--color-border-modal-hover);
background: var(--color-bg-card);
}

18
web/src/components/UniversalUpload.module.css
View File

@ -20,7 +20,7 @@
height: var(--thumbnail-size);
aspect-ratio: 3 / 4;
border: 1.5px dashed var(--color-border-modal);
background: rgba(255, 255, 255, 0.03); /* near-match: ~--color-bg-upload (0.04) */
background: var(--color-bg-upload);
border-radius: var(--radius-btn);
display: flex;
flex-direction: column;
@ -33,7 +33,7 @@
}
.trigger:hover {
border-color: #5a5a6a; /* unmapped: hover border lighter than --color-border-modal */
border-color: var(--color-border-modal-hover);
background: var(--color-bg-card);
}
@ -65,8 +65,8 @@
}
.thumbRowExpanded .addMore:hover {
background: #1e1e2a; /* unmapped: hover variant of bg-modal-elevated */
border-color: #5a5a6a; /* unmapped: hover border lighter than --color-border-modal */
background: var(--color-bg-modal-hover);
border-color: var(--color-border-modal-hover);
}
/* Each thumbnail card — 3:4 portrait ratio, overflow visible for tooltip */
@ -92,7 +92,7 @@
}
.thumbItem:hover .thumbInner {
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3); /* unmapped: shadow alpha 0.3 */
box-shadow: 0 2px 12px var(--color-shadow-thumb);
}
.thumbMedia {
@ -180,7 +180,7 @@
height: var(--thumbnail-size);
aspect-ratio: 3 / 4;
border: 1.5px dashed var(--color-border-modal);
background: rgba(255, 255, 255, 0.03); /* near-match: ~--color-bg-upload (0.04) */
background: var(--color-bg-upload);
border-radius: var(--radius-btn);
display: flex;
flex-direction: column;
@ -198,7 +198,7 @@
}
.addMore:hover {
border-color: #5a5a6a; /* unmapped: hover border lighter than --color-border-modal */
border-color: var(--color-border-modal-hover);
background: var(--color-bg-card);
}
@ -289,13 +289,13 @@
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.5); /* near-match: between --color-modal-overlay (0.6) and lighter overlays */
background: var(--color-overlay-soft);
border-radius: var(--radius-thumbnail);
z-index: 2;
}
.uploadError {
background: rgba(239, 68, 68, 0.25); /* unmapped: danger-text (#ef4444) alpha 0.25 */
background: var(--color-danger-bg);
cursor: pointer;
}

12
web/src/components/VideoDetailModal.module.css
View File

@ -56,8 +56,8 @@
}
.closeBtn:hover {
color: var(--color-on-overlay);
background: rgba(255, 255, 255, 0.12);
color: var(--color-text-primary);
background: var(--color-bg-glass-hover);
}
.floatingActions {
@ -85,8 +85,8 @@
}
.floatingBtn:hover {
color: var(--color-on-overlay);
background: rgba(255, 255, 255, 0.15);
color: var(--color-text-primary);
background: var(--color-bg-glass-hover);
}
/* Video area — centres the player */
@ -314,8 +314,8 @@
}
.iconBtn:hover {
color: rgba(255, 255, 255, 0.85);
background: var(--color-bg-card);
color: var(--color-text-primary);
background: var(--color-bg-glass-hover);
}
/* More menu dropdown */

14
web/src/index.css
View File

@ -205,6 +205,13 @@
--color-chip-warm-badge-bg: rgba(255, 150, 100, 0.20);
--color-chip-warm-badge-text: #ffb589;
/* V2-fix: 主题感知的 hover/border (替换 V1 漏改的白透 alpha) */
--color-bg-glass-hover: rgba(255, 255, 255, 0.12);
--color-border-glass-hover: rgba(255, 255, 255, 0.15);
--color-bg-thumbnail: rgba(0, 0, 0, 0.30); /* 视频缩略图 bg (dark) */
--color-bg-thumbnail-hover: rgba(0, 0, 0, 0.15); /* 缩略图 hover overlay */
--color-shadow-thumb: rgba(0, 0, 0, 0.30); /* 缩略图阴影 */
/* Backdrop-filter 标准五档 */
--bf-glass-sm: blur(12px) saturate(140%);
--bf-glass-md: blur(16px) saturate(160%);
@ -353,6 +360,13 @@
--color-chip-warm-badge-bg: rgba(255, 100, 50, 0.12);
--color-chip-warm-badge-text: #c2410c;
/* V2-fix: 主题感知 hover/border 浅色变黑透明 */
--color-bg-glass-hover: rgba(0, 0, 0, 0.06);
--color-border-glass-hover: rgba(0, 0, 0, 0.12);
--color-bg-thumbnail: rgba(0, 0, 0, 0.05); /* 浅色下浅淡 */
--color-bg-thumbnail-hover: rgba(0, 0, 0, 0.04);
--color-shadow-thumb: rgba(0, 0, 0, 0.10);
/* Mention pill */
--color-mention-bg: rgba(80, 72, 204, 0.10);
--color-mention-bg-hover: rgba(80, 72, 204, 0.16);

4
web/src/pages/AssetsPage.module.css
View File

@ -125,7 +125,7 @@
aspect-ratio: 16 / 9;
border-radius: 10px;
overflow: hidden;
background: rgba(0, 0, 0, 0.3); /* unmapped: thumbnail bg alpha 0.3 */
background: var(--color-bg-thumbnail);
cursor: pointer;
transition: transform 0.15s;
}
@ -162,6 +162,6 @@
.thumbOverlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.15); /* unmapped: hover overlay alpha 0.15 */
background: var(--color-bg-thumbnail-hover);
pointer-events: none;
}

4
web/src/pages/ProfilePage.module.css
View File

@ -85,8 +85,8 @@
/* Warning banners */
.warningBanner {
padding: 10px 16px;
background: rgba(243, 156, 18, 0.12);
border: 1px solid rgba(243, 156, 18, 0.3);
background: var(--color-warning-bg);
border: 1px solid var(--color-warning-border);
border-radius: var(--radius-card);
color: var(--color-warning);
font-size: 13px;

14
web/src/pages/TeamsPage.module.css
View File

@ -23,9 +23,9 @@
}
.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th { padding: 12px 16px; text-align: left; color: var(--color-text-secondary); font-weight: 500; border-bottom: 1px solid var(--color-border-card); white-space: nowrap; }
.table td { padding: 12px 16px; color: var(--color-text-primary); border-bottom: 1px solid rgba(42, 42, 56, 0.5); white-space: nowrap; }
.table td { padding: 12px 16px; color: var(--color-text-primary); border-bottom: 1px solid var(--color-border-row); white-space: nowrap; }
.table tr:last-child td { border-bottom: none; }
.table tr:hover td { background: rgba(255, 255, 255, 0.02); }
.table tr:hover td { background: var(--color-bg-row-hover); }
.teamNameLink { background: none; border: none; color: var(--color-primary); cursor: pointer; font-size: 13px; text-decoration: underline; }
.statusBadge { padding: 2px 8px; border-radius: 4px; font-size: 12px; }
@ -72,7 +72,7 @@
.detailOverlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.65);
background: var(--color-modal-overlay);
display: flex;
align-items: center;
justify-content: center;
@ -141,8 +141,8 @@
}
.detailClose:hover {
color: #fff;
background: rgba(255, 255, 255, 0.12);
color: var(--color-text-primary);
background: var(--color-bg-glass-hover);
}
/* ── Body ── */
@ -223,7 +223,7 @@
}
.memberTableWrapper {
background: rgba(255, 255, 255, 0.03);
background: var(--color-bg-upload);
border: 1px solid var(--color-border-soft);
border-radius: 10px;
overflow: hidden;
@ -242,7 +242,7 @@
font-weight: 500;
font-size: 13px;
border-bottom: 1px solid var(--color-border-soft);
background: rgba(255, 255, 255, 0.02);
background: var(--color-bg-row-hover);
white-space: nowrap;
}

6
web/src/pages/UsersPage.module.css
View File

@ -29,9 +29,9 @@
}
.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th { padding: 12px 16px; text-align: left; color: var(--color-text-secondary); font-weight: 500; border-bottom: 1px solid var(--color-border-card); white-space: nowrap; }
.table td { padding: 12px 16px; color: var(--color-text-primary); border-bottom: 1px solid rgba(42, 42, 56, 0.5); white-space: nowrap; }
.table td { padding: 12px 16px; color: var(--color-text-primary); border-bottom: 1px solid var(--color-border-row); white-space: nowrap; }
.table tr:last-child td { border-bottom: none; }
.table tr:hover td { background: rgba(255, 255, 255, 0.02); }
.table tr:hover td { background: var(--color-bg-row-hover); }
.usernameLink { background: none; border: none; color: var(--color-primary); cursor: pointer; font-size: 13px; text-decoration: underline; }
.statusBadge { padding: 2px 8px; border-radius: 4px; font-size: 12px; }
@ -80,7 +80,7 @@
.formError { color: var(--color-danger); font-size: 13px; margin-bottom: 12px; }
/* Drawer */
.drawerOverlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 300; }
.drawerOverlay { position: fixed; inset: 0; background: var(--color-overlay-soft); z-index: 300; }
.drawer {
position: fixed; right: 0; top: 0; bottom: 0; width: 440px; max-width: 90vw;
background: var(--color-bg-modal-elevated); border-left: 1px solid var(--color-border-card);