1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/toolkit/themes/windows/global/media/videocontrols.css Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,319 @@
1.4 +/* This Source Code Form is subject to the terms of the Mozilla Public
1.5 + * License, v. 2.0. If a copy of the MPL was not distributed with this
1.6 + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
1.7 +
1.8 +@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
1.9 +@namespace html url("http://www.w3.org/1999/xhtml");
1.10 +
1.11 +.controlBar {
1.12 + height: 28px;
1.13 + background-color: rgba(35,31,32,.74);
1.14 +}
1.15 +
1.16 +.playButton,
1.17 +.muteButton,
1.18 +.fullscreenButton {
1.19 + background-color: transparent;
1.20 + background-repeat: no-repeat;
1.21 + background-position: center;
1.22 + -moz-appearance: none; /* Remove the native button appearance and styling */
1.23 + margin: 0;
1.24 + padding: 0;
1.25 + min-height: 28px;
1.26 + min-width: 28px;
1.27 + border: none;
1.28 + opacity: 0.7;
1.29 +}
1.30 +
1.31 +.playButton:hover,
1.32 +.muteButton:hover,
1.33 +.fullscreenButton:hover {
1.34 + opacity: 1;
1.35 +}
1.36 +
1.37 +.playButton:hover:active,
1.38 +.muteButton:hover:active,
1.39 +.fullscreenButton:hover:active {
1.40 + opacity: 0.4;
1.41 +}
1.42 +
1.43 +.playButton {
1.44 + background-image: url(chrome://global/skin/media/pauseButton.png);
1.45 + margin-right: -22px; /* 1/2 of scrubber thumb width, for overhang. */
1.46 + position: relative; /* Trick to work around negative margin interfering with clicking on the button. */
1.47 +}
1.48 +
1.49 +.playButton[paused] {
1.50 + background-image: url(chrome://global/skin/media/playButton.png);
1.51 +}
1.52 +
1.53 +.muteButton {
1.54 + background-image: url(chrome://global/skin/media/muteButton.png);
1.55 + min-width: 33px;
1.56 +}
1.57 +.muteButton[muted] {
1.58 + background-image: url(chrome://global/skin/media/unmuteButton.png);
1.59 +}
1.60 +
1.61 +.muteButton[noAudio] {
1.62 + background-image: url(chrome://global/skin/media/noAudio.png);
1.63 +}
1.64 +
1.65 +.muteButton[noAudio] + .volumeStack {
1.66 + display: none;
1.67 +}
1.68 +
1.69 +.fullscreenButton {
1.70 + background-image: -moz-image-rect(url("chrome://global/skin/media/fullscreenButton.png"), 0, 16, 16, 0);
1.71 +}
1.72 +
1.73 +.fullscreenButton[fullscreened] {
1.74 + background-image: -moz-image-rect(url("chrome://global/skin/media/fullscreenButton.png"), 0, 32, 16, 16);
1.75 +}
1.76 +
1.77 +.volumeControl {
1.78 + width: 32px;
1.79 + opacity: 0;
1.80 +}
1.81 +
1.82 +.volumeBackground,
1.83 +.volumeForeground {
1.84 + background-repeat: no-repeat;
1.85 + background-position: center;
1.86 + width: 32px;
1.87 +}
1.88 +
1.89 +.volumeBackground {
1.90 + background-image: url(chrome://global/skin/media/volume-empty.png);
1.91 +}
1.92 +
1.93 +.volumeForeground {
1.94 + background-image: url(chrome://global/skin/media/volume-full.png);
1.95 + background-clip: content-box;
1.96 +}
1.97 +
1.98 +.controlBar[audio-only] > .volumeStack {
1.99 + /* This value is duplicated in the videocontrols.xml adjustControlSize function. */
1.100 + -moz-margin-end: 8px;
1.101 +}
1.102 +
1.103 +.volumeControl .scale-thumb {
1.104 + min-width: 0;
1.105 + opacity: 0;
1.106 +}
1.107 +
1.108 +.durationBox {
1.109 + -moz-box-pack: center;
1.110 +}
1.111 +
1.112 +.durationLabel {
1.113 + margin-left: -22px; /* 1/2 of scrubber thumb width, for overhang. */
1.114 + padding-left: 8px; /* don't bump into the scrubber bar */
1.115 + padding-top: 0; /* center vertically with scrubber bar */
1.116 + color: rgba(255,255,255,.75);
1.117 + font-size: 11px;
1.118 + font-family: Arial, sans-serif;
1.119 +}
1.120 +
1.121 +.positionLabel {
1.122 + display: none;
1.123 +}
1.124 +
1.125 +.backgroundBar {
1.126 + /* margin top/bottom: make bar 8px tall (control height = 28, minus 2 * 10 margin) */
1.127 + /* margin left/right: 1/2 of scrubber thumb width, for overhang. */
1.128 + margin: 10px 22px;
1.129 + background-color: rgba(255,255,255,.5);
1.130 + border-radius: 2.5px;
1.131 +}
1.132 +
1.133 +.bufferBar,
1.134 +.progressBar {
1.135 + /* margin top/bottom: make bar 8px tall (control height = 28, minus 2 * 10 margin) */
1.136 + /* margin left/right: 1/2 of scrubber thumb width, for overhang. */
1.137 + margin: 10px 22px;
1.138 + -moz-appearance: none;
1.139 + border: none;
1.140 + background-color: transparent;
1.141 + min-width: 0;
1.142 + min-height: 0;
1.143 +}
1.144 +
1.145 +/* .progress-bar is an element inside the <progressmeter> implementation. */
1.146 +.bufferBar .progress-bar {
1.147 + /*
1.148 + * Note that this is drawn on top of the .backgroundBar. So although this
1.149 + * has the same background-color specified, the semitransparent
1.150 + * compositing gives it a different visual appearance.
1.151 + */
1.152 + background-color: rgba(255,255,255,.5);
1.153 + border-radius: 2.5px;
1.154 + -moz-appearance: none;
1.155 +}
1.156 +
1.157 +.progressBar .progress-bar {
1.158 + background-color: white;
1.159 + border-radius: 2.5px;
1.160 + -moz-appearance: none;
1.161 +}
1.162 +
1.163 +/* .scale-slider is an element inside the <scale> implementation. */
1.164 +.scrubber .scale-slider,
1.165 +.volumeControl .scale-slider {
1.166 + /* Hide the default horizontal bar. */
1.167 + -moz-appearance: none;
1.168 + background: none;
1.169 + margin: 0;
1.170 +}
1.171 +
1.172 +.scrubber .scale-slider {
1.173 + /* abs(margin-top) + margin-bottom + bar height == timeThumb height */
1.174 + margin-top: -10px;
1.175 + margin-bottom: 10px;
1.176 +}
1.177 +
1.178 +/* .scale-thumb is an element inside the <scale> implementation. */
1.179 +.scrubber .scale-thumb,
1.180 +.volumeControl .scale-thumb {
1.181 + /* Override the default thumb appearance with a custom image. */
1.182 + -moz-appearance: none;
1.183 + background: transparent;
1.184 + border: none;
1.185 +}
1.186 +
1.187 +.timeThumb {
1.188 + background: url(chrome://global/skin/media/scrubberThumb.png) no-repeat center;
1.189 + min-width: 45px;
1.190 + min-height: 28px;
1.191 + -moz-box-pack: center;
1.192 +}
1.193 +
1.194 +.timeThumb[showhours="true"] {
1.195 + background-image: url(chrome://global/skin/media/scrubberThumbWide.png);
1.196 +}
1.197 +
1.198 +.timeLabel {
1.199 + color: rgba(255,255,255,.75);
1.200 + font-size: 10px;
1.201 + font-family: Arial, sans-serif;
1.202 + text-shadow: rgba(0,0,0,.3) 0 1px;
1.203 + padding-top: 5px;
1.204 +}
1.205 +
1.206 +.statusOverlay {
1.207 + -moz-box-align: center;
1.208 + -moz-box-pack: center;
1.209 + background-color: rgba(0,0,0,.55);
1.210 +}
1.211 +
1.212 +.statusIcon {
1.213 + margin-bottom: 28px; /* same height as .controlBar, to keep icon centered above it */
1.214 + width: 36px;
1.215 + height: 36px;
1.216 +}
1.217 +
1.218 +.statusIcon[type="throbber"] {
1.219 + background: url(chrome://global/skin/media/throbber.png) no-repeat center;
1.220 +}
1.221 +
1.222 +.statusIcon[type="throbber"][stalled] {
1.223 + background: url(chrome://global/skin/media/stalled.png) no-repeat center;
1.224 +}
1.225 +
1.226 +.statusIcon[type="error"] {
1.227 + background: url(chrome://global/skin/media/error.png) no-repeat center;
1.228 +}
1.229 +
1.230 +/* Overlay Play button */
1.231 +.clickToPlay {
1.232 + width: 64px;
1.233 + height: 64px;
1.234 + -moz-box-pack: center;
1.235 + -moz-box-align: center;
1.236 + opacity: 0.7;
1.237 + background-image: url(chrome://global/skin/media/clicktoplay-bgtexture.png),
1.238 + url(chrome://global/skin/media/videoClickToPlayButton.svg);
1.239 + background-repeat: repeat, no-repeat;
1.240 + background-position: center, center;
1.241 + background-size: auto, 64px 64px;
1.242 + background-color: hsla(0,0%,10%,.5);
1.243 +}
1.244 +.clickToPlay:hover {
1.245 + opacity: 1;
1.246 +}
1.247 +
1.248 +/* Statistics formatting */
1.249 +html|*.statsDiv {
1.250 + position: relative;
1.251 +}
1.252 +html|td {
1.253 + height: 1em;
1.254 + max-height: 1em;
1.255 + padding: 0 2px;
1.256 +}
1.257 +html|table {
1.258 + font-family: Helvetica, Arial, sans-serif;
1.259 + font-size: 11px;
1.260 + color: white;
1.261 + text-shadow:
1.262 + -1px -1px 0 #000,
1.263 + 1px -1px 0 #000,
1.264 + -1px 1px 0 #000,
1.265 + 1px 1px 0 #000;
1.266 + min-width: 100%;
1.267 + background: rgba(68,68,68,.7);
1.268 + table-layout: fixed;
1.269 + border-collapse: collapse;
1.270 + position: absolute;
1.271 +}
1.272 +
1.273 +/* CSS Transitions */
1.274 +.clickToPlay {
1.275 + transition-property: opacity, background-size;
1.276 + transition-duration: 400ms, 400ms;
1.277 +}
1.278 +.clickToPlay[fadeout] {
1.279 + background-size: auto, 192px 192px;
1.280 + opacity: 0;
1.281 +}
1.282 +.clickToPlay[fadeout][immediate] {
1.283 + transition-property: opacity, background-size;
1.284 + transition-duration: 0s, 0s;
1.285 +}
1.286 +.controlBar:not([immediate]) {
1.287 + transition-property: opacity;
1.288 + transition-duration: 200ms;
1.289 +}
1.290 +.controlBar[fadeout] {
1.291 + opacity: 0;
1.292 +}
1.293 +.volumeStack:not([immediate]) {
1.294 + transition-property: opacity, margin-top;
1.295 + transition-duration: 200ms, 200ms;
1.296 +}
1.297 +.volumeStack[fadeout] {
1.298 + opacity: 0;
1.299 + margin-top: 0;
1.300 +}
1.301 +.statusOverlay:not([immediate]) {
1.302 + transition-property: opacity;
1.303 + transition-duration: 300ms;
1.304 + transition-delay: 750ms;
1.305 +}
1.306 +.statusOverlay[fadeout] {
1.307 + opacity: 0;
1.308 +}
1.309 +
1.310 +/* Error description formatting */
1.311 +.errorLabel {
1.312 + font-family: Helvetica, Arial, sans-serif;
1.313 + font-size: 11px;
1.314 + color: #bbb;
1.315 + text-shadow:
1.316 + -1px -1px 0 #000,
1.317 + 1px -1px 0 #000,
1.318 + -1px 1px 0 #000,
1.319 + 1px 1px 0 #000;
1.320 + padding: 0 10px;
1.321 + text-align: center;
1.322 +}
