| | 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 xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); |
| | 7 | @namespace html url("http://www.w3.org/1999/xhtml"); |
| | 8 | |
| | 9 | hbox.controlBar { |
| | 10 | height: 28px; |
| | 11 | background-color: rgba(156,156,255,0.75); |
| | 12 | } |
| | 13 | |
| | 14 | xul|button.playButton, |
| | 15 | xul|button.muteButton, |
| | 16 | xul|button.closedCaptionButton, |
| | 17 | xul|button.fullscreenButton { |
| | 18 | background-color: transparent; |
| | 19 | background-repeat: no-repeat; |
| | 20 | background-position: center; |
| | 21 | margin: 0; |
| | 22 | padding: 0; |
| | 23 | min-height: 28px; |
| | 24 | min-width: 28px; |
| | 25 | border: none; |
| | 26 | } |
| | 27 | |
| | 28 | xul|button.playButton:hover, |
| | 29 | xul|button.muteButton:not([noAudio]):hover, |
| | 30 | xul|button.closedCaptionButton:hover, |
| | 31 | xul|button.fullscreenButton:hover { |
| | 32 | background-color: rgba(255,207,0,0.75); |
| | 33 | } |
| | 34 | |
| | 35 | xul|button.playButton:hover:active, |
| | 36 | xul|button.muteButton:not([noAudio]):hover:active, |
| | 37 | xul|button.closedCaptionButton:hover:active, |
| | 38 | xul|button.fullscreenButton:hover:active { |
| | 39 | background-color: rgba(255,159,0,0.75); |
| | 40 | } |
| | 41 | |
| | 42 | xul|button.playButton { |
| | 43 | background-image: url("chrome://global/skin/media/pauseButton.png"); |
| | 44 | margin-right: -22px; /* 1/2 of scrubber thumb width, for overhang. */ |
| | 45 | position: relative; /* Trick to work around negative margin interfering with clicking on the button. */ |
| | 46 | } |
| | 47 | |
| | 48 | xul|button.playButton:hover { |
| | 49 | background-image: url("chrome://global/skin/media/pauseButton-hover.png"); |
| | 50 | } |
| | 51 | |
| | 52 | xul|button.playButton[paused] { |
| | 53 | background-image: url("chrome://global/skin/media/playButton.png"); |
| | 54 | } |
| | 55 | |
| | 56 | xul|button.playButton[paused]:hover { |
| | 57 | background-image: url("chrome://global/skin/media/playButton-hover.png"); |
| | 58 | } |
| | 59 | |
| | 60 | xul|button.muteButton { |
| | 61 | background-image: url("chrome://global/skin/media/muteButton.png"); |
| | 62 | min-width: 33px; |
| | 63 | } |
| | 64 | |
| | 65 | xul|button.muteButton:hover { |
| | 66 | background-image: url("chrome://global/skin/media/muteButton-hover.png"); |
| | 67 | } |
| | 68 | |
| | 69 | xul|button.muteButton[muted] { |
| | 70 | background-image: url("chrome://global/skin/media/unmuteButton.png"); |
| | 71 | } |
| | 72 | |
| | 73 | xul|button.muteButton[muted]:hover { |
| | 74 | background-image: url("chrome://global/skin/media/unmuteButton-hover.png"); |
| | 75 | } |
| | 76 | |
| | 77 | xul|button.muteButton[noAudio] { |
| | 78 | background-image: url("chrome://global/skin/media/noAudio.png"); |
| | 79 | } |
| | 80 | |
| | 81 | xul|button.muteButton[noAudio] + .volumeStack { |
| | 82 | display: none; |
| | 83 | } |
| | 84 | |
| | 85 | xul|button.closedCaptionButton { |
| | 86 | background-image: url("chrome://global/skin/media/closeCaptionButton.png"); |
| | 87 | background-position: 4px; |
| | 88 | } |
| | 89 | |
| | 90 | xul|button.closedCaptionButton:hover { |
| | 91 | background-image: url("chrome://global/skin/media/closeCaptionButton-hover.png"); |
| | 92 | } |
| | 93 | |
| | 94 | xul|button.closedCaptionButton[enabled] { |
| | 95 | opacity: 1; |
| | 96 | } |
| | 97 | |
| | 98 | xul|button.closedCaptionButton[hidden] { |
| | 99 | display: none; |
| | 100 | } |
| | 101 | |
| | 102 | xul|button.fullscreenButton { |
| | 103 | background-image: -moz-image-rect(url("chrome://global/skin/media/fullscreenButton.png"), 0, 16, 16, 0); |
| | 104 | } |
| | 105 | |
| | 106 | xul|button.fullscreenButton:hover { |
| | 107 | background-image: -moz-image-rect(url("chrome://global/skin/media/fullscreenButton-hover.png"), 0, 16, 16, 0); |
| | 108 | } |
| | 109 | |
| | 110 | xul|button.fullscreenButton[fullscreened] { |
| | 111 | background-image: -moz-image-rect(url("chrome://global/skin/media/fullscreenButton.png"), 0, 32, 16, 16); |
| | 112 | } |
| | 113 | |
| | 114 | xul|button.fullscreenButton[fullscreened]:hover { |
| | 115 | background-image: -moz-image-rect(url("chrome://global/skin/media/fullscreenButton-hover.png"), 0, 32, 16, 16); |
| | 116 | } |
| | 117 | |
| | 118 | xul|*.volumeControl { |
| | 119 | width: 32px; |
| | 120 | opacity: 0; |
| | 121 | } |
| | 122 | |
| | 123 | xul|*.volumeBackground, |
| | 124 | xul|*.volumeForeground { |
| | 125 | background-repeat: no-repeat; |
| | 126 | background-position: center; |
| | 127 | width: 32px; |
| | 128 | } |
| | 129 | |
| | 130 | xul|*.volumeBackground { |
| | 131 | background-image: url("chrome://global/skin/media/volume-empty.png"); |
| | 132 | } |
| | 133 | |
| | 134 | xul|*.volumeForeground { |
| | 135 | background-image: url("chrome://global/skin/media/volume-full.png"); |
| | 136 | background-clip: content-box; |
| | 137 | } |
| | 138 | |
| | 139 | xul|*.textTrackList { |
| | 140 | display: -moz-box; |
| | 141 | -moz-appearance: none; |
| | 142 | -moz-box-pack: end; |
| | 143 | -moz-box-align: end; |
| | 144 | padding: 0; |
| | 145 | } |
| | 146 | |
| | 147 | xul|*.textTrackList[hidden] { |
| | 148 | display: none; |
| | 149 | } |
| | 150 | |
| | 151 | xul|*.textTrackList > html|*.textTrackItem { |
| | 152 | -moz-appearance: none; |
| | 153 | -moz-box-align: start; |
| | 154 | text-align: start; |
| | 155 | overflow: hidden; |
| | 156 | margin: 0; |
| | 157 | padding: 2px 10px; |
| | 158 | -moz-margin-end: 10px; |
| | 159 | border: none; |
| | 160 | color: rgba(255,255,255,.5); |
| | 161 | background-color: rgba(35,31,32,.74); |
| | 162 | white-space: nowrap; |
| | 163 | } |
| | 164 | |
| | 165 | xul|*.textTrackList > html|*.textTrackItem[on] { |
| | 166 | color: white; |
| | 167 | background-color: black; |
| | 168 | } |
| | 169 | |
| | 170 | xul|*.textTrackList > html|*.textTrackItem:hover { |
| | 171 | background-color: rgba(0,0,0,.55); |
| | 172 | } |
| | 173 | |
| | 174 | xul|*.controlBar[fullscreen-unavailable] { |
| | 175 | /* This value is duplicated in the videocontrols.xml adjustControlSize function. */ |
| | 176 | padding-inline-end: 8px; |
| | 177 | } |
| | 178 | |
| | 179 | xul|*.volumeControl .scale-thumb { |
| | 180 | min-width: 0; |
| | 181 | opacity: 0; |
| | 182 | } |
| | 183 | |
| | 184 | xul|*.durationBox { |
| | 185 | -moz-box-pack: center; |
| | 186 | } |
| | 187 | |
| | 188 | xul|*.durationLabel { |
| | 189 | margin-left: -22px; /* 1/2 of scrubber thumb width, for overhang. */ |
| | 190 | padding-left: 8px; /* don't bump into the scrubber bar */ |
| | 191 | padding-top: 0px; /* center vertically with scrubber bar */ |
| | 192 | color: rgba(0,0,0,0.75); |
| | 193 | font-family: "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif; |
| | 194 | font-size: 11px; |
| | 195 | } |
| | 196 | |
| | 197 | xul|*.positionLabel { |
| | 198 | display: none; |
| | 199 | } |
| | 200 | |
| | 201 | xul|*.backgroundBar { |
| | 202 | /* margin top/bottom: make bar 8px tall (control height = 28, minus 2 * 10 margin) */ |
| | 203 | /* margin left/right: 1/2 of scrubber thumb width, for overhang. */ |
| | 204 | margin: 10px 22px; |
| | 205 | background-color: rgba(0,0,0,0.75); |
| | 206 | border-radius: 2.5px; |
| | 207 | } |
| | 208 | |
| | 209 | xul|*.bufferBar, |
| | 210 | xul|*.progressBar { |
| | 211 | /* margin top/bottom: make bar 8px tall (control height = 28, minus 2 * 10 margin) */ |
| | 212 | /* margin left/right: 1/2 of scrubber thumb width, for overhang. */ |
| | 213 | margin: 10px 22px; |
| | 214 | border: none; |
| | 215 | background-color: transparent; |
| | 216 | min-width: 0; |
| | 217 | min-height: 0; |
| | 218 | } |
| | 219 | |
| | 220 | /* .progress-bar is an element inside the <progressmeter> implementation. */ |
| | 221 | xul|*.bufferBar .progress-bar { |
| | 222 | /* |
| | 223 | * Note that this is drawn on top of the .backgroundBar. So although this |
| | 224 | * has the same background-color specified, the semitransparent |
| | 225 | * compositing gives it a different visual appearance. |
| | 226 | */ |
| | 227 | background-color: rgba(255,159,0,0.75); |
| | 228 | border-radius: 2.5px; |
| | 229 | -moz-appearance: none; |
| | 230 | } |
| | 231 | |
| | 232 | xul|*.progressBar .progress-bar { |
| | 233 | background-color: #008484; |
| | 234 | border-radius: 2.5px; |
| | 235 | -moz-appearance: none; |
| | 236 | } |
| | 237 | |
| | 238 | /* .scale-slider is an element inside the <scale> implementation. */ |
| | 239 | xul|*.scrubber .scale-slider, |
| | 240 | xul|*.volumeControl .scale-slider { |
| | 241 | /* Hide the default horizontal bar. */ |
| | 242 | background: none; |
| | 243 | margin: 0; |
| | 244 | } |
| | 245 | |
| | 246 | xul|*.scrubber .scale-slider { |
| | 247 | /* abs(margin-top) + margin-bottom + bar height == timeThumb height */ |
| | 248 | margin-top: -10px; |
| | 249 | margin-bottom: 10px; |
| | 250 | } |
| | 251 | |
| | 252 | /* .scale-thumb is an element inside the <scale> implementation. */ |
| | 253 | xul|*.scrubber .scale-thumb, |
| | 254 | xul|*.volumeControl .scale-thumb { |
| | 255 | /* Override the default thumb appearance with a custom image. */ |
| | 256 | background: transparent; |
| | 257 | border: none !important; |
| | 258 | } |
| | 259 | |
| | 260 | xul|*.timeThumb { |
| | 261 | background: url("chrome://global/skin/media/scrubberThumb.png") no-repeat center; |
| | 262 | min-width: 45px; |
| | 263 | min-height: 28px; |
| | 264 | -moz-box-pack: center; |
| | 265 | } |
| | 266 | |
| | 267 | xul|*.timeThumb[showhours="true"] { |
| | 268 | background-image: url("chrome://global/skin/media/scrubberThumbWide.png"); |
| | 269 | } |
| | 270 | |
| | 271 | /* |
| | 272 | .timeThumb:hover, .timeThumb:active { |
| | 273 | background-image: url("chrome://global/skin/media/scrubberThumb-hover.png"); |
| | 274 | } |
| | 275 | */ |
| | 276 | |
| | 277 | xul|*.timeLabel { |
| | 278 | color: rgba(0,0,0,0.75); |
| | 279 | font-size: 10px; |
| | 280 | font-family: "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif; |
| | 281 | text-shadow: rgba(255,259,0, 0.3) 0 1px; |
| | 282 | padding-top: 5px; |
| | 283 | } |
| | 284 | |
| | 285 | xul|*.statusOverlay { |
| | 286 | -moz-box-align: center; |
| | 287 | -moz-box-pack: center; |
| | 288 | background-color: rgba(0,0,0,0.55); |
| | 289 | } |
| | 290 | |
| | 291 | xul|*.statusIcon { |
| | 292 | margin-bottom: 28px; /* same height as .controlBar, to keep icon centered above it */ |
| | 293 | width: 36px; |
| | 294 | height: 36px; |
| | 295 | } |
| | 296 | |
| | 297 | xul|*.statusIcon[type="throbber"] { |
| | 298 | background: url("chrome://communicator/skin/brand/throbber-anim.png") no-repeat center; |
| | 299 | } |
| | 300 | /* |
| | 301 | .statusIcon[type="throbber"][stalled] { |
| | 302 | background: url("chrome://global/skin/media/stalled.png") no-repeat center; |
| | 303 | } |
| | 304 | */ |
| | 305 | xul|*.statusIcon[type="error"] { |
| | 306 | background: url("chrome://global/skin/icons/alert-error.gif") no-repeat center; |
| | 307 | } |
| | 308 | |
| | 309 | /* Overlay Play button */ |
| | 310 | .clickToPlay { |
| | 311 | width: 64px; |
| | 312 | height: 64px; |
| | 313 | -moz-box-pack: center; |
| | 314 | -moz-box-align: center; |
| | 315 | opacity: 0.7; |
| | 316 | background-image: url("chrome://global/skin/media/videoClickToPlayButton.svg"); |
| | 317 | background-repeat: no-repeat; |
| | 318 | background-position: center; |
| | 319 | background-size: 64px 64px; |
| | 320 | background-color: hsla(0,0%,10%,.5); |
| | 321 | } |
| | 322 | .clickToPlay:hover { |
| | 323 | opacity: 1; |
| | 324 | } |
| | 325 | |
| | 326 | /* Statistics formatting */ |
| | 327 | html|*.statsDiv { |
| | 328 | position: relative; |
| | 329 | } |
| | 330 | html|td { |
| | 331 | height: 1em; |
| | 332 | max-height: 1em; |
| | 333 | padding: 0 2px; |
| | 334 | } |
| | 335 | html|table { |
| | 336 | font-family: "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif; |
| | 337 | font-size: 11px; |
| | 338 | color: white; |
| | 339 | text-shadow: |
| | 340 | -1px -1px 0 #000, |
| | 341 | 1px -1px 0 #000, |
| | 342 | -1px 1px 0 #000, |
| | 343 | 1px 1px 0 #000; |
| | 344 | min-width: 100%; |
| | 345 | background: rgba(68,68,111,.7); |
| | 346 | table-layout: fixed; |
| | 347 | border-collapse: collapse; |
| | 348 | position: absolute; |
| | 349 | } |
| | 350 | |
| | 351 | /* CSS Transitions */ |
| | 352 | .clickToPlay { |
| | 353 | transition-property: opacity, background-size; |
| | 354 | transition-duration: 400ms, 400ms; |
| | 355 | } |
| | 356 | .clickToPlay[fadeout] { |
| | 357 | background-size: auto, 192px 192px; |
| | 358 | opacity: 0; |
| | 359 | } |
| | 360 | .clickToPlay[fadeout][immediate] { |
| | 361 | transition-property: opacity, background-size; |
| | 362 | transition-duration: 0s, 0s; |
| | 363 | } |
| | 364 | .controlBar:not([immediate]) { |
| | 365 | transition-property: opacity; |
| | 366 | transition-duration: 200ms; |
| | 367 | } |
| | 368 | .controlBar[fadeout] { |
| | 369 | opacity: 0; |
| | 370 | } |
| | 371 | .volumeStack:not([immediate]) { |
| | 372 | transition-property: opacity, margin-top; |
| | 373 | transition-duration: 200ms, 200ms; |
| | 374 | } |
| | 375 | .volumeStack[fadeout] { |
| | 376 | opacity: 0; |
| | 377 | margin-top: 0; |
| | 378 | } |
| | 379 | .statusOverlay:not([immediate]) { |
| | 380 | transition-property: opacity; |
| | 381 | transition-duration: 300ms; |
| | 382 | transition-delay: 750ms; |
| | 383 | } |
| | 384 | .statusOverlay[fadeout] { |
| | 385 | opacity: 0; |
| | 386 | } |
| | 387 | |
| | 388 | /* Error description formatting */ |
| | 389 | .errorLabel { |
| | 390 | font-family: "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif; |
| | 391 | font-size: 11px; |
| | 392 | color: #E7ADE7; |
| | 393 | text-shadow: |
| | 394 | -1px -1px 0 #000, |
| | 395 | 1px -1px 0 #000, |
| | 396 | -1px 1px 0 #000, |
| | 397 | 1px 1px 0 #000; |
| | 398 | padding: 0 10px; |
| | 399 | text-align: center; |
| | 400 | } |
| | 401 | |
| | 402 | @media (min-resolution: 2dppx) { |
| | 403 | .playButton { |
| | 404 | background-image: url(chrome://global/skin/media/pauseButton@2x.png); |
| | 405 | background-size: 28px 28px; |
| | 406 | } |
| | 407 | .playButton:hover { |
| | 408 | background-image: url(chrome://global/skin/media/pauseButton-hover@2x.png); |
| | 409 | background-size: 28px 28px; |
| | 410 | } |
| | 411 | .playButton[paused] { |
| | 412 | background-image: url(chrome://global/skin/media/playButton@2x.png); |
| | 413 | background-size: 28px 28px; |
| | 414 | } |
| | 415 | .playButton[paused]:hover { |
| | 416 | background-image: url(chrome://global/skin/media/playButton-hover@2x.png); |
| | 417 | background-size: 28px 28px; |
| | 418 | } |
| | 419 | .volumeBackground { |
| | 420 | background-image: url(chrome://global/skin/media/volume-empty@2x.png); |
| | 421 | background-size: 32px 16px; |
| | 422 | } |
| | 423 | .volumeForeground:hover { |
| | 424 | background-image: url(chrome://global/skin/media/volume-full-hover@2x.png); |
| | 425 | background-size: 32px 16px; |
| | 426 | } |
| | 427 | .muteButton { |
| | 428 | background-image: url(chrome://global/skin/media/muteButton@2x.png); |
| | 429 | background-size: 33px 28px; |
| | 430 | } |
| | 431 | .muteButton:hover { |
| | 432 | background-image: url(chrome://global/skin/media/muteButton-hover@2x.png); |
| | 433 | background-size: 33px 28px; |
| | 434 | } |
| | 435 | .muteButton[muted] { |
| | 436 | background-image: url(chrome://global/skin/media/unmuteButton@2x.png); |
| | 437 | background-size: 33px 28px; |
| | 438 | } |
| | 439 | .muteButton[muted]:hover { |
| | 440 | background-image: url(chrome://global/skin/media/unmuteButton-hover@2x.png); |
| | 441 | background-size: 33px 28px; |
| | 442 | } |
| | 443 | .muteButton[noAudio] { |
| | 444 | background-image: url(chrome://global/skin/media/noAudio@2x.png); |
| | 445 | background-size: 33px 28px; |
| | 446 | } |
| | 447 | .closedCaptionButton { |
| | 448 | background-image: url(chrome://global/skin/media/closeCaptionButton@2x.png); |
| | 449 | background-position: 4px; |
| | 450 | background-size: 28px 28px; |
| | 451 | } |
| | 452 | .closedCaptionButton:hover { |
| | 453 | background-image: url(chrome://global/skin/media/closeCaptionButton-hover@2x.png); |
| | 454 | background-position: 4px; |
| | 455 | background-size: 28px 28px; |
| | 456 | } |
| | 457 | .fullscreenButton { |
| | 458 | background-image: -moz-image-rect(url("chrome://global/skin/media/fullscreenButton@2x.png"), 0, 32, 32, 0); |
| | 459 | background-size: 16px 16px; |
| | 460 | } |
| | 461 | .fullscreenButton:hover { |
| | 462 | background-image: -moz-image-rect(url("chrome://global/skin/media/fullscreenButton-hover@2x.png"), 0, 32, 32, 0); |
| | 463 | background-size: 16px 16px; |
| | 464 | } |
| | 465 | .fullscreenButton[fullscreened] { |
| | 466 | background-image: -moz-image-rect(url("chrome://global/skin/media/fullscreenButton@2x.png"), 0, 64, 32, 32); |
| | 467 | background-size: 16px 16px; |
| | 468 | } |
| | 469 | .fullscreenButton[fullscreened]:hover { |
| | 470 | background-image: -moz-image-rect(url("chrome://global/skin/media/fullscreenButton-hover@2x.png"), 0, 64, 32, 32); |
| | 471 | background-size: 16px 16px; |
| | 472 | } |
| | 473 | .timeThumb { |
| | 474 | background-image: url(chrome://global/skin/media/scrubberThumb@2x.png); |
| | 475 | background-size: 33px 28px; |
| | 476 | } |
| | 477 | .timeThumb[showhours="true"] { |
| | 478 | background-image: url(chrome://global/skin/media/scrubberThumbWide@2x.png); |
| | 479 | background-size: 45px 28px; |
| | 480 | } |
| | 481 | } |
| | 482 | |
| | 483 | |
| | 484 | /***** New HTML-based controls *****/ |
| | 485 | |
| | 486 | /*@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); |
| | 487 | @namespace url("http://www.w3.org/1999/xhtml");*/ |
| | 488 | |
| | 489 | video > xul|videocontrols, |
| | 490 | audio > xul|videocontrols { |
| | 491 | writing-mode: horizontal-tb; |
| | 492 | width: 100%; |
| | 493 | height: 100%; |
| | 494 | /* display: inline-block; --->CRASHES XUL-based versions! */ |
| | 495 | -moz-box-pack: end; |
| | 496 | } |
| | 497 | |
| | 498 | div.controlsContainer [hidden="true"], |
| | 499 | div.controlBar[hidden] { |
| | 500 | display: none; |
| | 501 | } |
| | 502 | |
| | 503 | div.controlBar[size="hidden"] { |
| | 504 | display: none; |
| | 505 | } |
| | 506 | |
| | 507 | div.controlsContainer, |
| | 508 | div.progressContainer { |
| | 509 | position: relative; |
| | 510 | height: 100%; |
| | 511 | } |
| | 512 | |
| | 513 | div.stackItem { |
| | 514 | position: absolute; |
| | 515 | left: 0; |
| | 516 | bottom: 0; |
| | 517 | width: 100%; |
| | 518 | height: 100%; |
| | 519 | } |
| | 520 | |
| | 521 | div.statusOverlay { |
| | 522 | display: flex; |
| | 523 | flex-direction: column; |
| | 524 | justify-content: center; |
| | 525 | align-items: center; |
| | 526 | background-color: rgb(160,144,144); |
| | 527 | } |
| | 528 | |
| | 529 | div.controlsOverlay { |
| | 530 | display: flex; |
| | 531 | flex-direction: column; |
| | 532 | justify-content: center; |
| | 533 | position: relative; |
| | 534 | } |
| | 535 | |
| | 536 | div.controlsSpacerStack { |
| | 537 | display: flex; |
| | 538 | flex-direction: column; |
| | 539 | flex-grow: 1; |
| | 540 | justify-content: center; |
| | 541 | align-items: center; |
| | 542 | } |
| | 543 | |
| | 544 | div.controlsSpacer { |
| | 545 | background-color: rgba(0,0,0,.4); |
| | 546 | } |
| | 547 | |
| | 548 | div.controlBar { |
| | 549 | position: relative; |
| | 550 | display: flex; |
| | 551 | justify-content: center; |
| | 552 | align-items: center; |
| | 553 | overflow: hidden; |
| | 554 | height: 40px; |
| | 555 | padding: 0 3px; |
| | 556 | background-color: rgba(156,156,255,0.75); |
| | 557 | } |
| | 558 | |
| | 559 | |
| | 560 | html|button.playButton, |
| | 561 | html|button.muteButton, |
| | 562 | html|button.closedCaptionButton, |
| | 563 | html|button.fullscreenButton { |
| | 564 | height: 100%; |
| | 565 | min-height: 30px; |
| | 566 | min-width: 30px; |
| | 567 | padding: 0; |
| | 568 | border: 0; |
| | 569 | margin: 0; |
| | 570 | background-color: transparent; |
| | 571 | background-repeat: no-repeat; |
| | 572 | background-position: center; |
| | 573 | background-origin: content-box; |
| | 574 | background-clip: content-box; |
| | 575 | } |
| | 576 | |
| | 577 | html|button.playButton:hover, |
| | 578 | html|button.muteButton:not([noAudio]):hover, |
| | 579 | html|button.closedCaptionButton:hover, |
| | 580 | html|button.fullscreenButton:hover { |
| | 581 | background-color: rgba(255,207,0,0.75); |
| | 582 | } |
| | 583 | |
| | 584 | html|button.playButton:hover:active, |
| | 585 | html|button.muteButton:not([noAudio]):hover:active, |
| | 586 | html|button.closedCaptionButton:hover:active, |
| | 587 | html|button.fullscreenButton:hover:active { |
| | 588 | background-color: rgba(255,159,0,0.75); |
| | 589 | } |
| | 590 | |
| | 591 | html|button.playButton { |
| | 592 | background-image: url(chrome://global/skin/media/pauseButton.svg#pause); |
| | 593 | } |
| | 594 | .playButton:hover { |
| | 595 | html|butto background-image: url(chrome://global/skin/media/pauseButton.svg#pause-hover); |
| | 596 | } |
| | 597 | html|button.playButton:hover:active { |
| | 598 | background-image: url(chrome://global/skin/media/pauseButton.svg#pause-active); |
| | 599 | } |
| | 600 | html|button.playButton[paused] { |
| | 601 | background-image: url(chrome://global/skin/media/playButton.svg#play); |
| | 602 | } |
| | 603 | html|button.playButton[paused]:hover { |
| | 604 | background-image: url(chrome://global/skin/media/playButton.svg#play-hover); |
| | 605 | } |
| | 606 | html|button.playButton[paused]:hover:active { |
| | 607 | background-image: url(chrome://global/skin/media/playButton.svg#play-active); |
| | 608 | } |
| | 609 | |
| | 610 | html|button.muteButton { |
| | 611 | background-image: url(chrome://global/skin/media/muteButton.svg#unmute); |
| | 612 | } |
| | 613 | html|button.muteButton:hover { |
| | 614 | background-image: url(chrome://global/skin/media/muteButton.svg#unmute-hover); |
| | 615 | } |
| | 616 | html|button.muteButton:hover:active { |
| | 617 | background-image: url(chrome://global/skin/media/muteButton.svg#unmute-active); |
| | 618 | } |
| | 619 | html|button.muteButton[muted] { |
| | 620 | background-image: url(chrome://global/skin/media/muteButton.svg#mute); |
| | 621 | } |
| | 622 | html|button.muteButton[muted]:hover { |
| | 623 | background-image: url(chrome://global/skin/media/muteButton.svg#mute-hover); |
| | 624 | } |
| | 625 | html|button.muteButton[muted]:hover:active { |
| | 626 | background-image: url(chrome://global/skin/media/muteButton.svg#mute-active); |
| | 627 | } |
| | 628 | html|button.muteButton[noAudio], |
| | 629 | html|button.muteButton[noAudio]:hover, |
| | 630 | html|button.muteButton[noAudio]:hover:active { |
| | 631 | background-image: url(chrome://global/skin/media/muteButton.svg#noaudio); |
| | 632 | } |
| | 633 | html|button.muteButton[noAudio] + .volumeStack { |
| | 634 | display: none; |
| | 635 | } |
| | 636 | |
| | 637 | html|button.closedCaptionButton { |
| | 638 | background-image: url(chrome://global/skin/media/closedCaptionButton.svg#cc-off); |
| | 639 | } |
| | 640 | html|button.closedCaptionButton:hover { |
| | 641 | background-image: url(chrome://global/skin/media/closedCaptionButton.svg#cc-off-hover); |
| | 642 | } |
| | 643 | html|button.closedCaptionButton:hover:active { |
| | 644 | background-image: url(chrome://global/skin/media/closedCaptionButton.svg#cc-off-active); |
| | 645 | } |
| | 646 | html|button.closedCaptionButton[enabled] { |
| | 647 | background-image: url(chrome://global/skin/media/closedCaptionButton.svg#cc); |
| | 648 | } |
| | 649 | html|button.closedCaptionButton[enabled]:hover { |
| | 650 | background-image: url(chrome://global/skin/media/closedCaptionButton.svg#cc-hover); |
| | 651 | } |
| | 652 | html|button.closedCaptionButton[enabled]:hover:active { |
| | 653 | background-image: url(chrome://global/skin/media/closedCaptionButton.svg#cc-active); |
| | 654 | } |
| | 655 | |
| | 656 | html|button.fullscreenButton { |
| | 657 | background-image: url(chrome://global/skin/media/fullscreenButton.svg#fullscreen); |
| | 658 | } |
| | 659 | html|button.fullscreenButton:hover { |
| | 660 | background-image: url(chrome://global/skin/media/fullscreenButton.svg#fullscreen-hover); |
| | 661 | } |
| | 662 | html|button.fullscreenButton:hover:active { |
| | 663 | background-image: url(chrome://global/skin/media/fullscreenButton.svg#fullscreen-active); |
| | 664 | } |
| | 665 | html|button.fullscreenButton[fullscreened] { |
| | 666 | background-image: url(chrome://global/skin/media/fullscreenButton.svg#unfullscreen); |
| | 667 | } |
| | 668 | html|button.fullscreenButton[fullscreened]:hover { |
| | 669 | background-image: url(chrome://global/skin/media/fullscreenButton.svg#unfullscreen-hover); |
| | 670 | } |
| | 671 | html|button.fullscreenButton[fullscreened]:hover:active { |
| | 672 | background-image: url(chrome://global/skin/media/fullscreenButton.svg#unfullscreen-active); |
| | 673 | } |
| | 674 | |
| | 675 | div.controlBarSpacer { |
| | 676 | flex-grow: 1; |
| | 677 | } |
| | 678 | |
| | 679 | input.volumeControl::-moz-range-thumb, |
| | 680 | input.scrubber::-moz-range-thumb { |
| | 681 | height: 13px; |
| | 682 | width: 13px; |
| | 683 | border: none; |
| | 684 | border-radius: 50%; |
| | 685 | background-color: #000000; |
| | 686 | } |
| | 687 | |
| | 688 | input.volumeControl::-moz-focus-outer, |
| | 689 | input.scrubber::-moz-focus-outer { |
| | 690 | border: 0; |
| | 691 | } |
| | 692 | |
| | 693 | div.progressBackgroundBar { |
| | 694 | display: flex; |
| | 695 | flex-direction: column; |
| | 696 | justify-content: center; |
| | 697 | align-items: center; |
| | 698 | } |
| | 699 | |
| | 700 | div.progressStack { |
| | 701 | position: relative; |
| | 702 | width: 100%; |
| | 703 | height: 5px; |
| | 704 | } |
| | 705 | |
| | 706 | div.scrubberStack { |
| | 707 | min-width: 48px; |
| | 708 | flex-basis: 48px; |
| | 709 | flex-grow: 2; |
| | 710 | flex-shrink: 0; |
| | 711 | margin: 0 9px; |
| | 712 | } |
| | 713 | |
| | 714 | div.volumeStack { |
| | 715 | max-width: 60px; |
| | 716 | min-width: 48px; |
| | 717 | flex-grow: 1; |
| | 718 | flex-shrink: 0; |
| | 719 | margin-right: 6px; |
| | 720 | margin-left: 4px; |
| | 721 | } |
| | 722 | |
| | 723 | progress.bufferBar, |
| | 724 | progress.progressBar, |
| | 725 | input.scrubber, |
| | 726 | .volumeBackground, |
| | 727 | input.volumeControl { |
| | 728 | bottom: 0; |
| | 729 | left: 0; |
| | 730 | position: absolute; |
| | 731 | width: 100%; |
| | 732 | height: 100%; |
| | 733 | padding: 0; |
| | 734 | border: 0; |
| | 735 | border-radius: 2.5px; |
| | 736 | margin: 0; |
| | 737 | background: none; |
| | 738 | background-color: transparent; |
| | 739 | } |
| | 740 | |
| | 741 | progress.bufferBar, |
| | 742 | .volumeBackground { |
| | 743 | background-color: rgba(160,144,144,0.7); |
| | 744 | } |
| | 745 | |
| | 746 | progress.bufferBar::-moz-progress-bar, |
| | 747 | progress.progressBar::-moz-progress-bar, |
| | 748 | .volumeBackground::-moz-meter-bar { |
| | 749 | height: 100%; |
| | 750 | padding: 0; |
| | 751 | margin: 0; |
| | 752 | border: 0; |
| | 753 | border-radius: 2.5px; |
| | 754 | background: none; |
| | 755 | } |
| | 756 | |
| | 757 | input.scrubber:hover::-moz-range-thumb, |
| | 758 | input.volumeControl:hover::-moz-range-thumb { |
| | 759 | background-color: #FFCF00; |
| | 760 | } |
| | 761 | |
| | 762 | input.scrubber:active::-moz-range-thumb, |
| | 763 | input.volumeControl:active::-moz-range-thumb { |
| | 764 | background-color: #FF9F00; |
| | 765 | } |
| | 766 | |
| | 767 | input.scrubber::-moz-range-track, |
| | 768 | input.scrubber::-moz-range-progress { |
| | 769 | background-color: transparent; |
| | 770 | } |
| | 771 | |
| | 772 | input.volumeControl::-moz-range-progress, |
| | 773 | input.volumeControl::-moz-range-track { |
| | 774 | height: 5px; |
| | 775 | border-radius: 2.5px; |
| | 776 | } |
| | 777 | |
| | 778 | input.volumeControl::-moz-range-progress { |
| | 779 | background-color: #008484; |
| | 780 | } |
| | 781 | |
| | 782 | input.volumeControl::-moz-range-track { |
| | 783 | background-color: rgba(0,0,0,0.7); |
| | 784 | } |
| | 785 | |
| | 786 | |
| | 787 | progress.bufferBar::-moz-progress-bar { |
| | 788 | background-color: rgba(160,144,144,0.3); |
| | 789 | border-radius: 2.5px; |
| | 790 | } |
| | 791 | |
| | 792 | progress.progressBar::-moz-progress-bar { |
| | 793 | background-color: #008484; |
| | 794 | } |
| | 795 | |
| | 796 | .textTrackList { |
| | 797 | position: absolute; |
| | 798 | right: 5px; |
| | 799 | bottom: 45px; |
| | 800 | max-width: 80%; |
| | 801 | border: 1px solid #000000; |
| | 802 | border-radius: 2.5px; |
| | 803 | padding: 5px 0; |
| | 804 | vertical-align: middle; |
| | 805 | font-size: 12px; |
| | 806 | background-color: #000000; |
| | 807 | opacity: 0.7; |
| | 808 | } |
| | 809 | |
| | 810 | .textTrackList > .textTrackItem { |
| | 811 | display: block; |
| | 812 | width: 100%; |
| | 813 | height: 30px; |
| | 814 | padding: 2px 10px; |
| | 815 | border: none; |
| | 816 | margin: 0; |
| | 817 | white-space: nowrap; |
| | 818 | overflow: hidden; |
| | 819 | text-align: left; |
| | 820 | text-overflow: ellipsis; |
| | 821 | color: #FFCF00; |
| | 822 | background-color: transparent; |
| | 823 | } |
| | 824 | |
| | 825 | .textTrackList > .textTrackItem:hover { |
| | 826 | background-color: #FFCF00; |
| | 827 | } |
| | 828 | |
| | 829 | .textTrackList > .textTrackItem[on] { |
| | 830 | color: #008484; |
| | 831 | } |
| | 832 | |
| | 833 | span.positionLabel, |
| | 834 | span.durationLabel { |
| | 835 | display: none; |
| | 836 | } |
| | 837 | |
| | 838 | span.positionDurationBox { |
| | 839 | min-width: 9ch; |
| | 840 | text-align: center; |
| | 841 | padding-inline-start: 1px; |
| | 842 | padding-inline-end: 9px; |
| | 843 | white-space: nowrap; |
| | 844 | font: message-box; |
| | 845 | font-size: 13px; |
| | 846 | font-size-adjust: 0.6; |
| | 847 | color: #000000; |
| | 848 | } |
| | 849 | |
| | 850 | span.positionDurationBox[positionOnly] { |
| | 851 | min-width: 4ch; |
| | 852 | } |
| | 853 | |
| | 854 | span.duration { |
| | 855 | display: inline-block; |
| | 856 | white-space: pre; |
| | 857 | color: #8050B0; |
| | 858 | } |
| | 859 | |
| | 860 | .statusIcon { |
| | 861 | width: 36px; |
| | 862 | height: 36px; |
| | 863 | margin-bottom: 20px; |
| | 864 | } |
| | 865 | |
| | 866 | .statusIcon[type="throbber"] { |
| | 867 | background: url("chrome://communicator/skin/brand/throbber-anim.png") no-repeat center; |
| | 868 | } |
| | 869 | /* |
| | 870 | .statusIcon[type="throbber"][stalled] { |
| | 871 | background: url("chrome://global/skin/media/stalled.png") no-repeat center; |
| | 872 | } |
| | 873 | */ |
| | 874 | .statusIcon[type="error"] { |
| | 875 | min-width: 70px; |
| | 876 | min-height: 60px; |
| | 877 | background: url("chrome://global/skin/icons/alert-error.gif") no-repeat center; |
| | 878 | background-size: contain; |
| | 879 | } |
| | 880 | |
| | 881 | /* Overlay Play button */ |
| | 882 | .clickToPlay { |
| | 883 | min-width: 48px; |
| | 884 | min-height: 48px; |
| | 885 | border-radius: 50%; |
| | 886 | background-image: url(chrome://global/skin/media/playButton.svg#play); |
| | 887 | background-repeat: no-repeat; |
| | 888 | background-position: 54% 50%; |
| | 889 | background-size: 40% 40%; |
| | 890 | background-color: #000000; |
| | 891 | opacity: 0.8; |
| | 892 | position: relative; |
| | 893 | top: 20px; |
| | 894 | } |
| | 895 | |
| | 896 | .controlsSpacerStack:hover > .clickToPlay, |
| | 897 | .clickToPlay:hover { |
| | 898 | opacity: 0.55; |
| | 899 | } |
| | 900 | |
| | 901 | .controlsSpacerStack:hover > .clickToPlay[fadeout] { |
| | 902 | opacity: 0; |
| | 903 | } |
| | 904 | |
| | 905 | .controlBar[fullscreen-unavailable] .fullscreenButton { |
| | 906 | display: none; |
| | 907 | } |
| | 908 | |
| | 909 | /* CSS Transitions */ |
| | 910 | .clickToPlay { |
| | 911 | transition-property: transform, opacity; |
| | 912 | transition-duration: 400ms, 400ms; |
| | 913 | } |
| | 914 | |
| | 915 | .controlsSpacer[fadeout] { |
| | 916 | opacity: 0; |
| | 917 | } |
| | 918 | |
| | 919 | .clickToPlay[fadeout] { |
| | 920 | transform: scale(3); |
| | 921 | opacity: 0; |
| | 922 | } |
| | 923 | |
| | 924 | .clickToPlay[fadeout][immediate] { |
| | 925 | transition-property: opacity, background-size; |
| | 926 | transition-duration: 0s, 0s; |
| | 927 | } |
| | 928 | .controlBar:not([immediate]) { |
| | 929 | transition-property: opacity; |
| | 930 | transition-duration: 200ms; |
| | 931 | } |
| | 932 | .controlBar[fadeout] { |
| | 933 | opacity: 0; |
| | 934 | } |
| | 935 | .volumeStack:not([immediate]) { |
| | 936 | transition-property: opacity, margin-top; |
| | 937 | transition-duration: 200ms, 200ms; |
| | 938 | } |
| | 939 | .statusOverlay:not([immediate]) { |
| | 940 | transition-property: opacity; |
| | 941 | transition-duration: 300ms; |
| | 942 | transition-delay: 750ms; |
| | 943 | } |
| | 944 | .statusOverlay[fadeout] { |
| | 945 | opacity: 0; |
| | 946 | } |
| | 947 | |
| | 948 | /* Error description formatting */ |
| | 949 | .errorLabel { |
| | 950 | padding: 0 10px; |
| | 951 | text-align: center; |
| | 952 | font-family: "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif; |
| | 953 | font-size: 14px; |
| | 954 | color: #E7ADE7; |
| | 955 | } |
| | 956 | |
| | 957 | .errorLabel { |
| | 958 | display: none; |
| | 959 | } |
| | 960 | |
| | 961 | [error="errorAborted"] > [anonid="errorAborted"], |
| | 962 | [error="errorNetwork"] > [anonid="errorNetwork"], |
| | 963 | [error="errorDecode"] > [anonid="errorDecode"], |
| | 964 | [error="errorSrcNotSupported"] > [anonid="errorSrcNotSupported"], |
| | 965 | [error="errorNoSource"] > [anonid="errorNoSource"], |
| | 966 | [error="errorGeneric"] > [anonid="errorGeneric"] { |
| | 967 | display: inline; |
| | 968 | } |
projects / themes.git / blame_incremental