nielsperetzke
/
healthchecks
1
0
Fork 0
Code Issues 0 Pull Requests 0 Projects 0 Releases 32 Wiki Activity
Browse Source

Dark mode

pull/511/head
andyloree 4 years ago
parent
ae4487b6c3
commit
556bc2d95f
14 changed files with 590 additions and 1 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +4
    -0
      static/css/badges-dark.css
  2. +36
    -0
      static/css/base-dark.css
  3. +382
    -0
      static/css/bootstrap-dark.css
  4. +30
    -0
      static/css/channels-dark.css
  5. +4
    -0
      static/css/details-dark.css
  6. +19
    -0
      static/css/docs-dark.css
  7. +20
    -0
      static/css/log-dark.css
  8. +4
    -0
      static/css/login-dark.css
  9. +5
    -0
      static/css/my_checks-dark.css
  10. +46
    -0
      static/css/my_checks_desktop-dark.css
  11. +3
    -0
      static/css/profile-dark.css
  12. +10
    -0
      static/css/projects-dark.css
  13. +13
    -0
      static/css/welcome-dark.css
  14. +14
    -1
      templates/base.html

+ 4
- 0
static/css/badges-dark.css View File

@ -0,0 +1,4 @@
.table.badge-preview code {
background-color: #666;
color: #000;
}

+ 36
- 0
static/css/base-dark.css View File

@ -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;
}

+ 382
- 0
static/css/bootstrap-dark.css View File

@ -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;
}

+ 30
- 0
static/css/channels-dark.css View File

@ -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;
}

+ 4
- 0
static/css/details-dark.css View File

@ -0,0 +1,4 @@
#details-integrations.rw tr:hover th, #details-integrations.rw tr:hover td {
cursor: pointer;
background-color: #999;
}

+ 19
- 0
static/css/docs-dark.css View File

@ -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;
}

+ 20
- 0
static/css/log-dark.css View File

@ -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;
}

+ 4
- 0
static/css/login-dark.css View File

@ -0,0 +1,4 @@
.page-login form input {
margin-bottom: 20px;
color: #fff;
}

+ 5
- 0
static/css/my_checks-dark.css View File

@ -0,0 +1,5 @@
#my-checks-tags .up {
color: #fff;
background-color: #333;
border-color: #ccc;
}

+ 46
- 0
static/css/my_checks_desktop-dark.css View File

@ -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;
}

+ 3
- 0
static/css/profile-dark.css View File

@ -0,0 +1,3 @@
.settings-bar code {
background-color: #888;
}

+ 10
- 0
static/css/projects-dark.css View File

@ -0,0 +1,10 @@
#project-selector #add-project:hover .project {
border-color: #0091EA;
color: #ddd;
}
.project
{
color: #ddd;
}

+ 13
- 0
static/css/welcome-dark.css View File

@ -0,0 +1,13 @@
.index-bleed {
background: #333;
padding-bottom: 2em;
}
.get-started-bleed {
background: #444;
padding: 3em 0;
}
.footer-jumbo-bleed {
background: #666;
}

+ 14
- 1
templates/base.html View File

