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