Open KZDKM opened 6 days ago
Hey @KZDKM! I'm here to help you with any bugs, questions, or contributions. Let me know how I can assist you!
The issue you're experiencing with the translucent theme colors affecting readability when the expand-on-hover feature is enabled can be addressed with the provided userChrome
CSS snippet. This snippet effectively enhances readability by applying a blur effect to the background of the expanded tab panel, which maintains translucency while improving text visibility. Additionally, setting an opaque background for browserContainers
can prevent transparency issues during page loading.
Here's a summary of the solution:
For the Tab Bar:
#navigator-toolbox[zen-user-hover="true"][zen-has-hover="true"] {
#TabsToolbar {
backdrop-filter: blur(10px);
}
}
For Browser Containers:
.browserContainer {
background: rgb(from var(--zen-main-browser-background) r g b / 1) !important;
}
These adjustments should help maintain the aesthetic of the translucent theme while ensuring that the UI remains functional and readable.
To continue talking to Dosu, mention @dosu.
Captchas
What happened?
The newly added theme color option supports setting translucent theme colors, but when expand-on-hover is enabled for the vertical tab bar, the background expanded tab panel is also translucent, this greatly reduces the readability of tabs.
The following userChrome snippet fixes the issue:
Additionally, the opaque theme color could also be set to the background of
browserContainers
to avoid pages temporarily becoming completely transparent when loading.Reproducible?
Version
1.0.1
What platform are you seeing the problem on?
Linux
Relevant log output
No response