restore composer.json, add mysqli extension

This commit is contained in:
2026-04-15 17:02:52 +05:00
commit 77cf56a348
4317 changed files with 1397107 additions and 0 deletions

View File

@@ -0,0 +1,104 @@
/*========================================================
DARK LAYOUT
=========================================================*/
@-webkit-keyframes ball-beat
{
50%
{
-webkit-transform: scale(.75);
transform: scale(.75);
opacity: .2;
}
100%
{
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
}
@-moz-keyframes ball-beat
{
50%
{
-moz-transform: scale(.75);
transform: scale(.75);
opacity: .2;
}
100%
{
-moz-transform: scale(1);
transform: scale(1);
opacity: 1;
}
}
@-o-keyframes ball-beat
{
50%
{
-o-transform: scale(.75);
transform: scale(.75);
opacity: .2;
}
100%
{
-o-transform: scale(1);
transform: scale(1);
opacity: 1;
}
}
@keyframes ball-beat
{
50%
{
-webkit-transform: scale(.75);
-moz-transform: scale(.75);
-o-transform: scale(.75);
transform: scale(.75);
opacity: .2;
}
100%
{
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
opacity: 1;
}
}
.ball-beat > div
{
display: inline-block;
width: 15px;
height: 15px;
margin: 2px;
-webkit-animation: ball-beat .7s 0s infinite linear;
-moz-animation: ball-beat .7s 0s infinite linear;
-o-animation: ball-beat .7s 0s infinite linear;
animation: ball-beat .7s 0s infinite linear;
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;
}
.ball-beat > div:nth-child(2n-1)
{
-webkit-animation-delay: -.35s !important;
-moz-animation-delay: -.35s !important;
-o-animation-delay: -.35s !important;
animation-delay: -.35s !important;
}

View File

@@ -0,0 +1 @@
@-webkit-keyframes ball-beat{50%{-webkit-transform:scale(.75);transform:scale(.75);opacity:.2}100%{-webkit-transform:scale(1);transform:scale(1);opacity:1}}@-moz-keyframes ball-beat{50%{-moz-transform:scale(.75);transform:scale(.75);opacity:.2}100%{-moz-transform:scale(1);transform:scale(1);opacity:1}}@-o-keyframes ball-beat{50%{-o-transform:scale(.75);transform:scale(.75);opacity:.2}100%{-o-transform:scale(1);transform:scale(1);opacity:1}}@keyframes ball-beat{50%{-webkit-transform:scale(.75);-moz-transform:scale(.75);-o-transform:scale(.75);transform:scale(.75);opacity:.2}100%{-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);transform:scale(1);opacity:1}}.ball-beat>div{display:inline-block;width:15px;height:15px;margin:2px;-webkit-animation:ball-beat .7s 0s infinite linear;-moz-animation:ball-beat .7s 0s infinite linear;-o-animation:ball-beat .7s 0s infinite linear;animation:ball-beat .7s 0s infinite linear;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}.ball-beat>div:nth-child(2n-1){-webkit-animation-delay:-.35s!important;-moz-animation-delay:-.35s!important;-o-animation-delay:-.35s!important;animation-delay:-.35s!important}

View File

@@ -0,0 +1,128 @@
/*========================================================
DARK LAYOUT
=========================================================*/
@-webkit-keyframes rotate
{
0%
{
-webkit-transform: rotate(0deg) scale(1);
transform: rotate(0deg) scale(1);
}
50%
{
-webkit-transform: rotate(180deg) scale(.6);
transform: rotate(180deg) scale(.6);
}
100%
{
-webkit-transform: rotate(360deg) scale(1);
transform: rotate(360deg) scale(1);
}
}
@-moz-keyframes rotate
{
0%
{
-moz-transform: rotate(0deg) scale(1);
transform: rotate(0deg) scale(1);
}
50%
{
-moz-transform: rotate(180deg) scale(.6);
transform: rotate(180deg) scale(.6);
}
100%
{
-moz-transform: rotate(360deg) scale(1);
transform: rotate(360deg) scale(1);
}
}
@-o-keyframes rotate
{
0%
{
-o-transform: rotate(0deg) scale(1);
transform: rotate(0deg) scale(1);
}
50%
{
-o-transform: rotate(180deg) scale(.6);
transform: rotate(180deg) scale(.6);
}
100%
{
-o-transform: rotate(360deg) scale(1);
transform: rotate(360deg) scale(1);
}
}
@keyframes rotate
{
0%
{
-webkit-transform: rotate(0deg) scale(1);
-moz-transform: rotate(0deg) scale(1);
-o-transform: rotate(0deg) scale(1);
transform: rotate(0deg) scale(1);
}
50%
{
-webkit-transform: rotate(180deg) scale(.6);
-moz-transform: rotate(180deg) scale(.6);
-o-transform: rotate(180deg) scale(.6);
transform: rotate(180deg) scale(.6);
}
100%
{
-webkit-transform: rotate(360deg) scale(1);
-moz-transform: rotate(360deg) scale(1);
-o-transform: rotate(360deg) scale(1);
transform: rotate(360deg) scale(1);
}
}
.ball-clip-rotate-multiple
{
position: relative;
}
.ball-clip-rotate-multiple > div
{
position: absolute;
top: -20px;
left: -20px;
width: 35px;
height: 35px;
-webkit-animation: rotate 1s 0s ease-in-out infinite;
-moz-animation: rotate 1s 0s ease-in-out infinite;
-o-animation: rotate 1s 0s ease-in-out infinite;
animation: rotate 1s 0s ease-in-out infinite;
border: 2px solid #b8c2cc;
border-top-color: transparent;
border-bottom-color: transparent;
border-radius: 100%;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
}
.ball-clip-rotate-multiple > div:last-child
{
top: -10px;
left: -10px;
display: inline-block;
width: 15px;
height: 15px;
-webkit-animation-duration: .5s;
-moz-animation-duration: .5s;
-o-animation-duration: .5s;
animation-duration: .5s;
animation-direction: reverse;
border-color: #b8c2cc transparent #b8c2cc transparent;
}

View File

