forked from leftypol/leftypol
Make slack report notifier, donate page, irc page and radio page use configuration variables instead of hard coding values.
This commit is contained in:
Benjamin Southall
parent
c58e37ce39
commit
03075e7a8c
10 changed files with 242 additions and 228 deletions
159
stylesheets/progressbar.css
Normal file
159
stylesheets/progressbar.css
Normal file
|
|
@ -0,0 +1,159 @@
|
|||
/*---------------------------*/
|
||||
.container {
|
||||
margin: auto;
|
||||
width : 50%;
|
||||
}
|
||||
.progress-bar {
|
||||
background-color: #1a1a1a;
|
||||
height: 25px;
|
||||
padding: 5px;
|
||||
width: 350px;
|
||||
position: relative;
|
||||
margin: 70px 0 20px 0;
|
||||
-moz-border-radius: 5px;
|
||||
-webkit-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
-moz-box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;
|
||||
-webkit-box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;
|
||||
box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;
|
||||
}
|
||||
|
||||
.progress-bar span {
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
background-color: #777;
|
||||
-moz-border-radius: 3px;
|
||||
-webkit-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
|
||||
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
|
||||
box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
|
||||
-webkit-transition: width .4s ease-in-out;
|
||||
-moz-transition: width .4s ease-in-out;
|
||||
-ms-transition: width .4s ease-in-out;
|
||||
-o-transition: width .4s ease-in-out;
|
||||
transition: width .4s ease-in-out;
|
||||
}
|
||||
|
||||
|
||||
.blue span {
|
||||
background-color: #34c2e3;
|
||||
}
|
||||
|
||||
.red span {
|
||||
background-color: #f42323;
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(#f42323), to(#ff0000));
|
||||
background-image: -webkit-linear-gradient(top, #f42323, #ff0000);
|
||||
background-image: -moz-linear-gradient(top, #f42323, #ff0000);
|
||||
background-image: -ms-linear-gradient(top, #f42323, #ff0000);
|
||||
background-image: -o-linear-gradient(top, #f42323, #ff0000);
|
||||
background-image: linear-gradient(top, #f42323, #ff0000);
|
||||
}
|
||||
|
||||
.green span {
|
||||
background-color: #a5df41;
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(#a5df41), to(#4ca916));
|
||||
background-image: -webkit-linear-gradient(top, #a5df41, #4ca916);
|
||||
background-image: -moz-linear-gradient(top, #a5df41, #4ca916);
|
||||
background-image: -ms-linear-gradient(top, #a5df41, #4ca916);
|
||||
background-image: -o-linear-gradient(top, #a5df41, #4ca916);
|
||||
background-image: linear-gradient(top, #a5df41, #4ca916);
|
||||
}
|
||||
|
||||
/*---------------------------*/
|
||||
|
||||
.stripes span {
|
||||
-webkit-background-size: 30px 30px;
|
||||
-moz-background-size: 30px 30px;
|
||||
background-size: 30px 30px;
|
||||
background-image: -webkit-gradient(linear, left top, right bottom,
|
||||
color-stop(.25, rgba(255, 255, 255, .15)), color-stop(.25, transparent),
|
||||
color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .15)),
|
||||
color-stop(.75, rgba(255, 255, 255, .15)), color-stop(.75, transparent),
|
||||
to(transparent));
|
||||
background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
|
||||
transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
|
||||
transparent 75%, transparent);
|
||||
background-image: -moz-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
|
||||
transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
|
||||
transparent 75%, transparent);
|
||||
background-image: -ms-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
|
||||
transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
|
||||
transparent 75%, transparent);
|
||||
background-image: -o-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
|
||||
transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
|
||||
transparent 75%, transparent);
|
||||
background-image: linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
|
||||
transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
|
||||
transparent 75%, transparent);
|
||||
|
||||
-webkit-animation: animate-stripes 3s linear infinite;
|
||||
-moz-animation: animate-stripes 3s linear infinite;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animate-stripes {
|
||||
0% {background-position: 0 0;} 100% {background-position: 60px 0;}
|
||||
}
|
||||
|
||||
|
||||
@-moz-keyframes animate-stripes {
|
||||
0% {background-position: 0 0;} 100% {background-position: 60px 0;}
|
||||
}
|
||||
|
||||
/*---------------------------*/
|
||||
|
||||
.shine span {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.shine span::after {
|
||||
content: '';
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background: #fff;
|
||||
-moz-border-radius: 3px;
|
||||
-webkit-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
|
||||
-webkit-animation: animate-shine 2s ease-out infinite;
|
||||
-moz-animation: animate-shine 2s ease-out infinite;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animate-shine {
|
||||
0% {opacity: 0; width: 0;}
|
||||
50% {opacity: .5;}
|
||||
100% {opacity: 0; width: 95%;}
|
||||
}
|
||||
|
||||
|
||||
@-moz-keyframes animate-shine {
|
||||
0% {opacity: 0; width: 0;}
|
||||
50% {opacity: .5;}
|
||||
100% {opacity: 0; width: 95%;}
|
||||
}
|
||||
.glow span {
|
||||
-moz-box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset;
|
||||
-webkit-box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset;
|
||||
box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset;
|
||||
|
||||
-webkit-animation: animate-glow 1s ease-out infinite;
|
||||
-moz-animation: animate-glow 1s ease-out infinite;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animate-glow {
|
||||
0% { -webkit-box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset;}
|
||||
50% { -webkit-box-shadow: 0 5px 5px rgba(255, 255, 255, .3) inset, 0 -5px 5px rgba(255, 255, 255, .3) inset;}
|
||||
100% { -webkit-box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset;}
|
||||
}
|
||||
|
||||
@-moz-keyframes animate-glow {
|
||||
0% { -moz-box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset;}
|
||||
50% { -moz-box-shadow: 0 5px 5px rgba(255, 255, 255, .3) inset, 0 -5px 5px rgba(255, 255, 255, .3) inset;}
|
||||
100% { -moz-box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset;}
|
||||
}
|
||||
|
||||
|
||||
Loading…
Add table
Add a link
Reference in a new issue