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

Implement explicit light/dark mode selection (WIP)

pull/537/head
Pēteris Caune 3 years ago
parent
4f72c9e204
commit
13334d2ab0
No known key found for this signature in database GPG Key ID: E28D7679E9A9EDE2
7 changed files with 190 additions and 214 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +7
    -24
      static/css/my_checks.css
  2. +22
    -24
      static/css/nouislider.dark.css
  3. +9
    -36
      static/css/pricing.css
  4. +3
    -5
      static/css/selectize.dark.css
  5. +71
    -71
      static/css/syntax.css
  6. +77
    -47
      static/css/variables.css
  7. +1
    -7
      static/css/welcome.css

+ 7
- 24
static/css/my_checks.css View File

@ -3,17 +3,9 @@
} }
#my-checks-tags .up { #my-checks-tags .up {
color: #333;
background-color: #fff;
border-color: #ccc;
}
@media (prefers-color-scheme: dark) {
#my-checks-tags .up {
color: #e0e0e2;
background-color: #25252a;
border-color: #303033;
}
color: var(--tag-up-color);
background-color: var(--tag-up-bg);
border-color: var(--tag-up-border);
} }
#my-checks-tags .grace { #my-checks-tags .grace {
@ -29,19 +21,10 @@
} }
#my-checks-tags .checked { #my-checks-tags .checked {
box-shadow: 0 0 3px #ddd;
background: #333;
color: #eee;
border-color: #000;
}
@media (prefers-color-scheme: dark) {
#my-checks-tags .checked {
box-shadow: none;
background: #fff;
color: #333;
border-color: #ccc;
}
box-shadow: 0 0 3px var(--tag-checked-shadow);
background: var(--tag-checked-bg);
color: var(--tag-checked-color);
border-color: var(--tag-checked-border);
} }
#search { #search {


+ 22
- 24
static/css/nouislider.dark.css View File

@ -1,29 +1,27 @@
@media (prefers-color-scheme: dark) {
.noUi-background {
background-color: #3c3939;
box-shadow: none;
}
body.dark .noUi-background {
background-color: #3c3939;
box-shadow: none;
}
.noUi-target {
border-color: #515151;
box-shadow: none;
}
body.dark .noUi-target {
border-color: #515151;
box-shadow: none;
}
.noUi-target.noUi-connect {
box-shadow: none;
}
body.dark .noUi-target.noUi-connect {
box-shadow: none;
}
.noUi-handle {
background-color: #515050;
border-color: #605c5c;
box-shadow: none;
}
body.dark .noUi-handle {
background-color: #515050;
border-color: #605c5c;
box-shadow: none;
}
.noUi-marker {
background: #777;
}
body.dark .noUi-marker {
background: #777;
}
.noUi-pips {
color: #777780;
}
}
body.dark .noUi-pips {
color: #777780;
}

+ 9
- 36
static/css/pricing.css View File

@ -10,56 +10,29 @@
display: inline-block; display: inline-block;
line-height: 0.9; line-height: 0.9;
text-shadow: 0px 1px white, -1px 1px white, 1px 1px white, -1px 0px white;
text-shadow: 0px 1px var(--panel-bg), -1px 1px var(--panel-bg), 1px 1px var(--panel-bg), -1px 0px var(--panel-bg);
} }
.hobbyist h1 { .hobbyist h1 {
color: #0a220c;
border-bottom: 3px solid #A5D6A7;
color: var(--plan-hobbyist-color);
border-bottom: 3px solid var(--plan-hobbyist-border);
} }
.supporter h1 { .supporter h1 {
color: #1d190f;
border-bottom: 3px solid #FFE082;
color: var(--plan-supporter-color);
border-bottom: 3px solid var(--plan-supporter-border);
} }
.business h1 { .business h1 {
color: #141c22;
border-bottom: 3px solid #90CAF9;
color: var(--plan-business-color);
border-bottom: 3px solid var(--plan-business-border);
} }
.business-plus h1 { .business-plus h1 {
color: #221f1e;
border-bottom: 3px solid #BCAAA4;
color: var(--plan-business-plus-color);
border-bottom: 3px solid var(--plan-business-plus-border);
} }
@media (prefers-color-scheme: dark) {
.panel.plan h1 {
text-shadow: 0px 1px var(--panel-bg), -1px 1px var(--panel-bg), 1px 1px var(--panel-bg), -1px 0px var(--panel-bg);
}
.hobbyist h1 {
color: #e3ffe4;
border-bottom: 3px solid #A5D6A7;
}
.supporter h1 {
color: #fff0c4;
border-bottom: 3px solid #FFE082;
}
.business h1 {
color: #e8f2f9;
border-bottom: 3px solid #90CAF9;
}
.business-plus h1 {
color: #fff5f2;
border-bottom: 3px solid #BCAAA4;
}
}
.mo { .mo {
font-size: 16px; font-size: 16px;
} }


