Fix: Tab - Restore overlay icon shape #1011

black7375 · Nov 4, 2024 · ed98668 · ed98668
1 parent 00afdf1
commit ed98668
Show file tree

Hide file tree

Showing 3 changed files with 79 additions and 0 deletions.
diff --git a/css/leptonChrome.css b/css/leptonChrome.css
diff --git a/css/leptonChromeESR.css b/css/leptonChromeESR.css
diff --git 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;