mirror of
https://github.com/mperham/sidekiq.git
synced 2022-11-09 13:52:34 -05:00
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
This commit is contained in:
Mike Perham
GitHub
parent
d9cc977f1a
commit
5b1ee55fe7
8 changed files with 51 additions and 44 deletions
|
|
@ -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]
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
Loading…
Reference in a new issue