+ 3
- 5
static/css/selectize.dark.css View File

@ -1,5 +1,3 @@
@media (prefers-color-scheme: dark) {
.selectize-input input {
color: var(--input-color);
}
}
.selectize-input input {
color: var(--input-color);
}

+ 71
- 71
static/css/syntax.css View File

@ -59,74 +59,74 @@
.highlight .vi { color: #008080 } /* Name.Variable.Instance */ .highlight .vi { color: #008080 } /* Name.Variable.Instance */
.highlight .il { color: #009999 } /* Literal.Number.Integer.Long */ .highlight .il { color: #009999 } /* Literal.Number.Integer.Long */
@media (prefers-color-scheme: dark) {
.highlight .hll { background-color: #49483e }
.highlight .c { color: #75715e } /* Comment */
.highlight .err { color: #960050; background-color: #1e0010 } /* Error */
.highlight .k { color: #66d9ef } /* Keyword */
.highlight .l { color: #ae81ff } /* Literal */
.highlight .n { color: #f8f8f2 } /* Name */
.highlight .o { color: #f92672 } /* Operator */
.highlight .p { color: #f8f8f2 } /* Punctuation */
.highlight .ch { color: #75715e } /* Comment.Hashbang */
.highlight .cm { color: #75715e } /* Comment.Multiline */
.highlight .cp { color: #75715e } /* Comment.Preproc */
.highlight .cpf { color: #75715e } /* Comment.PreprocFile */
.highlight .c1 { color: #75715e } /* Comment.Single */
.highlight .cs { color: #75715e } /* Comment.Special */
.highlight .gd { color: #f92672 } /* Generic.Deleted */
.highlight .ge { font-style: italic } /* Generic.Emph */
.highlight .gi { color: #a6e22e } /* Generic.Inserted */
.highlight .gs { font-weight: bold } /* Generic.Strong */
.highlight .gu { color: #75715e } /* Generic.Subheading */
.highlight .kc { color: #66d9ef } /* Keyword.Constant */
.highlight .kd { color: #66d9ef } /* Keyword.Declaration */
.highlight .kn { color: #f92672 } /* Keyword.Namespace */
.highlight .kp { color: #66d9ef } /* Keyword.Pseudo */
.highlight .kr { color: #66d9ef } /* Keyword.Reserved */
.highlight .kt { color: #66d9ef } /* Keyword.Type */
.highlight .ld { color: #e6db74 } /* Literal.Date */
.highlight .m { color: #ae81ff } /* Literal.Number */
.highlight .s { color: #e6db74 } /* Literal.String */
.highlight .na { color: #a6e22e } /* Name.Attribute */
.highlight .nb { color: #f8f8f2 } /* Name.Builtin */
.highlight .nc { color: #a6e22e } /* Name.Class */
.highlight .no { color: #66d9ef } /* Name.Constant */
.highlight .nd { color: #a6e22e } /* Name.Decorator */
.highlight .ni { color: #f8f8f2 } /* Name.Entity */
.highlight .ne { color: #a6e22e } /* Name.Exception */
.highlight .nf { color: #a6e22e } /* Name.Function */
.highlight .nl { color: #f8f8f2 } /* Name.Label */
.highlight .nn { color: #f8f8f2 } /* Name.Namespace */
.highlight .nx { color: #a6e22e } /* Name.Other */
.highlight .py { color: #f8f8f2 } /* Name.Property */
.highlight .nt { color: #f92672 } /* Name.Tag */
.highlight .nv { color: #f8f8f2 } /* Name.Variable */
.highlight .ow { color: #f92672 } /* Operator.Word */
.highlight .w { color: #f8f8f2 } /* Text.Whitespace */
.highlight .mb { color: #ae81ff } /* Literal.Number.Bin */
.highlight .mf { color: #ae81ff } /* Literal.Number.Float */
.highlight .mh { color: #ae81ff } /* Literal.Number.Hex */
.highlight .mi { color: #ae81ff } /* Literal.Number.Integer */
.highlight .mo { color: #ae81ff } /* Literal.Number.Oct */
.highlight .sa { color: #e6db74 } /* Literal.String.Affix */
.highlight .sb { color: #e6db74 } /* Literal.String.Backtick */
.highlight .sc { color: #e6db74 } /* Literal.String.Char */
.highlight .dl { color: #e6db74 } /* Literal.String.Delimiter */
.highlight .sd { color: #e6db74 } /* Literal.String.Doc */
.highlight .s2 { color: #e6db74 } /* Literal.String.Double */
.highlight .se { color: #ae81ff } /* Literal.String.Escape */
.highlight .sh { color: #e6db74 } /* Literal.String.Heredoc */
.highlight .si { color: #e6db74 } /* Literal.String.Interpol */
.highlight .sx { color: #e6db74 } /* Literal.String.Other */
.highlight .sr { color: #e6db74 } /* Literal.String.Regex */
.highlight .s1 { color: #e6db74 } /* Literal.String.Single */
.highlight .ss { color: #e6db74 } /* Literal.String.Symbol */
.highlight .bp { color: #f8f8f2 } /* Name.Builtin.Pseudo */
.highlight .fm { color: #a6e22e } /* Name.Function.Magic */
.highlight .vc { color: #f8f8f2 } /* Name.Variable.Class */
.highlight .vg { color: #f8f8f2 } /* Name.Variable.Global */
.highlight .vi { color: #f8f8f2 } /* Name.Variable.Instance */
.highlight .vm { color: #f8f8f2 } /* Name.Variable.Magic */
.highlight .il { color: #ae81ff } /* Literal.Number.Integer.Long */
}
body.dark .highlight .hll { background-color: #49483e }
body.dark .highlight .c { color: #75715e } /* Comment */
body.dark .highlight .err { color: #960050; background-color: #1e0010 } /* Error */
body.dark .highlight .k { color: #66d9ef } /* Keyword */
body.dark .highlight .l { color: #ae81ff } /* Literal */
body.dark .highlight .n { color: #f8f8f2 } /* Name */
body.dark .highlight .o { color: #f92672 } /* Operator */
body.dark .highlight .p { color: #f8f8f2 } /* Punctuation */
body.dark .highlight .ch { color: #75715e } /* Comment.Hashbang */
body.dark .highlight .cm { color: #75715e } /* Comment.Multiline */
body.dark .highlight .cp { color: #75715e } /* Comment.Preproc */
body.dark .highlight .cpf { color: #75715e } /* Comment.PreprocFile */
body.dark .highlight .c1 { color: #75715e } /* Comment.Single */
body.dark .highlight .cs { color: #75715e } /* Comment.Special */
body.dark .highlight .gd { color: #f92672 } /* Generic.Deleted */
body.dark .highlight .ge { font-style: italic } /* Generic.Emph */
body.dark .highlight .gi { color: #a6e22e } /* Generic.Inserted */
body.dark .highlight .gs { font-weight: bold } /* Generic.Strong */
body.dark .highlight .gu { color: #75715e } /* Generic.Subheading */
body.dark .highlight .kc { color: #66d9ef } /* Keyword.Constant */
body.dark .highlight .kd { color: #66d9ef } /* Keyword.Declaration */
body.dark .highlight .kn { color: #f92672 } /* Keyword.Namespace */
body.dark .highlight .kp { color: #66d9ef } /* Keyword.Pseudo */
body.dark .highlight .kr { color: #66d9ef } /* Keyword.Reserved */
body.dark .highlight .kt { color: #66d9ef } /* Keyword.Type */
body.dark .highlight .ld { color: #e6db74 } /* Literal.Date */
body.dark .highlight .m { color: #ae81ff } /* Literal.Number */
body.dark .highlight .s { color: #e6db74 } /* Literal.String */
body.dark .highlight .na { color: #a6e22e } /* Name.Attribute */
body.dark .highlight .nb { color: #f8f8f2 } /* Name.Builtin */
body.dark .highlight .nc { color: #a6e22e } /* Name.Class */
body.dark .highlight .no { color: #66d9ef } /* Name.Constant */
body.dark .highlight .nd { color: #a6e22e } /* Name.Decorator */
body.dark .highlight .ni { color: #f8f8f2 } /* Name.Entity */
body.dark .highlight .ne { color: #a6e22e } /* Name.Exception */
body.dark .highlight .nf { color: #a6e22e } /* Name.Function */
body.dark .highlight .nl { color: #f8f8f2 } /* Name.Label */
body.dark .highlight .nn { color: #f8f8f2 } /* Name.Namespace */
body.dark .highlight .nx { color: #a6e22e } /* Name.Other */
body.dark .highlight .py { color: #f8f8f2 } /* Name.Property */
body.dark .highlight .nt { color: #f92672 } /* Name.Tag */
body.dark .highlight .nv { color: #f8f8f2 } /* Name.Variable */
body.dark .highlight .ow { color: #f92672 } /* Operator.Word */
body.dark .highlight .w { color: #f8f8f2 } /* Text.Whitespace */
body.dark .highlight .mb { color: #ae81ff } /* Literal.Number.Bin */
body.dark .highlight .mf { color: #ae81ff } /* Literal.Number.Float */
body.dark .highlight .mh { color: #ae81ff } /* Literal.Number.Hex */
body.dark .highlight .mi { color: #ae81ff } /* Literal.Number.Integer */
body.dark .highlight .mo { color: #ae81ff } /* Literal.Number.Oct */
body.dark .highlight .sa { color: #e6db74 } /* Literal.String.Affix */
body.dark .highlight .sb { color: #e6db74 } /* Literal.String.Backtick */
body.dark .highlight .sc { color: #e6db74 } /* Literal.String.Char */
body.dark .highlight .dl { color: #e6db74 } /* Literal.String.Delimiter */
body.dark .highlight .sd { color: #e6db74 } /* Literal.String.Doc */
body.dark .highlight .s2 { color: #e6db74 } /* Literal.String.Double */
body.dark .highlight .se { color: #ae81ff } /* Literal.String.Escape */
body.dark .highlight .sh { color: #e6db74 } /* Literal.String.Heredoc */
body.dark .highlight .si { color: #e6db74 } /* Literal.String.Interpol */
body.dark .highlight .sx { color: #e6db74 } /* Literal.String.Other */
body.dark .highlight .sr { color: #e6db74 } /* Literal.String.Regex */
body.dark .highlight .s1 { color: #e6db74 } /* Literal.String.Single */
body.dark .highlight .ss { color: #e6db74 } /* Literal.String.Symbol */
body.dark .highlight .bp { color: #f8f8f2 } /* Name.Builtin.Pseudo */
body.dark .highlight .fm { color: #a6e22e } /* Name.Function.Magic */
body.dark .highlight .vc { color: #f8f8f2 } /* Name.Variable.Class */
body.dark .highlight .vg { color: #f8f8f2 } /* Name.Variable.Global */
body.dark .highlight .vi { color: #f8f8f2 } /* Name.Variable.Instance */
body.dark .highlight .vm { color: #f8f8f2 } /* Name.Variable.Magic */
body.dark .highlight .il { color: #ae81ff } /* Literal.Number.Integer.Long */

+ 77
- 47
static/css/variables.css View File

@ -23,6 +23,7 @@
--channel-off-color: #ddd; --channel-off-color: #ddd;
--close-color: #000; --close-color: #000;
--debug-warning-bg: #eee; --debug-warning-bg: #eee;
--get-started-bg: #f2f5f2;
--input-bg-disabled: #eeeeee; --input-bg-disabled: #eeeeee;
--input-border: #ccc; --input-border: #ccc;
--input-color: #555; --input-color: #555;
@ -31,62 +32,91 @@
--log-missing-bg: #fff3f2; --log-missing-bg: #fff3f2;
--modal-content-bg: #fff; --modal-content-bg: #fff;
--nav-pills-active-link-hover-bg: #eee; --nav-pills-active-link-hover-bg: #eee;
--panel-bg: transparent;
--panel-bg: #fff;
--panel-success-bg: #dff0d8; --panel-success-bg: #dff0d8;
--plan-business-border: #90CAF9;
--plan-business-color: #141c22;
--plan-business-plus-border: #BCAAA4;
--plan-business-plus-color: #221f1e;
--plan-hobbyist-border: #A5D6A7;
--plan-hobbyist-color: #0a220c;
--plan-supporter-border: #FFE082;
--plan-supporter-color: #1d190f;
--pre-bg: #f5f5f5; --pre-bg: #f5f5f5;
--small-text-color: #111; --small-text-color: #111;
--status-new-color: #ccc; --status-new-color: #ccc;
--table-bg-hover: #f5f5f5; --table-bg-hover: #f5f5f5;
--tag-bg: #eee; --tag-bg: #eee;
--tag-checked-bg: #333;
--tag-checked-border: #000;
--tag-checked-color: #eee;
--tag-checked-shadow: #ddd;
--tag-color: #555; --tag-color: #555;
--tag-up-bg: #fff;
--tag-up-border: #ccc;
--tag-up-color: #333;
--text-color: #333; --text-color: #333;
--text-muted: #777; --text-muted: #777;
} }
@media (prefers-color-scheme: dark) {
:root {
--alert-info-bg: #123051;
--alert-info-border: #163c64;
--alert-info-color: #e0e2f5;
--alert-no-data-bg: #29292c;
--alert-no-data-border: #303033;
--alert-no-data-color: #878790;
--alert-success-bg: #0f2c1c;
--alert-success-border: #2b4939;
--alert-success-color: #ebf5ef;
--body-bg: #161619;
--border-color: #303033;
--border-muted: #303033;
--breadcrumb-bg: #25252a;
--btn-active-bg: #6f6f7f;
--btn-active-border: #818191;
--btn-default-bg: #383840;
--btn-default-border: #4e4e59;
--btn-default-color: #e0e0e2;
--btn-remove-bg: #202024;
--btn-remove-color: #ff4c46;
--btn-remove-hover: #3f1a22;
--channel-off-color: #464649;
--close-color: #fff;
--debug-warning-bg: #60002d;
--input-bg-disabled: #29292c;
--input-border: #464649;
--input-color: #b0b0b2;
--input-group-addon-bg: #29292c;
--jumbotron-bg: #1f1f22;
--log-missing-bg: #2d1e21;
--modal-content-bg: #1f1f22;
--nav-pills-active-link-hover-bg: #383840;
--panel-bg: #25252a;
--panel-success-bg: #165b35;
--pre-bg: #29292c;
--small-text-color: #f0f0f2;
--status-new-color: #464649;
--table-bg-hover: #25252a;
--tag-bg: #303033;
--tag-color: #e0e0e2;
--text-color: #e0e0e2;
--text-muted: #777780;
}
}
body.dark {
--alert-info-bg: #123051;
--alert-info-border: #163c64;
--alert-info-color: #e0e2f5;
--alert-no-data-bg: #29292c;
--alert-no-data-border: #303033;
--alert-no-data-color: #878790;
--alert-success-bg: #0f2c1c;
--alert-success-border: #2b4939;
--alert-success-color: #ebf5ef;
--body-bg: #161619;
--border-color: #303033;
--border-muted: #303033;
--breadcrumb-bg: #25252a;
--btn-active-bg: #6f6f7f;
--btn-active-border: #818191;
--btn-default-bg: #383840;
--btn-default-border: #4e4e59;
--btn-default-color: #e0e0e2;
--btn-remove-bg: #202024;
--btn-remove-color: #ff4c46;
--btn-remove-hover: #3f1a22;
--channel-off-color: #464649;
--close-color: #fff;
--debug-warning-bg: #60002d;
--get-started-bg: #2c2e2c;
--input-bg-disabled: #29292c;
--input-border: #464649;
--input-color: #b0b0b2;
--input-group-addon-bg: #29292c;
--jumbotron-bg: #1f1f22;
--log-missing-bg: #2d1e21;
--modal-content-bg: #1f1f22;
--nav-pills-active-link-hover-bg: #383840;
--panel-bg: #25252a;
--panel-success-bg: #165b35;
--plan-business-border: #90CAF9;
--plan-business-color: #e8f2f9;
--plan-business-plus-border: #BCAAA4;
--plan-business-plus-color: #fff5f2;
--plan-hobbyist-border: #A5D6A7;
--plan-hobbyist-color: #e3ffe4;
--plan-supporter-border: #FFE082;
--plan-supporter-color: #fff0c4;
--pre-bg: #29292c;
--small-text-color: #f0f0f2;
--status-new-color: #464649;
--table-bg-hover: #25252a;
--tag-bg: #303033;
--tag-checked-bg: #fff;
--tag-checked-border: #ccc;
--tag-checked-color: #333;
--tag-checked-shadow: #000;
--tag-color: #e0e0e2;
--tag-up-bg: #25252a;
--tag-up-border: #303033;
--tag-up-color: #e0e0e2;
--text-color: #e0e0e2;
--text-muted: #777780;
}

+ 1
- 7
static/css/welcome.css View File

@ -7,16 +7,10 @@
} }
.get-started-bleed { .get-started-bleed {
background: #f2f5f2;
background: var(--get-started-bg);
padding: 3em 0; padding: 3em 0;
} }
@media (prefers-color-scheme: dark) {
.get-started-bleed {
background: #2c2e2c;
}
}
.footer-jumbo-bleed { .footer-jumbo-bleed {
background: #eee; background: #eee;
} }


Write Preview
Loading…
Cancel
Save