From afae4e0a92207d7a53173eeeff5e535f33e55b81 Mon Sep 17 00:00:00 2001
From: bmFtZQ <62812711+bmFtZQ@users.noreply.github.com>
Date: Fri, 2 Apr 2021 04:07:42 +0800
Subject: [PATCH] add picture in picture theme

---
 chrome/popup/popup.css | 52 +++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 51 insertions(+), 1 deletion(-)

diff --git a/chrome/popup/popup.css b/chrome/popup/popup.css
index e30290b..2f572c4 100644
--- a/chrome/popup/popup.css
+++ b/chrome/popup/popup.css
@@ -1144,6 +1144,56 @@ richlistitem:-moz-any(
 	margin-inline-end: 0 !important;
 }
 
+/* Picture In Picture */
+#controls-bottom {
+	left: calc(-1 * var(--resize-margin)) !important;
+	bottom: calc(-1 * var(--resize-margin)) !important;
+	width: calc(100% + var(--resize-margin) * 2) !important;
+}
+.control-item {
+	background-size: 20px !important;
+	min-height: 24px !important;
+	min-width: 24px !important;
+	background-position: center !important;
+	-moz-context-properties: fill !important;
+	fill: #fff !important;
+	margin-block: 8px !important;
+	opacity: 1 !important;
+	--close-btn-bg-color: #0006 !important;
+	--btn-bg-color: #0000 !important;
+}
+.control-item:hover {
+	--btn-bg-color: #fff8 !important;
+}
+#controls-bottom {
+	background-color: #0006 !important;
+}
+#controls {
+	opacity: 0 !important;;
+}
+#controls:hover {
+	opacity: 1 !important;;
+}
+#unpip {
+	background-image: url(icons/open.svg) !important;
+}
+#controls:not(.playing) #playpause {
+	background-image: url(icons/play.svg) !important;
+}
+#controls.playing #playpause {
+	background-image: url(icons/pause.svg) !important;
+}
+#controls:not(.muted) #audio {
+	background-image: url(icons/audio.svg) !important;
+}
+#controls.muted #audio {
+	background-image: url(icons/audio-mute.svg) !important;
+}
+#close {
+	background-image: url(icons/close.svg) !important;
+	margin: 0 !important;
+	box-shadow: 0 0 0 99px inset var(--btn-bg-color) !important;
+}
 
 /* Popup Icons */
 
@@ -1318,4 +1368,4 @@ menuitem[id*="placesContext_open"] {
 }
 #context-viewvideo {
 	background-image: url(icons/video-clip.svg) !important;
-}
\ No newline at end of file
+}