fix(ui): 明亮模式下弹窗遮罩过浅导致内容与背景重叠 - #1099
Open
weed33834 wants to merge 1 commit into
Open
Conversation
DialogOverlay 遮罩从 bg-black/10 加深为 bg-black/50。 明亮模式下弹窗（如用户头像触发的账户弹窗）背景为纯白， 10% 黑色遮罩几乎不可见，导致弹窗内容与背后页面/侧边栏 信息在视觉上重叠；暗黑模式因弹窗与背景本就有对比而未暴露。 Fixes chaitin#1069
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
问题
官网试用模式（
/console/tasks）明亮模式下，点击用户头像弹出的账户弹窗，其内容与背后页面/侧边栏信息在视觉上重叠；暗黑模式无此问题（#1069）。根因
DialogOverlay遮罩只有bg-black/10（10% 黑色）。明亮模式下：--background: oklch(1 0 0)（纯白）--popover: oklch(1 0 0)（纯白）白色弹窗叠加在白色页面上，而遮罩几乎透明，无法在视觉上把弹窗与背景区分开，于是弹窗内容与背后信息（侧边栏头像/名称/套餐等）看起来重叠。暗黑模式下弹窗（
#161b22）与背景（#0d1117）本就有对比，所以未暴露该问题。修复
将
DialogOverlay遮罩从bg-black/10加深为bg-black/50，让弹窗在明亮模式下也有清晰的层次分隔。对暗黑模式无副作用。改动
frontend/src/components/ui/dialog.tsx一个文件（DialogOverlay一处 className）。Fixes #1069