@@ -0,0 +1 @@
@-webkit-keyframes rotate{0%{-webkit-transform:rotate(0) scale(1);transform:rotate(0) scale(1)}50%{-webkit-transform:rotate(180deg) scale(.6);transform:rotate(180deg) scale(.6)}100%{-webkit-transform:rotate(360deg) scale(1);transform:rotate(360deg) scale(1)}}@-moz-keyframes rotate{0%{-moz-transform:rotate(0) scale(1);transform:rotate(0) scale(1)}50%{-moz-transform:rotate(180deg) scale(.6);transform:rotate(180deg) scale(.6)}100%{-moz-transform:rotate(360deg) scale(1);transform:rotate(360deg) scale(1)}}@-o-keyframes rotate{0%{-o-transform:rotate(0) scale(1);transform:rotate(0) scale(1)}50%{-o-transform:rotate(180deg) scale(.6);transform:rotate(180deg) scale(.6)}100%{-o-transform:rotate(360deg) scale(1);transform:rotate(360deg) scale(1)}}@keyframes rotate{0%{-webkit-transform:rotate(0) scale(1);-moz-transform:rotate(0) scale(1);-o-transform:rotate(0) scale(1);transform:rotate(0) scale(1)}50%{-webkit-transform:rotate(180deg) scale(.6);-moz-transform:rotate(180deg) scale(.6);-o-transform:rotate(180deg) scale(.6);transform:rotate(180deg) scale(.6)}100%{-webkit-transform:rotate(360deg) scale(1);-moz-transform:rotate(360deg) scale(1);-o-transform:rotate(360deg) scale(1);transform:rotate(360deg) scale(1)}}.ball-clip-rotate-multiple{position:relative}.ball-clip-rotate-multiple>div{position:absolute;top:-20px;left:-20px;width:35px;height:35px;-webkit-animation:rotate 1s 0s ease-in-out infinite;-moz-animation:rotate 1s 0s ease-in-out infinite;-o-animation:rotate 1s 0s ease-in-out infinite;animation:rotate 1s 0s ease-in-out infinite;border:2px solid #b8c2cc;border-top-color:transparent;border-bottom-color:transparent;border-radius:100%;-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both}.ball-clip-rotate-multiple>div:last-child{top:-10px;left:-10px;display:inline-block;width:15px;height:15px;-webkit-animation-duration:.5s;-moz-animation-duration:.5s;-o-animation-duration:.5s;animation-duration:.5s;animation-direction:reverse;border-color:#b8c2cc transparent}

View File

@@ -0,0 +1,203 @@
/*========================================================
DARK LAYOUT
=========================================================*/
@-webkit-keyframes rotate
{
0%
{
-webkit-transform: rotate(0deg) scale(1);
transform: rotate(0deg) scale(1);
}
50%
{
-webkit-transform: rotate(180deg) scale(.6);
transform: rotate(180deg) scale(.6);
}
100%
{
-webkit-transform: rotate(360deg) scale(1);
transform: rotate(360deg) scale(1);
}
}
@-moz-keyframes rotate
{
0%
{
-moz-transform: rotate(0deg) scale(1);
transform: rotate(0deg) scale(1);
}
50%
{
-moz-transform: rotate(180deg) scale(.6);
transform: rotate(180deg) scale(.6);
}
100%
{
-moz-transform: rotate(360deg) scale(1);
transform: rotate(360deg) scale(1);
}
}
@-o-keyframes rotate
{
0%
{
-o-transform: rotate(0deg) scale(1);
transform: rotate(0deg) scale(1);
}
50%
{
-o-transform: rotate(180deg) scale(.6);
transform: rotate(180deg) scale(.6);
}
100%
{
-o-transform: rotate(360deg) scale(1);
transform: rotate(360deg) scale(1);
}
}
@keyframes rotate
{
0%
{
-webkit-transform: rotate(0deg) scale(1);
-moz-transform: rotate(0deg) scale(1);
-o-transform: rotate(0deg) scale(1);
transform: rotate(0deg) scale(1);
}
50%
{
-webkit-transform: rotate(180deg) scale(.6);
-moz-transform: rotate(180deg) scale(.6);
-o-transform: rotate(180deg) scale(.6);
transform: rotate(180deg) scale(.6);
}
100%
{
-webkit-transform: rotate(360deg) scale(1);
-moz-transform: rotate(360deg) scale(1);
-o-transform: rotate(360deg) scale(1);
transform: rotate(360deg) scale(1);
}
}
@-webkit-keyframes scale
{
30%
{
-webkit-transform: scale(.3);
transform: scale(.3);
}
100%
{
-webkit-transform: scale(1);
transform: scale(1);
}
}
@-moz-keyframes scale
{
30%
{
-moz-transform: scale(.3);
transform: scale(.3);
}
100%
{
-moz-transform: scale(1);
transform: scale(1);
}
}
@-o-keyframes scale
{
30%
{
-o-transform: scale(.3);
transform: scale(.3);
}
100%
{
-o-transform: scale(1);
transform: scale(1);
}
}
@keyframes scale
{
30%
{
-webkit-transform: scale(.3);
-moz-transform: scale(.3);
-o-transform: scale(.3);
transform: scale(.3);
}
100%
{
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
}
.ball-clip-rotate-pulse
{
position: relative;
-webkit-transform: translateY(-15px);
-moz-transform: translateY(-15px);
-ms-transform: translateY(-15px);
-o-transform: translateY(-15px);
transform: translateY(-15px);
}
.ball-clip-rotate-pulse > div
{
position: absolute;
top: 0;
left: 0;
border-radius: 100%;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
}
.ball-clip-rotate-pulse > div:first-child
{
top: 7px;
left: -7px;
width: 16px;
height: 16px;
-webkit-animation: scale 1s 0s cubic-bezier(.09, .57, .49, .9) infinite;
-moz-animation: scale 1s 0s cubic-bezier(.09, .57, .49, .9) infinite;
-o-animation: scale 1s 0s cubic-bezier(.09, .57, .49, .9) infinite;
animation: scale 1s 0s cubic-bezier(.09, .57, .49, .9) infinite;
background: #b8c2cc;
}
.ball-clip-rotate-pulse > div:last-child
{
position: absolute;
top: -2px;
left: -16px;
width: 30px;
height: 30px;
-webkit-animation: rotate 1s 0s cubic-bezier(.09, .57, .49, .9) infinite;
-moz-animation: rotate 1s 0s cubic-bezier(.09, .57, .49, .9) infinite;
-o-animation: rotate 1s 0s cubic-bezier(.09, .57, .49, .9) infinite;
animation: rotate 1s 0s cubic-bezier(.09, .57, .49, .9) infinite;
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-o-animation-duration: 1s;
animation-duration: 1s;
border: 2px solid #b8c2cc;
border: 2px solid;
border-color: #b8c2cc transparent #b8c2cc transparent;
background: transparent;
}

View File

@@ -0,0 +1 @@
@-webkit-keyframes rotate{0%{-webkit-transform:rotate(0) scale(1);transform:rotate(0) scale(1)}50%{-webkit-transform:rotate(180deg) scale(.6);transform:rotate(180deg) scale(.6)}100%{-webkit-transform:rotate(360deg) scale(1);transform:rotate(360deg) scale(1)}}@-moz-keyframes rotate{0%{-moz-transform:rotate(0) scale(1);transform:rotate(0) scale(1)}50%{-moz-transform:rotate(180deg) scale(.6);transform:rotate(180deg) scale(.6)}100%{-moz-transform:rotate(360deg) scale(1);transform:rotate(360deg) scale(1)}}@-o-keyframes rotate{0%{-o-transform:rotate(0) scale(1);transform:rotate(0) scale(1)}50%{-o-transform:rotate(180deg) scale(.6);transform:rotate(180deg) scale(.6)}100%{-o-transform:rotate(360deg) scale(1);transform:rotate(360deg) scale(1)}}@keyframes rotate{0%{-webkit-transform:rotate(0) scale(1);-moz-transform:rotate(0) scale(1);-o-transform:rotate(0) scale(1);transform:rotate(0) scale(1)}50%{-webkit-transform:rotate(180deg) scale(.6);-moz-transform:rotate(180deg) scale(.6);-o-transform:rotate(180deg) scale(.6);transform:rotate(180deg) scale(.6)}100%{-webkit-transform:rotate(360deg) scale(1);-moz-transform:rotate(360deg) scale(1);-o-transform:rotate(360deg) scale(1);transform:rotate(360deg) scale(1)}}@-webkit-keyframes scale{30%{-webkit-transform:scale(.3);transform:scale(.3)}100%{-webkit-transform:scale(1);transform:scale(1)}}@-moz-keyframes scale{30%{-moz-transform:scale(.3);transform:scale(.3)}100%{-moz-transform:scale(1);transform:scale(1)}}@-o-keyframes scale{30%{-o-transform:scale(.3);transform:scale(.3)}100%{-o-transform:scale(1);transform:scale(1)}}@keyframes scale{30%{-webkit-transform:scale(.3);-moz-transform:scale(.3);-o-transform:scale(.3);transform:scale(.3)}100%{-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);transform:scale(1)}}.ball-clip-rotate-pulse{position:relative;-webkit-transform:translateY(-15px);-moz-transform:translateY(-15px);-ms-transform:translateY(-15px);-o-transform:translateY(-15px);transform:translateY(-15px)}.ball-clip-rotate-pulse>div{position:absolute;top:0;left:0;border-radius:100%;-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both}.ball-clip-rotate-pulse>div:first-child{top:7px;left:-7px;width:16px;height:16px;-webkit-animation:scale 1s 0s cubic-bezier(.09,.57,.49,.9) infinite;-moz-animation:scale 1s 0s cubic-bezier(.09,.57,.49,.9) infinite;-o-animation:scale 1s 0s cubic-bezier(.09,.57,.49,.9) infinite;animation:scale 1s 0s cubic-bezier(.09,.57,.49,.9) infinite;background:#b8c2cc}.ball-clip-rotate-pulse>div:last-child{position:absolute;top:-2px;left:-16px;width:30px;height:30px;-webkit-animation:rotate 1s 0s cubic-bezier(.09,.57,.49,.9) infinite;-moz-animation:rotate 1s 0s cubic-bezier(.09,.57,.49,.9) infinite;-o-animation:rotate 1s 0s cubic-bezier(.09,.57,.49,.9) infinite;animation:rotate 1s 0s cubic-bezier(.09,.57,.49,.9) infinite;-webkit-animation-duration:1s;-moz-animation-duration:1s;-o-animation-duration:1s;animation-duration:1s;border:2px solid;border-color:#b8c2cc transparent;background:0 0}

View File

@@ -0,0 +1,108 @@
/*========================================================
DARK LAYOUT
=========================================================*/
@-webkit-keyframes rotate
{
0%
{
-webkit-transform: rotate(0deg) scale(1);
transform: rotate(0deg) scale(1);
}
50%
{
-webkit-transform: rotate(180deg) scale(.6);
transform: rotate(180deg) scale(.6);
}
100%
{
-webkit-transform: rotate(360deg) scale(1);
transform: rotate(360deg) scale(1);
}
}
@-moz-keyframes rotate
{
0%
{
-moz-transform: rotate(0deg) scale(1);
transform: rotate(0deg) scale(1);
}
50%
{
-moz-transform: rotate(180deg) scale(.6);
transform: rotate(180deg) scale(.6);
}
100%
{
-moz-transform: rotate(360deg) scale(1);
transform: rotate(360deg) scale(1);
}
}
@-o-keyframes rotate
{
0%
{
-o-transform: rotate(0deg) scale(1);
transform: rotate(0deg) scale(1);
}
50%
{
-o-transform: rotate(180deg) scale(.6);
transform: rotate(180deg) scale(.6);
}
100%
{
-o-transform: rotate(360deg) scale(1);
transform: rotate(360deg) scale(1);
}
}
@keyframes rotate
{
0%
{
-webkit-transform: rotate(0deg) scale(1);
-moz-transform: rotate(0deg) scale(1);
-o-transform: rotate(0deg) scale(1);
transform: rotate(0deg) scale(1);
}
50%
{
-webkit-transform: rotate(180deg) scale(.6);
-moz-transform: rotate(180deg) scale(.6);
-o-transform: rotate(180deg) scale(.6);
transform: rotate(180deg) scale(.6);
}
100%
{
-webkit-transform: rotate(360deg) scale(1);
-moz-transform: rotate(360deg) scale(1);
-o-transform: rotate(360deg) scale(1);
transform: rotate(360deg) scale(1);
}
}
.ball-clip-rotate > div
{
display: inline-block;
width: 15px;
width: 25px;
height: 15px;
height: 25px;
margin: 2px;
-webkit-animation: rotate .75s 0s linear infinite;
-moz-animation: rotate .75s 0s linear infinite;
-o-animation: rotate .75s 0s linear infinite;
animation: rotate .75s 0s linear infinite;
border: 2px solid #b8c2cc;
border-bottom-color: transparent;
border-radius: 100%;
background: transparent !important;
background-color: #b8c2cc;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
}

View File

@@ -0,0 +1 @@
@-webkit-keyframes rotate{0%{-webkit-transform:rotate(0) scale(1);transform:rotate(0) scale(1)}50%{-webkit-transform:rotate(180deg) scale(.6);transform:rotate(180deg) scale(.6)}100%{-webkit-transform:rotate(360deg) scale(1);transform:rotate(360deg) scale(1)}}@-moz-keyframes rotate{0%{-moz-transform:rotate(0) scale(1);transform:rotate(0) scale(1)}50%{-moz-transform:rotate(180deg) scale(.6);transform:rotate(180deg) scale(.6)}100%{-moz-transform:rotate(360deg) scale(1);transform:rotate(360deg) scale(1)}}@-o-keyframes rotate{0%{-o-transform:rotate(0) scale(1);transform:rotate(0) scale(1)}50%{-o-transform:rotate(180deg) scale(.6);transform:rotate(180deg) scale(.6)}100%{-o-transform:rotate(360deg) scale(1);transform:rotate(360deg) scale(1)}}@keyframes rotate{0%{-webkit-transform:rotate(0) scale(1);-moz-transform:rotate(0) scale(1);-o-transform:rotate(0) scale(1);transform:rotate(0) scale(1)}50%{-webkit-transform:rotate(180deg) scale(.6);-moz-transform:rotate(180deg) scale(.6);-o-transform:rotate(180deg) scale(.6);transform:rotate(180deg) scale(.6)}100%{-webkit-transform:rotate(360deg) scale(1);-moz-transform:rotate(360deg) scale(1);-o-transform:rotate(360deg) scale(1);transform:rotate(360deg) scale(1)}}.ball-clip-rotate>div{display:inline-block;width:15px;width:25px;height:15px;height:25px;margin:2px;-webkit-animation:rotate .75s 0s linear infinite;-moz-animation:rotate .75s 0s linear infinite;-o-animation:rotate .75s 0s linear infinite;animation:rotate .75s 0s linear infinite;border:2px solid #b8c2cc;border-bottom-color:transparent;border-radius:100%;background:0 0!important;-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both}

View File

@@ -0,0 +1,181 @@
/*========================================================
DARK LAYOUT
=========================================================*/
@-webkit-keyframes ball-grid-beat
{
50%
{
opacity: .7;
}
100%
{
opacity: 1;
}
}
@-moz-keyframes ball-grid-beat
{
50%
{
opacity: .7;
}
100%
{
opacity: 1;
}
}
@-o-keyframes ball-grid-beat
{
50%
{
opacity: .7;
}
100%
{
opacity: 1;
}
}
@keyframes ball-grid-beat
{
50%
{
opacity: .7;
}
100%
{
opacity: 1;
}
}
.ball-grid-beat
{
width: 57px;
}
.ball-grid-beat > div:nth-child(1)
{
-webkit-animation-duration: 1.08s;
-moz-animation-duration: 1.08s;
-o-animation-duration: 1.08s;
animation-duration: 1.08s;
-webkit-animation-delay: .2s;
-moz-animation-delay: .2s;
-o-animation-delay: .2s;
animation-delay: .2s;
}
.ball-grid-beat > div:nth-child(2)
{
-webkit-animation-duration: .64s;
-moz-animation-duration: .64s;
-o-animation-duration: .64s;
animation-duration: .64s;
-webkit-animation-delay: -.13s;
-moz-animation-delay: -.13s;
-o-animation-delay: -.13s;
animation-delay: -.13s;
}
.ball-grid-beat > div:nth-child(3)
{
-webkit-animation-duration: .94s;
-moz-animation-duration: .94s;
-o-animation-duration: .94s;
animation-duration: .94s;
-webkit-animation-delay: .71s;
-moz-animation-delay: .71s;
-o-animation-delay: .71s;
animation-delay: .71s;
}
.ball-grid-beat > div:nth-child(4)
{
-webkit-animation-duration: 1.14s;
-moz-animation-duration: 1.14s;
-o-animation-duration: 1.14s;
animation-duration: 1.14s;
-webkit-animation-delay: .27s;
-moz-animation-delay: .27s;
-o-animation-delay: .27s;
animation-delay: .27s;
}
.ball-grid-beat > div:nth-child(5)
{
-webkit-animation-duration: 1.04s;
-moz-animation-duration: 1.04s;
-o-animation-duration: 1.04s;
animation-duration: 1.04s;
-webkit-animation-delay: -.04s;
-moz-animation-delay: -.04s;
-o-animation-delay: -.04s;
animation-delay: -.04s;
}
.ball-grid-beat > div:nth-child(6)
{
-webkit-animation-duration: 1.13s;
-moz-animation-duration: 1.13s;
-o-animation-duration: 1.13s;
animation-duration: 1.13s;
-webkit-animation-delay: -.19s;
-moz-animation-delay: -.19s;
-o-animation-delay: -.19s;
animation-delay: -.19s;
}
.ball-grid-beat > div:nth-child(7)
{
-webkit-animation-duration: .68s;
-moz-animation-duration: .68s;
-o-animation-duration: .68s;
animation-duration: .68s;
-webkit-animation-delay: .78s;
-moz-animation-delay: .78s;
-o-animation-delay: .78s;
animation-delay: .78s;
}
.ball-grid-beat > div:nth-child(8)
{
-webkit-animation-duration: .8s;
-moz-animation-duration: .8s;
-o-animation-duration: .8s;
animation-duration: .8s;
-webkit-animation-delay: .47s;
-moz-animation-delay: .47s;
-o-animation-delay: .47s;
animation-delay: .47s;
}
.ball-grid-beat > div:nth-child(9)
{
-webkit-animation-duration: .71s;
-moz-animation-duration: .71s;
-o-animation-duration: .71s;
animation-duration: .71s;
-webkit-animation-delay: .46s;
-moz-animation-delay: .46s;
-o-animation-delay: .46s;
animation-delay: .46s;
}
.ball-grid-beat > div
{
display: inline-block;
float: left;
width: 15px;
height: 15px;
margin: 2px;
-webkit-animation-name: ball-grid-beat;
-moz-animation-name: ball-grid-beat;
-o-animation-name: ball-grid-beat;
animation-name: ball-grid-beat;
-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;
}

View File

@@ -0,0 +1 @@
@-webkit-keyframes ball-grid-beat{50%{opacity:.7}100%{opacity:1}}@-moz-keyframes ball-grid-beat{50%{opacity:.7}100%{opacity:1}}@-o-keyframes ball-grid-beat{50%{opacity:.7}100%{opacity:1}}@keyframes ball-grid-beat{50%{opacity:.7}100%{opacity:1}}.ball-grid-beat{width:57px}.ball-grid-beat>div:nth-child(1){-webkit-animation-duration:1.08s;-moz-animation-duration:1.08s;-o-animation-duration:1.08s;animation-duration:1.08s;-webkit-animation-delay:.2s;-moz-animation-delay:.2s;-o-animation-delay:.2s;animation-delay:.2s}.ball-grid-beat>div:nth-child(2){-webkit-animation-duration:.64s;-moz-animation-duration:.64s;-o-animation-duration:.64s;animation-duration:.64s;-webkit-animation-delay:-.13s;-moz-animation-delay:-.13s;-o-animation-delay:-.13s;animation-delay:-.13s}.ball-grid-beat>div:nth-child(3){-webkit-animation-duration:.94s;-moz-animation-duration:.94s;-o-animation-duration:.94s;animation-duration:.94s;-webkit-animation-delay:.71s;-moz-animation-delay:.71s;-o-animation-delay:.71s;animation-delay:.71s}.ball-grid-beat>div:nth-child(4){-webkit-animation-duration:1.14s;-moz-animation-duration:1.14s;-o-animation-duration:1.14s;animation-duration:1.14s;-webkit-animation-delay:.27s;-moz-animation-delay:.27s;-o-animation-delay:.27s;animation-delay:.27s}.ball-grid-beat>div:nth-child(5){-webkit-animation-duration:1.04s;-moz-animation-duration:1.04s;-o-animation-duration:1.04s;animation-duration:1.04s;-webkit-animation-delay:-.04s;-moz-animation-delay:-.04s;-o-animation-delay:-.04s;animation-delay:-.04s}.ball-grid-beat>div:nth-child(6){-webkit-animation-duration:1.13s;-moz-animation-duration:1.13s;-o-animation-duration:1.13s;animation-duration:1.13s;-webkit-animation-delay:-.19s;-moz-animation-delay:-.19s;-o-animation-delay:-.19s;animation-delay:-.19s}.ball-grid-beat>div:nth-child(7){-webkit-animation-duration:.68s;-moz-animation-duration:.68s;-o-animation-duration:.68s;animation-duration:.68s;-webkit-animation-delay:.78s;-moz-animation-delay:.78s;-o-animation-delay:.78s;animation-delay:.78s}.ball-grid-beat>div:nth-child(8){-webkit-animation-duration:.8s;-moz-animation-duration:.8s;-o-animation-duration:.8s;animation-duration:.8s;-webkit-animation-delay:.47s;-moz-animation-delay:.47s;-o-animation-delay:.47s;animation-delay:.47s}.ball-grid-beat>div:nth-child(9){-webkit-animation-duration:.71s;-moz-animation-duration:.71s;-o-animation-duration:.71s;animation-duration:.71s;-webkit-animation-delay:.46s;-moz-animation-delay:.46s;-o-animation-delay:.46s;animation-delay:.46s}.ball-grid-beat>div{display:inline-block;float:left;width:15px;height:15px;margin:2px;-webkit-animation-name:ball-grid-beat;-moz-animation-name:ball-grid-beat;-o-animation-name:ball-grid-beat;animation-name:ball-grid-beat;-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}

View File

@@ -0,0 +1,231 @@
/*========================================================
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;
}

View File

@@ -0,0 +1 @@
@-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}

View File

@@ -0,0 +1,319 @@
/*========================================================
DARK LAYOUT
=========================================================*/
@-webkit-keyframes ball-pulse-rise-even
{
0%
{
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
25%
{
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
50%
{
-webkit-transform: scale(.4);
transform: scale(.4);
}
75%
{
-webkit-transform: translateY(30px);
transform: translateY(30px);
}
100%
{
-webkit-transform: translateY(0);
-webkit-transform: scale(1);
transform: translateY(0);
transform: scale(1);
}
}
@-moz-keyframes ball-pulse-rise-even
{
0%
{
-moz-transform: scale(1.1);
transform: scale(1.1);
}
25%
{
-moz-transform: translateY(-30px);
transform: translateY(-30px);
}
50%
{
-moz-transform: scale(.4);
transform: scale(.4);
}
75%
{
-moz-transform: translateY(30px);
transform: translateY(30px);
}
100%
{
-moz-transform: translateY(0);
-moz-transform: scale(1);
transform: translateY(0);
transform: scale(1);
}
}
@-o-keyframes ball-pulse-rise-even
{
0%
{
-o-transform: scale(1.1);
transform: scale(1.1);
}
25%
{
-o-transform: translateY(-30px);
transform: translateY(-30px);
}
50%
{
-o-transform: scale(.4);
transform: scale(.4);
}
75%
{
-o-transform: translateY(30px);
transform: translateY(30px);
}
100%
{
-o-transform: translateY(0);
-o-transform: scale(1);
transform: translateY(0);
transform: scale(1);
}
}
@keyframes ball-pulse-rise-even
{
0%
{
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}
25%
{
-webkit-transform: translateY(-30px);
-moz-transform: translateY(-30px);
-o-transform: translateY(-30px);
transform: translateY(-30px);
}
50%
{
-webkit-transform: scale(.4);
-moz-transform: scale(.4);
-o-transform: scale(.4);
transform: scale(.4);
}
75%
{
-webkit-transform: translateY(30px);
-moz-transform: translateY(30px);
-o-transform: translateY(30px);
transform: translateY(30px);
}
100%
{
-webkit-transform: translateY(0);
-webkit-transform: scale(1);
-moz-transform: translateY(0);
-moz-transform: scale(1);
-o-transform: translateY(0);
-o-transform: scale(1);
transform: translateY(0);
transform: scale(1);
}
}
@-webkit-keyframes ball-pulse-rise-odd
{
0%
{
-webkit-transform: scale(.4);
transform: scale(.4);
}
25%
{
-webkit-transform: translateY(30px);
transform: translateY(30px);
}
50%
{
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
75%
{
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
100%
{
-webkit-transform: translateY(0);
-webkit-transform: scale(.75);
transform: translateY(0);
transform: scale(.75);
}
}
@-moz-keyframes ball-pulse-rise-odd
{
0%
{
-moz-transform: scale(.4);
transform: scale(.4);
}
25%
{
-moz-transform: translateY(30px);
transform: translateY(30px);
}
50%
{
-moz-transform: scale(1.1);
transform: scale(1.1);
}
75%
{
-moz-transform: translateY(-30px);
transform: translateY(-30px);
}
100%
{
-moz-transform: translateY(0);
-moz-transform: scale(.75);
transform: translateY(0);
transform: scale(.75);
}
}
@-o-keyframes ball-pulse-rise-odd
{
0%
{
-o-transform: scale(.4);
transform: scale(.4);
}
25%
{
-o-transform: translateY(30px);
transform: translateY(30px);
}
50%
{
-o-transform: scale(1.1);
transform: scale(1.1);
}
75%
{
-o-transform: translateY(-30px);
transform: translateY(-30px);
}
100%
{
-o-transform: translateY(0);
-o-transform: scale(.75);
transform: translateY(0);
transform: scale(.75);
}
}
@keyframes ball-pulse-rise-odd
{
0%
{
-webkit-transform: scale(.4);
-moz-transform: scale(.4);
-o-transform: scale(.4);
transform: scale(.4);
}
25%
{
-webkit-transform: translateY(30px);
-moz-transform: translateY(30px);
-o-transform: translateY(30px);
transform: translateY(30px);
}
50%
{
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}
75%
{
-webkit-transform: translateY(-30px);
-moz-transform: translateY(-30px);
-o-transform: translateY(-30px);
transform: translateY(-30px);
}
100%
{
-webkit-transform: translateY(0);
-webkit-transform: scale(.75);
-moz-transform: translateY(0);
-moz-transform: scale(.75);
-o-transform: translateY(0);
-o-transform: scale(.75);
transform: translateY(0);
transform: scale(.75);
}
}
.ball-pulse-rise > div
{
display: inline-block;
width: 15px;
height: 15px;
margin: 2px;
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-o-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-timing-function: cubic-bezier(.15, .46, .9, .6);
-moz-animation-timing-function: cubic-bezier(.15, .46, .9, .6);
-o-animation-timing-function: cubic-bezier(.15, .46, .9, .6);
animation-timing-function: cubic-bezier(.15, .46, .9, .6);
-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;
}
.ball-pulse-rise > div:nth-child(2n)
{
-webkit-animation-name: ball-pulse-rise-even;
-moz-animation-name: ball-pulse-rise-even;
-o-animation-name: ball-pulse-rise-even;
animation-name: ball-pulse-rise-even;
}
.ball-pulse-rise > div:nth-child(2n-1)
{
-webkit-animation-name: ball-pulse-rise-odd;
-moz-animation-name: ball-pulse-rise-odd;
-o-animation-name: ball-pulse-rise-odd;
animation-name: ball-pulse-rise-odd;
}

View File

@@ -0,0 +1 @@
@-webkit-keyframes ball-pulse-rise-even{0%{-webkit-transform:scale(1.1);transform:scale(1.1)}25%{-webkit-transform:translateY(-30px);transform:translateY(-30px)}50%{-webkit-transform:scale(.4);transform:scale(.4)}75%{-webkit-transform:translateY(30px);transform:translateY(30px)}100%{-webkit-transform:translateY(0);-webkit-transform:scale(1);transform:translateY(0);transform:scale(1)}}@-moz-keyframes ball-pulse-rise-even{0%{-moz-transform:scale(1.1);transform:scale(1.1)}25%{-moz-transform:translateY(-30px);transform:translateY(-30px)}50%{-moz-transform:scale(.4);transform:scale(.4)}75%{-moz-transform:translateY(30px);transform:translateY(30px)}100%{-moz-transform:translateY(0);-moz-transform:scale(1);transform:translateY(0);transform:scale(1)}}@-o-keyframes ball-pulse-rise-even{0%{-o-transform:scale(1.1);transform:scale(1.1)}25%{-o-transform:translateY(-30px);transform:translateY(-30px)}50%{-o-transform:scale(.4);transform:scale(.4)}75%{-o-transform:translateY(30px);transform:translateY(30px)}100%{-o-transform:translateY(0);-o-transform:scale(1);transform:translateY(0);transform:scale(1)}}@keyframes ball-pulse-rise-even{0%{-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-o-transform:scale(1.1);transform:scale(1.1)}25%{-webkit-transform:translateY(-30px);-moz-transform:translateY(-30px);-o-transform:translateY(-30px);transform:translateY(-30px)}50%{-webkit-transform:scale(.4);-moz-transform:scale(.4);-o-transform:scale(.4);transform:scale(.4)}75%{-webkit-transform:translateY(30px);-moz-transform:translateY(30px);-o-transform:translateY(30px);transform:translateY(30px)}100%{-webkit-transform:translateY(0);-webkit-transform:scale(1);-moz-transform:translateY(0);-moz-transform:scale(1);-o-transform:translateY(0);-o-transform:scale(1);transform:translateY(0);transform:scale(1)}}@-webkit-keyframes ball-pulse-rise-odd{0%{-webkit-transform:scale(.4);transform:scale(.4)}25%{-webkit-transform:translateY(30px);transform:translateY(30px)}50%{-webkit-transform:scale(1.1);transform:scale(1.1)}75%{-webkit-transform:translateY(-30px);transform:translateY(-30px)}100%{-webkit-transform:translateY(0);-webkit-transform:scale(.75);transform:translateY(0);transform:scale(.75)}}@-moz-keyframes ball-pulse-rise-odd{0%{-moz-transform:scale(.4);transform:scale(.4)}25%{-moz-transform:translateY(30px);transform:translateY(30px)}50%{-moz-transform:scale(1.1);transform:scale(1.1)}75%{-moz-transform:translateY(-30px);transform:translateY(-30px)}100%{-moz-transform:translateY(0);-moz-transform:scale(.75);transform:translateY(0);transform:scale(.75)}}@-o-keyframes ball-pulse-rise-odd{0%{-o-transform:scale(.4);transform:scale(.4)}25%{-o-transform:translateY(30px);transform:translateY(30px)}50%{-o-transform:scale(1.1);transform:scale(1.1)}75%{-o-transform:translateY(-30px);transform:translateY(-30px)}100%{-o-transform:translateY(0);-o-transform:scale(.75);transform:translateY(0);transform:scale(.75)}}@keyframes ball-pulse-rise-odd{0%{-webkit-transform:scale(.4);-moz-transform:scale(.4);-o-transform:scale(.4);transform:scale(.4)}25%{-webkit-transform:translateY(30px);-moz-transform:translateY(30px);-o-transform:translateY(30px);transform:translateY(30px)}50%{-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-o-transform:scale(1.1);transform:scale(1.1)}75%{-webkit-transform:translateY(-30px);-moz-transform:translateY(-30px);-o-transform:translateY(-30px);transform:translateY(-30px)}100%{-webkit-transform:translateY(0);-webkit-transform:scale(.75);-moz-transform:translateY(0);-moz-transform:scale(.75);-o-transform:translateY(0);-o-transform:scale(.75);transform:translateY(0);transform:scale(.75)}}.ball-pulse-rise>div{display:inline-block;width:15px;height:15px;margin:2px;-webkit-animation-duration:1s;-moz-animation-duration:1s;-o-animation-duration:1s;animation-duration:1s;-webkit-animation-timing-function:cubic-bezier(.15,.46,.9,.6);-moz-animation-timing-function:cubic-bezier(.15,.46,.9,.6);-o-animation-timing-function:cubic-bezier(.15,.46,.9,.6);animation-timing-function:cubic-bezier(.15,.46,.9,.6);-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}.ball-pulse-rise>div:nth-child(2n){-webkit-animation-name:ball-pulse-rise-even;-moz-animation-name:ball-pulse-rise-even;-o-animation-name:ball-pulse-rise-even;animation-name:ball-pulse-rise-even}.ball-pulse-rise>div:nth-child(2n-1){-webkit-animation-name:ball-pulse-rise-odd;-moz-animation-name:ball-pulse-rise-odd;-o-animation-name:ball-pulse-rise-odd;animation-name:ball-pulse-rise-odd}

View File

@@ -0,0 +1,87 @@
/*========================================================
DARK LAYOUT
=========================================================*/
@-webkit-keyframes ball-pulse-round
{
0%,
80%,
100%
{
-webkit-transform: scale(0);
transform: scale(0);
}
40%
{
-webkit-transform: scale(1);
transform: scale(1);
}
}
@-moz-keyframes ball-pulse-round
{
0%,
80%,
100%
{
-webkit-transform: scale(0);
-moz-transform: scale(0);
transform: scale(0);
}
40%
{
-webkit-transform: scale(1);
-moz-transform: scale(1);
transform: scale(1);
}
}
@-o-keyframes ball-pulse-round
{
0%,
80%,
100%
{
-webkit-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
}
40%
{
-webkit-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
}
@keyframes ball-pulse-round
{
0%,
80%,
100%
{
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
}
40%
{
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
}
.ball-pulse-round > div
{
width: 10px;
height: 10px;
-webkit-animation: ball-pulse-round 1.2s infinite ease-in-out;
-moz-animation: ball-pulse-round 1.2s infinite ease-in-out;
-o-animation: ball-pulse-round 1.2s infinite ease-in-out;
animation: ball-pulse-round 1.2s infinite ease-in-out;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
}

View File

@@ -0,0 +1 @@
@-webkit-keyframes ball-pulse-round{0%,100%,80%{-webkit-transform:scale(0);transform:scale(0)}40%{-webkit-transform:scale(1);transform:scale(1)}}@-moz-keyframes ball-pulse-round{0%,100%,80%{-webkit-transform:scale(0);-moz-transform:scale(0);transform:scale(0)}40%{-webkit-transform:scale(1);-moz-transform:scale(1);transform:scale(1)}}@-o-keyframes ball-pulse-round{0%,100%,80%{-webkit-transform:scale(0);-o-transform:scale(0);transform:scale(0)}40%{-webkit-transform:scale(1);-o-transform:scale(1);transform:scale(1)}}@keyframes ball-pulse-round{0%,100%,80%{-webkit-transform:scale(0);-moz-transform:scale(0);-o-transform:scale(0);transform:scale(0)}40%{-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);transform:scale(1)}}.ball-pulse-round>div{width:10px;height:10px;-webkit-animation:ball-pulse-round 1.2s infinite ease-in-out;-moz-animation:ball-pulse-round 1.2s infinite ease-in-out;-o-animation:ball-pulse-round 1.2s infinite ease-in-out;animation:ball-pulse-round 1.2s infinite ease-in-out;-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both}

View File

@@ -0,0 +1,122 @@
/*========================================================
DARK LAYOUT
=========================================================*/
@-webkit-keyframes ball-pulse-sync
{
33%
{
-webkit-transform: translateY(10px);
transform: translateY(10px);
}
66%
{
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
}
100%
{
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@-moz-keyframes ball-pulse-sync
{
33%
{
-moz-transform: translateY(10px);
transform: translateY(10px);
}
66%
{
-moz-transform: translateY(-10px);
transform: translateY(-10px);
}
100%
{
-moz-transform: translateY(0);
transform: translateY(0);
}
}
@-o-keyframes ball-pulse-sync
{
33%
{
-o-transform: translateY(10px);
transform: translateY(10px);
}
66%
{
-o-transform: translateY(-10px);
transform: translateY(-10px);
}
100%
{
-o-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes ball-pulse-sync
{
33%
{
-webkit-transform: translateY(10px);
-moz-transform: translateY(10px);
-o-transform: translateY(10px);
transform: translateY(10px);
}
66%
{
-webkit-transform: translateY(-10px);
-moz-transform: translateY(-10px);
-o-transform: translateY(-10px);
transform: translateY(-10px);
}
100%
{
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
}
.ball-pulse-sync > div:nth-child(1)
{
-webkit-animation: ball-pulse-sync .6s -.14s infinite ease-in-out;
-moz-animation: ball-pulse-sync .6s -.14s infinite ease-in-out;
-o-animation: ball-pulse-sync .6s -.14s infinite ease-in-out;
animation: ball-pulse-sync .6s -.14s infinite ease-in-out;
}
.ball-pulse-sync > div:nth-child(2)
{
-webkit-animation: ball-pulse-sync .6s -.07s infinite ease-in-out;
-moz-animation: ball-pulse-sync .6s -.07s infinite ease-in-out;
-o-animation: ball-pulse-sync .6s -.07s infinite ease-in-out;
animation: ball-pulse-sync .6s -.07s infinite ease-in-out;
}
.ball-pulse-sync > div:nth-child(3)
{
-webkit-animation: ball-pulse-sync .6s 0s infinite ease-in-out;
-moz-animation: ball-pulse-sync .6s 0s infinite ease-in-out;
-o-animation: ball-pulse-sync .6s 0s infinite ease-in-out;
animation: ball-pulse-sync .6s 0s infinite ease-in-out;
}
.ball-pulse-sync > div
{
display: inline-block;
width: 15px;
height: 15px;
margin: 2px;
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;
}

View File

@@ -0,0 +1 @@
@-webkit-keyframes ball-pulse-sync{33%{-webkit-transform:translateY(10px);transform:translateY(10px)}66%{-webkit-transform:translateY(-10px);transform:translateY(-10px)}100%{-webkit-transform:translateY(0);transform:translateY(0)}}@-moz-keyframes ball-pulse-sync{33%{-moz-transform:translateY(10px);transform:translateY(10px)}66%{-moz-transform:translateY(-10px);transform:translateY(-10px)}100%{-moz-transform:translateY(0);transform:translateY(0)}}@-o-keyframes ball-pulse-sync{33%{-o-transform:translateY(10px);transform:translateY(10px)}66%{-o-transform:translateY(-10px);transform:translateY(-10px)}100%{-o-transform:translateY(0);transform:translateY(0)}}@keyframes ball-pulse-sync{33%{-webkit-transform:translateY(10px);-moz-transform:translateY(10px);-o-transform:translateY(10px);transform:translateY(10px)}66%{-webkit-transform:translateY(-10px);-moz-transform:translateY(-10px);-o-transform:translateY(-10px);transform:translateY(-10px)}100%{-webkit-transform:translateY(0);-moz-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0)}}.ball-pulse-sync>div:nth-child(1){-webkit-animation:ball-pulse-sync .6s -.14s infinite ease-in-out;-moz-animation:ball-pulse-sync .6s -.14s infinite ease-in-out;-o-animation:ball-pulse-sync .6s -.14s infinite ease-in-out;animation:ball-pulse-sync .6s -.14s infinite ease-in-out}.ball-pulse-sync>div:nth-child(2){-webkit-animation:ball-pulse-sync .6s -.07s infinite ease-in-out;-moz-animation:ball-pulse-sync .6s -.07s infinite ease-in-out;-o-animation:ball-pulse-sync .6s -.07s infinite ease-in-out;animation:ball-pulse-sync .6s -.07s infinite ease-in-out}.ball-pulse-sync>div:nth-child(3){-webkit-animation:ball-pulse-sync .6s 0s infinite ease-in-out;-moz-animation:ball-pulse-sync .6s 0s infinite ease-in-out;-o-animation:ball-pulse-sync .6s 0s infinite ease-in-out;animation:ball-pulse-sync .6s 0s infinite ease-in-out}.ball-pulse-sync>div{display:inline-block;width:15px;height:15px;margin:2px;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}

View File

@@ -0,0 +1,146 @@
/*========================================================
DARK LAYOUT
=========================================================*/
@-webkit-keyframes scale
{
0%
{
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
45%
{
-webkit-transform: scale(.1);
transform: scale(.1);
opacity: .7;
}
80%
{
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
}
@-moz-keyframes scale
{
0%
{
-moz-transform: scale(1);
transform: scale(1);
opacity: 1;
}
45%
{
-moz-transform: scale(.1);
transform: scale(.1);
opacity: .7;
}
80%
{
-moz-transform: scale(1);
transform: scale(1);
opacity: 1;
}
}
@-o-keyframes scale
{
0%
{
-o-transform: scale(1);
transform: scale(1);
opacity: 1;
}
45%
{
-o-transform: scale(.1);
transform: scale(.1);
opacity: .7;
}
80%
{
-o-transform: scale(1);
transform: scale(1);
opacity: 1;
}
}
@keyframes scale
{
0%
{
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
opacity: 1;
}
45%
{
-webkit-transform: scale(.1);
-moz-transform: scale(.1);
-o-transform: scale(.1);
transform: scale(.1);
opacity: .7;
}
80%
{
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
opacity: 1;
}
}
.ball-pulse > div:nth-child(1)
{
-webkit-animation: scale .75s -.24s infinite cubic-bezier(.2, .68, .18, 1.08);
-moz-animation: scale .75s -.24s infinite cubic-bezier(.2, .68, .18, 1.08);
-o-animation: scale .75s -.24s infinite cubic-bezier(.2, .68, .18, 1.08);
animation: scale .75s -.24s infinite cubic-bezier(.2, .68, .18, 1.08);
}
.ball-pulse > div:nth-child(2)
{
-webkit-animation: scale .75s -.12s infinite cubic-bezier(.2, .68, .18, 1.08);
-moz-animation: scale .75s -.12s infinite cubic-bezier(.2, .68, .18, 1.08);
-o-animation: scale .75s -.12s infinite cubic-bezier(.2, .68, .18, 1.08);
animation: scale .75s -.12s infinite cubic-bezier(.2, .68, .18, 1.08);
}
.ball-pulse > div:nth-child(3)
{
-webkit-animation: scale .75s 0s infinite cubic-bezier(.2, .68, .18, 1.08);
-moz-animation: scale .75s 0s infinite cubic-bezier(.2, .68, .18, 1.08);
-o-animation: scale .75s 0s infinite cubic-bezier(.2, .68, .18, 1.08);
animation: scale .75s 0s infinite cubic-bezier(.2, .68, .18, 1.08);
}
.ball-pulse > div
{
display: inline-block;
width: 15px;
height: 15px;
margin: 2px;
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;
}

View File

@@ -0,0 +1 @@
@-webkit-keyframes scale{0%,80%{-webkit-transform:scale(1);transform:scale(1);opacity:1}45%{-webkit-transform:scale(.1);transform:scale(.1);opacity:.7}}@-moz-keyframes scale{0%,80%{-moz-transform:scale(1);transform:scale(1);opacity:1}45%{-moz-transform:scale(.1);transform:scale(.1);opacity:.7}}@-o-keyframes scale{0%,80%{-o-transform:scale(1);transform:scale(1);opacity:1}45%{-o-transform:scale(.1);transform:scale(.1);opacity:.7}}@keyframes scale{0%,80%{-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);transform:scale(1);opacity:1}45%{-webkit-transform:scale(.1);-moz-transform:scale(.1);-o-transform:scale(.1);transform:scale(.1);opacity:.7}}.ball-pulse>div:nth-child(1){-webkit-animation:scale .75s -.24s infinite cubic-bezier(.2,.68,.18,1.08);-moz-animation:scale .75s -.24s infinite cubic-bezier(.2,.68,.18,1.08);-o-animation:scale .75s -.24s infinite cubic-bezier(.2,.68,.18,1.08);animation:scale .75s -.24s infinite cubic-bezier(.2,.68,.18,1.08)}.ball-pulse>div:nth-child(2){-webkit-animation:scale .75s -.12s infinite cubic-bezier(.2,.68,.18,1.08);-moz-animation:scale .75s -.12s infinite cubic-bezier(.2,.68,.18,1.08);-o-animation:scale .75s -.12s infinite cubic-bezier(.2,.68,.18,1.08);animation:scale .75s -.12s infinite cubic-bezier(.2,.68,.18,1.08)}.ball-pulse>div:nth-child(3){-webkit-animation:scale .75s 0s infinite cubic-bezier(.2,.68,.18,1.08);-moz-animation:scale .75s 0s infinite cubic-bezier(.2,.68,.18,1.08);-o-animation:scale .75s 0s infinite cubic-bezier(.2,.68,.18,1.08);animation:scale .75s 0s infinite cubic-bezier(.2,.68,.18,1.08)}.ball-pulse>div{display:inline-block;width:15px;height:15px;margin:2px;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}

View File

@@ -0,0 +1,134 @@
/*========================================================
DARK LAYOUT
=========================================================*/
@-webkit-keyframes rotate
{
0%
{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
50%
{
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
100%
{
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-moz-keyframes rotate
{
0%
{
-moz-transform: rotate(0deg);
transform: rotate(0deg);
}
50%
{
-moz-transform: rotate(180deg);
transform: rotate(180deg);
}
100%
{
-moz-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-o-keyframes rotate
{
0%
{
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
50%
{
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
100%
{
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes rotate
{
0%
{
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
50%
{
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
100%
{
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.ball-rotate
{
position: relative;
}
.ball-rotate > div
{
position: relative;
width: 15px;
height: 15px;
margin: 2px;
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;
}
.ball-rotate > div:first-child
{
-webkit-animation: rotate 1s 0s cubic-bezier(.7, -.13, .22, .86) infinite;
-moz-animation: rotate 1s 0s cubic-bezier(.7, -.13, .22, .86) infinite;
-o-animation: rotate 1s 0s cubic-bezier(.7, -.13, .22, .86) infinite;
animation: rotate 1s 0s cubic-bezier(.7, -.13, .22, .86) infinite;
}
.ball-rotate > div:before,
.ball-rotate > div:after
{
position: absolute;
width: 15px;
height: 15px;
margin: 2px;
content: '';
opacity: .8;
border-radius: 100%;
background-color: #b8c2cc;
}
.ball-rotate > div:before
{
top: 0;
left: -28px;
}
.ball-rotate > div:after
{
top: 0;
left: 25px;
}

View File

@@ -0,0 +1 @@
.ball-rotate,.ball-rotate>div{position:relative}.ball-rotate>div,.ball-rotate>div:after,.ball-rotate>div:before{width:15px;height:15px;margin:2px;border-radius:100%;background-color:#b8c2cc}@-webkit-keyframes rotate{0%{-webkit-transform:rotate(0);transform:rotate(0)}50%{-webkit-transform:rotate(180deg);transform:rotate(180deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-moz-keyframes rotate{0%{-moz-transform:rotate(0);transform:rotate(0)}50%{-moz-transform:rotate(180deg);transform:rotate(180deg)}100%{-moz-transform:rotate(360deg);transform:rotate(360deg)}}@-o-keyframes rotate{0%{-o-transform:rotate(0);transform:rotate(0)}50%{-o-transform:rotate(180deg);transform:rotate(180deg)}100%{-o-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes rotate{0%{-webkit-transform:rotate(0);-moz-transform:rotate(0);-o-transform:rotate(0);transform:rotate(0)}50%{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-o-transform:rotate(180deg);transform:rotate(180deg)}100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}}.ball-rotate>div{-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both}.ball-rotate>div:first-child{-webkit-animation:rotate 1s 0s cubic-bezier(.7,-.13,.22,.86) infinite;-moz-animation:rotate 1s 0s cubic-bezier(.7,-.13,.22,.86) infinite;-o-animation:rotate 1s 0s cubic-bezier(.7,-.13,.22,.86) infinite;animation:rotate 1s 0s cubic-bezier(.7,-.13,.22,.86) infinite}.ball-rotate>div:after,.ball-rotate>div:before{position:absolute;content:'';opacity:.8}.ball-rotate>div:before{top:0;left:-28px}.ball-rotate>div:after{top:0;left:25px}

View File

@@ -0,0 +1,136 @@
/*========================================================
DARK LAYOUT
=========================================================*/
@-webkit-keyframes ball-scale-multiple
{
0%
{
-webkit-transform: scale(0);
transform: scale(0);
opacity: 0;
}
5%
{
opacity: 1;
}
100%
{
-webkit-transform: scale(1);
transform: scale(1);
opacity: 0;
}
}
@-moz-keyframes ball-scale-multiple
{
0%
{
-moz-transform: scale(0);
transform: scale(0);
opacity: 0;
}
5%
{
opacity: 1;
}
100%
{
-moz-transform: scale(1);
transform: scale(1);
opacity: 0;
}
}
@-o-keyframes ball-scale-multiple
{
0%
{
-o-transform: scale(0);
transform: scale(0);
opacity: 0;
}
5%
{
opacity: 1;
}
100%
{
-o-transform: scale(1);
transform: scale(1);
opacity: 0;
}
}
@keyframes ball-scale-multiple
{
0%
{
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
opacity: 0;
}
5%
{
opacity: 1;
}
100%
{
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
opacity: 0;
}
}
.ball-scale-multiple
{
position: relative;
}
.ball-scale-multiple > div:nth-child(2)
{
-webkit-animation-delay: -.4s;
-moz-animation-delay: -.4s;
-o-animation-delay: -.4s;
animation-delay: -.4s;
}
.ball-scale-multiple > div:nth-child(3)
{
-webkit-animation-delay: -.2s;
-moz-animation-delay: -.2s;
-o-animation-delay: -.2s;
animation-delay: -.2s;
}
.ball-scale-multiple > div
{
position: absolute;
top: 0;
width: 15px;
width: 60px;
height: 15px;
height: 60px;
margin: 2px;
margin: 0;
-webkit-animation: ball-scale-multiple 1s 0s linear infinite;
-moz-animation: ball-scale-multiple 1s 0s linear infinite;
-o-animation: ball-scale-multiple 1s 0s linear infinite;
animation: ball-scale-multiple 1s 0s linear infinite;
opacity: 0;
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;
}

View File

@@ -0,0 +1 @@
@-webkit-keyframes ball-scale-multiple{0%{-webkit-transform:scale(0);transform:scale(0);opacity:0}5%{opacity:1}100%{-webkit-transform:scale(1);transform:scale(1);opacity:0}}@-moz-keyframes ball-scale-multiple{0%{-moz-transform:scale(0);transform:scale(0);opacity:0}5%{opacity:1}100%{-moz-transform:scale(1);transform:scale(1);opacity:0}}@-o-keyframes ball-scale-multiple{0%{-o-transform:scale(0);transform:scale(0);opacity:0}5%{opacity:1}100%{-o-transform:scale(1);transform:scale(1);opacity:0}}@keyframes ball-scale-multiple{0%{-webkit-transform:scale(0);-moz-transform:scale(0);-o-transform:scale(0);transform:scale(0);opacity:0}5%{opacity:1}100%{-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);transform:scale(1);opacity:0}}.ball-scale-multiple{position:relative}.ball-scale-multiple>div:nth-child(2){-webkit-animation-delay:-.4s;-moz-animation-delay:-.4s;-o-animation-delay:-.4s;animation-delay:-.4s}.ball-scale-multiple>div:nth-child(3){-webkit-animation-delay:-.2s;-moz-animation-delay:-.2s;-o-animation-delay:-.2s;animation-delay:-.2s}.ball-scale-multiple>div{position:absolute;top:0;width:15px;width:60px;height:15px;height:60px;margin:0;-webkit-animation:ball-scale-multiple 1s 0s linear infinite;-moz-animation:ball-scale-multiple 1s 0s linear infinite;-o-animation:ball-scale-multiple 1s 0s linear infinite;animation:ball-scale-multiple 1s 0s linear infinite;opacity:0;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}

View File

@@ -0,0 +1,141 @@
/*========================================================
DARK LAYOUT
=========================================================*/
@-webkit-keyframes ball-scale
{
0%
{
-webkit-transform: scale(0);
transform: scale(0);
}
100%
{
-webkit-transform: scale(1);
transform: scale(1);
opacity: 0;
}
}
@-moz-keyframes ball-scale
{
0%
{
-moz-transform: scale(0);
transform: scale(0);
}
100%
{
-moz-transform: scale(1);
transform: scale(1);
opacity: 0;
}
}
@-o-keyframes ball-scale
{
0%
{
-o-transform: scale(0);
transform: scale(0);
}
100%
{
-o-transform: scale(1);
transform: scale(1);
opacity: 0;
}
}
@keyframes ball-scale
{
0%
{
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
}
100%
{
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
opacity: 0;
}
}
.ball-scale > div
{
display: inline-block;
width: 15px;
width: 60px;
height: 15px;
height: 60px;
margin: 2px;
-webkit-animation: ball-scale 1s 0s ease-in-out infinite;
-moz-animation: ball-scale 1s 0s ease-in-out infinite;
-o-animation: ball-scale 1s 0s ease-in-out infinite;
animation: ball-scale 1s 0s ease-in-out 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;
}
.ball-scale-random
{
width: 37px;
height: 40px;
}
.ball-scale-random > div
{
position: absolute;
display: inline-block;
width: 15px;
width: 30px;
height: 15px;
height: 30px;
margin: 2px;
-webkit-animation: ball-scale 1s 0s ease-in-out infinite;
-moz-animation: ball-scale 1s 0s ease-in-out infinite;
-o-animation: ball-scale 1s 0s ease-in-out infinite;
animation: ball-scale 1s 0s ease-in-out 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;
}
.ball-scale-random > div:nth-child(1)
{
margin-left: -7px;
-webkit-animation: ball-scale 1s .2s ease-in-out infinite;
-moz-animation: ball-scale 1s .2s ease-in-out infinite;
-o-animation: ball-scale 1s .2s ease-in-out infinite;
animation: ball-scale 1s .2s ease-in-out infinite;
}
.ball-scale-random > div:nth-child(3)
{
margin-top: 9px;
margin-left: -2px;
-webkit-animation: ball-scale 1s .5s ease-in-out infinite;
-moz-animation: ball-scale 1s .5s ease-in-out infinite;
-o-animation: ball-scale 1s .5s ease-in-out infinite;
animation: ball-scale 1s .5s ease-in-out infinite;
}

View File

@@ -0,0 +1 @@
.ball-scale-random>div,.ball-scale>div{display:inline-block;margin:2px;border-radius:100%;background-color:#b8c2cc}@-webkit-keyframes ball-scale{0%{-webkit-transform:scale(0);transform:scale(0)}100%{-webkit-transform:scale(1);transform:scale(1);opacity:0}}@-moz-keyframes ball-scale{0%{-moz-transform:scale(0);transform:scale(0)}100%{-moz-transform:scale(1);transform:scale(1);opacity:0}}@-o-keyframes ball-scale{0%{-o-transform:scale(0);transform:scale(0)}100%{-o-transform:scale(1);transform:scale(1);opacity:0}}@keyframes ball-scale{0%{-webkit-transform:scale(0);-moz-transform:scale(0);-o-transform:scale(0);transform:scale(0)}100%{-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);transform:scale(1);opacity:0}}.ball-scale>div{width:15px;width:60px;height:15px;height:60px;-webkit-animation:ball-scale 1s 0s ease-in-out infinite;-moz-animation:ball-scale 1s 0s ease-in-out infinite;-o-animation:ball-scale 1s 0s ease-in-out infinite;animation:ball-scale 1s 0s ease-in-out infinite;-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both}.ball-scale-random{width:37px;height:40px}.ball-scale-random>div{position:absolute;width:15px;width:30px;height:15px;height:30px;-webkit-animation:ball-scale 1s 0s ease-in-out infinite;-moz-animation:ball-scale 1s 0s ease-in-out infinite;-o-animation:ball-scale 1s 0s ease-in-out infinite;animation:ball-scale 1s 0s ease-in-out infinite;-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both}.ball-scale-random>div:nth-child(1){margin-left:-7px;-webkit-animation:ball-scale 1s .2s ease-in-out infinite;-moz-animation:ball-scale 1s .2s ease-in-out infinite;-o-animation:ball-scale 1s .2s ease-in-out infinite;animation:ball-scale 1s .2s ease-in-out infinite}.ball-scale-random>div:nth-child(3){margin-top:9px;margin-left:-2px;-webkit-animation:ball-scale 1s .5s ease-in-out infinite;-moz-animation:ball-scale 1s .5s ease-in-out infinite;-o-animation:ball-scale 1s .5s ease-in-out infinite;animation:ball-scale 1s .5s ease-in-out infinite}

View File

@@ -0,0 +1,152 @@
/*========================================================
DARK LAYOUT
=========================================================*/
@-webkit-keyframes ball-scale-ripple-multiple
{
0%
{
-webkit-transform: scale(.1);
transform: scale(.1);
opacity: 1;
}
70%
{
-webkit-transform: scale(1);
transform: scale(1);
opacity: .7;
}
100%
{
opacity: .0;
}
}
@-moz-keyframes ball-scale-ripple-multiple
{
0%
{
-moz-transform: scale(.1);
transform: scale(.1);
opacity: 1;
}
70%
{
-moz-transform: scale(1);
transform: scale(1);
opacity: .7;
}
100%
{
opacity: .0;
}
}
@-o-keyframes ball-scale-ripple-multiple
{
0%
{
-o-transform: scale(.1);
transform: scale(.1);
opacity: 1;
}
70%
{
-o-transform: scale(1);
transform: scale(1);
opacity: .7;
}
100%
{
opacity: .0;
}
}
@keyframes ball-scale-ripple-multiple
{
0%
{
-webkit-transform: scale(.1);
-moz-transform: scale(.1);
-o-transform: scale(.1);
transform: scale(.1);
opacity: 1;
}
70%
{
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
opacity: .7;
}
100%
{
opacity: .0;
}
}
.ball-scale-ripple-multiple
{
position: relative;
-webkit-transform: translateY(-25px);
-moz-transform: translateY(-25px);
-ms-transform: translateY(-25px);
-o-transform: translateY(-25px);
transform: translateY(-25px);
}
.ball-scale-ripple-multiple > div:nth-child(0)
{
-webkit-animation-delay: -.8s;
-moz-animation-delay: -.8s;
-o-animation-delay: -.8s;
animation-delay: -.8s;
}
.ball-scale-ripple-multiple > div:nth-child(1)
{
-webkit-animation-delay: -.6s;
-moz-animation-delay: -.6s;
-o-animation-delay: -.6s;
animation-delay: -.6s;
}
.ball-scale-ripple-multiple > div:nth-child(2)
{
-webkit-animation-delay: -.4s;
-moz-animation-delay: -.4s;
-o-animation-delay: -.4s;
animation-delay: -.4s;
}
.ball-scale-ripple-multiple > div:nth-child(3)
{
-webkit-animation-delay: -.2s;
-moz-animation-delay: -.2s;
-o-animation-delay: -.2s;
animation-delay: -.2s;
}
.ball-scale-ripple-multiple > div
{
position: absolute;
top: -2px;
left: -26px;
width: 50px;
height: 50px;
-webkit-animation: ball-scale-ripple-multiple 1.25s 0s infinite cubic-bezier(.21, .53, .56, .8);
-moz-animation: ball-scale-ripple-multiple 1.25s 0s infinite cubic-bezier(.21, .53, .56, .8);
-o-animation: ball-scale-ripple-multiple 1.25s 0s infinite cubic-bezier(.21, .53, .56, .8);
animation: ball-scale-ripple-multiple 1.25s 0s infinite cubic-bezier(.21, .53, .56, .8);
border: 2px solid #b8c2cc;
border-radius: 100%;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
}

View File

@@ -0,0 +1 @@
@-webkit-keyframes ball-scale-ripple-multiple{0%{-webkit-transform:scale(.1);transform:scale(.1);opacity:1}70%{-webkit-transform:scale(1);transform:scale(1);opacity:.7}100%{opacity:0}}@-moz-keyframes ball-scale-ripple-multiple{0%{-moz-transform:scale(.1);transform:scale(.1);opacity:1}70%{-moz-transform:scale(1);transform:scale(1);opacity:.7}100%{opacity:0}}@-o-keyframes ball-scale-ripple-multiple{0%{-o-transform:scale(.1);transform:scale(.1);opacity:1}70%{-o-transform:scale(1);transform:scale(1);opacity:.7}100%{opacity:0}}@keyframes ball-scale-ripple-multiple{0%{-webkit-transform:scale(.1);-moz-transform:scale(.1);-o-transform:scale(.1);transform:scale(.1);opacity:1}70%{-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);transform:scale(1);opacity:.7}100%{opacity:0}}.ball-scale-ripple-multiple{position:relative;-webkit-transform:translateY(-25px);-moz-transform:translateY(-25px);-ms-transform:translateY(-25px);-o-transform:translateY(-25px);transform:translateY(-25px)}.ball-scale-ripple-multiple>div:nth-child(0){-webkit-animation-delay:-.8s;-moz-animation-delay:-.8s;-o-animation-delay:-.8s;animation-delay:-.8s}.ball-scale-ripple-multiple>div:nth-child(1){-webkit-animation-delay:-.6s;-moz-animation-delay:-.6s;-o-animation-delay:-.6s;animation-delay:-.6s}.ball-scale-ripple-multiple>div:nth-child(2){-webkit-animation-delay:-.4s;-moz-animation-delay:-.4s;-o-animation-delay:-.4s;animation-delay:-.4s}.ball-scale-ripple-multiple>div:nth-child(3){-webkit-animation-delay:-.2s;-moz-animation-delay:-.2s;-o-animation-delay:-.2s;animation-delay:-.2s}.ball-scale-ripple-multiple>div{position:absolute;top:-2px;left:-26px;width:50px;height:50px;-webkit-animation:ball-scale-ripple-multiple 1.25s 0s infinite cubic-bezier(.21,.53,.56,.8);-moz-animation:ball-scale-ripple-multiple 1.25s 0s infinite cubic-bezier(.21,.53,.56,.8);-o-animation:ball-scale-ripple-multiple 1.25s 0s infinite cubic-bezier(.21,.53,.56,.8);animation:ball-scale-ripple-multiple 1.25s 0s infinite cubic-bezier(.21,.53,.56,.8);border:2px solid #b8c2cc;border-radius:100%;-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both}

View File

@@ -0,0 +1,110 @@
/*========================================================
DARK LAYOUT
=========================================================*/
@-webkit-keyframes ball-scale-ripple
{
0%
{
-webkit-transform: scale(.1);
transform: scale(.1);
opacity: 1;
}
70%
{
-webkit-transform: scale(1);
transform: scale(1);
opacity: .7;
}
100%
{
opacity: .0;
}
}
@-moz-keyframes ball-scale-ripple
{
0%
{
-moz-transform: scale(.1);
transform: scale(.1);
opacity: 1;
}
70%
{
-moz-transform: scale(1);
transform: scale(1);
opacity: .7;
}
100%
{
opacity: .0;
}
}
@-o-keyframes ball-scale-ripple
{
0%
{
-o-transform: scale(.1);
transform: scale(.1);
opacity: 1;
}
70%
{
-o-transform: scale(1);
transform: scale(1);
opacity: .7;
}
100%
{
opacity: .0;
}
}
@keyframes ball-scale-ripple
{
0%
{
-webkit-transform: scale(.1);
-moz-transform: scale(.1);
-o-transform: scale(.1);
transform: scale(.1);
opacity: 1;
}
70%
{
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
opacity: .7;
}
100%
{
opacity: .0;
}
}
.ball-scale-ripple > div
{
width: 50px;
height: 50px;
-webkit-animation: ball-scale-ripple 1s 0s infinite cubic-bezier(.21, .53, .56, .8);
-moz-animation: ball-scale-ripple 1s 0s infinite cubic-bezier(.21, .53, .56, .8);
-o-animation: ball-scale-ripple 1s 0s infinite cubic-bezier(.21, .53, .56, .8);
animation: ball-scale-ripple 1s 0s infinite cubic-bezier(.21, .53, .56, .8);
border: 2px solid #b8c2cc;
border-radius: 100%;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
}

View File

@@ -0,0 +1 @@
@-webkit-keyframes ball-scale-ripple{0%{-webkit-transform:scale(.1);transform:scale(.1);opacity:1}70%{-webkit-transform:scale(1);transform:scale(1);opacity:.7}100%{opacity:0}}@-moz-keyframes ball-scale-ripple{0%{-moz-transform:scale(.1);transform:scale(.1);opacity:1}70%{-moz-transform:scale(1);transform:scale(1);opacity:.7}100%{opacity:0}}@-o-keyframes ball-scale-ripple{0%{-o-transform:scale(.1);transform:scale(.1);opacity:1}70%{-o-transform:scale(1);transform:scale(1);opacity:.7}100%{opacity:0}}@keyframes ball-scale-ripple{0%{-webkit-transform:scale(.1);-moz-transform:scale(.1);-o-transform:scale(.1);transform:scale(.1);opacity:1}70%{-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);transform:scale(1);opacity:.7}100%{opacity:0}}.ball-scale-ripple>div{width:50px;height:50px;-webkit-animation:ball-scale-ripple 1s 0s infinite cubic-bezier(.21,.53,.56,.8);-moz-animation:ball-scale-ripple 1s 0s infinite cubic-bezier(.21,.53,.56,.8);-o-animation:ball-scale-ripple 1s 0s infinite cubic-bezier(.21,.53,.56,.8);animation:ball-scale-ripple 1s 0s infinite cubic-bezier(.21,.53,.56,.8);border:2px solid #b8c2cc;border-radius:100%;-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both}

View File

@@ -0,0 +1,91 @@
/*========================================================
DARK LAYOUT
=========================================================*/
@-webkit-keyframes ball-scale
{
0%
{
-webkit-transform: scale(0);
transform: scale(0);
}
100%
{
-webkit-transform: scale(1);
transform: scale(1);
opacity: 0;
}
}
@-moz-keyframes ball-scale
{
0%
{
-moz-transform: scale(0);
transform: scale(0);
}
100%
{
-moz-transform: scale(1);
transform: scale(1);
opacity: 0;
}
}
@-o-keyframes ball-scale
{
0%
{
-o-transform: scale(0);
transform: scale(0);
}
100%
{
-o-transform: scale(1);
transform: scale(1);
opacity: 0;
}
}
@keyframes ball-scale
{
0%
{
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
}
100%
{
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
opacity: 0;
}
}
.ball-scale > div
{
display: inline-block;
width: 15px;
width: 60px;
height: 15px;
height: 60px;
margin: 2px;
-webkit-animation: ball-scale 1s 0s ease-in-out infinite;
-moz-animation: ball-scale 1s 0s ease-in-out infinite;
-o-animation: ball-scale 1s 0s ease-in-out infinite;
animation: ball-scale 1s 0s ease-in-out 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;
}

View File

@@ -0,0 +1 @@
@-webkit-keyframes ball-scale{0%{-webkit-transform:scale(0);transform:scale(0)}100%{-webkit-transform:scale(1);transform:scale(1);opacity:0}}@-moz-keyframes ball-scale{0%{-moz-transform:scale(0);transform:scale(0)}100%{-moz-transform:scale(1);transform:scale(1);opacity:0}}@-o-keyframes ball-scale{0%{-o-transform:scale(0);transform:scale(0)}100%{-o-transform:scale(1);transform:scale(1);opacity:0}}@keyframes ball-scale{0%{-webkit-transform:scale(0);-moz-transform:scale(0);-o-transform:scale(0);transform:scale(0)}100%{-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);transform:scale(1);opacity:0}}.ball-scale>div{display:inline-block;width:15px;width:60px;height:15px;height:60px;margin:2px;-webkit-animation:ball-scale 1s 0s ease-in-out infinite;-moz-animation:ball-scale 1s 0s ease-in-out infinite;-o-animation:ball-scale 1s 0s ease-in-out infinite;animation:ball-scale 1s 0s ease-in-out 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}

View File

@@ -0,0 +1,178 @@
/*========================================================
DARK LAYOUT
=========================================================*/
@-webkit-keyframes ball-spin-fade-loader
{
50%
{
-webkit-transform: scale(.4);
transform: scale(.4);
opacity: .3;
}
100%
{
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
}
@-moz-keyframes ball-spin-fade-loader
{
50%
{
-moz-transform: scale(.4);
transform: scale(.4);
opacity: .3;
}
100%
{
-moz-transform: scale(1);
transform: scale(1);
opacity: 1;
}
}
@-o-keyframes ball-spin-fade-loader
{
50%
{
-o-transform: scale(.4);
transform: scale(.4);
opacity: .3;
}
100%
{
-o-transform: scale(1);
transform: scale(1);
opacity: 1;
}
}
@keyframes ball-spin-fade-loader
{
50%
{
-webkit-transform: scale(.4);
-moz-transform: scale(.4);
-o-transform: scale(.4);
transform: scale(.4);
opacity: .3;
}
100%
{
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
opacity: 1;
}
}
.ball-spin-fade-loader
{
position: relative;
top: -10px;
left: -10px;
}
.ball-spin-fade-loader > div:nth-child(1)
{
top: 25px;
left: 0;
-webkit-animation: ball-spin-fade-loader 1s -.96s infinite linear;
-moz-animation: ball-spin-fade-loader 1s -.96s infinite linear;
-o-animation: ball-spin-fade-loader 1s -.96s infinite linear;
animation: ball-spin-fade-loader 1s -.96s infinite linear;
}
.ball-spin-fade-loader > div:nth-child(2)
{
top: 17.04545px;
left: 17.04545px;
-webkit-animation: ball-spin-fade-loader 1s -.84s infinite linear;
-moz-animation: ball-spin-fade-loader 1s -.84s infinite linear;
-o-animation: ball-spin-fade-loader 1s -.84s infinite linear;
animation: ball-spin-fade-loader 1s -.84s infinite linear;
}
.ball-spin-fade-loader > div:nth-child(3)
{
top: 0;
left: 25px;
-webkit-animation: ball-spin-fade-loader 1s -.72s infinite linear;
-moz-animation: ball-spin-fade-loader 1s -.72s infinite linear;
-o-animation: ball-spin-fade-loader 1s -.72s infinite linear;
animation: ball-spin-fade-loader 1s -.72s infinite linear;
}
.ball-spin-fade-loader > div:nth-child(4)
{
top: -17.04545px;
left: 17.04545px;
-webkit-animation: ball-spin-fade-loader 1s -.6s infinite linear;
-moz-animation: ball-spin-fade-loader 1s -.6s infinite linear;
-o-animation: ball-spin-fade-loader 1s -.6s infinite linear;
animation: ball-spin-fade-loader 1s -.6s infinite linear;
}
.ball-spin-fade-loader > div:nth-child(5)
{
top: -25px;
left: 0;
-webkit-animation: ball-spin-fade-loader 1s -.48s infinite linear;
-moz-animation: ball-spin-fade-loader 1s -.48s infinite linear;
-o-animation: ball-spin-fade-loader 1s -.48s infinite linear;
animation: ball-spin-fade-loader 1s -.48s infinite linear;
}
.ball-spin-fade-loader > div:nth-child(6)
{
top: -17.04545px;
left: -17.04545px;
-webkit-animation: ball-spin-fade-loader 1s -.36s infinite linear;
-moz-animation: ball-spin-fade-loader 1s -.36s infinite linear;
-o-animation: ball-spin-fade-loader 1s -.36s infinite linear;
animation: ball-spin-fade-loader 1s -.36s infinite linear;
}
.ball-spin-fade-loader > div:nth-child(7)
{
top: 0;
left: -25px;
-webkit-animation: ball-spin-fade-loader 1s -.24s infinite linear;
-moz-animation: ball-spin-fade-loader 1s -.24s infinite linear;
-o-animation: ball-spin-fade-loader 1s -.24s infinite linear;
animation: ball-spin-fade-loader 1s -.24s infinite linear;
}
.ball-spin-fade-loader > div:nth-child(8)
{
top: 17.04545px;
left: -17.04545px;
-webkit-animation: ball-spin-fade-loader 1s -.12s infinite linear;
-moz-animation: ball-spin-fade-loader 1s -.12s infinite linear;
-o-animation: ball-spin-fade-loader 1s -.12s infinite linear;
animation: ball-spin-fade-loader 1s -.12s infinite linear;
}
.ball-spin-fade-loader > div
{
position: absolute;
width: 15px;
height: 15px;
margin: 2px;
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;
}

View File

@@ -0,0 +1 @@
@-webkit-keyframes ball-spin-fade-loader{50%{-webkit-transform:scale(.4);transform:scale(.4);opacity:.3}100%{-webkit-transform:scale(1);transform:scale(1);opacity:1}}@-moz-keyframes ball-spin-fade-loader{50%{-moz-transform:scale(.4);transform:scale(.4);opacity:.3}100%{-moz-transform:scale(1);transform:scale(1);opacity:1}}@-o-keyframes ball-spin-fade-loader{50%{-o-transform:scale(.4);transform:scale(.4);opacity:.3}100%{-o-transform:scale(1);transform:scale(1);opacity:1}}@keyframes ball-spin-fade-loader{50%{-webkit-transform:scale(.4);-moz-transform:scale(.4);-o-transform:scale(.4);transform:scale(.4);opacity:.3}100%{-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);transform:scale(1);opacity:1}}.ball-spin-fade-loader{position:relative;top:-10px;left:-10px}.ball-spin-fade-loader>div:nth-child(1){top:25px;left:0;-webkit-animation:ball-spin-fade-loader 1s -.96s infinite linear;-moz-animation:ball-spin-fade-loader 1s -.96s infinite linear;-o-animation:ball-spin-fade-loader 1s -.96s infinite linear;animation:ball-spin-fade-loader 1s -.96s infinite linear}.ball-spin-fade-loader>div:nth-child(2){top:17.05px;left:17.05px;-webkit-animation:ball-spin-fade-loader 1s -.84s infinite linear;-moz-animation:ball-spin-fade-loader 1s -.84s infinite linear;-o-animation:ball-spin-fade-loader 1s -.84s infinite linear;animation:ball-spin-fade-loader 1s -.84s infinite linear}.ball-spin-fade-loader>div:nth-child(3){top:0;left:25px;-webkit-animation:ball-spin-fade-loader 1s -.72s infinite linear;-moz-animation:ball-spin-fade-loader 1s -.72s infinite linear;-o-animation:ball-spin-fade-loader 1s -.72s infinite linear;animation:ball-spin-fade-loader 1s -.72s infinite linear}.ball-spin-fade-loader>div:nth-child(4){top:-17.05px;left:17.05px;-webkit-animation:ball-spin-fade-loader 1s -.6s infinite linear;-moz-animation:ball-spin-fade-loader 1s -.6s infinite linear;-o-animation:ball-spin-fade-loader 1s -.6s infinite linear;animation:ball-spin-fade-loader 1s -.6s infinite linear}.ball-spin-fade-loader>div:nth-child(5){top:-25px;left:0;-webkit-animation:ball-spin-fade-loader 1s -.48s infinite linear;-moz-animation:ball-spin-fade-loader 1s -.48s infinite linear;-o-animation:ball-spin-fade-loader 1s -.48s infinite linear;animation:ball-spin-fade-loader 1s -.48s infinite linear}.ball-spin-fade-loader>div:nth-child(6){top:-17.05px;left:-17.05px;-webkit-animation:ball-spin-fade-loader 1s -.36s infinite linear;-moz-animation:ball-spin-fade-loader 1s -.36s infinite linear;-o-animation:ball-spin-fade-loader 1s -.36s infinite linear;animation:ball-spin-fade-loader 1s -.36s infinite linear}.ball-spin-fade-loader>div:nth-child(7){top:0;left:-25px;-webkit-animation:ball-spin-fade-loader 1s -.24s infinite linear;-moz-animation:ball-spin-fade-loader 1s -.24s infinite linear;-o-animation:ball-spin-fade-loader 1s -.24s infinite linear;animation:ball-spin-fade-loader 1s -.24s infinite linear}.ball-spin-fade-loader>div:nth-child(8){top:17.05px;left:-17.05px;-webkit-animation:ball-spin-fade-loader 1s -.12s infinite linear;-moz-animation:ball-spin-fade-loader 1s -.12s infinite linear;-o-animation:ball-spin-fade-loader 1s -.12s infinite linear;animation:ball-spin-fade-loader 1s -.12s infinite linear}.ball-spin-fade-loader>div{position:absolute;width:15px;height:15px;margin:2px;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}

View File

@@ -0,0 +1,147 @@
/*========================================================
DARK LAYOUT
=========================================================*/
@-webkit-keyframes ball-spin-loader
{
75%
{
opacity: .2;
}
100%
{
opacity: 1;
}
}
@-moz-keyframes ball-spin-loader
{
75%
{
opacity: .2;
}
100%
{
opacity: 1;
}
}
@-o-keyframes ball-spin-loader
{
75%
{
opacity: .2;
}
100%
{
opacity: 1;
}
}
@keyframes ball-spin-loader
{
75%
{
opacity: .2;
}
100%
{
opacity: 1;
}
}
.ball-spin-loader
{
position: relative;
}
.ball-spin-loader > span:nth-child(1)
{
top: 45px;
left: 0;
-webkit-animation: ball-spin-loader 2s .9s infinite linear;
-moz-animation: ball-spin-loader 2s .9s infinite linear;
-o-animation: ball-spin-loader 2s .9s infinite linear;
animation: ball-spin-loader 2s .9s infinite linear;
}
.ball-spin-loader > span:nth-child(2)
{
top: 30.68182px;
left: 30.68182px;
-webkit-animation: ball-spin-loader 2s 1.8s infinite linear;
-moz-animation: ball-spin-loader 2s 1.8s infinite linear;
-o-animation: ball-spin-loader 2s 1.8s infinite linear;
animation: ball-spin-loader 2s 1.8s infinite linear;
}
.ball-spin-loader > span:nth-child(3)
{
top: 0;
left: 45px;
-webkit-animation: ball-spin-loader 2s 2.7s infinite linear;
-moz-animation: ball-spin-loader 2s 2.7s infinite linear;
-o-animation: ball-spin-loader 2s 2.7s infinite linear;
animation: ball-spin-loader 2s 2.7s infinite linear;
}
.ball-spin-loader > span:nth-child(4)
{
top: -30.68182px;
left: 30.68182px;
-webkit-animation: ball-spin-loader 2s 3.6s infinite linear;
-moz-animation: ball-spin-loader 2s 3.6s infinite linear;
-o-animation: ball-spin-loader 2s 3.6s infinite linear;
animation: ball-spin-loader 2s 3.6s infinite linear;
}
.ball-spin-loader > span:nth-child(5)
{
top: -45px;
left: 0;
-webkit-animation: ball-spin-loader 2s 4.5s infinite linear;
-moz-animation: ball-spin-loader 2s 4.5s infinite linear;
-o-animation: ball-spin-loader 2s 4.5s infinite linear;
animation: ball-spin-loader 2s 4.5s infinite linear;
}
.ball-spin-loader > span:nth-child(6)
{
top: -30.68182px;
left: -30.68182px;
-webkit-animation: ball-spin-loader 2s 5.4s infinite linear;
-moz-animation: ball-spin-loader 2s 5.4s infinite linear;
-o-animation: ball-spin-loader 2s 5.4s infinite linear;
animation: ball-spin-loader 2s 5.4s infinite linear;
}
.ball-spin-loader > span:nth-child(7)
{
top: 0;
left: -45px;
-webkit-animation: ball-spin-loader 2s 6.3s infinite linear;
-moz-animation: ball-spin-loader 2s 6.3s infinite linear;
-o-animation: ball-spin-loader 2s 6.3s infinite linear;
animation: ball-spin-loader 2s 6.3s infinite linear;
}
.ball-spin-loader > span:nth-child(8)
{
top: 30.68182px;
left: -30.68182px;
-webkit-animation: ball-spin-loader 2s 7.2s infinite linear;
-moz-animation: ball-spin-loader 2s 7.2s infinite linear;
-o-animation: ball-spin-loader 2s 7.2s infinite linear;
animation: ball-spin-loader 2s 7.2s infinite linear;
}
.ball-spin-loader > div
{
position: absolute;
width: 15px;
height: 15px;
border-radius: 100%;
background: green;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
}

View File

@@ -0,0 +1 @@
@-webkit-keyframes ball-spin-loader{75%{opacity:.2}100%{opacity:1}}@-moz-keyframes ball-spin-loader{75%{opacity:.2}100%{opacity:1}}@-o-keyframes ball-spin-loader{75%{opacity:.2}100%{opacity:1}}@keyframes ball-spin-loader{75%{opacity:.2}100%{opacity:1}}.ball-spin-loader{position:relative}.ball-spin-loader>span:nth-child(1){top:45px;left:0;-webkit-animation:ball-spin-loader 2s .9s infinite linear;-moz-animation:ball-spin-loader 2s .9s infinite linear;-o-animation:ball-spin-loader 2s .9s infinite linear;animation:ball-spin-loader 2s .9s infinite linear}.ball-spin-loader>span:nth-child(2){top:30.68px;left:30.68px;-webkit-animation:ball-spin-loader 2s 1.8s infinite linear;-moz-animation:ball-spin-loader 2s 1.8s infinite linear;-o-animation:ball-spin-loader 2s 1.8s infinite linear;animation:ball-spin-loader 2s 1.8s infinite linear}.ball-spin-loader>span:nth-child(3){top:0;left:45px;-webkit-animation:ball-spin-loader 2s 2.7s infinite linear;-moz-animation:ball-spin-loader 2s 2.7s infinite linear;-o-animation:ball-spin-loader 2s 2.7s infinite linear;animation:ball-spin-loader 2s 2.7s infinite linear}.ball-spin-loader>span:nth-child(4){top:-30.68px;left:30.68px;-webkit-animation:ball-spin-loader 2s 3.6s infinite linear;-moz-animation:ball-spin-loader 2s 3.6s infinite linear;-o-animation:ball-spin-loader 2s 3.6s infinite linear;animation:ball-spin-loader 2s 3.6s infinite linear}.ball-spin-loader>span:nth-child(5){top:-45px;left:0;-webkit-animation:ball-spin-loader 2s 4.5s infinite linear;-moz-animation:ball-spin-loader 2s 4.5s infinite linear;-o-animation:ball-spin-loader 2s 4.5s infinite linear;animation:ball-spin-loader 2s 4.5s infinite linear}.ball-spin-loader>span:nth-child(6){top:-30.68px;left:-30.68px;-webkit-animation:ball-spin-loader 2s 5.4s infinite linear;-moz-animation:ball-spin-loader 2s 5.4s infinite linear;-o-animation:ball-spin-loader 2s 5.4s infinite linear;animation:ball-spin-loader 2s 5.4s infinite linear}.ball-spin-loader>span:nth-child(7){top:0;left:-45px;-webkit-animation:ball-spin-loader 2s 6.3s infinite linear;-moz-animation:ball-spin-loader 2s 6.3s infinite linear;-o-animation:ball-spin-loader 2s 6.3s infinite linear;animation:ball-spin-loader 2s 6.3s infinite linear}.ball-spin-loader>span:nth-child(8){top:30.68px;left:-30.68px;-webkit-animation:ball-spin-loader 2s 7.2s infinite linear;-moz-animation:ball-spin-loader 2s 7.2s infinite linear;-o-animation:ball-spin-loader 2s 7.2s infinite linear;animation:ball-spin-loader 2s 7.2s infinite linear}.ball-spin-loader>div{position:absolute;width:15px;height:15px;border-radius:100%;background:green;-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both}

View File

@@ -0,0 +1,353 @@
/*========================================================
DARK LAYOUT
=========================================================*/
@-webkit-keyframes ball-triangle-path-1
{
33%
{
-webkit-transform: translate(25px, -50px);
transform: translate(25px, -50px);
}
66%
{
-webkit-transform: translate(50px, 0px);
transform: translate(50px, 0px);
}
100%
{
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
}
@-moz-keyframes ball-triangle-path-1
{
33%
{
-moz-transform: translate(25px, -50px);
transform: translate(25px, -50px);
}
66%
{
-moz-transform: translate(50px, 0px);
transform: translate(50px, 0px);
}
100%
{
-moz-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
}
@-o-keyframes ball-triangle-path-1
{
33%
{
-o-transform: translate(25px, -50px);
transform: translate(25px, -50px);
}
66%
{
-o-transform: translate(50px, 0px);
transform: translate(50px, 0px);
}
100%
{
-o-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
}
@keyframes ball-triangle-path-1
{
33%
{
-webkit-transform: translate(25px, -50px);
-moz-transform: translate(25px, -50px);
-o-transform: translate(25px, -50px);
transform: translate(25px, -50px);
}
66%
{
-webkit-transform: translate(50px, 0px);
-moz-transform: translate(50px, 0px);
-o-transform: translate(50px, 0px);
transform: translate(50px, 0px);
}
100%
{
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-o-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
}
@-webkit-keyframes ball-triangle-path-2
{
33%
{
-webkit-transform: translate(25px, 50px);
transform: translate(25px, 50px);
}
66%
{
-webkit-transform: translate(-25px, 50px);
transform: translate(-25px, 50px);
}
100%
{
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
}
@-moz-keyframes ball-triangle-path-2
{
33%
{
-moz-transform: translate(25px, 50px);
transform: translate(25px, 50px);
}
66%
{
-moz-transform: translate(-25px, 50px);
transform: translate(-25px, 50px);
}
100%
{
-moz-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
}
@-o-keyframes ball-triangle-path-2
{
33%
{
-o-transform: translate(25px, 50px);
transform: translate(25px, 50px);
}
66%
{
-o-transform: translate(-25px, 50px);
transform: translate(-25px, 50px);
}
100%
{
-o-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
}
@keyframes ball-triangle-path-2
{
33%
{
-webkit-transform: translate(25px, 50px);
-moz-transform: translate(25px, 50px);
-o-transform: translate(25px, 50px);
transform: translate(25px, 50px);
}
66%
{
-webkit-transform: translate(-25px, 50px);
-moz-transform: translate(-25px, 50px);
-o-transform: translate(-25px, 50px);
transform: translate(-25px, 50px);
}
100%
{
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-o-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
}
@-webkit-keyframes ball-triangle-path-3
{
33%
{
-webkit-transform: translate(-50px, 0px);
transform: translate(-50px, 0px);
}
66%
{
-webkit-transform: translate(-25px, -50px);
transform: translate(-25px, -50px);
}
100%
{
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
}
@-moz-keyframes ball-triangle-path-3
{
33%
{
-moz-transform: translate(-50px, 0px);
transform: translate(-50px, 0px);
}
66%
{
-moz-transform: translate(-25px, -50px);
transform: translate(-25px, -50px);
}
100%
{
-moz-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
}
@-o-keyframes ball-triangle-path-3
{
33%
{
-o-transform: translate(-50px, 0px);
transform: translate(-50px, 0px);
}
66%
{
-o-transform: translate(-25px, -50px);
transform: translate(-25px, -50px);
}
100%
{
-o-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
}
@keyframes ball-triangle-path-3
{
33%
{
-webkit-transform: translate(-50px, 0px);
-moz-transform: translate(-50px, 0px);
-o-transform: translate(-50px, 0px);
transform: translate(-50px, 0px);
}
66%
{
-webkit-transform: translate(-25px, -50px);
-moz-transform: translate(-25px, -50px);
-o-transform: translate(-25px, -50px);
transform: translate(-25px, -50px);
}
100%
{
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-o-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
}
.ball-triangle-path
{
position: relative;
-webkit-transform: translate(-29.994px, -37.50938px);
-moz-transform: translate(-29.994px, -37.50938px);
-ms-transform: translate(-29.994px, -37.50938px);
-o-transform: translate(-29.994px, -37.50938px);
transform: translate(-29.994px, -37.50938px);
}
.ball-triangle-path > div:nth-child(1)
{
-webkit-animation-name: ball-triangle-path-1;
-moz-animation-name: ball-triangle-path-1;
-o-animation-name: ball-triangle-path-1;
animation-name: ball-triangle-path-1;
-webkit-animation-duration: 2s;
-moz-animation-duration: 2s;
-o-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-timing-function: ease-in-out;
-moz-animation-timing-function: ease-in-out;
-o-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-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;
}
.ball-triangle-path > div:nth-child(2)
{
-webkit-animation-name: ball-triangle-path-2;
-moz-animation-name: ball-triangle-path-2;
-o-animation-name: ball-triangle-path-2;
animation-name: ball-triangle-path-2;
-webkit-animation-duration: 2s;
-moz-animation-duration: 2s;
-o-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-timing-function: ease-in-out;
-moz-animation-timing-function: ease-in-out;
-o-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-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;
}
.ball-triangle-path > div:nth-child(3)
{
-webkit-animation-name: ball-triangle-path-3;
-moz-animation-name: ball-triangle-path-3;
-o-animation-name: ball-triangle-path-3;
animation-name: ball-triangle-path-3;
-webkit-animation-duration: 2s;
-moz-animation-duration: 2s;
-o-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-timing-function: ease-in-out;
-moz-animation-timing-function: ease-in-out;
-o-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-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;
}
.ball-triangle-path > div
{
position: absolute;
width: 10px;
height: 10px;
border: 1px solid #b8c2cc;
border-radius: 100%;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
}
.ball-triangle-path > div:nth-of-type(1)
{
top: 50px;
}
.ball-triangle-path > div:nth-of-type(2)
{
left: 25px;
}
.ball-triangle-path > div:nth-of-type(3)
{
top: 50px;
left: 50px;
}

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,339 @@
/*========================================================
DARK LAYOUT
=========================================================*/
@-webkit-keyframes ball-zig-deflect
{
17%
{
-webkit-transform: translate(-15px, -30px);
transform: translate(-15px, -30px);
}
34%
{
-webkit-transform: translate(15px, -30px);
transform: translate(15px, -30px);
}
50%
{
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
67%
{
-webkit-transform: translate(15px, -30px);
transform: translate(15px, -30px);
}
84%
{
-webkit-transform: translate(-15px, -30px);
transform: translate(-15px, -30px);
}
100%
{
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
}
@-moz-keyframes ball-zig-deflect
{
17%
{
-moz-transform: translate(-15px, -30px);
transform: translate(-15px, -30px);
}
34%
{
-moz-transform: translate(15px, -30px);
transform: translate(15px, -30px);
}
50%
{
-moz-transform: translate(0, 0);
transform: translate(0, 0);
}
67%
{
-moz-transform: translate(15px, -30px);
transform: translate(15px, -30px);
}
84%
{
-moz-transform: translate(-15px, -30px);
transform: translate(-15px, -30px);
}
100%
{
-moz-transform: translate(0, 0);
transform: translate(0, 0);
}
}
@-o-keyframes ball-zig-deflect
{
17%
{
-o-transform: translate(-15px, -30px);
transform: translate(-15px, -30px);
}
34%
{
-o-transform: translate(15px, -30px);
transform: translate(15px, -30px);
}
50%
{
-o-transform: translate(0, 0);
transform: translate(0, 0);
}
67%
{
-o-transform: translate(15px, -30px);
transform: translate(15px, -30px);
}
84%
{
-o-transform: translate(-15px, -30px);
transform: translate(-15px, -30px);
}
100%
{
-o-transform: translate(0, 0);
transform: translate(0, 0);
}
}
@keyframes ball-zig-deflect
{
17%
{
-webkit-transform: translate(-15px, -30px);
-moz-transform: translate(-15px, -30px);
-o-transform: translate(-15px, -30px);
transform: translate(-15px, -30px);
}
34%
{
-webkit-transform: translate(15px, -30px);
-moz-transform: translate(15px, -30px);
-o-transform: translate(15px, -30px);
transform: translate(15px, -30px);
}
50%
{
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-o-transform: translate(0, 0);
transform: translate(0, 0);
}
67%
{
-webkit-transform: translate(15px, -30px);
-moz-transform: translate(15px, -30px);
-o-transform: translate(15px, -30px);
transform: translate(15px, -30px);
}
84%
{
-webkit-transform: translate(-15px, -30px);
-moz-transform: translate(-15px, -30px);
-o-transform: translate(-15px, -30px);
transform: translate(-15px, -30px);
}
100%
{
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-o-transform: translate(0, 0);
transform: translate(0, 0);
}
}
@-webkit-keyframes ball-zag-deflect
{
17%
{
-webkit-transform: translate(15px, 30px);
transform: translate(15px, 30px);
}
34%
{
-webkit-transform: translate(-15px, 30px);
transform: translate(-15px, 30px);
}
50%
{
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
67%
{
-webkit-transform: translate(-15px, 30px);
transform: translate(-15px, 30px);
}
84%
{
-webkit-transform: translate(15px, 30px);
transform: translate(15px, 30px);
}
100%
{
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
}
@-moz-keyframes ball-zag-deflect
{
17%
{
-moz-transform: translate(15px, 30px);
transform: translate(15px, 30px);
}
34%
{
-moz-transform: translate(-15px, 30px);
transform: translate(-15px, 30px);
}
50%
{
-moz-transform: translate(0, 0);
transform: translate(0, 0);
}
67%
{
-moz-transform: translate(-15px, 30px);
transform: translate(-15px, 30px);
}
84%
{
-moz-transform: translate(15px, 30px);
transform: translate(15px, 30px);
}
100%
{
-moz-transform: translate(0, 0);
transform: translate(0, 0);
}
}
@-o-keyframes ball-zag-deflect
{
17%
{
-o-transform: translate(15px, 30px);
transform: translate(15px, 30px);
}
34%
{
-o-transform: translate(-15px, 30px);
transform: translate(-15px, 30px);
}
50%
{
-o-transform: translate(0, 0);
transform: translate(0, 0);
}
67%
{
-o-transform: translate(-15px, 30px);
transform: translate(-15px, 30px);
}
84%
{
-o-transform: translate(15px, 30px);
transform: translate(15px, 30px);
}
100%
{
-o-transform: translate(0, 0);
transform: translate(0, 0);
}
}
@keyframes ball-zag-deflect
{
17%
{
-webkit-transform: translate(15px, 30px);
-moz-transform: translate(15px, 30px);
-o-transform: translate(15px, 30px);
transform: translate(15px, 30px);
}
34%
{
-webkit-transform: translate(-15px, 30px);
-moz-transform: translate(-15px, 30px);
-o-transform: translate(-15px, 30px);
transform: translate(-15px, 30px);
}
50%
{
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-o-transform: translate(0, 0);
transform: translate(0, 0);
}
67%
{
-webkit-transform: translate(-15px, 30px);
-moz-transform: translate(-15px, 30px);
-o-transform: translate(-15px, 30px);
transform: translate(-15px, 30px);
}
84%
{
-webkit-transform: translate(15px, 30px);
-moz-transform: translate(15px, 30px);
-o-transform: translate(15px, 30px);
transform: translate(15px, 30px);
}
100%
{
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-o-transform: translate(0, 0);
transform: translate(0, 0);
}
}
.ball-zig-zag-deflect
{
position: relative;
-webkit-transform: translate(-15px, -15px);
-moz-transform: translate(-15px, -15px);
-ms-transform: translate(-15px, -15px);
-o-transform: translate(-15px, -15px);
transform: translate(-15px, -15px);
}
.ball-zig-zag-deflect > div
{
position: absolute;
top: 4px;
left: -7px;
width: 15px;
height: 15px;
margin: 2px;
margin-left: 15px;
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;
}
.ball-zig-zag-deflect > div:first-child
{
-webkit-animation: ball-zig-deflect 1.5s 0s infinite linear;
-moz-animation: ball-zig-deflect 1.5s 0s infinite linear;
-o-animation: ball-zig-deflect 1.5s 0s infinite linear;
animation: ball-zig-deflect 1.5s 0s infinite linear;
}
.ball-zig-zag-deflect > div:last-child
{
-webkit-animation: ball-zag-deflect 1.5s 0s infinite linear;
-moz-animation: ball-zag-deflect 1.5s 0s infinite linear;
-o-animation: ball-zag-deflect 1.5s 0s infinite linear;
animation: ball-zag-deflect 1.5s 0s infinite linear;
}

View File

@@ -0,0 +1 @@
@-webkit-keyframes ball-zig-deflect{17%,84%{-webkit-transform:translate(-15px,-30px);transform:translate(-15px,-30px)}34%,67%{-webkit-transform:translate(15px,-30px);transform:translate(15px,-30px)}100%,50%{-webkit-transform:translate(0,0);transform:translate(0,0)}}@-moz-keyframes ball-zig-deflect{17%,84%{-moz-transform:translate(-15px,-30px);transform:translate(-15px,-30px)}34%,67%{-moz-transform:translate(15px,-30px);transform:translate(15px,-30px)}100%,50%{-moz-transform:translate(0,0);transform:translate(0,0)}}@-o-keyframes ball-zig-deflect{17%,84%{-o-transform:translate(-15px,-30px);transform:translate(-15px,-30px)}34%,67%{-o-transform:translate(15px,-30px);transform:translate(15px,-30px)}100%,50%{-o-transform:translate(0,0);transform:translate(0,0)}}@keyframes ball-zig-deflect{17%,84%{-webkit-transform:translate(-15px,-30px);-moz-transform:translate(-15px,-30px);-o-transform:translate(-15px,-30px);transform:translate(-15px,-30px)}34%,67%{-webkit-transform:translate(15px,-30px);-moz-transform:translate(15px,-30px);-o-transform:translate(15px,-30px);transform:translate(15px,-30px)}100%,50%{-webkit-transform:translate(0,0);-moz-transform:translate(0,0);-o-transform:translate(0,0);transform:translate(0,0)}}@-webkit-keyframes ball-zag-deflect{17%,84%{-webkit-transform:translate(15px,30px);transform:translate(15px,30px)}34%,67%{-webkit-transform:translate(-15px,30px);transform:translate(-15px,30px)}100%,50%{-webkit-transform:translate(0,0);transform:translate(0,0)}}@-moz-keyframes ball-zag-deflect{17%,84%{-moz-transform:translate(15px,30px);transform:translate(15px,30px)}34%,67%{-moz-transform:translate(-15px,30px);transform:translate(-15px,30px)}100%,50%{-moz-transform:translate(0,0);transform:translate(0,0)}}@-o-keyframes ball-zag-deflect{17%,84%{-o-transform:translate(15px,30px);transform:translate(15px,30px)}34%,67%{-o-transform:translate(-15px,30px);transform:translate(-15px,30px)}100%,50%{-o-transform:translate(0,0);transform:translate(0,0)}}@keyframes ball-zag-deflect{17%,84%{-webkit-transform:translate(15px,30px);-moz-transform:translate(15px,30px);-o-transform:translate(15px,30px);transform:translate(15px,30px)}34%,67%{-webkit-transform:translate(-15px,30px);-moz-transform:translate(-15px,30px);-o-transform:translate(-15px,30px);transform:translate(-15px,30px)}100%,50%{-webkit-transform:translate(0,0);-moz-transform:translate(0,0);-o-transform:translate(0,0);transform:translate(0,0)}}.ball-zig-zag-deflect{position:relative;-webkit-transform:translate(-15px,-15px);-moz-transform:translate(-15px,-15px);-ms-transform:translate(-15px,-15px);-o-transform:translate(-15px,-15px);transform:translate(-15px,-15px)}.ball-zig-zag-deflect>div{position:absolute;top:4px;left:-7px;width:15px;height:15px;margin:2px 2px 2px 15px;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}.ball-zig-zag-deflect>div:first-child{-webkit-animation:ball-zig-deflect 1.5s 0s infinite linear;-moz-animation:ball-zig-deflect 1.5s 0s infinite linear;-o-animation:ball-zig-deflect 1.5s 0s infinite linear;animation:ball-zig-deflect 1.5s 0s infinite linear}.ball-zig-zag-deflect>div:last-child{-webkit-animation:ball-zag-deflect 1.5s 0s infinite linear;-moz-animation:ball-zag-deflect 1.5s 0s infinite linear;-o-animation:ball-zag-deflect 1.5s 0s infinite linear;animation:ball-zag-deflect 1.5s 0s infinite linear}

View File

@@ -0,0 +1,207 @@
/*========================================================
DARK LAYOUT
=========================================================*/
@-webkit-keyframes ball-zig
{
33%
{
-webkit-transform: translate(-15px, -30px);
transform: translate(-15px, -30px);
}
66%
{
-webkit-transform: translate(15px, -30px);
transform: translate(15px, -30px);
}
100%
{
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
}
@-moz-keyframes ball-zig
{
33%
{
-moz-transform: translate(-15px, -30px);
transform: translate(-15px, -30px);
}
66%
{
-moz-transform: translate(15px, -30px);
transform: translate(15px, -30px);
}
100%
{
-moz-transform: translate(0, 0);
transform: translate(0, 0);
}
}
@-o-keyframes ball-zig
{
33%
{
-o-transform: translate(-15px, -30px);
transform: translate(-15px, -30px);
}
66%
{
-o-transform: translate(15px, -30px);
transform: translate(15px, -30px);
}
100%
{
-o-transform: translate(0, 0);
transform: translate(0, 0);
}
}
@keyframes ball-zig
{
33%
{
-webkit-transform: translate(-15px, -30px);
-moz-transform: translate(-15px, -30px);
-o-transform: translate(-15px, -30px);
transform: translate(-15px, -30px);
}
66%
{
-webkit-transform: translate(15px, -30px);
-moz-transform: translate(15px, -30px);
-o-transform: translate(15px, -30px);
transform: translate(15px, -30px);
}
100%
{
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-o-transform: translate(0, 0);
transform: translate(0, 0);
}
}
@-webkit-keyframes ball-zag
{
33%
{
-webkit-transform: translate(15px, 30px);
transform: translate(15px, 30px);
}
66%
{
-webkit-transform: translate(-15px, 30px);
transform: translate(-15px, 30px);
}
100%
{
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
}
@-moz-keyframes ball-zag
{
33%
{
-moz-transform: translate(15px, 30px);
transform: translate(15px, 30px);
}
66%
{
-moz-transform: translate(-15px, 30px);
transform: translate(-15px, 30px);
}
100%
{
-moz-transform: translate(0, 0);
transform: translate(0, 0);
}
}
@-o-keyframes ball-zag
{
33%
{
-o-transform: translate(15px, 30px);
transform: translate(15px, 30px);
}
66%
{
-o-transform: translate(-15px, 30px);
transform: translate(-15px, 30px);
}
100%
{
-o-transform: translate(0, 0);
transform: translate(0, 0);
}
}
@keyframes ball-zag
{
33%
{
-webkit-transform: translate(15px, 30px);
-moz-transform: translate(15px, 30px);
-o-transform: translate(15px, 30px);
transform: translate(15px, 30px);
}
66%
{
-webkit-transform: translate(-15px, 30px);
-moz-transform: translate(-15px, 30px);
-o-transform: translate(-15px, 30px);
transform: translate(-15px, 30px);
}
100%
{
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-o-transform: translate(0, 0);
transform: translate(0, 0);
}
}
.ball-zig-zag
{
position: relative;
-webkit-transform: translate(-15px, -15px);
-moz-transform: translate(-15px, -15px);
-ms-transform: translate(-15px, -15px);
-o-transform: translate(-15px, -15px);
transform: translate(-15px, -15px);
}
.ball-zig-zag > div
{
position: absolute;
top: 4px;
left: -7px;
width: 15px;
height: 15px;
margin: 2px;
margin-left: 15px;
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;
}
.ball-zig-zag > div:first-child
{
-webkit-animation: ball-zig .7s 0s infinite linear;
-moz-animation: ball-zig .7s 0s infinite linear;
-o-animation: ball-zig .7s 0s infinite linear;
animation: ball-zig .7s 0s infinite linear;
}
.ball-zig-zag > div:last-child
{
-webkit-animation: ball-zag .7s 0s infinite linear;
-moz-animation: ball-zag .7s 0s infinite linear;
-o-animation: ball-zag .7s 0s infinite linear;
animation: ball-zag .7s 0s infinite linear;
}

View File

@@ -0,0 +1 @@
@-webkit-keyframes ball-zig{33%{-webkit-transform:translate(-15px,-30px);transform:translate(-15px,-30px)}66%{-webkit-transform:translate(15px,-30px);transform:translate(15px,-30px)}100%{-webkit-transform:translate(0,0);transform:translate(0,0)}}@-moz-keyframes ball-zig{33%{-moz-transform:translate(-15px,-30px);transform:translate(-15px,-30px)}66%{-moz-transform:translate(15px,-30px);transform:translate(15px,-30px)}100%{-moz-transform:translate(0,0);transform:translate(0,0)}}@-o-keyframes ball-zig{33%{-o-transform:translate(-15px,-30px);transform:translate(-15px,-30px)}66%{-o-transform:translate(15px,-30px);transform:translate(15px,-30px)}100%{-o-transform:translate(0,0);transform:translate(0,0)}}@keyframes ball-zig{33%{-webkit-transform:translate(-15px,-30px);-moz-transform:translate(-15px,-30px);-o-transform:translate(-15px,-30px);transform:translate(-15px,-30px)}66%{-webkit-transform:translate(15px,-30px);-moz-transform:translate(15px,-30px);-o-transform:translate(15px,-30px);transform:translate(15px,-30px)}100%{-webkit-transform:translate(0,0);-moz-transform:translate(0,0);-o-transform:translate(0,0);transform:translate(0,0)}}@-webkit-keyframes ball-zag{33%{-webkit-transform:translate(15px,30px);transform:translate(15px,30px)}66%{-webkit-transform:translate(-15px,30px);transform:translate(-15px,30px)}100%{-webkit-transform:translate(0,0);transform:translate(0,0)}}@-moz-keyframes ball-zag{33%{-moz-transform:translate(15px,30px);transform:translate(15px,30px)}66%{-moz-transform:translate(-15px,30px);transform:translate(-15px,30px)}100%{-moz-transform:translate(0,0);transform:translate(0,0)}}@-o-keyframes ball-zag{33%{-o-transform:translate(15px,30px);transform:translate(15px,30px)}66%{-o-transform:translate(-15px,30px);transform:translate(-15px,30px)}100%{-o-transform:translate(0,0);transform:translate(0,0)}}@keyframes ball-zag{33%{-webkit-transform:translate(15px,30px);-moz-transform:translate(15px,30px);-o-transform:translate(15px,30px);transform:translate(15px,30px)}66%{-webkit-transform:translate(-15px,30px);-moz-transform:translate(-15px,30px);-o-transform:translate(-15px,30px);transform:translate(-15px,30px)}100%{-webkit-transform:translate(0,0);-moz-transform:translate(0,0);-o-transform:translate(0,0);transform:translate(0,0)}}.ball-zig-zag{position:relative;-webkit-transform:translate(-15px,-15px);-moz-transform:translate(-15px,-15px);-ms-transform:translate(-15px,-15px);-o-transform:translate(-15px,-15px);transform:translate(-15px,-15px)}.ball-zig-zag>div{position:absolute;top:4px;left:-7px;width:15px;height:15px;margin:2px 2px 2px 15px;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}.ball-zig-zag>div:first-child{-webkit-animation:ball-zig .7s 0s infinite linear;-moz-animation:ball-zig .7s 0s infinite linear;-o-animation:ball-zig .7s 0s infinite linear;animation:ball-zig .7s 0s infinite linear}.ball-zig-zag>div:last-child{-webkit-animation:ball-zag .7s 0s infinite linear;-moz-animation:ball-zag .7s 0s infinite linear;-o-animation:ball-zag .7s 0s infinite linear;animation:ball-zag .7s 0s infinite linear}

View File

@@ -0,0 +1,142 @@
/*========================================================
DARK LAYOUT
=========================================================*/
@-webkit-keyframes cube-transition
{
25%
{
-webkit-transform: translateX(50px) scale(.5) rotate(-90deg);
transform: translateX(50px) scale(.5) rotate(-90deg);
}
50%
{
-webkit-transform: translate(50px, 50px) rotate(-180deg);
transform: translate(50px, 50px) rotate(-180deg);
}
75%
{
-webkit-transform: translateY(50px) scale(.5) rotate(-270deg);
transform: translateY(50px) scale(.5) rotate(-270deg);
}
100%
{
-webkit-transform: rotate(-360deg);
transform: rotate(-360deg);
}
}
@-moz-keyframes cube-transition
{
25%
{
-moz-transform: translateX(50px) scale(.5) rotate(-90deg);
transform: translateX(50px) scale(.5) rotate(-90deg);
}
50%
{
-moz-transform: translate(50px, 50px) rotate(-180deg);
transform: translate(50px, 50px) rotate(-180deg);
}
75%
{
-moz-transform: translateY(50px) scale(.5) rotate(-270deg);
transform: translateY(50px) scale(.5) rotate(-270deg);
}
100%
{
-moz-transform: rotate(-360deg);
transform: rotate(-360deg);
}
}
@-o-keyframes cube-transition
{
25%
{
-o-transform: translateX(50px) scale(.5) rotate(-90deg);
transform: translateX(50px) scale(.5) rotate(-90deg);
}
50%
{
-o-transform: translate(50px, 50px) rotate(-180deg);
transform: translate(50px, 50px) rotate(-180deg);
}
75%
{
-o-transform: translateY(50px) scale(.5) rotate(-270deg);
transform: translateY(50px) scale(.5) rotate(-270deg);
}
100%
{
-o-transform: rotate(-360deg);
transform: rotate(-360deg);
}
}
@keyframes cube-transition
{
25%
{
-webkit-transform: translateX(50px) scale(.5) rotate(-90deg);
-moz-transform: translateX(50px) scale(.5) rotate(-90deg);
-o-transform: translateX(50px) scale(.5) rotate(-90deg);
transform: translateX(50px) scale(.5) rotate(-90deg);
}
50%
{
-webkit-transform: translate(50px, 50px) rotate(-180deg);
-moz-transform: translate(50px, 50px) rotate(-180deg);
-o-transform: translate(50px, 50px) rotate(-180deg);
transform: translate(50px, 50px) rotate(-180deg);
}
75%
{
-webkit-transform: translateY(50px) scale(.5) rotate(-270deg);
-moz-transform: translateY(50px) scale(.5) rotate(-270deg);
-o-transform: translateY(50px) scale(.5) rotate(-270deg);
transform: translateY(50px) scale(.5) rotate(-270deg);
}
100%
{
-webkit-transform: rotate(-360deg);
-moz-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
transform: rotate(-360deg);
}
}
.cube-transition
{
position: relative;
-webkit-transform: translate(-25px, -25px);
-moz-transform: translate(-25px, -25px);
-ms-transform: translate(-25px, -25px);
-o-transform: translate(-25px, -25px);
transform: translate(-25px, -25px);
}
.cube-transition > div
{
position: absolute;
top: -5px;
left: -5px;
width: 10px;
height: 10px;
-webkit-animation: cube-transition 1.6s 0s infinite ease-in-out;
-moz-animation: cube-transition 1.6s 0s infinite ease-in-out;
-o-animation: cube-transition 1.6s 0s infinite ease-in-out;
animation: cube-transition 1.6s 0s infinite ease-in-out;
background-color: #b8c2cc;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
}
.cube-transition > div:last-child
{
-webkit-animation-delay: -.8s;
-moz-animation-delay: -.8s;
-o-animation-delay: -.8s;
animation-delay: -.8s;
}

View File

@@ -0,0 +1 @@
@-webkit-keyframes cube-transition{25%{-webkit-transform:translateX(50px) scale(.5) rotate(-90deg);transform:translateX(50px) scale(.5) rotate(-90deg)}50%{-webkit-transform:translate(50px,50px) rotate(-180deg);transform:translate(50px,50px) rotate(-180deg)}75%{-webkit-transform:translateY(50px) scale(.5) rotate(-270deg);transform:translateY(50px) scale(.5) rotate(-270deg)}100%{-webkit-transform:rotate(-360deg);transform:rotate(-360deg)}}@-moz-keyframes cube-transition{25%{-moz-transform:translateX(50px) scale(.5) rotate(-90deg);transform:translateX(50px) scale(.5) rotate(-90deg)}50%{-moz-transform:translate(50px,50px) rotate(-180deg);transform:translate(50px,50px) rotate(-180deg)}75%{-moz-transform:translateY(50px) scale(.5) rotate(-270deg);transform:translateY(50px) scale(.5) rotate(-270deg)}100%{-moz-transform:rotate(-360deg);transform:rotate(-360deg)}}@-o-keyframes cube-transition{25%{-o-transform:translateX(50px) scale(.5) rotate(-90deg);transform:translateX(50px) scale(.5) rotate(-90deg)}50%{-o-transform:translate(50px,50px) rotate(-180deg);transform:translate(50px,50px) rotate(-180deg)}75%{-o-transform:translateY(50px) scale(.5) rotate(-270deg);transform:translateY(50px) scale(.5) rotate(-270deg)}100%{-o-transform:rotate(-360deg);transform:rotate(-360deg)}}@keyframes cube-transition{25%{-webkit-transform:translateX(50px) scale(.5) rotate(-90deg);-moz-transform:translateX(50px) scale(.5) rotate(-90deg);-o-transform:translateX(50px) scale(.5) rotate(-90deg);transform:translateX(50px) scale(.5) rotate(-90deg)}50%{-webkit-transform:translate(50px,50px) rotate(-180deg);-moz-transform:translate(50px,50px) rotate(-180deg);-o-transform:translate(50px,50px) rotate(-180deg);transform:translate(50px,50px) rotate(-180deg)}75%{-webkit-transform:translateY(50px) scale(.5) rotate(-270deg);-moz-transform:translateY(50px) scale(.5) rotate(-270deg);-o-transform:translateY(50px) scale(.5) rotate(-270deg);transform:translateY(50px) scale(.5) rotate(-270deg)}100%{-webkit-transform:rotate(-360deg);-moz-transform:rotate(-360deg);-o-transform:rotate(-360deg);transform:rotate(-360deg)}}.cube-transition{position:relative;-webkit-transform:translate(-25px,-25px);-moz-transform:translate(-25px,-25px);-ms-transform:translate(-25px,-25px);-o-transform:translate(-25px,-25px);transform:translate(-25px,-25px)}.cube-transition>div{position:absolute;top:-5px;left:-5px;width:10px;height:10px;-webkit-animation:cube-transition 1.6s 0s infinite ease-in-out;-moz-animation:cube-transition 1.6s 0s infinite ease-in-out;-o-animation:cube-transition 1.6s 0s infinite ease-in-out;animation:cube-transition 1.6s 0s infinite ease-in-out;background-color:#b8c2cc;-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both}.cube-transition>div:last-child{-webkit-animation-delay:-.8s;-moz-animation-delay:-.8s;-o-animation-delay:-.8s;animation-delay:-.8s}

View File

@@ -0,0 +1,120 @@
/*========================================================
DARK LAYOUT
=========================================================*/
@-webkit-keyframes line-scale-pulse-out-rapid
{
0%
{
-webkit-transform: scaley(1);
transform: scaley(1);
}
80%
{
-webkit-transform: scaley(.3);
transform: scaley(.3);
}
90%
{
-webkit-transform: scaley(1);
transform: scaley(1);
}
}
@-moz-keyframes line-scale-pulse-out-rapid
{
0%
{
-moz-transform: scaley(1);
transform: scaley(1);
}
80%
{
-moz-transform: scaley(.3);
transform: scaley(.3);
}
90%
{
-moz-transform: scaley(1);
transform: scaley(1);
}
}
@-o-keyframes line-scale-pulse-out-rapid
{
0%
{
-o-transform: scaley(1);
transform: scaley(1);
}
80%
{
-o-transform: scaley(.3);
transform: scaley(.3);
}
90%
{
-o-transform: scaley(1);
transform: scaley(1);
}
}
@keyframes line-scale-pulse-out-rapid
{
0%
{
-webkit-transform: scaley(1);
-moz-transform: scaley(1);
-o-transform: scaley(1);
transform: scaley(1);
}
80%
{
-webkit-transform: scaley(.3);
-moz-transform: scaley(.3);
-o-transform: scaley(.3);
transform: scaley(.3);
}
90%
{
-webkit-transform: scaley(1);
-moz-transform: scaley(1);
-o-transform: scaley(1);
transform: scaley(1);
}
}
.line-scale-pulse-out-rapid > div
{
display: inline-block;
width: 4px;
height: 3.45rem;
margin: 2px;
-webkit-animation: line-scale-pulse-out-rapid .9s -.5s infinite cubic-bezier(.11, .49, .38, .78);
-moz-animation: line-scale-pulse-out-rapid .9s -.5s infinite cubic-bezier(.11, .49, .38, .78);
-o-animation: line-scale-pulse-out-rapid .9s -.5s infinite cubic-bezier(.11, .49, .38, .78);
animation: line-scale-pulse-out-rapid .9s -.5s infinite cubic-bezier(.11, .49, .38, .78);
vertical-align: middle;
border-radius: 2px;
background-color: #b8c2cc;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
}
.line-scale-pulse-out-rapid > div:nth-child(2),
.line-scale-pulse-out-rapid > div:nth-child(4)
{
-webkit-animation-delay: -.25s !important;
-moz-animation-delay: -.25s !important;
-o-animation-delay: -.25s !important;
animation-delay: -.25s !important;
}
.line-scale-pulse-out-rapid > div:nth-child(1),
.line-scale-pulse-out-rapid > div:nth-child(5)
{
-webkit-animation-delay: 0s !important;
-moz-animation-delay: 0s !important;
-o-animation-delay: 0s !important;
animation-delay: 0s !important;
}

View File

@@ -0,0 +1 @@
@-webkit-keyframes line-scale-pulse-out-rapid{0%,90%{-webkit-transform:scaley(1);transform:scaley(1)}80%{-webkit-transform:scaley(.3);transform:scaley(.3)}}@-moz-keyframes line-scale-pulse-out-rapid{0%,90%{-moz-transform:scaley(1);transform:scaley(1)}80%{-moz-transform:scaley(.3);transform:scaley(.3)}}@-o-keyframes line-scale-pulse-out-rapid{0%,90%{-o-transform:scaley(1);transform:scaley(1)}80%{-o-transform:scaley(.3);transform:scaley(.3)}}@keyframes line-scale-pulse-out-rapid{0%,90%{-webkit-transform:scaley(1);-moz-transform:scaley(1);-o-transform:scaley(1);transform:scaley(1)}80%{-webkit-transform:scaley(.3);-moz-transform:scaley(.3);-o-transform:scaley(.3);transform:scaley(.3)}}.line-scale-pulse-out-rapid>div{display:inline-block;width:4px;height:3.45rem;margin:2px;-webkit-animation:line-scale-pulse-out-rapid .9s -.5s infinite cubic-bezier(.11,.49,.38,.78);-moz-animation:line-scale-pulse-out-rapid .9s -.5s infinite cubic-bezier(.11,.49,.38,.78);-o-animation:line-scale-pulse-out-rapid .9s -.5s infinite cubic-bezier(.11,.49,.38,.78);animation:line-scale-pulse-out-rapid .9s -.5s infinite cubic-bezier(.11,.49,.38,.78);vertical-align:middle;border-radius:2px;background-color:#b8c2cc;-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both}.line-scale-pulse-out-rapid>div:nth-child(2),.line-scale-pulse-out-rapid>div:nth-child(4){-webkit-animation-delay:-.25s!important;-moz-animation-delay:-.25s!important;-o-animation-delay:-.25s!important;animation-delay:-.25s!important}.line-scale-pulse-out-rapid>div:nth-child(1),.line-scale-pulse-out-rapid>div:nth-child(5){-webkit-animation-delay:0s!important;-moz-animation-delay:0s!important;-o-animation-delay:0s!important;animation-delay:0s!important}

View File

@@ -0,0 +1,119 @@
/*========================================================
DARK LAYOUT
=========================================================*/
@-webkit-keyframes line-scale-pulse-out
{
0%
{
-webkit-transform: scaley(1);
transform: scaley(1);
}
50%
{
-webkit-transform: scaley(.4);
transform: scaley(.4);
}
100%
{
-webkit-transform: scaley(1);
transform: scaley(1);
}
}
@-moz-keyframes line-scale-pulse-out
{
0%
{
-moz-transform: scaley(1);
transform: scaley(1);
}
50%
{
-moz-transform: scaley(.4);
transform: scaley(.4);
}
100%
{
-moz-transform: scaley(1);
transform: scaley(1);
}
}
@-o-keyframes line-scale-pulse-out
{
0%
{
-o-transform: scaley(1);
transform: scaley(1);
}
50%
{
-o-transform: scaley(.4);
transform: scaley(.4);
}
100%
{
-o-transform: scaley(1);
transform: scaley(1);
}
}
@keyframes line-scale-pulse-out
{
0%
{
-webkit-transform: scaley(1);
-moz-transform: scaley(1);
-o-transform: scaley(1);
transform: scaley(1);
}
50%
{
-webkit-transform: scaley(.4);
-moz-transform: scaley(.4);
-o-transform: scaley(.4);
transform: scaley(.4);
}
100%
{
-webkit-transform: scaley(1);
-moz-transform: scaley(1);
-o-transform: scaley(1);
transform: scaley(1);
}
}
.line-scale-pulse-out > div
{
display: inline-block;
width: 4px;
height: 3.45rem;
margin: 2px;
-webkit-animation: line-scale-pulse-out .9s -.6s infinite cubic-bezier(.85, .25, .37, .85);
-moz-animation: line-scale-pulse-out .9s -.6s infinite cubic-bezier(.85, .25, .37, .85);
-o-animation: line-scale-pulse-out .9s -.6s infinite cubic-bezier(.85, .25, .37, .85);
animation: line-scale-pulse-out .9s -.6s infinite cubic-bezier(.85, .25, .37, .85);
border-radius: 2px;
background-color: #b8c2cc;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
}
.line-scale-pulse-out > div:nth-child(2),
.line-scale-pulse-out > div:nth-child(4)
{
-webkit-animation-delay: -.4s !important;
-moz-animation-delay: -.4s !important;
-o-animation-delay: -.4s !important;
animation-delay: -.4s !important;
}
.line-scale-pulse-out > div:nth-child(1),
.line-scale-pulse-out > div:nth-child(5)
{
-webkit-animation-delay: -.2s !important;
-moz-animation-delay: -.2s !important;
-o-animation-delay: -.2s !important;
animation-delay: -.2s !important;
}

View File

@@ -0,0 +1 @@
@-webkit-keyframes line-scale-pulse-out{0%,100%{-webkit-transform:scaley(1);transform:scaley(1)}50%{-webkit-transform:scaley(.4);transform:scaley(.4)}}@-moz-keyframes line-scale-pulse-out{0%,100%{-moz-transform:scaley(1);transform:scaley(1)}50%{-moz-transform:scaley(.4);transform:scaley(.4)}}@-o-keyframes line-scale-pulse-out{0%,100%{-o-transform:scaley(1);transform:scaley(1)}50%{-o-transform:scaley(.4);transform:scaley(.4)}}@keyframes line-scale-pulse-out{0%,100%{-webkit-transform:scaley(1);-moz-transform:scaley(1);-o-transform:scaley(1);transform:scaley(1)}50%{-webkit-transform:scaley(.4);-moz-transform:scaley(.4);-o-transform:scaley(.4);transform:scaley(.4)}}.line-scale-pulse-out>div{display:inline-block;width:4px;height:3.45rem;margin:2px;-webkit-animation:line-scale-pulse-out .9s -.6s infinite cubic-bezier(.85,.25,.37,.85);-moz-animation:line-scale-pulse-out .9s -.6s infinite cubic-bezier(.85,.25,.37,.85);-o-animation:line-scale-pulse-out .9s -.6s infinite cubic-bezier(.85,.25,.37,.85);animation:line-scale-pulse-out .9s -.6s infinite cubic-bezier(.85,.25,.37,.85);border-radius:2px;background-color:#b8c2cc;-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both}.line-scale-pulse-out>div:nth-child(2),.line-scale-pulse-out>div:nth-child(4){-webkit-animation-delay:-.4s!important;-moz-animation-delay:-.4s!important;-o-animation-delay:-.4s!important;animation-delay:-.4s!important}.line-scale-pulse-out>div:nth-child(1),.line-scale-pulse-out>div:nth-child(5){-webkit-animation-delay:-.2s!important;-moz-animation-delay:-.2s!important;-o-animation-delay:-.2s!important;animation-delay:-.2s!important}

View File

@@ -0,0 +1,159 @@
/*========================================================
DARK LAYOUT
=========================================================*/
@-webkit-keyframes line-scale-party
{
0%
{
-webkit-transform: scale(1);
transform: scale(1);
}
50%
{
-webkit-transform: scale(.5);
transform: scale(.5);
}
100%
{
-webkit-transform: scale(1);
transform: scale(1);
}
}
@-moz-keyframes line-scale-party
{
0%
{
-moz-transform: scale(1);
transform: scale(1);
}
50%
{
-moz-transform: scale(.5);
transform: scale(.5);
}
100%
{
-moz-transform: scale(1);
transform: scale(1);
}
}
@-o-keyframes line-scale-party
{
0%
{
-o-transform: scale(1);
transform: scale(1);
}
50%
{
-o-transform: scale(.5);
transform: scale(.5);
}
100%
{
-o-transform: scale(1);
transform: scale(1);
}
}
@keyframes line-scale-party
{
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);
}
100%
{
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
}
.line-scale-party > div:nth-child(1)
{
-webkit-animation-duration: .6s;
-moz-animation-duration: .6s;
-o-animation-duration: .6s;
animation-duration: .6s;
-webkit-animation-delay: .48s;
-moz-animation-delay: .48s;
-o-animation-delay: .48s;
animation-delay: .48s;
}
.line-scale-party > div:nth-child(2)
{
-webkit-animation-duration: .42s;
-moz-animation-duration: .42s;
-o-animation-duration: .42s;
animation-duration: .42s;
-webkit-animation-delay: .73s;
-moz-animation-delay: .73s;
-o-animation-delay: .73s;
animation-delay: .73s;
}
.line-scale-party > div:nth-child(3)
{
-webkit-animation-duration: .53s;
-moz-animation-duration: .53s;
-o-animation-duration: .53s;
animation-duration: .53s;
-webkit-animation-delay: .54s;
-moz-animation-delay: .54s;
-o-animation-delay: .54s;
animation-delay: .54s;
}
.line-scale-party > div:nth-child(4)
{
-webkit-animation-duration: .86s;
-moz-animation-duration: .86s;
-o-animation-duration: .86s;
animation-duration: .86s;
-webkit-animation-delay: .01s;
-moz-animation-delay: .01s;
-o-animation-delay: .01s;
animation-delay: .01s;
}
.line-scale-party > div
{
display: inline-block;
width: 4px;
height: 3.45rem;
margin: 2px;
-webkit-animation-name: line-scale-party;
-moz-animation-name: line-scale-party;
-o-animation-name: line-scale-party;
animation-name: line-scale-party;
-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: 2px;
background-color: #b8c2cc;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
}

View File

@@ -0,0 +1 @@
@-webkit-keyframes line-scale-party{0%,100%{-webkit-transform:scale(1);transform:scale(1)}50%{-webkit-transform:scale(.5);transform:scale(.5)}}@-moz-keyframes line-scale-party{0%,100%{-moz-transform:scale(1);transform:scale(1)}50%{-moz-transform:scale(.5);transform:scale(.5)}}@-o-keyframes line-scale-party{0%,100%{-o-transform:scale(1);transform:scale(1)}50%{-o-transform:scale(.5);transform:scale(.5)}}@keyframes line-scale-party{0%,100%{-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)}}.line-scale-party>div:nth-child(1){-webkit-animation-duration:.6s;-moz-animation-duration:.6s;-o-animation-duration:.6s;animation-duration:.6s;-webkit-animation-delay:.48s;-moz-animation-delay:.48s;-o-animation-delay:.48s;animation-delay:.48s}.line-scale-party>div:nth-child(2){-webkit-animation-duration:.42s;-moz-animation-duration:.42s;-o-animation-duration:.42s;animation-duration:.42s;-webkit-animation-delay:.73s;-moz-animation-delay:.73s;-o-animation-delay:.73s;animation-delay:.73s}.line-scale-party>div:nth-child(3){-webkit-animation-duration:.53s;-moz-animation-duration:.53s;-o-animation-duration:.53s;animation-duration:.53s;-webkit-animation-delay:.54s;-moz-animation-delay:.54s;-o-animation-delay:.54s;animation-delay:.54s}.line-scale-party>div:nth-child(4){-webkit-animation-duration:.86s;-moz-animation-duration:.86s;-o-animation-duration:.86s;animation-duration:.86s;-webkit-animation-delay:.01s;-moz-animation-delay:.01s;-o-animation-delay:.01s;animation-delay:.01s}.line-scale-party>div{display:inline-block;width:4px;height:3.45rem;margin:2px;-webkit-animation-name:line-scale-party;-moz-animation-name:line-scale-party;-o-animation-name:line-scale-party;animation-name:line-scale-party;-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:2px;background-color:#b8c2cc;-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both}

View File

@@ -0,0 +1,138 @@
/*========================================================
DARK LAYOUT
=========================================================*/
@-webkit-keyframes line-scale
{
0%
{
-webkit-transform: scaley(1);
transform: scaley(1);
}
50%
{
-webkit-transform: scaley(.4);
transform: scaley(.4);
}
100%
{
-webkit-transform: scaley(1);
transform: scaley(1);
}
}
@-moz-keyframes line-scale
{
0%
{
-moz-transform: scaley(1);
transform: scaley(1);
}
50%
{
-moz-transform: scaley(.4);
transform: scaley(.4);
}
100%
{
-moz-transform: scaley(1);
transform: scaley(1);
}
}
@-o-keyframes line-scale
{
0%
{
-o-transform: scaley(1);
transform: scaley(1);
}
50%
{
-o-transform: scaley(.4);
transform: scaley(.4);
}
100%
{
-o-transform: scaley(1);
transform: scaley(1);
}
}
@keyframes line-scale
{
0%
{
-webkit-transform: scaley(1);
-moz-transform: scaley(1);
-o-transform: scaley(1);
transform: scaley(1);
}
50%
{
-webkit-transform: scaley(.4);
-moz-transform: scaley(.4);
-o-transform: scaley(.4);
transform: scaley(.4);
}
100%
{
-webkit-transform: scaley(1);
-moz-transform: scaley(1);
-o-transform: scaley(1);
transform: scaley(1);
}
}
.line-scale > div:nth-child(1)
{
-webkit-animation: line-scale 1s -.4s infinite cubic-bezier(.2, .68, .18, 1.08);
-moz-animation: line-scale 1s -.4s infinite cubic-bezier(.2, .68, .18, 1.08);
-o-animation: line-scale 1s -.4s infinite cubic-bezier(.2, .68, .18, 1.08);
animation: line-scale 1s -.4s infinite cubic-bezier(.2, .68, .18, 1.08);
}
.line-scale > div:nth-child(2)
{
-webkit-animation: line-scale 1s -.3s infinite cubic-bezier(.2, .68, .18, 1.08);
-moz-animation: line-scale 1s -.3s infinite cubic-bezier(.2, .68, .18, 1.08);
-o-animation: line-scale 1s -.3s infinite cubic-bezier(.2, .68, .18, 1.08);
animation: line-scale 1s -.3s infinite cubic-bezier(.2, .68, .18, 1.08);
}
.line-scale > div:nth-child(3)
{
-webkit-animation: line-scale 1s -.2s infinite cubic-bezier(.2, .68, .18, 1.08);
-moz-animation: line-scale 1s -.2s infinite cubic-bezier(.2, .68, .18, 1.08);
-o-animation: line-scale 1s -.2s infinite cubic-bezier(.2, .68, .18, 1.08);
animation: line-scale 1s -.2s infinite cubic-bezier(.2, .68, .18, 1.08);
}
.line-scale > div:nth-child(4)
{
-webkit-animation: line-scale 1s -.1s infinite cubic-bezier(.2, .68, .18, 1.08);
-moz-animation: line-scale 1s -.1s infinite cubic-bezier(.2, .68, .18, 1.08);
-o-animation: line-scale 1s -.1s infinite cubic-bezier(.2, .68, .18, 1.08);
animation: line-scale 1s -.1s infinite cubic-bezier(.2, .68, .18, 1.08);
}
.line-scale > div:nth-child(5)
{
-webkit-animation: line-scale 1s 0s infinite cubic-bezier(.2, .68, .18, 1.08);
-moz-animation: line-scale 1s 0s infinite cubic-bezier(.2, .68, .18, 1.08);
-o-animation: line-scale 1s 0s infinite cubic-bezier(.2, .68, .18, 1.08);
animation: line-scale 1s 0s infinite cubic-bezier(.2, .68, .18, 1.08);
}
.line-scale > div
{
display: inline-block;
width: 4px;
height: 3.45rem;
margin: 2px;
border-radius: 2px;
background-color: #b8c2cc;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
}

View File

@@ -0,0 +1 @@
@-webkit-keyframes line-scale{0%,100%{-webkit-transform:scaley(1);transform:scaley(1)}50%{-webkit-transform:scaley(.4);transform:scaley(.4)}}@-moz-keyframes line-scale{0%,100%{-moz-transform:scaley(1);transform:scaley(1)}50%{-moz-transform:scaley(.4);transform:scaley(.4)}}@-o-keyframes line-scale{0%,100%{-o-transform:scaley(1);transform:scaley(1)}50%{-o-transform:scaley(.4);transform:scaley(.4)}}@keyframes line-scale{0%,100%{-webkit-transform:scaley(1);-moz-transform:scaley(1);-o-transform:scaley(1);transform:scaley(1)}50%{-webkit-transform:scaley(.4);-moz-transform:scaley(.4);-o-transform:scaley(.4);transform:scaley(.4)}}.line-scale>div:nth-child(1){-webkit-animation:line-scale 1s -.4s infinite cubic-bezier(.2,.68,.18,1.08);-moz-animation:line-scale 1s -.4s infinite cubic-bezier(.2,.68,.18,1.08);-o-animation:line-scale 1s -.4s infinite cubic-bezier(.2,.68,.18,1.08);animation:line-scale 1s -.4s infinite cubic-bezier(.2,.68,.18,1.08)}.line-scale>div:nth-child(2){-webkit-animation:line-scale 1s -.3s infinite cubic-bezier(.2,.68,.18,1.08);-moz-animation:line-scale 1s -.3s infinite cubic-bezier(.2,.68,.18,1.08);-o-animation:line-scale 1s -.3s infinite cubic-bezier(.2,.68,.18,1.08);animation:line-scale 1s -.3s infinite cubic-bezier(.2,.68,.18,1.08)}.line-scale>div:nth-child(3){-webkit-animation:line-scale 1s -.2s infinite cubic-bezier(.2,.68,.18,1.08);-moz-animation:line-scale 1s -.2s infinite cubic-bezier(.2,.68,.18,1.08);-o-animation:line-scale 1s -.2s infinite cubic-bezier(.2,.68,.18,1.08);animation:line-scale 1s -.2s infinite cubic-bezier(.2,.68,.18,1.08)}.line-scale>div:nth-child(4){-webkit-animation:line-scale 1s -.1s infinite cubic-bezier(.2,.68,.18,1.08);-moz-animation:line-scale 1s -.1s infinite cubic-bezier(.2,.68,.18,1.08);-o-animation:line-scale 1s -.1s infinite cubic-bezier(.2,.68,.18,1.08);animation:line-scale 1s -.1s infinite cubic-bezier(.2,.68,.18,1.08)}.line-scale>div:nth-child(5){-webkit-animation:line-scale 1s 0s infinite cubic-bezier(.2,.68,.18,1.08);-moz-animation:line-scale 1s 0s infinite cubic-bezier(.2,.68,.18,1.08);-o-animation:line-scale 1s 0s infinite cubic-bezier(.2,.68,.18,1.08);animation:line-scale 1s 0s infinite cubic-bezier(.2,.68,.18,1.08)}.line-scale>div{display:inline-block;width:4px;height:3.45rem;margin:2px;border-radius:2px;background-color:#b8c2cc;-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both}

View File

@@ -0,0 +1,182 @@
/*========================================================
DARK LAYOUT
=========================================================*/
@-webkit-keyframes line-spin-fade-loader
{
50%
{
opacity: .3;
}
100%
{
opacity: 1;
}
}
@-moz-keyframes line-spin-fade-loader
{
50%
{
opacity: .3;
}
100%
{
opacity: 1;
}
}
@-o-keyframes line-spin-fade-loader
{
50%
{
opacity: .3;
}
100%
{
opacity: 1;
}
}
@keyframes line-spin-fade-loader
{
50%
{
opacity: .3;
}
100%
{
opacity: 1;
}
}
.line-spin-fade-loader
{
position: relative;
top: -10px;
left: -4px;
}
.line-spin-fade-loader > div:nth-child(1)
{
top: 20px;
left: 0;
-webkit-animation: line-spin-fade-loader 1.2s -.84s infinite ease-in-out;
-moz-animation: line-spin-fade-loader 1.2s -.84s infinite ease-in-out;
-o-animation: line-spin-fade-loader 1.2s -.84s infinite ease-in-out;
animation: line-spin-fade-loader 1.2s -.84s infinite ease-in-out;
}
.line-spin-fade-loader > div:nth-child(2)
{
top: 13.63636px;
left: 13.63636px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-animation: line-spin-fade-loader 1.2s -.72s infinite ease-in-out;
-moz-animation: line-spin-fade-loader 1.2s -.72s infinite ease-in-out;
-o-animation: line-spin-fade-loader 1.2s -.72s infinite ease-in-out;
animation: line-spin-fade-loader 1.2s -.72s infinite ease-in-out;
}
.line-spin-fade-loader > div:nth-child(3)
{
top: 0;
left: 20px;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-animation: line-spin-fade-loader 1.2s -.6s infinite ease-in-out;
-moz-animation: line-spin-fade-loader 1.2s -.6s infinite ease-in-out;
-o-animation: line-spin-fade-loader 1.2s -.6s infinite ease-in-out;
animation: line-spin-fade-loader 1.2s -.6s infinite ease-in-out;
}
.line-spin-fade-loader > div:nth-child(4)
{
top: -13.63636px;
left: 13.63636px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-animation: line-spin-fade-loader 1.2s -.48s infinite ease-in-out;
-moz-animation: line-spin-fade-loader 1.2s -.48s infinite ease-in-out;
-o-animation: line-spin-fade-loader 1.2s -.48s infinite ease-in-out;
animation: line-spin-fade-loader 1.2s -.48s infinite ease-in-out;
}
.line-spin-fade-loader > div:nth-child(5)
{
top: -20px;
left: 0;
-webkit-animation: line-spin-fade-loader 1.2s -.36s infinite ease-in-out;
-moz-animation: line-spin-fade-loader 1.2s -.36s infinite ease-in-out;
-o-animation: line-spin-fade-loader 1.2s -.36s infinite ease-in-out;
animation: line-spin-fade-loader 1.2s -.36s infinite ease-in-out;
}
.line-spin-fade-loader > div:nth-child(6)
{
top: -13.63636px;
left: -13.63636px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-animation: line-spin-fade-loader 1.2s -.24s infinite ease-in-out;
-moz-animation: line-spin-fade-loader 1.2s -.24s infinite ease-in-out;
-o-animation: line-spin-fade-loader 1.2s -.24s infinite ease-in-out;
animation: line-spin-fade-loader 1.2s -.24s infinite ease-in-out;
}
.line-spin-fade-loader > div:nth-child(7)
{
top: 0;
left: -20px;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-animation: line-spin-fade-loader 1.2s -.12s infinite ease-in-out;
-moz-animation: line-spin-fade-loader 1.2s -.12s infinite ease-in-out;
-o-animation: line-spin-fade-loader 1.2s -.12s infinite ease-in-out;
animation: line-spin-fade-loader 1.2s -.12s infinite ease-in-out;
}
.line-spin-fade-loader > div:nth-child(8)
{
top: 13.63636px;
left: -13.63636px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-animation: line-spin-fade-loader 1.2s 0s infinite ease-in-out;
-moz-animation: line-spin-fade-loader 1.2s 0s infinite ease-in-out;
-o-animation: line-spin-fade-loader 1.2s 0s infinite ease-in-out;
animation: line-spin-fade-loader 1.2s 0s infinite ease-in-out;
}
.line-spin-fade-loader > div
{
position: absolute;
width: 4px;
width: 5px;
height: 3.45rem;
height: 15px;
margin: 2px;
border-radius: 2px;
background-color: #b8c2cc;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
}

View File

@@ -0,0 +1 @@
@-webkit-keyframes line-spin-fade-loader{50%{opacity:.3}100%{opacity:1}}@-moz-keyframes line-spin-fade-loader{50%{opacity:.3}100%{opacity:1}}@-o-keyframes line-spin-fade-loader{50%{opacity:.3}100%{opacity:1}}@keyframes line-spin-fade-loader{50%{opacity:.3}100%{opacity:1}}.line-spin-fade-loader{position:relative;top:-10px;left:-4px}.line-spin-fade-loader>div:nth-child(1){top:20px;left:0;-webkit-animation:line-spin-fade-loader 1.2s -.84s infinite ease-in-out;-moz-animation:line-spin-fade-loader 1.2s -.84s infinite ease-in-out;-o-animation:line-spin-fade-loader 1.2s -.84s infinite ease-in-out;animation:line-spin-fade-loader 1.2s -.84s infinite ease-in-out}.line-spin-fade-loader>div:nth-child(2){top:13.64px;left:13.64px;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg);-webkit-animation:line-spin-fade-loader 1.2s -.72s infinite ease-in-out;-moz-animation:line-spin-fade-loader 1.2s -.72s infinite ease-in-out;-o-animation:line-spin-fade-loader 1.2s -.72s infinite ease-in-out;animation:line-spin-fade-loader 1.2s -.72s infinite ease-in-out}.line-spin-fade-loader>div:nth-child(3){top:0;left:20px;-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-ms-transform:rotate(90deg);-o-transform:rotate(90deg);transform:rotate(90deg);-webkit-animation:line-spin-fade-loader 1.2s -.6s infinite ease-in-out;-moz-animation:line-spin-fade-loader 1.2s -.6s infinite ease-in-out;-o-animation:line-spin-fade-loader 1.2s -.6s infinite ease-in-out;animation:line-spin-fade-loader 1.2s -.6s infinite ease-in-out}.line-spin-fade-loader>div:nth-child(4){top:-13.64px;left:13.64px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);-webkit-animation:line-spin-fade-loader 1.2s -.48s infinite ease-in-out;-moz-animation:line-spin-fade-loader 1.2s -.48s infinite ease-in-out;-o-animation:line-spin-fade-loader 1.2s -.48s infinite ease-in-out;animation:line-spin-fade-loader 1.2s -.48s infinite ease-in-out}.line-spin-fade-loader>div:nth-child(5){top:-20px;left:0;-webkit-animation:line-spin-fade-loader 1.2s -.36s infinite ease-in-out;-moz-animation:line-spin-fade-loader 1.2s -.36s infinite ease-in-out;-o-animation:line-spin-fade-loader 1.2s -.36s infinite ease-in-out;animation:line-spin-fade-loader 1.2s -.36s infinite ease-in-out}.line-spin-fade-loader>div:nth-child(6){top:-13.64px;left:-13.64px;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg);-webkit-animation:line-spin-fade-loader 1.2s -.24s infinite ease-in-out;-moz-animation:line-spin-fade-loader 1.2s -.24s infinite ease-in-out;-o-animation:line-spin-fade-loader 1.2s -.24s infinite ease-in-out;animation:line-spin-fade-loader 1.2s -.24s infinite ease-in-out}.line-spin-fade-loader>div:nth-child(7){top:0;left:-20px;-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-ms-transform:rotate(90deg);-o-transform:rotate(90deg);transform:rotate(90deg);-webkit-animation:line-spin-fade-loader 1.2s -.12s infinite ease-in-out;-moz-animation:line-spin-fade-loader 1.2s -.12s infinite ease-in-out;-o-animation:line-spin-fade-loader 1.2s -.12s infinite ease-in-out;animation:line-spin-fade-loader 1.2s -.12s infinite ease-in-out}.line-spin-fade-loader>div:nth-child(8){top:13.64px;left:-13.64px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);-webkit-animation:line-spin-fade-loader 1.2s 0s infinite ease-in-out;-moz-animation:line-spin-fade-loader 1.2s 0s infinite ease-in-out;-o-animation:line-spin-fade-loader 1.2s 0s infinite ease-in-out;animation:line-spin-fade-loader 1.2s 0s infinite ease-in-out}.line-spin-fade-loader>div{position:absolute;width:4px;width:5px;height:3.45rem;height:15px;margin:2px;border-radius:2px;background-color:#b8c2cc;-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both}

View File

@@ -0,0 +1,313 @@
/*========================================================
DARK LAYOUT
=========================================================*/
@-webkit-keyframes rotate_pacman_half_up
{
0%
{
-webkit-transform: rotate(270deg);
transform: rotate(270deg);
}
50%
{
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
100%
{
-webkit-transform: rotate(270deg);
transform: rotate(270deg);
}
}
@-moz-keyframes rotate_pacman_half_up
{
0%
{
-moz-transform: rotate(270deg);
transform: rotate(270deg);
}
50%
{
-moz-transform: rotate(360deg);
transform: rotate(360deg);
}
100%
{
-moz-transform: rotate(270deg);
transform: rotate(270deg);
}
}
@-o-keyframes rotate_pacman_half_up
{
0%
{
-o-transform: rotate(270deg);
transform: rotate(270deg);
}
50%
{
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
100%
{
-o-transform: rotate(270deg);
transform: rotate(270deg);
}
}
@keyframes rotate_pacman_half_up
{
0%
{
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
}
50%
{
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
100%
{
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
}
}
@-webkit-keyframes rotate_pacman_half_down
{
0%
{
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
50%
{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100%
{
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
}
@-moz-keyframes rotate_pacman_half_down
{
0%
{
-moz-transform: rotate(90deg);
transform: rotate(90deg);
}
50%
{
-moz-transform: rotate(0deg);
transform: rotate(0deg);
}
100%
{
-moz-transform: rotate(90deg);
transform: rotate(90deg);
}
}
@-o-keyframes rotate_pacman_half_down
{
0%
{
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
50%
{
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100%
{
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
}
@keyframes rotate_pacman_half_down
{
0%
{
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
50%
{
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100%
{
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
}
@-webkit-keyframes pacman-balls
{
75%
{
opacity: .7;
}
100%
{
-webkit-transform: translate(-100px, -6.25px);
transform: translate(-100px, -6.25px);
}
}
@-moz-keyframes pacman-balls
{
75%
{
opacity: .7;
}
100%
{
-moz-transform: translate(-100px, -6.25px);
transform: translate(-100px, -6.25px);
}
}
@-o-keyframes pacman-balls
{
75%
{
opacity: .7;
}
100%
{
-o-transform: translate(-100px, -6.25px);
transform: translate(-100px, -6.25px);
}
}
@keyframes pacman-balls
{
75%
{
opacity: .7;
}
100%
{
-webkit-transform: translate(-100px, -6.25px);
-moz-transform: translate(-100px, -6.25px);
-o-transform: translate(-100px, -6.25px);
transform: translate(-100px, -6.25px);
}
}
.pacman
{
position: relative;
}
.pacman > div:nth-child(2)
{
-webkit-animation: pacman-balls 1s -.99s infinite linear;
-moz-animation: pacman-balls 1s -.99s infinite linear;
-o-animation: pacman-balls 1s -.99s infinite linear;
animation: pacman-balls 1s -.99s infinite linear;
}
.pacman > div:nth-child(3)
{
-webkit-animation: pacman-balls 1s -.66s infinite linear;
-moz-animation: pacman-balls 1s -.66s infinite linear;
-o-animation: pacman-balls 1s -.66s infinite linear;
animation: pacman-balls 1s -.66s infinite linear;
}
.pacman > div:nth-child(4)
{
-webkit-animation: pacman-balls 1s -.33s infinite linear;
-moz-animation: pacman-balls 1s -.33s infinite linear;
-o-animation: pacman-balls 1s -.33s infinite linear;
animation: pacman-balls 1s -.33s infinite linear;
}
.pacman > div:nth-child(5)
{
-webkit-animation: pacman-balls 1s 0s infinite linear;
-moz-animation: pacman-balls 1s 0s infinite linear;
-o-animation: pacman-balls 1s 0s infinite linear;
animation: pacman-balls 1s 0s infinite linear;
}
.pacman > div:first-of-type
{
position: relative;
left: -30px;
width: 0;
height: 0;
-webkit-animation: rotate_pacman_half_up .5s 0s infinite;
-moz-animation: rotate_pacman_half_up .5s 0s infinite;
-o-animation: rotate_pacman_half_up .5s 0s infinite;
animation: rotate_pacman_half_up .5s 0s infinite;
border-top: 25px solid #b8c2cc;
border-right: 25px solid transparent;
border-bottom: 25px solid #b8c2cc;
border-left: 25px solid #b8c2cc;
border-radius: 25px;
}
.pacman > div:nth-child(2)
{
position: relative;
left: -30px;
width: 0;
height: 0;
margin-top: -50px;
-webkit-animation: rotate_pacman_half_down .5s 0s infinite;
-moz-animation: rotate_pacman_half_down .5s 0s infinite;
-o-animation: rotate_pacman_half_down .5s 0s infinite;
animation: rotate_pacman_half_down .5s 0s infinite;
border-top: 25px solid #b8c2cc;
border-right: 25px solid transparent;
border-bottom: 25px solid #b8c2cc;
border-left: 25px solid #b8c2cc;
border-radius: 25px;
}
.pacman > div:nth-child(3),
.pacman > div:nth-child(4),
.pacman > div:nth-child(5),
.pacman > div:nth-child(6)
{
position: absolute;
top: 25px;
left: 70px;
width: 15px;
width: 10px;
height: 15px;
height: 10px;
margin: 2px;
-webkit-transform: translate(0, -6.25px);
-moz-transform: translate(0, -6.25px);
-ms-transform: translate(0, -6.25px);
-o-transform: translate(0, -6.25px);
transform: translate(0, -6.25px);
border-radius: 100%;
background-color: #b8c2cc;
}

View File

@@ -0,0 +1 @@
.pacman>div:first-of-type,.pacman>div:nth-child(2){position:relative;left:-30px;width:0;height:0;border-top:25px solid #b8c2cc;border-right:25px solid transparent;border-bottom:25px solid #b8c2cc;border-left:25px solid #b8c2cc;border-radius:25px}@-webkit-keyframes rotate_pacman_half_up{0%,100%{-webkit-transform:rotate(270deg);transform:rotate(270deg)}50%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-moz-keyframes rotate_pacman_half_up{0%,100%{-moz-transform:rotate(270deg);transform:rotate(270deg)}50%{-moz-transform:rotate(360deg);transform:rotate(360deg)}}@-o-keyframes rotate_pacman_half_up{0%,100%{-o-transform:rotate(270deg);transform:rotate(270deg)}50%{-o-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes rotate_pacman_half_up{0%,100%{-webkit-transform:rotate(270deg);-moz-transform:rotate(270deg);-o-transform:rotate(270deg);transform:rotate(270deg)}50%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes rotate_pacman_half_down{0%,100%{-webkit-transform:rotate(90deg);transform:rotate(90deg)}50%{-webkit-transform:rotate(0);transform:rotate(0)}}@-moz-keyframes rotate_pacman_half_down{0%,100%{-moz-transform:rotate(90deg);transform:rotate(90deg)}50%{-moz-transform:rotate(0);transform:rotate(0)}}@-o-keyframes rotate_pacman_half_down{0%,100%{-o-transform:rotate(90deg);transform:rotate(90deg)}50%{-o-transform:rotate(0);transform:rotate(0)}}@keyframes rotate_pacman_half_down{0%,100%{-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-o-transform:rotate(90deg);transform:rotate(90deg)}50%{-webkit-transform:rotate(0);-moz-transform:rotate(0);-o-transform:rotate(0);transform:rotate(0)}}@-webkit-keyframes pacman-balls{75%{opacity:.7}100%{-webkit-transform:translate(-100px,-6.25px);transform:translate(-100px,-6.25px)}}@-moz-keyframes pacman-balls{75%{opacity:.7}100%{-moz-transform:translate(-100px,-6.25px);transform:translate(-100px,-6.25px)}}@-o-keyframes pacman-balls{75%{opacity:.7}100%{-o-transform:translate(-100px,-6.25px);transform:translate(-100px,-6.25px)}}@keyframes pacman-balls{75%{opacity:.7}100%{-webkit-transform:translate(-100px,-6.25px);-moz-transform:translate(-100px,-6.25px);-o-transform:translate(-100px,-6.25px);transform:translate(-100px,-6.25px)}}.pacman{position:relative}.pacman>div:nth-child(3){-webkit-animation:pacman-balls 1s -.66s infinite linear;-moz-animation:pacman-balls 1s -.66s infinite linear;-o-animation:pacman-balls 1s -.66s infinite linear;animation:pacman-balls 1s -.66s infinite linear}.pacman>div:nth-child(4){-webkit-animation:pacman-balls 1s -.33s infinite linear;-moz-animation:pacman-balls 1s -.33s infinite linear;-o-animation:pacman-balls 1s -.33s infinite linear;animation:pacman-balls 1s -.33s infinite linear}.pacman>div:nth-child(5){-webkit-animation:pacman-balls 1s 0s infinite linear;-moz-animation:pacman-balls 1s 0s infinite linear;-o-animation:pacman-balls 1s 0s infinite linear;animation:pacman-balls 1s 0s infinite linear}.pacman>div:first-of-type{-webkit-animation:rotate_pacman_half_up .5s 0s infinite;-moz-animation:rotate_pacman_half_up .5s 0s infinite;-o-animation:rotate_pacman_half_up .5s 0s infinite;animation:rotate_pacman_half_up .5s 0s infinite}.pacman>div:nth-child(2){margin-top:-50px;-webkit-animation:rotate_pacman_half_down .5s 0s infinite;-moz-animation:rotate_pacman_half_down .5s 0s infinite;-o-animation:rotate_pacman_half_down .5s 0s infinite;animation:rotate_pacman_half_down .5s 0s infinite}.pacman>div:nth-child(3),.pacman>div:nth-child(4),.pacman>div:nth-child(5),.pacman>div:nth-child(6){position:absolute;top:25px;left:70px;width:15px;width:10px;height:15px;height:10px;margin:2px;-webkit-transform:translate(0,-6.25px);-moz-transform:translate(0,-6.25px);-ms-transform:translate(0,-6.25px);-o-transform:translate(0,-6.25px);transform:translate(0,-6.25px);border-radius:100%;background-color:#b8c2cc}

View File

@@ -0,0 +1,111 @@
/*========================================================
DARK LAYOUT
=========================================================*/
@-webkit-keyframes spin-rotate
{
0%
{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
50%
{
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
100%
{
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-moz-keyframes spin-rotate
{
0%
{
-moz-transform: rotate(0deg);
transform: rotate(0deg);
}
50%
{
-moz-transform: rotate(180deg);
transform: rotate(180deg);
}
100%
{
-moz-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-o-keyframes spin-rotate
{
0%
{
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
50%
{
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
100%
{
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes spin-rotate
{
0%
{
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
50%
{
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
100%
{
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.semi-circle-spin
{
position: relative;
overflow: hidden;
width: 35px;
height: 35px;
}
.semi-circle-spin > div
{
position: absolute;
width: 100%;
height: 100%;
-webkit-animation: spin-rotate .6s 0s infinite linear;
-moz-animation: spin-rotate .6s 0s infinite linear;
-o-animation: spin-rotate .6s 0s infinite linear;
animation: spin-rotate .6s 0s infinite linear;
border-width: 0;
border-radius: 100%;
background-image: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(70%, transparent), color-stop(30%, #b8c2cc), to(#b8c2cc));
background-image: -webkit-linear-gradient(transparent 0%, transparent 70%, #b8c2cc 30%, #b8c2cc 100%);
background-image: -moz-linear-gradient(transparent 0%, transparent 70%, #b8c2cc 30%, #b8c2cc 100%);
background-image: -o-linear-gradient(transparent 0%, transparent 70%, #b8c2cc 30%, #b8c2cc 100%);
background-image: linear-gradient(transparent 0%, transparent 70%, #b8c2cc 30%, #b8c2cc 100%);
}

View File

@@ -0,0 +1 @@
@-webkit-keyframes spin-rotate{0%{-webkit-transform:rotate(0);transform:rotate(0)}50%{-webkit-transform:rotate(180deg);transform:rotate(180deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-moz-keyframes spin-rotate{0%{-moz-transform:rotate(0);transform:rotate(0)}50%{-moz-transform:rotate(180deg);transform:rotate(180deg)}100%{-moz-transform:rotate(360deg);transform:rotate(360deg)}}@-o-keyframes spin-rotate{0%{-o-transform:rotate(0);transform:rotate(0)}50%{-o-transform:rotate(180deg);transform:rotate(180deg)}100%{-o-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes spin-rotate{0%{-webkit-transform:rotate(0);-moz-transform:rotate(0);-o-transform:rotate(0);transform:rotate(0)}50%{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-o-transform:rotate(180deg);transform:rotate(180deg)}100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}}.semi-circle-spin{position:relative;overflow:hidden;width:35px;height:35px}.semi-circle-spin>div{position:absolute;width:100%;height:100%;-webkit-animation:spin-rotate .6s 0s infinite linear;-moz-animation:spin-rotate .6s 0s infinite linear;-o-animation:spin-rotate .6s 0s infinite linear;animation:spin-rotate .6s 0s infinite linear;border-width:0;border-radius:100%;background-image:-webkit-gradient(linear,left top,left bottom,from(transparent),color-stop(70%,transparent),color-stop(30%,#b8c2cc),to(#b8c2cc));background-image:-webkit-linear-gradient(transparent 0,transparent 70%,#b8c2cc 30%,#b8c2cc 100%);background-image:-moz-linear-gradient(transparent 0,transparent 70%,#b8c2cc 30%,#b8c2cc 100%);background-image:-o-linear-gradient(transparent 0,transparent 70%,#b8c2cc 30%,#b8c2cc 100%);background-image:linear-gradient(transparent 0,transparent 70%,#b8c2cc 30%,#b8c2cc 100%)}

View File

@@ -0,0 +1,113 @@
/*========================================================
DARK LAYOUT
=========================================================*/
@-webkit-keyframes square-spin
{
25%
{
-webkit-transform: perspective(100px) rotateX(180deg) rotateY(0);
transform: perspective(100px) rotateX(180deg) rotateY(0);
}
50%
{
-webkit-transform: perspective(100px) rotateX(180deg) rotateY(180deg);
transform: perspective(100px) rotateX(180deg) rotateY(180deg);
}
75%
{
-webkit-transform: perspective(100px) rotateX(0) rotateY(180deg);
transform: perspective(100px) rotateX(0) rotateY(180deg);
}
100%
{
-webkit-transform: perspective(100px) rotateX(0) rotateY(0);
transform: perspective(100px) rotateX(0) rotateY(0);
}
}
@-moz-keyframes square-spin
{
25%
{
-moz-transform: perspective(100px) rotateX(180deg) rotateY(0);
transform: perspective(100px) rotateX(180deg) rotateY(0);
}
50%
{
-moz-transform: perspective(100px) rotateX(180deg) rotateY(180deg);
transform: perspective(100px) rotateX(180deg) rotateY(180deg);
}
75%
{
-moz-transform: perspective(100px) rotateX(0) rotateY(180deg);
transform: perspective(100px) rotateX(0) rotateY(180deg);
}
100%
{
-moz-transform: perspective(100px) rotateX(0) rotateY(0);
transform: perspective(100px) rotateX(0) rotateY(0);
}
}
@-o-keyframes square-spin
{
25%
{
transform: perspective(100px) rotateX(180deg) rotateY(0);
}
50%
{
transform: perspective(100px) rotateX(180deg) rotateY(180deg);
}
75%
{
transform: perspective(100px) rotateX(0) rotateY(180deg);
}
100%
{
transform: perspective(100px) rotateX(0) rotateY(0);
}
}
@keyframes square-spin
{
25%
{
-webkit-transform: perspective(100px) rotateX(180deg) rotateY(0);
-moz-transform: perspective(100px) rotateX(180deg) rotateY(0);
transform: perspective(100px) rotateX(180deg) rotateY(0);
}
50%
{
-webkit-transform: perspective(100px) rotateX(180deg) rotateY(180deg);
-moz-transform: perspective(100px) rotateX(180deg) rotateY(180deg);
transform: perspective(100px) rotateX(180deg) rotateY(180deg);
}
75%
{
-webkit-transform: perspective(100px) rotateX(0) rotateY(180deg);
-moz-transform: perspective(100px) rotateX(0) rotateY(180deg);
transform: perspective(100px) rotateX(0) rotateY(180deg);
}
100%
{
-webkit-transform: perspective(100px) rotateX(0) rotateY(0);
-moz-transform: perspective(100px) rotateX(0) rotateY(0);
transform: perspective(100px) rotateX(0) rotateY(0);
}
}
.square-spin > div
{
width: 50px;
height: 50px;
-webkit-animation: square-spin 3s 0s cubic-bezier(.09, .57, .49, .9) infinite;
-moz-animation: square-spin 3s 0s cubic-bezier(.09, .57, .49, .9) infinite;
-o-animation: square-spin 3s 0s cubic-bezier(.09, .57, .49, .9) infinite;
animation: square-spin 3s 0s cubic-bezier(.09, .57, .49, .9) infinite;
background: #b8c2cc;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
}

View File

@@ -0,0 +1 @@
@-webkit-keyframes square-spin{25%{-webkit-transform:perspective(100px) rotateX(180deg) rotateY(0);transform:perspective(100px) rotateX(180deg) rotateY(0)}50%{-webkit-transform:perspective(100px) rotateX(180deg) rotateY(180deg);transform:perspective(100px) rotateX(180deg) rotateY(180deg)}75%{-webkit-transform:perspective(100px) rotateX(0) rotateY(180deg);transform:perspective(100px) rotateX(0) rotateY(180deg)}100%{-webkit-transform:perspective(100px) rotateX(0) rotateY(0);transform:perspective(100px) rotateX(0) rotateY(0)}}@-moz-keyframes square-spin{25%{-moz-transform:perspective(100px) rotateX(180deg) rotateY(0);transform:perspective(100px) rotateX(180deg) rotateY(0)}50%{-moz-transform:perspective(100px) rotateX(180deg) rotateY(180deg);transform:perspective(100px) rotateX(180deg) rotateY(180deg)}75%{-moz-transform:perspective(100px) rotateX(0) rotateY(180deg);transform:perspective(100px) rotateX(0) rotateY(180deg)}100%{-moz-transform:perspective(100px) rotateX(0) rotateY(0);transform:perspective(100px) rotateX(0) rotateY(0)}}@-o-keyframes square-spin{25%{transform:perspective(100px) rotateX(180deg) rotateY(0)}50%{transform:perspective(100px) rotateX(180deg) rotateY(180deg)}75%{transform:perspective(100px) rotateX(0) rotateY(180deg)}100%{transform:perspective(100px) rotateX(0) rotateY(0)}}@keyframes square-spin{25%{-webkit-transform:perspective(100px) rotateX(180deg) rotateY(0);-moz-transform:perspective(100px) rotateX(180deg) rotateY(0);transform:perspective(100px) rotateX(180deg) rotateY(0)}50%{-webkit-transform:perspective(100px) rotateX(180deg) rotateY(180deg);-moz-transform:perspective(100px) rotateX(180deg) rotateY(180deg);transform:perspective(100px) rotateX(180deg) rotateY(180deg)}75%{-webkit-transform:perspective(100px) rotateX(0) rotateY(180deg);-moz-transform:perspective(100px) rotateX(0) rotateY(180deg);transform:perspective(100px) rotateX(0) rotateY(180deg)}100%{-webkit-transform:perspective(100px) rotateX(0) rotateY(0);-moz-transform:perspective(100px) rotateX(0) rotateY(0);transform:perspective(100px) rotateX(0) rotateY(0)}}.square-spin>div{width:50px;height:50px;-webkit-animation:square-spin 3s 0s cubic-bezier(.09,.57,.49,.9) infinite;-moz-animation:square-spin 3s 0s cubic-bezier(.09,.57,.49,.9) infinite;-o-animation:square-spin 3s 0s cubic-bezier(.09,.57,.49,.9) infinite;animation:square-spin 3s 0s cubic-bezier(.09,.57,.49,.9) infinite;background:#b8c2cc;-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both}

View File

@@ -0,0 +1,115 @@
/*========================================================
DARK LAYOUT
=========================================================*/
@-webkit-keyframes triangle-skew-spin
{
25%
{
-webkit-transform: perspective(100px) rotateX(180deg) rotateY(0);
transform: perspective(100px) rotateX(180deg) rotateY(0);
}
50%
{
-webkit-transform: perspective(100px) rotateX(180deg) rotateY(180deg);
transform: perspective(100px) rotateX(180deg) rotateY(180deg);
}
75%
{
-webkit-transform: perspective(100px) rotateX(0) rotateY(180deg);
transform: perspective(100px) rotateX(0) rotateY(180deg);
}
100%
{
-webkit-transform: perspective(100px) rotateX(0) rotateY(0);
transform: perspective(100px) rotateX(0) rotateY(0);
}
}
@-moz-keyframes triangle-skew-spin
{
25%
{
-moz-transform: perspective(100px) rotateX(180deg) rotateY(0);
transform: perspective(100px) rotateX(180deg) rotateY(0);
}
50%
{
-moz-transform: perspective(100px) rotateX(180deg) rotateY(180deg);
transform: perspective(100px) rotateX(180deg) rotateY(180deg);
}
75%
{
-moz-transform: perspective(100px) rotateX(0) rotateY(180deg);
transform: perspective(100px) rotateX(0) rotateY(180deg);
}
100%
{
-moz-transform: perspective(100px) rotateX(0) rotateY(0);
transform: perspective(100px) rotateX(0) rotateY(0);
}
}
@-o-keyframes triangle-skew-spin
{
25%
{
transform: perspective(100px) rotateX(180deg) rotateY(0);
}
50%
{
transform: perspective(100px) rotateX(180deg) rotateY(180deg);
}
75%
{
transform: perspective(100px) rotateX(0) rotateY(180deg);
}
100%
{
transform: perspective(100px) rotateX(0) rotateY(0);
}
}
@keyframes triangle-skew-spin
{
25%
{
-webkit-transform: perspective(100px) rotateX(180deg) rotateY(0);
-moz-transform: perspective(100px) rotateX(180deg) rotateY(0);
transform: perspective(100px) rotateX(180deg) rotateY(0);
}
50%
{
-webkit-transform: perspective(100px) rotateX(180deg) rotateY(180deg);
-moz-transform: perspective(100px) rotateX(180deg) rotateY(180deg);
transform: perspective(100px) rotateX(180deg) rotateY(180deg);
}
75%
{
-webkit-transform: perspective(100px) rotateX(0) rotateY(180deg);
-moz-transform: perspective(100px) rotateX(0) rotateY(180deg);
transform: perspective(100px) rotateX(0) rotateY(180deg);
}
100%
{
-webkit-transform: perspective(100px) rotateX(0) rotateY(0);
-moz-transform: perspective(100px) rotateX(0) rotateY(0);
transform: perspective(100px) rotateX(0) rotateY(0);
}
}
.triangle-skew-spin > div
{
width: 0;
height: 0;
-webkit-animation: triangle-skew-spin 3s 0s cubic-bezier(.09, .57, .49, .9) infinite;
-moz-animation: triangle-skew-spin 3s 0s cubic-bezier(.09, .57, .49, .9) infinite;
-o-animation: triangle-skew-spin 3s 0s cubic-bezier(.09, .57, .49, .9) infinite;
animation: triangle-skew-spin 3s 0s cubic-bezier(.09, .57, .49, .9) infinite;
border-right: 20px solid transparent;
border-bottom: 20px solid #b8c2cc;
border-left: 20px solid transparent;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
}

View File

@@ -0,0 +1 @@
@-webkit-keyframes triangle-skew-spin{25%{-webkit-transform:perspective(100px) rotateX(180deg) rotateY(0);transform:perspective(100px) rotateX(180deg) rotateY(0)}50%{-webkit-transform:perspective(100px) rotateX(180deg) rotateY(180deg);transform:perspective(100px) rotateX(180deg) rotateY(180deg)}75%{-webkit-transform:perspective(100px) rotateX(0) rotateY(180deg);transform:perspective(100px) rotateX(0) rotateY(180deg)}100%{-webkit-transform:perspective(100px) rotateX(0) rotateY(0);transform:perspective(100px) rotateX(0) rotateY(0)}}@-moz-keyframes triangle-skew-spin{25%{-moz-transform:perspective(100px) rotateX(180deg) rotateY(0);transform:perspective(100px) rotateX(180deg) rotateY(0)}50%{-moz-transform:perspective(100px) rotateX(180deg) rotateY(180deg);transform:perspective(100px) rotateX(180deg) rotateY(180deg)}75%{-moz-transform:perspective(100px) rotateX(0) rotateY(180deg);transform:perspective(100px) rotateX(0) rotateY(180deg)}100%{-moz-transform:perspective(100px) rotateX(0) rotateY(0);transform:perspective(100px) rotateX(0) rotateY(0)}}@-o-keyframes triangle-skew-spin{25%{transform:perspective(100px) rotateX(180deg) rotateY(0)}50%{transform:perspective(100px) rotateX(180deg) rotateY(180deg)}75%{transform:perspective(100px) rotateX(0) rotateY(180deg)}100%{transform:perspective(100px) rotateX(0) rotateY(0)}}@keyframes triangle-skew-spin{25%{-webkit-transform:perspective(100px) rotateX(180deg) rotateY(0);-moz-transform:perspective(100px) rotateX(180deg) rotateY(0);transform:perspective(100px) rotateX(180deg) rotateY(0)}50%{-webkit-transform:perspective(100px) rotateX(180deg) rotateY(180deg);-moz-transform:perspective(100px) rotateX(180deg) rotateY(180deg);transform:perspective(100px) rotateX(180deg) rotateY(180deg)}75%{-webkit-transform:perspective(100px) rotateX(0) rotateY(180deg);-moz-transform:perspective(100px) rotateX(0) rotateY(180deg);transform:perspective(100px) rotateX(0) rotateY(180deg)}100%{-webkit-transform:perspective(100px) rotateX(0) rotateY(0);-moz-transform:perspective(100px) rotateX(0) rotateY(0);transform:perspective(100px) rotateX(0) rotateY(0)}}.triangle-skew-spin>div{width:0;height:0;-webkit-animation:triangle-skew-spin 3s 0s cubic-bezier(.09,.57,.49,.9) infinite;-moz-animation:triangle-skew-spin 3s 0s cubic-bezier(.09,.57,.49,.9) infinite;-o-animation:triangle-skew-spin 3s 0s cubic-bezier(.09,.57,.49,.9) infinite;animation:triangle-skew-spin 3s 0s cubic-bezier(.09,.57,.49,.9) infinite;border-right:20px solid transparent;border-bottom:20px solid #b8c2cc;border-left:20px solid transparent;-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both}

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long