zen-browser / desktop

🌀 Experience tranquillity while browsing the web without people tracking you!
https://zen-browser.app
Mozilla Public License 2.0
17.42k stars 410 forks source link

Hover-expand tab bar with translucent theme colors #2554

Open KZDKM opened 6 days ago

KZDKM commented 6 days ago

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:

#navigator-toolbox[zen-user-hover="true"][zen-has-hover="true"] {
  #TabsToolbar{
    /*ignores the alpha channel of the background and make panel opaque*/
    /*background: rgb(from var(--zen-main-browser-background) r g b / 1) !important;*/

    /*keep the panel translucent but add blur behind it*/
    backdrop-filter: blur(10px);
  }
}

Additionally, the opaque theme color could also be set to the background of browserContainers to avoid pages temporarily becoming completely transparent when loading.

.browserContainer {
  background: rgb(from var(--zen-main-browser-background) r g b / 1) !important;
}

Reproducible?

Version

1.0.1

What platform are you seeing the problem on?

Linux

Relevant log output

No response

dosubot[bot] commented 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:

  1. For the Tab Bar:

    • Apply a blur effect to the background of the expanded tab panel to enhance readability while keeping the translucency:
      #navigator-toolbox[zen-user-hover="true"][zen-has-hover="true"] {
      #TabsToolbar {
      backdrop-filter: blur(10px);
      }
      }
  2. For Browser Containers:

    • Set an opaque background to prevent transparency during page loading:
      .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.