Hover-expand tab bar with translucent theme colors

[KZDKM]

Captchas

• I have read the instructions.
• I have searched existing issues and avoided creating duplicates.
• I am not filing an enhancement request.

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?

• I have checked that this issue cannot be reproduced on Mozilla Firefox.

Version

1.0.1

What platform are you seeing the problem on?

Linux

Relevant log output

No response

[dosubot]

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.