From 059a855b3f9a0bdf3d6bfb4c22225959fd022d7e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?P=C4=93teris=20Caune?= <cuu508@gmail.com>
Date: Fri, 18 Jun 2021 17:07:27 +0300
Subject: [PATCH] Fix more contrast issues
---
static/css/appearance.css | 4 ++++
static/css/base.css | 4 ++--
static/css/bootstrap-colors.css | 8 +++++++-
static/css/log.css | 2 +-
static/css/my_checks.css | 2 +-
static/css/my_checks_desktop.css | 8 ++++----
static/css/projects.css | 8 ++++----
static/css/variables.css | 9 ++++++++-
static/js/appearance.js | 2 +-
templates/accounts/appearance.html | 23 ++++++++++++-----------
10 files changed, 44 insertions(+), 26 deletions(-)
diff --git a/static/css/appearance.css b/static/css/appearance.css
index a1a30b8f..a47918c6 100644
--- a/static/css/appearance.css
+++ b/static/css/appearance.css
@@ -1,3 +1,7 @@
+.theme label {
+ cursor: pointer;
+}
+
.theme img {
border: 1px solid var(--border-color);
padding: 4px;
diff --git a/static/css/base.css b/static/css/base.css
index 08b8125d..1c4a8d25 100644
--- a/static/css/base.css
+++ b/static/css/base.css
@@ -16,7 +16,7 @@ body {
width: 100%;
/* Set the fixed height of the footer here */
height: 84px;
- color: #AAA;
+ color: var(--text-muted);
border-top: 1px solid var(--border-muted);
}
@@ -140,7 +140,7 @@ pre {
}
.nav-pills > li > a {
- color: #888;
+ color: var(--text-muted);
}
.jumbotron p {
diff --git a/static/css/bootstrap-colors.css b/static/css/bootstrap-colors.css
index 6fbb67c3..0261ca3d 100644
--- a/static/css/bootstrap-colors.css
+++ b/static/css/bootstrap-colors.css
@@ -150,6 +150,12 @@ code {
color: var(--text-muted);
}
+
+h1 small,
h2 small {
color: var(--text-muted);
-}
\ No newline at end of file
+}
+
+.help-block {
+ color: var(--text-muted);
+}
diff --git a/static/css/log.css b/static/css/log.css
index 32ad7977..f6589ae3 100644
--- a/static/css/log.css
+++ b/static/css/log.css
@@ -41,7 +41,7 @@
#log .details span.ua-body {
font-family: "Lucida Console", Monaco, monospace;
font-size: 11.7px;
- color: #888;
+ color: var(--text-muted);
}
#log tr.ok {
diff --git a/static/css/my_checks.css b/static/css/my_checks.css
index 3f485674..44bd09b1 100644
--- a/static/css/my_checks.css
+++ b/static/css/my_checks.css
@@ -200,7 +200,7 @@
}
.add-check-note {
- color: #888;
+ color: var(--text-muted);
text-align: center;
margin-top: 10px;
font-size: 12px;
diff --git a/static/css/my_checks_desktop.css b/static/css/my_checks_desktop.css
index 265c8381..cf1686c0 100644
--- a/static/css/my_checks_desktop.css
+++ b/static/css/my_checks_desktop.css
@@ -7,7 +7,7 @@
}
.my-checks-name.unnamed {
- color: #999;
+ color: var(--text-muted);
font-style: italic;
}
@@ -74,7 +74,7 @@
}
.checks-subline {
- color: #888;
+ color: var(--text-muted);
white-space: nowrap;
}
@@ -113,7 +113,7 @@ tr:hover .copy-link {
}
.url-cell .base {
- color: #888;
+ color: var(--text-muted);
}
.my-checks-url {
@@ -124,7 +124,7 @@ tr:hover .copy-link {
}
.checks-subline-duration {
- color: #888;
+ color: var(--text-muted);
white-space: nowrap;
}
diff --git a/static/css/projects.css b/static/css/projects.css
index 0f172326..d45773d2 100644
--- a/static/css/projects.css
+++ b/static/css/projects.css
@@ -7,7 +7,7 @@
}
#project-selector a:hover .project {
- border-color: #0091EA;
+ border-color: var(--link-color);
}
#project-selector .project {
@@ -26,7 +26,7 @@
}
#project-selector .project.selected {
- border-color: #0091EA;
+ border-color: var(--link-color);
}
#project-selector .project .status {
@@ -45,7 +45,7 @@
}
#project-selector #add-project:hover .project {
- border-color: #0091EA;
- color: #333;
+ border-color: var(--link-color);
+ color: var(--text-color);
}
diff --git a/static/css/variables.css b/static/css/variables.css
index bb73904f..4f4bd479 100644
--- a/static/css/variables.css
+++ b/static/css/variables.css
@@ -1,4 +1,5 @@
:root {
+ color-scheme: light;
--alert-info-bg: #d9edf7;
--alert-info-border: #bce8f1;
--alert-info-color: #31708f;
@@ -62,11 +63,12 @@
--tag-up-border: #ccc;
--tag-up-color: #333;
--text-color: #333;
- --text-muted: #666;
+ --text-muted: #767676;
}
body.dark {
+ color-scheme: dark;
--alert-info-bg: #123051;
--alert-info-border: #163c64;
--alert-info-color: #e0e2f5;
@@ -132,3 +134,8 @@ body.dark {
--text-color: #e0e0e2;
--text-muted: hsl(240, 3%, 55%);
}
+
+
+
+
+
diff --git a/static/js/appearance.js b/static/js/appearance.js
index da938cb0..48ac5f83 100644
--- a/static/js/appearance.js
+++ b/static/js/appearance.js
@@ -1,5 +1,5 @@
$(function () {
$("input[type=radio][name=theme]").change(function() {
- document.body.classList.toggle("dark", this.value == "dark");
+ this.form.submit();
});
});
diff --git a/templates/accounts/appearance.html b/templates/accounts/appearance.html
index 219d6214..1316f9a1 100644
--- a/templates/accounts/appearance.html
+++ b/templates/accounts/appearance.html
@@ -34,12 +34,15 @@
<div class="row">
<div class="col-sm-6 theme">
- <img
- src="{% static 'img/theme-light.png' %}"
- alt="Light theme preview">
+ <label for="theme-light">
+ <img
+ src="{% static 'img/theme-light.png' %}"
+ alt="Light theme preview">
+ </label>
<label class="radio-container">
<input
+ id="theme-light"
type="radio"
name="theme"
value=""
@@ -49,12 +52,15 @@
</label>
</div>
<div class="col-sm-6 theme">
- <img
- src="{% static 'img/theme-dark.png' %}"
- alt="Dark theme preview">
+ <label for="theme-dark">
+ <img
+ src="{% static 'img/theme-dark.png' %}"
+ alt="Dark theme preview">
+ </label>
<label class="radio-container">
<input
+ id="theme-dark"
type="radio"
name="theme"
value="dark"
@@ -64,11 +70,6 @@
</label>
</div>
</div>
-
-
- <button
- type="submit"
- class="btn btn-default pull-right">Save Changes</button>
</form>
</div>
{% if status == "info" %}