LCARStrek/global/media/videocontrols.css

   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 }