From ddf86d0a106f723e60665e86650f5be451c6f2d8 Mon Sep 17 00:00:00 2001
From: Ashwin Chandran <ashwin.chandran@heigit.org>
Date: Mon, 10 Aug 2026 17:53:38 +0200
Subject: [PATCH] Fix dark mode styles on the status page

---
 resources/css/cachet.css | 38 +++++++++++++++++++++-----------------
 1 file changed, 21 insertions(+), 17 deletions(-)

diff --git a/resources/css/cachet.css b/resources/css/cachet.css
index 2cff5fcd..64e83437 100644
--- a/resources/css/cachet.css
+++ b/resources/css/cachet.css
@@ -148,25 +148,29 @@
     }
   }
 
-  .dark .status-header {
-    background: rgb(24 24 27 / 66%);
-  }
+  @media (prefers-color-scheme: dark) {
+    .status-header {
+      border-color: rgb(255 255 255 / 14%);
+      background: rgb(24 24 27 / 66%);
+    }
 
-  .dark .status-overview {
-    border-color: rgb(255 255 255 / 14%);
-    background: rgb(24 24 27 / 76%);
-  }
+    .status-overview {
+      border-color: rgb(255 255 255 / 14%);
+      background: rgb(24 24 27 / 76%);
+      box-shadow: 0 12px 28px -24px rgb(0 0 0 / 60%);
+    }
 
-  .dark .status-overview__masthead,
-  .dark .status-summary {
-    border-color: rgb(255 255 255 / 14%);
-  }
+    .status-overview__masthead,
+    .status-summary {
+      border-color: rgb(255 255 255 / 14%);
+    }
 
-  .dark .status-summary {
-    background: linear-gradient(
-      115deg,
-      color-mix(in srgb, var(--color-400) 20%, rgb(24 24 27)),
-      color-mix(in srgb, var(--color-400) 34%, rgb(24 24 27))
-    );
+    .status-summary {
+      background: linear-gradient(
+        115deg,
+        color-mix(in srgb, var(--color-400) 20%, rgb(24 24 27)),
+        color-mix(in srgb, var(--color-400) 34%, rgb(24 24 27))
+      );
+    }
   }
 }