videocontrols.css (10410B)
1 /* This Source Code Form is subject to the terms of the Mozilla Public 2 * License, v. 2.0. If a copy of the MPL was not distributed with this 3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ 4 5 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); 6 @namespace html url("http://www.w3.org/1999/xhtml"); 7 8 .controlBar { 9 height: 28px; 10 background-color: rgba(0,0,0,.74); 11 } 12 13 .playButton, 14 .muteButton, 15 .closedCaptionButton, 16 .fullscreenButton { 17 background-color: transparent; 18 background-repeat: no-repeat; 19 background-position: center; 20 -moz-appearance: none; /* Remove the native button appearance and styling */ 21 margin: 0; 22 padding: 0; 23 min-height: 28px; 24 min-width: 28px; 25 border: none; 26 opacity: 0.7; 27 } 28 29 .playButton:hover, 30 .muteButton:hover, 31 .closedCaptionButton:hover, 32 .fullscreenButton:hover { 33 opacity: 1; 34 } 35 36 .playButton:hover:active, 37 .muteButton:hover:active, 38 .closedCaptionButton:hover:active, 39 .fullscreenButton:hover:active { 40 opacity: 0.4; 41 } 42 43 .playButton { 44 background-image: url(chrome://global/skin/media/pauseButton.png); 45 margin-right: -22px; /* 1/2 of scrubber thumb width, for overhang. */ 46 position: relative; /* Trick to work around negative margin interfering with clicking on the button. */ 47 } 48 49 .playButton[paused] { 50 background-image: url(chrome://global/skin/media/playButton.png); 51 } 52 53 .muteButton { 54 background-image: url(chrome://global/skin/media/muteButton.png); 55 min-width: 33px; 56 } 57 .muteButton[muted] { 58 background-image: url(chrome://global/skin/media/unmuteButton.png); 59 } 60 61 .muteButton[noAudio] { 62 background-image: url(chrome://global/skin/media/noAudio.png); 63 } 64 65 .muteButton[noAudio] + .volumeStack { 66 display: none; 67 } 68 69 .closedCaptionButton { 70 background-image: url(chrome://global/skin/media/closeCaptionButton.png); 71 background-position: 4px; 72 } 73 74 .closedCaptionButton[enabled] { 75 opacity: 1; 76 } 77 78 .closedCaptionButton[hidden] { 79 display: none; 80 } 81 82 .fullscreenButton { 83 background-image: -moz-image-rect(url("chrome://global/skin/media/fullscreenButton.png"), 0, 16, 16, 0); 84 } 85 86 .fullscreenButton[fullscreened] { 87 background-image: -moz-image-rect(url("chrome://global/skin/media/fullscreenButton.png"), 0, 32, 16, 16); 88 } 89 90 .volumeControl { 91 width: 32px; 92 opacity: 0; 93 } 94 95 .volumeBackground, 96 .volumeForeground { 97 background-repeat: no-repeat; 98 background-position: center; 99 width: 32px; 100 } 101 102 .volumeBackground { 103 background-image: url(chrome://global/skin/media/volume-empty.png); 104 } 105 106 .volumeForeground { 107 background-image: url(chrome://global/skin/media/volume-full.png); 108 background-clip: content-box; 109 } 110 111 .textTrackList { 112 display: -moz-box; 113 -moz-appearance: none; 114 -moz-box-pack: end; 115 -moz-box-align: end; 116 padding: 0; 117 } 118 119 .textTrackList[hidden] { 120 display: none; 121 } 122 123 .textTrackList > html|*.textTrackItem { 124 -moz-appearance: none; 125 -moz-box-align: start; 126 text-align: start; 127 overflow: hidden; 128 margin: 0; 129 padding: 2px 10px; 130 margin-inline-end: 10px; 131 border: none; 132 color: rgba(255,255,255,.5); 133 background-color: rgba(0,0,0,.74); 134 white-space: nowrap; 135 } 136 137 .textTrackList > html|*.textTrackItem[on] { 138 color: white; 139 background-color: black; 140 } 141 142 .textTrackList > html|*.textTrackItem:hover { 143 background-color: rgba(0,0,0,.55); 144 } 145 146 .controlBar[fullscreen-unavailable] { 147 /* This value is duplicated in the videocontrols.xml adjustControlSize function. */ 148 padding-inline-end: 8px; 149 } 150 151 .volumeControl .scale-thumb { 152 min-width: 0; 153 opacity: 0; 154 } 155 156 .durationBox { 157 -moz-box-pack: center; 158 } 159 160 .durationLabel { 161 margin-left: -22px; /* 1/2 of scrubber thumb width, for overhang. */ 162 padding-left: 8px; /* don't bump into the scrubber bar */ 163 color: rgba(255,255,255,.75); 164 font: message-box; 165 font-size: 11px; 166 } 167 168 .durationLabel { 169 padding-top: 0; /* center vertically with scrubber bar */ 170 } 171 172 .positionLabel { 173 display: none; 174 } 175 176 .backgroundBar { 177 /* margin top/bottom: make bar 8px tall (control height = 28, minus 2 * 10 margin) */ 178 /* margin left/right: 1/2 of scrubber thumb width, for overhang. */ 179 margin: 10px 22px; 180 background-color: rgba(255,255,255,.5); 181 border-radius: 2.5px; 182 } 183 184 .bufferBar, 185 .progressBar { 186 /* margin top/bottom: make bar 8px tall (control height = 28, minus 2 * 10 margin) */ 187 /* margin left/right: 1/2 of scrubber thumb width, for overhang. */ 188 margin: 10px 22px; 189 -moz-appearance: none; 190 border: none; 191 background-color: transparent; 192 min-width: 0; 193 min-height: 0; 194 } 195 196 /* .progress-bar is an element inside the <progressmeter> implementation. */ 197 .bufferBar .progress-bar { 198 /* 199 * Note that this is drawn on top of the .backgroundBar. So although this 200 * has the same background-color specified, the semitransparent 201 * compositing gives it a different visual appearance. 202 */ 203 background-color: rgba(255,255,255,.5); 204 border-radius: 2.5px; 205 -moz-appearance: none; 206 } 207 208 .progressBar .progress-bar { 209 background-color: white; 210 border-radius: 2.5px; 211 -moz-appearance: none; 212 } 213 214 /* .scale-slider is an element inside the <scale> implementation. */ 215 .scrubber .scale-slider, 216 .volumeControl .scale-slider { 217 /* Hide the default horizontal bar. */ 218 -moz-appearance: none; 219 background: none; 220 margin: 0; 221 } 222 223 .scrubber .scale-slider { 224 /* abs(margin-top) + margin-bottom + bar height == timeThumb height */ 225 margin-top: -10px; 226 margin-bottom: 10px; 227 } 228 /* .scale-thumb is an element inside the <scale> implementation. */ 229 .scrubber .scale-thumb, 230 .volumeControl .scale-thumb { 231 /* Override the default thumb appearance with a custom image. */ 232 -moz-appearance: none; 233 background: transparent; 234 border: none; 235 } 236 237 .timeThumb { 238 background: url(chrome://global/skin/media/scrubberThumb.png) no-repeat center; 239 min-width: 45px; 240 min-height: 28px; 241 -moz-box-pack: center; 242 } 243 244 .timeThumb[showhours="true"] { 245 background-image: url(chrome://global/skin/media/scrubberThumbWide.png); 246 } 247 248 .timeLabel { 249 color: rgba(255,255,255,.75); 250 font: message-box; 251 font-size: 10px; 252 text-shadow: rgba(0,0,0,.3) 0 1px; 253 padding-top: 7px; 254 } 255 256 .timeLabel { 257 padding-top: 5px; /* center vertically with scrubber bar */ 258 } 259 260 .statusOverlay { 261 -moz-box-align: center; 262 -moz-box-pack: center; 263 background-color: rgba(0,0,0,.55); 264 } 265 266 .statusIcon { 267 margin-bottom: 28px; /* same height as .controlBar, to keep icon centered above it */ 268 width: 36px; 269 height: 36px; 270 } 271 272 .statusIcon[type="throbber"] { 273 background: url(chrome://global/skin/media/throbber.png) no-repeat center; 274 } 275 276 .statusIcon[type="throbber"][stalled] { 277 background: url(chrome://global/skin/media/stalled.png) no-repeat center; 278 } 279 280 .statusIcon[type="error"] { 281 background: url(chrome://global/skin/media/error.png) no-repeat center; 282 } 283 284 /* Overlay Play button */ 285 .clickToPlay { 286 width: 64px; 287 height: 64px; 288 -moz-box-pack: center; 289 -moz-box-align: center; 290 opacity: 0.7; 291 background-image: url(chrome://global/skin/media/clicktoplay-bgtexture.png), 292 url(chrome://global/skin/media/videoClickToPlayButton.svg); 293 background-repeat: repeat, no-repeat; 294 background-position: center, center; 295 background-size: auto, 64px 64px; 296 background-color: hsla(0,0%,10%,.5); 297 } 298 .clickToPlay:hover { 299 opacity: 1; 300 } 301 302 /* Statistics formatting */ 303 html|*.statsDiv { 304 position: relative; 305 } 306 html|td { 307 height: 1em; 308 max-height: 1em; 309 padding: 0 2px; 310 } 311 html|table { 312 font-family: Helvetica, Arial, sans-serif; 313 font-size: 11px; 314 color: white; 315 text-shadow: 316 -1px -1px 0 #000, 317 1px -1px 0 #000, 318 -1px 1px 0 #000, 319 1px 1px 0 #000; 320 min-width: 100%; 321 background: rgba(0,0,0,.7); 322 table-layout: fixed; 323 border-collapse: collapse; 324 position: absolute; 325 } 326 327 /* CSS Transitions */ 328 .clickToPlay { 329 transition-property: opacity, background-size; 330 transition-duration: 400ms, 400ms; 331 } 332 .clickToPlay[fadeout] { 333 background-size: auto, 192px 192px; 334 opacity: 0; 335 } 336 .clickToPlay[fadeout][immediate] { 337 transition-property: opacity, background-size; 338 transition-duration: 0s, 0s; 339 } 340 .controlBar:not([immediate]) { 341 transition-property: opacity; 342 transition-duration: 200ms; 343 } 344 .controlBar[fadeout] { 345 opacity: 0; 346 } 347 .volumeStack:not([immediate]) { 348 transition-property: opacity, margin-top; 349 transition-duration: 200ms, 200ms; 350 } 351 .volumeStack[fadeout] { 352 opacity: 0; 353 margin-top: 0; 354 } 355 .statusOverlay:not([immediate]) { 356 transition-property: opacity; 357 transition-duration: 300ms; 358 transition-delay: 750ms; 359 } 360 .statusOverlay[fadeout] { 361 opacity: 0; 362 } 363 364 /* Error description formatting */ 365 .errorLabel { 366 font-family: Helvetica, Arial, sans-serif; 367 font-size: 11px; 368 color: #bbb; 369 text-shadow: 370 -1px -1px 0 #000, 371 1px -1px 0 #000, 372 -1px 1px 0 #000, 373 1px 1px 0 #000; 374 padding: 0 10px; 375 text-align: center; 376 } 377 378 @media (min-resolution: 2dppx) { 379 .playButton { 380 background-image: url(chrome://global/skin/media/pauseButton@2x.png); 381 background-size: 28px 28px; 382 } 383 .playButton[paused] { 384 background-image: url(chrome://global/skin/media/playButton@2x.png); 385 background-size: 28px 28px; 386 } 387 .volumeBackground { 388 background-image: url(chrome://global/skin/media/volume-empty@2x.png); 389 background-size: 32px 16px; 390 } 391 .volumeForeground { 392 background-image: url(chrome://global/skin/media/volume-full@2x.png); 393 background-size: 32px 16px; 394 } 395 .muteButton { 396 background-image: url(chrome://global/skin/media/muteButton@2x.png); 397 background-size: 33px 28px; 398 } 399 .muteButton[muted] { 400 background-image: url(chrome://global/skin/media/unmuteButton@2x.png); 401 background-size: 33px 28px; 402 } 403 .muteButton[noAudio] { 404 background-image: url(chrome://global/skin/media/noAudio@2x.png); 405 background-size: 33px 28px; 406 } 407 .closedCaptionButton { 408 background-image: url(chrome://global/skin/media/closeCaptionButton@2x.png); 409 background-position: 4px; 410 background-size: 28px 28px; 411 } 412 .fullscreenButton { 413 background-image: -moz-image-rect(url("chrome://global/skin/media/fullscreenButton@2x.png"), 0, 32, 32, 0); 414 background-size: 16px 16px; 415 } 416 .fullscreenButton[fullscreened] { 417 background-image: -moz-image-rect(url("chrome://global/skin/media/fullscreenButton@2x.png"), 0, 64, 32, 32); 418 background-size: 16px 16px; 419 } 420 .timeThumb { 421 background-image: url(chrome://global/skin/media/scrubberThumb@2x.png); 422 background-size: 33px 28px; 423 } 424 .timeThumb[showhours="true"] { 425 background-image: url(chrome://global/skin/media/scrubberThumbWide@2x.png); 426 background-size: 45px 28px; 427 } 428 }