summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorDaniel Friesel <derf@finalrewind.org>2017-12-28 14:47:49 +0100
committerDaniel Friesel <derf@finalrewind.org>2017-12-28 14:47:49 +0100
commit5109d2a4ca68863a22adfac92627a38a79e49993 (patch)
tree1e77ebab902b0f46175e74c03732841cd698f17a
parentbcbba5f514655cc7ec28a6413f6c2926e8b8d270 (diff)
add preliminary support for a dark layout
-rw-r--r--public/static/default.css75
-rw-r--r--templates/clean.html.ep7
-rw-r--r--templates/layouts/default.html.ep11
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') {
@@ -114,6 +115,14 @@ Bitte eine Station aus der Liste auswählen</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'
<label for="id_hide_opts">
Formular verstecken (für Infoscreens)