1 files changed, 25 insertions, 2 deletions

diff --git a/src/style.css b/src/style.css
index 0ebbed6..ef024f4 100644
--- a/src/style.css
+++ b/src/style.css
@@ -9,6 +9,9 @@
 
 body {
     background-color: white;
+    --ok: rgb(130, 255, 80);
+    --error: rgb(255, 80, 80);
+    --degraded: rgb(255, 152, 68);
 }
 
 main {
@@ -23,10 +26,12 @@ h1 {
     color: black;
     text-align: center;
 }
+
 footer {
     text-align: center;
     margin-bottom: 5em;
 }
+
 a {
     font-weight: bold;
 }
@@ -37,6 +42,7 @@ h2 {
     color: black;
 }
 
+div.summary,
 div.service,
 div.log {
     padding: 1em;
@@ -44,12 +50,25 @@ div.log {
     box-shadow: 0 10px 60px rgba(0, 0, 0, 0.15);
     border-radius: 10px;
 }
+
+div.summary.ok {
+    background-color: var(--ok);
+}
+div.summary.error {
+    background-color: var(--error);
+}
+div.summary.degraded {
+    background-color: var(--degraded);
+}
+
 div.service.ok {
-    border-top: 12px solid rgb(130, 255, 80);
+    border-top: 12px solid var(--ok);
 }
+
 div.service.error {
-    border-top: 12px solid rgb(255, 80, 80);
+    border-top: 12px solid var(--error);
 }
+
 div.service a {
     color: black;
     float: inline-end;
@@ -60,6 +79,7 @@ div.checks {
     width: 100%;
     grid-template-columns: 30% 10% 50% 10%;
 }
+
 div.checks span {
     text-overflow: ellipsis;
     overflow: hidden;
@@ -72,12 +92,15 @@ footer,
 footer a {
     color: rgb(173, 173, 173);
 }
+
 span.status {
     font-weight: bolder;
 }
+
 span.status.ok {
     color: rgb(39, 138, 0);
 }
+
 span.status.error {
     color: rgb(158, 0, 0);
 }