From 836cd8a39a2c6c64e3cd23239a18fe1c6ea8515c Mon Sep 17 00:00:00 2001
From: Daniel Friesel <derf@finalrewind.org>
Date: Sat, 2 Jan 2021 18:03:34 +0100
Subject: show exit direction in wagon order

---
 sass/app.scss   | 54 ++++++++++++++++++++++++++++++++++++++++++++++++------
 sass/dark.scss  |  1 +
 sass/light.scss |  1 +
 3 files changed, 50 insertions(+), 6 deletions(-)

(limited to 'sass')

diff --git a/sass/app.scss b/sass/app.scss
index 811adfd..915ea1f 100644
--- a/sass/app.scss
+++ b/sass/app.scss
@@ -47,17 +47,61 @@ div.content {
 	width: 100%;
 	height: 100ex;
 
+	&.exit-unknown {
+		.section {
+			left: 1em;
+			width: 2em;
+		}
+		.wagon {
+			left: 3em;
+			min-width: 6em;
+		}
+		.details {
+			left: 10em;
+			right: 0em;
+		}
+	}
+
+	&.exit-left {
+		.section {
+			left: 1em;
+			width: 2em;
+			background-color: $bg05;
+		}
+		.wagon {
+			left: 3em;
+			min-width: 6em;
+		}
+		.details {
+			left: 10em;
+			right: 0em;
+		}
+	}
+
+	&.exit-right {
+		.section {
+			right: 1em;
+			width: 2em;
+			background-color: $bg05;
+		}
+		.wagon {
+			right: 3em;
+			min-width: 6em;
+		}
+		.details {
+			right: 10em;
+			left: 0em;
+			text-align: right;
+		}
+	}
+
 	.section {
 		position: absolute;
-		left: 1em;
-		width: 2em;
 		text-align: center;
 	}
 
 	.wagon {
 		position: absolute;
-		left: 3em;
-		min-width: 6em;
 		border: 1px solid $fg3;
 		padding-left: 0.2em;
 		padding-right: 0.2em;
@@ -96,8 +140,6 @@ div.content {
 	.details {
 		position: absolute;
 		padding-top: 0.5ex;
-		left: 10em;
-		right: 0em;
 
 		.type {
 			display: inline-block;
diff --git a/sass/dark.scss b/sass/dark.scss
index 65ccf13..725b8dd 100644
--- a/sass/dark.scss
+++ b/sass/dark.scss
@@ -9,6 +9,7 @@ $link-color: #9999ff;
 $fg3: #999999;
 $fg2: #bbbbbb;
 $fg1: #dddddd;
+$bg05: #222222;
 $bg1: #444444;
 
 $li-border-color: $fg3;
diff --git a/sass/light.scss b/sass/light.scss
index 6189749..156077f 100644
--- a/sass/light.scss
+++ b/sass/light.scss
@@ -9,6 +9,7 @@ $link-color: #000099;
 $fg3: #999999;
 $fg2: #666666;
 $fg1: #333333;
+$bg05: #dddddd;
 $bg1: #cccccc;
 
 $li-border-color: $fg3;
-- 
cgit v1.2.3