diff --git a/chrome/icons/audio-muted.svg b/chrome/icons/audio-muted.svg
index ba7a63a..fadc010 100644
--- a/chrome/icons/audio-muted.svg
+++ b/chrome/icons/audio-muted.svg
@@ -1,3 +1,9 @@
diff --git a/chrome/icons/audio.svg b/chrome/icons/audio.svg
index 41deda3..a0a9f39 100644
--- a/chrome/icons/audio.svg
+++ b/chrome/icons/audio.svg
@@ -1,3 +1,9 @@
diff --git a/chrome/icons/icons.css b/chrome/icons/icons.css
index 4d944f7..deec065 100644
--- a/chrome/icons/icons.css
+++ b/chrome/icons/icons.css
@@ -347,13 +347,42 @@ richlistitem[originaltype="loginsFooter"] .ac-site-icon,
padding-left: 16px !important;
}
-.tab-icon-pending[pinned], .tab-icon-image:not([src], [pinned], [crashed], [pictureinpicture])[selected], .tab-icon-image:not([src], [pinned], [crashed], [sharing], [pictureinpicture]), .tab-icon-image[busy], .tab-throbber:not([busy]), .tab-icon-sound:not([soundplaying], [muted], [activemedia-blocked], [pictureinpicture]), .tab-icon-sound[pinned], .tab-sharing-icon-overlay, .tab-icon-overlay,
-.tab-icon-overlay[soundplaying],
+.tab-icon-pending[pinned], .tab-icon-image:not([src], [pinned], [crashed], [pictureinpicture])[selected], .tab-icon-image:not([src], [pinned], [crashed], [sharing], [pictureinpicture]), .tab-icon-image[busy], .tab-throbber:not([busy]), .tab-icon-sound:not([soundplaying], [muted], [activemedia-blocked], [pictureinpicture]), .tab-icon-sound[pinned], .tab-sharing-icon-overlay,
.tab-icon-sound
{
list-style-image: url(audio.svg) !important;
}
+.tab-icon-sound[muted]
+{
+ list-style-image: url(audio-muted.svg) !important;
+}
+
+.tab-icon-sound[pictureinpicture] {
+ list-style-image: url(picture-in-picture.svg) !important;
+ width: 16px !important;
+ height: 16px !important;
+}
+
+.tab-icon-overlay {
+ border-radius: 2px !important;
+ margin-inline: -10px -6px !important;
+}
+
+.tab-icon-overlay[soundplaying] {
+ list-style-image: url(audio.svg#overlayStroke) !important;
+ -moz-context-properties: fill, fill-opacity, stroke, stroke-opacity !important;
+ fill: var(--toolbar-color) !important;
+ stroke: var(--toolbar-bgcolor) !important;
+}
+
+.tab-icon-overlay[muted] {
+ list-style-image: url(audio-muted.svg#overlayStroke) !important;
+ -moz-context-properties: fill, fill-opacity, stroke, stroke-opacity !important;
+ fill: var(--toolbar-color) !important;
+ stroke: var(--toolbar-bgcolor) !important;
+}
+
#pageAction-panel-pinTab, #pageAction-urlbar-pinTab {
list-style-image: url(pin.svg) !important;
}
@@ -362,12 +391,6 @@ richlistitem[originaltype="loginsFooter"] .ac-site-icon,
list-style-image: url(share.svg) !important;
}
-.tab-icon-overlay[muted],
-.tab-icon-sound[muted]
-{
- list-style-image: url(audio-muted.svg) !important;
-}
-
.tab-icon-overlay[activemedia-blocked],
.tab-icon-sound[activemedia-blocked]
{
diff --git a/chrome/icons/picture-in-picture.svg b/chrome/icons/picture-in-picture.svg
new file mode 100644
index 0000000..d5b5391
--- /dev/null
+++ b/chrome/icons/picture-in-picture.svg
@@ -0,0 +1,3 @@
+