react-photo-viewer/examples/src/example.css

Responsive React Masonry Photo Gallery Component

body {
	font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
	font-size: 14px;
	color: #333;
	margin: 0 auto;
	padding: 0;
}
.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */
.clearLeft{
    clear: left;
}
a {
	color: #08c;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

a:link {
    text-decoration: none;
}
a:hover {
    color: #ccc;
}
.container {
	margin: 0 auto;
}
h1, h2, h3 {
    color: #222;
    font-weight: 200;
    margin: 0 auto;
    margin-top: 10px;
    text-align: center;
}
h1{
    font-size: 35px;
    margin-top: 10px;
}
h2{
  margin: 15px 0 5px 0;
  font-weight: 400;
}
h2.header,.sub{
  text-align: center;
}
h3{
  margin: 5px 0 5px 0;
}
header h3{
    text-align: center;
}
p{
  margin: 10px;
}
iframe{
    margin: 0 auto;
    margin-top: 10px;
    display: block;
    width: 85px;
}
.react-photo-gallery--gallery{
  margin-bottom: 15px;
}
.App{
    padding-top: 28px;
    margin: 0; 
}
.loading-msg{
    font-size: 20px;
    font-weight: 200;
    color: #666;
    width: 130px;
    margin: 0 auto;
}

.loading-msg:after {
  overflow: hidden;
  display: inline-block;
  vertical-align: middle;
  padding-bottom: 10px;
  -webkit-animation: ellipsis steps(4,end) 900ms infinite;      
  animation: ellipsis steps(4,end) 900ms infinite;
  content: "\2026"; /* ascii code for the ellipsis character */
  width: 0px;
}
#react-images-container{
 background-color: rgba(0,0,0,0.9);
}
.toggle-select {
  background: #06befa;
  background-image: linear-gradient(to bottom, #06befa, #2980b9);
  border-radius: 3px;
  border: 0;
  font-family: Arial;
  color: #ffffff;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
}
.toggle-select:hover {
  background: #06befa;
  background-image: linear-gradient(to bottom, #06befa, #3498db);
  text-decoration: none;
}
@keyframes ellipsis {
  to {
    width: 1.25em;    
  }
}

@-webkit-keyframes ellipsis {
  to {
    width: 1.25em;    
  }
}
#msg-app-loading{
    margin-top: 60px;
}
#msg-loading-more{
    text-decoration: none;
    display: block;
    margin-top: 10px;
}
@media only screen and (min-width: 800px) {
  .App{
    margin: 0 70px;
  }
  h2, h3{
    text-align: left;
  }
}