Seems impossible in Firefox v.136 to change sound button style like before or...
Seems impossible in Firefox v.136 to change sound button style like before or...
hi, in Firefox v.136 the sound button seems totally reworked and I can't get a right way to style that button, or maybe my knowledge is insignificant. I tried this way but works only for English language, I guess I should add an entry for each language ans that seems inefficient:
button[aria-label="Mute tab"] .button-background {
/* my code */
}
In the firefox code they use ::part(button) and that don't works in userChrome.css:
.tab-audio-button {
#tabbrowser-tabs:is([orient="vertical"][expanded], [orient="horizontal"]) &:not([pinned]):not([crashed]) {
&[soundplaying]::part(button) {
}
}
}
There is a way to solve this or it is impossible?
CSS variables go through from the shadow host to the elements inside. So you can do stuff like this:
.tab-audio-button[muted]{ --my-custom-image: url("muted.png"); } .tab-audio-button[soundplaying]{ --my-custom-image: url("sound.png"); } .button-background{ background-image: var(--my-custom-image) !important; }Thank you so much, so now all the rules needs to be variables, I don't understand very well but it seems to work:
/* Normal tabs - Muted icon */ .tab-audio-button[muted] { --my-position: absolute !important; --my-top: calc(var(--tab-height-personal)/2 - 14px) !important; --my-inset-inline-start: 14px !important; --my-background-image: url("../icons/paused.svg") !important; --my-background-color: transparent !important; --my-background-size: 12px !important; --my-box-shadow: none !important; --my-fill: var(--lwt-tab-text) !important; --my-opacity: 0.8 !important; --my-clip-path: xywh(1px 1px 86% 86% round 50%) !important; &:hover { --my-background-image: url("chrome://browser/skin/tabbrowser/tab-audio-blocked-small.svg") !important; --my-background-size: 8px !important; --my-box-shadow: inset 0 0 0 1px var(--contrast-color), inset 0 0 0 2px var(--lwt-tab-text) !important; --my-fill: var(--lwt-tab-text) !important; --my-opacity: 1 !important; } } .button-background { position: var(--my-position) !important; top: var(--my-top) !important; inset-inline-start: var(--my-inset-inline-start) !important; background-image: var(--my-background-image) !important; background-color: var(--my-background-color) !important; background-size: var(--my-background-size) !important; box-shadow: var(--my-box-shadow) !important; opacity: var(--my-opacity) !important; fill: var(--my-fill) !important; clip-path: var(--my-clip-path) !important; }