MediaWiki:Gadget-Deck-wiki.css

/* TOC
 * - deck.js core css, modified by YurB to maximize the slide and to be useful in Wikipedia context;
 */

/*!
Deck JS - deck.core
Copyright (c) 2011-2013 Caleb Troughton
Dual licensed under the MIT license.
https://github.com/imakewebthings/deck.js/blob/master/MIT-license.txt
*/

html, body {
  height: 100%;
  padding: 0;
  margin: 0;
}

.deck-container {
  position: fixed;
  min-height: 100%;
  margin: 0 auto;
  overflow: hidden;
  overflow-y: auto;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: white;
  z-index: 9999;
  padding: 7%;
  /* Increase the font size */
  font-size: 165%;
  /* ...and add some wiki-like gradient */
  background: linear-gradient(to bottom, #ddd, white 3em);
}
.js .deck-container {
  visibility: hidden;
}
.ready .deck-container {
  visibility: visible;
}
.touch .deck-container {
  -webkit-text-size-adjust: none;
  -moz-text-size-adjust: none;
}

.deck-loading {
  display: none;
}

.slide {
  width: auto;
  min-height: 100%;
  position: relative;
}

.deck-before, .deck-previous, .deck-next, .deck-after {
  position: absolute;
  left: -999em;
  top: -999em;
}

.deck-current {
  z-index: 2;
}

.slide .slide {
  /* visibility: hidden; - moved to js */
  position: static;
  min-height: 0;
}

.deck-child-current {
  position: static;
  z-index: 2;
}
.deck-child-current .slide {
  visibility: hidden;
}
.deck-child-current .deck-previous, .deck-child-current .deck-before, .deck-child-current .deck-current {
  visibility: visible;
}

/* Transition theme:
   https://github.com/imakewebthings/deck.js/blob/22d426b418356a1fc9d8bdd46a2c0fc4504737a1/themes/transition/fade.css
 */
.csstransitions.csstransforms .deck-container .slide {
  -webkit-transition: opacity 500ms ease-in-out 0ms;
  transition: opacity 500ms ease-in-out 0ms;
}
.csstransitions.csstransforms .deck-container:not(.deck-menu) > .slide .slide {
  position: relative;
  left: 0;
  top: 0;
}
.csstransitions.csstransforms .deck-container:not(.deck-menu) > .slide .deck-next, .csstransitions.csstransforms .deck-container:not(.deck-menu) > .slide .deck-after {
  opacity: 0;
}
.csstransitions.csstransforms .deck-container:not(.deck-menu) > .slide .deck-current {
  opacity: 1;
}
.csstransitions.csstransforms .deck-container:not(.deck-menu) > .deck-previous, .csstransitions.csstransforms .deck-container:not(.deck-menu) > .deck-before, .csstransitions.csstransforms .deck-container:not(.deck-menu) > .deck-next, .csstransitions.csstransforms .deck-container:not(.deck-menu) > .deck-after {
  opacity: 0;
  pointer-events: none;
}
.csstransitions.csstransforms .deck-container:not(.deck-menu) > .deck-before .slide, .csstransitions.csstransforms .deck-container:not(.deck-menu) > .deck-previous .slide {
  visibility: visible;
}
.csstransitions.csstransforms .deck-container:not(.deck-menu) > .deck-child-current {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.csstransitions.csstransforms .deck-container:not(.deck-menu) > .deck-child-current .deck-next, .csstransitions.csstransforms .deck-container:not(.deck-menu) > .deck-child-current .deck-after {
  visibility: hidden;
}