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
sidekiq · Aug 25, 2020 · 5b1ee55 · 5b1ee55
1 parent d9cc977
commit 5b1ee55
Show file tree

Hide file tree

Showing 8 changed files with 51 additions and 44 deletions.
diff --git 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
@@ -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,86 +48,86 @@ 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 {
   color: #000;
 }
 
 .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);
   box-shadow: 0 0 5px rgba(255, 255, 255, 0.1);
 }
 
 .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,
 .pagination > .disabled > a:hover,
 .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 {
   border: 1px solid rgba(255, 255, 255, 0.1);
 }
 
 #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
@@ -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
@@ -14,7 +14,7 @@
 </div>
 
 <div class="table_container">
-  <table class="processes table table-hover table-bordered table-striped table-white">
+  <table class="processes table table-hover table-bordered table-striped">
     <thead>
       <th><%= t('Name') %></th>
       <th><%= t('Started') %></th>
@@ -68,7 +68,7 @@
 </div>
 
 <div class="table_container">
-  <table class="workers table table-hover table-bordered table-striped table-white">
+  <table class="workers table table-hover table-bordered table-striped">
     <thead>
       <th><%= t('Process') %></th>
       <th><%= t('TID') %></th>

diff --git a/web/views/morgue.erb b/web/views/morgue.erb
@@ -14,7 +14,7 @@
   <form action="<%= root_path %>morgue" method="post">
     <%= csrf_tag %>
     <div class="table_container">
-      <table class="table table-striped table-bordered table-white">
+      <table class="table table-striped table-bordered">
         <thead>
           <tr>
             <th class="table-checkbox checkbox-column">

diff --git a/web/views/queues.erb b/web/views/queues.erb
@@ -1,7 +1,7 @@
 <h3><%= t('Queues') %></h3>
 
 <div class="table_container">
-  <table class="queues table table-hover table-bordered table-striped table-white">
+  <table class="queues table table-hover table-bordered table-striped">
     <thead>
       <th><%= t('Queue') %></th>
       <th><%= t('Size') %></th>

diff --git a/web/views/retries.erb b/web/views/retries.erb
@@ -14,7 +14,7 @@
   <form action="<%= root_path %>retries" method="post">
     <%= csrf_tag %>
     <div class="table_container">
-      <table class="table table-striped table-bordered table-white">
+      <table class="table table-striped table-bordered">
         <thead>
           <tr>
             <th class="table-checkbox checkbox-column">

diff --git a/web/views/scheduled.erb b/web/views/scheduled.erb
@@ -15,7 +15,7 @@
   <form action="<%= root_path %>scheduled" method="post">
     <%= csrf_tag %>
     <div class="table_container">
-      <table class="table table-striped table-bordered table-white">
+      <table class="table table-striped table-bordered">
         <thead>
           <tr>
             <th class="checkbox-column">