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;