@ -17,6 +17,7 @@
{% block head %}{% endblock %}
{% compress css %}
<link rel="stylesheet" href="{% static 'css/bootstrap.css' %}" type="text/css">
<link rel="stylesheet" href="{% static 'css/bootstrap-dark.css' %}" type="text/css" media="(prefers-color-scheme: dark)">
<link rel="stylesheet" href="{% static 'css/bootstrap-select.min.css' %}" type="text/css">
<link rel="stylesheet" href="{% static 'css/selectize.hc.css' %}" type="text/css">
@ -25,30 +26,42 @@
<link rel="stylesheet" href="{% static 'css/add_pushover.css' %}" type="text/css">
<link rel="stylesheet" href="{% static 'css/webhook_form.css' %}" type="text/css">
<link rel="stylesheet" href="{% static 'css/badges.css' %}" type="text/css">
<link rel="stylesheet" href="{% static 'css/badges-dark.css' %}" type="text/css" media="(prefers-color-scheme: dark)">
<link rel="stylesheet" href="{% static 'css/base.css' %}" type="text/css">
<link rel="stylesheet" href="{% static 'css/base-dark.css' %}" type="text/css" media="(prefers-color-scheme: dark)">
<link rel="stylesheet" href="{% static 'css/billing.css' %}" type="text/css">
<link rel="stylesheet" href="{% static 'css/channel_checks.css' %}" type="text/css">
<link rel="stylesheet" href="{% static 'css/channels.css' %}" type="text/css">
<link rel="stylesheet" href="{% static 'css/channels-dark.css' %}" type="text/css" media="(prefers-color-scheme: dark)">
<link rel="stylesheet" href="{% static 'css/checkbox.css' %}" type="text/css">
<link rel="stylesheet" href="{% static 'css/details.css' %}" type="text/css">
<link rel="stylesheet" href="{% static 'css/details-dark.css' %}" type="text/css" media="(prefers-color-scheme: dark)">
<link rel="stylesheet" href="{% static 'css/docs.css' %}" type="text/css">
<link rel="stylesheet" href="{% static 'css/docs-dark.css' %}" type="text/css" media="(prefers-color-scheme: dark)">
<link rel="stylesheet" href="{% static 'css/docs_cron.css' %}" type="text/css">
<link rel="stylesheet" href="{% static 'css/icomoon.css' %}" type="text/css">
<link rel="stylesheet" href="{% static 'css/log.css' %}" type="text/css">
<link rel="stylesheet" href="{% static 'css/log-dark.css' %}" type="text/css" media="(prefers-color-scheme: dark)">
<link rel="stylesheet" href="{% static 'css/login.css' %}" type="text/css">
<link rel="stylesheet" href="{% static 'css/my_checks.css' %}" type="text/css">
<link rel="stylesheet" href="{% static 'css/login-dark.css' %}" type="text/css" media="(prefers-color-scheme: dark)">
<link rel="stylesheet" href="{% static 'css/my_checks.css' %}" type="text/css" type="text/css">
<link rel="stylesheet" href="{% static 'css/my_checks-dark.css' %}" type="text/css" type="text/css" media="(prefers-color-scheme: dark)">
<link rel="stylesheet" href="{% static 'css/my_checks_desktop.css' %}" type="text/css">
<link rel="stylesheet" href="{% static 'css/my_checks_desktop-dark.css' %}" type="text/css" media="(prefers-color-scheme: dark)">
<link rel="stylesheet" href="{% static 'css/nouislider.min.css' %}" type="text/css">
<link rel="stylesheet" href="{% static 'css/nouislider.pips.css' %}" type="text/css">
<link rel="stylesheet" href="{% static 'css/ping_details.css' %}" type="text/css">
<link rel="stylesheet" href="{% static 'css/pricing.css' %}" type="text/css">
<link rel="stylesheet" href="{% static 'css/profile.css' %}" type="text/css">
<link rel="stylesheet" href="{% static 'css/profile-dark.css' %}" type="text/css" media="(prefers-color-scheme: dark)">
<link rel="stylesheet" href="{% static 'css/projects.css' %}" type="text/css">
<link rel="stylesheet" href="{% static 'css/projects-dark.css' %}" type="text/css" media="(prefers-color-scheme: dark)">
<link rel="stylesheet" href="{% static 'css/radio.css' %}" type="text/css">
<link rel="stylesheet" href="{% static 'css/settings.css' %}" type="text/css">
<link rel="stylesheet" href="{% static 'css/snippet-copy.css' %}" type="text/css">
<link rel="stylesheet" href="{% static 'css/syntax.css' %}" type="text/css">
<link rel="stylesheet" href="{% static 'css/welcome.css' %}" type="text/css">
<link rel="stylesheet" href="{% static 'css/welcome-dark.css' %}" type="text/css" media="(prefers-color-scheme: dark)">
<link rel="stylesheet" href="{% static 'css/set_password.css' %}" type="text/css">
{% endcompress %}
</head>


Write Preview
Loading…
Cancel
Save