Initial release

[Pictureviewer2.git] / Pictureviewer.css

/* Document */
html, body {
  margin:0;
  padding:0;
  width:100%;
  height:100%;
  background-color:black;
}

/* images */
img {
  display: block;
  margin: auto;
}

.imgFit {
  max-width: 100%;
  max-height: 100%;
  }

.imgFixedHeight {
  max-width: auto;
  height: 100%;
  }

.imgFixedWidth {
  width: 100%;
  max-height: auto;
  }

/* figures and caption */
figure{
  margin: 0 auto;
  position: relative; 
}

figure img {
  max-width: auto;
  height: 100%;
  }

img:hover ~ figcaption {
  opacity: 0.6;
  bottom: 0;
}
 
figcaption {
  position: absolute;
  bottom: 0;
  width: 100%;
  background: black;
  color: white;
  opacity: 0;
  text-align: center;
  transition: all 1s ease;
}

/* videos */
video { 
  height: 100%; 
  margin: 0 auto 0 auto; /* top, right, bottom, left: center with 1em below */
  display: block;
}

object {
  height: 100%; width: 90%;
  margin: 0 auto 0 auto; /* top, right, bottom, left: center with 1em below */
  display: block;
}

/* Text */
h1, h2, h3, h4, h5, h6 {
  text-align: center;
  color: #c0c0c0; 
}

h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child {
  margin: 0;
  height: 300px;
  line-height: 300px;
}

p {
  color: #c0c0c0; 
}

a {
  color: #c0c0c0; 
}