Benjamin Southall
8 years ago
10 changed files with 244 additions and 230 deletions
@ -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;} |
||||
|
} |
||||
|
|
||||
|
|
@ -1,29 +0,0 @@ |
|||||
{% filter remove_whitespace %} |
|
||||
<!DOCTYPE html> |
|
||||
<html> |
|
||||
<head> |
|
||||
<meta http-equiv="Content-type" content="text/html; charset=utf-8" /> |
|
||||
<title>{{ settings.title }}</title> |
|
||||
<link rel="shortcut icon" href="/favicon.png"> |
|
||||
<link rel="stylesheet" media="screen" href="/stylesheets/style.css"/> |
|
||||
<link rel="stylesheet" media="screen" href="/stylesheets/dark.css"/> |
|
||||
<link rel="stylesheet" media="screen" href="/stylesheets/dark_irc.css"/> |
|
||||
</head> |
|
||||
<body> |
|
||||
<div class="bar top"> |
|
||||
{{ boardlist.top }} |
|
||||
</div> |
|
||||
|
|
||||
<header> |
|
||||
<h1>{{ settings.title }}</h1> |
|
||||
<div class="subtitle">{{ settings.subtitle }}</div> |
|
||||
</header> |
|
||||
|
|
||||
|
|
||||
<div class="ban" style="text-align: left!important;"> |
|
||||
<h2>Web Client - Point your own clients to #lainchan on irc.freenode.net.</h2> |
|
||||
<iframe src="https://webchat.freenode.net?channels=%23lainchan&uio=MTE9MTMz98" width="766" height="400"></iframe> |
|
||||
</div> |
|
||||
</body> |
|
||||
</html> |
|
||||
{% endfilter %} |
|
Loading…
Reference in new issue