From b979b0f93800c4e2297d0382b09f29ae6f2b1289 Mon Sep 17 00:00:00 2001
From: Joao Figueiredo <joao.figueiredo@jfig.net>
Date: Fri, 23 May 2025 23:10:39 +0100
Subject: [PATCH] better CSS

---
 door-status.css | 49 ++++++++++++++++++++++++++++++++++++-------------
 1 file changed, 36 insertions(+), 13 deletions(-)

diff --git a/door-status.css b/door-status.css
index 5edb1a2..9c7f0b5 100644
--- a/door-status.css
+++ b/door-status.css
@@ -1,15 +1,38 @@
-/* door-status.css */
-.door-status-indicator        { display:inline-flex; align-items:center; font-size:1.1em; line-height:1; }
-.door-status-indicator.open   { color:#28a745; }   /* green  */
-.door-status-indicator.closed { color:#dc3545; }   /* red    */
+/* Door Status Indicator – Button‑style visuals */
 
-/* optional embellishments */
-.door-status-indicator.open::before,
-.door-status-indicator.closed::before {
-    content:"";
-    display:inline-block;
-    width:.6em; height:.6em;
-    border-radius:50%;
-    margin-right:.35em;
-    background:currentColor;
+.door-status-indicator {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35em;
+  font-size: 1em;
+  padding: 0.35em 0.75em;
+  border-radius: 0.6em;
+  font-weight: 600;
+  line-height: 1;
+  text-decoration: none;
+  user-select: none;
+}
+
+/* OPEN → light green background, dark green text */
+.door-status-indicator.open {
+  background: #d4edda;   /* light mint green */
+  color: #155724;        /* dark evergreen */
+  border: 1px solid #c3e6cb;
+}
+
+/* CLOSED → light red background, dark red text */
+.door-status-indicator.closed {
+  background: #f8d7da;   /* blush pink */
+  color: #721c24;        /* maroon */
+  border: 1px solid #f5c6cb;
+}
+
+/* Optional hover focus states for better UX */
+.door-status-indicator.open:hover,
+.door-status-indicator.open:focus {
+  background: #c3e6cb;
+}
+.door-status-indicator.closed:hover,
+.door-status-indicator.closed:focus {
+  background: #f5c6cb;
 }