From 5b1ee55fe7cc7b95aa35fa0826bea5a2d1e1e927 Mon Sep 17 00:00:00 2001 From: Mike Perham Date: Tue, 25 Aug 2020 09:31:05 -0700 Subject: [PATCH] Improve dark Web UI (#4674) * Improve dark Web UI Add a lot more contrast to various UI elements. This is a lot more usable to my old eyes. * Remove table-white * More constrast fixes --- Changes.md | 1 + web/assets/stylesheets/application-dark.css | 74 ++++++++++++--------- web/assets/stylesheets/application.css | 8 +-- web/views/busy.erb | 4 +- web/views/morgue.erb | 2 +- web/views/queues.erb | 2 +- web/views/retries.erb | 2 +- web/views/scheduled.erb | 2 +- 8 files changed, 51 insertions(+), 44 deletions(-) diff --git a/Changes.md b/Changes.md index 38103ae7..4c92bdc7 100644 --- a/Changes.md +++ b/Changes.md @@ -5,6 +5,7 @@ HEAD --------- +- Improve contrast in dark mode Web UI - Fix Web UI crash with corrupt session [#4672] - Allow middleware to yield arguments [#4673, @eugeneius] diff --git a/web/assets/stylesheets/application-dark.css b/web/assets/stylesheets/application-dark.css index 4297795e..22437acc 100644 --- a/web/assets/stylesheets/application-dark.css +++ b/web/assets/stylesheets/application-dark.css @@ -1,34 +1,44 @@ html, body { - background-color: #070707 !important; - color: #ccc; + background-color: #333 !important; + color: #ddd; } a, .title, .summary_bar ul .count, +span.current-interval, .navbar .navbar-brand { - color: #af0014; + color: #c04; +} + +.history-graph + .active, +.beacon .dot { + background-color: #c04; } .navbar .navbar-brand:hover { - color: #ccc; + color: #ddd; } .navbar .navbar-brand .status { - color: #ccc; + color: #ddd; +} + +.navbar-default .navbar-nav > li > a { + color: #ddd; } .navbar-inverse { - background-color: #000; - border-color: #333; + background-color: #222; + border-color: #555; } -table.table-white { - background-color: #111; +table { + background-color: #282828; } .table-striped > tbody > tr:nth-of-type(odd) { - background-color: #222; + background-color: #333; } .table-bordered, @@ -38,27 +48,27 @@ table.table-white { .table-bordered > tfoot > tr > th, .table-bordered > thead > tr > td, .table-bordered > thead > tr > th { - border: 1px solid #333; + border: 1px solid #555; } .table-hover > tbody > tr:hover { - background-color: #333; + background-color: #444; } .alert { border: none; - color: #ccc; + color: #ddd; } .alert-success { - background-color: #182d11; + background-color: #484; } a:link, a:active, a:hover, a:visited { - color: #63798c; + color: #ddd; } a.btn { @@ -66,8 +76,8 @@ a.btn { } .summary_bar .summary { - background-color: #111; - border: 1px solid #333; + background-color: #222; + border: 1px solid #555; -webkit-box-shadow: 0 0 5px rgba(255, 255, 255, 0.1); -moz-box-shadow: 0 0 5px rgba(255, 255, 255, 0.1); @@ -75,27 +85,27 @@ a.btn { } .navbar-default { - background-color: #000; - border-color: #3d3d3d; + background-color: #222; + border-color: #555; } .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:focus, .navbar-default .navbar-nav > .active > a:hover { - color: #ccc; - background-color: #282828; + color: #ddd; + background-color: #333; } .navbar-default .navbar-nav > li > a:hover { - color: #ccc; + color: #ddd; } .pagination > li > a, .pagination > li > a:hover, .pagination > li > span { - color: #ccc; - background-color: #282828; - border-color: #353535; + color: #ddd; + background-color: #333; + border-color: #555; } .pagination > .disabled > a, .pagination > .disabled > a:focus, @@ -103,9 +113,9 @@ a.btn { .pagination > .disabled > span, .pagination > .disabled > span:focus, .pagination > .disabled > span:hover { - color: #a5a5a5; - background-color: #282828; - border-color: #353535; + color: #ddd; + background-color: #333; + border-color: #555; } .stat { @@ -113,11 +123,11 @@ a.btn { } #live-poll { - color: #ccc; + color: #ddd; } .btn-warn { - color: #333; + color: #444; } .rickshaw_graph .detail { @@ -128,6 +138,6 @@ a.btn { } .rickshaw_graph .y_ticks.glow text { - fill: #ccc; - color: #ccc; + fill: #ddd; + color: #ddd; } diff --git a/web/assets/stylesheets/application.css b/web/assets/stylesheets/application.css index d8383466..9df3c69d 100644 --- a/web/assets/stylesheets/application.css +++ b/web/assets/stylesheets/application.css @@ -177,10 +177,6 @@ header.row .pagination { overflow: overlay; } -table.table-white { - background-color: #fff; -} - .queues form { margin: 0; } @@ -762,7 +758,7 @@ div.interval-slider input { font-family: Arial, sans-serif; border-radius: 3px; padding: 6px; - opacity: .5; + opacity: .7; border: 1px solid #e0e0e0; font-size: 12px; position: absolute; @@ -977,7 +973,7 @@ div.interval-slider input { } .rickshaw_graph .y_ticks text, .rickshaw_graph .x_ticks_d3 text { - opacity: .5; + opacity: .7; font-size: 12px; pointer-events: none } diff --git a/web/views/busy.erb b/web/views/busy.erb index e8c82b9b..e6abd8b0 100644 --- a/web/views/busy.erb +++ b/web/views/busy.erb @@ -14,7 +14,7 @@
- +
@@ -68,7 +68,7 @@
-
<%= t('Name') %> <%= t('Started') %>
+
diff --git a/web/views/morgue.erb b/web/views/morgue.erb index f4fcce7d..1221f6fb 100644 --- a/web/views/morgue.erb +++ b/web/views/morgue.erb @@ -14,7 +14,7 @@ <%= csrf_tag %>
-
<%= t('Process') %> <%= t('TID') %>
+
diff --git a/web/views/queues.erb b/web/views/queues.erb index f4dde49d..1157e007 100644 --- a/web/views/queues.erb +++ b/web/views/queues.erb @@ -1,7 +1,7 @@

<%= t('Queues') %>

- +
diff --git a/web/views/retries.erb b/web/views/retries.erb index 44e43f0e..a18bc083 100644 --- a/web/views/retries.erb +++ b/web/views/retries.erb @@ -14,7 +14,7 @@ <%= csrf_tag %>
-
<%= t('Queue') %> <%= t('Size') %>
+
diff --git a/web/views/scheduled.erb b/web/views/scheduled.erb index 8db57626..886912f4 100644 --- a/web/views/scheduled.erb +++ b/web/views/scheduled.erb @@ -15,7 +15,7 @@ <%= csrf_tag %>
- +