harmacist/healthchecks
1
0
Fork 0
forked from GithubBackups/healthchecks
Code Issues Pull Requests Projects Releases Wiki Activity

Fix more contrast issues

Browse Source
This commit is contained in:
Pēteris Caune 2021-06-18 17:07:27 +03:00
parent b185a28676
commit 059a855b3f
No known key found for this signature in database
GPG Key ID: E28D7679E9A9EDE2
10 changed files with 44 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
static/css/appearance.css
View File

@ -1,3 +1,7 @@
.theme label {
cursor: pointer;
}
.theme img { .theme img {
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
padding: 4px; padding: 4px;

4
static/css/base.css
View File

@ -16,7 +16,7 @@ body {
width: 100%; width: 100%;
/* Set the fixed height of the footer here */ /* Set the fixed height of the footer here */
height: 84px; height: 84px;
color: #AAA; color: var(--text-muted);
border-top: 1px solid var(--border-muted); border-top: 1px solid var(--border-muted);
} }
@ -140,7 +140,7 @@ pre {
} }
.nav-pills > li > a { .nav-pills > li > a {
color: #888; color: var(--text-muted);
} }
.jumbotron p { .jumbotron p {

8
static/css/bootstrap-colors.css vendored
View File

@ -150,6 +150,12 @@ code {
color: var(--text-muted); color: var(--text-muted);
} }
h1 small,
h2 small { h2 small {
color: var(--text-muted); color: var(--text-muted);
} }
.help-block {
color: var(--text-muted);
}

2
static/css/log.css
View File

@ -41,7 +41,7 @@
#log .details span.ua-body { #log .details span.ua-body {
font-family: "Lucida Console", Monaco, monospace; font-family: "Lucida Console", Monaco, monospace;
font-size: 11.7px; font-size: 11.7px;
color: #888; color: var(--text-muted);
} }
#log tr.ok { #log tr.ok {

2
static/css/my_checks.css
View File

@ -200,7 +200,7 @@
} }
.add-check-note { .add-check-note {
color: #888; color: var(--text-muted);
text-align: center; text-align: center;
margin-top: 10px; margin-top: 10px;
font-size: 12px; font-size: 12px;

8
static/css/my_checks_desktop.css
View File

@ -7,7 +7,7 @@
} }
.my-checks-name.unnamed { .my-checks-name.unnamed {
color: #999; color: var(--text-muted);
font-style: italic; font-style: italic;
} }
@ -74,7 +74,7 @@
} }
.checks-subline { .checks-subline {
color: #888; color: var(--text-muted);
white-space: nowrap; white-space: nowrap;
} }
@ -113,7 +113,7 @@ tr:hover .copy-link {
} }
.url-cell .base { .url-cell .base {
color: #888; color: var(--text-muted);
} }
.my-checks-url { .my-checks-url {
@ -124,7 +124,7 @@ tr:hover .copy-link {
} }
.checks-subline-duration { .checks-subline-duration {
color: #888; color: var(--text-muted);
white-space: nowrap; white-space: nowrap;
} }

8
static/css/projects.css
View File

@ -7,7 +7,7 @@
} }
#project-selector a:hover .project { #project-selector a:hover .project {
border-color: #0091EA; border-color: var(--link-color);
} }
#project-selector .project { #project-selector .project {
@ -26,7 +26,7 @@
} }
#project-selector .project.selected { #project-selector .project.selected {
border-color: #0091EA; border-color: var(--link-color);
} }
#project-selector .project .status { #project-selector .project .status {
@ -45,7 +45,7 @@
} }
#project-selector #add-project:hover .project { #project-selector #add-project:hover .project {
border-color: #0091EA; border-color: var(--link-color);
color: #333; color: var(--text-color);
} }

9
static/css/variables.css
View File

@ -1,4 +1,5 @@
:root { :root {
color-scheme: light;
--alert-info-bg: #d9edf7; --alert-info-bg: #d9edf7;
--alert-info-border: #bce8f1; --alert-info-border: #bce8f1;
--alert-info-color: #31708f; --alert-info-color: #31708f;
@ -62,11 +63,12 @@
--tag-up-border: #ccc; --tag-up-border: #ccc;
--tag-up-color: #333; --tag-up-color: #333;
--text-color: #333; --text-color: #333;
--text-muted: #666; --text-muted: #767676;
} }
body.dark { body.dark {
color-scheme: dark;
--alert-info-bg: #123051; --alert-info-bg: #123051;
--alert-info-border: #163c64; --alert-info-border: #163c64;
--alert-info-color: #e0e2f5; --alert-info-color: #e0e2f5;
@ -132,3 +134,8 @@ body.dark {
--text-color: #e0e0e2; --text-color: #e0e0e2;
--text-muted: hsl(240, 3%, 55%); --text-muted: hsl(240, 3%, 55%);
} }

2
static/js/appearance.js
View File

@ -1,5 +1,5 @@
$(function () { $(function () {
$("input[type=radio][name=theme]").change(function() { $("input[type=radio][name=theme]").change(function() {
document.body.classList.toggle("dark", this.value == "dark"); this.form.submit();
}); });
}); });

23
templates/accounts/appearance.html
View File

@ -34,12 +34,15 @@
<div class="row"> <div class="row">
<div class="col-sm-6 theme"> <div class="col-sm-6 theme">
<img <label for="theme-light">
src="{% static 'img/theme-light.png' %}" <img
alt="Light theme preview"> src="{% static 'img/theme-light.png' %}"
alt="Light theme preview">
</label>
<label class="radio-container"> <label class="radio-container">
<input <input
id="theme-light"
type="radio" type="radio"
name="theme" name="theme"
value="" value=""
@ -49,12 +52,15 @@
</label> </label>
</div> </div>
<div class="col-sm-6 theme"> <div class="col-sm-6 theme">
<img <label for="theme-dark">
src="{% static 'img/theme-dark.png' %}" <img
alt="Dark theme preview"> src="{% static 'img/theme-dark.png' %}"
alt="Dark theme preview">
</label>
<label class="radio-container"> <label class="radio-container">
<input <input
id="theme-dark"
type="radio" type="radio"
name="theme" name="theme"
value="dark" value="dark"
@ -64,11 +70,6 @@
</label> </label>
</div> </div>
</div> </div>
<button
type="submit"
class="btn btn-default pull-right">Save Changes</button>
</form> </form>
</div> </div>
{% if status == "info" %} {% if status == "info" %}