diff options
Diffstat (limited to 'toolkit/themes/shared/pictureinpicture')
7 files changed, 177 insertions, 0 deletions
diff --git a/toolkit/themes/shared/pictureinpicture/audio-mute.svg b/toolkit/themes/shared/pictureinpicture/audio-mute.svg new file mode 100644 index 0000000000..0841742553 --- /dev/null +++ b/toolkit/themes/shared/pictureinpicture/audio-mute.svg @@ -0,0 +1,4 @@ +<!-- 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/. --> +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g fill="#F9F9FA"><path d="M13 8a2.813 2.813 0 0 0-.465-1.535l-.744.744A1.785 1.785 0 0 1 12 8a2.008 2.008 0 0 1-1.4 1.848.5.5 0 0 0 .343.939A3 3 0 0 0 13 8z"/><path d="M13.273 5.727A3.934 3.934 0 0 1 14 8a3.984 3.984 0 0 1-2.742 3.775.5.5 0 0 0 .316.949A4.985 4.985 0 0 0 15 8a4.93 4.93 0 0 0-1.012-2.988zm-4.603 7.99a.2.2 0 0 0 .33-.152V10l-2.154 2.154zm6.037-12.424a1 1 0 0 0-1.414 0L9 5.586V2.544a.25.25 0 0 0-.413-.19L5.5 5H4.191A2.191 2.191 0 0 0 2 7.191v1.618a2.186 2.186 0 0 0 1.659 2.118l-2.366 2.366a1 1 0 1 0 1.414 1.414l12-12a1 1 0 0 0 0-1.414z"/></g></svg>
\ No newline at end of file diff --git a/toolkit/themes/shared/pictureinpicture/audio.svg b/toolkit/themes/shared/pictureinpicture/audio.svg new file mode 100644 index 0000000000..e53aafd806 --- /dev/null +++ b/toolkit/themes/shared/pictureinpicture/audio.svg @@ -0,0 +1,4 @@ +<!-- 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/. --> +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g fill="#F9F9FA" fill-opacity=".8"><path d="M8.587 2.354L5.5 5H4.191A2.191 2.191 0 0 0 2 7.191v1.618A2.191 2.191 0 0 0 4.191 11H5.5l3.17 2.717a.2.2 0 0 0 .33-.152V2.544a.25.25 0 0 0-.413-.19zm2.988.921a.5.5 0 0 0-.316.949 3.97 3.97 0 0 1 0 7.551.5.5 0 0 0 .316.949 4.971 4.971 0 0 0 0-9.449z"/><path d="M13 8a3 3 0 0 0-2.056-2.787.5.5 0 1 0-.343.939A2.008 2.008 0 0 1 12 8a2.008 2.008 0 0 1-1.4 1.848.5.5 0 0 0 .343.939A3 3 0 0 0 13 8z"/></g></svg>
\ No newline at end of file diff --git a/toolkit/themes/shared/pictureinpicture/close-pip.svg b/toolkit/themes/shared/pictureinpicture/close-pip.svg new file mode 100644 index 0000000000..d4bec54f8d --- /dev/null +++ b/toolkit/themes/shared/pictureinpicture/close-pip.svg @@ -0,0 +1,5 @@ +<!-- 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/. --> +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M9.061 8l3.47-3.47a.75.75 0 0 0-1.061-1.06L8 6.939 4.53 3.47a.75.75 0 1 0-1.06 1.06L6.939 8 3.47 11.47a.75.75 0 1 0 1.06 1.06L8 9.061l3.47 3.47a.75.75 0 0 0 1.06-1.061z"/></svg> + diff --git a/toolkit/themes/shared/pictureinpicture/pause.svg b/toolkit/themes/shared/pictureinpicture/pause.svg new file mode 100644 index 0000000000..29df0834f7 --- /dev/null +++ b/toolkit/themes/shared/pictureinpicture/pause.svg @@ -0,0 +1,4 @@ +<!-- 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/. --> +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g fill="#F9F9FA" fill-rule="evenodd" fill-opacity=".8"><rect x="3" y="3" width="4" height="10" rx=".5"/><rect x="9" y="3" width="4" height="10" rx=".5"/></g></svg> diff --git a/toolkit/themes/shared/pictureinpicture/play.svg b/toolkit/themes/shared/pictureinpicture/play.svg new file mode 100644 index 0000000000..fd76cd1a7b --- /dev/null +++ b/toolkit/themes/shared/pictureinpicture/play.svg @@ -0,0 +1,4 @@ +<!-- 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/. --> +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="#F9F9FA" d="M4 3.995c0-.55.386-.754.856-.46l6.288 3.93c.473.295.47.776 0 1.07l-6.288 3.93c-.473.295-.856.08-.856-.46v-8.01z"/></svg> 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); +} diff --git a/toolkit/themes/shared/pictureinpicture/unpip.svg b/toolkit/themes/shared/pictureinpicture/unpip.svg new file mode 100644 index 0000000000..e92ce189c3 --- /dev/null +++ b/toolkit/themes/shared/pictureinpicture/unpip.svg @@ -0,0 +1,6 @@ +<!-- 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/. --> +<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#fff"> + <path d="M18 4.5c1.6545 0 3 1.3455 3 3v5.25c0 .414-.336.75-.75.75s-.75-.336-.75-.75V7.5c0-.82725-.67275-1.5-1.5-1.5H6c-.82725 0-1.5.67275-1.5 1.5v9c0 .82725.67275 1.5 1.5 1.5h8.25c.414 0 .75.336.75.75s-.336.75-.75.75H6c-1.6545 0-3-1.3455-3-3v-9c0-1.6545 1.3455-3 3-3zM19.125 15c.207 0 .375.168.375.375s-.168.375-.375.375h-1.34475l3.1095 3.1095c.147.147.147.384 0 .531-.07275.07275-.16875.1095-.26475.1095-.096 0-.192-.03675-.2655-.1095L17.25 16.28025V17.625c0 .207-.168.375-.375.375s-.375-.168-.375-.375v-2.25c0-.04875.00975-.0975.02925-.14325.0375-.0915.11025-.165.2025-.2025A.365271.365271 0 0116.875 15zM14.25 7.5c.414 0 .75.336.75.75v4.5c0 .414-.336.75-.75.75h-7.5c-.414 0-.75-.336-.75-.75v-4.5c0-.414.336-.75.75-.75z"/> +</svg>
\ No newline at end of file |
