Pictureviewer.css

   1 /* Document */
   2 html, body {
   3   margin:0;
   4   padding:0;
   5   width:100%;
   6   height:100%;
   7   background-color:black;
   8 }
   9
  10 /* images */
  11 img {
  12   display: block;
  13   margin: auto;
  14 }
  15
  16 .imgFit {
  17   max-width: 100%;
  18   max-height: 100%;
  19   }
  20
  21 .imgFixedHeight {
  22   max-width: auto;
  23   height: 100%;
  24   }
  25
  26 .imgFixedWidth {
  27   width: 100%;
  28   max-height: auto;
  29   }
  30
  31 /* figures and caption */
  32 figure{
  33   margin: 0 auto;
  34   position: relative;
  35 }
  36
  37 figure img {
  38   max-width: auto;
  39   height: 100%;
  40   }
  41
  42 img:hover ~ figcaption {
  43   opacity: 0.6;
  44   bottom: 0;
  45 }
  46
  47 figcaption {
  48   position: absolute;
  49   bottom: 0;
  50   width: 100%;
  51   background: black;
  52   color: white;
  53   opacity: 0;
  54   text-align: center;
  55   transition: all 1s ease;
  56 }
  57
  58 /* videos */
  59 video {
  60   height: 100%;
  61   margin: 0 auto 0 auto; /* top, right, bottom, left: center with 1em below */
  62   display: block;
  63 }
  64
  65 object {
  66   height: 100%; width: 90%;
  67   margin: 0 auto 0 auto; /* top, right, bottom, left: center with 1em below */
  68   display: block;
  69 }
  70
  71 /* Text */
  72 h1, h2, h3, h4, h5, h6 {
  73   text-align: center;
  74   color: #c0c0c0;
  75 }
  76
  77 h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child {
  78   margin: 0;
  79   height: 300px;
  80   line-height: 300px;
  81 }
  82
  83 p {
  84   color: #c0c0c0;
  85 }
  86
  87 a {
  88   color: #c0c0c0;
  89 }