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   text-align: center;
 357   padding-inline-start: 1px;
 358   padding-inline-end: 9px;
 359   white-space: nowrap;
 360   font: message-box;
 361   font-size: 13px;
 362   font-size-adjust: 0.55;
 363   color: #000000;
 364 }
 365
 366 .duration {
 367   display: inline-block;
 368   white-space: pre;
 369   color: #8050B0;
 370 }
 371
 372 .statusIcon {
 373   width: 36px;
 374   height: 36px;
 375   margin-bottom: 20px;
 376 }
 377
 378 .statusIcon[type="throbber"] {
 379   background: url(chrome://global/skin/media/throbber.png) no-repeat center;
 380 }
 381
 382 .statusIcon[type="throbber"][stalled] {
 383   background: url(chrome://global/skin/media/stalled.png) no-repeat center;
 384 }
 385
 386 .statusIcon[type="error"] {
 387   min-width: 70px;
 388   min-height: 60px;
 389   background: url(chrome://global/skin/media/error.png) no-repeat center;
 390   background-size: contain;
 391 }
 392
 393 /* Overlay Play button */
 394 .clickToPlay {
 395   min-width: 48px;
 396   min-height: 48px;
 397   border-radius: 50%;
 398   background-image: url(chrome://global/skin/media/playButton.svg#play);
 399   background-repeat: no-repeat;
 400   background-position: 54% 50%;
 401   background-size: 40% 40%;
 402   background-color: #000000;
 403   opacity: 0.8;
 404   position: relative;
 405   top: 20px;
 406 }
 407
 408 .controlsSpacerStack:hover > .clickToPlay,
 409 .clickToPlay:hover {
 410   opacity: 0.55;
 411 }
 412
 413 .controlsSpacerStack:hover > .clickToPlay[fadeout] {
 414   opacity: 0;
 415 }
 416
 417 .controlBar[fullscreen-unavailable] .fullscreenButton {
 418   display: none;
 419 }
 420
 421 /* CSS Transitions */
 422 .clickToPlay {
 423   transition-property: transform, opacity;
 424   transition-duration: 400ms, 400ms;
 425 }
 426
 427 .controlsSpacer[fadeout] {
 428   opacity: 0;
 429 }
 430
 431 .clickToPlay[fadeout] {
 432   transform: scale(3);
 433   opacity: 0;
 434 }
 435
 436 .clickToPlay[fadeout][immediate] {
 437   transition-property: opacity, background-size;
 438   transition-duration: 0s, 0s;
 439 }
 440 .controlBar:not([immediate]) {
 441   transition-property: opacity;
 442   transition-duration: 200ms;
 443 }
 444 .controlBar[fadeout] {
 445   opacity: 0;
 446 }
 447 .volumeStack:not([immediate]) {
 448   transition-property: opacity, margin-top;
 449   transition-duration: 200ms, 200ms;
 450 }
 451 .statusOverlay:not([immediate]) {
 452   transition-property: opacity;
 453   transition-duration: 300ms;
 454   transition-delay: 750ms;
 455 }
 456 .statusOverlay[fadeout] {
 457   opacity: 0;
 458 }
 459
 460 /* Error description formatting */
 461 .errorLabel {
 462   padding: 0 10px;
 463   text-align: center;
 464   font: message-box;
 465   font-size: 14px;
 466   color: #E7ADE7;
 467 }
 468
 469 .errorLabel {
 470   display: none;
 471 }
 472
 473 [error="errorAborted"]         > [anonid="errorAborted"],
 474 [error="errorNetwork"]         > [anonid="errorNetwork"],
 475 [error="errorDecode"]          > [anonid="errorDecode"],
 476 [error="errorSrcNotSupported"] > [anonid="errorSrcNotSupported"],
 477 [error="errorNoSource"]        > [anonid="errorNoSource"],
 478 [error="errorGeneric"]         > [anonid="errorGeneric"] {
 479   display: inline;
 480 }