Source code
Revision control
Copy as Markdown
Other Tools
/* 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
.videocontrols {
writing-mode: horizontal-tb;
width: 100%;
height: 100%;
display: inline-block;
overflow: hidden;
direction: ltr;
/* Prevent selection from interacting weirdly with the page,
user-select: none;
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] {
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;
}
.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 (prefers-contrast) {
.controlsSpacer,
.clickToPlay {
background-color: transparent;
}
}
.a11y-only {
position: absolute;
left: -10000px;
width: 100px;
height: 100px;
}
:host::cue {
font-size: var(--cue-font-size);
writing-mode: var(--cue-writing-mode, inherit);
}