kotovalexarian-likes-github/mperham--sidekiq
1
0
Fork 0
mirror of https://github.com/mperham/sidekiq.git synced 2022-11-09 13:52:34 -05:00
Code Releases Activity

Improve dark Web UI (#4674)

Browse source 
* 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 2020-08-25 09:31:05 -07:00 committed by GitHub
parent d9cc977f1a
commit 5b1ee55fe7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 51 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
Changes.md
View file

@ -5,6 +5,7 @@
HEAD HEAD
--------- ---------
- Improve contrast in dark mode Web UI
- Fix Web UI crash with corrupt session [#4672] - Fix Web UI crash with corrupt session [#4672]
- Allow middleware to yield arguments [#4673, @eugeneius] - Allow middleware to yield arguments [#4673, @eugeneius]

74
web/assets/stylesheets/application-dark.css
View file

@ -1,34 +1,44 @@
html, body { html, body {
background-color: #070707 !important; background-color: #333 !important;
color: #ccc; color: #ddd;
} }
a, a,
.title, .title,
.summary_bar ul .count, .summary_bar ul .count,
span.current-interval,
.navbar .navbar-brand { .navbar .navbar-brand {
color: #af0014; color: #c04;
}
.history-graph + .active,
.beacon .dot {
background-color: #c04;
} }
.navbar .navbar-brand:hover { .navbar .navbar-brand:hover {
color: #ccc; color: #ddd;
} }
.navbar .navbar-brand .status { .navbar .navbar-brand .status {
color: #ccc; color: #ddd;
}
.navbar-default .navbar-nav > li > a {
color: #ddd;
} }
.navbar-inverse { .navbar-inverse {
background-color: #000; background-color: #222;
border-color: #333; border-color: #555;
} }
table.table-white { table {
background-color: #111; background-color: #282828;
} }
.table-striped > tbody > tr:nth-of-type(odd) { .table-striped > tbody > tr:nth-of-type(odd) {
background-color: #222; background-color: #333;
} }
.table-bordered, .table-bordered,
@ -38,27 +48,27 @@ table.table-white {
.table-bordered > tfoot > tr > th, .table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td, .table-bordered > thead > tr > td,
.table-bordered > thead > tr > th { .table-bordered > thead > tr > th {
border: 1px solid #333; border: 1px solid #555;
} }
.table-hover > tbody > tr:hover { .table-hover > tbody > tr:hover {
background-color: #333; background-color: #444;
} }
.alert { .alert {
border: none; border: none;
color: #ccc; color: #ddd;
} }
.alert-success { .alert-success {
background-color: #182d11; background-color: #484;
} }
a:link, a:link,
a:active, a:active,
a:hover, a:hover,
a:visited { a:visited {
color: #63798c; color: #ddd;
} }
a.btn { a.btn {
@ -66,8 +76,8 @@ a.btn {
} }
.summary_bar .summary { .summary_bar .summary {
background-color: #111; background-color: #222;
border: 1px solid #333; border: 1px solid #555;
-webkit-box-shadow: 0 0 5px rgba(255, 255, 255, 0.1); -webkit-box-shadow: 0 0 5px rgba(255, 255, 255, 0.1);
-moz-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 { .navbar-default {
background-color: #000; background-color: #222;
border-color: #3d3d3d; border-color: #555;
} }
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:focus, .navbar-default .navbar-nav > .active > a:focus,
.navbar-default .navbar-nav > .active > a:hover { .navbar-default .navbar-nav > .active > a:hover {
color: #ccc; color: #ddd;
background-color: #282828; background-color: #333;
} }
.navbar-default .navbar-nav > li > a:hover { .navbar-default .navbar-nav > li > a:hover {
color: #ccc; color: #ddd;
} }
.pagination > li > a, .pagination > li > a,
.pagination > li > a:hover, .pagination > li > a:hover,
.pagination > li > span { .pagination > li > span {
color: #ccc; color: #ddd;
background-color: #282828; background-color: #333;
border-color: #353535; border-color: #555;
} }
.pagination > .disabled > a, .pagination > .disabled > a,
.pagination > .disabled > a:focus, .pagination > .disabled > a:focus,
@ -103,9 +113,9 @@ a.btn {
.pagination > .disabled > span, .pagination > .disabled > span,
.pagination > .disabled > span:focus, .pagination > .disabled > span:focus,
.pagination > .disabled > span:hover { .pagination > .disabled > span:hover {
color: #a5a5a5; color: #ddd;
background-color: #282828; background-color: #333;
border-color: #353535; border-color: #555;
} }
.stat { .stat {
@ -113,11 +123,11 @@ a.btn {
} }
#live-poll { #live-poll {
color: #ccc; color: #ddd;
} }
.btn-warn { .btn-warn {
color: #333; color: #444;
} }
.rickshaw_graph .detail { .rickshaw_graph .detail {
@ -128,6 +138,6 @@ a.btn {
} }
.rickshaw_graph .y_ticks.glow text { .rickshaw_graph .y_ticks.glow text {
fill: #ccc; fill: #ddd;
color: #ccc; color: #ddd;
} }

8
web/assets/stylesheets/application.css
View file

@ -177,10 +177,6 @@ header.row .pagination {
overflow: overlay; overflow: overlay;
} }
table.table-white {
background-color: #fff;
}
.queues form { .queues form {
margin: 0; margin: 0;
} }
@ -762,7 +758,7 @@ div.interval-slider input {
font-family: Arial, sans-serif; font-family: Arial, sans-serif;
border-radius: 3px; border-radius: 3px;
padding: 6px; padding: 6px;
opacity: .5; opacity: .7;
border: 1px solid #e0e0e0; border: 1px solid #e0e0e0;
font-size: 12px; font-size: 12px;
position: absolute; position: absolute;
@ -977,7 +973,7 @@ div.interval-slider input {
} }
.rickshaw_graph .y_ticks text, .rickshaw_graph .y_ticks text,
.rickshaw_graph .x_ticks_d3 text { .rickshaw_graph .x_ticks_d3 text {
opacity: .5; opacity: .7;
font-size: 12px; font-size: 12px;
pointer-events: none pointer-events: none
} }

4
web/views/busy.erb
View file

@ -14,7 +14,7 @@
</div> </div>
<div class="table_container"> <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> <thead>
<th><%= t('Name') %></th> <th><%= t('Name') %></th>
<th><%= t('Started') %></th> <th><%= t('Started') %></th>
@ -68,7 +68,7 @@
</div> </div>
<div class="table_container"> <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> <thead>
<th><%= t('Process') %></th> <th><%= t('Process') %></th>
<th><%= t('TID') %></th> <th><%= t('TID') %></th>

2
web/views/morgue.erb
View file

@ -14,7 +14,7 @@
<form action="<%= root_path %>morgue" method="post"> <form action="<%= root_path %>morgue" method="post">
<%= csrf_tag %> <%= csrf_tag %>
<div class="table_container"> <div class="table_container">
<table class="table table-striped table-bordered table-white"> <table class="table table-striped table-bordered">
<thead> <thead>
<tr> <tr>
<th class="table-checkbox checkbox-column"> <th class="table-checkbox checkbox-column">

2
web/views/queues.erb
View file

@ -1,7 +1,7 @@
<h3><%= t('Queues') %></h3> <h3><%= t('Queues') %></h3>
<div class="table_container"> <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> <thead>
<th><%= t('Queue') %></th> <th><%= t('Queue') %></th>
<th><%= t('Size') %></th> <th><%= t('Size') %></th>

2
web/views/retries.erb
View file

@ -14,7 +14,7 @@
<form action="<%= root_path %>retries" method="post"> <form action="<%= root_path %>retries" method="post">
<%= csrf_tag %> <%= csrf_tag %>
<div class="table_container"> <div class="table_container">
<table class="table table-striped table-bordered table-white"> <table class="table table-striped table-bordered">
<thead> <thead>
<tr> <tr>
<th class="table-checkbox checkbox-column"> <th class="table-checkbox checkbox-column">

2
web/views/scheduled.erb
View file

@ -15,7 +15,7 @@
<form action="<%= root_path %>scheduled" method="post"> <form action="<%= root_path %>scheduled" method="post">
<%= csrf_tag %> <%= csrf_tag %>
<div class="table_container"> <div class="table_container">
<table class="table table-striped table-bordered table-white"> <table class="table table-striped table-bordered">
<thead> <thead>
<tr> <tr>
<th class="checkbox-column"> <th class="checkbox-column">