✨ Add themes

upptime · Jan 22, 2021 · ecfada6 · ecfada6
1 parent 4f826a7
commit ecfada6
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 89 deletions.
diff --git a/static/global.css b/static/global.css
@@ -120,23 +120,23 @@ a.error-button {
 /* Theming */
 
 .submit-button {
-  background-color: #01a3a4;
+  background: #01a3a4;
   color: #fff;
   border-color: transparent;
 }
 
 body {
-  background-color: var(--body-background-color);
+  background: var(--body-background-color);
   color: var(--body-text-color);
 }
 
 code {
   color: var(--code-color);
-  background-color: var(--code-background-color);
+  background: var(--code-background-color);
 }
 
 article {
-  background-color: var(--card-background-color);
+  background: var(--card-background-color);
   border-color: var(--card-border-color);
 }
 
@@ -145,7 +145,7 @@ article.down {
   color: var(--down-color-color);
 }
 article.down-active {
-  background-color: var(--down-background-color);
+  background: var(--down-background-color);
   border-color: var(--down-border-left-color);
 }
 article.degraded {
@@ -162,23 +162,23 @@ article.up {
 }
 .tag.closed,
 .tag.up {
-  background-color: var(--tag-up-background-color) !important;
+  background: var(--tag-up-background-color) !important;
 }
 .tag.open,
 .tag.down {
-  background-color: var(--tag-down-background-color) !important;
+  background: var(--tag-down-background-color) !important;
 }
 .tag.degraded {
-  background-color: var(--tag-degraded-background-color) !important;
+  background: var(--tag-degraded-background-color) !important;
 }
 
 .changed + section .data {
-  background-color: var(--change-background-color);
+  background: var(--change-background-color);
 }
 
 nav {
   border-bottom-color: var(--nav-border-bottom-color);
-  background-color: var(--nav-background-color);
+  background: var(--nav-background-color);
 }
 
 [aria-current] {
@@ -187,12 +187,12 @@ nav {
 
 a.error-button {
   border-color: var(--error-button-border-color);
-  background-color: var(--error-button-background-color);
+  background: var(--error-button-background-color);
   color: var(--error-button-color);
 }
 
 .submit-button {
-  background-color: var(--submit-button-background-color);
+  background: var(--submit-button-background-color);
   color: var(--submit-button-color);
   border-color: var(--submit-button-border-color);
 }

diff --git a/static/themes/dark.css b/static/themes/dark.css
@@ -1,78 +1,26 @@
-body {
-  background-color: #001716;
-  color: #f0ffff;
-}
-
-code {
-  color: #555;
-  background-color: #f0f0f0;
-}
-
-article {
-  background-color: #002b29;
-  border-color: rgba(0, 0, 0, 0.1);
-}
-
-article.down {
-  border-left-color: #e74c3c;
-  background-color: #700000;
-}
-article.degraded {
-  border-left-color: #f39c12 !important;
-  background-color: #ffdfad;
-}
-article.up {
-  border-left-color: #2ecc71;
-}
-article.good {
-  background-color: #dcffeb;
-  color: #003300;
-}
-
-.tag {
-  color: #fff;
-}
-.tag.closed,
-.tag.up {
-  background-color: #16a085;
-}
-.tag.open,
-.tag.down {
-  background-color: #c0392b;
-}
-.tag.degraded {
-  background-color: #f39c12 !important;
-}
-
-.changed + section .data {
-  background-color: #fdcb6e;
-}
-
-.live-status article {
-  background-color: #002b29;
-}
-
-nav {
-  border-bottom-color: rgba(0, 0, 0, 0.1);
-  background-color: #002b29;
-}
-
-[aria-current] {
-  border-bottom-color: #3498db;
-}
-
-a.error-button {
-  border-color: rgba(0, 0, 0, 0.25);
-  background-color: #01a3a4;
-  color: #002b29;
-}
-
-.submit-button {
-  background-color: #01a3a4;
-  color: #002b29;
-  border-color: transparent;
-}
-
-article .graph {
-  opacity: 0.25;
+:root {
+  --body-background-color: #001716;
+  --body-text-color: #f0ffff;
+  --card-background-color: #002b29;
+  --nav-background-color: #002b29;
+  --nav-border-bottom-color: #015450;
+  --nav-current-border-bottom-color: #1abc9c;
+  --card-border-color: #015450;
+  --down-border-left-color: #eb3b5a;
+  --down-background-color: #6b1020;
+  --degraded-border-left-color: #f7b731;
+  --up-border-left-color: #20bf6b;
+  --tag-color: #002b29;
+  --tag-up-background-color: #20bf6b;
+  --tag-down-background-color: #eb3b5a;
+  --tag-degraded-background-color: #f7b731;
+  --change-background-color: #f7b731;
+  --error-button-border-color: #1a46ad;
+  --error-button-background-color: #3867d6;
+  --error-button-color: #ffffff;
+  --submit-button-border-color: #1a46ad;
+  --submit-button-background-color: #3867d6;
+  --submit-button-color: #ffffff;
+  --graph-opacity: 1;
+  --graph-filter: none;
 }
diff --git a/static/themes/ocean.css b/static/themes/ocean.css
@@ -0,0 +1,26 @@
+:root {
+  --body-background-color: #011945;
+  --body-text-color: #f0ffff;
+  --card-background-color: #0d2f6e;
+  --nav-background-color: #0d2f6e;
+  --nav-border-bottom-color: #002d80;
+  --nav-current-border-bottom-color: #1abc9c;
+  --card-border-color: #002d80;
+  --down-border-left-color: #eb3b5a;
+  --down-background-color: #6b1020;
+  --degraded-border-left-color: #f7b731;
+  --up-border-left-color: #20bf6b;
+  --tag-color: #0d2f6e;
+  --tag-up-background-color: #20bf6b;
+  --tag-down-background-color: #eb3b5a;
+  --tag-degraded-background-color: #f7b731;
+  --change-background-color: #f7b731;
+  --error-button-border-color: #1a46ad;
+  --error-button-background-color: #3867d6;
+  --error-button-color: #ffffff;
+  --submit-button-border-color: #1a46ad;
+  --submit-button-background-color: #3867d6;
+  --submit-button-color: #ffffff;
+  --graph-opacity: 1;
+  --graph-filter: none;
+}