diff options
| author | Daniel Friesel <derf@finalrewind.org> | 2017-12-28 14:47:49 +0100 |
|---|---|---|
| committer | Daniel Friesel <derf@finalrewind.org> | 2017-12-28 14:47:49 +0100 |
| commit | 5109d2a4ca68863a22adfac92627a38a79e49993 (patch) | |
| tree | 1e77ebab902b0f46175e74c03732841cd698f17a | |
| parent | bcbba5f514655cc7ec28a6413f6c2926e8b8d270 (diff) | |
add preliminary support for a dark layout
| -rw-r--r-- | public/static/default.css | 75 | ||||
| -rw-r--r-- | templates/clean.html.ep | 7 | ||||
| -rw-r--r-- | 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') { @@ -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) |