3 files changed, 146 insertions, 8 deletions

diff --git a/sass/app.scss b/sass/app.scss
index 8c0c075..75074bd 100644
--- a/sass/app.scss
+++ b/sass/app.scss
@@ -30,6 +30,7 @@ a {
 
 p,
 div.about,
+div.config,
 div.input-field,
 div.notes {
 	max-width: 94%;
@@ -37,6 +38,13 @@ div.notes {
 	margin-right: auto;
 }
 
+div.journey,
+div.nextstop {
+	max-width: 98%;
+	margin-left: auto;
+	margin-right: auto;
+}
+
 p {
 	text-align: justify;
 }
@@ -142,6 +150,9 @@ div.content {
 		background-color: $powercar-wagon-color;
 	}
 
+	.closed {
+		background-color: $closed-wagon-color;
+	}
 
 	.nondestwagon {
 		border-style: dashed;
@@ -154,13 +165,29 @@ div.content {
 		.type {
 			display: inline-block;
 			width: 5em;
-			color: $fg2;
+			color: $fg;
 		}
 
 		a.type {
 			color: $link-color;
 		}
 
+		.groupno {
+			color: $fg;
+		}
+
+		.grouptype {
+			color: $fg2;
+		}
+
+		.grouptype:before {
+			content: "(";
+		}
+
+		.grouptype:after {
+			content: ")";
+		}
+
 		.uicunknown {
 			color: $fg3;
 		}
@@ -191,7 +218,7 @@ div.content {
 			font-weight: bold;
 		}
 
-		.uic78::before {
+		.uic78:before {
 			content: "-";
 		}
 
@@ -209,7 +236,7 @@ div.content {
 			color: $fg3;
 		}
 
-		.uiccheck::before {
+		.uiccheck:before {
 			content: "-";
 		}
 	}
@@ -264,6 +291,9 @@ div.app {
 
 			&.cancelled {
 				background-color: $cancelled-bg-color;
+				.time {
+					color: $fg !important;
+				}
 			}
 
 			&.past {
@@ -325,6 +355,7 @@ div.app {
 				right: 7em;
 				height: 1.5em;
 				overflow: hidden;
+				white-space: nowrap;
 			}
 
 			.route {
@@ -342,6 +373,7 @@ div.app {
 				bottom:0;
 				left:4em;
 				width: 70%;
+				white-space: nowrap;
 				overflow: hidden;
 				color: $fg;
 			}
@@ -360,6 +392,12 @@ div.app {
 				}
 			}
 
+			.load {
+				color: $fg;
+				font-weight: normal;
+				margin-right: 0.5em;
+			}
+
 			.platform {
 				background-color: transparent;
 				font-size: 3em;
@@ -390,6 +428,16 @@ div.app {
 					background-color: transparent;
 				}
 
+				&.a-bit-delayed {
+					color: $smalldelay-color;
+					background-color: transparent;
+				}
+
+				&.on-time {
+					color: $ontime-color;
+					background-color: transparent;
+				}
+
 				.no-realtime {
 					background-color: transparent;
 					padding-right: 1ex;
@@ -520,13 +568,32 @@ div.app {
 			width: 100%;
 			display: flex;
 			justify-content: space-between;
-			margin-bottom: 1em;
+			margin-bottom: 0.5em;
 
 			> div {
 				width: 33%;
 			}
 		}
 
+		.wagonorder-preview {
+			font-size: 110%;
+			width: 100%;
+			text-align: center;
+			margin-bottom: 1em;
+
+			a {
+				color: $fg;
+			}
+
+			.otherno {
+				color: $fg2;
+			}
+
+			.meta {
+				color: $fg1;
+			}
+		}
+
 		.departure {
 			text-align: right;
 		}
@@ -601,6 +668,45 @@ div.app {
 				list-style-type: circle;
 			}
 
+			.time-early {
+				color: $early-stop-color;
+			}
+
+			.time-delayed {
+				color: $delayed-stop-color;
+			}
+
+			.time-sched-only {
+				color: $delayed-stop-color;
+			}
+
+			.time-sched-ontime {
+				color: $early-stop-color;
+			}
+
+
+			.annotation {
+				color: $fg2;
+				list-style-type: none;
+				padding-left: 3em;
+			}
+
+			.-sched:before {
+				content: " ";
+			}
+
+			.time-sched:after {
+				content: " ";
+			}
+
+			.time-sched-only:before {
+				content: "(";
+			}
+
+			.time-sched-only:after {
+				content: ")";
+			}
+
 			i.material-icons {
 				font-size: 14px;
 			}
@@ -667,15 +773,27 @@ div.candidatelist a .traininfo {
 	padding-bottom: 0.3em;
 }
 
-div.about {
+div.config {
 	margin-top: 2em;
 	font-family: Sans-Serif;
 	color: $fg2;
+
+	a {
+		color: $link-color;
+		cursor: pointer;
+		text-decoration: none;
+	}
 }
 
-div.about a {
-	color: $link-color;
-	text-decoration: none;
+div.about {
+	margin-top: 1em;
+	font-family: Sans-Serif;
+	color: $fg2;
+
+	a {
+		color: $link-color;
+		text-decoration: none;
+	}
 }
 
 .notice {
@@ -887,6 +1005,10 @@ input[type="submit"]:active,
 	box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
 }
 
+.button-active {
+	font-weight: bold;
+}
+
 .button-light {
 	color: $fg1;
 	background-color: $bg;
@@ -902,6 +1024,10 @@ input[type="submit"]:active,
 	border-color: $button-hover-border;
 }
 
+div.backendlink {
+	margin-top: 1ex;
+}
+
 div.notes {
 	margin-top: 2em;
 }
diff --git a/sass/dark.scss b/sass/dark.scss
index 72a6927..78b61b0 100644
--- a/sass/dark.scss
+++ b/sass/dark.scss
@@ -32,18 +32,24 @@ $route-color: #dddddd;
 
 $info-color: #ff7777;
 $delay-color: #ff7777;
+$smalldelay-color: #dd9999;
 $undelay-color: #77ff77;
 $delaynorm-color: #dd9999;
 $undelaynorm-color: #99dd99;
+$ontime-color: #aaeeaa;
 
 $additional-stop-color: #77ff77;
 $cancelled-stop-color: #ff7777;
 
+$early-stop-color: #ccffcc;
+$delayed-stop-color: #ff9999;
+
 $cancelled-bg-color: #512f00;
 $past-bg-color: $bg05;
 
 $firstclass-wagon-color: #333300;
 $powercar-wagon-color: #222222;
+$closed-wagon-color: #222222;
 
 $button-hover: #111111;
 $button-hover-border: #333333;
diff --git a/sass/light.scss b/sass/light.scss
index 809c8ce..60981b1 100644
--- a/sass/light.scss
+++ b/sass/light.scss
@@ -32,18 +32,24 @@ $route-color: #444444;
 
 $info-color: #ff0000;
 $delay-color: #ff0000;
+$smalldelay-color: #bb3333;
 $undelay-color: #006600;
 $delaynorm-color: #bb3333;
 $undelaynorm-color: #338833;
+$ontime-color: #227722;
 
 $additional-stop-color: #009900;
 $cancelled-stop-color: #cc0000;
 
+$early-stop-color: #007700;
+$delayed-stop-color: #990000;
+
 $cancelled-bg-color: #ffe7d0;
 $past-bg-color: $bg05;
 
 $firstclass-wagon-color: #ffff99;
 $powercar-wagon-color: #cccccc;
+$closed-wagon-color: #dddddd;
 
 $button-hover: #e6e6e6;
 $button-hover-border: #adadad;