ui-elements.css

/* 
* EasUI | A simple & lovely responsive CSS framework.
* ----------------------------------------------------------
* https://github.com/interwebstars/EASUI
* ----------------------------------------------------------
*
* Made by : Interwebstars (https://github.com/interwebstars)
* Licensed under MIT
* 
* ui-elements.css
*/

/* Titles */
.title{
  letter-spacing:.15em;
}
.title--bold{
    font-weight:bold;
}
/* Titles : colors */
.title--primary{
  color:#16a085
}
.title--blue{
  color:#2980b9
}
.title--green{
  color:#27ae60
}
.title--red{
  color:#c0392b
}
.title--yellow{
  color:#f39c12
}
.title--orange{
  color:#d35400
}
.title--purple{
  color:#8e44ad
}
.title--black{
  color: #2c3e50
}
.title--white{
  color:#ffffff; /* Previously #bdc3c7 */
}
/* LABELS */
.label{
  font-size:.8em;
  font-weight:500;
  color:#fff;
  padding:.2em .4em;
  margin:auto .2em;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.10);
  text-shadow:0 1px 0 rgba(0, 0, 0, .15);
  background:#ccc;
  border-radius:3px;
}
.label.label--cursor{
  cursor:pointer
}
.label.label--rounded{
  border-radius: 1em;
  padding:.35em
}
.label.label--green{
  background:#2ecc71;
  text-shadow:0 1px 0 rgba(0, 0, 0, .15);
}
.label.label--warning{
  background:#f4d871;
  text-shadow:0 1px 0 rgba(0, 0, 0, .15);
}
.label.label--error{
  background:#f47771;
  text-shadow:0 1px 0 rgba(0, 0, 0, .15);
}

.label.label--blue{
  background:#3498db;
  text-shadow:0 1px 0 rgba(0, 0, 0, .15);
}
.label.label--black{
  background:#2c3e50;
  text-shadow:0 1px 0 rgba(0, 0, 0, .8);
}

.label--hover--blue:hover{
  background:#3498db;
}
.label--hover--green:hover{
  background:#2ecc71;
}
.label--hover--yellow:hover{
  background:#f4d871;
}
.label--hover--red:hover{
  background:#f47771;
}
.label--hover--black:hover{
  background:#2c3e50;
}
img.border{
padding:.3em;
border:.1em solid #d6d6d6;
}
/* Bordered @_kevinatari*/
  .bordered img{
display:block;
padding:.4em;
background:#ecf0f1;
margin:2.4em auto;
border:.1em solid #d6d6d6;
}
/* Border */
  img.smooth{
/*border-radius*/
-webkit-border-radius:.25em;
   -moz-border-radius:.25em;
        border-radius:.25em;
}
/* rounded */
img.rounded{
/*border-radius*/
-webkit-border-radius:100%;
   -moz-border-radius:100%;
        border-radius:100%;
}
/* Big */
img.big{
/**/
margin:auto 4%;
*margin:auto 4%;
width:92%;
/* Depend of the width of the parent element */
}
img.big + img.big{
margin:1em auto;
}
/* Wide */
img.wide{
/**/
margin:0 -1.2%;
width:102.4%;
/* Depend of the width of the parent element */
}
img.wide + img.wide{
margin:1em -1.2%;
}
/* cover*/ 
.img-cover{
width:8em;
height:auto;
display:block;
overflow:hidden;
cursor:pointer;
/**/
margin:auto;
}
.img-cover img{
width:100%;
}
.img-cover .cover{
display:block;
margin:auto;
/* You have to set the same width as the .img-cover*/
width:8em;
height:8em;
background:rgba(0,0,0,.65);
position:absolute;
/*transition*/
-webkit-transition:opacity .2s ease;
   -moz-transition:opacity .2s ease;
     -o-transition:opacity .2s ease;
        transition:opacity .2s ease;
}
.img-cover.blue .cover{
background:rgba(52,152,219,.65);
}
.img-cover.red .cover{
background:rgba(231,76,60,.65);
}
.img-cover.green .cover{
background:rgba(46,204,113,.65);
}
.img-cover:hover .cover,
  .img-cover:active .cover{
opacity:0;
}
.img-cover.rounded{
/*border-radius*/
-webkit-border-radius:100%;
   -moz-border-radius:100%;
        border-radius:100%;
}
.img-cover.rounded .cover{
/*border-radius*/
-webkit-border-radius:100%;
   -moz-border-radius:100%;
        border-radius:100%;
}
.img-cover.rounded img{
/*border-radius*/
-webkit-border-radius:100%;
   -moz-border-radius:100%;
        border-radius:100%;
}
.img-cover.smooth{
/*border-radius*/
-webkit-border-radius:.25em;
   -moz-border-radius:.25em;
        border-radius:.25em;
}
.img-cover.smooth .cover{
/*border-radius*/
-webkit-border-radius:.25em;
   -moz-border-radius:.25em;
        border-radius:.25em;
}
.img-cover.smooth img{
/*border-radius*/
-webkit-border-radius:.25em;
   -moz-border-radius:.25em;
        border-radius:.25em;
}
.img-cover.mention{
}
.img-cover.mention .cover{
text-align:center;
color:#fff;
line-height:8;
}
@media (max-width: 50em){
.img-cover .cover{
display:none;
}
}