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:
parent
aa1a70121a
commit
08b5e66fbc
@ -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);
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user