diff options
Diffstat (limited to 'toolkit/themes/shared/media')
20 files changed, 1001 insertions, 0 deletions
diff --git a/toolkit/themes/shared/media/TopLevelImageDocument.css b/toolkit/themes/shared/media/TopLevelImageDocument.css new file mode 100644 index 0000000000..5242175161 --- /dev/null +++ b/toolkit/themes/shared/media/TopLevelImageDocument.css @@ -0,0 +1,17 @@ +/* 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/. */ + +@media not print { + /* N.B.: Remember to update ImageDocument.css in the tree or reftests may fail! */ + + body { + color: #eee; + background-image: url("chrome://global/skin/media/imagedoc-darknoise.png"); + } + + img.transparent { + background: hsl(0,0%,90%) url("chrome://global/skin/media/imagedoc-lightnoise.png"); + color: #222; + } +} diff --git a/toolkit/themes/shared/media/TopLevelVideoDocument.css b/toolkit/themes/shared/media/TopLevelVideoDocument.css new file mode 100644 index 0000000000..2d857ced2d --- /dev/null +++ b/toolkit/themes/shared/media/TopLevelVideoDocument.css @@ -0,0 +1,12 @@ +/* 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/. */ + +body { + background-image: url("chrome://global/skin/media/imagedoc-darknoise.png"); + background-color: rgb(33,33,33); /* Average color of that ^ image. */ +} + +video { + box-shadow: 0 0 5px rgba(0,0,0,0.6); +} diff --git a/toolkit/themes/shared/media/audioMutedButton.svg b/toolkit/themes/shared/media/audioMutedButton.svg new file mode 100644 index 0000000000..d0b9cb8424 --- /dev/null +++ b/toolkit/themes/shared/media/audioMutedButton.svg @@ -0,0 +1,10 @@ +<!-- 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="18px" height="18px" viewBox="0 0 18 18"> + <path fill="context-fill" d="M3.52,5.367c-1.332,0-2.422,1.09-2.422,2.422v2.422c0,1.332,1.09,2.422,2.422,2.422h1.516l4.102,3.633V1.735L5.035,5.367H3.52z"/> + <path fill="context-fill" fill-rule="evenodd" d="M12.155,12.066l-1.138-1.138l4.872-4.872l1.138,1.138 L12.155,12.066z"/> + <path fill="context-fill" fill-rule="evenodd" d="M10.998,7.204l1.138-1.138l4.872,4.872l-1.138,1.138L10.998,7.204z"/> +</svg> + diff --git a/toolkit/themes/shared/media/audioNoAudioButton.svg b/toolkit/themes/shared/media/audioNoAudioButton.svg new file mode 100644 index 0000000000..7d5c60a09c --- /dev/null +++ b/toolkit/themes/shared/media/audioNoAudioButton.svg @@ -0,0 +1,11 @@ +<!-- 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="18px" height="18px" viewBox="0 0 18 18"> + <path fill="context-fill" + d="M14.901,3.571l-4.412,3.422V1.919L6.286,5.46H4.869c-1.298,0-2.36,1.062-2.36,2.36v2.36 + c0,1.062,0.708,1.888,1.652,2.242l-2.242,1.77l1.18,1.416L16.081,4.987L14.901,3.571z M10.489,16.081V11.36l-2.669,2.36 + L10.489,16.081z"/> +</svg> + diff --git a/toolkit/themes/shared/media/audioUnmutedButton.svg b/toolkit/themes/shared/media/audioUnmutedButton.svg new file mode 100644 index 0000000000..b5f80c0114 --- /dev/null +++ b/toolkit/themes/shared/media/audioUnmutedButton.svg @@ -0,0 +1,13 @@ +<!-- 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="18px" height="18px" viewBox="0 0 18 18"> + <path fill="context-fill" + d="M3.52,5.367c-1.332,0-2.422,1.09-2.422,2.422v2.422c0,1.332,1.09,2.422,2.422,2.422h1.516l4.102,3.633 + V1.735L5.035,5.367H3.52z M12.059,9c0-0.727-0.484-1.211-1.211-1.211v2.422C11.574,10.211,12.059,9.727,12.059,9z M14.48,9 + c0-1.695-1.211-3.148-2.785-3.512l-0.363,1.09C12.422,6.82,13.27,7.789,13.27,9c0,1.211-0.848,2.18-1.938,2.422l0.484,1.09 + C13.27,12.148,14.48,10.695,14.48,9z M12.543,3.188l-0.484,1.09C14.238,4.883,15.691,6.82,15.691,9c0,2.18-1.453,4.117-3.512,4.601 + l0.484,1.09c2.422-0.605,4.238-2.906,4.238-5.691C16.902,6.215,15.086,3.914,12.543,3.188z"/> +</svg> + diff --git a/toolkit/themes/shared/media/castingButton-active.svg b/toolkit/themes/shared/media/castingButton-active.svg new file mode 100644 index 0000000000..f57d30b2c1 --- /dev/null +++ b/toolkit/themes/shared/media/castingButton-active.svg @@ -0,0 +1,9 @@ +<!-- 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="18px" height="18px" viewBox="0 0 18 18"> + <path fill="context-fill" + d="M0 13.91v2.454h2.455A2.451 2.451 0 0 0 0 13.909zm0-3.274v1.637a4.092 4.092 0 0 1 4.09 4.09h1.637A5.723 5.723 0 0 0 0 10.637zM14.727 4.91H3.273v1.334a10.664 10.664 0 0 1 6.848 6.848h4.606zM0 7.364V9a7.364 7.364 0 0 1 7.364 7.364H9a9 9 0 0 0-9-9zm16.364-5.728H1.636C.736 1.636 0 2.373 0 3.273v2.454h1.636V3.273h14.728v11.454h-5.728v1.637h5.728c.9 0 1.636-.737 1.636-1.637V3.273c0-.9-.736-1.637-1.636-1.637z" + fill-rule="evenodd"/> +</svg> diff --git a/toolkit/themes/shared/media/castingButton-ready.svg b/toolkit/themes/shared/media/castingButton-ready.svg new file mode 100644 index 0000000000..7622e7349d --- /dev/null +++ b/toolkit/themes/shared/media/castingButton-ready.svg @@ -0,0 +1,9 @@ +<!-- 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="18px" height="18px" viewBox="0 0 18 18"> + <path fill="context-fill" + d="M16.364 1.636H1.636C.736 1.636 0 2.373 0 3.273v2.454h1.636V3.273h14.728v11.454h-5.728v1.637h5.728c.9 0 1.636-.737 1.636-1.637V3.273c0-.9-.736-1.637-1.636-1.637zM0 13.91v2.455h2.455A2.451 2.451 0 0 0 0 13.909zm0-3.273v1.637a4.092 4.092 0 0 1 4.09 4.09h1.637A5.723 5.723 0 0 0 0 10.637zm0-3.272V9a7.364 7.364 0 0 1 7.364 7.364H9a9 9 0 0 0-9-9z" + fill-rule="evenodd" /> +</svg> diff --git a/toolkit/themes/shared/media/closedCaptionButton-cc-off.svg b/toolkit/themes/shared/media/closedCaptionButton-cc-off.svg new file mode 100644 index 0000000000..481c5c9cab --- /dev/null +++ b/toolkit/themes/shared/media/closedCaptionButton-cc-off.svg @@ -0,0 +1,16 @@ +<!-- 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="18px" height="18px" viewBox="0 0 18 18"> + <path fill="context-fill" fill-rule="evenodd" + d="M16.531,16.107H5.267l1.982-2H15c0.6,0,1-0.4,1-1V5.274 + l1.946-1.964C17.963,3.399,18,3.483,18,3.576v11.031C18,15.407,17.331,16.107,16.531,16.107z M14.016,8.506h-1.218l1.005-1.014 + C13.913,7.789,13.984,8.128,14.016,8.506z M11.786,12.361c-0.828,0-1.476-0.326-1.913-0.902l1.09-1.101 + c0.136,0.323,0.374,0.541,0.796,0.541c0.514,0,0.695-0.44,0.756-1.014h1.535C13.908,11.43,13.071,12.361,11.786,12.361z + M1.496,16.106C0.697,16.104,0,15.406,0,14.607V3.576c0-0.8,0.7-1.5,1.5-1.5h12.846L16.299,0l1.316,1.283L2.615,17.13L1.496,16.106 + z M3,4.107c-0.6,0-1,0.4-1,1v8c0,0.6,0.4,1,1,1h0.029l2.031-2.16c-0.757-0.503-1.191-1.457-1.191-2.744 + c0-1.936,1.069-3.14,2.428-3.14c1.357,0,2.136,0.76,2.361,2.059l3.777-4.016H3z M8.298,8.506H7.355 + c-0.047-0.623-0.49-1.23-0.99-1.23c-0.561,0-1.337,0.84-1.337,1.995c0,0.674,0.381,1.427,0.95,1.702L8.298,8.506z"/> +</svg> + diff --git a/toolkit/themes/shared/media/closedCaptionButton-cc-on.svg b/toolkit/themes/shared/media/closedCaptionButton-cc-on.svg new file mode 100644 index 0000000000..7f62144b93 --- /dev/null +++ b/toolkit/themes/shared/media/closedCaptionButton-cc-on.svg @@ -0,0 +1,17 @@ +<!-- 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="18px" height="18px" viewBox="0 0 18 18"> + <path fill="context-fill" + d="M16.531,1.984H1.5c-0.8,0-1.5,0.7-1.5,1.5v11.031c0,0.8,0.7,1.5,1.5,1.5h15.031 + c0.8,0,1.469-0.7,1.469-1.5V3.484C18,2.684,17.331,1.984,16.531,1.984z + M16,13.016c0,0.6-0.4,1-1,1H3c-0.6,0-1-0.4-1-1v-8c0-0.6,0.4-1,1-1h12c0.6,0,1,0.4,1,1V13.016z + M6.426,10.807c-0.811,0-0.96-0.789-0.96-1.628c0-1.155,0.338-1.745,0.899-1.745c0.5,0,0.818,0.357,0.866,0.98 + h1.484C8.585,6.877,7.785,5.972,6.297,5.972c-1.359,0-2.428,1.205-2.428,3.14c0,1.944,0.974,3.157,2.583,3.157 + c1.285,0,2.153-0.93,2.295-2.476H7.244C7.183,10.367,6.94,10.807,6.426,10.807z + M11.759,10.807c-0.811,0-0.96-0.789-0.96-1.628c0-1.155,0.338-1.745,0.899-1.745c0.5,0,0.756,0.357,0.803,0.98h1.515 + c-0.129-1.537-0.898-2.443-2.385-2.443c-1.359,0-2.396,1.205-2.396,3.14c0,1.944,0.943,3.157,2.552,3.157 + c1.285,0,2.122-0.93,2.264-2.476h-1.535C12.454,10.367,12.273,10.807,11.759,10.807z"/> +</svg> + diff --git a/toolkit/themes/shared/media/error.png b/toolkit/themes/shared/media/error.png Binary files differnew file mode 100644 index 0000000000..51a73696c8 --- /dev/null +++ b/toolkit/themes/shared/media/error.png diff --git a/toolkit/themes/shared/media/fullscreenEnterButton.svg b/toolkit/themes/shared/media/fullscreenEnterButton.svg new file mode 100644 index 0000000000..5ed0edb640 --- /dev/null +++ b/toolkit/themes/shared/media/fullscreenEnterButton.svg @@ -0,0 +1,13 @@ +<!-- 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="18px" height="18px" viewBox="0 0 18 18"> + <path fill="context-fill" + d="M6.728,10.188l-3.235,3.094l0.017-2.267l-1.513-0.016l0,5l4.987-0.008l0.011-1.537l-2.281-0.022 + l3.097-3.158L6.728,10.188z M14.453,11.004l-0.022,2.281l-3.158-3.097l-1.086,1.083l3.094,3.235l-2.267-0.017l-0.016,1.514l5,0 + l-0.008-4.988L14.453,11.004z M11.015,2.01l-0.011,1.537l2.281,0.022l-3.097,3.158l1.083,1.086l3.235-3.094L14.49,6.986 + l1.513,0.016v-5L11.015,2.01z M6.986,3.511l0.016-1.514l-5,0L2.01,6.985l1.537,0.011l0.022-2.281l3.158,3.097l1.086-1.083 + L4.718,3.494L6.986,3.511z"/> +</svg> + diff --git a/toolkit/themes/shared/media/fullscreenExitButton.svg b/toolkit/themes/shared/media/fullscreenExitButton.svg new file mode 100644 index 0000000000..1a770da285 --- /dev/null +++ b/toolkit/themes/shared/media/fullscreenExitButton.svg @@ -0,0 +1,12 @@ +<!-- 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="18px" height="18px" viewBox="0 0 18 18"> + <path fill="context-fill" + d="M2.047,11.135l-0.011,1.537l2.281,0.022L1.22,15.851l1.083,1.086l3.235-3.094l-0.017,2.268l1.513,0.016 + l0-5L2.047,11.135z M13.781,12.587l2.267,0.017l0.016-1.514l-5,0l0.008,4.988l1.537,0.011l0.022-2.281l3.158,3.097l1.086-1.083 + L13.781,12.587z M16.058,5.578l-2.281-0.021l3.097-3.158l-1.083-1.086l-3.235,3.094l0.017-2.267L11.06,2.123v5l4.988-0.008 + L16.058,5.578z M5.516,2.098L5.494,4.379L2.336,1.283L1.25,2.365L4.344,5.6L2.077,5.583L2.06,7.097l5,0L7.053,2.109L5.516,2.098z"/> +</svg> + diff --git a/toolkit/themes/shared/media/imagedoc-darknoise.png b/toolkit/themes/shared/media/imagedoc-darknoise.png Binary files differnew file mode 100644 index 0000000000..5c33e24d4c --- /dev/null +++ b/toolkit/themes/shared/media/imagedoc-darknoise.png diff --git a/toolkit/themes/shared/media/imagedoc-lightnoise.png b/toolkit/themes/shared/media/imagedoc-lightnoise.png Binary files differnew file mode 100644 index 0000000000..1fe5b3a586 --- /dev/null +++ b/toolkit/themes/shared/media/imagedoc-lightnoise.png diff --git a/toolkit/themes/shared/media/pauseButton.svg b/toolkit/themes/shared/media/pauseButton.svg new file mode 100644 index 0000000000..e1d610d1d1 --- /dev/null +++ b/toolkit/themes/shared/media/pauseButton.svg @@ -0,0 +1,9 @@ +<!-- 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="18px" height="18px" viewBox="0 0 18 18"> + <path fill="context-fill" d="M6.002,1.953C5.172,1.953,4.5,2.626,4.5,3.455v11.08 + c0,0.83,0.672,1.502,1.502,1.502c0.829,0,1.502-0.672,1.502-1.502V3.455C7.504,2.626,6.831,1.953,6.002,1.953z M12,1.953 + c-0.828,0-1.5,0.672-1.5,1.5v11.094c0,0.828,0.672,1.5,1.5,1.5s1.5-0.672,1.5-1.5V3.453C13.5,2.625,12.828,1.953,12,1.953z"/> +</svg> + diff --git a/toolkit/themes/shared/media/pictureinpicture.svg b/toolkit/themes/shared/media/pictureinpicture.svg new file mode 100644 index 0000000000..014231af42 --- /dev/null +++ b/toolkit/themes/shared/media/pictureinpicture.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="16" height="16" fill="context-fill"> + <path d="M15 9c.552 0 1 .447 1 1v4c0 .553-.448 1-1 1H9c-.552 0-1-.447-1-1v-4c0-.553.448-1 1-1zm-2-8c1.654 0 3 1.346 3 3v2c0 .553-.448 1-1 1s-1-.447-1-1V4c0-.552-.449-1-1-1H3c-.551 0-1 .448-1 1v8c0 .552.449 1 1 1h2c.552 0 1 .447 1 1 0 .553-.448 1-1 1H3c-1.654 0-3-1.346-3-3V4c0-1.654 1.346-3 3-3zM3.146 4.146c.196-.195.512-.195.708 0L6 6.293V5.5c0-.276.224-.5.5-.5s.5.224.5.5v2c0 .065-.013.13-.039.191-.05.122-.148.22-.27.271C6.63 7.986 6.565 8 6.5 8h-2c-.276 0-.5-.224-.5-.5s.224-.5.5-.5h.793L3.146 4.854c-.195-.196-.195-.512 0-.708z"/> +</svg> diff --git a/toolkit/themes/shared/media/playButton.svg b/toolkit/themes/shared/media/playButton.svg new file mode 100644 index 0000000000..47d44bd402 --- /dev/null +++ b/toolkit/themes/shared/media/playButton.svg @@ -0,0 +1,8 @@ +<!-- 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="18px" height="18px" viewBox="0 0 18 18"> + <path fill="context-fill" d="M3.243,15.155c0,0.845,0.593,1.157,1.317,0.707l9.659-6.041c0.727-0.453,0.722-1.193,0-1.645L4.556,2.137 + C3.827,1.682,3.237,2.014,3.237,2.844v12.312H3.243z"/> +</svg> + diff --git a/toolkit/themes/shared/media/stalled.png b/toolkit/themes/shared/media/stalled.png Binary files differnew file mode 100644 index 0000000000..525375889b --- /dev/null +++ b/toolkit/themes/shared/media/stalled.png diff --git a/toolkit/themes/shared/media/throbber.png b/toolkit/themes/shared/media/throbber.png Binary files differnew file mode 100644 index 0000000000..8e49fe5b2a --- /dev/null +++ b/toolkit/themes/shared/media/throbber.png diff --git a/toolkit/themes/shared/media/videocontrols.css b/toolkit/themes/shared/media/videocontrols.css new file mode 100644 index 0000000000..ef38bbbc33 --- /dev/null +++ b/toolkit/themes/shared/media/videocontrols.css @@ -0,0 +1,839 @@ +/* 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/. */ + +@namespace url("http://www.w3.org/1999/xhtml"); + +.videocontrols { + writing-mode: horizontal-tb; + width: 100%; + height: 100%; + display: inline-block; + overflow: hidden; + + direction: ltr; + /* Prevent unwanted style inheritance. See bug 554717. */ + text-align: left; + list-style-image: none !important; + font: normal normal normal 100%/normal sans-serif !important; + text-decoration: none !important; + white-space: normal !important; +} + +.videocontrols[flipped="true"] { + transform: scaleX(-1); +} + +.controlsContainer { + --clickToPlay-size: 48px; + --button-size: 30px; + --timer-size: 40px; + --timer-long-size: 60px; + --track-size: 5px; + --thumb-size: 13px; + --label-font-size: 13px; + --pip-toggle-padding: 5px; + --pip-toggle-icon-width-height: 16px; + --pip-toggle-translate-x: calc(100% - var(--pip-toggle-icon-width-height) - 2 * var(--pip-toggle-padding)); +} +.controlsContainer.touch { + --clickToPlay-size: 64px; + --button-size: 40px; + --timer-size: 52px; + --timer-long-size: 78px; + --track-size: 7px; + --thumb-size: 16px; + --label-font-size: 16px; +} + +/* Some CSS custom properties defined here are referenced by videocontrols.js */ +.controlBar { + /* Do not delete: these variables are accessed by JavaScript directly. + see videocontrols.js and search for |-width|. */ + --clickToPlay-width: var(--clickToPlay-size); + --playButton-width: var(--button-size); + --scrubberStack-width: 64px; + --muteButton-width: var(--button-size); + --volumeStack-width: 48px; + --castingButton-width: var(--button-size); + --closedCaptionButton-width: var(--button-size); + --fullscreenButton-width: var(--button-size); + --positionDurationBox-width: var(--timer-size); + --durationSpan-width: var(--timer-size); + --positionDurationBox-width-long: var(--timer-long-size); + --durationSpan-width-long: var(--timer-long-size); +} + +.touch .controlBar { + /* Do not delete: these variables are accessed by JavaScript directly. + see videocontrols.js and search for |-width|. */ + --scrubberStack-width: 84px; + --volumeStack-width: 64px; +} + +.controlsContainer [hidden], +.controlBar[hidden] .progressBar, +.controlBar[hidden] .bufferBar, +.pictureInPictureToggleButton[hidden], +.videocontrols[inDOMFullscreen] > .controlsContainer > .controlsOverlay > #pictureInPictureToggle { + display: none; +} + +/* We hide the controlBar visually so it doesn't obscure the video. However, + * we still want to expose it to a11y so users who don't use a mouse can access + * it. + */ +.controlBar[hidden] { + display: flex; + opacity: 0; + pointer-events: none; +} + +.controlBar[size="hidden"] { + display: none; +} + +.controlsSpacer[hideCursor] { + cursor: none; +} + +.controlsContainer, +.progressContainer { + position: relative; + height: 100%; +} + +.stackItem { + position: absolute; + left: 0; + bottom: 0; + width: 100%; + height: 100%; +} + +.statusOverlay { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + background-color: rgb(80,80,80, .85); + color: #fff; +} + +.controlsOverlay { + display: flex; + flex-direction: column; + justify-content: center; + position: relative; +} + +.controlsSpacerStack { + display: flex; + flex-direction: column; + flex-grow: 1; + justify-content: center; + align-items: center; +} + +.controlBar { + position: relative; + display: flex; + box-sizing: border-box; + justify-content: center; + align-items: center; + overflow: hidden; + height: 40px; + padding: 0 9px; + background-color: rgba(26,26,26,.8); + color: #fff; +} + +.touch .controlBar { + height: 52px; +} + +.controlBar > .button { + height: 100%; + min-width: var(--button-size); + min-height: var(--button-size); + padding: 6px; + border: 0; + margin: 0; + background-color: transparent; + background-repeat: no-repeat; + background-position: center; + background-origin: content-box; + background-clip: content-box; + -moz-context-properties: fill; + fill: currentColor; + color: inherit; + /* We don't suppress ::-moz-focus-inner, so that does for a focus indicator */ + outline: none; +} + +.touch .controlBar > .button { + background-size: 24px 24px; +} + +.controlBar > .button:enabled:hover { + fill: #48a0f7; +} + +.controlBar > .button:enabled:hover:active { + fill: #2d89e6; +} + +.playButton { + background-image: url(chrome://global/skin/media/pauseButton.svg); +} +.playButton[paused] { + background-image: url(chrome://global/skin/media/playButton.svg); +} + +.muteButton { + background-image: url(chrome://global/skin/media/audioUnmutedButton.svg); +} +.muteButton[muted] { + background-image: url(chrome://global/skin/media/audioMutedButton.svg); +} +.muteButton[noAudio] { + background-image: url(chrome://global/skin/media/audioNoAudioButton.svg); +} +.muteButton[noAudio] + .volumeStack { + display: none; +} + +.castingButton { + background-image: url(chrome://global/skin/media/castingButton-ready.svg); +} + +.castingButton[enabled] { + background-image: url(chrome://global/skin/media/castingButton-active.svg); +} + +.closedCaptionButton { + background-image: url(chrome://global/skin/media/closedCaptionButton-cc-off.svg); +} +.closedCaptionButton[enabled] { + background-image: url(chrome://global/skin/media/closedCaptionButton-cc-on.svg); +} + +.fullscreenButton { + background-image: url(chrome://global/skin/media/fullscreenEnterButton.svg); +} +.fullscreenButton[fullscreened] { + background-image: url(chrome://global/skin/media/fullscreenExitButton.svg); +} + +.controlBarSpacer { + flex-grow: 1; +} + +.volumeControl::-moz-range-thumb, +.scrubber::-moz-range-thumb { + height: var(--thumb-size); + width: var(--thumb-size); + border: none; + border-radius: 50%; + background-color: #fff; + filter: drop-shadow(0px 0px 2px rgba(0,0,0,0.65)); +} + +.volumeControl, +.scrubber { + outline: none; +} + +.progressBackgroundBar { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.progressStack { + position: relative; + width: 100%; + height: var(--track-size); +} + +.scrubberStack { + /* minus margin to get basis of required width */ + min-width: calc(var(--scrubberStack-width) - 18px); + flex-basis: calc(var(--scrubberStack-width) - 18px); + flex-grow: 2; + flex-shrink: 0; + margin: 0 9px; +} + +.volumeStack { + max-width: 60px; + min-width: var(--volumeStack-width); + flex-grow: 1; + flex-shrink: 0; + margin-right: 6px; + margin-left: 4px; +} + +.bufferBar, +.progressBar, +.scrubber, +.volumeControl { + bottom: 0; + left: 0; + position: absolute; + width: 100%; + height: 100%; + padding: 0; + border: 0; + border-radius: calc(var(--track-size) / 2); + margin: 0; + background: none; + outline: none; +} + +.bufferBar { + background-color: rgba(0,0,0,0.7); +} + +.bufferBar::-moz-progress-bar, +.progressBar::-moz-progress-bar { + height: 100%; + padding: 0; + margin: 0; + border: 0; + border-radius: calc(var(--track-size) / 2); + background: none; +} + +.scrubber:hover::-moz-range-thumb, +.volumeControl:hover::-moz-range-thumb { + background-color: #48a0f7; +} + +.scrubber:active::-moz-range-thumb, +.volumeControl:active::-moz-range-thumb { + background-color: #2d89e6; +} + +.scrubber::-moz-range-track, +.scrubber::-moz-range-progress { + background-color: transparent; +} + +.volumeControl::-moz-range-progress, +.volumeControl::-moz-range-track { + height: var(--track-size); + border-radius: calc(var(--track-size) / 2); +} + +.volumeControl::-moz-range-progress { + background-color: #fff; +} + +.volumeControl::-moz-range-track { + background-color: rgba(0,0,0,0.7); +} + + +.bufferBar::-moz-progress-bar { + background-color: rgba(255,255,255,0.3); + border-radius: calc(var(--track-size) / 2); +} + +.progressBar::-moz-progress-bar { + background-color: #00b6f0; +} + +.textTrackListContainer { + position: absolute; + right: 5px; + bottom: 45px; + top: 5px; + max-width: 80%; + display: flex; + flex-direction: column; + justify-content: end; +} + +.textTrackList { + flex: 0 1 auto; + border: 1px solid #000; + border-radius: 2.5px; + padding: 5px 0; + vertical-align: middle; + background-color: #000; + opacity: 0.7; + overflow-y: auto; +} + +.touch .textTrackList { + bottom: 58px; +} + +.textTrackList > .textTrackItem { + display: block; + width: 100%; + height: var(--button-size); + font-size: var(--label-font-size); + padding: 2px 10px; + border: none; + margin: 0; + white-space: nowrap; + overflow: hidden; + text-align: left; + text-overflow: ellipsis; + color: #fff; + background-color: transparent; +} + +.textTrackList > .textTrackItem:hover { + background-color: #444; +} + +.textTrackList > .textTrackItem[on] { + color: #48a0f7; +} + +.positionLabel, +.durationLabel { + display: none; +} + +.positionDurationBox { + text-align: center; + padding-inline-start: 1px; + padding-inline-end: 9px; + white-space: nowrap; + font: message-box; + font-size: var(--label-font-size); + font-size-adjust: 0.55; + font-variant-numeric: tabular-nums; +} + +%ifdef XP_MACOSX +.positionDurationBox { + font-size-adjust: unset; + font-family: "Helvetica Neue", "Helvetica", sans-serif; +} +%endif + +.duration { + display: inline-block; + white-space: pre; + color: #929292; +} + +.statusIcon { + width: 36px; + height: 36px; + margin-bottom: 20px; +} + +/* Not showing the throbber on mobile because of conflict with m.youtube.com (see bug 1289412) */ +.controlsContainer:not(.mobile) .statusIcon[type="throbber"] { + background: url(chrome://global/skin/media/throbber.png) no-repeat center; +} + +.controlsContainer:not(.mobile) .statusIcon[type="throbber"][stalled] { + background: url(chrome://global/skin/media/stalled.png) no-repeat center; +} + +.statusIcon[type="error"], +.statusIcon[type="pictureInPicture"] { + background-size: contain; + background-repeat: no-repeat; + background-position: center; +} + +.statusIcon[type="error"] { + min-width: 70px; + min-height: 60px; + background-image: url(chrome://global/skin/media/error.png); +} + +.statusIcon[type="pictureInPicture"] { + min-width: 84px; + min-height: 84px; + background-image: url(chrome://global/skin/media/pictureinpicture.svg); + -moz-context-properties: fill; + fill: currentColor; +} + +.pictureInPictureToggleButton { + display: flex; + appearance: none; + position: absolute; + background-color: #0060df; + color: #fff; + border: 0; + padding: var(--pip-toggle-padding); + right: 0; + top: 50%; + translate: var(--pip-toggle-translate-x) -50%; + transition: opacity 160ms linear, translate 160ms linear; + min-width: max-content; + pointer-events: auto; + opacity: 0; +} + +.pictureInPictureToggleButton[policy="hidden"] { + display: none; +} + +.pictureInPictureToggleButton[policy="top"] { + top: 0%; + translate: var(--pip-toggle-translate-x); +} + +.pictureInPictureToggleButton[policy="one-quarter"] { + top: 25%; +} + +.pictureInPictureToggleButton[policy="three-quarters"] { + top: 75%; +} + +.pictureInPictureToggleButton[policy="bottom"] { + top: 100%; + translate: var(--pip-toggle-translate-x) -100%; +} + +.videocontrols[localedir="rtl"] .statusIcon[type="pictureInPicture"] { + transform: scaleX(-1); +} + +.pictureInPictureToggleLabel { + margin-inline-start: var(--pip-toggle-padding); +} + +@supports -moz-bool-pref("media.videocontrols.picture-in-picture.video-toggle.testing") { + /** + * To make automated tests faster, we drop the transition duration in + * testing mode. + */ + .pictureInPictureToggleButton { + transition-duration: 10ms; + } +} + +/* Overlay Play button */ +.clickToPlay { + min-width: var(--clickToPlay-size); + min-height: var(--clickToPlay-size); + border-radius: 50%; + background-image: url(chrome://global/skin/media/playButton.svg); + background-repeat: no-repeat; + background-position: 54% 50%; + background-size: 40% 40%; + background-color: #1a1a1a; + -moz-context-properties: fill; + fill: #fff; + opacity: 0.8; + position: relative; + top: 20px; +} + +.controlsSpacerStack:hover > .clickToPlay, +.clickToPlay:hover { + opacity: 0.55; +} + +.controlsSpacerStack:hover > .clickToPlay[fadeout] { + opacity: 0; +} + +.controlBar[fullscreen-unavailable] .fullscreenButton { + display: none; +} + +.statusOverlay[fadeout], +.statusOverlay[error] + .controlsOverlay > .controlsSpacerStack { + opacity: 0; +} + +.pictureInPictureOverlay { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + opacity: 1; + background-color: rgb(12, 12, 13); + color: #fff; +} + +/* Status description formatting */ +.statusLabel { + padding: 0 10px; + text-align: center; + font: message-box; + font-size: 14px; +} + +.statusLabel { + display: none; +} + +[status="errorAborted"] > #errorAborted, +[status="errorNetwork"] > #errorNetwork, +[status="errorDecode"] > #errorDecode, +[status="errorSrcNotSupported"] > #errorSrcNotSupported, +[status="errorNoSource"] > #errorNoSource, +[status="errorGeneric"] > #errorGeneric, +[status="pictureInPicture"] > #pictureInPicture { + display: inline; +} + +%ifdef XP_WIN +@media (-moz-windows-default-theme: 0) { + .controlsSpacer, + .clickToPlay { + background-color: transparent; + } +} +%endif + +.pip-wrapper { + position: absolute; + cursor: pointer; + -moz-appearance: none; + background: none; + border: none; + text-align: unset; + top: calc(70% - 40px); + opacity: 0; + transition: opacity 200ms; + --pip-icon-size: 24px; + --pip-icon-width-with-margins: calc(2 * var(--pip-toggle-margin) + var(--pip-icon-size)); + --pip-highlight-width: 2px; + --pip-toggle-margin: 8px; + --pip-highlight-style: solid rgba(0, 254, 255, 1); +} + +.pip-wrapper[policy="hidden"] { + display: none; +} + +.pip-wrapper[medium-video] > .pip-expanded > .pip-icon-label > .pip-label { + font-size: 13px; +} + +.pip-wrapper[medium-video] > .pip-expanded { + font-size: 11px; +} + +.controlsOverlay.hovering > .pip-wrapper { + opacity: 0.8; +} + +.controlsOverlay[hidetoggle="true"].hovering > .pip-wrapper:not(.hovering) { + opacity: 0; +} + +.controlsOverlay.hovering > .pip-wrapper.hovering { + opacity: 1; +} + +.pip-wrapper[position="right"] { + right: 40px; +} + +.pip-wrapper[position="left"] { + left: 12px; +} + +.pip-expanded, +.pip-small, +.pip-icon, +.pip-explainer { + position: absolute; + left: 0; + top: 0; +} + +.pip-icon { + top: 8px; + left: 8px; + pointer-events: none; + background-image: url("chrome://global/skin/media/pictureinpicture.svg"); + background-size: var(--pip-icon-size) var(--pip-icon-size); + -moz-context-properties: fill; + fill: #fff; + height: var(--pip-icon-size); + width: var(--pip-icon-size); + background-repeat: no-repeat; + background-position: center, center; +} + +.videocontrols[localedir="rtl"] .pip-icon { + transform: scaleX(-1); +} + +.pip-wrapper[position="left"] > .pip-expanded > .pip-icon-label > .pip-label { + margin-left: var(--pip-icon-width-with-margins); + margin-right: var(--pip-toggle-margin); +} + +.pip-expanded, +.pip-explainer { + user-select: none; +} + +.pip-small { + background-color: rgba(12,12,13,0.65); + box-shadow: 0px 4px 4px rgba(12,12,13,0.25); + width: 40px; + height: 40px; + border-radius: 25px; +} + +.a11y-only { + position: absolute; + left: -10000px; + width: 100px; + height: 100px; +} + +.pip-wrapper[position="left"] > .pip-expanded > .pip-icon-label > .pip-icon { + display: none; +} + +.pip-expanded, +.pip-small { + border: 1px solid rgba(255,255,255,0.1); + box-sizing: border-box; +} + +.pip-wrapper:not([has-used]) > .pip-small { + border: var(--pip-highlight-width) var(--pip-highlight-style); +} + +.pip-expanded { + border: var(--pip-highlight-width) var(--pip-highlight-style); + transition: opacity 250ms, scale 200ms, translate 190ms; + justify-content: left; + display: flex; + height: 40px; + background-color: rgba(12,12,13,0.9); + box-shadow: 0px 4px 4px rgba(12,12,13,0.25); + width: max-content; + border-radius: 8px; + opacity: 0; + color: #fff; + align-items: center; + scale: 0.33 1; + font-size: 14px; +} + +.pip-wrapper[position="right"] > .pip-expanded { + translate: calc(-100% + 48px); + transform-origin: right; + justify-content: right; +} + +.pip-wrapper:is([small-video],[has-used]) > .pip-expanded, +.pip-wrapper[position="right"]:not([small-video],[has-used]) > .pip-icon { + display: none; +} + +.pip-wrapper[position="right"] > .pip-expanded > .pip-icon-label > .pip-icon { + position: relative; + top: 0; + left: 0; + display: inline-block; +} + +.pip-wrapper[position="right"] > .pip-expanded > .pip-icon-label { + display: flex; + flex-direction: row; + align-content: center; +} + +.pip-wrapper[position="right"] > .pip-expanded > .pip-icon-label > .pip-icon, +.pip-wrapper[position="right"] > .pip-expanded > .pip-icon-label > .pip-label { + margin-top: auto; + margin-bottom: auto; +} + +.pip-wrapper[position="right"] > .pip-expanded > .pip-icon-label > .pip-icon { + margin-left: var(--pip-toggle-margin); + margin-right: var(--pip-toggle-margin); +} + +.pip-wrapper[position="right"] > .pip-expanded > .pip-icon-label > .pip-label { + margin-right: var(--pip-toggle-margin); +} + +.pip-wrapper.hovering > .pip-expanded { + box-shadow: none; + border: var(--pip-highlight-width) var(--pip-highlight-style); + /* Remove bottom border but keep text centred with padding. */ + border-bottom: none; + padding-bottom: var(--pip-highlight-width); + pointer-events: none; +} + +.pip-wrapper:not([small-video],[has-used]) > .pip-expanded { + opacity: 1; + scale: 1; + pointer-events: auto; +} + +.pip-wrapper:not([small-video],[has-used]).hovering > .pip-expanded { + border-bottom-right-radius: 0px; + border-bottom-left-radius: 0px; +} + +.pip-wrapper:not([small-video],[has-used]) > .pip-small { + opacity: 0; + transition: opacity 200ms; +} + +.pip-explainer { + opacity: 0; +} + +.pip-explainer { + padding: 6px 16px 8px 8px; + translate: 0; + transition: opacity 250ms, translate 190ms; + transition-timing-function: cubic-bezier(.07,.95,0,1); + background: rgba(12,12,13,0.65); + border-bottom-right-radius: 8px; + border-bottom-left-radius: 8px; + border: var(--pip-highlight-width) var(--pip-highlight-style); + border-top: 0; + box-shadow: 0px 4px 4px rgba(12,12,13,0.25); + opacity: 0; + margin-left: calc(-1 * var(--pip-highlight-width)); + margin-right: calc(-1 * var(--pip-highlight-width)); + width: calc(100% - 24px); + word-break: break-word; + pointer-events: none; +} + +.videocontrols[localedir="rtl"] .pip-explainer { + text-align: right; + direction: rtl; +} + +.pip-wrapper.hovering > .pip-expanded > .pip-explainer { + pointer-events: auto; +} + +.pip-wrapper.hovering > .pip-expanded > .pip-explainer { + opacity: 1; +} + +.pip-wrapper.hovering > .pip-expanded > .pip-explainer { + translate: 0 calc(40px - var(--pip-highlight-width)); +} + +@media (prefers-reduced-motion) { + .pip-wrapper, + .pip-expanded, + .pip-wrapper:not([small-video],[has-used]) > .pip-small, + .pip-explainer { + transition: none; + } +} |
