gecko-dev/mobile/android/themes/core/touchcontrols.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;
}

.controlsSpacer {
  display: none;
  -moz-box-flex: 0;
}

.controlBar {
  -moz-box-flex: 1;
  width: 100%;
  background-color: rgba(50,50,50,0.8);
}

.buttonsBar {
  -moz-box-flex: 1;
  -moz-box-align: center;
}

.playButton,
.castingButton,
.muteButton,
.fullscreenButton {
  -moz-appearance: none;
  padding: 15px;
  border: none !important;
  width: 48px;
  height: 48px;
}

.playButton {
  background: url("chrome://browser/skin/images/pause.svg") no-repeat center;
  background-size: contain;
  background-origin: content-box;
}

.playButton[paused="true"] {
  background: url("chrome://browser/skin/images/play.svg") no-repeat center;
  background-size: contain;
  background-origin: content-box;
}

.castingButton {
  background: url("chrome://browser/skin/images/cast-ready.svg") no-repeat center;
  background-size: contain;
  background-origin: content-box;
}

.castingButton[active="true"] {
  background: url("chrome://browser/skin/images/cast-active.svg") no-repeat center;
  background-size: contain;
  background-origin: content-box;
}

/* 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 {
  padding-left: 17.25px;
  padding-right: 9.75px;
  background: url("chrome://browser/skin/images/mute.svg") no-repeat left;
  background-size: contain;
  background-origin: content-box;
}

.muteButton[muted="true"] {
  background: url("chrome://browser/skin/images/unmute.svg") no-repeat left;
  background-size: contain;
  background-origin: content-box;
}

.fullscreenButton {
  background-color: transparent;
  background: url("chrome://browser/skin/images/fullscreen.svg") no-repeat center;
  background-size: contain;
  background-origin: content-box;
}

.fullscreenButton[fullscreened] {
  background: url("chrome://browser/skin/images/exitfullscreen.svg") no-repeat center;
  background-size: contain;
  background-origin: content-box;
}

.controlBar[fullscreen-unavailable] .fullscreenButton {
  display: none;
}

/* bars */
.scrubberStack {
  -moz-box-flex: 1;
  padding: 0px 18px;
}

.flexibleBar,
.flexibleBar .progress-bar,
.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;
}

.flexibleBar,
.bufferBar,
.progressBar {
  height: 32px;
  padding: 15px 0px;
}

.flexibleBar {
  padding: 16px 0px;
}

.flexibleBar .progress-bar {
  border: 1px #777777 solid;
  border-radius: 1px;
}

.bufferBar .progress-bar {
  border: 2px #AFB1B3 solid;
  border-radius: 2px;
}

.progressBar .progress-bar {
  border: 2px #FF9500 solid;
  border-radius: 2px;
}

.scrubber {
  margin-left: -12px;
  margin-right: -12px;
}

.scrubber .scale-thumb {
  display: -moz-box;
  margin: 0px !important;
  padding: 0px !important;
  background: url("chrome://browser/skin/images/scrubber.svg") no-repeat center;
  background-size: 12px 12px;
  height: 32px;
  width: 32px;
}

.positionLabel, .durationLabel {
  font-family: 'Roboto', Helvetica, Arial, sans-serif;
  font-size: 16px;
  color: white;
}

.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,
.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;
}

/* Overlay Play button */
.clickToPlay {
  width: 64px;
  height: 64px;
  -moz-box-pack: center;
  -moz-box-align: center;
  opacity: 0.7;
  background-image: url(chrome://global/skin/media/clicktoplay-bgtexture.png),
                    url(chrome://global/skin/media/videoClickToPlayButton.svg);
  background-repeat: repeat, no-repeat;
  background-position: center, center;
  background-size: auto, 64px 64px;
  background-color: hsla(0,0%,10%,.5);
}