1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/toolkit/themes/osx/global/media/videocontrols.css Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,359 @@
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: 2px; /* center vertically with scrubber bar */
1.116 + color: rgba(255,255,255,.75);
1.117 + font-size: 11px;
1.118 + font-family: Helvetica, 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 + min-width: 0;
1.140 +}
1.141 +
1.142 +/* .progress-bar is an element inside the <progressmeter> implementation. */
1.143 +.bufferBar .progress-bar {
1.144 + /*
1.145 + * Note that this is drawn on top of the .backgroundBar. So although this
1.146 + * has the same background-color specified, the semitransparent
1.147 + * compositing gives it a different visual appearance.
1.148 + */
1.149 + background-color: rgba(255,255,255,.5);
1.150 + border-radius: 2.5px;
1.151 +}
1.152 +
1.153 +.progressBar .progress-bar {
1.154 + background-color: white;
1.155 + border-radius: 2.5px;
1.156 +}
1.157 +
1.158 +/* .scale-slider is an element inside the <scale> implementation. */
1.159 +.scrubber .scale-slider,
1.160 +.volumeControl .scale-slider {
1.161 + /* Hide the default horizontal bar. */
1.162 + -moz-appearance: none;
1.163 + background: none;
1.164 + margin: 0;
1.165 +}
1.166 +
1.167 +.scrubber .scale-slider {
1.168 + /* abs(margin-top) + margin-bottom + bar height == timeThumb height */
1.169 + margin-top: -10px;
1.170 + margin-bottom: 10px;
1.171 +}
1.172 +/* .scale-thumb is an element inside the <scale> implementation. */
1.173 +.scrubber .scale-thumb {
1.174 + /* Override the default thumb appearance with a custom image. */
1.175 + -moz-appearance: none;
1.176 + background: transparent;
1.177 + border: none;
1.178 +}
1.179 +
1.180 +.timeThumb {
1.181 + background: url(chrome://global/skin/media/scrubberThumb.png) no-repeat center;
1.182 + min-width: 45px;
1.183 + min-height: 28px;
1.184 + -moz-box-pack: center;
1.185 +}
1.186 +
1.187 +.timeThumb[showhours="true"] {
1.188 + background-image: url(chrome://global/skin/media/scrubberThumbWide.png);
1.189 +}
1.190 +
1.191 +.timeLabel {
1.192 + color: rgba(255,255,255,.75);
1.193 + font-size: 10px;
1.194 + font-family: Helvetica, sans-serif;
1.195 + text-shadow: rgba(0,0,0,.3) 0 1px;
1.196 + padding-top: 7px;
1.197 +}
1.198 +
1.199 +.statusOverlay {
1.200 + -moz-box-align: center;
1.201 + -moz-box-pack: center;
1.202 + background-color: rgba(0,0,0,.55);
1.203 +}
1.204 +
1.205 +.statusIcon {
1.206 + margin-bottom: 28px; /* same height as .controlBar, to keep icon centered above it */
1.207 + width: 36px;
1.208 + height: 36px;
1.209 +}
1.210 +
1.211 +.statusIcon[type="throbber"] {
1.212 + background: url(chrome://global/skin/media/throbber.png) no-repeat center;
1.213 +}
1.214 +
1.215 +.statusIcon[type="throbber"][stalled] {
1.216 + background: url(chrome://global/skin/media/stalled.png) no-repeat center;
1.217 +}
1.218 +
1.219 +.statusIcon[type="error"] {
1.220 + background: url(chrome://global/skin/media/error.png) no-repeat center;
1.221 +}
1.222 +
1.223 +/* Overlay Play button */
1.224 +.clickToPlay {
1.225 + width: 64px;
1.226 + height: 64px;
1.227 + -moz-box-pack: center;
1.228 + -moz-box-align: center;
1.229 + opacity: 0.7;
1.230 + background-image: url(chrome://global/skin/media/clicktoplay-bgtexture.png),
1.231 + url(chrome://global/skin/media/videoClickToPlayButton.svg);
1.232 + background-repeat: repeat, no-repeat;
1.233 + background-position: center, center;
1.234 + background-size: auto, 64px 64px;
1.235 + background-color: hsla(0,0%,10%,.5);
1.236 +}
1.237 +.clickToPlay:hover {
1.238 + opacity: 1;
1.239 +}
1.240 +
1.241 +/* Statistics formatting */
1.242 +html|*.statsDiv {
1.243 + position: relative;
1.244 +}
1.245 +html|td {
1.246 + height: 1em;
1.247 + max-height: 1em;
1.248 + padding: 0 2px;
1.249 +}
1.250 +html|table {
1.251 + font-family: Helvetica, Arial, sans-serif;
1.252 + font-size: 11px;
1.253 + color: white;
1.254 + text-shadow:
1.255 + -1px -1px 0 #000,
1.256 + 1px -1px 0 #000,
1.257 + -1px 1px 0 #000,
1.258 + 1px 1px 0 #000;
1.259 + min-width: 100%;
1.260 + background: rgba(68,68,68,.7);
1.261 + table-layout: fixed;
1.262 + border-collapse: collapse;
1.263 + position: absolute;
1.264 +}
1.265 +
1.266 +/* CSS Transitions */
1.267 +.clickToPlay {
1.268 + transition-property: opacity, background-size;
1.269 + transition-duration: 400ms, 400ms;
1.270 +}
1.271 +.clickToPlay[fadeout] {
1.272 + background-size: auto, 192px 192px;
1.273 + opacity: 0;
1.274 +}
1.275 +.clickToPlay[fadeout][immediate] {
1.276 + transition-property: opacity, background-size;
1.277 + transition-duration: 0s, 0s;
1.278 +}
1.279 +.controlBar:not([immediate]) {
1.280 + transition-property: opacity;
1.281 + transition-duration: 200ms;
1.282 +}
1.283 +.controlBar[fadeout] {
1.284 + opacity: 0;
1.285 +}
1.286 +.volumeStack:not([immediate]) {
1.287 + transition-property: opacity, margin-top;
1.288 + transition-duration: 200ms, 200ms;
1.289 +}
1.290 +.volumeStack[fadeout] {
1.291 + opacity: 0;
1.292 + margin-top: 0;
1.293 +}
1.294 +.statusOverlay:not([immediate]) {
1.295 + transition-property: opacity;
1.296 + transition-duration: 300ms;
1.297 + transition-delay: 750ms;
1.298 +}
1.299 +.statusOverlay[fadeout] {
1.300 + opacity: 0;
1.301 +}
1.302 +
1.303 +/* Error description formatting */
1.304 +.errorLabel {
1.305 + font-family: Helvetica, Arial, sans-serif;
1.306 + font-size: 11px;
1.307 + color: #bbb;
1.308 + text-shadow:
1.309 + -1px -1px 0 #000,
1.310 + 1px -1px 0 #000,
1.311 + -1px 1px 0 #000,
1.312 + 1px 1px 0 #000;
1.313 + padding: 0 10px;
1.314 + text-align: center;
1.315 +}
1.316 +
1.317 +@media (min-resolution: 2dppx) {
1.318 + .playButton {
1.319 + background-image: url(chrome://global/skin/media/pauseButton@2x.png);
1.320 + background-size: 28px 28px;
1.321 + }
1.322 + .playButton[paused] {
1.323 + background-image: url(chrome://global/skin/media/playButton@2x.png);
1.324 + background-size: 28px 28px;
1.325 + }
1.326 + .volumeBackground {
1.327 + background-image: url(chrome://global/skin/media/volume-empty@2x.png);
1.328 + background-size: 32px 16px;
1.329 + }
1.330 + .volumeForeground {
1.331 + background-image: url(chrome://global/skin/media/volume-full@2x.png);
1.332 + background-size: 32px 16px;
1.333 + }
1.334 + .muteButton {
1.335 + background-image: url(chrome://global/skin/media/muteButton@2x.png);
1.336 + background-size: 33px 28px;
1.337 + }
1.338 + .muteButton[muted] {
1.339 + background-image: url(chrome://global/skin/media/unmuteButton@2x.png);
1.340 + background-size: 33px 28px;
1.341 + }
1.342 + .muteButton[noAudio] {
1.343 + background-image: url(chrome://global/skin/media/noAudio@2x.png);
1.344 + background-size: 33px 28px;
1.345 + }
1.346 + .fullscreenButton {
1.347 + background-image: -moz-image-rect(url("chrome://global/skin/media/fullscreenButton@2x.png"), 0, 32, 32, 0);
1.348 + background-size: 16px 16px;
1.349 + }
1.350 + .fullscreenButton[fullscreened] {
1.351 + background-image: -moz-image-rect(url("chrome://global/skin/media/fullscreenButton@2x.png"), 0, 64, 32, 32);
1.352 + background-size: 16px 16px;
1.353 + }
1.354 + .timeThumb {
1.355 + background-image: url(chrome://global/skin/media/scrubberThumb@2x.png);
1.356 + background-size: 33px 28px;
1.357 + }
1.358 + .timeThumb[showhours="true"] {
1.359 + background-image: url(chrome://global/skin/media/scrubberThumbWide@2x.png);
1.360 + background-size: 45px 28px;
1.361 + }
1.362 +}
