1 files changed, 150 insertions, 0 deletions
diff --git a/toolkit/themes/shared/pictureinpicture/player.css b/toolkit/themes/shared/pictureinpicture/player.css
new file mode 100644
index 0000000000..4d4c798f04
--- /dev/null
+++ b/toolkit/themes/shared/pictureinpicture/player.css
@@ -0,0 +1,150 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+:root {
+  --player-bg-color: #000;
+  --btn-bg-color: rgba(50,50,50,0.55);
+  --close-btn-bg-color: rgb(211,216,220);
+  --resize-margin: 5px;
+}
+
+button::-moz-focus-inner {
+  border: 0;
+}
+
+body {
+  margin: 0;
+  background-color: var(--player-bg-color);
+}
+
+body:fullscreen {
+  -moz-window-dragging: no-drag;
+}
+
+.player-holder {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  overflow: hidden;
+}
+
+browser {
+  flex: 1;
+}
+
+#controls {
+  height: calc(100% - 2 * var(--resize-margin));
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: calc(100% - 2 * var(--resize-margin));
+  margin: var(--resize-margin);
+  -moz-window-dragging: drag;
+}
+
+#controls button {
+  appearance: none;
+  border: 0;
+}
+
+#controls[keying] button:-moz-focusring {
+  outline: 2px solid #fff;
+  box-shadow: 1px 2px 5px #000;
+}
+
+#controls-bottom {
+  display: flex;
+  position: absolute;
+  bottom: 15px;
+  justify-content: center;
+  width: 100%;
+}
+
+.gap {
+  flex: 0.1;
+  max-width: 50px;
+}
+
+.control-item {
+  -moz-window-dragging: no-drag;
+  background-color: var(--btn-bg-color);
+  border-radius: 4px;
+  cursor: pointer;
+  /**
+   * Make the button dimensions a square proportional to one
+   * dimension of the window - in this case, the width dimension,
+   * since we suspect most videos are wider than they are tall.
+   */
+  height: 10vmax;
+  width: 10vmax;
+  max-height: 32px;
+  max-width: 32px;
+  min-height: 16px;
+  min-width: 16px;
+  transition: opacity 160ms linear;
+  opacity: 0;
+  background-repeat: no-repeat;
+}
+
+#controls[keying] .control-item:focus {
+  border-radius: 0px;
+}
+
+#controls:hover .control-item {
+  opacity: 0.8;
+}
+
+#controls[keying] .control-item,
+#controls[showing] .control-item,
+#controls:hover .control-item:hover {
+  opacity: 1;
+}
+
+#close {
+  background-color: var(--close-btn-bg-color);
+  background-image: url("chrome://global/skin/pictureinpicture/close-pip.svg");
+  position: absolute;
+  right: 10px;
+  top: 10px;
+}
+
+#close[mac="true"] {
+  right: auto;
+  left: 10px;
+}
+
+#playpause {
+  left: 55%;
+}
+
+#controls.playing #playpause {
+  background-image: url("chrome://global/skin/pictureinpicture/pause.svg");
+}
+
+#controls:not(.playing) #playpause {
+  background-image: url("chrome://global/skin/pictureinpicture/play.svg");
+}
+
+#controls.muted #audio {
+  background-image: url("chrome://global/skin/pictureinpicture/audio-mute.svg");
+}
+
+#controls:not(.muted) #audio {
+  background-image: url("chrome://global/skin/pictureinpicture/audio.svg");
+}
+
+#unpip {
+  left: 45%;
+}
+
+#unpip {
+  background-image: url("chrome://global/skin/pictureinpicture/unpip.svg");
+  background-position: 60%;
+  background-repeat: no-repeat;
+  background-size: 80%;
+}
+
+#unpip:-moz-locale-dir(rtl) {
+  transform: scaleX(-1);
+}