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