diff --git a/CHANGELOG.md b/CHANGELOG.md index bd799cd..aca2233 100644 --- 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 index 723c949..2d6abe9 100644 --- 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 index 4eef834..ad186f1 100644 --- 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 index 53b2e33..bc84148 100644 --- 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 index 169400f..9cdea47 100644 --- 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 index 7ba1fe3..86578b1 100644 --- 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 index 89d1f9f..5b8586d 100644 --- 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 index f1f93f0..48843f9 100644 --- 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 index 2f9309c..82574bb 100644 --- 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 index b6590c0..78b499c 100644 --- 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 index 7441fcc..fe8617f 100644 --- 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 "
"; + print "
"; foreach ($iclasses as $index => $class) { - print "
" . $icolorsdisplay[$index] . '
'; + print "
" . $icolorsdisplay[$index] . '
'; } print '
';