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 @@ {% else %} - Last Ping + Last Ping {% 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 @@
- Success! You've verified this email + Success! You have verified this email address, and it will now receive {{ site_name }} notifications.