mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-20 00:35:44 +00:00
b5f521fe19
The adjusted margin-end needs to be applied to the volume controls when the fullscreen button is hidden due to fullscreen being unavailable, such as within an iframe that is lacking the allowfullscreen attribute. Previously the margin-end was only applied when the video was determined to be audio-only.
223 lines
4.4 KiB
CSS
223 lines
4.4 KiB
CSS
/* 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.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
|
|
|
|
/* video controls */
|
|
.controlsOverlay {
|
|
-moz-box-pack: center;
|
|
-moz-box-align: end;
|
|
-moz-box-flex: 1;
|
|
-moz-box-orient: horizontal;
|
|
}
|
|
|
|
.controlsOverlay[scaled] {
|
|
/* scaled attribute in videocontrols.css causes conflict
|
|
due to different -moz-box-orient values */
|
|
-moz-box-align: end;
|
|
}
|
|
|
|
.controlBar {
|
|
-moz-box-flex: 1;
|
|
font-size: 16pt;
|
|
background-color: rgba(50,50,50,0.8);
|
|
width: 100%;
|
|
}
|
|
|
|
.controlsSpacer {
|
|
display: none;
|
|
-moz-box-flex: 0;
|
|
}
|
|
|
|
.playButton,
|
|
.castingButton,
|
|
.muteButton,
|
|
.fullscreenButton {
|
|
-moz-appearance: none;
|
|
min-height: 42px;
|
|
min-width: 42px;
|
|
border: none !important;
|
|
}
|
|
|
|
.playButton {
|
|
background: url("chrome://browser/skin/images/pause-hdpi.png") no-repeat center;
|
|
}
|
|
|
|
.playButton[paused="true"] {
|
|
background: url("chrome://browser/skin/images/play-hdpi.png") no-repeat center;
|
|
}
|
|
|
|
.castingButton {
|
|
background: url("chrome://browser/skin/images/cast-ready-hdpi.png") no-repeat center;
|
|
}
|
|
|
|
.castingButton[active="true"] {
|
|
background: url("chrome://browser/skin/images/cast-active-hdpi.png") no-repeat center;
|
|
}
|
|
|
|
/* If the casting button is showing, there will be two buttons on the right side of the controls.
|
|
* This shifts the play button to be centered.
|
|
*/
|
|
.castingButton:not([hidden="true"]) + .fullscreenButton + spacer + .playButton {
|
|
transform: translateX(-21px);
|
|
}
|
|
|
|
.muteButton {
|
|
background: url("chrome://browser/skin/images/mute-hdpi.png") no-repeat center;
|
|
}
|
|
|
|
.muteButton[muted="true"] {
|
|
background: url("chrome://browser/skin/images/unmute-hdpi.png") no-repeat center;
|
|
}
|
|
|
|
.fullscreenButton {
|
|
background-color: transparent;
|
|
background: url("chrome://browser/skin/images/fullscreen-hdpi.png") no-repeat center;
|
|
}
|
|
|
|
.fullscreenButton[fullscreened] {
|
|
background: url("chrome://browser/skin/images/exitfullscreen-hdpi.png") no-repeat center;
|
|
}
|
|
|
|
.controlBar[fullscreen-unavailable] .fullscreenButton {
|
|
display: none;
|
|
}
|
|
|
|
/* bars */
|
|
.scrubberStack {
|
|
width: 100%;
|
|
min-height: 32px;
|
|
max-height: 32px;
|
|
padding: 0px 8px;
|
|
margin: 0px;
|
|
}
|
|
|
|
.bufferBar,
|
|
.bufferBar .progress-bar,
|
|
.progressBar,
|
|
.progressBar .progress-bar,
|
|
.scrubber,
|
|
.scrubber .scale-slider,
|
|
.scrubber .scale-thumb {
|
|
-moz-appearance: none;
|
|
border: none;
|
|
padding: 0px;
|
|
margin: 0px;
|
|
background-color: transparent;
|
|
}
|
|
|
|
.bufferBar {
|
|
border: 1px solid #5e6166;
|
|
}
|
|
|
|
.bufferBar,
|
|
.progressBar {
|
|
margin: 11px 0px 9px 0px;
|
|
height: 8px
|
|
}
|
|
|
|
.bufferBar .progress-bar {
|
|
background-color: #5e6166;
|
|
}
|
|
|
|
.progressBar .progress-bar {
|
|
background-color: white;
|
|
}
|
|
|
|
.scrubber {
|
|
margin-left: -16px;
|
|
margin-right: -16px;
|
|
}
|
|
|
|
.scrubber .scale-thumb {
|
|
display: -moz-box;
|
|
margin: 0px !important;
|
|
padding: 0px !important;
|
|
background: url("chrome://browser/skin/images/scrubber-hdpi.png") no-repeat;
|
|
background-size: 32px 32px;
|
|
height: 32px;
|
|
width: 32px;
|
|
}
|
|
|
|
.durationBox {
|
|
-moz-box-orient: horizontal;
|
|
-moz-box-pack: start;
|
|
-moz-box-align: center;
|
|
color: white;
|
|
font-weight: bold;
|
|
padding: 0px 8px;
|
|
margin-top: -6px;
|
|
}
|
|
|
|
.positionLabel {
|
|
-moz-box-flex: 1;
|
|
}
|
|
|
|
.statusOverlay {
|
|
-moz-box-align: center;
|
|
-moz-box-pack: center;
|
|
background-color: rgb(50,50,50);
|
|
}
|
|
|
|
.statusIcon {
|
|
margin-bottom: 28px;
|
|
width: 36px;
|
|
height: 36px;
|
|
}
|
|
|
|
.statusIcon[type="throbber"] {
|
|
background: url(chrome://global/skin/media/throbber.png) no-repeat center;
|
|
}
|
|
|
|
.statusIcon[type="error"] {
|
|
background: url(chrome://global/skin/media/error.png) no-repeat center;
|
|
}
|
|
|
|
/* CSS Transitions */
|
|
.controlBar:not([immediate]) {
|
|
transition-property: opacity;
|
|
transition-duration: 200ms;
|
|
}
|
|
|
|
.controlBar[fadeout] {
|
|
opacity: 0;
|
|
}
|
|
|
|
.statusOverlay:not([immediate]) {
|
|
transition-property: opacity;
|
|
transition-duration: 300ms;
|
|
transition-delay: 750ms;
|
|
}
|
|
|
|
.statusOverlay[fadeout] {
|
|
opacity: 0;
|
|
}
|
|
|
|
.volumeStack,
|
|
.controlBar[firstshow="true"] .muteButton,
|
|
.controlBar[firstshow="true"] .scrubberStack,
|
|
.controlBar[firstshow="true"] .durationBox,
|
|
.timeLabel {
|
|
display: none;
|
|
}
|
|
|
|
.controlBar[firstshow="true"] .playButton {
|
|
-moz-transform: none;
|
|
}
|
|
|
|
/* Error description formatting */
|
|
.errorLabel {
|
|
font-family: Helvetica, Arial, sans-serif;
|
|
font-size: 11px;
|
|
color: #bbb;
|
|
text-shadow:
|
|
-1px -1px 0 #000,
|
|
1px -1px 0 #000,
|
|
-1px 1px 0 #000,
|
|
1px 1px 0 #000;
|
|
padding: 0 10px;
|
|
text-align: center;
|
|
}
|
|
|