Add trip detail page0.5.0

3 files changed, 98 insertions, 3 deletions

diff --git a/sass/app.scss b/sass/app.scss
index c5391a2..be78af3 100644
--- a/sass/app.scss
+++ b/sass/app.scss
@@ -67,6 +67,32 @@ input[type="text"] {
 	box-sizing: border-box;
 }
 
+.smallbutton {
+	display: inline-block;
+	vertical-align: baseline;
+	border-radius: 4px;
+	border: 1px solid #2e6da4;
+	transition: background-color .3s;
+	color: #fff;
+	background-color: #337ab7;
+	cursor: pointer;
+	box-shadow: none;
+	padding: 0.9ex;
+	margin-right: 1em;
+
+	&:active, &:focus, &:hover {
+		color: #fff;
+		background-color: #286090;
+		border-color: #204d74;
+	}
+
+	.material-icons {
+		display: block;
+		float: left;
+		margin-right: 0.5ex;
+	}
+}
+
 .globalnote {
 	margin-top: 1em;
 	font-style: italic;
@@ -328,7 +354,7 @@ ul.departures {
 
 		.delay {
 			padding-right: 1ex;
-			color: #ff0000;
+			color: $delay-color;
 		}
 	}
 
@@ -344,6 +370,67 @@ ul.departures {
 	}
 }
 
+.tripinfo {
+	padding-left: 1em;
+	padding-right: 1em;
+	.direction {
+		text-align: center;
+		font-size: 120%;
+		padding-top: 0.5em;
+		padding-bottom: 0.5em;
+		border-bottom: 0.1em dashed #cccccc;
+	}
+	.dataline {
+		margin-top: 0.6em;
+		font-size: 120%;
+		width: 100%;
+		display: flex;
+		justify-content: space-between;
+		margin-bottom: 1em;
+
+		> div {
+			width: 33%;
+		}
+
+		.arrival {
+			display: inline-block;
+			text-align: right;
+		}
+		.platform {
+			text-align: center;
+		}
+		.departure {
+			text-align: right;
+		}
+
+		.delay {
+			color: $delay-color;
+		}
+	}
+	.linklist {
+		margin-top: 0.5em;
+		margin-bottom: 1em;
+		.material-icons {
+			font-size: 20px;
+		}
+	}
+	.route {
+		margin-top: 1em;
+		.past-stop {
+			list-style-type: disc;
+		}
+		.future-stop {
+			list-style-type: circle;
+		}
+		.this-stop {
+			font-weight: bold;
+		}
+		.cancelled-stop {
+			color: $cancelled-stop-color;
+		}
+	}
+}
+
 .navbar-fixed {
 	position: relative;
 	z-index: 997;
@@ -398,7 +485,7 @@ ul.departures {
 	font-weight: 400;
 	src: local('Material Icons'),
 		local('MaterialIcons-Regular'),
-		url(/static/v5/font/MaterialIcons-Regular.ttf) format('truetype');
+		url(/static/v6/font/MaterialIcons-Regular.ttf) format('truetype');
 }
 
 .material-icons {
diff --git a/sass/dark.scss b/sass/dark.scss
index 1b90571..34b82f4 100644
--- a/sass/dark.scss
+++ b/sass/dark.scss
@@ -23,6 +23,10 @@ $suburban-bg: #2f6639;
 $subway-bg: #2045b0;
 $bus-bg: #7f3d7f;
 
+$cancelled-stop-color: #ff7777;
 $cancelled-bg-color: #512f00;
 
+$delay-color: #ff7777;
+$undelay-color: #77ff77;
+
 @import 'app.scss';
diff --git a/sass/light.scss b/sass/light.scss
index f080ddc..8061206 100644
--- a/sass/light.scss
+++ b/sass/light.scss
@@ -19,10 +19,14 @@ $longdistance-bg: #ffcccc;
 $regional-bg: #eeeeee;
 $tram-bg: #ffcccc;
 $taxi-bg: #eeaaee;
-$suburban-bg: #aaffba;
+$suburban-bg: #9fd79f;
 $subway-bg: #aac0ff;
 $bus-bg: #eeaaee;
 
+$cancelled-stop-color: #cc0000;
 $cancelled-bg-color: #ffe7d0;
 
+$delay-color: #ff0000;
+$undelay-color: #006600;
+
 @import 'app.scss';