This site will have limited functionality while we undergo maintenance to improve your experience. If an article doesn't solve your issue and you want to ask a question, we have our support community waiting to help you at @FirefoxSupport on Twitter and/r/firefox on Reddit.

Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

userChrome.css code

more options

/* Keep site icon visible on hover */ .tabbrowser-tab:hover .tab-icon-stack:not([pinned], [sharing], [crashed]):is([soundplaying], [muted]) > :not(.tab-icon-overlay),

    /* for site icon with Compact density */
root[uidensity="compact"] .tab-icon-stack:not([pinned], [sharing], [crashed]):is([soundplaying], [muted]) > :not(.tab-icon-overlay) {
   opacity: 1 !important; /* overrides full transparency with full opacity */

}


i want this userChrome.css code to be modified to always work, not only when hover overing the mouse.

/* Keep site icon visible on hover */ .tabbrowser-tab:hover .tab-icon-stack:not([pinned], [sharing], [crashed]):is([soundplaying], [muted]) > :not(.tab-icon-overlay), /* for site icon with Compact density */ :root[uidensity="compact"] .tab-icon-stack:not([pinned], [sharing], [crashed]):is([soundplaying], [muted]) > :not(.tab-icon-overlay) { opacity: 1 !important; /* overrides full transparency with full opacity */ } i want this userChrome.css code to be modified to always work, not only when hover overing the mouse.

All Replies (3)

more options

You can use "Density: Compact mode" or leave out ":hover".

more options

i tried leave out hover, but then not working. i need to work always, not just when im hovering over the mouse. maybe i can replace hover some other command what makes it active all the time?

more options

Is the problem that you use Compact Density and while audio is playing in the tab, the speaker icon appears in front of or in place of the site icon?

If that is the problem:

You could consider moving the speaker icon to the right of the site icon so you can see both of them. Here's an example of some code for that:

/*** Audio Playing / Mute Button side-by-side when sound is playing ***/

#TabsToolbar {
    --user-mute-button-height: 20px;  /* default size is 12px, site icon is 16px */
}

/* Move the mute/unmute button to the right and enlarge it */
.tab-icon-overlay:not([pinned], [sharing], [crashed]):is([soundplaying], [muted]) {
    width: var(--user-mute-button-height) !important;
    height: var(--user-mute-button-height) !important;
    margin-left: calc(var(--user-mute-button-height) / 2 + 2px) !important; /* pushes icon to the right */
    margin-right: 2px !important; /* closes up some space before the text */
    padding: 0 !important; /* allows icon to expand to full size */
}

/* Move the site icon to the left a bit and adjust position */
.tab-icon-stack:not([pinned], [sharing], [crashed]):is([soundplaying], [muted]) > :not(.tab-icon-overlay) {
    margin-left: -4px !important; /* pushes icon to the left */
    margin-top: calc((var(--user-mute-button-height) - 16px) / 2) !important;  /* keep site icon reasonably positioned */
}

/* Override the rules for hover/not hover visibility */
   /* for mute button */
.tabbrowser-tab:not(:hover) .tab-icon-overlay:not([pinned], [sharing], [crashed]):is([soundplaying], [muted]), 
   /* for site icon */
.tabbrowser-tab:hover .tab-icon-stack:not([pinned], [sharing], [crashed]):is([soundplaying], [muted]) > :not(.tab-icon-overlay), 
   /* for site icon with Compact density */
:root[uidensity="compact"] .tab-icon-stack:not([pinned], [sharing], [crashed]):is([soundplaying], [muted]) > :not(.tab-icon-overlay) {
    opacity: 1 !important; /* overrides full transparency with full opacity */
}

/* Color the icon on hover for confirmation or avoidance */
.tab-icon-overlay:not([pinned], [sharing], [crashed]):is([soundplaying], [muted]):hover {
    fill: green !important;
}
[lwthemetextcolor="bright"] .tab-icon-overlay:not([pinned], [sharing], [crashed]):is([soundplaying], [muted]):hover {
    fill: lightgreen !important; /* for dark themes */
}
 

In case you need an update in the future, that is from: https://www.userchrome.org/firefox-89-styling-proton-ui.html#tabstyler