Difference between revisions of "Template:Cologne-Duesseldorf/css"

Line 208: Line 208:
 
   height: auto;
 
   height: auto;
 
   max-width: 100%;
 
   max-width: 100%;
 +
}
 +
 +
body {
 +
  background: #333;
 +
  padding: 0;
 +
  margin: 0;
 +
}
 +
 +
* {
 +
  box-sizing: border-box;
 +
}
 +
 +
.flex {
 +
  display: flex;
 +
}
 +
 +
.flex-gallery {
 +
  display: flex;
 +
  flex-flow: row wrap;
 +
  justify-content: flex-start;
 +
}
 +
 +
.flex-gallery a {
 +
  margin: 10px;
 +
}
 +
 +
.flex-gallery a img {
 +
  width: 200px;
 +
  height: auto;
 +
  filter: grayscale(100%);
 +
  transition: all 0.5s ease;
 +
}
 +
 +
.flex-gallery a img:hover {
 +
  filter: grayscale(0%);
 +
}
 +
 +
.modalDialog {
 +
  position: fixed;
 +
  top: 0;
 +
  right: 0;
 +
  bottom: 0;
 +
  left: 0;
 +
  background: rgba(0, 0, 0, 0.8);
 +
  z-index: 99999;
 +
  opacity: 0;
 +
  transition: opacity 400ms ease-in;
 +
  pointer-events: none;
 +
}
 +
 +
.modalDialog:target {
 +
  opacity: 1;
 +
  pointer-events: auto;
 +
}
 +
 +
.modalDialog > .flex{
 +
  flex-flow: row wrap;
 +
}
 +
 +
.modalDialog>div {
 +
  position: absolute;
 +
  width: 90%;
 +
  top: 5%;
 +
  left: 5%;
 +
  border-radius: 20px;
 +
  background: #fff;
 +
  padding: 25px;
 +
}
 +
 +
.close {
 +
  background: #000;
 +
  color: #FFFFFF;
 +
  line-height: 25px;
 +
  position: absolute;
 +
  right: -12px;
 +
  text-align: center;
 +
  top: -10px;
 +
  width: 24px;
 +
  text-decoration: none;
 +
  font-weight: bold;
 +
  border-radius: 12px;
 +
  box-shadow: 1px 1px 3px #000;
 +
}
 +
 +
.close:hover {
 +
  background: #149375;
 
}
 
}
  

Revision as of 21:33, 4 June 2017