132 lines
3.2 KiB
CSS
Executable File
132 lines
3.2 KiB
CSS
Executable File
/* Start: Recommended Isotope styles */
|
|
|
|
/**** Isotope Filtering ****/
|
|
|
|
|
|
.isotope-item {
|
|
z-index: 2;
|
|
}
|
|
|
|
.isotope-hidden.isotope-item {
|
|
pointer-events: none;
|
|
z-index: 1;
|
|
}
|
|
|
|
/**** Isotope CSS3 transitions ****/
|
|
|
|
.isotope,
|
|
.isotope .isotope-item {
|
|
-webkit-transition-duration: 0.8s;
|
|
-moz-transition-duration: 0.8s;
|
|
-ms-transition-duration: 0.8s;
|
|
-o-transition-duration: 0.8s;
|
|
transition-duration: 0.8s;
|
|
}
|
|
|
|
.isotope {
|
|
-webkit-transition-property: height, width;
|
|
-moz-transition-property: height, width;
|
|
-ms-transition-property: height, width;
|
|
-o-transition-property: height, width;
|
|
transition-property: height, width;
|
|
}
|
|
|
|
.isotope .isotope-item {
|
|
-webkit-transition-property: -webkit-transform, opacity;
|
|
-moz-transition-property: -moz-transform, opacity;
|
|
-ms-transition-property: -ms-transform, opacity;
|
|
-o-transition-property: -o-transform, opacity;
|
|
transition-property: transform, opacity;
|
|
}
|
|
|
|
/**** disabling Isotope CSS3 transitions ****/
|
|
|
|
.isotope.no-transition,
|
|
.isotope.no-transition .isotope-item,
|
|
.isotope .isotope-item.no-transition {
|
|
-webkit-transition-duration: 0s;
|
|
-moz-transition-duration: 0s;
|
|
-ms-transition-duration: 0s;
|
|
-o-transition-duration: 0s;
|
|
transition-duration: 0s;
|
|
}
|
|
|
|
/* End: Recommended Isotope styles */
|
|
|
|
|
|
|
|
/* disable CSS transitions for containers with infinite scrolling*/
|
|
.isotope.infinite-scrolling {
|
|
-webkit-transition: none;
|
|
-moz-transition: none;
|
|
-ms-transition: none;
|
|
-o-transition: none;
|
|
transition: none;
|
|
}
|
|
|
|
|
|
/**** Base styles ****/
|
|
|
|
#container {
|
|
margin: 20px;
|
|
}
|
|
|
|
.element {
|
|
width: 110px;
|
|
height: 110px;
|
|
margin: 5px;
|
|
float: left;
|
|
overflow: hidden;
|
|
position: relative;
|
|
background: #888;
|
|
color: #222;
|
|
-webkit-border-top-right-radius: 1.2em;
|
|
-moz-border-radius-topright: 1.2em;
|
|
border-top-right-radius: 1.2em;
|
|
}
|
|
|
|
.element.alkali { background: #F00; background: hsl( 0, 100%, 50%); }
|
|
.element.alkaline-earth { background: #F80; background: hsl( 36, 100%, 50%); }
|
|
.element.lanthanoid { background: #FF0; background: hsl( 72, 100%, 50%); }
|
|
.element.actinoid { background: #0F0; background: hsl( 108, 100%, 50%); }
|
|
.element.transition { background: #0F8; background: hsl( 144, 100%, 50%); }
|
|
.element.post-transition { background: #0FF; background: hsl( 180, 100%, 50%); }
|
|
.element.metalloid { background: #08F; background: hsl( 216, 100%, 50%); }
|
|
.element.other.nonmetal { background: #00F; background: hsl( 252, 100%, 50%); }
|
|
.element.halogen { background: #F0F; background: hsl( 288, 100%, 50%); }
|
|
.element.noble-gas { background: #F08; background: hsl( 324, 100%, 50%); }
|
|
|
|
|
|
.element * {
|
|
position: absolute;
|
|
margin: 0;
|
|
}
|
|
|
|
.element .symbol {
|
|
left: 0.2em;
|
|
top: 0.4em;
|
|
font-size: 3.8em;
|
|
line-height: 1.0em;
|
|
color: #FFF;
|
|
}
|
|
|
|
/**** Infinite Scroll ****/
|
|
|
|
#infscr-loading {
|
|
position: fixed;
|
|
text-align: center;
|
|
bottom: 30px;
|
|
left: 42%;
|
|
z-index: 100;
|
|
background: white;
|
|
background: hsla( 0, 0%, 100%, 0.9 );
|
|
padding: 20px;
|
|
color: #222;
|
|
font-size: 15px;
|
|
font-weight: bold;
|
|
-webkit-border-radius: 10px;
|
|
-moz-border-radius: 10px;
|
|
border-radius: 10px;
|
|
}
|
|
|