c/FirefoxCSS · by Godie@lemmy.world · 1y

[solved] 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?

6 points · 2 comments · view on lemmy.world

2 Comments

MrOtherGuy@lemmy.world · 2 pts · 1y (1 reply)

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;
}

Godie@lemmy.world · 1 pts · 1y

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;
    }