232 lines
5.5 KiB
CSS
232 lines
5.5 KiB
CSS
/*========================================================
|
|
DARK LAYOUT
|
|
=========================================================*/
|
|
@-webkit-keyframes ball-grid-pulse
|
|
{
|
|
0%
|
|
{
|
|
-webkit-transform: scale(1);
|
|
transform: scale(1);
|
|
}
|
|
50%
|
|
{
|
|
-webkit-transform: scale(.5);
|
|
transform: scale(.5);
|
|
|
|
opacity: .7;
|
|
}
|
|
100%
|
|
{
|
|
-webkit-transform: scale(1);
|
|
transform: scale(1);
|
|
|
|
opacity: 1;
|
|
}
|
|
}
|
|
@-moz-keyframes ball-grid-pulse
|
|
{
|
|
0%
|
|
{
|
|
-moz-transform: scale(1);
|
|
transform: scale(1);
|
|
}
|
|
50%
|
|
{
|
|
-moz-transform: scale(.5);
|
|
transform: scale(.5);
|
|
|
|
opacity: .7;
|
|
}
|
|
100%
|
|
{
|
|
-moz-transform: scale(1);
|
|
transform: scale(1);
|
|
|
|
opacity: 1;
|
|
}
|
|
}
|
|
@-o-keyframes ball-grid-pulse
|
|
{
|
|
0%
|
|
{
|
|
-o-transform: scale(1);
|
|
transform: scale(1);
|
|
}
|
|
50%
|
|
{
|
|
-o-transform: scale(.5);
|
|
transform: scale(.5);
|
|
|
|
opacity: .7;
|
|
}
|
|
100%
|
|
{
|
|
-o-transform: scale(1);
|
|
transform: scale(1);
|
|
|
|
opacity: 1;
|
|
}
|
|
}
|
|
@keyframes ball-grid-pulse
|
|
{
|
|
0%
|
|
{
|
|
-webkit-transform: scale(1);
|
|
-moz-transform: scale(1);
|
|
-o-transform: scale(1);
|
|
transform: scale(1);
|
|
}
|
|
50%
|
|
{
|
|
-webkit-transform: scale(.5);
|
|
-moz-transform: scale(.5);
|
|
-o-transform: scale(.5);
|
|
transform: scale(.5);
|
|
|
|
opacity: .7;
|
|
}
|
|
100%
|
|
{
|
|
-webkit-transform: scale(1);
|
|
-moz-transform: scale(1);
|
|
-o-transform: scale(1);
|
|
transform: scale(1);
|
|
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.ball-grid-pulse
|
|
{
|
|
width: 57px;
|
|
}
|
|
.ball-grid-pulse > div:nth-child(1)
|
|
{
|
|
-webkit-animation-duration: 1.12s;
|
|
-moz-animation-duration: 1.12s;
|
|
-o-animation-duration: 1.12s;
|
|
animation-duration: 1.12s;
|
|
-webkit-animation-delay: .34s;
|
|
-moz-animation-delay: .34s;
|
|
-o-animation-delay: .34s;
|
|
animation-delay: .34s;
|
|
}
|
|
.ball-grid-pulse > div:nth-child(2)
|
|
{
|
|
-webkit-animation-duration: 1.42s;
|
|
-moz-animation-duration: 1.42s;
|
|
-o-animation-duration: 1.42s;
|
|
animation-duration: 1.42s;
|
|
-webkit-animation-delay: .59s;
|
|
-moz-animation-delay: .59s;
|
|
-o-animation-delay: .59s;
|
|
animation-delay: .59s;
|
|
}
|
|
.ball-grid-pulse > div:nth-child(3)
|
|
{
|
|
-webkit-animation-duration: 1.17s;
|
|
-moz-animation-duration: 1.17s;
|
|
-o-animation-duration: 1.17s;
|
|
animation-duration: 1.17s;
|
|
-webkit-animation-delay: .3s;
|
|
-moz-animation-delay: .3s;
|
|
-o-animation-delay: .3s;
|
|
animation-delay: .3s;
|
|
}
|
|
.ball-grid-pulse > div:nth-child(4)
|
|
{
|
|
-webkit-animation-duration: 1.49s;
|
|
-moz-animation-duration: 1.49s;
|
|
-o-animation-duration: 1.49s;
|
|
animation-duration: 1.49s;
|
|
-webkit-animation-delay: .07s;
|
|
-moz-animation-delay: .07s;
|
|
-o-animation-delay: .07s;
|
|
animation-delay: .07s;
|
|
}
|
|
.ball-grid-pulse > div:nth-child(5)
|
|
{
|
|
-webkit-animation-duration: .79s;
|
|
-moz-animation-duration: .79s;
|
|
-o-animation-duration: .79s;
|
|
animation-duration: .79s;
|
|
-webkit-animation-delay: .6s;
|
|
-moz-animation-delay: .6s;
|
|
-o-animation-delay: .6s;
|
|
animation-delay: .6s;
|
|
}
|
|
.ball-grid-pulse > div:nth-child(6)
|
|
{
|
|
-webkit-animation-duration: 1.12s;
|
|
-moz-animation-duration: 1.12s;
|
|
-o-animation-duration: 1.12s;
|
|
animation-duration: 1.12s;
|
|
-webkit-animation-delay: -.01s;
|
|
-moz-animation-delay: -.01s;
|
|
-o-animation-delay: -.01s;
|
|
animation-delay: -.01s;
|
|
}
|
|
.ball-grid-pulse > div:nth-child(7)
|
|
{
|
|
-webkit-animation-duration: 1.39s;
|
|
-moz-animation-duration: 1.39s;
|
|
-o-animation-duration: 1.39s;
|
|
animation-duration: 1.39s;
|
|
-webkit-animation-delay: .46s;
|
|
-moz-animation-delay: .46s;
|
|
-o-animation-delay: .46s;
|
|
animation-delay: .46s;
|
|
}
|
|
.ball-grid-pulse > div:nth-child(8)
|
|
{
|
|
-webkit-animation-duration: 1.21s;
|
|
-moz-animation-duration: 1.21s;
|
|
-o-animation-duration: 1.21s;
|
|
animation-duration: 1.21s;
|
|
-webkit-animation-delay: -.09s;
|
|
-moz-animation-delay: -.09s;
|
|
-o-animation-delay: -.09s;
|
|
animation-delay: -.09s;
|
|
}
|
|
.ball-grid-pulse > div:nth-child(9)
|
|
{
|
|
-webkit-animation-duration: 1.45s;
|
|
-moz-animation-duration: 1.45s;
|
|
-o-animation-duration: 1.45s;
|
|
animation-duration: 1.45s;
|
|
-webkit-animation-delay: .31s;
|
|
-moz-animation-delay: .31s;
|
|
-o-animation-delay: .31s;
|
|
animation-delay: .31s;
|
|
}
|
|
.ball-grid-pulse > div
|
|
{
|
|
display: inline-block;
|
|
float: left;
|
|
|
|
width: 15px;
|
|
height: 15px;
|
|
margin: 2px;
|
|
|
|
-webkit-animation-name: ball-grid-pulse;
|
|
-moz-animation-name: ball-grid-pulse;
|
|
-o-animation-name: ball-grid-pulse;
|
|
animation-name: ball-grid-pulse;
|
|
-webkit-animation-delay: 0;
|
|
-moz-animation-delay: 0;
|
|
-o-animation-delay: 0;
|
|
animation-delay: 0;
|
|
-webkit-animation-iteration-count: infinite;
|
|
-moz-animation-iteration-count: infinite;
|
|
-o-animation-iteration-count: infinite;
|
|
animation-iteration-count: infinite;
|
|
|
|
border-radius: 100%;
|
|
background-color: #b8c2cc;
|
|
|
|
-webkit-animation-fill-mode: both;
|
|
-moz-animation-fill-mode: both;
|
|
-o-animation-fill-mode: both;
|
|
animation-fill-mode: both;
|
|
}
|