From 556bc2d95fcbc904dbcb353fbe852909c9673038 Mon Sep 17 00:00:00 2001 From: andyloree Date: Wed, 5 May 2021 20:56:37 -0400 Subject: [PATCH] Dark mode --- static/css/badges-dark.css | 4 + static/css/base-dark.css | 36 +++ static/css/bootstrap-dark.css | 382 ++++++++++++++++++++++++++ static/css/channels-dark.css | 30 ++ static/css/details-dark.css | 4 + static/css/docs-dark.css | 19 ++ static/css/log-dark.css | 20 ++ static/css/login-dark.css | 4 + static/css/my_checks-dark.css | 5 + static/css/my_checks_desktop-dark.css | 46 ++++ static/css/profile-dark.css | 3 + static/css/projects-dark.css | 10 + static/css/welcome-dark.css | 13 + templates/base.html | 15 +- 14 files changed, 590 insertions(+), 1 deletion(-) create mode 100644 static/css/badges-dark.css create mode 100644 static/css/base-dark.css create mode 100644 static/css/bootstrap-dark.css create mode 100644 static/css/channels-dark.css create mode 100644 static/css/details-dark.css create mode 100644 static/css/docs-dark.css create mode 100644 static/css/log-dark.css create mode 100644 static/css/login-dark.css create mode 100644 static/css/my_checks-dark.css create mode 100644 static/css/my_checks_desktop-dark.css create mode 100644 static/css/profile-dark.css create mode 100644 static/css/projects-dark.css create mode 100644 static/css/welcome-dark.css diff --git a/static/css/badges-dark.css b/static/css/badges-dark.css new file mode 100644 index 00000000..a88e7402 --- /dev/null +++ b/static/css/badges-dark.css @@ -0,0 +1,4 @@ +.table.badge-preview code { + background-color: #666; + color: #000; +} diff --git a/static/css/base-dark.css b/static/css/base-dark.css new file mode 100644 index 00000000..971d721c --- /dev/null +++ b/static/css/base-dark.css @@ -0,0 +1,36 @@ +#logo { + max-height: 50px; + margin-top: -16px; + background-color: #aaa; +} + +#nav-sign-up span { + display: inline-block; + color: #ccc; + background-color: #7ab694; + font-weight: bold; + border: 1px solid #1ea65a; + border-radius: 5px; + padding: 8px 16px; + transition: all 0.2s ease; +} + +.hc-dialog { + background: #FFF; + color: #000; + padding: 2em; + margin-top: 100px; +} + +.hc-dialog h1 { + margin: 0; + color: #000; +} + + +#debug-warning { + background: #333; + text-align: center; + font-size: small; + padding: 2px 0; +} diff --git a/static/css/bootstrap-dark.css b/static/css/bootstrap-dark.css new file mode 100644 index 00000000..05d475e6 --- /dev/null +++ b/static/css/bootstrap-dark.css @@ -0,0 +1,382 @@ +/*! + * Bootstrap v3.3.6 (http://getbootstrap.com) + * Copyright 2011-2015 Twitter, Inc. + * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) + */ +/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */ +html { + font-family: sans-serif; + -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; +} +body { + margin: 0; +} +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +main, +menu, +nav, +section, +summary { + display: block; +} +audio, +canvas, +progress, +video { + display: inline-block; + vertical-align: baseline; +} +audio:not([controls]) { + display: none; + height: 0; +} +[hidden], +template { + display: none; +} +a { + background-color: transparent; +} +a:active, +a:hover { + outline: 0; +} +abbr[title] { + border-bottom: 1px dotted; +} +b, +strong { + font-weight: bold; +} +dfn { + font-style: italic; +} +h1 { + font-size: 2em; + margin: 0.67em 0; +} +mark { + background: #ff0; + color: #000; +} +small { + font-size: 80%; +} +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} +sup { + top: -0.5em; +} +sub { + bottom: -0.25em; +} +img { + border: 0; +} +svg:not(:root) { + overflow: hidden; +} +figure { + margin: 1em 40px; +} +hr { + box-sizing: content-box; + height: 0; +} +pre { + overflow: auto; +} +code, +kbd, +pre, +samp { + font-family: monospace, monospace; + font-size: 1em; +} +button, +input, +optgroup, +select, +textarea { + color: inherit; + font: inherit; + margin: 0; +} +button { + overflow: visible; +} +button, +select { + text-transform: none; +} +button, +html input[type="button"], +input[type="reset"], +input[type="submit"] { + -webkit-appearance: button; + cursor: pointer; +} +button[disabled], +html input[disabled] { + cursor: default; +} +button::-moz-focus-inner, +input::-moz-focus-inner { + border: 0; + padding: 0; +} +input { + line-height: normal; +} +input[type="checkbox"], +input[type="radio"] { + box-sizing: border-box; + padding: 0; +} +input[type="number"]::-webkit-inner-spin-button, +input[type="number"]::-webkit-outer-spin-button { + height: auto; +} +input[type="search"] { + -webkit-appearance: textfield; + box-sizing: content-box; +} +input[type="search"]::-webkit-search-cancel-button, +input[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; +} +legend { + border: 0; + padding: 0; +} +textarea { + overflow: auto; +} +optgroup { + font-weight: bold; +} +table { + border-collapse: collapse; + border-spacing: 0; +} +td, +th { + padding: 0; +} +/*! Source: https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css */ +@media print { + *, + *:before, + *:after { + background: transparent !important; + color: #000 !important; + box-shadow: none !important; + text-shadow: none !important; + } + a, + a:visited { + text-decoration: underline; + } + a[href]:after { + content: " (" attr(href) ")"; + } + abbr[title]:after { + content: " (" attr(title) ")"; + } + a[href^="#"]:after, + a[href^="javascript:"]:after { + content: ""; + } + pre, + blockquote { + border: 1px solid #999; + page-break-inside: avoid; + } + thead { + display: table-header-group; + } + tr, + img { + page-break-inside: avoid; + } + img { + max-width: 100% !important; + } + p, + h2, + h3 { + orphans: 3; + widows: 3; + } + h2, + h3 { + page-break-after: avoid; + } + .navbar { + display: none; + } + .btn > .caret, + .dropup > .btn > .caret { + border-top-color: #000 !important; + } + .label { + border: 1px solid #000; + } + .table { + border-collapse: collapse !important; + } + .table td, + .table th { + background-color: #333 !important; + } + .table-bordered th, + .table-bordered td { + border: 1px solid #444 !important; + } +} +body { + font-family: -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif; + font-size: 14px; + line-height: 1.42857143; + color: #fff; + background-color: #333; +} +.img-thumbnail { + padding: 4px; + line-height: 1.42857143; + background-color: #333; + border: 1px solid #444; + border-radius: 2px; + -webkit-transition: all 0.2s ease-in-out; + -o-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; + display: inline-block; + max-width: 100%; + height: auto; +} +h1, +h2, +h3, +h4, +h5, +h6, +.h1, +.h2, +.h3, +.h4, +.h5, +.h6 { + font-family: inherit; + font-weight: 400; + line-height: 1.1; + color: #fff; +} +output { + display: block; + padding-top: 7px; + font-size: 14px; + line-height: 1.42857143; + color: #aaa; +} +.form-control { + display: block; + width: 100%; + height: 34px; + padding: 6px 12px; + font-size: 14px; + line-height: 1.42857143; + color: #000; + background-color: transparent; + background-image: none; + border: 1px solid #ccc; + border-radius: 2px; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); +} +.form-control::-moz-placeholder { + color: #666; + opacity: 1; +} +.nav-tabs > li.active > a, +.nav-tabs > li.active > a:hover, +.nav-tabs > li.active > a:focus { + color: #111; + background-color: #aaa; + border: 1px solid #777; + border-bottom-color: transparent; + cursor: default; +} +.navbar-default { + background-color: #aaa; + border-color: #eeeeee; +} +.navbar-default .navbar-brand { + color: #333; +} +.navbar-default .navbar-brand:hover, +.navbar-default .navbar-brand:focus { + color: #5e5e5e; + background-color: transparent; +} +.navbar-default .navbar-text { + color: #333; +} +.navbar-default .navbar-nav > li > a { + color: #333; +} +.navbar-default .navbar-nav > li > a:hover, +.navbar-default .navbar-nav > li > a:focus { + color: #0000ff; + background-color: transparent; +} +.navbar-default .navbar-nav > .active > a, +.navbar-default .navbar-nav > .active > a:hover, +.navbar-default .navbar-nav > .active > a:focus { + color: #fff; + background-color: #665fca; +} +.jumbotron { + padding-top: 30px; + padding-bottom: 30px; + margin-bottom: 30px; + color: inherit; + background-color: #3d3d3d; +} + +.modal-content { + position: relative; + background-color: #fff; + color: #000; + border: 1px solid #999; + border: 1px solid rgba(0, 0, 0, 0.2); + border-radius: 3px; + -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5); + box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5); + background-clip: padding-box; + outline: 0; +} + +.modal-content h1, +.modal-content h2, +.modal-content h3, +.modal-content h4{ + color: #000; +} \ No newline at end of file diff --git a/static/css/channels-dark.css b/static/css/channels-dark.css new file mode 100644 index 00000000..1a7edc27 --- /dev/null +++ b/static/css/channels-dark.css @@ -0,0 +1,30 @@ +.channels-table .unnamed { + font-style: italic; + color: #AAA; +} + + +.channels-table .channel-row:hover > td { + background: #666; + color: #fff; +} + +.channel-details-mini span { + color: #aaa; +} + +.edit-checks { + color: #ccc; +} + +.edit-checks:hover { + text-decoration: none; + color: #3429ce;; +} + +.add-integration li:hover, +.add-integration li:hover h2 { + background: #666; + color: #fff; +} + diff --git a/static/css/details-dark.css b/static/css/details-dark.css new file mode 100644 index 00000000..645cfd8d --- /dev/null +++ b/static/css/details-dark.css @@ -0,0 +1,4 @@ +#details-integrations.rw tr:hover th, #details-integrations.rw tr:hover td { + cursor: pointer; + background-color: #999; +} \ No newline at end of file diff --git a/static/css/docs-dark.css b/static/css/docs-dark.css new file mode 100644 index 00000000..88b5be6d --- /dev/null +++ b/static/css/docs-dark.css @@ -0,0 +1,19 @@ +.docs-nav li.nav-header { + color: #fff; + font-weight: bold; +} + +.page-docs code { + padding: 2px 4px; + font-size: 90%; + color: #333; + background-color: #666; + border-radius: 4px; +} + +.page-docs pre code { + padding: 0; + font-size: 13px; + background-color: #fff; + border-radius: 0; +} diff --git a/static/css/log-dark.css b/static/css/log-dark.css new file mode 100644 index 00000000..09ce0fbf --- /dev/null +++ b/static/css/log-dark.css @@ -0,0 +1,20 @@ +#log td { + color: #fff; + position: relative; + border: 0; + border-bottom: 1px solid #E5E5E5; +} + +#log .details span.ua-body { + font-family: "Lucida Console", Monaco, monospace; + font-size: 11.7px; + color: #ccc; +} + +#log tr.ok:hover td { + background-color: #999; +} + +#log .hash { + color: #fff; +} diff --git a/static/css/login-dark.css b/static/css/login-dark.css new file mode 100644 index 00000000..ee64c89d --- /dev/null +++ b/static/css/login-dark.css @@ -0,0 +1,4 @@ +.page-login form input { + margin-bottom: 20px; + color: #fff; +} \ No newline at end of file diff --git a/static/css/my_checks-dark.css b/static/css/my_checks-dark.css new file mode 100644 index 00000000..47977a36 --- /dev/null +++ b/static/css/my_checks-dark.css @@ -0,0 +1,5 @@ +#my-checks-tags .up { + color: #fff; + background-color: #333; + border-color: #ccc; +} diff --git a/static/css/my_checks_desktop-dark.css b/static/css/my_checks_desktop-dark.css new file mode 100644 index 00000000..48501cdc --- /dev/null +++ b/static/css/my_checks_desktop-dark.css @@ -0,0 +1,46 @@ +#checks-table .checks-row:hover { + background-color: #666; +} + +#checks-table a.default { + color: #8bc0e2; +} + +#checks-table.rw tr:hover .my-checks-name, +#checks-table.rw tr:hover .integrations, +#checks-table.rw tr:hover .timeout-grace, +#checks-table tr:hover .last-ping { + border: 1px dotted #333; + cursor: pointer; +} + +.checks-subline { + color: #999; + white-space: nowrap; +} + +.url-cell .base { + color: #999; +} + +.my-checks-url { + font-family: "Lucida Console", Monaco, monospace; + font-size: 11.7px; + position: relative; + line-height: 36px; + color: #fff; +} + +#checks-table .btn { + border-color: transparent; + font-size: 20px; + background-color: #222; + color: #999; +} + +#checks-table tr:hover .btn { + color: #333; + border-color: #333; + background: transparent; + opacity: 1; +} \ No newline at end of file diff --git a/static/css/profile-dark.css b/static/css/profile-dark.css new file mode 100644 index 00000000..eafb41a7 --- /dev/null +++ b/static/css/profile-dark.css @@ -0,0 +1,3 @@ +.settings-bar code { + background-color: #888; +} \ No newline at end of file diff --git a/static/css/projects-dark.css b/static/css/projects-dark.css new file mode 100644 index 00000000..3fa9859e --- /dev/null +++ b/static/css/projects-dark.css @@ -0,0 +1,10 @@ +#project-selector #add-project:hover .project { + border-color: #0091EA; + color: #ddd; +} + + +.project +{ + color: #ddd; +} diff --git a/static/css/welcome-dark.css b/static/css/welcome-dark.css new file mode 100644 index 00000000..f19008e7 --- /dev/null +++ b/static/css/welcome-dark.css @@ -0,0 +1,13 @@ +.index-bleed { + background: #333; + padding-bottom: 2em; +} + +.get-started-bleed { + background: #444; + padding: 3em 0; +} + +.footer-jumbo-bleed { + background: #666; +} diff --git a/templates/base.html b/templates/base.html index 789d1dee..cd1312bb 100644 --- a/templates/base.html +++ b/templates/base.html @@ -17,6 +17,7 @@ {% block head %}{% endblock %} {% compress css %} + @@ -25,30 +26,42 @@ + + + + + + - + + + + + + + {% endcompress %}