From 76c7823583fa2479ef96dd97f91e17a648c74579 Mon Sep 17 00:00:00 2001
From: trafficlunar <hello@trafficlunar.net>
Date: Mon, 15 Dec 2025 17:13:05 +0000
Subject: [PATCH] fix: improve unknown status indicator

---
 www/index.html               | 29 +++++++++++++++++++----------
 www/themes/color-dark.css    |  4 ++--
 www/themes/color.css         |  4 ++--
 www/themes/ctp-frappe.css    |  4 ++--
 www/themes/ctp-latte.css     |  4 ++--
 www/themes/ctp-macchiato.css |  4 ++--
 www/themes/ctp-mocha.css     |  4 ++--
 www/themes/monochrome.css    | 15 ++++++++-------
 8 files changed, 39 insertions(+), 29 deletions(-)

diff --git a/www/index.html b/www/index.html
index 9621402..6b88f81 100644
--- a/www/index.html
+++ b/www/index.html
@@ -163,7 +163,7 @@
 			}
 
 			.status-bar {
-				background-color: black;
+				background-color: transparent;
 				border: 1px solid black;
 				width: calc(100% - 0.188rem);
 				height: 100%;
@@ -200,22 +200,31 @@
 				z-index: 10;
 			}
 
+			.status-bar.Online {
+				background-color: black;
+			}
+
 			.status-bar.Unknown {
-				background-color: transparent;
-				background: radial-gradient(circle at center, rgb(235, 235, 235) 3px, transparent 3px);
 				border: 0;
 			}
 
+			.status-bar.Unknown::before {
+				content: "";
+				width: 6px;
+				height: 6px;
+				border-radius: 100%;
+				background: rgb(235, 235, 235);
+				position: absolute;
+				inset: 0;
+				margin: auto;
+			}
+
 			.status-bar.Degraded {
 				background-color: white;
 				background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 50%, black 50%, black 75%, transparent 75%, transparent);
 				background-size: 8px 8px;
 			}
 
