X
Tap here to go to the mobile version of the site.

Support Forum

How do I disable Audio-muted icons over pinned tabs?

Posted

I have an issue related to pinned tabs that I hope someone can help me with.

Using Firefox 61.0.1 on Windows 10. I recently installed an add-on called AutoMute that mutes all tabs by default, a side-effect of which is that the audio-muted overlay icon shows in ALL tabs. I managed to find this css and added it to userchrome.css, which is supposed to remove the icon from ALL the tabs:

.tabbrowser-tab :-moz-any(.tab-icon-sound,.tab-icon-overlay[muted]) { display: none; }

I also set the about:config property called browser.tabs.showAudioPlayingIcon to False.

But for some reason, the audio muted overlay is still showing up in pinned tabs. I tried to define above rule specifically for pinned tabs, but that is not working either:

.tabbrowser-tab[pinned="true"] :-moz-any(.tab-icon-sound,.tab-icon-overlay[muted]) { display: none; }

If anything, its even more important for the audio muted overlay to be gone from pinned tab, since, apart from aesthetics, their limited real estate makes it more likely to be clicked on accidentally. How do I remove the audio muted icon from pinned tabs?

Please help!

I have an issue related to pinned tabs that I hope someone can help me with. Using Firefox 61.0.1 on Windows 10. I recently installed an add-on called AutoMute that mutes all tabs by default, a side-effect of which is that the audio-muted overlay icon shows in ALL tabs. I managed to find this css and added it to userchrome.css, which is supposed to remove the icon from ALL the tabs: .tabbrowser-tab :-moz-any(.tab-icon-sound,.tab-icon-overlay[muted]) { display: none; } I also set the about:config property called browser.tabs.showAudioPlayingIcon to False. But for some reason, the audio muted overlay is still showing up in pinned tabs. I tried to define above rule specifically for pinned tabs, but that is not working either: .tabbrowser-tab[pinned="true"] :-moz-any(.tab-icon-sound,.tab-icon-overlay[muted]) { display: none; } If anything, its even more important for the audio muted overlay to be gone from pinned tab, since, apart from aesthetics, their limited real estate makes it more likely to be clicked on accidentally. How do I remove the audio muted icon from pinned tabs? Please help!

Chosen solution

You need to add the !important flag to override an existing rule.

  • view-source:chrome://browser/content/tabbrowser.css

.tabbrowser-tab[pinned="true"] :-moz-any(.tab-icon-sound,.tab-icon-overlay[muted]) { display: none !important; }
Read this answer in context 0

Additional System Details

Application

  • User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:61.0) Gecko/20100101 Firefox/61.0

More Information

{
"application": {
"name": "Firefox",
"osVersion": "Windows_NT 10.0",
"version": "61.0.2",
"buildID": "20180807170231",
"userAgent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:61.0) Gecko/20100101 Firefox/61.0",
"safeMode": false,
"updateChannel": "release",
"supportURL": "https://support.mozilla.org/1/firefox/61.0.2/WINNT/en-US/",
"numTotalWindows": 1,
"numRemoteWindows": 0,
"remoteAutoStart": false,
"currentContentProcesses": 0,
"maxContentProcesses": 4,
"autoStartStatus": 2,
"policiesStatus": 0,
"keyGoogleFound": true,
"keyMozillaFound": true
}
}

cor-el
  • Top 10 Contributor
  • Moderator
17416 solutions 157342 answers

Chosen Solution

You need to add the !important flag to override an existing rule.

  • view-source:chrome://browser/content/tabbrowser.css

.tabbrowser-tab[pinned="true"] :-moz-any(.tab-icon-sound,.tab-icon-overlay[muted]) { display: none !important; }
You need to add the <b>!important</b> flag to override an existing rule. *view-source:chrome://browser/content/tabbrowser.css ---- <pre><nowiki>.tabbrowser-tab[pinned="true"] :-moz-any(.tab-icon-sound,.tab-icon-overlay[muted]) { display: none !important; }</nowiki></pre>

Question owner

cor-el said

You need to add the !important flag to override an existing rule.
  • view-source:chrome://browser/content/tabbrowser.css

Thank You so much! That did the trick.

''cor-el [[#answer-1142174|said]]'' <blockquote> You need to add the <b>!important</b> flag to override an existing rule. *view-source:chrome://browser/content/tabbrowser.css </blockquote> Thank You so much! That did the trick.

Modified by Rey Kenobi