michael@0: /* This Source Code Form is subject to the terms of the Mozilla Public
michael@0:  * License, v. 2.0. If a copy of the MPL was not distributed with this
michael@0:  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
michael@0: 
michael@0: @namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
michael@0: 
michael@0: /* video controls */
michael@0: .controlsOverlay {
michael@0:   -moz-box-pack: center;
michael@0:   -moz-box-align: end;
michael@0:   padding: 20px;
michael@0:   -moz-box-flex: 1;
michael@0:   -moz-box-orient: horizontal;
michael@0: }
michael@0: 
michael@0: .controlBar {
michael@0:   -moz-box-flex: 1;
michael@0:   font-size: 16pt;
michael@0:   padding: 10px;
michael@0:   background-color: #34353a;
michael@0:   border-radius: 8px;
michael@0:   width: 100%;
michael@0: }
michael@0: 
michael@0: .controlsSpacer {
michael@0:   display: none;
michael@0:   -moz-box-flex: 0;
michael@0: }
michael@0: 
michael@0: .fullscreenButton,
michael@0: .playButton,
michael@0: .castingButton,
michael@0: .muteButton {
michael@0:   -moz-appearance: none;
michael@0:   min-height: 42px;
michael@0:   min-width: 42px;
michael@0:   border: none !important;
michael@0: }
michael@0: 
michael@0: .fullscreenButton {
michael@0:   background: url("chrome://browser/skin/images/fullscreen-hdpi.png") no-repeat center;
michael@0: }
michael@0: 
michael@0: .fullscreenButton[fullscreened="true"] {
michael@0:   background: url("chrome://browser/skin/images/exitfullscreen-hdpi.png") no-repeat center;
michael@0: }
michael@0: 
michael@0: .playButton {
michael@0:   background: url("chrome://browser/skin/images/pause-hdpi.png") no-repeat center;
michael@0: }
michael@0: 
michael@0: /*
michael@0:  * Normally the button bar has fullscreen spacer play spacer mute, but if
michael@0:  * this is an audio control rather than a video control, the fullscreen button
michael@0:  * is hidden by videocontrols.xml, and that alters the position of the
michael@0:  * play button.  This workaround moves it back to center.
michael@0:  */
michael@0: .controlBar.audio-only .playButton {
michael@0:   transform: translateX(28px);
michael@0: }
michael@0: 
michael@0: .playButton[paused="true"] {
michael@0:   background: url("chrome://browser/skin/images/play-hdpi.png") no-repeat center;
michael@0: }
michael@0: 
michael@0: .castingButton {
michael@0:   display: none;
michael@0: }
michael@0: 
michael@0: .muteButton {
michael@0:   background: url("chrome://browser/skin/images/mute-hdpi.png") no-repeat center;
michael@0: }
michael@0: 
michael@0: .muteButton[muted="true"] {
michael@0:   background: url("chrome://browser/skin/images/unmute-hdpi.png") no-repeat center;
michael@0: }
michael@0: 
michael@0: /* bars */
michael@0: .scrubberStack {
michael@0:   width: 100%;
michael@0:   min-height: 32px;
michael@0:   max-height: 32px;
michael@0:   padding: 0px 8px;
michael@0:   margin: 0px;
michael@0: }
michael@0: 
michael@0: .bufferBar,
michael@0: .bufferBar .progress-bar,
michael@0: .progressBar,
michael@0: .progressBar .progress-bar,
michael@0: .scrubber,
michael@0: .scrubber .scale-slider,
michael@0: .scrubber .scale-thumb {
michael@0:   -moz-appearance: none;
michael@0:   border: none;
michael@0:   padding: 0px;
michael@0:   margin: 0px;
michael@0:   background-color: transparent;
michael@0: }
michael@0: 
michael@0: .bufferBar {
michael@0:   border: 1px solid #5e6166;
michael@0: }
michael@0: 
michael@0: .bufferBar,
michael@0: .progressBar {
michael@0:   margin: 9px 0px 11px 0px;
michael@0:   height: 8px
michael@0: }
michael@0: 
michael@0: .bufferBar .progress-bar {
michael@0:   background-color: #5e6166;
michael@0: }
michael@0: 
michael@0: .progressBar .progress-bar {
michael@0:   background-color: white;
michael@0: }
michael@0: 
michael@0: .scrubber {
michael@0:   margin-left: -16px;
michael@0:   margin-right: -16px;
michael@0: }
michael@0: 
michael@0: .scrubber .scale-thumb {
michael@0:   display: -moz-box;
michael@0:   background: url("chrome://browser/skin/images/scrubber-hdpi.png") no-repeat;
michael@0:   height: 32px;
michael@0:   width: 32px;
michael@0: }
michael@0: 
michael@0: .durationBox {
michael@0:   -moz-box-orient: horizontal;
michael@0:   -moz-box-pack: start;
michael@0:   -moz-box-align: center;
michael@0:   color: white;
michael@0:   font-weight: bold;
michael@0:   padding: 0px 8px;
michael@0:   margin-top: -6px;
michael@0: }
michael@0: 
michael@0: .positionLabel {
michael@0:   -moz-box-flex: 1;
michael@0: }
michael@0: 
michael@0: .statusOverlay {
michael@0:   -moz-box-align: center;
michael@0:   -moz-box-pack: center;
michael@0:   background-color: rgb(50,50,50);
michael@0: }
michael@0: 
michael@0: .statusIcon {
michael@0:   margin-bottom: 28px;
michael@0:   width: 36px;
michael@0:   height: 36px;
michael@0: }
michael@0: 
michael@0: .statusIcon[type="throbber"] {
michael@0:   background: url(chrome://global/skin/media/throbber.png) no-repeat center;
michael@0: }
michael@0: 
michael@0: .statusIcon[type="error"] {
michael@0:   background: url(chrome://global/skin/media/error.png) no-repeat center;
michael@0: }
michael@0: 
michael@0: /* CSS Transitions */
michael@0: .controlBar:not([immediate]) {
michael@0:   transition-property: opacity;
michael@0:   transition-duration: 200ms;
michael@0: }
michael@0: 
michael@0: .controlBar[fadeout] {
michael@0:   opacity: 0;
michael@0: }
michael@0: 
michael@0: .statusOverlay:not([immediate]) {
michael@0:   transition-property: opacity;
michael@0:   transition-duration: 300ms;
michael@0:   transition-delay: 750ms;
michael@0: }
michael@0: 
michael@0: .statusOverlay[fadeout] {
michael@0:   opacity: 0;
michael@0: }
michael@0: 
michael@0: .volumeStack,
michael@0: .controlBar[firstshow="true"] .muteButton,
michael@0: .controlBar[firstshow="true"] .scrubberStack,
michael@0: .controlBar[firstshow="true"] .durationBox,
michael@0: .timeLabel {
michael@0:   display: none;
michael@0: }
michael@0: 
michael@0: .controlBar[firstshow="true"] .playButton {
michael@0:   transform: none;
michael@0: }
michael@0: 
michael@0: /* Error description formatting */
michael@0: .errorLabel {
michael@0:   font-family: Helvetica, Arial, sans-serif;
michael@0:   font-size: 11px;
michael@0:   color: #bbb;
michael@0:   text-shadow:
michael@0:     -1px -1px 0 #000,
michael@0:     1px -1px 0 #000,
michael@0:     -1px 1px 0 #000,
michael@0:     1px 1px 0 #000;
michael@0:   padding: 0 10px;
michael@0:   text-align: center;
michael@0: }