/* The Stupid Lightbox.
 * Copyright (c) 2015 Kaj Magnus Lindberg
 * License: The MIT license.
 */

.stupid-lightbox-overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 2000;
  background-color: black;
  opacity: 0.75;
  animation: stupid-lightbox-overlay-fadein 0.8s;
}

.stupid-lightbox-wrap {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 2010;

  /* This supposedly prevents problems with the image being placed on a half-pixel,
  see http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/  */
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;

  user-select: none;
}

.stupid-lightbox-image {
  max-width: 100%;
  max-height: 100%;
  /* Place the image in the middle of the browser window:
  (see  http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/ )*/
  position: relative;
  top: 50%;
  left: 50%;
  -webkit-transform: translateY(-50%) translateX(-50%);
  -ms-transform: translateY(-50%) translateX(-50%);
  transform: translateY(-50%) translateX(-50%);

  animation: stupid-lightbox-image-fadein 0.8s;
}

/* Without these fade-in animations, people sometimes think the image is on
 * a new web page on its own, and click the browser's Back button. */
@keyframes stupid-lightbox-image-fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes stupid-lightbox-overlay-fadein {
  from { opacity: 0; }
  to   { opacity: 0.75; }
}

/* vim: set fdm=marker et ts=2 sw=2 tw=0 fo=r list :*/
