danbarber/tube-status-server
1
0
Fork 0
mirror of https://github.com/danbee/tube-status-server synced 2025-03-04 08:39:12 +00:00
Code Issues Releases Wiki Activity

Add messages, styling tweaks.

Browse Source
This commit is contained in:
Dan Barber 2013-01-27 20:10:06 +00:00
parent 0d53fc404d
commit 321df615bd
20 changed files with 273 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
fonts/fontawesome.dev.svg Normal file
View File

@ -0,0 +1,17 @@
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
<svg xmlns="http://www.w3.org/2000/svg">
<metadata>
This is a custom SVG font generated by IcoMoon.
<iconset grid="14"></iconset>
</metadata>
<defs>
<font id="fontawesome" horiz-adv-x="448" >
<font-face units-per-em="448" ascent="432" descent="-16" />
<missing-glyph horiz-adv-x="448" />
<glyph unicode="&#xe000;" d="M 384.00,368.00l0.00-112.00 q0.00-6.50 -4.75-11.25t-11.25-4.75l-112.00,0.00 q-10.50,0.00 -14.75,10.00q-4.25,9.75 3.50,17.25l 34.50,34.50q-37.00,34.25 -87.25,34.25q-26.00,0.00 -49.625-10.125t-40.875-27.375t-27.375-40.875t-10.125-49.625t 10.125-49.625t 27.375-40.875t 40.875-27.375t 49.625-10.125q 42.25,0.00 76.00,24.875t 46.25,65.375q 1.75,5.75 7.50,5.75l 49.75,0.00 q 4.00,0.00 6.25-3.00q 2.50-3.25 1.75-6.75q-9.75-43.75 -36.875-78.00t-66.50-53.25t-84.125-19.00q-39.00,0.00 -74.50,15.25t-61.25,41.00t-41.00,61.25t-15.25,74.50t 15.25,74.50t 41.00,61.25t 61.25,41.00t 74.50,15.25q 36.75,0.00 71.125-13.875t 61.125-39.125l 32.50,32.25q 7.25,7.75 17.50,3.50q 9.75-4.25 9.75-14.75z" horiz-adv-x="384" data-tags="repeat, loop, reload, refresh, synchronize" />
<glyph unicode="&#xe001;" d="M 272.00,200.00l0.00-16.00 q0.00-3.25 -2.375-5.625t-5.625-2.375l-96.00,0.00 q-3.25,0.00 -5.625,2.375t-2.375,5.625l0.00,112.00 q0.00,3.25 2.375,5.625t 5.625,2.375l 16.00,0.00 q 3.25,0.00 5.625-2.375t 2.375-5.625l0.00-88.00 l 72.00,0.00 q 3.25,0.00 5.625-2.375t 2.375-5.625zM 320.00,208.00q0.00,26.00 -10.125,49.625t-27.375,40.875t-40.875,27.375t-49.625,10.125t-49.625-10.125 t-40.875-27.375t-27.375-40.875t-10.125-49.625t 10.125-49.625t 27.375-40.875t 40.875-27.375t 49.625-10.125t 49.625,10.125t 40.875,27.375t 27.375,40.875t 10.125,49.625zM 384.00,208.00q0.00-52.25 -25.75-96.375t-69.875-69.875t-96.375-25.75t-96.375,25.75t-69.875,69.875t-25.75,96.375t 25.75,96.375t 69.875,69.875 t 96.375,25.75t 96.375-25.75t 69.875-69.875t 25.75-96.375z" horiz-adv-x="384" data-tags="time, clock" />
<glyph unicode="&#xe002;" d="M 424.75,385.50q0.00-8.75 -10.75-19.50l-158.00-158.00l0.00-192.00 l 80.00,0.00 q 6.50,0.00 11.25-4.75t 4.75-11.25t-4.75-11.25t-11.25-4.75l-224.00,0.00 q-6.50,0.00 -11.25,4.75t-4.75,11.25t 4.75,11.25t 11.25,4.75l 80.00,0.00 l0.00,192.00 l-158.00,158.00q-10.75,10.75 -10.75,19.50q0.00,5.75 4.50,9.125t 9.50,4.375t 10.75,1.00l 352.00,0.00 q 5.75,0.00 10.75-1.00t 9.50-4.375t 4.50-9.125z" data-tags="glass, drink" />
<glyph unicode="&#x20;" horiz-adv-x="224" />
<glyph class="hidden" unicode="&#xf000;" d="M0,432L 448 -16L0 -16 z" horiz-adv-x="0" />
</font></defs></svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB

