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 url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
   6 @namespace html url("http://www.w3.org/1999/xhtml");
   7
   8 .controlBar {
   9   height: 28px;
  10   background-color: rgba(156,156,255,0.75);
  11 }
  12
  13 .playButton,
  14 .muteButton,
  15 .closedCaptionButton,
  16 .fullscreenButton {
  17   background-color: transparent;
  18   background-repeat: no-repeat;
  19   background-position: center;
  20   margin: 0;
  21   padding: 0;
  22   min-height: 28px;
  23   min-width: 28px;
  24   border: none;
  25 }
  26
  27 .playButton:hover,
  28 .muteButton:not([noAudio]):hover,
  29 .closedCaptionButton:hover,
  30 .fullscreenButton:hover {
  31   background-color: rgba(255,207,0,0.75);
  32 }
  33
  34 .playButton:hover:active,
  35 .muteButton:not([noAudio]):hover:active,
  36 .closedCaptionButton:hover:active,
  37 .fullscreenButton:hover:active {
  38   background-color: rgba(255,159,0,0.75);
  39 }
  40
  41 .playButton {
  42   background-image: url("chrome://global/skin/media/pauseButton.png");
  43   margin-right: -22px; /* 1/2 of scrubber thumb width, for overhang. */
  44   position: relative; /* Trick to work around negative margin interfering with clicking on the button. */
  45 }
  46
  47 .playButton:hover {
  48   background-image: url("chrome://global/skin/media/pauseButton-hover.png");
  49 }
  50
  51 .playButton[paused] {
  52   background-image: url("chrome://global/skin/media/playButton.png");
  53 }
  54
  55 .playButton[paused]:hover {
  56   background-image: url("chrome://global/skin/media/playButton-hover.png");
  57 }
  58
  59 .muteButton {
  60   background-image: url("chrome://global/skin/media/muteButton.png");
  61   min-width: 33px;
  62 }
  63
  64 .muteButton:hover {
  65   background-image: url("chrome://global/skin/media/muteButton-hover.png");
  66 }
  67
  68 .muteButton[muted] {
  69   background-image: url("chrome://global/skin/media/unmuteButton.png");
  70 }
  71
  72 .muteButton[muted]:hover {
  73   background-image: url("chrome://global/skin/media/unmuteButton-hover.png");
  74 }
  75
  76 .muteButton[noAudio] {
  77   background-image: url("chrome://global/skin/media/noAudio.png");
  78 }
  79
  80 .muteButton[noAudio] + .volumeStack {
  81   display: none;
  82 }
  83
  84 .closedCaptionButton {
  85   background-image: url("chrome://global/skin/media/closeCaptionButton.png");
  86   background-position: 4px;
  87 }
  88
  89 .closedCaptionButton:hover {
  90   background-image: url("chrome://global/skin/media/closeCaptionButton-hover.png");
  91 }
  92
  93 .closedCaptionButton[enabled] {
  94   opacity: 1;
  95 }
  96
  97 .closedCaptionButton[hidden] {
  98   display: none;
  99 }
 100
 101 .fullscreenButton {
 102   background-image: -moz-image-rect(url("chrome://global/skin/media/fullscreenButton.png"), 0, 16, 16, 0);
 103 }
 104
 105 .fullscreenButton:hover {
 106   background-image: -moz-image-rect(url("chrome://global/skin/media/fullscreenButton-hover.png"), 0, 16, 16, 0);
 107 }
 108
 109 .fullscreenButton[fullscreened] {
 110   background-image: -moz-image-rect(url("chrome://global/skin/media/fullscreenButton.png"), 0, 32, 16, 16);
 111 }
 112
 113 .fullscreenButton[fullscreened]:hover {
 114   background-image: -moz-image-rect(url("chrome://global/skin/media/fullscreenButton-hover.png"), 0, 32, 16, 16);
 115 }
 116
 117 .volumeControl {
 118   width: 32px;
 119   opacity: 0;
 120 }
 121
 122 .volumeBackground,
 123 .volumeForeground {
 124   background-repeat: no-repeat;
 125   background-position: center;
 126   width: 32px;
 127 }
 128
 129 .volumeBackground {
 130   background-image: url("chrome://global/skin/media/volume-empty.png");
 131 }
 132
 133 .volumeForeground {
 134   background-image: url("chrome://global/skin/media/volume-full.png");
 135   background-clip: content-box;
 136 }
 137
 138 .textTrackList {
 139   display: -moz-box;
 140   -moz-appearance: none;
 141   -moz-box-pack: end;
 142   -moz-box-align: end;
 143   padding: 0;
 144 }
 145
 146 .textTrackList[hidden] {
 147   display: none;
 148 }
 149
 150 .textTrackList > html|*.textTrackItem {
 151   -moz-appearance: none;
 152   -moz-box-align: start;
 153   text-align: start;
 154   overflow: hidden;
 155   margin: 0;
 156   padding: 2px 10px;
 157   -moz-margin-end: 10px;
 158   border: none;
 159   color: rgba(255,255,255,.5);
 160   background-color: rgba(35,31,32,.74);
 161   white-space: nowrap;
 162 }
 163
 164 .textTrackList > html|*.textTrackItem[on] {
 165   color: white;
 166   background-color: black;
 167 }
 168
 169 .textTrackList > html|*.textTrackItem:hover {
 170   background-color: rgba(0,0,0,.55);
 171 }
 172
 173 .controlBar[fullscreen-unavailable] {
 174   /* This value is duplicated in the videocontrols.xml adjustControlSize function. */
 175   padding-inline-end: 8px;
 176 }
 177
 178 .volumeControl .scale-thumb {
 179   min-width: 0;
 180   opacity: 0;
 181 }
 182
 183 .durationBox {
 184   -moz-box-pack: center;
 185 }
 186
 187 .durationLabel {
 188   margin-left: -22px; /* 1/2 of scrubber thumb width, for overhang. */
 189   padding-left: 8px; /* don't bump into the scrubber bar */
 190   padding-top: 0px; /* center vertically with scrubber bar */
 191   color: rgba(0,0,0,0.75);
 192   font-family: "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
 193   font-size: 11px;
 194 }
 195
 196 .positionLabel {
 197   display: none;
 198 }
 199
 200 .backgroundBar {
 201   /* margin top/bottom: make bar 8px tall (control height = 28, minus 2 * 10 margin) */
 202   /* margin left/right: 1/2 of scrubber thumb width, for overhang. */
 203   margin: 10px 22px;
 204   background-color: rgba(0,0,0,0.75);
 205   border-radius: 2.5px;
 206 }
 207
 208 .bufferBar,
 209 .progressBar {
 210   /* margin top/bottom: make bar 8px tall (control height = 28, minus 2 * 10 margin) */
 211   /* margin left/right: 1/2 of scrubber thumb width, for overhang. */
 212   margin: 10px 22px;
 213   border: none;
 214   background-color: transparent;
 215   min-width: 0;
 216   min-height: 0;
 217 }
 218
 219 /* .progress-bar is an element inside the <progressmeter> implementation. */
 220 .bufferBar .progress-bar {
 221   /*
 222    * Note that this is drawn on top of the .backgroundBar. So although this
 223    * has the same background-color specified, the semitransparent
 224    * compositing gives it a different visual appearance.
 225    */
 226   background-color: rgba(255,159,0,0.75);
 227   border-radius: 2.5px;
 228   -moz-appearance: none;
 229 }
 230
 231 .progressBar .progress-bar {
 232   background-color: #008484;
 233   border-radius: 2.5px;
 234   -moz-appearance: none;
 235 }
 236
 237 /* .scale-slider is an element inside the <scale> implementation. */
 238 .scrubber .scale-slider,
 239 .volumeControl .scale-slider {
 240   /* Hide the default horizontal bar. */
 241   background: none;
 242   margin: 0;
 243 }
 244
 245 .scrubber .scale-slider {
 246   /* abs(margin-top) + margin-bottom + bar height == timeThumb height */
 247   margin-top: -10px;
 248   margin-bottom: 10px;
 249 }
 250
 251 /* .scale-thumb is an element inside the <scale> implementation. */
 252 .scrubber .scale-thumb,
 253 .volumeControl .scale-thumb {
 254   /* Override the default thumb appearance with a custom image. */
 255   background: transparent;
 256   border: none !important;
 257 }
 258
 259 .timeThumb {
 260   background: url("chrome://global/skin/media/scrubberThumb.png") no-repeat center;
 261   min-width: 45px;
 262   min-height: 28px;
 263   -moz-box-pack: center;
 264 }
 265
 266 .timeThumb[showhours="true"] {
 267   background-image: url("chrome://global/skin/media/scrubberThumbWide.png");
 268 }
 269
 270 /*
 271 .timeThumb:hover, .timeThumb:active {
 272   background-image: url("chrome://global/skin/media/scrubberThumb-hover.png");
 273 }
 274 */
 275
 276 .timeLabel {
 277   color: rgba(0,0,0,0.75);
 278   font-size: 10px;
 279   font-family: "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
 280   text-shadow: rgba(255,259,0, 0.3) 0 1px;
 281   padding-top: 5px;
 282 }
 283
 284 .statusOverlay {
 285   -moz-box-align: center;
 286   -moz-box-pack: center;
 287   background-color: rgba(0,0,0,0.55);
 288 }
 289
 290 .statusIcon {
 291   margin-bottom: 28px; /* same height as .controlBar, to keep icon centered above it */
 292   width: 36px;
 293   height: 36px;
 294 }
 295
 296 .statusIcon[type="throbber"] {
 297   background: url("chrome://communicator/skin/brand/throbber-anim.png") no-repeat center;
 298 }
 299 /*
 300 .statusIcon[type="throbber"][stalled] {
 301   background: url("chrome://global/skin/media/stalled.png") no-repeat center;
 302 }
 303 */
 304 .statusIcon[type="error"] {
 305   background: url("chrome://global/skin/icons/alert-error.gif") no-repeat center;
 306 }
 307
 308 /* Overlay Play button */
 309 .clickToPlay {
 310   width: 64px;
 311   height: 64px;
 312   -moz-box-pack: center;
 313   -moz-box-align: center;
 314   opacity: 0.7;
 315   background-image: url("chrome://global/skin/media/videoClickToPlayButton.svg");
 316   background-repeat: no-repeat;
 317   background-position: center;
 318   background-size: 64px 64px;
 319   background-color: hsla(0,0%,10%,.5);
 320 }
 321 .clickToPlay:hover {
 322   opacity: 1;
 323 }
 324
 325 /* Statistics formatting */
 326 html|*.statsDiv {
 327   position: relative;
 328 }
 329 html|td {
 330   height: 1em;
 331   max-height: 1em;
 332   padding: 0 2px;
 333 }
 334 html|table {
 335   font-family: "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
 336   font-size: 11px;
 337   color: white;
 338   text-shadow:
 339     -1px -1px 0 #000,
 340     1px -1px 0 #000,
 341     -1px 1px 0 #000,
 342     1px 1px 0 #000;
 343   min-width: 100%;
 344   background: rgba(68,68,111,.7);
 345   table-layout: fixed;
 346   border-collapse: collapse;
 347   position: absolute;
 348 }
 349
 350 /* CSS Transitions */
 351 .clickToPlay {
 352   transition-property: opacity, background-size;
 353   transition-duration: 400ms, 400ms;
 354 }
 355 .clickToPlay[fadeout] {
 356   background-size: auto, 192px 192px;
 357   opacity: 0;
 358 }
 359 .clickToPlay[fadeout][immediate] {
 360   transition-property: opacity, background-size;
 361   transition-duration: 0s, 0s;
 362 }
 363 .controlBar:not([immediate]) {
 364   transition-property: opacity;
 365   transition-duration: 200ms;
 366 }
 367 .controlBar[fadeout] {
 368   opacity: 0;
 369 }
 370 .volumeStack:not([immediate]) {
 371   transition-property: opacity, margin-top;
 372   transition-duration: 200ms, 200ms;
 373 }
 374 .volumeStack[fadeout] {
 375   opacity: 0;
 376   margin-top: 0;
 377 }
 378 .statusOverlay:not([immediate]) {
 379   transition-property: opacity;
 380   transition-duration: 300ms;
 381   transition-delay: 750ms;
 382 }
 383 .statusOverlay[fadeout] {
 384   opacity: 0;
 385 }
 386
 387 /* Error description formatting */
 388 .errorLabel {
 389   font-family: "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
 390   font-size: 11px;
 391   color: #E7ADE7;
 392   text-shadow:
 393     -1px -1px 0 #000,
 394     1px -1px 0 #000,
 395     -1px 1px 0 #000,
 396     1px 1px 0 #000;
 397   padding: 0 10px;
 398   text-align: center;
 399 }
 400
 401 @media (min-resolution: 2dppx) {
 402   .playButton {
 403     background-image: url(chrome://global/skin/media/pauseButton@2x.png);
 404     background-size: 28px 28px;
 405   }
 406   .playButton:hover {
 407     background-image: url(chrome://global/skin/media/pauseButton-hover@2x.png);
 408     background-size: 28px 28px;
 409   }
 410   .playButton[paused] {
 411     background-image: url(chrome://global/skin/media/playButton@2x.png);
 412     background-size: 28px 28px;
 413   }
 414   .playButton[paused]:hover {
 415     background-image: url(chrome://global/skin/media/playButton-hover@2x.png);
 416     background-size: 28px 28px;
 417   }
 418   .volumeBackground {
 419     background-image: url(chrome://global/skin/media/volume-empty@2x.png);
 420     background-size: 32px 16px;
 421   }
 422   .volumeForeground:hover {
 423     background-image: url(chrome://global/skin/media/volume-full-hover@2x.png);
 424     background-size: 32px 16px;
 425   }
 426   .muteButton {
 427     background-image: url(chrome://global/skin/media/muteButton@2x.png);
 428     background-size: 33px 28px;
 429   }
 430   .muteButton:hover {
 431     background-image: url(chrome://global/skin/media/muteButton-hover@2x.png);
 432     background-size: 33px 28px;
 433   }
 434   .muteButton[muted] {
 435     background-image: url(chrome://global/skin/media/unmuteButton@2x.png);
 436     background-size: 33px 28px;
 437   }
 438   .muteButton[muted]:hover {
 439     background-image: url(chrome://global/skin/media/unmuteButton-hover@2x.png);
 440     background-size: 33px 28px;
 441   }
 442   .muteButton[noAudio] {
 443     background-image: url(chrome://global/skin/media/noAudio@2x.png);
 444     background-size: 33px 28px;
 445   }
 446   .closedCaptionButton {
 447     background-image: url(chrome://global/skin/media/closeCaptionButton@2x.png);
 448     background-position: 4px;
 449     background-size: 28px 28px;
 450   }
 451   .closedCaptionButton:hover {
 452     background-image: url(chrome://global/skin/media/closeCaptionButton-hover@2x.png);
 453     background-position: 4px;
 454     background-size: 28px 28px;
 455   }
 456   .fullscreenButton {
 457     background-image: -moz-image-rect(url("chrome://global/skin/media/fullscreenButton@2x.png"), 0, 32, 32, 0);
 458     background-size: 16px 16px;
 459   }
 460   .fullscreenButton:hover {
 461     background-image: -moz-image-rect(url("chrome://global/skin/media/fullscreenButton-hover@2x.png"), 0, 32, 32, 0);
 462     background-size: 16px 16px;
 463   }
 464   .fullscreenButton[fullscreened] {
 465     background-image: -moz-image-rect(url("chrome://global/skin/media/fullscreenButton@2x.png"), 0, 64, 32, 32);
 466     background-size: 16px 16px;
 467   }
 468   .fullscreenButton[fullscreened]:hover {
 469     background-image: -moz-image-rect(url("chrome://global/skin/media/fullscreenButton-hover@2x.png"), 0, 64, 32, 32);
 470     background-size: 16px 16px;
 471   }
 472   .timeThumb {
 473     background-image: url(chrome://global/skin/media/scrubberThumb@2x.png);
 474     background-size: 33px 28px;
 475   }
 476   .timeThumb[showhours="true"] {
 477     background-image: url(chrome://global/skin/media/scrubberThumbWide@2x.png);
 478     background-size: 45px 28px;
 479   }
 480 }