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

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

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

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

@ -13,7 +13,7 @@
height: var(--thumbnail-size); height: var(--thumbnail-size);
aspect-ratio: 3 / 4; aspect-ratio: 3 / 4;
border: 1.5px dashed var(--color-border-modal); 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); border-radius: var(--radius-btn);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -26,7 +26,7 @@
} }
.trigger:hover { .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); background: var(--color-bg-card);
} }

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

@ -20,7 +20,7 @@
height: var(--thumbnail-size); height: var(--thumbnail-size);
aspect-ratio: 3 / 4; aspect-ratio: 3 / 4;
border: 1.5px dashed var(--color-border-modal); 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); border-radius: var(--radius-btn);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -33,7 +33,7 @@
} }
.trigger:hover { .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); background: var(--color-bg-card);
} }
@ -65,8 +65,8 @@
} }
.thumbRowExpanded .addMore:hover { .thumbRowExpanded .addMore:hover {
background: #1e1e2a; /* unmapped: hover variant of bg-modal-elevated */ background: var(--color-bg-modal-hover);
border-color: #5a5a6a; /* unmapped: hover border lighter than --color-border-modal */ border-color: var(--color-border-modal-hover);
} }
/* Each thumbnail card — 3:4 portrait ratio, overflow visible for tooltip */ /* Each thumbnail card — 3:4 portrait ratio, overflow visible for tooltip */
@ -92,7 +92,7 @@
} }
.thumbItem:hover .thumbInner { .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 { .thumbMedia {
@ -180,7 +180,7 @@
height: var(--thumbnail-size); height: var(--thumbnail-size);
aspect-ratio: 3 / 4; aspect-ratio: 3 / 4;
border: 1.5px dashed var(--color-border-modal); 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); border-radius: var(--radius-btn);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -198,7 +198,7 @@
} }
.addMore:hover { .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); background: var(--color-bg-card);
} }
@ -289,13 +289,13 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: 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); border-radius: var(--radius-thumbnail);
z-index: 2; z-index: 2;
} }
.uploadError { .uploadError {
background: rgba(239, 68, 68, 0.25); /* unmapped: danger-text (#ef4444) alpha 0.25 */ background: var(--color-danger-bg);
cursor: pointer; cursor: pointer;
} }

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

@ -56,8 +56,8 @@
} }
.closeBtn:hover { .closeBtn:hover {
color: var(--color-on-overlay); color: var(--color-text-primary);
background: rgba(255, 255, 255, 0.12); background: var(--color-bg-glass-hover);
} }
.floatingActions { .floatingActions {
@ -85,8 +85,8 @@
} }
.floatingBtn:hover { .floatingBtn:hover {
color: var(--color-on-overlay); color: var(--color-text-primary);
background: rgba(255, 255, 255, 0.15); background: var(--color-bg-glass-hover);
} }
/* Video area — centres the player */ /* Video area — centres the player */
@ -314,8 +314,8 @@
} }
.iconBtn:hover { .iconBtn:hover {
color: rgba(255, 255, 255, 0.85); color: var(--color-text-primary);
background: var(--color-bg-card); background: var(--color-bg-glass-hover);
} }
/* More menu dropdown */ /* 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-bg: rgba(255, 150, 100, 0.20);
--color-chip-warm-badge-text: #ffb589; --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 标准五档 */ /* Backdrop-filter 标准五档 */
--bf-glass-sm: blur(12px) saturate(140%); --bf-glass-sm: blur(12px) saturate(140%);
--bf-glass-md: blur(16px) saturate(160%); --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-bg: rgba(255, 100, 50, 0.12);
--color-chip-warm-badge-text: #c2410c; --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 */ /* Mention pill */
--color-mention-bg: rgba(80, 72, 204, 0.10); --color-mention-bg: rgba(80, 72, 204, 0.10);
--color-mention-bg-hover: rgba(80, 72, 204, 0.16); --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; aspect-ratio: 16 / 9;
border-radius: 10px; border-radius: 10px;
overflow: hidden; overflow: hidden;
background: rgba(0, 0, 0, 0.3); /* unmapped: thumbnail bg alpha 0.3 */ background: var(--color-bg-thumbnail);
cursor: pointer; cursor: pointer;
transition: transform 0.15s; transition: transform 0.15s;
} }
@ -162,6 +162,6 @@
.thumbOverlay { .thumbOverlay {
position: absolute; position: absolute;
inset: 0; inset: 0;
background: rgba(0, 0, 0, 0.15); /* unmapped: hover overlay alpha 0.15 */ background: var(--color-bg-thumbnail-hover);
pointer-events: none; pointer-events: none;
} }

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

@ -85,8 +85,8 @@
/* Warning banners */ /* Warning banners */
.warningBanner { .warningBanner {
padding: 10px 16px; padding: 10px 16px;
background: rgba(243, 156, 18, 0.12); background: var(--color-warning-bg);
border: 1px solid rgba(243, 156, 18, 0.3); border: 1px solid var(--color-warning-border);
border-radius: var(--radius-card); border-radius: var(--radius-card);
color: var(--color-warning); color: var(--color-warning);
font-size: 13px; 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 { 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 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: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; } .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; } .statusBadge { padding: 2px 8px; border-radius: 4px; font-size: 12px; }
@ -72,7 +72,7 @@
.detailOverlay { .detailOverlay {
position: fixed; position: fixed;
inset: 0; inset: 0;
background: rgba(0, 0, 0, 0.65); background: var(--color-modal-overlay);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -141,8 +141,8 @@
} }
.detailClose:hover { .detailClose:hover {
color: #fff; color: var(--color-text-primary);
background: rgba(255, 255, 255, 0.12); background: var(--color-bg-glass-hover);
} }
/* ── Body ── */ /* ── Body ── */
@ -223,7 +223,7 @@
} }
.memberTableWrapper { .memberTableWrapper {
background: rgba(255, 255, 255, 0.03); background: var(--color-bg-upload);
border: 1px solid var(--color-border-soft); border: 1px solid var(--color-border-soft);
border-radius: 10px; border-radius: 10px;
overflow: hidden; overflow: hidden;
@ -242,7 +242,7 @@
font-weight: 500; font-weight: 500;
font-size: 13px; font-size: 13px;
border-bottom: 1px solid var(--color-border-soft); border-bottom: 1px solid var(--color-border-soft);
background: rgba(255, 255, 255, 0.02); background: var(--color-bg-row-hover);
white-space: nowrap; 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 { 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 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: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; } .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; } .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; } .formError { color: var(--color-danger); font-size: 13px; margin-bottom: 12px; }
/* Drawer */ /* 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 { .drawer {
position: fixed; right: 0; top: 0; bottom: 0; width: 440px; max-width: 90vw; 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); background: var(--color-bg-modal-elevated); border-left: 1px solid var(--color-border-card);