From 08b5e66fbcfa7983708488fa85d6567f02b7fa47 Mon Sep 17 00:00:00 2001 From: seaislee1209 Date: Fri, 15 May 2026 17:15:42 +0800 Subject: [PATCH] =?UTF-8?q?fix(theme):=20=E6=B5=85=E8=89=B2=E4=B8=8B?= =?UTF-8?q?=E8=A7=86=E9=A2=91=E4=B8=8A=E7=9A=84=E4=B8=8B=E8=BD=BD/?= =?UTF-8?q?=E6=94=B6=E8=97=8F=E6=8C=89=E9=92=AE=E7=9C=8B=E4=B8=8D=E8=A7=81?= =?UTF-8?q?=20=E2=80=94=20=E6=94=B9=E5=9B=9E=E6=B7=B1=E5=8D=8A=E9=80=8F?= =?UTF-8?q?=E5=BA=95+=E7=99=BD=E5=9B=BE=E6=A0=87?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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) --- web/src/index.css | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/web/src/index.css b/web/src/index.css index ff5f4f7..476dab9 100644 --- a/web/src/index.css +++ b/web/src/index.css @@ -391,9 +391,11 @@ --color-info-shadow-soft: rgba(0, 153, 204, 0.20); --color-info-shadow-strong: rgba(0, 153, 204, 0.35); - /* White alpha on dark media — 保留白色徽章语义 */ - --color-bg-on-media: rgba(255, 255, 255, 0.90); - --color-bg-on-media-hover: rgba(255, 255, 255, 1.0); + /* Video 上的悬浮按钮(下载/收藏)— 必须任意视频帧背景下都可读 ⇒ + 沿用行业惯例:深半透底 + 白图标(参考 YouTube/抖音/小红书的视频控件)。 + 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 */ --color-scrollbar-thumb: rgba(0, 0, 0, 0.15);