BIN
fonts/fontawesome.eot Normal file
View File

Binary file not shown.

17
fonts/fontawesome.svg Normal file
View File

@ -0,0 +1,17 @@
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
<svg xmlns="http://www.w3.org/2000/svg">
<metadata>
This is a custom SVG font generated by IcoMoon.
<iconset grid="14"></iconset>
</metadata>
<defs>
<font id="fontawesome" horiz-adv-x="448" >
<font-face units-per-em="448" ascent="432" descent="-16" />
<missing-glyph horiz-adv-x="448" />
<glyph unicode="&#xe000;" d="M 384.00,368.00l0.00-112.00 q0.00-6.50 -4.75-11.25t-11.25-4.75l-112.00,0.00 q-10.50,0.00 -14.75,10.00q-4.25,9.75 3.50,17.25l 34.50,34.50q-37.00,34.25 -87.25,34.25q-26.00,0.00 -49.625-10.125t-40.875-27.375t-27.375-40.875t-10.125-49.625t 10.125-49.625t 27.375-40.875t 40.875-27.375t 49.625-10.125q 42.25,0.00 76.00,24.875t 46.25,65.375q 1.75,5.75 7.50,5.75l 49.75,0.00 q 4.00,0.00 6.25-3.00q 2.50-3.25 1.75-6.75q-9.75-43.75 -36.875-78.00t-66.50-53.25t-84.125-19.00q-39.00,0.00 -74.50,15.25t-61.25,41.00t-41.00,61.25t-15.25,74.50t 15.25,74.50t 41.00,61.25t 61.25,41.00t 74.50,15.25q 36.75,0.00 71.125-13.875t 61.125-39.125l 32.50,32.25q 7.25,7.75 17.50,3.50q 9.75-4.25 9.75-14.75z" horiz-adv-x="384" />
<glyph unicode="&#xe001;" d="M 272.00,200.00l0.00-16.00 q0.00-3.25 -2.375-5.625t-5.625-2.375l-96.00,0.00 q-3.25,0.00 -5.625,2.375t-2.375,5.625l0.00,112.00 q0.00,3.25 2.375,5.625t 5.625,2.375l 16.00,0.00 q 3.25,0.00 5.625-2.375t 2.375-5.625l0.00-88.00 l 72.00,0.00 q 3.25,0.00 5.625-2.375t 2.375-5.625zM 320.00,208.00q0.00,26.00 -10.125,49.625t-27.375,40.875t-40.875,27.375t-49.625,10.125t-49.625-10.125 t-40.875-27.375t-27.375-40.875t-10.125-49.625t 10.125-49.625t 27.375-40.875t 40.875-27.375t 49.625-10.125t 49.625,10.125t 40.875,27.375t 27.375,40.875t 10.125,49.625zM 384.00,208.00q0.00-52.25 -25.75-96.375t-69.875-69.875t-96.375-25.75t-96.375,25.75t-69.875,69.875t-25.75,96.375t 25.75,96.375t 69.875,69.875 t 96.375,25.75t 96.375-25.75t 69.875-69.875t 25.75-96.375z" horiz-adv-x="384" />
<glyph unicode="&#xe002;" d="M 424.75,385.50q0.00-8.75 -10.75-19.50l-158.00-158.00l0.00-192.00 l 80.00,0.00 q 6.50,0.00 11.25-4.75t 4.75-11.25t-4.75-11.25t-11.25-4.75l-224.00,0.00 q-6.50,0.00 -11.25,4.75t-4.75,11.25t 4.75,11.25t 11.25,4.75l 80.00,0.00 l0.00,192.00 l-158.00,158.00q-10.75,10.75 -10.75,19.50q0.00,5.75 4.50,9.125t 9.50,4.375t 10.75,1.00l 352.00,0.00 q 5.75,0.00 10.75-1.00t 9.50-4.375t 4.50-9.125z" />
<glyph unicode="&#x20;" horiz-adv-x="224" />
<glyph class="hidden" unicode="&#xf000;" d="M0,432L 448 -16L0 -16 z" horiz-adv-x="0" />
</font></defs></svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

