TheWitness · Oct 7, 2026 · Oct 7, 2026 · Oct 7, 2026 · Oct 7, 2026
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,7 @@
 * feature: Adopt the Cacti plugin table API and relocate schema provisioning into includes/database.php
 * feature: Add a fleet-wide manifest.json with upgrade-time file pruning
 * feature: Consolidate per-theme override stylesheets from themes/ into css/
+* feature: Redesign the status legend as evenly sized, rounded colour chips with solid, theme-appropriate colours across every theme (including Deepness), matching the thold and syslog legends
 * dev: Rename includes/db_functions.php to includes/functions.php and move bundled libraries under includes/
 * dev: Set the Cacti compatibility floor to 1.2.29
 

diff --git a/css/classic.css b/css/classic.css
@@ -44,10 +44,6 @@
 	padding-bottom: 120px;
 }
 
-.monitor_legend {
-	background-color: snow;
-}
-
 .deviceThresholdFull {
 	background-color: rgba(242, 25, 36, 0.4);
 	text-align: center;

diff --git a/css/dark.css b/css/dark.css
@@ -49,10 +49,6 @@
 	padding-bottom: 120px;
 }
 
-.monitor_legend {
-	background-color: #161616;
-}
-
 .deviceThresholdFull {
 	background-color: rgba(242, 25, 36, 0.4);
 	text-align: center;

diff --git a/css/deepness.css b/css/deepness.css
@@ -49,8 +49,9 @@
 	padding-bottom: 120px;
 }
 
-.monitor_legend {
-	background-color: #11161d;
+/* emerald-accented Up chip to harmonise with the Deepness palette */
+.monitorLegend .deviceUpFull {
+	background-color: #197a54;
 }
 
 .deviceThresholdFull {

diff --git a/css/midwinter.css b/css/midwinter.css
@@ -21,14 +21,6 @@
  +-------------------------------------------------------------------------+
 */
 
-.monitor_legend {
-	display:none;
-}
-
-.monitor_legend {
-	background-color: #1D1F21;
-}
-
 .deviceThresholdFull {
 	background-color: rgba(242, 25, 36, 0.4);
 	text-align: center;

diff --git a/css/modern.css b/css/modern.css
@@ -49,10 +49,6 @@
 	padding-bottom: 120px;
 }
 
-.monitor_legend {
-	background-color: snow;
-}
-
 .deviceThresholdFull {
 	background-color: rgba(242, 25, 36, 0.4);
 	text-align: center;

diff --git a/css/monitor.css b/css/monitor.css
@@ -83,25 +83,69 @@
 	display: block;
 }
 
-.monitor_legend {
-	position: fixed;
-	left: 0;
-	bottom: 0;
+/*
+ * Status legend. Rendered as an evenly sized, wrapping flex row (flex: 1 1 0
+ * gives every chip the same width) of rounded chips with spacing between them.
+ * A legend is a colour key, so the chips use their own solid, opaque colours
+ * with white text to stay legible on every theme rather than inheriting the
+ * subtle tile tints. Per-theme tuning lives in each theme's css (see
+ * deepness.css for the emerald-accented variant).
+ */
+.monitorLegend {
 	display: flex;
-	flex-flow: row wrap;
-	margin-left: auto;
-	margin-right: auto;
+	flex-wrap: wrap;
+	gap: 4px;
 	width: 100%;
+	margin-top: 4px;
 }
 
-.monitor_legend_cell {
-	padding: 0px;
-	display: column;
+.monitorLegend .monitorLegendItem {
+	flex: 1 1 0;
+	text-align: center;
 	white-space: nowrap;
-	min-width: 120px;
-	font-size: 11px;
-	flex: 1 14%;
-	font-weight: normal;
+	padding: 4px 6px;
+	border-radius: 3px;
+	color: #ffffff;
+}
+
+.monitorLegend .deviceUpFull {
+	background-color: #2b8235;
+}
+
+.monitorLegend .deviceDownFull {
+	background-color: #a12820;
+}
+
+.monitorLegend .deviceDownMutedFull {
+	background-color: #93302a;
+}
+
+.monitorLegend .deviceRecoveringFull {
+	background-color: #9a6a1a;
+}
+
+.monitorLegend .deviceThresholdFull {
+	background-color: #a85712;
+}
+
+.monitorLegend .deviceThresholdMutedFull {
+	background-color: #6a4a9c;
+}
+
+.monitorLegend .deviceWarningFull {
+	background-color: #7d6f18;
+}
+
+.monitorLegend .deviceAlertFull {
+	background-color: #86407a;
+}
+
+.monitorLegend .deviceUnknownFull {
+	background-color: #5f5f57;
+}
+
+.monitorLegend .deviceUnmonitoredFull {
+	background-color: #3f6a8a;
 }
 
 /* extra small styles */

diff --git a/css/paper-plane.css b/css/paper-plane.css
@@ -53,10 +53,6 @@
 	padding-bottom: 120px;
 }
 
-.monitor_legend {
-	background-color: #1D1F21;
-}
-
 .deviceThresholdFull {
 	background-color: rgba(242, 25, 36, 0.4);
 	text-align: center;

diff --git a/css/paw.css b/css/paw.css
@@ -21,10 +21,6 @@
  +-------------------------------------------------------------------------+
 */
 
-.monitor_legend {
-	background-color: snow;
-}
-
 .deviceThresholdFull {
 	background-color: rgba(242, 25, 36, 0.4);
 	text-align: center;

diff --git a/css/sunrise.css b/css/sunrise.css
@@ -21,17 +21,6 @@
  +-------------------------------------------------------------------------+
 */
 
-.monitor_legend {
-	position: fixed;
-	left: 0;
-	bottom: 24px;
-	display: flex;
-	flex-flow: row wrap;
-	margin-left: auto;
-	margin-right: auto;
-	width: 100%;
-}
-
 .monitorFooter {
 	display: none;
 }
@@ -56,10 +45,6 @@
 	color: white;
 }
 
-.monitor_legend {
-	background-color: #1D1F21;
-}
-
 .deviceThresholdFull {
 	background-color: rgba(242, 25, 36, 0.4);
 	text-align: center;

diff --git a/includes/controller.php b/includes/controller.php
@@ -122,10 +122,10 @@ function drawPage(): void {
 	html_end_box();
 
 	if (read_user_setting('monitor_legend', read_config_option('monitor_legend'))) {
-		print "<div class='center monitor_legend'>";
+		print "<div class='monitorLegend'>";
 
 		foreach ($iclasses as $index => $class) {
-			print "<div class='monitor_legend_cell center $class" . "Full'>" . $icolorsdisplay[$index] . '</div>';
+			print "<div class='monitorLegendItem $class" . "Full'>" . $icolorsdisplay[$index] . '</div>';
 		}
 
 		print '</div>';