mirror of
https://github.com/danbee/tube-status-server
synced 2025-03-04 08:39:12 +00:00
290 lines
9.3 KiB
CSS
290 lines
9.3 KiB
CSS
@font-face {
|
|
font-family: 'fontawesome';
|
|
src: url("../fonts/fontawesome.eot");
|
|
src: url("../fonts/fontawesome.eot?#iefix") format("embedded-opentype"), url("../fonts/fontawesome.svg#fontawesome") format("svg"), url("../fonts/fontawesome.woff") format("woff"), url("../fonts/fontawesome.ttf") format("truetype");
|
|
font-weight: normal;
|
|
font-style: normal; }
|
|
|
|
/* Use the following CSS code if you want to use data attributes for inserting your icons */
|
|
[data-icon]:before {
|
|
font-family: 'fontawesome';
|
|
content: attr(data-icon);
|
|
speak: none;
|
|
font-weight: normal;
|
|
line-height: 1;
|
|
-webkit-font-smoothing: antialiased; }
|
|
|
|
/* Use the following CSS code if you want to have a class per icon */
|
|
/*
|
|
Instead of a list of all class selectors,
|
|
you can use the generic selector below, but it's slower:
|
|
[class*="icon-"]:before {
|
|
*/
|
|
.icon-repeat:before, .icon-time:before, .icon-glass:before {
|
|
font-family: 'fontawesome';
|
|
speak: none;
|
|
font-style: normal;
|
|
font-weight: normal;
|
|
line-height: 1;
|
|
-webkit-font-smoothing: antialiased; }
|
|
|
|
.icon-repeat:before {
|
|
content: "\e000"; }
|
|
|
|
.icon-time:before {
|
|
content: "\e001"; }
|
|
|
|
.icon-glass:before {
|
|
content: "\e002"; }
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
-webkit-box-sizing: border-box;
|
|
-moz-box-sizing: border-box;
|
|
box-sizing: border-box; }
|
|
|
|
a {
|
|
text-decoration: none; }
|
|
|
|
body {
|
|
margin: 0;
|
|
font-family: "Helvetica Neue", "Arial", sans-serif; }
|
|
|
|
#loader {
|
|
position: fixed;
|
|
top: 45%;
|
|
left: 50%;
|
|
width: 52px;
|
|
height: 52px;
|
|
margin: -26px 0 0 -26px;
|
|
background: black url(../images/loader.gif) center center no-repeat;
|
|
border-radius: 26px;
|
|
opacity: 0.7;
|
|
display: none; }
|
|
|
|
header {
|
|
position: fixed;
|
|
width: 100%;
|
|
background: #0019a8;
|
|
background-color: #758aff;
|
|
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #758aff), color-stop(100%, #00158e));
|
|
background-image: -webkit-linear-gradient(top, #758aff, #00158e);
|
|
background-image: -moz-linear-gradient(top, #758aff, #00158e);
|
|
background-image: -ms-linear-gradient(top, #758aff, #00158e);
|
|
background-image: -o-linear-gradient(top, #758aff, #00158e);
|
|
background-image: linear-gradient(top, #758aff, #00158e);
|
|
-webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5);
|
|
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5);
|
|
color: white;
|
|
height: 2.5em;
|
|
padding-top: 0.45em;
|
|
border-bottom: 1px solid #0f0f64; }
|
|
header h1 {
|
|
text-align: center;
|
|
font-size: 1.3em;
|
|
font-weight: normal;
|
|
text-shadow: 0 0 4px rgba(0, 0, 0, 0.4); }
|
|
header #refresh {
|
|
position: absolute;
|
|
right: 1em;
|
|
top: 0.25em;
|
|
border-radius: 0.3em;
|
|
border: 1px solid rgba(0, 0, 0, 0.4);
|
|
background: rgba(255, 255, 255, 0.1);
|
|
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -2px 0 rgba(0, 0, 0, 0.4);
|
|
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -2px 0 rgba(0, 0, 0, 0.4);
|
|
padding: 0.3em 0.7em 0.4em;
|
|
color: white;
|
|
font-family: "fontawesome";
|
|
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5); }
|
|
header #refresh:hover, header #refresh:focus {
|
|
background: rgba(255, 255, 255, 0.2); }
|
|
header #refresh:active {
|
|
padding: 0.4em 0.7em 0.3em;
|
|
background-color: rgba(255, 255, 255, 0);
|
|
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(255, 255, 255, 0.15)));
|
|
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.15));
|
|
background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.15));
|
|
background-image: -ms-linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.15));
|
|
background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.15));
|
|
background-image: linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.15));
|
|
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), inset 0 2px 2px rgba(0, 0, 0, 0.4);
|
|
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), inset 0 2px 2px rgba(0, 0, 0, 0.4); }
|
|
|
|
footer {
|
|
position: fixed;
|
|
bottom: 0;
|
|
width: 100%;
|
|
background: #111;
|
|
text-align: center;
|
|
height: 4em;
|
|
padding-top: 0.3em;
|
|
background-color: #333333;
|
|
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #333333), color-stop(100%, #111111));
|
|
background-image: -webkit-linear-gradient(top, #333333, #111111);
|
|
background-image: -moz-linear-gradient(top, #333333, #111111);
|
|
background-image: -ms-linear-gradient(top, #333333, #111111);
|
|
background-image: -o-linear-gradient(top, #333333, #111111);
|
|
background-image: linear-gradient(top, #333333, #111111);
|
|
-webkit-box-shadow: 0 -2px 3px rgba(0, 0, 0, 0.5);
|
|
box-shadow: 0 -2px 3px rgba(0, 0, 0, 0.5); }
|
|
footer li {
|
|
display: inline-block;
|
|
width: 49%; }
|
|
footer li:first-child a {
|
|
margin-left: 0;
|
|
border-radius: 0.3em 0 0 0.3em; }
|
|
footer li:last-child a {
|
|
border-radius: 0 0.3em 0.3em 0; }
|
|
footer li a {
|
|
font-size: 0.8em;
|
|
height: 4.2em;
|
|
padding: 0.4em;
|
|
color: rgba(255, 255, 255, 0.6);
|
|
display: block;
|
|
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
|
|
border: 1px solid black;
|
|
margin-left: -1px;
|
|
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -2px 0 rgba(0, 0, 0, 0.4);
|
|
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -2px 0 rgba(0, 0, 0, 0.4); }
|
|
footer li a.selected {
|
|
color: white;
|
|
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5), 0 0 5px rgba(255, 255, 255, 0.3);
|
|
background-color: rgba(255, 255, 255, 0);
|
|
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(255, 255, 255, 0.15)));
|
|
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.15));
|
|
background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.15));
|
|
background-image: -ms-linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.15));
|
|
background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.15));
|
|
background-image: linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.15));
|
|
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), inset 0 2px 2px rgba(0, 0, 0, 0.4);
|
|
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), inset 0 2px 2px rgba(0, 0, 0, 0.4); }
|
|
footer li a:before {
|
|
display: block;
|
|
font-size: 1.5em;
|
|
margin: 0.1em 0 0.2em; }
|
|
|
|
.html5 section[role="main"] {
|
|
padding: 2.5em 0 4em; }
|
|
|
|
ul#line-list {
|
|
list-style: none;
|
|
padding: 0; }
|
|
ul#line-list li a {
|
|
background: #ffffff;
|
|
/* Old browsers */
|
|
background-color: white;
|
|
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, white), color-stop(100%, #f1f1f1));
|
|
background-image: -webkit-linear-gradient(top, white, #f1f1f1);
|
|
background-image: -moz-linear-gradient(top, white, #f1f1f1);
|
|
background-image: -ms-linear-gradient(top, white, #f1f1f1);
|
|
background-image: -o-linear-gradient(top, white, #f1f1f1);
|
|
background-image: linear-gradient(top, white, #f1f1f1);
|
|
text-shadow: 0 2px 2px white;
|
|
border-style: solid;
|
|
border-width: 1px 0;
|
|
border-color: white white #cccccc;
|
|
display: block;
|
|
padding: 0.7em 1em;
|
|
text-decoration: none; }
|
|
ul#line-list li .messages {
|
|
padding: 1em 1.5em 0.5em;
|
|
font-size: 0.8em;
|
|
background: #222;
|
|
color: white;
|
|
-webkit-box-shadow: inset 0 2px 8px black;
|
|
box-shadow: inset 0 2px 8px black; }
|
|
ul#line-list li .messages p {
|
|
padding-bottom: 1em; }
|
|
|
|
li .name {
|
|
text-shadow: none;
|
|
padding: 0.2em 0.5em;
|
|
font-weight: normal;
|
|
border-radius: 3px;
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), inset 0 0 3px rgba(255, 255, 255, 0.6);
|
|
border: 1px solid rgba(0, 0, 0, 0.1); }
|
|
li .status {
|
|
float: right;
|
|
text-transform: capitalize;
|
|
font-size: 0.8em;
|
|
font-weight: bold;
|
|
padding-top: 0.1em; }
|
|
li .message-count {
|
|
padding: 0 0.2em 0.4em;
|
|
text-shadow: none;
|
|
width: 1.6em;
|
|
height: 1.6em;
|
|
border: 2px solid white;
|
|
text-align: center;
|
|
margin-left: 0.5em;
|
|
font-weight: normal;
|
|
font-size: 0.9em;
|
|
float: right;
|
|
background: black;
|
|
color: white;
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
|
|
border-radius: 1em; }
|
|
li .good-service {
|
|
color: green; }
|
|
li .special-service {
|
|
color: #000099; }
|
|
li .part-suspended, li .part-closure, li .minor-delays {
|
|
color: #CC9900; }
|
|
li .major-delays {
|
|
color: #CC0000; }
|
|
|
|
#bakerloo .name {
|
|
background: #b36305;
|
|
color: white;
|
|
border-width: 1px; }
|
|
|
|
#central .name {
|
|
background: #e32017;
|
|
color: white; }
|
|
|
|
#circle .name {
|
|
background: #ffd300;
|
|
color: #113b92; }
|
|
|
|
#district .name {
|
|
background: #00782a;
|
|
color: white; }
|
|
|
|
#dlr .name {
|
|
background: #00a4a7;
|
|
color: white; }
|
|
|
|
#hammersmithcity .name {
|
|
background: #f3a9bb;
|
|
color: #113b92; }
|
|
|
|
#jubilee .name {
|
|
background: #a0a5a9;
|
|
color: white; }
|
|
|
|
#metropolitan .name {
|
|
background: #9b0056;
|
|
color: white; }
|
|
|
|
#northern .name {
|
|
background: black;
|
|
color: white; }
|
|
|
|
#overground .name {
|
|
background: #ee7c0e;
|
|
color: white; }
|
|
|
|
#piccadilly .name {
|
|
background: #003688;
|
|
color: white; }
|
|
|
|
#victoria .name {
|
|
background: #0098d4;
|
|
color: white; }
|
|
|
|
#waterloocity .name {
|
|
background: #95cdba;
|
|
color: #113b92; }
|