Dark mode fixes (#4543)

* Dark mode fixes

* "Polling Interval" slider not visible in Safari / Firefox
* Dark background not full height in Firefox
  (add color to html tag, use !important since default is !important)
* "Success" banner not visible
* Graph vertical bars (both static and hover bars) not visible
* Make UI a little more consistent with light mode
  * Slightly lighten background, for a differing color between
    header/footer and body.
  * Add shadow and different color to "status" bar

* Add changelog entry

* Sign changelog entry

Changes.md

@@ -5,6 +5,7 @@
 Unreleased
 ---------
 
+- Web UI - Dark Mode fixes [#4543, natematykiewicz]
 - Ensure `Rack::ContentLength` is loaded as middleware for correct Web UI responses [#4541]
 - Avoid exception dumping SSL store in Redis connection logging [#4532]
 

web/assets/stylesheets/application-dark.css

@@ -1,5 +1,5 @@
-body {
-  background-color: #000;
+html, body {
+  background-color: #070707 !important;
   color: #ccc;
 }
 
@@ -51,7 +51,7 @@ table.table-white {
 }
 
 .alert-success {
-  background-color: #000;
+  background-color: #182d11;
 }
 
 a:link,
@@ -66,8 +66,12 @@ a.btn {
 }
 
 .summary_bar .summary {
-  background-color: #000;
+  background-color: #111;
   border: 1px solid #333;
+
+  -webkit-box-shadow: 0 0 5px rgba(255, 255, 255, 0.1);
+  -moz-box-shadow: 0 0 5px rgba(255, 255, 255, 0.1);
+  box-shadow: 0 0 5px rgba(255, 255, 255, 0.1);
 }
 
 .navbar-default {
@@ -116,6 +120,13 @@ a.btn {
   color: #333;
 }
 
+.rickshaw_graph .detail {
+  background: rgba(255, 255, 255, .1)
+}
+.rickshaw_graph .x_tick {
+  border-color: rgba(255, 255, 255, .2);
+}
+
 .rickshaw_graph .y_ticks.glow text {
   fill: #ccc;
   color: #ccc;

web/assets/stylesheets/application.css

@@ -469,6 +469,11 @@ span.current-interval {
 
 div.interval-slider input {
   width: 160px;
+  -webkit-appearance: none;
+  height: 3px;
+  margin-top: 5px;
+  border-radius: 2px;
+  background: currentcolor;
 }
 
 #realtime-legend,