BIN
fonts/fontawesome.ttf Normal file
View File

Binary file not shown.

BIN
fonts/fontawesome.woff Normal file
View File

Binary file not shown.

BIN
images/apple-touch-icon-114x114.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.0 KiB

BIN
images/apple-touch-icon-57x57.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.7 KiB

BIN
images/apple-touch-startup-image-320x460.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

BIN
images/apple-touch-startup-image-640x1096.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 43 KiB

BIN
images/apple-touch-startup-image-640x920.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 42 KiB

BIN
images/reload.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.2 KiB

35
index.html
View File

@ -2,10 +2,36 @@
<html lang="en" charset="utf-8">
<head>
<title>London Underground Status</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="initial-scale=1">
<meta content="yes" name="apple-mobile-web-app-capable">
<link rel="stylesheet" href="stylesheets/main.css" />
<script type="text/javascript" charset="utf-8" src="cordova-2.3.0.js"></script>
<script src="javascripts/libs/require.js" data-main="javascripts/main"></script>
<!-- iPhone -->
<link href="/images/apple-touch-icon-57x57.png"
sizes="57x57"
rel="apple-touch-icon">
<link href="/images/apple-touch-startup-image-320x460.png"
media="(device-width: 320px) and (device-height: 480px)
and (-webkit-device-pixel-ratio: 1)"
rel="apple-touch-startup-image">
<!-- iPhone (Retina) -->
<link href="/images/apple-touch-icon-114x114.png"
sizes="114x114"
rel="apple-touch-icon">
<link href="/images/apple-touch-startup-image-640x920.png"
media="(device-width: 320px) and (device-height: 480px)
and (-webkit-device-pixel-ratio: 2)"
rel="apple-touch-startup-image">
<!-- iPhone 5 -->
<link href="/images/apple-touch-startup-image-640x1096.png"
media="(device-width: 320px) and (device-height: 568px)
and (-webkit-device-pixel-ratio: 2)"
rel="apple-touch-startup-image">
</head>
<body class="loading">
@ -14,7 +40,7 @@
<header role="banner">
<h1>Tube Status</h1>
<a href="/" id="refresh" title="Refresh">&#x27F3;</a>
<a href="/" id="refresh" title="Refresh">&#xe000;</a>
</header>
<section role="main">
@ -24,9 +50,8 @@
<footer>
<ul>
<li><a href="#" id="now" class="selected">Now</a></li>
<li><a href="#" id="tomorrow">Tomorrow</a></li>
<li><a href="#" id="weekend">Weekend</a></li>
<li><a href="#" id="now" class="selected icon-time">Now</a></li>
<li><a href="#" id="weekend" class="icon-glass">Weekend</a></li>
</ul>
</footer>

8
javascripts/app.js
View File

