diff options
Diffstat (limited to 'toolkit/themes/shared/media')
26 files changed, 1178 insertions, 0 deletions
diff --git a/toolkit/themes/shared/media/audio-muted.svg b/toolkit/themes/shared/media/audio-muted.svg new file mode 100644 index 0000000000..bf26fc3877 --- /dev/null +++ b/toolkit/themes/shared/media/audio-muted.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" viewBox="0 0 16 16" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity"> + <path d="m11 4.149 0 4.181 1.775 1.775c.3-.641.475-1.35.475-2.105a4.981 4.981 0 0 0-1.818-3.851l-.432 0z"/> + <path d="M2.067 1.183a.626.626 0 0 0-.885.885L4.115 5 2 5a2 2 0 0 0-2 2l0 2a2 2 0 0 0 2 2l2.117 0 3.128 3.65C7.848 15.353 9 14.927 9 14l0-4.116 3.317 3.317c-.273.232-.56.45-.873.636a.624.624 0 0 0-.218.856.621.621 0 0 0 .856.219 7.58 7.58 0 0 0 1.122-.823l.729.729a.626.626 0 0 0 .884-.886L2.067 1.183z"/> + <path d="M9 2c0-.926-1.152-1.352-1.755-.649L5.757 3.087 9 6.33 9 2z"/> + <path d="M11.341 2.169a6.767 6.767 0 0 1 3.409 5.864 6.732 6.732 0 0 1-.83 3.217l.912.912A7.992 7.992 0 0 0 16 8.033a8.018 8.018 0 0 0-4.04-6.95.625.625 0 0 0-.619 1.086z"/> +</svg> diff --git a/toolkit/themes/shared/media/audio.svg b/toolkit/themes/shared/media/audio.svg new file mode 100644 index 0000000000..0736786ba6 --- /dev/null +++ b/toolkit/themes/shared/media/audio.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" viewBox="0 0 16 16" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity"> + <path d="M7.245 1.35 4.117 5 2 5a2 2 0 0 0-2 2l0 2a2 2 0 0 0 2 2l2.117 0 3.128 3.65C7.848 15.353 9 14.927 9 14L9 2c0-.927-1.152-1.353-1.755-.65z"/> + <path d="M11.764 15a.623.623 0 0 1-.32-1.162 6.783 6.783 0 0 0 3.306-5.805 6.767 6.767 0 0 0-3.409-5.864.624.624 0 1 1 .619-1.085A8.015 8.015 0 0 1 16 8.033a8.038 8.038 0 0 1-3.918 6.879c-.1.06-.21.088-.318.088z"/> + <path d="M11.434 11.85A4.982 4.982 0 0 0 13.25 8a4.982 4.982 0 0 0-1.819-3.852l-.431 0 0 7.702.434 0z"/> +</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/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/closed-caption-settings-button.svg b/toolkit/themes/shared/media/closed-caption-settings-button.svg new file mode 100644 index 0000000000..1ef12e7902 --- /dev/null +++ b/toolkit/themes/shared/media/closed-caption-settings-button.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 width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> + <path fill-rule="evenodd" clip-rule="evenodd" d="m13.15 2.25.6.6v7.3l-.6.6h-1.9c-.28 0-.5.22-.5.5v2.15l-3.04-2.43c-.18-.14-.4-.22-.62-.22H2.85l-.6-.6v-7.3l.6-.6h10.3ZM13 1H3c-1.1 0-2 .9-2 2v7c0 1.1.9 2 2 2h4l3.75 3H12v-3h1c1.1 0 2-.9 2-2V3c0-1.1-.9-2-2-2ZM6.27 7.73H4.86a.62.62 0 0 0-.62.62v.01c0 .342.278.62.62.62h1.41a.62.62 0 0 0 .62-.62v-.01a.62.62 0 0 0-.62-.62Zm2.24 0h2.63a.62.62 0 0 1 .62.62v.01a.62.62 0 0 1-.62.62H8.51a.62.62 0 0 1-.62-.62v-.01a.62.62 0 0 1 .62-.62Zm2.63-2.75H9.73a.62.62 0 0 0-.62.62v.01c0 .342.278.62.62.62h1.41a.62.62 0 0 0 .62-.62V5.6a.62.62 0 0 0-.62-.62Zm-6.28 0h2.63a.62.62 0 0 1 .62.62v.01a.62.62 0 0 1-.62.62H4.86a.62.62 0 0 1-.62-.62V5.6a.62.62 0 0 1 .62-.62Z" fill="context-fill" fill-opacity="context-fill-opacity"/> +</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/pause-fill.svg b/toolkit/themes/shared/media/pause-fill.svg new file mode 100644 index 0000000000..8dc2dea140 --- /dev/null +++ b/toolkit/themes/shared/media/pause-fill.svg @@ -0,0 +1,7 @@ +<!-- 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" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity"> + <path d="m4.5 14-1 0A1.5 1.5 0 0 1 2 12.5l0-9A1.5 1.5 0 0 1 3.5 2l1 0A1.5 1.5 0 0 1 6 3.5l0 9A1.5 1.5 0 0 1 4.5 14z"/> + <path d="m11.5 14-1 0A1.5 1.5 0 0 1 9 12.5l0-9A1.5 1.5 0 0 1 10.5 2l1 0A1.5 1.5 0 0 1 13 3.5l0 9a1.5 1.5 0 0 1-1.5 1.5z"/> +</svg> diff --git a/toolkit/themes/shared/media/picture-in-picture-closed.svg b/toolkit/themes/shared/media/picture-in-picture-closed.svg new file mode 100644 index 0000000000..efa4028c00 --- /dev/null +++ b/toolkit/themes/shared/media/picture-in-picture-closed.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" viewBox="0 0 16 16" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity"> + <path d="M8.125 15a.625.625 0 0 0 0-1.25l-6.275 0-.6-.6 0-9.3.6-.6 10.3 0 .6.6 0 4.275a.625.625 0 0 0 1.25 0L14 4a2 2 0 0 0-2-2L2 2a2 2 0 0 0-2 2l0 9a2 2 0 0 0 2 2l6.125 0z"/> + <path d="m11.286 12.17-.75.75a.314.314 0 0 1-.536-.223l0-2.509.189-.188 2.509 0c.28 0 .42.338.222.536l-.75.75 2.652 2.652a.618.618 0 0 1 .11.718.496.496 0 0 1-.276.276.618.618 0 0 1-.718-.11l-2.652-2.652z"/> + <path d="M8 5 4 5a1 1 0 0 0-1 1l0 3a1 1 0 0 0 1 1l4 0a1 1 0 0 0 1-1l0-3a1 1 0 0 0-1-1z"/> +</svg> diff --git a/toolkit/themes/shared/media/picture-in-picture-enter-fullscreen-button.svg b/toolkit/themes/shared/media/picture-in-picture-enter-fullscreen-button.svg new file mode 100644 index 0000000000..3f7908a578 --- /dev/null +++ b/toolkit/themes/shared/media/picture-in-picture-enter-fullscreen-button.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 width="28" height="28" viewBox="0 0 28 28" fill="context-fill" xmlns="http://www.w3.org/2000/svg">
+ <path d="M20.7 7h-3.993a.5.5 0 0 0-.354.854l1.454 1.454-7.5 7.5-1.454-1.454a.5.5 0 0 0-.853.353V19.7l.3.3h3.993a.5.5 0 0 0 .354-.854l-1.454-1.454 7.5-7.5 1.454 1.454a.5.5 0 0 0 .853-.353V7.3l-.3-.3Z"/>
+</svg>
diff --git a/toolkit/themes/shared/media/picture-in-picture-exit-fullscreen-button.svg b/toolkit/themes/shared/media/picture-in-picture-exit-fullscreen-button.svg new file mode 100644 index 0000000000..2d95224454 --- /dev/null +++ b/toolkit/themes/shared/media/picture-in-picture-exit-fullscreen-button.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 width="28" height="28" viewBox="0 0 28 28" fill="context-fill" xmlns="http://www.w3.org/2000/svg">
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M21.374 6a.626.626 0 0 1 .444 1.067l-3.625 3.625 1.454 1.454a.5.5 0 0 1-.354.854H15.3l-.3-.3V8.707a.5.5 0 0 1 .853-.353l1.173 1.173.28.281 3.626-3.625A.626.626 0 0 1 21.374 6ZM9.43 14.084A.5.5 0 0 1 9.707 14H13.7l.3.3v3.993a.5.5 0 0 1-.854.353l-1.173-1.173-.281-.28-3.625 3.624a.63.63 0 0 1-.885.001.628.628 0 0 1 0-.885l3.625-3.625-1.454-1.454a.5.5 0 0 1 .076-.77Z"/>
+</svg>
diff --git a/toolkit/themes/shared/media/picture-in-picture-open.svg b/toolkit/themes/shared/media/picture-in-picture-open.svg new file mode 100644 index 0000000000..afc8910a2c --- /dev/null +++ b/toolkit/themes/shared/media/picture-in-picture-open.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" viewBox="0 0 16 16" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity"> + <path d="m15 10-4 0a1 1 0 0 0-1 1l0 3a1 1 0 0 0 1 1l4 0a1 1 0 0 0 1-1l0-3a1 1 0 0 0-1-1z"/> + <path d="M8.125 15a.625.625 0 0 0 0-1.25l-6.275 0-.6-.6 0-9.3.6-.6 10.3 0 .6.6 0 4.275a.625.625 0 0 0 1.25 0L14 4a2 2 0 0 0-2-2L2 2a2 2 0 0 0-2 2l0 9a2 2 0 0 0 2 2l6.125 0z"/> + <path d="m6.714 7.83.75-.75A.314.314 0 0 1 8 7.303l0 2.509-.189.188-2.509 0a.314.314 0 0 1-.222-.536l.75-.75-2.652-2.652a.618.618 0 0 1-.11-.718.496.496 0 0 1 .276-.276.618.618 0 0 1 .718.11L6.714 7.83z"/> +</svg> diff --git a/toolkit/themes/shared/media/picture-in-picture-seekBackward-button.svg b/toolkit/themes/shared/media/picture-in-picture-seekBackward-button.svg new file mode 100644 index 0000000000..07428daa52 --- /dev/null +++ b/toolkit/themes/shared/media/picture-in-picture-seekBackward-button.svg @@ -0,0 +1,7 @@ +<!-- 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 width="28" height="28" viewBox="0 0 28 28" fill="context-fill" xmlns="http://www.w3.org/2000/svg"> + <path d="M9.196 19.097A7.455 7.455 0 0 1 7 13.793a.625.625 0 1 1 1.25 0c0 1.669.65 3.239 1.831 4.419a6.207 6.207 0 0 0 4.419 1.83 6.257 6.257 0 0 0 6.25-6.25 6.257 6.257 0 0 0-6.25-6.25 6.211 6.211 0 0 0-2.978.773l1.125 1.125a.5.5 0 0 1-.354.853h-3.52L8.5 10.02V6.5a.5.5 0 0 1 .854-.353l1.251 1.25A7.451 7.451 0 0 1 14.5 6.294c4.136 0 7.5 3.364 7.5 7.5 0 4.136-3.364 7.5-7.5 7.5a7.456 7.456 0 0 1-5.304-2.196v-.001Z"/> + <path d="M14.518 17.08c1.296 0 2.177-.844 2.174-2.02.003-1.114-.776-1.915-1.824-1.915-.51 0-.952.213-1.156.5h-.034l.15-1.457h2.543V11.18h-3.557l-.276 3.069 1.094.196c.18-.241.526-.392.87-.392.585.003 1.005.426 1.005 1.037 0 .605-.412 1.023-.989 1.023-.488 0-.883-.307-.91-.76h-1.195c.023 1.007.9 1.725 2.105 1.725Z"/> +</svg> diff --git a/toolkit/themes/shared/media/picture-in-picture-seekForward-button.svg b/toolkit/themes/shared/media/picture-in-picture-seekForward-button.svg new file mode 100644 index 0000000000..0968164dd4 --- /dev/null +++ b/toolkit/themes/shared/media/picture-in-picture-seekForward-button.svg @@ -0,0 +1,14 @@ +<!-- 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 width="28" height="28" viewBox="0 0 28 28" fill="context-fill" xmlns="http://www.w3.org/2000/svg"> + <g clip-path="url(#a)"> + <path d="M19.804 19.097A7.455 7.455 0 0 0 22 13.793a.624.624 0 1 0-1.25 0c0 1.669-.65 3.239-1.831 4.419a6.206 6.206 0 0 1-4.419 1.83 6.257 6.257 0 0 1-6.25-6.25 6.257 6.257 0 0 1 6.25-6.25c1.051 0 2.066.276 2.978.773L16.353 9.44a.5.5 0 0 0 .354.853h3.52l.273-.273V6.5a.5.5 0 0 0-.854-.353l-1.251 1.25A7.451 7.451 0 0 0 14.5 6.294C10.364 6.293 7 9.657 7 13.793c0 4.136 3.364 7.5 7.5 7.5 2.003 0 3.887-.78 5.304-2.196Z"/> + <path d="M14.518 17.08c1.296 0 2.177-.844 2.174-2.02.003-1.114-.776-1.915-1.824-1.915-.51 0-.952.213-1.156.5h-.034l.15-1.457h2.543V11.18h-3.557l-.276 3.069 1.094.196c.18-.241.526-.392.87-.392.585.003 1.005.426 1.005 1.037 0 .605-.412 1.023-.989 1.023-.488 0-.883-.307-.91-.76h-1.195c.023 1.007.9 1.725 2.105 1.725Z"/> + </g> + <defs> + <clipPath id="a"> + <path transform="translate(6 6)" d="M0 0h16v16H0z"/> + </clipPath> + </defs> +</svg> diff --git a/toolkit/themes/shared/media/pipToggle.css b/toolkit/themes/shared/media/pipToggle.css new file mode 100644 index 0000000000..2a2ddeac58 --- /dev/null +++ b/toolkit/themes/shared/media/pipToggle.css @@ -0,0 +1,393 @@ +/* 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/. */ + +/* This CSS file is for the Picture-in-Picture toggle. + * + * The "experiment" class is used to enable styling for the VARIANT version + * of the toggle for upcoming PiP Nimbus experiments. + * @see Bug 1811314. + * + * To see each section of style changes, search "PIP STYLING" in this file. + */ + +/* SHARED PIP STYLING */ + +.controlsOverlay[hidetoggle="true"].hovering > .pip-wrapper:not(.hovering) { + /* If this isn't !important, it will fail to override the other opacity + * rules, which are currently defined below this point in this file. */ + opacity: 0 !important; +} + +.pip-wrapper { + position: absolute; + cursor: pointer; + -moz-appearance: none; + background: none; + color: inherit; + border: none; + text-align: unset; + top: calc(70% - 40px); + opacity: 0; + padding-inline: 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-style: solid rgba(0, 254, 255, 1); + --pip-highlight-width: 2px; + --pip-toggle-distanceFromVideoEdge: 18px; + --pip-toggle-focus-outline-offset: 1px; + --pip-toggle-margin: 8px; + --pip-border-radius-toggle: 4px; + --pip-box-shadow-default: 0 0 4px rgba(255, 255, 255, 0.9); + --pip-box-shadow-hover: 0 0 10px rgba(255, 255, 255, 0.7); + --pip-expanded-height: 40px; + --pip-expanded-min-width: 200px; + --pip-expanded-max-width: max-content; +} + +/* Adjust sizing of the regular toggle wrapper to correctly show the + * focus outline when navigating via keyboard. */ +.pip-wrapper[has-used], +.pip-wrapper[small-video] { + height: var(--pip-icon-width-with-margins); + width: var(--pip-icon-width-with-margins); + border-radius: var(--pip-border-radius-toggle); + margin-right: calc(var(--pip-icon-width-with-margins) * -1); +} + +.pip-wrapper[policy="hidden"] { + display: none; +} + +.pip-wrapper[policy="top"] { + top: 0%; + translate: var(--pip-toggle-translate-x); +} + +.pip-wrapper[policy="one-quarter"] { + top: 25%; +} + +.pip-wrapper[policy="middle"] { + top: 50%; +} + +.pip-wrapper[policy="three-quarters"] { + top: 75%; +} + +.pip-wrapper[policy="bottom"] { + top: 100%; + translate: var(--pip-toggle-translate-x) -100%; +} + +.pip-wrapper[medium-video] > .pip-expanded > .pip-icon-label > .pip-label { + font-size: 13px; +} + +.pip-wrapper[medium-video] > .pip-expanded { + font-size: 11px; +} + +.pip-wrapper[position="right"] { + /* move from the right by total width of pip toggle so that it is at least visible in the video element */ + right: calc(var(--pip-icon-width-with-margins) + var(--pip-toggle-distanceFromVideoEdge)); +} + +/* Re-position the first-time toggle such that it will always be the same distance away from the right edge + * of the video, even if the label and/or message string(s) are long. */ +.pip-wrapper[position="right"] > .pip-expanded { + translate: calc(-100% + var(--pip-icon-width-with-margins)); + transform-origin: right; +} + +.pip-wrapper[position="left"] { + left: var(--pip-toggle-distanceFromVideoEdge); +} + +.pip-expanded, +.pip-small, +.pip-icon, +.pip-explainer { + position: absolute; + left: 0; + top: 0; +} + +.pip-wrapper > .pip-expanded { + display: flex; + opacity: 0; + align-items: center; + scale: 0.33 1; + font-size: 14px; +} + +.pip-wrapper:not([small-video], [has-used]) > .pip-small { + opacity: 0; + transition: opacity 200ms; +} + +.pip-wrapper:not([small-video], [has-used]) > .pip-expanded { + opacity: 1; + scale: 1; + pointer-events: none; +} + +.pip-wrapper:not([small-video], [has-used]).hovering > .pip-expanded { + pointer-events: auto; +} + +.pip-icon { + top: 8px; + left: 8px; + pointer-events: none; + background-image: url("chrome://global/skin/media/picture-in-picture-open.svg"); + background-position: center, center; + background-repeat: no-repeat; + background-size: var(--pip-icon-size) var(--pip-icon-size); + -moz-context-properties: fill; + fill: currentColor; + height: var(--pip-icon-size); + width: var(--pip-icon-size); +} + +.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-small { + width: 40px; + height: 40px; +} + +.pip-wrapper[position="left"] > .pip-expanded > .pip-icon-label > .pip-icon { + display: none; +} + +.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-block: auto; +} + +.pip-wrapper[position="right"] > .pip-expanded > .pip-icon-label > .pip-icon { + margin-inline: var(--pip-toggle-margin); +} + +.pip-wrapper[position="right"] > .pip-expanded > .pip-icon-label > .pip-label { + margin-right: var(--pip-toggle-margin); +} + +@media (prefers-reduced-motion) { + .pip-wrapper, + .pip-expanded, + .pip-small, + .pip-explainer { + /* Transition changes in other rules may override this one if reduced motion is preferred. + * Make sure this one always takes priority. */ + transition: none !important; + } +} + + +/* NO EXPERIMENT - PIP STYLING */ + +.controlsOverlay:not(.experiment).hovering > .pip-wrapper:not(:focus-visible) { + opacity: 0.8; +} + +.controlsOverlay:not(.experiment).hovering > .pip-wrapper.hovering { + opacity: 1; +} + +/* If the PiP toggle is keyboard focused, always show it at 100% opacity */ +.pip-wrapper:not([policy="hidden"], .experiment):focus-visible { + opacity: 1; +} + +/* If showing the expanded PiP toggle, don't outline the + * parent wrapper element - the expanded toggle handles its + * own outline. This also affects the regular toggle for small-videos. */ +.pip-wrapper:not([policy="hidden"], [has-used], .experiment):focus-visible { + outline: none; +} + +/* Override outline set by ua.css for the regular toggle. */ +.pip-wrapper[has-used]:not([policy="hidden"], .experiment):focus-visible { + outline: var(--control-focus-outline); +} + +.pip-wrapper:not(.experiment) > .pip-small { + background-color: rgba(12, 12, 13, 0.65); + box-shadow: 0 4px 4px rgba(12, 12, 13, 0.25); + border-radius: var(--pip-border-radius-toggle); +} + +.pip-wrapper:not(.experiment) > .pip-expanded, +.pip-wrapper:not(.experiment) > .pip-small { + border: 1px solid rgba(255, 255, 255, 0.1); + box-sizing: border-box; +} + +/* If first-time toggle is visible and then switched to the regular toggle for smaller videos, + * maintain the border shown on the first-time toggle. */ +.pip-wrapper:not([has-used], .experiment) > .pip-small { + border: var(--pip-highlight-width) var(--pip-highlight-style); +} + +.pip-wrapper:not(.experiment) > .pip-expanded { + border: var(--pip-highlight-width) var(--pip-highlight-style); + transition: opacity 250ms, scale 200ms; + height: var(--pip-expanded-height); + background-color: rgba(12, 12, 13, 0.9); + box-shadow: 0 4px 4px rgba(12, 12, 13, 0.25); + width: var(--pip-expanded-max-width); + min-width: var(--pip-expanded-min-width); + border-radius: 8px; +} + +.pip-wrapper:not(.experiment).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); +} + +.pip-wrapper:not([small-video], [has-used], .experiment).hovering > .pip-expanded { + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; +} + +/* Toggle message only appears for CONTROL variant. */ +.pip-wrapper:not(.experiment) > .pip-expanded > .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: 0 4px 4px rgba(12, 12, 13, 0.25); + opacity: 0; + margin-inline: calc(-1 * var(--pip-highlight-width)); + width: calc(100% - 24px); + word-break: break-word; + pointer-events: none; + user-select: none; +} + +.videocontrols[localedir="rtl"] .pip-wrapper:not(.experiment) > .pip-explainer { + text-align: right; + direction: rtl; +} + +.pip-wrapper:not(.experiment).hovering > .pip-expanded > .pip-explainer { + pointer-events: auto; + opacity: 1; + translate: 0 calc(40px - var(--pip-highlight-width)); +} + + +/* EXPERIMENT ONLY - PIP STYLING */ + +/* Since we change the outline for the first-time PiP toggle VARIANT, + * override the focus outline in videocontrols.css as well so that + * there is design consistency. */ +.controlsContainer.experiment { + --control-focus-outline: 2px solid #0060DF; +} + +.pip-wrapper.experiment > .pip-expanded > .pip-icon-label > .pip-label { + font-size: min(16px, 1.4em); +} + +/* Only the background will be set at 70% opacity. The icons and labels will remain at 100%. */ +.controlsOverlay.experiment.hovering > .pip-wrapper { + opacity: 1; +} + +/* If the PiP toggle is keyboard focused, always show it and override outline set by ua.css. + * Opacity only affects the toggle icon and label, not the background, which is handled separately. */ +.pip-wrapper.experiment:not([policy="hidden"]):focus-visible { + opacity: 1; + /* Wrapper size won't always match pip-small or pip-expanded, so don't apply outline on wrapper. */ + outline: none; +} + +/* For the regular PiP toggle, take into consideration small videos and has-used=true. */ +.pip-wrapper.experiment:is([has-used], [small-video]):not([policy="hidden"]):focus-visible > .pip-small, +.pip-wrapper.experiment:not([policy="hidden"], [has-used]):focus-visible > .pip-expanded { + outline: var(--control-focus-outline); + outline-offset: var(--pip-toggle-focus-outline-offset); +} + +.pip-wrapper.experiment > .pip-expanded > .pip-explainer { + display: none; +} + +.pip-wrapper.experiment > .pip-small { + border-radius: var(--pip-border-radius-toggle); + transition: background-color 200ms; +} + +.pip-wrapper.experiment > .pip-expanded { + transition: opacity 250ms, scale 200ms, translate 190ms, background-color 200ms; + height: var(--pip-expanded-height); + width: var(--pip-expanded-max-width); + min-width: var(--pip-expanded-min-width); + border-radius: var(--pip-border-radius-toggle); +} + +.pip-wrapper.experiment > .pip-small, +.pip-wrapper.experiment > .pip-expanded { + background-color: rgba(0, 0, 0, 0.7); + box-sizing: border-box; +} + +.pip-wrapper.experiment.hovering > .pip-small, +.pip-wrapper.experiment.hovering > .pip-expanded { + background-color: rgba(0, 0, 0, 1); +} + +.pip-wrapper.experiment:not([policy="hidden"], :focus-visible) > .pip-small, +.pip-wrapper.experiment:not([policy="hidden"], :focus-visible) > .pip-expanded { + box-shadow: var(--pip-box-shadow-default); +} + +.pip-wrapper.experiment:not([policy="hidden"], :focus-visible).hovering > .pip-small, +.pip-wrapper.experiment:not([policy="hidden"], :focus-visible).hovering > .pip-expanded { + box-shadow: var(--pip-box-shadow-hover); +} + +/* Remove white box shadow if there is keyboard focus on the toggle and + * replace it with blue box shadow instead. */ +.pip-wrapper.experiment:not([policy="hidden"]):focus-visible > .pip-small, +.pip-wrapper.experiment:not([policy="hidden"]):focus-visible > .pip-expanded { + box-shadow: 0 0 10px rgba(0, 96, 223, 0.9); +} diff --git a/toolkit/themes/shared/media/play-fill.svg b/toolkit/themes/shared/media/play-fill.svg new file mode 100644 index 0000000000..1558868ecb --- /dev/null +++ b/toolkit/themes/shared/media/play-fill.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" viewBox="0 0 16 16" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity"> + <path d="m2.992 13.498 0-10.996a1.5 1.5 0 0 1 2.245-1.303l9.621 5.498a1.5 1.5 0 0 1 0 2.605L5.237 14.8a1.5 1.5 0 0 1-2.245-1.302z"/> +</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/textrecognition.css b/toolkit/themes/shared/media/textrecognition.css new file mode 100644 index 0000000000..b10bc21329 --- /dev/null +++ b/toolkit/themes/shared/media/textrecognition.css @@ -0,0 +1,27 @@ +/* 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"); + +.textrecognition { + position: absolute; + overflow: clip; + + /* Prevent unwanted style inheritance. */ + font: normal normal normal 100%/normal sans-serif; + text-align: left; + white-space: normal; +} + +canvas { + position: absolute; + user-select: none; + inset: 0; +} + +span { + position: absolute; + transform-origin: 0 0; + color: transparent; +} 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..a0e1f91d5b --- /dev/null +++ b/toolkit/themes/shared/media/videocontrols.css @@ -0,0 +1,586 @@ +/* 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 selection from interacting weirdly with the page, + * see bug 1766093. Our text selection story with shadow dom should be + * better, see bug 1590379 */ + user-select: none; + /* 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; + --control-focus-outline: 2px solid #00DDFF; + --control-focus-outline-offset: -2px; + --pip-toggle-icon-width-height: 16px; + --pip-toggle-translate-x: calc(100% - var(--pip-toggle-icon-width-height) - 2 * var(--pip-toggle-padding)); + + color: #fff; +} +.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, +.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); +} + +.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 { + 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); +} + +.touch .controlBar { + height: 52px; +} + +.controlBar > .button { + /* Prevent #textTrackListContainer from blocking clicks on controls */ + z-index: 1; + 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; +} + +/* Keyboard focus styling for interactive control elements (includes control + bar, click to play and track list) */ +.controlBar > .button:focus-visible, +.volumeControl:focus-visible, +.scrubber:focus-visible, +.clickToPlay:focus-visible, +.textTrackList > .textTrackItem:focus-visible { + outline: var(--control-focus-outline); + outline-offset: var(--control-focus-outline-offset); +} + +.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/pause-fill.svg); +} +.playButton[paused] { + background-image: url(chrome://global/skin/media/play-fill.svg); +} + +.muteButton { + background-image: url(chrome://global/skin/media/audio.svg); +} +.muteButton[muted] { + background-image: url(chrome://global/skin/media/audio-muted.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%; + /* this is a foreground element even though it is implemented as a background */ + background-color: currentColor; + 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; + color: inherit; + 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; +} + +.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; +} + +.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 { + /* this is a foreground element even though it is implemented as a background */ + background-color: currentColor; +} + +.volumeControl::-moz-range-track { + background-color: rgba(0,0,0,0.7); +} + +@media (prefers-contrast) { + /* Show a border in high contrast mode since background-colors + are not shown. */ + .scrubber::-moz-range-track, + .volumeControl::-moz-range-track { + border: 1px solid; + } + + .scrubber::-moz-range-progress, + .volumeControl::-moz-range-progress { + border: 2px solid; + } +} + +.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; + background-color: transparent; + color: inherit; +} + +.textTrackList > .textTrackItem:hover { + background-color: #444; +} + +.textTrackList > .textTrackItem[aria-checked="true"] { + 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; +} + +@media (-moz-platform: macos) { + .positionDurationBox { + font-size-adjust: unset; + font-family: "Helvetica Neue", "Helvetica", sans-serif; + } +} + +.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/picture-in-picture-open.svg); + -moz-context-properties: fill; + fill: currentColor; +} + +.videocontrols[localedir="rtl"] .statusIcon[type="pictureInPicture"] { + transform: scaleX(-1); +} + +.pictureInPictureToggleLabel { + margin-inline-start: var(--pip-toggle-padding); +} + +/* Overlay Play button */ +.clickToPlay { + appearance: none; + border: none; + min-width: var(--clickToPlay-size); + min-height: var(--clickToPlay-size); + border-radius: 50%; + background-image: url(chrome://global/skin/media/play-fill.svg); + background-repeat: no-repeat; + background-position: 54% 50%; + background-size: 40% 40%; + background-color: #1a1a1a; + -moz-context-properties: fill; + fill: currentColor; + color: inherit; + 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); +} + +/* Status description formatting */ +.statusLabel { + display: none; + padding: 0 10px; + text-align: center; + font: message-box; + font-size: 14px; +} + +.videocontrols[localedir="rtl"] .statusLabel { + direction: rtl; +} + +[status="errorAborted"] > #errorAborted, +[status="errorNetwork"] > #errorNetwork, +[status="errorDecode"] > #errorDecode, +[status="errorSrcNotSupported"] > #errorSrcNotSupported, +[status="errorNoSource"] > #errorNoSource, +[status="errorGeneric"] > #errorGeneric, +[status="pictureInPicture"] > #pictureInPicture { + display: inline; +} + +@media (-moz-platform: windows) and (-moz-windows-default-theme: 0) { + .controlsSpacer, + .clickToPlay { + background-color: transparent; + } +} + +.a11y-only { + position: absolute; + left: -10000px; + width: 100px; + height: 100px; +} |
