diff --git a/css/leptonChrome.css b/css/leptonChrome.css index e03f87e6..02ad6229 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -8331,6 +8331,24 @@ width: 17px !important; height: 17px !important; } + .tab-icon-overlay:not([crashed]):is([soundplaying], [muted], [activemedia-blocked]) { + -moz-context-properties: fill, fill-opacity, stroke !important; + fill: currentColor !important; + border: none !important; + } + .tab-icon-overlay:not([crashed]):is([pinned], [sharing]) { + stroke: var(--tab-icon-overlay-stroke, light-dark(white, black)); + color: var(--tab-icon-overlay-fill, light-dark(black, white)); + } + .tab-icon-overlay:not([crashed])[soundplaying] { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-playing-small.svg"); + } + .tab-icon-overlay:not([crashed])[muted] { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-muted-small.svg"); + } + .tab-icon-overlay:not([crashed])[soundplaying] { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-blocked-small.svg"); + } .tab-icon-overlay:not([sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) { /* Color */ color: currentColor !important; @@ -22921,6 +22939,26 @@ height: 17px !important; } } +@media (-moz-bool-pref: "userChrome.tab.sound_with_favicons") { + .tab-icon-overlay:not([crashed]):is([soundplaying], [muted], [activemedia-blocked]) { + -moz-context-properties: fill, fill-opacity, stroke !important; + fill: currentColor !important; + border: none !important; + } + .tab-icon-overlay:not([crashed]):is([pinned], [sharing]) { + stroke: var(--tab-icon-overlay-stroke, light-dark(white, black)); + color: var(--tab-icon-overlay-fill, light-dark(black, white)); + } + .tab-icon-overlay:not([crashed])[soundplaying] { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-playing-small.svg"); + } + .tab-icon-overlay:not([crashed])[muted] { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-muted-small.svg"); + } + .tab-icon-overlay:not([crashed])[soundplaying] { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-blocked-small.svg"); + } +} @media (-moz-bool-pref: "userChrome.tab.sound_with_favicons") { .tab-icon-overlay:not([sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) { /* Color */ diff --git a/css/leptonChromeESR.css b/css/leptonChromeESR.css index af55d016..4902780e 100644 --- a/css/leptonChromeESR.css +++ b/css/leptonChromeESR.css @@ -8761,6 +8761,24 @@ width: 17px !important; height: 17px !important; } + .tab-icon-overlay:not([crashed]):is([soundplaying], [muted], [activemedia-blocked]) { + -moz-context-properties: fill, fill-opacity, stroke !important; + fill: currentColor !important; + border: none !important; + } + .tab-icon-overlay:not([crashed]):is([pinned], [sharing]) { + stroke: var(--tab-icon-overlay-stroke, light-dark(white, black)); + color: var(--tab-icon-overlay-fill, light-dark(black, white)); + } + .tab-icon-overlay:not([crashed])[soundplaying] { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-playing-small.svg"); + } + .tab-icon-overlay:not([crashed])[muted] { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-muted-small.svg"); + } + .tab-icon-overlay:not([crashed])[soundplaying] { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-blocked-small.svg"); + } .tab-icon-overlay:not([sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) { /* Color */ color: currentColor !important; diff --git a/src/tab/sound_tab/_show_with_favicons.scss b/src/tab/sound_tab/_show_with_favicons.scss index 4d1a5db1..c76a3b14 100644 --- a/src/tab/sound_tab/_show_with_favicons.scss +++ b/src/tab/sound_tab/_show_with_favicons.scss @@ -60,6 +60,29 @@ width: 17px !important; height: 17px !important; } +.tab-icon-overlay:not([crashed]) { + // https://github.com/black7375/Firefox-UI-Fix/issues/1011 + &:is([soundplaying], [muted], [activemedia-blocked]) { + -moz-context-properties: fill, fill-opacity, stroke !important; + fill: currentColor !important; + border: none !important; + } + &:is([pinned], [sharing]) { + stroke: var(--tab-icon-overlay-stroke, light-dark(white, black)); + color: var(--tab-icon-overlay-fill, light-dark(black, white)); + } + + // There is a difference in size between background-image and list-style-image due to margins, etc. + &[soundplaying] { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-playing-small.svg"); + } + &[muted] { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-muted-small.svg"); + } + &[soundplaying] { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-blocked-small.svg"); + } +} .tab-icon-overlay:not([sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) { /* Color */ color: currentColor !important;