-			.status-bar.Offline {
-				background-color: white;
-			}
-
 			.status-bar.Offline::before {
 				content: "✕";
 				position: absolute;
@@ -449,8 +458,8 @@
 			<div class="combobox" style="position: absolute; right: 2rem; top: 2rem">
 				<button class="combobox-trigger">
 					<span
-						>{{ if eq .Theme "colored-dark" }} colored dark {{ else if eq .Theme "ctp-latte" }} ctp latte {{ else if eq .Theme "ctp-frappe" }} ctp
-						frappé {{ else if eq .Theme "ctp-macchiato" }} ctp macchiato {{ else if eq .Theme "ctp-mocha" }} ctp mocha {{ else }} {{ .Theme }} {{ end
+						>{{ if eq .Theme "color-dark" }} color dark {{ else if eq .Theme "ctp-latte" }} ctp latte {{ else if eq .Theme "ctp-frappe" }} ctp frappé
+						{{ else if eq .Theme "ctp-macchiato" }} ctp macchiato {{ else if eq .Theme "ctp-mocha" }} ctp mocha {{ else }} {{ .Theme }} {{ end
 						}}</span
 					>
 					<!-- arrow icon -->
@@ -465,7 +474,7 @@
 					<a href="/?theme=monochrome&view={{ .View }}" class='combobox-option {{ if eq .Theme "monochrome" }}selected{{ end }}'>monochrome</a>
 					<a href="/?theme=inverted&view={{ .View }}" class='combobox-option {{ if eq .Theme "inverted" }}selected{{ end }}'>inverted</a>
 					<a href="/?theme=color&view={{ .View }}" class='combobox-option {{ if eq .Theme "color" }}selected{{ end }}'>color</a>
-					<a href="/?theme=colored-dark&view={{ .View }}" class='combobox-option {{ if eq .Theme "colored-dark" }}selected{{ end }}'>colored dark</a>
+					<a href="/?theme=color-dark&view={{ .View }}" class='combobox-option {{ if eq .Theme "color-dark" }}selected{{ end }}'>color dark</a>
 					<a href="/?theme=ctp-latte&view={{ .View }}" class='combobox-option {{ if eq .Theme "ctp-latte" }}selected{{ end }}'>ctp latte</a>
 					<a href="/?theme=ctp-frappe&view={{ .View }}" class='combobox-option {{ if eq .Theme "ctp-frappe" }}selected{{ end }}'>ctp frappé</a>
 					<a href="/?theme=ctp-macchiato&view={{ .View }}" class='combobox-option {{ if eq .Theme "ctp-macchiato" }}selected{{ end }}'
diff --git a/www/themes/color-dark.css b/www/themes/color-dark.css
index a8dbcd1..0c16e99 100644
--- a/www/themes/color-dark.css
+++ b/www/themes/color-dark.css
@@ -60,8 +60,8 @@ hr {
 	border-color: #059669;
 }
 
-.status-bar.Unknown {
-	background: radial-gradient(circle at center, #475569 3px, transparent 3px);
+.status-bar.Unknown::before {
+	background-color: #475569;
 }
 
 .status-bar.Degraded {
diff --git a/www/themes/color.css b/www/themes/color.css
index e16ad46..f6392e1 100644
--- a/www/themes/color.css
+++ b/www/themes/color.css
@@ -85,8 +85,8 @@ hr {
 	color: white;
 }
 
-.status-bar.Unknown {
-	background: radial-gradient(circle at center, rgba(0, 0, 0, 0.1) 3px, transparent 3px);
+.status-bar.Unknown::before {
+	background-color: rgba(0, 0, 0, 0.1);
 }
 
 .bars-footer {
diff --git a/www/themes/ctp-frappe.css b/www/themes/ctp-frappe.css
index e236372..2c86b6c 100644
--- a/www/themes/ctp-frappe.css
+++ b/www/themes/ctp-frappe.css
@@ -64,8 +64,8 @@ hr {
 	background-color: #81c563;
 }
 
-.status-bar.Unknown {
-	background: radial-gradient(circle at center, #414559 3px, transparent 3px); /* Surface0 */
+.status-bar.Unknown::before {
+	background-color: #414559; /* Surface0 */
 }
 
 .status-bar.Degraded {
diff --git a/www/themes/ctp-latte.css b/www/themes/ctp-latte.css
index e110f53..6da8c3b 100644
--- a/www/themes/ctp-latte.css
+++ b/www/themes/ctp-latte.css
@@ -64,8 +64,8 @@ hr {
 	background-color: #357a22;
 }
 
-.status-bar.Unknown {
-	background: radial-gradient(circle at center, #ccd0da 3px, transparent 3px); /* Surface0 */
+.status-bar.Unknown::before {
+	background-color: #ccd0da; /* Surface0 */
 }
 
 .status-bar.Degraded {
diff --git a/www/themes/ctp-macchiato.css b/www/themes/ctp-macchiato.css
index 7681ebb..b44389d 100644
--- a/www/themes/ctp-macchiato.css
+++ b/www/themes/ctp-macchiato.css
@@ -64,8 +64,8 @@ hr {
 	background-color: #8bd074;
 }
 
-.status-bar.Unknown {
-	background: radial-gradient(circle at center, #363a4f 3px, transparent 3px); /* Surface0 */
+.status-bar.Unknown::before {
+	background-color: #363a4f; /* Surface0 */
 }
 
 .status-bar.Degraded {
diff --git a/www/themes/ctp-mocha.css b/www/themes/ctp-mocha.css
index e2e6fe0..9afc487 100644
--- a/www/themes/ctp-mocha.css
+++ b/www/themes/ctp-mocha.css
@@ -64,8 +64,8 @@ hr {
 	background-color: #8ad882;
 }
 
-.status-bar.Unknown {
-	background: radial-gradient(circle at center, #313244 3px, transparent 3px); /* Surface0 */
+.status-bar.Unknown::before {
+	background-color: #313244; /* Surface0 */
 }
 
 .status-bar.Degraded {
diff --git a/www/themes/monochrome.css b/www/themes/monochrome.css
index ee7cb70..069f697 100644
--- a/www/themes/monochrome.css
+++ b/www/themes/monochrome.css
@@ -43,7 +43,6 @@ hr {
 }
 
 .status-bar {
-	background-color: black;
 	border: 1px solid black;
 }
 
@@ -57,15 +56,17 @@ hr {
 	background-color: rgba(0, 0, 0, 0.7);
 }
 
-.status-bar.Unknown {
-	background-color: transparent;
-	background: radial-gradient(circle at center, rgb(235, 235, 235) 3px, transparent 3px);
+.status-bar.Online {
+	background-color: black;
+}
+
+.status-bar.Unknown::before {
+	background-color: rgb(235, 235, 235);
 }
 
 .status-bar.Degraded {
-	background-image: linear-gradient(to bottom, transparent 30%, white 30%), linear-gradient(to right, transparent 40%, white 40%);
-	background-size: 6px 7px;
-	background-position: 3px 4px;
+	background-color: white;
+	background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 50%, black 50%, black 75%, transparent 75%, transparent);
 }
 
 .status-bar.Offline {