diff --git a/static/css/base.css b/static/css/base.css
index e4cce25a..08b8125d 100644
--- a/static/css/base.css
+++ b/static/css/base.css
@@ -112,18 +112,17 @@ body {
.status.ic-down { color: #d9534f; }
.label.label-start {
- background-color: #FFF;
- color: #117a3f;;
+ color: var(--label-start-color);
border: 1px solid #117a3f;
}
.label.label-ign {
- background: #e0e0e0;
- color: #333;
+ background: var(--label-ign-bg);
+ color: var(--label-ign-color);
}
.hc-dialog {
- background: #FFF;
+ background-color: var(--panel-bg);
padding: 2em;
margin-top: 100px;
}
diff --git a/static/css/bootstrap-colors.css b/static/css/bootstrap-colors.css
index 4b5f66ea..6fbb67c3 100644
--- a/static/css/bootstrap-colors.css
+++ b/static/css/bootstrap-colors.css
@@ -1,3 +1,7 @@
+a {
+ color: var(--link-color);
+}
+
.panel {
background-color: var(--panel-bg);
}
@@ -26,7 +30,7 @@
.btn-default:focus,
.btn-default:active,
.btn-default.active:hover {
- color: var(--btn-default-color);
+ color: var(--btn-active-color);
background-color: var(--btn-active-bg);
border-color: var(--btn-active-border);
}
@@ -104,6 +108,10 @@ hr {
background-color: var(--breadcrumb-bg);
}
+.breadcrumb > .active {
+ color: var(--breadcrumb-active-color);
+}
+
.modal-header {
border-bottom-color: var(--border-muted);
}
@@ -137,3 +145,11 @@ code {
border-color: var(--input-border);
color: var(--input-color);
}
+
+.text-muted {
+ color: var(--text-muted);
+}
+
+h2 small {
+ color: var(--text-muted);
+}
\ No newline at end of file
diff --git a/static/css/icomoon.css b/static/css/icomoon.css
index 120abff8..689e8e77 100644
--- a/static/css/icomoon.css
+++ b/static/css/icomoon.css
@@ -91,6 +91,9 @@
content: "\e90a";
color: #4f5d73;
}
+body.dark .ic-email:before {
+ color: #76a6f0;
+}
.ic-webhook:before {
content: "\e908";
color: #c73a63;
diff --git a/static/css/my_checks.css b/static/css/my_checks.css
index 423598da..3f485674 100644
--- a/static/css/my_checks.css
+++ b/static/css/my_checks.css
@@ -128,7 +128,7 @@
font-size: small;
font-family: monospace;
text-align: right;
- color: #888;
+ color: var(--text-muted);
}
#period-slider {
@@ -153,7 +153,7 @@
}
.update-timeout-terms {
- color: #999;
+ color: var(--text-muted);
}
.update-timeout-terms p {
diff --git a/static/css/my_checks_desktop.css b/static/css/my_checks_desktop.css
index f58a20db..265c8381 100644
--- a/static/css/my_checks_desktop.css
+++ b/static/css/my_checks_desktop.css
@@ -24,7 +24,7 @@
}
#checks-table tr:hover a.default {
- color: #0091EA;
+ color: var(--link-color);
}
#checks-table td {
@@ -90,7 +90,7 @@ button.copy-link {
text-align: left;
font-family: "Open Sans", Arial, sans-serif;
- color: #0091ea;
+ color: var(--link-color);
cursor :pointer;
transition: opacity 0.1s linear;
}
diff --git a/static/css/nouislider.dark.css b/static/css/nouislider.dark.css
index 5ea6c0c3..c7339a48 100644
--- a/static/css/nouislider.dark.css
+++ b/static/css/nouislider.dark.css
@@ -23,5 +23,5 @@ body.dark .noUi-marker {
}
body.dark .noUi-pips {
- color: #777780;
+ color: hsl(240, 3%, 55%);
}
diff --git a/static/css/variables.css b/static/css/variables.css
index 77c85014..bb73904f 100644
--- a/static/css/variables.css
+++ b/static/css/variables.css
@@ -11,9 +11,11 @@
--body-bg: #FFF;
--border-color: #ddd;
--border-muted: #eee;
+ --breadcrumb-active-color: #777;
--breadcrumb-bg: #f5f5f5;
--btn-active-bg: #e6e6e6;
--btn-active-border: #adadad;
+ --btn-active-color: #333;
--btn-default-bg: #fff;
--btn-default-border: #ccc;
--btn-default-color: #333;
@@ -29,6 +31,10 @@
--input-color: #555;
--input-group-addon-bg: #eeeeee;
--jumbotron-bg: #eee;
+ --label-ign-bg: #e0e0e0;
+ --label-ign-color: #333;
+ --label-start-color: #117a3f;
+ --link-color: #0091EA;
--log-missing-bg: #fff3f2;
--modal-content-bg: #fff;
--nav-pills-active-link-hover-bg: #eee;
@@ -56,7 +62,7 @@
--tag-up-border: #ccc;
--tag-up-color: #333;
--text-color: #333;
- --text-muted: #777;
+ --text-muted: #666;
}
@@ -70,19 +76,21 @@ body.dark {
--alert-success-bg: #0f2c1c;
--alert-success-border: #2b4939;
--alert-success-color: #ebf5ef;
- --body-bg: #161619;
- --border-color: #303033;
- --border-muted: #303033;
- --breadcrumb-bg: #25252a;
+ --body-bg: hsl(240, 6%, 10%);
+ --border-color: hsl(240, 3%, 22%);
+ --border-muted: hsl(240, 3%, 22%);
+ --breadcrumb-active-color: hsl(240, 3%, 60%);
+ --breadcrumb-bg: hsl(240, 6%, 16%);
--btn-active-bg: #6f6f7f;
--btn-active-border: #818191;
+ --btn-active-color: hsl(240, 3%, 98%);
--btn-default-bg: #383840;
--btn-default-border: #4e4e59;
- --btn-default-color: #e0e0e2;
+ --btn-default-color: hsl(240, 3%, 88%);
--btn-remove-bg: #202024;
--btn-remove-color: #ff4c46;
--btn-remove-hover: #3f1a22;
- --channel-off-color: #464649;
+ --channel-off-color: hsl(240, 2%, 40%);
--close-color: #fff;
--debug-warning-bg: #60002d;
--get-started-bg: #2c2e2c;
@@ -91,10 +99,14 @@ body.dark {
--input-color: #b0b0b2;
--input-group-addon-bg: #29292c;
--jumbotron-bg: #1f1f22;
+ --label-ign-bg: #383840;
+ --label-ign-color: #e0e0e2;
+ --label-start-color: #e0e0e2;
+ --link-color: hsl(202.8, 100%, 55%);
--log-missing-bg: #2d1e21;
--modal-content-bg: #1f1f22;
--nav-pills-active-link-hover-bg: #383840;
- --panel-bg: #25252a;
+ --panel-bg: hsl(240, 6%, 16%);
--panel-success-bg: #165b35;
--plan-business-border: #90CAF9;
--plan-business-color: #e8f2f9;
@@ -106,7 +118,7 @@ body.dark {
--plan-supporter-color: #fff0c4;
--pre-bg: #29292c;
--small-text-color: #f0f0f2;
- --status-new-color: #464649;
+ --status-new-color: hsl(240, 2%, 40%);
--table-bg-hover: #25252a;
--tag-bg: #303033;
--tag-checked-bg: #fff;
@@ -118,5 +130,5 @@ body.dark {
--tag-up-border: #303033;
--tag-up-color: #e0e0e2;
--text-color: #e0e0e2;
- --text-muted: #777780;
+ --text-muted: hsl(240, 3%, 55%);
}
diff --git a/templates/front/my_checks_desktop.html b/templates/front/my_checks_desktop.html
index 477605d6..2eb7ac2d 100644
--- a/templates/front/my_checks_desktop.html
+++ b/templates/front/my_checks_desktop.html
@@ -41,7 +41,7 @@
</a>
{% else %}
<a href="?sort=-last_ping" data-toggle="tooltip" class="default sort-last-ping">
- Last Ping</span>
+ Last Ping
</a>
{% endif %}
{% if show_last_duration %}
diff --git a/templates/front/verify_email_success.html b/templates/front/verify_email_success.html
index bda8e0d1..4f3e02b2 100644
--- a/templates/front/verify_email_success.html
+++ b/templates/front/verify_email_success.html
@@ -8,7 +8,7 @@
<h1>Email Address Verified!</h1>
<div class="dialog-body">
<p>
- Success! You've verified this email
+ Success! You have verified this email
address, and it will now receive
{{ site_name }} notifications.
</p>