move sound icon on top of favicon with low space

moves sound icon on top of favicon to make the tabs more compact (when
there isn't much space). Also fixes padding on the Update banner in the
app menu.

chrome/content/newtab.css

@@ -230,7 +230,6 @@
       background-position: center !important;
       background-size: cover !important;
       background-attachment: fixed !important;
-      transition: background 0.25s ease !important;
     }
 
     body[lwt-newtab][lwt-newtab-brighttext] {

chrome/global/colors.css

@@ -65,6 +65,8 @@
   --uc-private-browding-indicator-hover: var(--button-primary-hover-bgcolor);
   --uc-private-browding-indicator-active: var(--button-primary-active-bgcolor);
   --uc-private-browding-indicator-text: var(--button-primary-color);
+  --tab-icon-overlay-stroke: #fff !important;
+  --tab-icon-overlay-fill: #252525 !important;
 }
 
 /* dark */
@@ -131,6 +133,8 @@
   --uc-private-browding-indicator-hover: var(--button-primary-hover-bgcolor);
   --uc-private-browding-indicator-active: var(--button-primary-active-bgcolor);
   --uc-private-browding-indicator-text: var(--button-primary-color);
+  --tab-icon-overlay-stroke: #4b4b4b !important;
+  --tab-icon-overlay-fill: #fff !important;
 }
 
 #urlbar {

chrome/global/popup.css

@@ -42,7 +42,7 @@
 /* app menu */
 .addon-banner-item,
 .panel-banner-item {
-  margin: 0 4px 4px !important;
+  margin: 2px 4px 2px !important;
   padding-inline: 4px 12px !important;
   padding-block: var(--arrowpanel-menuitem-padding-block) !important;
   border-radius: var(--arrowpanel-menuitem-border-radius) !important;

chrome/toolbar/tabbar.css

@@ -182,7 +182,7 @@
   opacity: 1 !important;
 }
 
-.tab-icon-overlay:not([pinned]) {
+#tabbrowser-tabs:not([closebuttons="activetab"]) .tab-icon-overlay:not([pinned]) {
   margin-inline: 22px 6px !important;
 }
 
@@ -190,10 +190,52 @@
   margin-inline: 0px 6px !important;
 }
 
+/* move sound playing icon on top of favicon when there isn't enough space */
+.tab-icon-overlay:not([crashed]):is([pinned], [sharing]),
+#tabbrowser-tabs[closebuttons="activetab"] .tab-icon-overlay:not([crashed]) {
+  top: -5.5px !important;
+  inset-inline-end: -6px !important;
+}
+
+#tabbrowser-tabs[closebuttons="activetab"] :is(
+  .tab-icon-overlay[soundplaying]:not([crashed]),
+  .tab-icon-overlay[muted]:not([crashed]),
+  .tab-icon-overlay[activemedia-blocked]:not([crashed])
+) {
+  stroke: var(--tab-icon-overlay-stroke, white) !important;
+  color: var(--tab-icon-overlay-fill, black) !important;
+  fill-opacity: 1 !important;
+}
+
+#TabsToolbar[brighttext] #tabbrowser-tabs[closebuttons="activetab"] :is(
+  .tab-icon-overlay[soundplaying]:not([crashed]),
+  .tab-icon-overlay[muted]:not([crashed]),
+  .tab-icon-overlay[activemedia-blocked]:not([crashed])
+) {
+  stroke: var(--tab-icon-overlay-stroke, black) !important;
+  color: var(--tab-icon-overlay-fill, white) !important;
+}
+
+#tabbrowser-tabs[closebuttons="activetab"] :is(
+  .tab-icon-overlay:not([crashed])[soundplaying]:hover,
+  .tab-icon-overlay:not([crashed])[muted]:hover,
+  .tab-icon-overlay:not([crashed])[activemedia-blocked]:hover
+) {
+  background-color: var(--tab-icon-overlay-stroke, white) !important;
+}
+
+#TabsToolbar[brighttext] #tabbrowser-tabs[closebuttons="activetab"] :is(
+  .tab-icon-overlay:not([crashed])[soundplaying]:hover,
+  .tab-icon-overlay:not([crashed])[muted]:hover,
+  .tab-icon-overlay:not([crashed])[activemedia-blocked]:hover
+) {
+  background-color: var(--tab-icon-overlay-stroke, black) !important;
+}
+
 .tab-icon-overlay[soundplaying]:not([crashed]),
 .tab-icon-overlay[muted]:not([crashed]),
 .tab-icon-overlay[activemedia-blocked]:not([crashed]) {
-  border-radius: 2px !important;
+  border-radius: 4px !important;
   padding: 0 !important;
 }