comm-central/suite/themes/modern/global/media/videocontrols.css

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
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
@namespace url("http://www.w3.org/1999/xhtml");
video > xul|videocontrols,
audio > xul|videocontrols {
writing-mode: horizontal-tb;
width: 100%;
height: 100%;
display: inline-block;
}
.controlsContainer [hidden="true"],
.controlBar[hidden] {
display: 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;
}
.controlsSpacer {
background-color: rgba(255,255,255,.4);
}
.controlBar {
position: relative;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
height: 40px;
padding: 0 9px;
background-color: #A5B3C0;
border-style: solid;
border-width: 2px;
border-color: #000000;
border-radius: 5px;
}
.playButton,
.muteButton,
.closedCaptionButton,
.fullscreenButton {
-moz-binding: none;
height: 100%;
min-height: 30px;
min-width: 30px;
padding: 6px;
border: 0;
margin: 0;
background-color: transparent;
background-repeat: no-repeat;
background-position: center;
background-origin: content-box;
background-clip: content-box;
}
.playButton {
-moz-context-properties: fill;
fill: #ffffff;
}
.playButton:hover {
fill: #C7D0D9;
}
.playButton:hover:active {
fill: #6B7B8D;
}
.playButton[paused] {
-moz-context-properties: fill;
fill: #ffffff;
}
.playButton[paused]:hover {
fill: #C7D0D9;
}
.playButton[paused]:hover:active {
fill: #6B7B8D;
}
.muteButton {
}
.muteButton:hover {
}
.muteButton:hover:active {
}
.muteButton[muted] {
}
.muteButton[muted]:hover {
}
.muteButton[muted]:hover:active {
}
.muteButton[noAudio],
.muteButton[noAudio]:hover,
.muteButton[noAudio]:hover:active {
}
.muteButton[noAudio] + .volumeStack {
display: none;
}
.closedCaptionButton {
}
.closedCaptionButton:hover {
}
.closedCaptionButton:hover:active {
}
.closedCaptionButton[enabled] {
}
.closedCaptionButton[enabled]:hover {
}
.closedCaptionButton[enabled]:hover:active {
}
.fullscreenButton {
}
.fullscreenButton:hover {
}
.fullscreenButton:hover:active {
}
.fullscreenButton[fullscreened] {
}
.fullscreenButton[fullscreened]:hover {
}
.fullscreenButton[fullscreened]:hover:active {
}
.controlBarSpacer {
flex-grow: 1;
}
.volumeControl::-moz-range-thumb,
.scrubber::-moz-range-thumb {
height: 13px;
width: 13px;
border-style: solid;
border-color: #000000;
border-radius: 50%;
background-color: #ffffff;
}
.volumeControl::-moz-focus-outer,
.scrubber::-moz-focus-outer {
border: 0;
}
.progressBackgroundBar {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.progressStack {
position: relative;
width: 100%;
height: 5px;
}
.scrubberStack {
min-width: 48px;
flex-basis: 48px;
flex-grow: 2;
flex-shrink: 0;
margin: 0 9px;
}
.volumeStack {
max-width: 60px;
min-width: 48px;
flex-grow: 1;
flex-shrink: 0;
margin-right: 6px;
margin-left: 4px;
}
.bufferBar,
.progressBar,
.scrubber,
.volumeBackground,
.volumeControl {
bottom: 0;
left: 0;
position: absolute;
width: 100%;
height: 100%;
padding: 0;
border: 0;
border-radius: 2.5px;
margin: 0;
background: none;
background-color: transparent;
}
.bufferBar,
.volumeBackground {
background-color: rgba(0,0,0,0.7);
}
.bufferBar::-moz-progress-bar,
.progressBar::-moz-progress-bar,
.volumeBackground::-moz-meter-bar {
height: 100%;
padding: 0;
margin: 0;
border: 0;
border-radius: 2.5px;
background: none;
}
.scrubber:hover::-moz-range-thumb,
.volumeControl:hover::-moz-range-thumb {
background-color: #C7D0D9;
}
.scrubber:active::-moz-range-thumb,
.volumeControl:active::-moz-range-thumb {
background-color: #6B7B8D;
}
.scrubber::-moz-range-track,
.scrubber::-moz-range-progress {
background-color: transparent;
}
.volumeControl::-moz-range-progress,
.volumeControl::-moz-range-track {
height: 5px;
border-radius: 2.5px;
}
.volumeControl::-moz-range-progress {
background-color: #ffffff;
}
.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: 2.5px;
}
.progressBar::-moz-progress-bar {
background-color: #C7D0D9;
}
.textTrackList {
position: absolute;
right: 5px;
bottom: 45px;
max-width: 80%;
border: 1px solid #000000;
border-radius: 2.5px;
padding: 5px 0;
vertical-align: middle;
font-size: 12px;
background-color: #000000;
opacity: 0.7;
}
.textTrackList > .textTrackItem {
display: block;
width: 100%;
height: 30px;
padding: 2px 10px;
border: none;
margin: 0;
white-space: nowrap;
overflow: hidden;
text-align: left;
text-overflow: ellipsis;
color: #ffffff;
background-color: transparent;
}
.textTrackList > .textTrackItem:hover {
background-color: #444444;
}
.textTrackList > .textTrackItem[on] {
color: #C7D0D9;
}
.positionLabel,
.durationLabel {
display: none;
}
.positionDurationBox {
text-align: center;
padding-inline-start: 1px;
padding-inline-end: 9px;
white-space: nowrap;
font: message-box;
font-size: 13px;
font-size-adjust: 0.55;
color: #ffffff;
}
.duration {
display: inline-block;
white-space: pre;
color: #404040;
}
.statusIcon {
width: 36px;
height: 36px;
margin-bottom: 20px;
}
.statusIcon[type="throbber"] {
background: url(chrome://global/skin/media/throbber.png) no-repeat center;
}
.statusIcon[type="throbber"][stalled] {
background: url(chrome://global/skin/media/stalled.png) no-repeat center;
}
.statusIcon[type="error"] {
min-width: 70px;
min-height: 60px;
background: url(chrome://global/skin/media/error.png) no-repeat center;
background-size: contain;
}
/* Overlay Play button */
.clickToPlay {
min-width: 48px;
min-height: 48px;
border-radius: 50%;
background-repeat: no-repeat;
background-position: 54% 50%;
background-size: 40% 40%;
background-color: #1a1a1a;
-moz-context-properties: fill;
fill: #ffffff;
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;
}
/* CSS Transitions */
.clickToPlay {
transition-property: transform, opacity;
transition-duration: 400ms, 400ms;
}
.controlsSpacer[fadeout] {
opacity: 0;
}
.clickToPlay[fadeout] {
transform: scale(3);
opacity: 0;
}
.clickToPlay[fadeout][immediate] {
transition-property: opacity, background-size;
transition-duration: 0s, 0s;
}
.controlBar:not([immediate]) {
transition-property: opacity;
transition-duration: 200ms;
}
.controlBar[fadeout] {
opacity: 0;
}
.volumeStack:not([immediate]) {
transition-property: opacity, margin-top;
transition-duration: 200ms, 200ms;
}
.statusOverlay:not([immediate]) {
transition-property: opacity;
transition-duration: 300ms;
transition-delay: 750ms;
}
.statusOverlay[fadeout] {
opacity: 0;
}
/* Error description formatting */
.errorLabel {
padding: 0 10px;
text-align: center;
font: message-box;
font-size: 14px;
color: #ffffff;
}
.errorLabel {
display: none;
}
[error="errorAborted"] > [anonid="errorAborted"],
[error="errorNetwork"] > [anonid="errorNetwork"],
[error="errorDecode"] > [anonid="errorDecode"],
[error="errorSrcNotSupported"] > [anonid="errorSrcNotSupported"],
[error="errorNoSource"] > [anonid="errorNoSource"],
[error="errorGeneric"] > [anonid="errorGeneric"] {
display: inline;
}