[solved] Seems impossible in Firefox v.136 to change sound button style like before or... (lemmy.world)

submitted 1 day ago* (last edited 1 day ago) by Godie@lemmy.world to c/FirefoxCSS@fedia.io

2 comments fedilink hide all child comments

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?

top 2 comments

sorted by: hot top controversial new old

[-] MrOtherGuy@lemmy.world 2 points 1 day ago

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 points 1 day ago

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

this post was submitted on 20 Feb 2025

5 points (100.0% liked)

Firefox Customs

2 readers

6 users here now

Chat with us!

Post your unsupported Firefox customizations here!

From the makers of r/FirefoxCSS

Links

Related

Firefox

Rules

Posts must have flair!
Posts cannot be memes/shitposts. They should be about Firefox customization with CSS.
Please be civil. Bear in mind that many users come here for help and would be turned off by insults and rudeness.
When posting large amount of code use a service dedicated to hosting text snippets, such as pastebin, hastebin, github gist or equivalent. Relatively short snippets can be wrapped in code-block for inline viewing.
Do NOT use url-shorteners or link to compressed downloads (such as zip or rar) when sharing code.

founded 2 years ago

MODERATORS

yoasif@fedia.io

MrOtherGuy@lemmy.world