Now playing audio icon hiding favicon

[lolouthefox]

What happened?

The now playing audio icon (and button) is hiding favicon.

Reproducible?

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

Version

1.0.0-a.28 (64-bit)

Severity impact

Medium

What platform are you seeing the problem on?

Windows

Relevant log output

No response

[DaitiDay]

+1

[ch4og]

Check these theme made for hiding tab mute https://www.zen-browser.app/themes/053a3ffa-9233-4554-88f3-076e6a6ebb43

[DaitiDay]

The theme hides the audio icon, I just want it be be more visible/easily clickable. Here is an example of what I mean (this is from the nightly build of firefox) while this is the current icon in zen Furthermore, the mute/audio icon only appears when the tab has focus, while imo it should be always visible to quickly mute the audio without switching to the tab. Having it shown only when the tab has focus kind of defeats the purpose of having that displayed in the first place imo.

[DaitiDay]

I managed to fix the "visibility issue" using the following CSS in userChrome.css:

.tab-icon-overlay {
  -moz-box-ordinal-group: 0 !important;
  border-radius: 50% !important;
  margin: initial !important;
  visibility: visible !important;
  margin-right: 0px !important;
  opacity: 1 !important;
  transform: translate(60%, -35%) scale(0.9) !important;
  color: #000000 !important;
  background-color: #ffffff !important;
}

.tab-icon-overlay:hover {
  color: #000000 !important;
  background-color: #ffffff !important;
}

.tab-icon-overlay:not(:focus) {
    visibility: visible !important;
    opacity: 1 !important;
}

Unfortunately, I can't get the icon to display when the tab is not focused, even with the last four lines in userChrome.css. Can someone help me troubleshoot or fix this?

Another question: If I wanted to add this CSS snippet to the theme store for everyone to use, how can I achieve that? Is there a guide on how to submit such a snippet that isn't a "standard" theme?

[ch4og]

https://docs.zen-browser.app/themes-store/themes-marketplace-submission-guidelines

Even one line css snippet is called theme here

[DaitiDay]

Oh, I did read that, but I thought it was only for 'standard' themes. As soon as I fix the unfocused issue, I'll submit it.