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