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