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