fix(theme): 浅色下视频上的下载/收藏按钮看不见 — 改回深半透底+白图标

v0.20.0 浅色主题切换时把 --color-bg-on-media 改成 rgba(255,255,255,0.90),
但 --color-on-overlay 没动还是白色 ⇒ 白底白图标完全看不见。

用户实测:生成页面视频卡片 hover 时下载+收藏按钮浅色下都消失。

根因:这俩 var 是给 "video 上的悬浮控件" 设计的,视频帧本身可能任何颜色
(用户上传白雪景 / 深夜景都有),控件必须用 深底+白字 才能在任意视频背景上可读。
这是行业惯例(YouTube/抖音/Bilibili 浅色主题下视频控件也是黑底白字)。

修法:浅色下也用 rgba(0,0,0,0.55) 深半透底,保持 --color-on-overlay 白色不变。
跟 dark 主题语义对称(都是深底白字,只是 alpha 不同)。

涉及:
- GenerationCard.module.css .downloadBtn (生成页卡片下载+收藏)
- VideoDetailModal.module.css 其他 video overlay 用 var 的元素也受益

未改:VideoDetailModal 内部 .floatingBtn / .timeDisplay / .controls 等
硬编码 rgba(255,...) — 那些也是视频 overlay 控件,黑底白字是对的,不动。

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
seaislee1209 2026-05-15 17:15:42 +08:00
parent aa1a70121a
commit 08b5e66fbc

View File

@ -391,9 +391,11 @@
--color-info-shadow-soft: rgba(0, 153, 204, 0.20); --color-info-shadow-soft: rgba(0, 153, 204, 0.20);
--color-info-shadow-strong: rgba(0, 153, 204, 0.35); --color-info-shadow-strong: rgba(0, 153, 204, 0.35);
/* White alpha on dark media — 保留白色徽章语义 */ /* Video 上的悬浮按钮(下载/收藏) 必须任意视频帧背景下都可读
--color-bg-on-media: rgba(255, 255, 255, 0.90); 沿用行业惯例:深半透底 + 白图标(参考 YouTube/抖音/小红书的视频控件)
--color-bg-on-media-hover: rgba(255, 255, 255, 1.0); v0.20.0 改成 rgba(255,255,255,0.90) 是错的 白底 + --color-on-overlay icon = 看不见 */
--color-bg-on-media: rgba(0, 0, 0, 0.55);
--color-bg-on-media-hover: rgba(0, 0, 0, 0.72);
/* Scrollbar */ /* Scrollbar */
--color-scrollbar-thumb: rgba(0, 0, 0, 0.15); --color-scrollbar-thumb: rgba(0, 0, 0, 0.15);