{incident.title.replace("🛑", "").replace("⚠️", "").trim()}
diff --git a/src/routes/_layout.svelte b/src/routes/_layout.svelte
index 503674b..08ced1a 100644
--- a/src/routes/_layout.svelte
+++ b/src/routes/_layout.svelte
@@ -6,6 +6,10 @@
+
{/each}
{/if}
-
{#if config['status-website'].css}
{@html ``}
{/if}
diff --git a/static/global.css b/static/global.css
index e40bc6c..5871f22 100644
--- a/static/global.css
+++ b/static/global.css
@@ -25,13 +25,6 @@ a {
color: inherit;
}
-code {
- font-family: menlo, inconsolata, monospace;
- font-size: calc(1em - 2px);
- padding: 0.2em 0.4em;
- border-radius: 2px;
-}
-
@media (min-width: 400px) {
body {
font-size: 16px;
@@ -124,8 +117,87 @@ a.error-button {
border: 0.1rem solid;
}
+/* Theming */
+
.submit-button {
background-color: #01a3a4;
color: #fff;
border-color: transparent;
}
+
+body {
+ background-color: var(--body-background-color);
+ color: var(--body-text-color);
+}
+
+code {
+ color: var(--code-color);
+ background-color: var(--code-background-color);
+}
+
+article {
+ background-color: var(--card-background-color);
+ border-color: var(--card-border-color);
+}
+
+article.down {
+ border-left-color: var(--down-border-left-color) !important;
+ color: var(--down-color-color);
+}
+article.down-active {
+ background-color: var(--down-background-color);
+ border-color: var(--down-border-left-color);
+}
+article.degraded {
+ border-left-color: var(--degraded-border-left-color) !important;
+ color: var(--degraded-color-color);
+}
+article.up {
+ border-left-color: var(--up-border-left-color) !important;
+ color: var(--up-color-color);
+}
+
+.tag {
+ color: var(--tag-color);
+}
+.tag.closed,
+.tag.up {
+ background-color: var(--tag-up-background-color) !important;
+}
+.tag.open,
+.tag.down {
+ background-color: var(--tag-down-background-color) !important;
+}
+.tag.degraded {
+ background-color: var(--tag-degraded-background-color) !important;
+}
+
+.changed + section .data {
+ background-color: var(--change-background-color);
+}
+
+nav {
+ border-bottom-color: var(--nav-border-bottom-color);
+ background-color: var(--nav-background-color);
+}
+
+[aria-current] {
+ border-bottom-color: var(--nav-current-border-bottom-color);
+}
+
+a.error-button {
+ border-color: var(--error-button-border-color);
+ background-color: var(--error-button-background-color);
+ color: var(--error-button-color);
+}
+
+.submit-button {
+ background-color: var(--submit-button-background-color);
+ color: var(--submit-button-color);
+ border-color: var(--submit-button-border-color);
+}
+
+article .graph {
+ opacity: var(--graph-opacity);
+ filter: var(--graph-filter);
+}
diff --git a/static/themes/light.css b/static/themes/light.css
index 81ceb5d..a9f32a8 100644
--- a/static/themes/light.css
+++ b/static/themes/light.css
@@ -1,74 +1,26 @@
-body {
- color: #333;
- background-color: #f0f7f7;
-}
-
-code {
- color: #555;
- background-color: #f0f0f0;
-}
-
-article {
- background-color: #fff;
- border-color: rgba(0, 0, 0, 0.1);
-}
-
-article.down {
- border-left-color: #e74c3c;
- background-color: #ffdce3;
-}
-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: #fff;
-}
-
-nav {
- border-bottom-color: rgba(0, 0, 0, 0.1);
- background-color: #fff;
-}
-
-[aria-current] {
- border-bottom-color: #3498db;
-}
-
-a.error-button {
- border-color: rgba(0, 0, 0, 0.25);
- background-color: #01a3a4;
- color: #fff;
-}
-
-.submit-button {
- background-color: #01a3a4;
- color: #fff;
- border-color: transparent;
+:root {
+ --body-background-color: #f0f7f7;
+ --body-text-color: #002626;
+ --card-background-color: #ffffff;
+ --nav-background-color: #ffffff;
+ --nav-border-bottom-color: #d8e8e4;
+ --nav-current-border-bottom-color: #1abc9c;
+ --card-border-color: #d8e8e4;
+ --down-border-left-color: #eb3b5a;
+ --down-background-color: #ffd0d2;
+ --degraded-border-left-color: #f7b731;
+ --up-border-left-color: #20bf6b;
+ --tag-color: #ffffff;
+ --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
index 284ca91..e69de29 100644
--- a/static/themes/ocean.css
+++ b/static/themes/ocean.css
@@ -1,78 +0,0 @@
-body {
- background-color: #0c2461;
- color: #f0ffff;
-}
-
-code {
- color: #555;
- background-color: #f0f0f0;
-}
-
-article {
- background-color: #1e3799;
- 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: #1e3799;
-}
-
-nav {
- border-bottom-color: rgba(0, 0, 0, 0.1);
- background-color: #1e3799;
-}
-
-[aria-current] {
- border-bottom-color: #3498db;
-}
-
-a.error-button {
- border-color: rgba(0, 0, 0, 0.25);
- background-color: #01a3a4;
- color: #1e3799;
-}
-
-.submit-button {
- background-color: #01a3a4;
- color: #1e3799;
- border-color: transparent;
-}
-
-article .graph {
- opacity: 0.25;
-}