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 xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
   6 @namespace url("http://www.w3.org/1999/xhtml");
   7
   8 video > xul|videocontrols,
   9 audio > xul|videocontrols {
  10   writing-mode: horizontal-tb;
  11   width: 100%;
  12   height: 100%;
  13   display: inline-block;
  14 }
  15
  16 .controlsContainer [hidden="true"],
  17 .controlBar[hidden] {
  18   display: none;
  19 }
  20
  21 .controlBar[size="hidden"] {
  22   display: none;
  23 }
  24
  25 .controlsContainer,
  26 .progressContainer {
  27   position: relative;
  28   height: 100%;
  29 }
  30
  31 .stackItem {
  32   position: absolute;
  33   left: 0;
  34   bottom: 0;
  35   width: 100%;
  36   height: 100%;
  37 }
  38
  39 .statusOverlay {
  40   display: flex;
  41   flex-direction: column;
  42   justify-content: center;
  43   align-items: center;
  44   background-color: rgb(160,144,144);
  45 }
  46
  47 .controlsOverlay {
  48   display: flex;
  49   flex-direction: column;
  50   justify-content: center;
  51   position: relative;
  52 }
  53
  54 .controlsSpacerStack {
  55   display: flex;
  56   flex-direction: column;
  57   flex-grow: 1;
  58   justify-content: center;
  59   align-items: center;
  60 }
  61
  62 .controlsSpacer {
  63   background-color: rgba(0,0,0,.4);
  64 }
  65
  66 .controlBar {
  67   position: relative;
  68   display: flex;
  69   justify-content: center;
  70   align-items: center;
  71   overflow: hidden;
  72   height: 40px;
  73   padding: 0 9px;
  74   background-color: rgba(156,156,255,0.75);
  75 }
  76
  77 .playButton,
  78 .muteButton,
  79 .closedCaptionButton,
  80 .fullscreenButton {
  81   height: 100%;
  82   min-height: 30px;
  83   min-width: 30px;
  84   padding: 6px;
  85   border: 0;
  86   margin: 0;
  87   background-color: transparent;
  88   background-repeat: no-repeat;
  89   background-position: center;
  90   background-origin: content-box;
  91   background-clip: content-box;
  92 }
  93
  94 .playButton:hover,
  95 .muteButton:not([noAudio]):hover,
  96 .closedCaptionButton:hover,
  97 .fullscreenButton:hover {
  98   background-color: rgba(255,207,0,0.75);
  99 }
 100
 101 .playButton:hover:active,
 102 .muteButton:not([noAudio]):hover:active,
 103 .closedCaptionButton:hover:active,
 104 .fullscreenButton:hover:active {
 105   background-color: rgba(255,159,0,0.75);
 106 }
 107
 108 .playButton {
 109   background-image: url(chrome://global/skin/media/pauseButton.svg#pause);
 110 }
 111 .playButton:hover {
 112   background-image: url(chrome://global/skin/media/pauseButton.svg#pause-hover);
 113 }
 114 .playButton:hover:active {
 115   background-image: url(chrome://global/skin/media/pauseButton.svg#pause-active);
 116 }
 117 .playButton[paused] {
 118   background-image: url(chrome://global/skin/media/playButton.svg#play);
 119 }
 120 .playButton[paused]:hover {
 121   background-image: url(chrome://global/skin/media/playButton.svg#play-hover);
 122 }
 123 .playButton[paused]:hover:active {
 124   background-image: url(chrome://global/skin/media/playButton.svg#play-active);
 125 }
 126
 127 .muteButton {
 128   background-image: url(chrome://global/skin/media/muteButton.svg#unmute);
 129 }
 130 .muteButton:hover {
 131   background-image: url(chrome://global/skin/media/muteButton.svg#unmute-hover);
 132 }
 133 .muteButton:hover:active {
 134   background-image: url(chrome://global/skin/media/muteButton.svg#unmute-active);
 135 }
 136 .muteButton[muted] {
 137   background-image: url(chrome://global/skin/media/muteButton.svg#mute);
 138 }
 139 .muteButton[muted]:hover {
 140   background-image: url(chrome://global/skin/media/muteButton.svg#mute-hover);
 141 }
 142 .muteButton[muted]:hover:active {
 143   background-image: url(chrome://global/skin/media/muteButton.svg#mute-active);
 144 }
 145 .muteButton[noAudio],
 146 .muteButton[noAudio]:hover,
 147 .muteButton[noAudio]:hover:active {
 148   background-image: url(chrome://global/skin/media/muteButton.svg#noaudio);
 149 }
 150 .muteButton[noAudio] + .volumeStack {
 151   display: none;
 152 }
 153
 154 .closedCaptionButton {
 155   background-image: url(chrome://global/skin/media/closedCaptionButton.svg#cc-off);
 156 }
 157 .closedCaptionButton:hover {
 158   background-image: url(chrome://global/skin/media/closedCaptionButton.svg#cc-off-hover);
 159 }
 160 .closedCaptionButton:hover:active {
 161   background-image: url(chrome://global/skin/media/closedCaptionButton.svg#cc-off-active);
 162 }
 163 .closedCaptionButton[enabled] {
 164   background-image: url(chrome://global/skin/media/closedCaptionButton.svg#cc);
 165 }
 166 .closedCaptionButton[enabled]:hover {
 167   background-image: url(chrome://global/skin/media/closedCaptionButton.svg#cc-hover);
 168 }
 169 .closedCaptionButton[enabled]:hover:active {
 170   background-image: url(chrome://global/skin/media/closedCaptionButton.svg#cc-active);
 171 }
 172
 173 .fullscreenButton {
 174   background-image: url(chrome://global/skin/media/fullscreenButton.svg#fullscreen);
 175 }
 176 .fullscreenButton:hover {
 177   background-image: url(chrome://global/skin/media/fullscreenButton.svg#fullscreen-hover);
 178 }
 179 .fullscreenButton:hover:active {
 180   background-image: url(chrome://global/skin/media/fullscreenButton.svg#fullscreen-active);
 181 }
 182 .fullscreenButton[fullscreened] {
 183   background-image: url(chrome://global/skin/media/fullscreenButton.svg#unfullscreen);
 184 }
 185 .fullscreenButton[fullscreened]:hover {
 186   background-image: url(chrome://global/skin/media/fullscreenButton.svg#unfullscreen-hover);
 187 }
 188 .fullscreenButton[fullscreened]:hover:active {
 189   background-image: url(chrome://global/skin/media/fullscreenButton.svg#unfullscreen-active);
 190 }
 191
 192 .controlBarSpacer {
 193   flex-grow: 1;
 194 }
 195
 196 .volumeControl::-moz-range-thumb,
 197 .scrubber::-moz-range-thumb {
 198   height: 13px;
 199   width: 13px;
 200   border: none;
 201   border-radius: 50%;
 202   background-color: #000000;
 203 }
 204
 205 .volumeControl::-moz-focus-outer,
 206 .scrubber::-moz-focus-outer {
 207   border: 0;
 208 }
 209
 210 .progressBackgroundBar {
 211   display: flex;
 212   flex-direction: column;
 213   justify-content: center;
 214   align-items: center;
 215 }
 216
 217 .progressStack {
 218   position: relative;
 219   width: 100%;
 220   height: 5px;
 221 }
 222
 223 .scrubberStack {
 224   min-width: 48px;
 225   flex-basis: 48px;
 226   flex-grow: 2;
 227   flex-shrink: 0;
 228   margin: 0 9px;
 229 }
 230
 231 .volumeStack {
 232   max-width: 60px;
 233   min-width: 48px;
 234   flex-grow: 1;
 235   flex-shrink: 0;
 236   margin-right: 6px;
 237   margin-left: 4px;
 238 }
 239
 240 .bufferBar,
 241 .progressBar,
 242 .scrubber,
 243 .volumeBackground,
 244 .volumeControl {
 245   bottom: 0;
 246   left: 0;
 247   position: absolute;
 248   width: 100%;
 249   height: 100%;
 250   padding: 0;
 251   border: 0;
 252   border-radius: 2.5px;
 253   margin: 0;
 254   background: none;
 255   background-color: transparent;
 256 }
 257
 258 .bufferBar,
 259 .volumeBackground {
 260   background-color: rgba(160,144,144,0.7);
 261 }
 262
 263 .bufferBar::-moz-progress-bar,
 264 .progressBar::-moz-progress-bar,
 265 .volumeBackground::-moz-meter-bar {
 266   height: 100%;
 267   padding: 0;
 268   margin: 0;
 269   border: 0;
 270   border-radius: 2.5px;
 271   background: none;
 272 }
 273
 274 .scrubber:hover::-moz-range-thumb,
 275 .volumeControl:hover::-moz-range-thumb {
 276   background-color: #FFCF00;
 277 }
 278
 279 .scrubber:active::-moz-range-thumb,
 280 .volumeControl:active::-moz-range-thumb {
 281   background-color: #FF9F00;
 282 }
 283
 284 .scrubber::-moz-range-track,
 285 .scrubber::-moz-range-progress {
 286   background-color: transparent;
 287 }
 288
 289 .volumeControl::-moz-range-progress,
 290 .volumeControl::-moz-range-track {
 291   height: 5px;
 292   border-radius: 2.5px;
 293 }
 294
 295 .volumeControl::-moz-range-progress {
 296   background-color: #008484;
 297 }
 298
 299 .volumeControl::-moz-range-track {
 300   background-color: rgba(0,0,0,0.7);
 301 }
 302
 303
 304 .bufferBar::-moz-progress-bar {
 305   background-color: rgba(160,144,144,0.3);
 306   border-radius: 2.5px;
 307 }
 308
 309 .progressBar::-moz-progress-bar {
 310   background-color: #008484;
 311 }
 312
 313 .textTrackList {
 314   position: absolute;
 315   right: 5px;
 316   bottom: 45px;
 317   max-width: 80%;
 318   border: 1px solid #000000;
 319   border-radius: 2.5px;
 320   padding: 5px 0;
 321   vertical-align: middle;
 322   font-size: 12px;
 323   background-color: #000000;
 324   opacity: 0.7;
 325 }
 326
 327 .textTrackList > .textTrackItem {
 328   display: block;
 329   width: 100%;
 330   height: 30px;
 331   padding: 2px 10px;
 332   border: none;
 333   margin: 0;
 334   white-space: nowrap;
 335   overflow: hidden;
 336   text-align: left;
 337   text-overflow: ellipsis;
 338   color: #FF9F00;
 339   background-color: transparent;
 340 }
 341
 342 .textTrackList > .textTrackItem:hover {
 343   background-color: #FFCF00;
 344 }
 345
 346 .textTrackList > .textTrackItem[on] {
 347   color: #008484;
 348 }
 349
 350 .positionLabel,
 351 .durationLabel {
 352   display: none;
 353 }
 354
 355 .positionDurationBox {
 356   min-width: 9ch;
 357   text-align: center;
 358   padding-inline-start: 1px;
 359   padding-inline-end: 9px;
 360   white-space: nowrap;
 361   font: message-box;
 362   font-size: 13px;
 363   font-size-adjust: 0.55;
 364   color: #000000;
 365 }
 366
 367 .positionDurationBox[positionOnly] {
 368   min-width: 4ch;
 369 }
 370
 371 .duration {
 372   display: inline-block;
 373   white-space: pre;
 374   color: #8050B0;
 375 }
 376
 377 .statusIcon {
 378   width: 36px;
 379   height: 36px;
 380   margin-bottom: 20px;
 381 }
 382
 383 .statusIcon[type="throbber"] {
 384   background: url(chrome://global/skin/media/throbber.png) no-repeat center;
 385 }
 386
 387 .statusIcon[type="throbber"][stalled] {
 388   background: url(chrome://global/skin/media/stalled.png) no-repeat center;
 389 }
 390
 391 .statusIcon[type="error"] {
 392   min-width: 70px;
 393   min-height: 60px;
 394   background: url(chrome://global/skin/media/error.png) no-repeat center;
 395   background-size: contain;
 396 }
 397
 398 /* Overlay Play button */
 399 .clickToPlay {
 400   min-width: 48px;
 401   min-height: 48px;
 402   border-radius: 50%;
 403   background-image: url(chrome://global/skin/media/playButton.svg#play);
 404   background-repeat: no-repeat;
 405   background-position: 54% 50%;
 406   background-size: 40% 40%;
 407   background-color: #000000;
 408   opacity: 0.8;
 409   position: relative;
 410   top: 20px;
 411 }
 412
 413 .controlsSpacerStack:hover > .clickToPlay,
 414 .clickToPlay:hover {
 415   opacity: 0.55;
 416 }
 417
 418 .controlsSpacerStack:hover > .clickToPlay[fadeout] {
 419   opacity: 0;
 420 }
 421
 422 .controlBar[fullscreen-unavailable] .fullscreenButton {
 423   display: none;
 424 }
 425
 426 /* CSS Transitions */
 427 .clickToPlay {
 428   transition-property: transform, opacity;
 429   transition-duration: 400ms, 400ms;
 430 }
 431
 432 .controlsSpacer[fadeout] {
 433   opacity: 0;
 434 }
 435
 436 .clickToPlay[fadeout] {
 437   transform: scale(3);
 438   opacity: 0;
 439 }
 440
 441 .clickToPlay[fadeout][immediate] {
 442   transition-property: opacity, background-size;
 443   transition-duration: 0s, 0s;
 444 }
 445 .controlBar:not([immediate]) {
 446   transition-property: opacity;
 447   transition-duration: 200ms;
 448 }
 449 .controlBar[fadeout] {
 450   opacity: 0;
 451 }
 452 .volumeStack:not([immediate]) {
 453   transition-property: opacity, margin-top;
 454   transition-duration: 200ms, 200ms;
 455 }
 456 .statusOverlay:not([immediate]) {
 457   transition-property: opacity;
 458   transition-duration: 300ms;
 459   transition-delay: 750ms;
 460 }
 461 .statusOverlay[fadeout] {
 462   opacity: 0;
 463 }
 464
 465 /* Error description formatting */
 466 .errorLabel {
 467   padding: 0 10px;
 468   text-align: center;
 469   font: message-box;
 470   font-size: 14px;
 471   color: #E7ADE7;
 472 }
 473
 474 .errorLabel {
 475   display: none;
 476 }
 477
 478 [error="errorAborted"]         > [anonid="errorAborted"],
 479 [error="errorNetwork"]         > [anonid="errorNetwork"],
 480 [error="errorDecode"]          > [anonid="errorDecode"],
 481 [error="errorSrcNotSupported"] > [anonid="errorSrcNotSupported"],
 482 [error="errorNoSource"]        > [anonid="errorNoSource"],
 483 [error="errorGeneric"]         > [anonid="errorGeneric"] {
 484   display: inline;
 485 }