diff --git a/chrome/icons/icons.css b/chrome/icons/icons.css
index 359f60a..8867528 100644
--- a/chrome/icons/icons.css
+++ b/chrome/icons/icons.css
@@ -429,3 +429,16 @@
.popup-notification-icon[popupid="addon-install-origin-blocked"] {
list-style-image: url(extension-blocked.svg) !important;
}
+
+/* tab sound icons */
+.tab-icon-overlay[soundplaying] {
+ list-style-image: url("tab-audio-playing-small.svg") !important;
+}
+
+.tab-icon-overlay[muted] {
+ list-style-image: url("tab-audio-muted-small.svg") !important;
+}
+
+.tab-icon-overlay[activemedia-blocked] {
+ list-style-image: url("tab-audio-blocked-small.svg") !important;
+}
diff --git a/chrome/icons/tab-audio-blocked-small.svg b/chrome/icons/tab-audio-blocked-small.svg
new file mode 100644
index 0000000..f5af4d4
--- /dev/null
+++ b/chrome/icons/tab-audio-blocked-small.svg
@@ -0,0 +1,4 @@
+
diff --git a/chrome/icons/tab-audio-muted-small.svg b/chrome/icons/tab-audio-muted-small.svg
new file mode 100644
index 0000000..442fd7f
--- /dev/null
+++ b/chrome/icons/tab-audio-muted-small.svg
@@ -0,0 +1,4 @@
+
diff --git a/chrome/icons/tab-audio-playing-small.svg b/chrome/icons/tab-audio-playing-small.svg
new file mode 100644
index 0000000..896a890
--- /dev/null
+++ b/chrome/icons/tab-audio-playing-small.svg
@@ -0,0 +1,4 @@
+
diff --git a/chrome/toolbar/tabbar.css b/chrome/toolbar/tabbar.css
index 70d7412..d0ff971 100644
--- a/chrome/toolbar/tabbar.css
+++ b/chrome/toolbar/tabbar.css
@@ -105,7 +105,8 @@
fill: var(--lwt-text-color) !important;
}
-.tabbrowser-tab[multiselected]:not(:-moz-lwtheme), .tabbrowser-tab[visuallyselected="true"]:not(:-moz-lwtheme) {
+.tabbrowser-tab[multiselected]:not(:-moz-lwtheme),
+.tabbrowser-tab[visuallyselected="true"]:not(:-moz-lwtheme) {
color: var(--lwt-tab-text, var(--toolbar-color)) !important;
}
@@ -117,10 +118,34 @@
border-radius: 2px !important;
}
-.tab-throbber:not([pinned]), .tab-icon-pending:not([pinned]), .tab-icon-image:not([pinned]), .tab-sharing-icon-overlay:not([pinned]), .tab-icon-overlay:not([pinned]) {
+.tab-throbber:not([pinned]),
+.tab-icon-pending:not([pinned]),
+.tab-icon-image:not([pinned]),
+.tab-sharing-icon-overlay:not([pinned]) {
margin-inline-end: 10px !important;
}
+/* tab volume icon/text */
+.tab-secondary-label {
+ display: none !important;
+}
+
+.tab-icon-stack:is([soundplaying], [muted], [activemedia-blocked]) > .tab-icon-overlay,
+.tabbrowser-tab:hover .tab-icon-stack:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) > :not(.tab-icon-overlay) {
+ opacity: 1 !important;
+}
+
+.tab-icon-overlay:not([pinned]) {
+ margin-inline: 22px 6px !important;
+}
+
+.tab-icon-overlay[soundplaying]:not([crashed]),
+.tab-icon-overlay[muted]:not([crashed]),
+.tab-icon-overlay[activemedia-blocked]:not([crashed]) {
+ border-radius: 2px !important;
+ padding: 0 !important;
+}
+
.tabbrowser-tab {
font-size: 12px !important;
padding-inline: 0 !important;