github/lidarr
1
0
Fork 0
mirror of https://github.com/lidarr/lidarr.git synced 2025-08-20 13:33:34 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

updated spinner view to use CSS3 instead of spinning font.

Browse source
This commit is contained in:
kay.one 2013-06-29 15:07:09 -07:00
commit 00bb73a423
4 changed files with 145 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

12
UI/Content/base.less
View file

@ -9,6 +9,7 @@
@import "../shared/styles/clickable";
@import "prefixer";
@import "icons";
@import "spinner";
.progress {
width : 125px;
@ -61,11 +62,6 @@
padding : 30px;
}
.nz-spinner {
.text-center;
font-size : 56px;
padding : 30px;
}
.page-toolbar {
margin-top : 10px;
@ -94,6 +90,6 @@
}
.label-large {
padding: 4px 6px;
font-size: 16px;
}
padding : 4px 6px;
font-size : 16px;
}

132
UI/Content/spinner.less Normal file
View file

@ -0,0 +1,132 @@
@import "prefixer";
@import "bootstrap/variables";
@colorDark : @grayDark;
@colorLight : @grayLighter;
#followingBalls {
position : relative;
height : 20px;
width : 256px;
margin : 50px auto;
display : block;
}
.followingBalls {
background-color : @colorDark;
position : absolute;
top : 0;
left : 0;
width : 20px;
height : 20px;
.border-radius(10px);
.animation-name(bounce_followingBallsG);
.animation-duration(1.9s);
.animation-iteration-count(infinite);
.animation-direction(linear);
}
#followingBallsG_1 {
.animation-delay(0s);
}
#followingBallsG_2 {
.animation-delay(0.19s);
}
#followingBallsG_3 {
.animation-delay(0.38s);
}
#followingBallsG_4 {
.animation-delay(0.57s);
}
@-moz-keyframes bounce_followingBallsG {
0% {
left : 0px;
background-color : @colorDark;
}
50% {
left : 236px;
background-color : @colorLight;
}
100% {
left : 0px;
background-color : @colorDark;
}
}
@-webkit-keyframes bounce_followingBallsG {
0% {
left : 0px;
background-color : @colorDark;
}
50% {
left : 236px;
background-color : @colorLight;
}
100% {
left : 0px;
background-color : @colorDark;
}
}
@-ms-keyframes bounce_followingBallsG {
0% {
left : 0px;
background-color : @colorDark;
}
50% {
left : 236px;
background-color : @colorLight;
}
100% {
left : 0px;
background-color : @colorDark;
}
}
@-o-keyframes bounce_followingBallsG {
0% {
left : 0px;
background-color : @colorDark;
}
50% {
left : 236px;
background-color : @colorLight;
}
100% {
left : 0px;
background-color : @colorDark;
}
}
@keyframes bounce_followingBallsG {
0% {
left : 0px;
background-color : @colorDark;
}
50% {
left : 236px;
background-color : @colorLight;
}
100% {
left : 0px;
background-color : @colorDark;
}
}