From 5109d2a4ca68863a22adfac92627a38a79e49993 Mon Sep 17 00:00:00 2001
From: Daniel Friesel <derf@finalrewind.org>
Date: Thu, 28 Dec 2017 14:47:49 +0100
Subject: add preliminary support for a dark layout

---
 public/static/default.css         | 75 +++++++++++++++++++++++++++++++++++----
 templates/clean.html.ep           |  7 +++-
 templates/layouts/default.html.ep | 11 +++++-
 3 files changed, 84 insertions(+), 9 deletions(-)

diff --git a/public/static/default.css b/public/static/default.css
index e7c2d63..aa39d72 100644
--- a/public/static/default.css
+++ b/public/static/default.css
@@ -25,9 +25,17 @@ div.displayclean > ul {
 div.displayclean > ul > li {
 	min-height:7em;
 	display:block;
-	border-bottom: 1px solid #999999;
 	width:100%;
 	position:relative;
+}
+
+div.displaycleandark > ul > li {
+	border-bottom: 1px solid #999999;
+	background-color: #000000;
+}
+
+div.displaycleanlight > ul > li {
+	border-bottom: 1px solid #999999;
 	background-color: #ffffff;
 }
 
@@ -63,27 +71,47 @@ div.displayclean .replaced {
 
 div.displayclean li .sbahn {
 	font-weight:bold;
-	background-color:#95d79f;
 	border-radius: 30px;
 	padding:3px 6px 2px 6px;
 }
 
+div.displaycleanlight li .sbahn {
+	background-color:#95d79f;
+}
+
+div.displaycleandark li .sbahn {
+	background-color:#115511;
+}
+
 div.displayclean li .bahn {
 	font-weight:bold;
 	border-radius: 5px;
 	padding:3px 5px 2px 5px;
+}
+
+div.displaycleanlight li .bahn {
 	background-color: #eeeeee;
 }
 
+div.displaycleandark li .bahn {
+	background-color: #333333;
+}
+
 div.displayclean li .fern {
 	font-weight:bold;
 	border-radius: 5px;
 	padding:3px 5px 2px 5px;
+}
+
+div.displaycleanlight li .fern {
 	background-color: #ffdddd;
 }
 
+div.displaycleandark li .fern {
+	background-color: #551111;
+}
+
 div.displayclean li .route {
-	color:#444444;
 	font-size:2.1em;
 	position:absolute;
 	top:5px;
@@ -93,6 +121,14 @@ div.displayclean li .route {
 	overflow: hidden;
 }
 
+div.displaycleanlight li .route {
+	color:#444444;
+}
+
+div.displaycleandark li .route {
+	color:#bbbbbb;
+}
+
 div.displayclean li .info {
 	color:#ff0000;
 	font-size:2.1em;
@@ -175,7 +211,6 @@ div.displayclean li .moreinfo .mroute .cancelled-stop {
 }
 
 div.displayclean li .dest {
-	color:#000000;
 	/*font-weight:bold;*/
 	font-size:4em;
 	position:absolute;
@@ -186,12 +221,23 @@ div.displayclean li .dest {
 	overflow: hidden;
 }
 
-div.displayclean li.cancelled {
+div.displaycleanlight li .dest {
+	color:#000000;
+}
+
+div.displaycleandark li .dest {
+	color:#ffffff;
+}
+
+div.displaycleanlight li.cancelled {
 	background-color: #ffe7d0;
 }
 
+div.displaycleandark li.cancelled {
+	background-color: #512f00;
+}
+
 div.displayclean li .countdown {
-	color: #000000;
 	background-color: inherit;
 	font-size: 3em;
 	position: absolute;
@@ -200,6 +246,14 @@ div.displayclean li .countdown {
 	padding-left: 0.2em;
 }
 
+div.displaycleanlight li .countdown {
+	color: #000000;
+}
+
+div.displaycleandark li .countdown {
+	color: #ffffff;
+}
+
 div.displayclean li .header {
 	color:#000000;
 	font-size:2em;
@@ -248,7 +302,6 @@ div.displayclean li .countdown .changed-platform {
 }
 
 div.displayclean li .time {
-	color:#000000;
 	background-color: inherit;
 	font-size:2.4em;
 	position:absolute;
@@ -257,6 +310,14 @@ div.displayclean li .time {
 	padding-left: 0.2em;
 }
 
+div.displaycleanlight li .time {
+	color:#000000;
+}
+
+div.displaycleandark li .time {
+	color:#ffffff;
+}
+
 div.displayclean span.delayed {
 	color: #ff0000;
 	background-color: inherit;
diff --git a/templates/clean.html.ep b/templates/clean.html.ep
index c2cd524..61f6db9 100644
--- a/templates/clean.html.ep
+++ b/templates/clean.html.ep
@@ -1,6 +1,11 @@
 % if (@{$departures}) {
 
-<div class="displayclean">
+% if (param('dark')) {
+<div class="displayclean displaycleandark">
+% }
+% else {
+<div class="displayclean displaycleanlight">
+% }
 <ul>
 % my $i = 0;
 % my $dt_now = DateTime->now;
diff --git a/templates/layouts/default.html.ep b/templates/layouts/default.html.ep
index 4a0e616..7278686 100644
--- a/templates/layouts/default.html.ep
+++ b/templates/layouts/default.html.ep
@@ -27,7 +27,8 @@
 	%= javascript '/static/geolocation.js'
 	% }
 </head>
-<body style="<%= (stash('hide_opts') ? 'margin: 0; padding: 0;' : q{}) %>">
+<body style="<%= (stash('hide_opts') ? 'margin: 0; padding: 0;' : q{}) %>
+<%= (param('dark') ? 'background-color: #000000; color: #ffffff;' : q{}) %>">
 
 <div class="container">
 % if (my $error = stash 'error') {
@@ -112,6 +113,14 @@ Bitte eine Station aus der Liste auswählen</div>
         </label>
       </div>
     </div>
+    <div class="field">
+      <div class="desc">
+        %= check_box 'dark' => 1, id => 'id_dark'
+        <label for="id_dark">
+          Dunkles Layout (experimentell)
+        </label>
+      </div>
+    </div>
     <div class="field">
       <div class="desc">
         %= check_box 'hide_opts' => 1, id => 'id_hide_opts'
-- 
cgit v1.2.3