@ -1,16 +1,16 @@
define(['backbone',
'mustache',
'collections/lines',
'collections/lines_now',
'views/main',
'views/line_list'],
function(Backbone, Mustache, LinesCollection, Main, LineList) {
function(Backbone, Mustache, LinesNowCollection, Main, LineList) {
return {
initialize: function() {
lines = new LinesCollection;
lines = new LinesNowCollection;
main = new Main({ collection: lines });
lineList = new LineList({ collection: lines });
lines.url = lines.urls.now;
//lines.url = lines.urls.now;
lines.fetch();
}

28
javascripts/collections/lines.js
View File

@ -1,28 +0,0 @@
define(['backbone', 'models/line'], function(Backbone, Line) {
var MySync = function (method, collection, options) {
   options.timeout = 10000; // required, or the application won't pick up on 404 responses
   options.dataType = "jsonp";
   return Backbone.sync(method, collection, options);
};
var LinesCollection = Backbone.Collection.extend({
// url: "http://api.tubeupdates.com/?method=get.status",
urls: {
now: "http://tubefeed.herokuapp.com/now.json",
tomorrow: "http://tubefeed.herokuapp.com/tomorrow.json",
weekend: "http://tubefeed.herokuapp.com/weekend.json"
},
model: Line,
sync: MySync,
parse: function(data) {
return data.response.lines;
}
});
return LinesCollection;
});

16
javascripts/collections/lines_now.js Normal file
View File

@ -0,0 +1,16 @@
define(['backbone', 'models/line'], function(Backbone, Line) {
var LinesNowCollection = Backbone.Collection.extend({
// added callback=? to force jsonp
url: "http://api.tubeupdates.com/?method=get.status&callback=?",
model: Line,
parse: function(data) {
return data.response.lines;
}
});
return LinesNowCollection;
});

9
javascripts/templates/line.mustache
View File

@ -4,8 +4,9 @@
{{ #message_count }}<span class="message-count">{{ message_count }}</span>{{ /message_count }}
<span class="status {{ status_class }}">{{ status }}</span>
</a>
{{ #messages }}
<div id="#{{ id }}_messages">
</div>
{{ /messages }}
{{ #message_count }}
<div class="messages">
{{& messages_html }}
</div>
{{ /message_count }}
</li>

11
javascripts/views/line_list.js
View File

@ -2,13 +2,13 @@ define(['backbone',
'text',
'mustache',
'models/line',
'collections/lines',
'text!templates/message.mustache',
'text!templates/line.mustache'],
function(Backbone,
Text,
Mustache,
Line,
LineCollection,
messageTemplate,
lineTemplate) {
var LineList = Backbone.View.extend({
@ -22,7 +22,12 @@ function(Backbone,
render: function() {
var html = "";
this.collection.models.forEach(function(model) {
html += Mustache.render(lineTemplate, model.toJSON());
var messages_html = "";
model.attributes.messages.forEach(function(message) {
messages_html += Mustache.render(messageTemplate, { message: message });
});
model.set("messages_html", messages_html);
html += Mustache.render(lineTemplate, model.attributes);
});
// render the HTML and refresh jQuery Mobile.
this.$el.html(html);

44
stylesheets/_iconfont.scss Normal file
View File

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

113
stylesheets/main.css
View File

@ -1,3 +1,42 @@
@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;
@ -16,13 +55,13 @@ header {
position: fixed;
width: 100%;
background: #0019a8;
background-color: #8f9fff;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #8f9fff), color-stop(100%, #001175));
background-image: -webkit-linear-gradient(top, #8f9fff, #001175);
background-image: -moz-linear-gradient(top, #8f9fff, #001175);
background-image: -ms-linear-gradient(top, #8f9fff, #001175);
background-image: -o-linear-gradient(top, #8f9fff, #001175);
background-image: linear-gradient(top, #8f9fff, #001175);
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;
@ -33,18 +72,20 @@ header {
text-align: center;
font-size: 1.3em;
font-weight: normal;
text-shadow: 0 0 4px rgba(0, 0, 0, 0.8); }
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);
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), inset 0 0 3px rgba(255, 255, 255, 0.6);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), inset 0 0 3px rgba(255, 255, 255, 0.6);
padding: 0.1em 0.5em;
font-weight: bold;
color: white; }
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); }
footer {
position: fixed;
@ -53,28 +94,36 @@ footer {
background: #111;
text-align: center;
height: 4em;
padding-top: 0.3em; }
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: 32%; }
width: 48%; }
footer li a {
font-size: 0.8em;
height: 4.2em;
padding: 0.4em;
color: white;
display: block;
border-radius: 0.3em; }
border-radius: 0.3em;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5); }
footer li a.selected {
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);
background: rgba(255, 255, 255, 0.1);
border: 1px solid black;
-webkit-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.3);
box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.3); }
-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:before {
display: block;
font-size: 1.5em;
margin: 0.1em 0 0.2em; }
section[role="main"] {
padding: 2.5em 0 4em; }
@ -99,6 +148,15 @@ ul#line-list {
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;
@ -114,9 +172,10 @@ li .status {
font-weight: bold;
padding-top: 0.1em; }
li .message-count {
padding: 0 0.2em 0.4em;
text-shadow: none;
width: 1.2em;
height: 1.2em;
width: 1.6em;
height: 1.6em;
border: 2px solid white;
text-align: center;
margin-left: 0.5em;

67
stylesheets/main.scss
View File

@ -1,3 +1,5 @@
@import "iconfont";
$header-color: rgb(0, 25, 168);
@import "bourbon/bourbon";
@ -17,7 +19,7 @@ header {
position: fixed;
width: 100%;
background: rgb(0, 25, 168);
@include linear-gradient(lighten($header-color, 45%), darken($header-color, 10%));
@include linear-gradient(lighten($header-color, 40%), darken($header-color, 5%));
@include box-shadow(0 2px 3px rgba(0, 0, 0, 0.5));
color: white;
height: 2.5em;
@ -27,7 +29,7 @@ header {
text-align: center;
font-size: 1.3em;
font-weight: normal;
text-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
text-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
}
#refresh {
position: absolute;
@ -35,10 +37,12 @@ header {
top: 0.25em;
border-radius: 0.3em;
border: 1px solid rgba(0, 0, 0, 0.4);
@include box-shadow(0 1px 1px rgba(0, 0, 0, 0.3), inset 0 0 3px rgba(255, 255, 255, 0.6));
padding: 0.1em 0.5em;
font-weight: bold;
background: rgba(255, 255, 255, 0.1);
@include 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);
}
}
@ -50,9 +54,11 @@ footer {
text-align: center;
height: 4em;
padding-top: 0.3em;
@include linear-gradient(#333, #111);
@include box-shadow(0 -2px 3px rgba(0, 0, 0, 0.5));
li {
display: inline-block;
width: 32%;
width: 48%;
a {
font-size: 0.8em;
height: 4.2em;
@ -60,10 +66,16 @@ footer {
color: white;
display: block;
border-radius: 0.3em;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
&.selected {
@include linear-gradient(#333, #111);
background: rgba(255, 255, 255, 0.1);
border: 1px solid black;
@include box-shadow(inset 0 0 3px rgba(255, 255, 255, 0.3));
@include 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));
}
&:before {
display: block;
font-size: 1.5em;
margin: 0.1em 0 0.2em;
}
}
}
@ -75,18 +87,30 @@ section[role="main"] {
ul#line-list {
list-style: none;
padding: 0;
li a {
background: #ffffff; /* Old browsers */
@include linear-gradient(white, #f1f1f1);
text-shadow: 0 2px 2px white;
border: {
style: solid;
width: 1px 0;
color: #ffffff white #cccccc;
li {
a {
background: #ffffff; /* Old browsers */
@include linear-gradient(white, #f1f1f1);
text-shadow: 0 2px 2px white;
border: {
style: solid;
width: 1px 0;
color: #ffffff white #cccccc;
}
display: block;
padding: 0.7em 1em;
text-decoration: none;
}
.messages {
padding: 1em 1.5em 0.5em;
font-size: 0.8em;
background: #222;
color: white;
@include box-shadow(inset 0 2px 8px black);
p {
padding-bottom: 1em;
}
}
display: block;
padding: 0.7em 1em;
text-decoration: none;
}
}
li {
@ -100,9 +124,10 @@ li {
}
.status { float: right; text-transform: capitalize; font-size: 0.8em; font-weight: bold; padding-top: 0.1em; }
.message-count {
padding: 0 0.2em 0.4em;
text-shadow: none;
width: 1.2em;
height: 1.2em;
width: 1.6em;
height: 1.6em;
border: 2px solid white;
text-align: center;
margin-left: 0.5em;