From a77cd520941ec34a0aee193c3f671a5cf07184bc Mon Sep 17 00:00:00 2001 From: TheWitness Date: Wed, 14 Oct 2026 09:22:01 -0400 Subject: [PATCH 1/4] Add per-theme CSS for all remaining Cacti themes MacTrack shipped dedicated stylesheets for dark, deepness, modern, paper-plane, paw and sunrise, but the Cacti develop theme set also includes cacti, carrot, hollyberry, raspberry (light) and midwinter (dark). For those themes mactrack_page_head() fell back to the generic mactrack.css, so the Issues/dot1x status pills and the status legend were not tuned to the theme and could be hard to read. This adds a dedicated, theme-appropriate stylesheet for each of the remaining themes: - cacti, carrot, hollyberry, raspberry: light-theme variant (based on modern.css) with the MacTrack action-icon accents retinted to each theme's signature colour. - midwinter: dark-theme variant (based on deepness.css) with cool blue action-icon accents. The semantic status colours for the pills and legend (green up, red errors/down, etc.) stay consistent across themes for legibility; only the theme-branded chrome changes per theme. --- css/cacti.css | 248 +++++++++++++++++++++++++++++++++++++++++++++ css/carrot.css | 248 +++++++++++++++++++++++++++++++++++++++++++++ css/hollyberry.css | 248 +++++++++++++++++++++++++++++++++++++++++++++ css/midwinter.css | 241 +++++++++++++++++++++++++++++++++++++++++++ css/raspberry.css | 248 +++++++++++++++++++++++++++++++++++++++++++++ 5 files changed, 1233 insertions(+) create mode 100644 css/cacti.css create mode 100644 css/carrot.css create mode 100644 css/hollyberry.css create mode 100644 css/midwinter.css create mode 100644 css/raspberry.css diff --git a/css/cacti.css b/css/cacti.css new file mode 100644 index 00000000..15c86b64 --- /dev/null +++ b/css/cacti.css @@ -0,0 +1,248 @@ +/* + +-------------------------------------------------------------------------+ + | Copyright (C) 2004-2025 The Cacti Group | + | | + | This program is free software; you can redistribute it and/or | + | modify it under the terms of the GNU General Public License | + | as published by the Free Software Foundation; either version 2 | + | of the License, or (at your option) any later version. | + | | + | This program is distributed in the hope that it will be useful, | + | but WITHOUT ANY WARRANTY; without even the implied warranty of | + | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the | + | GNU General Public License for more details. | + +-------------------------------------------------------------------------+ + | Cacti: The Complete RRDtool-based Graphing Solution | + +-------------------------------------------------------------------------+ + | This code is designed, written, and maintained by the Cacti Group. See | + | about.php and/or the AUTHORS file for specific developer information. | + +-------------------------------------------------------------------------+ + | http://www.cacti.net/ | + +-------------------------------------------------------------------------+ +*/ + +.mtChart { + color: #CC6633 !important; +} + +.mtChartDisabled { + color: #9999CC !important; +} + +.mtEdit { + color: #333333 !important; +} + +.mtSync { + color: #3ad65f !important; +} + +.mtRanges { + color: #007700 !important; +} + +.mtInterfaces { + color: #993300 !important; +} + +.mtNetwork { + color: #660033 !important; +} + +.mtMacs { + color: #FF9999 !important; +} + +.mtServer { + color: #2da84c !important; +} + +.mtPorts { + color: #993300 !important; +} + +.mtIps { + color: #3399FF !important; +} + +/* + * Status legend chips: solid, opaque colours with white text (consistent with + * the Thold/Monitor/Syslog legends), sized to the longest label via + * --mactrack-chip-min so they stay equal width as the legend wraps. The plain + * row-highlight classes below still tint the list rows. + */ +.mactrackLegend { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(var(--mactrack-chip-min, 8ch), 1fr)); + gap: 4px; + width: 100%; +} + +/* Legend footer: keeps the legend centered beneath the list in normal + document flow, so it never overlays the final rows or action controls. */ +.mactrackLegendFooter { + display: table; + width: 100%; + margin: 8px auto 0; +} + +.mactrackLegend .mactrackLegendItem { + text-align: center; + white-space: nowrap; + padding: 4px 6px; + border-radius: 3px; + color: #ffffff; +} + +.mactrackLegend .int_up { background-color: #2b8435; } +.mactrackLegend .int_up_wo_alias { background-color: #a85712; } +.mactrackLegend .int_errors { background-color: #93302a; } +.mactrackLegend .int_discards { background-color: #9a6a1a; } +.mactrackLegend .int_no_graph { background-color: #5f5f57; } +.mactrackLegend .int_down { background-color: #a12820; } + +.mactrackLegend .authn_success { background-color: #2b8435; } +.mactrackLegend .auth_success { background-color: #3f7a4a; } +.mactrackLegend .authn_failed { background-color: #a12820; } +.mactrackLegend .auth_failed { background-color: #a85712; } +.mactrackLegend .running { background-color: #93302a; } +.mactrackLegend .idle { background-color: #9a6a1a; } + +.int_up { + background-color: rgba(148, 179, 107, 0.8); + color: #eeeeee; +} + +.int_up_wo_alias { + background-color: rgba(255, 122, 48, 0.8); + color: #eeeeee; +} + +.int_errors { + background-color: rgba(251, 74, 20, 0.8); + color: #eeeeee; +} + +.int_discards { + background-color: rgba(250, 253, 158, 0.8); + color: #eeeeee; +} + +.int_no_graph { + background-color: rgba(205, 207, 196, 0.8); + color: #eeeeee; +} + +.int_no_device { + background-color: rgba(250, 253, 158, 0.8); + color: #eeeeee; +} + +.int_changed { + background-color: rgba(242, 25, 36, 0.8); + color: #eeeeee; +} + +.int_down { + background-color: rgba(242, 23, 33, 0.8); + color: #eeeeee; +} + +.dot1x_authn_success { + background-color: rgba(148, 179, 107, 0.8); + color: #eeeeee; +} + +.dot1x_auth_success { + background-color: rgba(148, 179, 107, 0.8); + color: #eeeeee; +} + +.dot1x_authn_failed { + background-color: rgba(242, 23, 33, 0.8); + color: #eeeeee; +} + +.dot1x_auth_failed { + background-color: rgba(255, 122, 48, 0.8); + color: #eeeeee; +} + +.dot1x_running { + background-color: rgba(251, 74, 20, 0.8); + color: #eeeeee; +} + +.dot1x_idle { + background-color: rgba(250, 253, 158, 0.8); + color: #eeeeee; +} + +.dot1x_auth_no_method { + background-color: rgba(205, 207, 196, 0.8); + color: #000000; +} + +/* + * Status pills for the interfaces "Issues" column and the 802.1x status + * column. Outlined when inactive and solid when active; each pill takes + * its colour from the --pill custom property defined below so it matches + * this theme's status legend chips. + */ +.mactrackPills { + display: flex; + flex-wrap: wrap; + gap: 3px; + align-items: center; +} + +.mactrackPill { + appearance: none; + -webkit-appearance: none; + display: inline-block; + margin: 0; + padding: 1px 7px; + border-radius: 10px; + font: inherit; + font-size: 0.85em; + line-height: 1.5; + white-space: nowrap; + cursor: pointer; + user-select: none; + color: inherit; + background-color: transparent; + border: 1px solid var(--pill, #b5b5b5); +} + +.mactrackPill:hover { + background-color: var(--pill, #666666); + color: #ffffff; +} + +.mactrackPill:focus-visible { + outline: 2px solid var(--pill, #666666); + outline-offset: 1px; +} + +.mactrackPillActive { + color: #ffffff; + background-color: var(--pill, #666666); + border-color: var(--pill, #666666); +} + +.mactrackPill.int_up { --pill: #2b8435; } +.mactrackPill.int_up_wo_alias { --pill: #a85712; } +.mactrackPill.int_errors { --pill: #93302a; } +.mactrackPill.int_discards { --pill: #9a6a1a; } +.mactrackPill.int_no_graph { --pill: #5f5f57; } +.mactrackPill.int_down { --pill: #a12820; } + +.mactrackPill.dot1x_authn_success { --pill: #2b8435; } +.mactrackPill.dot1x_auth_success { --pill: #3f7a4a; } +.mactrackPill.dot1x_authn_failed { --pill: #a12820; } +.mactrackPill.dot1x_auth_failed { --pill: #a85712; } +.mactrackPill.dot1x_running { --pill: #93302a; } +.mactrackPill.dot1x_idle { --pill: #9a6a1a; } +.mactrackPill.dot1x_auth_no_method { --pill: #5f5f57; } +.mactrackPill.mac_authorized { --pill: #2b8435; } +.mactrackPill.mac_unauthorized { --pill: #a12820; } diff --git a/css/carrot.css b/css/carrot.css new file mode 100644 index 00000000..86abaed4 --- /dev/null +++ b/css/carrot.css @@ -0,0 +1,248 @@ +/* + +-------------------------------------------------------------------------+ + | Copyright (C) 2004-2025 The Cacti Group | + | | + | This program is free software; you can redistribute it and/or | + | modify it under the terms of the GNU General Public License | + | as published by the Free Software Foundation; either version 2 | + | of the License, or (at your option) any later version. | + | | + | This program is distributed in the hope that it will be useful, | + | but WITHOUT ANY WARRANTY; without even the implied warranty of | + | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the | + | GNU General Public License for more details. | + +-------------------------------------------------------------------------+ + | Cacti: The Complete RRDtool-based Graphing Solution | + +-------------------------------------------------------------------------+ + | This code is designed, written, and maintained by the Cacti Group. See | + | about.php and/or the AUTHORS file for specific developer information. | + +-------------------------------------------------------------------------+ + | http://www.cacti.net/ | + +-------------------------------------------------------------------------+ +*/ + +.mtChart { + color: #CC6633 !important; +} + +.mtChartDisabled { + color: #9999CC !important; +} + +.mtEdit { + color: #333333 !important; +} + +.mtSync { + color: #ffb347 !important; +} + +.mtRanges { + color: #e6593a !important; +} + +.mtInterfaces { + color: #993300 !important; +} + +.mtNetwork { + color: #660033 !important; +} + +.mtMacs { + color: #FF9999 !important; +} + +.mtServer { + color: #ff9d00 !important; +} + +.mtPorts { + color: #993300 !important; +} + +.mtIps { + color: #3399FF !important; +} + +/* + * Status legend chips: solid, opaque colours with white text (consistent with + * the Thold/Monitor/Syslog legends), sized to the longest label via + * --mactrack-chip-min so they stay equal width as the legend wraps. The plain + * row-highlight classes below still tint the list rows. + */ +.mactrackLegend { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(var(--mactrack-chip-min, 8ch), 1fr)); + gap: 4px; + width: 100%; +} + +/* Legend footer: keeps the legend centered beneath the list in normal + document flow, so it never overlays the final rows or action controls. */ +.mactrackLegendFooter { + display: table; + width: 100%; + margin: 8px auto 0; +} + +.mactrackLegend .mactrackLegendItem { + text-align: center; + white-space: nowrap; + padding: 4px 6px; + border-radius: 3px; + color: #ffffff; +} + +.mactrackLegend .int_up { background-color: #2b8435; } +.mactrackLegend .int_up_wo_alias { background-color: #a85712; } +.mactrackLegend .int_errors { background-color: #93302a; } +.mactrackLegend .int_discards { background-color: #9a6a1a; } +.mactrackLegend .int_no_graph { background-color: #5f5f57; } +.mactrackLegend .int_down { background-color: #a12820; } + +.mactrackLegend .authn_success { background-color: #2b8435; } +.mactrackLegend .auth_success { background-color: #3f7a4a; } +.mactrackLegend .authn_failed { background-color: #a12820; } +.mactrackLegend .auth_failed { background-color: #a85712; } +.mactrackLegend .running { background-color: #93302a; } +.mactrackLegend .idle { background-color: #9a6a1a; } + +.int_up { + background-color: rgba(148, 179, 107, 0.8); + color: #eeeeee; +} + +.int_up_wo_alias { + background-color: rgba(255, 122, 48, 0.8); + color: #eeeeee; +} + +.int_errors { + background-color: rgba(251, 74, 20, 0.8); + color: #eeeeee; +} + +.int_discards { + background-color: rgba(250, 253, 158, 0.8); + color: #eeeeee; +} + +.int_no_graph { + background-color: rgba(205, 207, 196, 0.8); + color: #eeeeee; +} + +.int_no_device { + background-color: rgba(250, 253, 158, 0.8); + color: #eeeeee; +} + +.int_changed { + background-color: rgba(242, 25, 36, 0.8); + color: #eeeeee; +} + +.int_down { + background-color: rgba(242, 23, 33, 0.8); + color: #eeeeee; +} + +.dot1x_authn_success { + background-color: rgba(148, 179, 107, 0.8); + color: #eeeeee; +} + +.dot1x_auth_success { + background-color: rgba(148, 179, 107, 0.8); + color: #eeeeee; +} + +.dot1x_authn_failed { + background-color: rgba(242, 23, 33, 0.8); + color: #eeeeee; +} + +.dot1x_auth_failed { + background-color: rgba(255, 122, 48, 0.8); + color: #eeeeee; +} + +.dot1x_running { + background-color: rgba(251, 74, 20, 0.8); + color: #eeeeee; +} + +.dot1x_idle { + background-color: rgba(250, 253, 158, 0.8); + color: #eeeeee; +} + +.dot1x_auth_no_method { + background-color: rgba(205, 207, 196, 0.8); + color: #000000; +} + +/* + * Status pills for the interfaces "Issues" column and the 802.1x status + * column. Outlined when inactive and solid when active; each pill takes + * its colour from the --pill custom property defined below so it matches + * this theme's status legend chips. + */ +.mactrackPills { + display: flex; + flex-wrap: wrap; + gap: 3px; + align-items: center; +} + +.mactrackPill { + appearance: none; + -webkit-appearance: none; + display: inline-block; + margin: 0; + padding: 1px 7px; + border-radius: 10px; + font: inherit; + font-size: 0.85em; + line-height: 1.5; + white-space: nowrap; + cursor: pointer; + user-select: none; + color: inherit; + background-color: transparent; + border: 1px solid var(--pill, #b5b5b5); +} + +.mactrackPill:hover { + background-color: var(--pill, #666666); + color: #ffffff; +} + +.mactrackPill:focus-visible { + outline: 2px solid var(--pill, #666666); + outline-offset: 1px; +} + +.mactrackPillActive { + color: #ffffff; + background-color: var(--pill, #666666); + border-color: var(--pill, #666666); +} + +.mactrackPill.int_up { --pill: #2b8435; } +.mactrackPill.int_up_wo_alias { --pill: #a85712; } +.mactrackPill.int_errors { --pill: #93302a; } +.mactrackPill.int_discards { --pill: #9a6a1a; } +.mactrackPill.int_no_graph { --pill: #5f5f57; } +.mactrackPill.int_down { --pill: #a12820; } + +.mactrackPill.dot1x_authn_success { --pill: #2b8435; } +.mactrackPill.dot1x_auth_success { --pill: #3f7a4a; } +.mactrackPill.dot1x_authn_failed { --pill: #a12820; } +.mactrackPill.dot1x_auth_failed { --pill: #a85712; } +.mactrackPill.dot1x_running { --pill: #93302a; } +.mactrackPill.dot1x_idle { --pill: #9a6a1a; } +.mactrackPill.dot1x_auth_no_method { --pill: #5f5f57; } +.mactrackPill.mac_authorized { --pill: #2b8435; } +.mactrackPill.mac_unauthorized { --pill: #a12820; } diff --git a/css/hollyberry.css b/css/hollyberry.css new file mode 100644 index 00000000..f7ac8f91 --- /dev/null +++ b/css/hollyberry.css @@ -0,0 +1,248 @@ +/* + +-------------------------------------------------------------------------+ + | Copyright (C) 2004-2025 The Cacti Group | + | | + | This program is free software; you can redistribute it and/or | + | modify it under the terms of the GNU General Public License | + | as published by the Free Software Foundation; either version 2 | + | of the License, or (at your option) any later version. | + | | + | This program is distributed in the hope that it will be useful, | + | but WITHOUT ANY WARRANTY; without even the implied warranty of | + | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the | + | GNU General Public License for more details. | + +-------------------------------------------------------------------------+ + | Cacti: The Complete RRDtool-based Graphing Solution | + +-------------------------------------------------------------------------+ + | This code is designed, written, and maintained by the Cacti Group. See | + | about.php and/or the AUTHORS file for specific developer information. | + +-------------------------------------------------------------------------+ + | http://www.cacti.net/ | + +-------------------------------------------------------------------------+ +*/ + +.mtChart { + color: #CC6633 !important; +} + +.mtChartDisabled { + color: #9999CC !important; +} + +.mtEdit { + color: #333333 !important; +} + +.mtSync { + color: #00a10b !important; +} + +.mtRanges { + color: #c8102e !important; +} + +.mtInterfaces { + color: #993300 !important; +} + +.mtNetwork { + color: #660033 !important; +} + +.mtMacs { + color: #FF9999 !important; +} + +.mtServer { + color: #00a10b !important; +} + +.mtPorts { + color: #993300 !important; +} + +.mtIps { + color: #3399FF !important; +} + +/* + * Status legend chips: solid, opaque colours with white text (consistent with + * the Thold/Monitor/Syslog legends), sized to the longest label via + * --mactrack-chip-min so they stay equal width as the legend wraps. The plain + * row-highlight classes below still tint the list rows. + */ +.mactrackLegend { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(var(--mactrack-chip-min, 8ch), 1fr)); + gap: 4px; + width: 100%; +} + +/* Legend footer: keeps the legend centered beneath the list in normal + document flow, so it never overlays the final rows or action controls. */ +.mactrackLegendFooter { + display: table; + width: 100%; + margin: 8px auto 0; +} + +.mactrackLegend .mactrackLegendItem { + text-align: center; + white-space: nowrap; + padding: 4px 6px; + border-radius: 3px; + color: #ffffff; +} + +.mactrackLegend .int_up { background-color: #2b8435; } +.mactrackLegend .int_up_wo_alias { background-color: #a85712; } +.mactrackLegend .int_errors { background-color: #93302a; } +.mactrackLegend .int_discards { background-color: #9a6a1a; } +.mactrackLegend .int_no_graph { background-color: #5f5f57; } +.mactrackLegend .int_down { background-color: #a12820; } + +.mactrackLegend .authn_success { background-color: #2b8435; } +.mactrackLegend .auth_success { background-color: #3f7a4a; } +.mactrackLegend .authn_failed { background-color: #a12820; } +.mactrackLegend .auth_failed { background-color: #a85712; } +.mactrackLegend .running { background-color: #93302a; } +.mactrackLegend .idle { background-color: #9a6a1a; } + +.int_up { + background-color: rgba(148, 179, 107, 0.8); + color: #eeeeee; +} + +.int_up_wo_alias { + background-color: rgba(255, 122, 48, 0.8); + color: #eeeeee; +} + +.int_errors { + background-color: rgba(251, 74, 20, 0.8); + color: #eeeeee; +} + +.int_discards { + background-color: rgba(250, 253, 158, 0.8); + color: #eeeeee; +} + +.int_no_graph { + background-color: rgba(205, 207, 196, 0.8); + color: #eeeeee; +} + +.int_no_device { + background-color: rgba(250, 253, 158, 0.8); + color: #eeeeee; +} + +.int_changed { + background-color: rgba(242, 25, 36, 0.8); + color: #eeeeee; +} + +.int_down { + background-color: rgba(242, 23, 33, 0.8); + color: #eeeeee; +} + +.dot1x_authn_success { + background-color: rgba(148, 179, 107, 0.8); + color: #eeeeee; +} + +.dot1x_auth_success { + background-color: rgba(148, 179, 107, 0.8); + color: #eeeeee; +} + +.dot1x_authn_failed { + background-color: rgba(242, 23, 33, 0.8); + color: #eeeeee; +} + +.dot1x_auth_failed { + background-color: rgba(255, 122, 48, 0.8); + color: #eeeeee; +} + +.dot1x_running { + background-color: rgba(251, 74, 20, 0.8); + color: #eeeeee; +} + +.dot1x_idle { + background-color: rgba(250, 253, 158, 0.8); + color: #eeeeee; +} + +.dot1x_auth_no_method { + background-color: rgba(205, 207, 196, 0.8); + color: #000000; +} + +/* + * Status pills for the interfaces "Issues" column and the 802.1x status + * column. Outlined when inactive and solid when active; each pill takes + * its colour from the --pill custom property defined below so it matches + * this theme's status legend chips. + */ +.mactrackPills { + display: flex; + flex-wrap: wrap; + gap: 3px; + align-items: center; +} + +.mactrackPill { + appearance: none; + -webkit-appearance: none; + display: inline-block; + margin: 0; + padding: 1px 7px; + border-radius: 10px; + font: inherit; + font-size: 0.85em; + line-height: 1.5; + white-space: nowrap; + cursor: pointer; + user-select: none; + color: inherit; + background-color: transparent; + border: 1px solid var(--pill, #b5b5b5); +} + +.mactrackPill:hover { + background-color: var(--pill, #666666); + color: #ffffff; +} + +.mactrackPill:focus-visible { + outline: 2px solid var(--pill, #666666); + outline-offset: 1px; +} + +.mactrackPillActive { + color: #ffffff; + background-color: var(--pill, #666666); + border-color: var(--pill, #666666); +} + +.mactrackPill.int_up { --pill: #2b8435; } +.mactrackPill.int_up_wo_alias { --pill: #a85712; } +.mactrackPill.int_errors { --pill: #93302a; } +.mactrackPill.int_discards { --pill: #9a6a1a; } +.mactrackPill.int_no_graph { --pill: #5f5f57; } +.mactrackPill.int_down { --pill: #a12820; } + +.mactrackPill.dot1x_authn_success { --pill: #2b8435; } +.mactrackPill.dot1x_auth_success { --pill: #3f7a4a; } +.mactrackPill.dot1x_authn_failed { --pill: #a12820; } +.mactrackPill.dot1x_auth_failed { --pill: #a85712; } +.mactrackPill.dot1x_running { --pill: #93302a; } +.mactrackPill.dot1x_idle { --pill: #9a6a1a; } +.mactrackPill.dot1x_auth_no_method { --pill: #5f5f57; } +.mactrackPill.mac_authorized { --pill: #2b8435; } +.mactrackPill.mac_unauthorized { --pill: #a12820; } diff --git a/css/midwinter.css b/css/midwinter.css new file mode 100644 index 00000000..f9a8622c --- /dev/null +++ b/css/midwinter.css @@ -0,0 +1,241 @@ +/* + +-------------------------------------------------------------------------+ + | Copyright (C) 2004-2025 The Cacti Group | + | | + | This program is free software; you can redistribute it and/or | + | modify it under the terms of the GNU General Public License | + | as published by the Free Software Foundation; either version 2 | + | of the License, or (at your option) any later version. | + | | + | This program is distributed in the hope that it will be useful, | + | but WITHOUT ANY WARRANTY; without even the implied warranty of | + | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the | + | GNU General Public License for more details. | + +-------------------------------------------------------------------------+ + | Cacti: The Complete RRDtool-based Graphing Solution | + +-------------------------------------------------------------------------+ + | This code is designed, written, and maintained by the Cacti Group. See | + | about.php and/or the AUTHORS file for specific developer information. | + +-------------------------------------------------------------------------+ + | http://www.cacti.net/ | + +-------------------------------------------------------------------------+ +*/ + +.mtChart { + color: #CC6633 !important; +} + +.mtChartDisabled { + color: #9999CC !important; +} + +.mtEdit { + color: #CCCCCC !important; +} + +.mtSync { + color: #4fc3f7 !important; +} + +.mtRanges { + color: #4a90d9 !important; +} + +.mtInterfaces { + color: #993300 !important; +} + +.mtNetwork { + color: #660033 !important; +} + +.mtMacs { + color: #FF9999 !important; +} + +.mtServer { + color: #5a9bd4 !important; +} + +.mtPorts { + color: #993300 !important; +} + +.mtIps { + color: #3399FF !important; +} + +/* + * Status legend chips: solid, opaque colours with white text (consistent with + * the Thold/Monitor/Syslog legends, with a cool emerald for "up/success"), + * sized to the longest label via --mactrack-chip-min so they stay equal width + * as the legend wraps. The plain row-highlight classes below still tint rows. + */ +.mactrackLegend { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(var(--mactrack-chip-min, 8ch), 1fr)); + gap: 4px; + width: 100%; +} + +/* Legend footer: keeps the legend centered beneath the list in normal + document flow, so it never overlays the final rows or action controls. */ +.mactrackLegendFooter { + display: table; + width: 100%; + margin: 8px auto 0; +} + +.mactrackLegend .mactrackLegendItem { + text-align: center; + white-space: nowrap; + padding: 4px 6px; + border-radius: 3px; + color: #ffffff; +} + +.mactrackLegend .int_up { background-color: #197a54; } +.mactrackLegend .int_up_wo_alias { background-color: #a85712; } +.mactrackLegend .int_errors { background-color: #93302a; } +.mactrackLegend .int_discards { background-color: #9a6a1a; } +.mactrackLegend .int_no_graph { background-color: #5f5f57; } +.mactrackLegend .int_down { background-color: #a12820; } + +.mactrackLegend .authn_success { background-color: #197a54; } +.mactrackLegend .auth_success { background-color: #2c6f52; } +.mactrackLegend .authn_failed { background-color: #a12820; } +.mactrackLegend .auth_failed { background-color: #a85712; } +.mactrackLegend .running { background-color: #93302a; } +.mactrackLegend .idle { background-color: #9a6a1a; } + +.int_up { + background-color: rgba(24, 185, 129, 0.2); + color: #eeeeee; +} + +.int_up_wo_alias { + background-color: rgba(255, 122, 48, 0.2); + color: #eeeeee; +} + +.int_errors { + background-color: rgba(251, 74, 20, 0.2); + color: #eeeeee; +} + +.int_discards { + background-color: rgba(250, 253, 158, 0.2); + color: #eeeeee; +} + +.int_no_graph { + background-color: rgba(205, 207, 196, 0.2); + color: #eeeeee; +} + +.int_no_device { + background-color: rgba(250, 253, 158, 0.2); + color: #eeeeee; +} + +.int_changed { + background-color: rgba(242, 25, 36, 0.2); + color: #eeeeee; +} + +.int_down { + background-color: rgba(242, 23, 33, 0.2); + color: #eeeeee; +} +.dot1x_authn_success { + background-color: rgba(24, 185, 129, 0.2); + color: #eeeeee; +} +.dot1x_auth_success { + background-color: rgba(31, 159, 110, 0.2); + color: #eeeeee; +} +.dot1x_authn_failed { + background-color: rgba(242, 23, 33, 0.2); + color: #eeeeee; +} +.dot1x_auth_failed { + background-color: rgba(255, 122, 48, 0.2); + color: #eeeeee; +} +.dot1x_running { + background-color: rgba(251, 74, 20, 0.2); + color: #eeeeee; +} +.dot1x_idle { + background-color: rgba(250, 253, 158, 0.2); + color: #eeeeee; +} +.dot1x_auth_no_method { + background-color: rgba(205, 207, 196, 0.2); + color: #eeeeee; +} + +/* + * Status pills for the interfaces "Issues" column and the 802.1x status + * column. Outlined when inactive and solid when active; each pill takes + * its colour from the --pill custom property defined below so it matches + * this theme's status legend chips. + */ +.mactrackPills { + display: flex; + flex-wrap: wrap; + gap: 3px; + align-items: center; +} + +.mactrackPill { + appearance: none; + -webkit-appearance: none; + display: inline-block; + margin: 0; + padding: 1px 7px; + border-radius: 10px; + font: inherit; + font-size: 0.85em; + line-height: 1.5; + white-space: nowrap; + cursor: pointer; + user-select: none; + color: inherit; + background-color: transparent; + border: 1px solid var(--pill, #b5b5b5); +} + +.mactrackPill:hover { + background-color: var(--pill, #666666); + color: #ffffff; +} + +.mactrackPill:focus-visible { + outline: 2px solid var(--pill, #cccccc); + outline-offset: 1px; +} + +.mactrackPillActive { + color: #ffffff; + background-color: var(--pill, #666666); + border-color: var(--pill, #666666); +} + +.mactrackPill.int_up { --pill: #197a54; } +.mactrackPill.int_up_wo_alias { --pill: #a85712; } +.mactrackPill.int_errors { --pill: #93302a; } +.mactrackPill.int_discards { --pill: #9a6a1a; } +.mactrackPill.int_no_graph { --pill: #5f5f57; } +.mactrackPill.int_down { --pill: #a12820; } + +.mactrackPill.dot1x_authn_success { --pill: #197a54; } +.mactrackPill.dot1x_auth_success { --pill: #2c6f52; } +.mactrackPill.dot1x_authn_failed { --pill: #a12820; } +.mactrackPill.dot1x_auth_failed { --pill: #a85712; } +.mactrackPill.dot1x_running { --pill: #93302a; } +.mactrackPill.dot1x_idle { --pill: #9a6a1a; } +.mactrackPill.dot1x_auth_no_method { --pill: #5f5f57; } +.mactrackPill.mac_authorized { --pill: #197a54; } +.mactrackPill.mac_unauthorized { --pill: #a12820; } diff --git a/css/raspberry.css b/css/raspberry.css new file mode 100644 index 00000000..699b7ac8 --- /dev/null +++ b/css/raspberry.css @@ -0,0 +1,248 @@ +/* + +-------------------------------------------------------------------------+ + | Copyright (C) 2004-2025 The Cacti Group | + | | + | This program is free software; you can redistribute it and/or | + | modify it under the terms of the GNU General Public License | + | as published by the Free Software Foundation; either version 2 | + | of the License, or (at your option) any later version. | + | | + | This program is distributed in the hope that it will be useful, | + | but WITHOUT ANY WARRANTY; without even the implied warranty of | + | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the | + | GNU General Public License for more details. | + +-------------------------------------------------------------------------+ + | Cacti: The Complete RRDtool-based Graphing Solution | + +-------------------------------------------------------------------------+ + | This code is designed, written, and maintained by the Cacti Group. See | + | about.php and/or the AUTHORS file for specific developer information. | + +-------------------------------------------------------------------------+ + | http://www.cacti.net/ | + +-------------------------------------------------------------------------+ +*/ + +.mtChart { + color: #CC6633 !important; +} + +.mtChartDisabled { + color: #9999CC !important; +} + +.mtEdit { + color: #333333 !important; +} + +.mtSync { + color: #c43ac4 !important; +} + +.mtRanges { + color: #770077 !important; +} + +.mtInterfaces { + color: #993300 !important; +} + +.mtNetwork { + color: #660033 !important; +} + +.mtMacs { + color: #FF9999 !important; +} + +.mtServer { + color: #9f009f !important; +} + +.mtPorts { + color: #993300 !important; +} + +.mtIps { + color: #3399FF !important; +} + +/* + * Status legend chips: solid, opaque colours with white text (consistent with + * the Thold/Monitor/Syslog legends), sized to the longest label via + * --mactrack-chip-min so they stay equal width as the legend wraps. The plain + * row-highlight classes below still tint the list rows. + */ +.mactrackLegend { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(var(--mactrack-chip-min, 8ch), 1fr)); + gap: 4px; + width: 100%; +} + +/* Legend footer: keeps the legend centered beneath the list in normal + document flow, so it never overlays the final rows or action controls. */ +.mactrackLegendFooter { + display: table; + width: 100%; + margin: 8px auto 0; +} + +.mactrackLegend .mactrackLegendItem { + text-align: center; + white-space: nowrap; + padding: 4px 6px; + border-radius: 3px; + color: #ffffff; +} + +.mactrackLegend .int_up { background-color: #2b8435; } +.mactrackLegend .int_up_wo_alias { background-color: #a85712; } +.mactrackLegend .int_errors { background-color: #93302a; } +.mactrackLegend .int_discards { background-color: #9a6a1a; } +.mactrackLegend .int_no_graph { background-color: #5f5f57; } +.mactrackLegend .int_down { background-color: #a12820; } + +.mactrackLegend .authn_success { background-color: #2b8435; } +.mactrackLegend .auth_success { background-color: #3f7a4a; } +.mactrackLegend .authn_failed { background-color: #a12820; } +.mactrackLegend .auth_failed { background-color: #a85712; } +.mactrackLegend .running { background-color: #93302a; } +.mactrackLegend .idle { background-color: #9a6a1a; } + +.int_up { + background-color: rgba(148, 179, 107, 0.8); + color: #eeeeee; +} + +.int_up_wo_alias { + background-color: rgba(255, 122, 48, 0.8); + color: #eeeeee; +} + +.int_errors { + background-color: rgba(251, 74, 20, 0.8); + color: #eeeeee; +} + +.int_discards { + background-color: rgba(250, 253, 158, 0.8); + color: #eeeeee; +} + +.int_no_graph { + background-color: rgba(205, 207, 196, 0.8); + color: #eeeeee; +} + +.int_no_device { + background-color: rgba(250, 253, 158, 0.8); + color: #eeeeee; +} + +.int_changed { + background-color: rgba(242, 25, 36, 0.8); + color: #eeeeee; +} + +.int_down { + background-color: rgba(242, 23, 33, 0.8); + color: #eeeeee; +} + +.dot1x_authn_success { + background-color: rgba(148, 179, 107, 0.8); + color: #eeeeee; +} + +.dot1x_auth_success { + background-color: rgba(148, 179, 107, 0.8); + color: #eeeeee; +} + +.dot1x_authn_failed { + background-color: rgba(242, 23, 33, 0.8); + color: #eeeeee; +} + +.dot1x_auth_failed { + background-color: rgba(255, 122, 48, 0.8); + color: #eeeeee; +} + +.dot1x_running { + background-color: rgba(251, 74, 20, 0.8); + color: #eeeeee; +} + +.dot1x_idle { + background-color: rgba(250, 253, 158, 0.8); + color: #eeeeee; +} + +.dot1x_auth_no_method { + background-color: rgba(205, 207, 196, 0.8); + color: #000000; +} + +/* + * Status pills for the interfaces "Issues" column and the 802.1x status + * column. Outlined when inactive and solid when active; each pill takes + * its colour from the --pill custom property defined below so it matches + * this theme's status legend chips. + */ +.mactrackPills { + display: flex; + flex-wrap: wrap; + gap: 3px; + align-items: center; +} + +.mactrackPill { + appearance: none; + -webkit-appearance: none; + display: inline-block; + margin: 0; + padding: 1px 7px; + border-radius: 10px; + font: inherit; + font-size: 0.85em; + line-height: 1.5; + white-space: nowrap; + cursor: pointer; + user-select: none; + color: inherit; + background-color: transparent; + border: 1px solid var(--pill, #b5b5b5); +} + +.mactrackPill:hover { + background-color: var(--pill, #666666); + color: #ffffff; +} + +.mactrackPill:focus-visible { + outline: 2px solid var(--pill, #666666); + outline-offset: 1px; +} + +.mactrackPillActive { + color: #ffffff; + background-color: var(--pill, #666666); + border-color: var(--pill, #666666); +} + +.mactrackPill.int_up { --pill: #2b8435; } +.mactrackPill.int_up_wo_alias { --pill: #a85712; } +.mactrackPill.int_errors { --pill: #93302a; } +.mactrackPill.int_discards { --pill: #9a6a1a; } +.mactrackPill.int_no_graph { --pill: #5f5f57; } +.mactrackPill.int_down { --pill: #a12820; } + +.mactrackPill.dot1x_authn_success { --pill: #2b8435; } +.mactrackPill.dot1x_auth_success { --pill: #3f7a4a; } +.mactrackPill.dot1x_authn_failed { --pill: #a12820; } +.mactrackPill.dot1x_auth_failed { --pill: #a85712; } +.mactrackPill.dot1x_running { --pill: #93302a; } +.mactrackPill.dot1x_idle { --pill: #9a6a1a; } +.mactrackPill.dot1x_auth_no_method { --pill: #5f5f57; } +.mactrackPill.mac_authorized { --pill: #2b8435; } +.mactrackPill.mac_unauthorized { --pill: #a12820; } From b09989b1fdb902d583349cbfb87a2d7e631b10db Mon Sep 17 00:00:00 2001 From: TheWitness Date: Wed, 14 Oct 2026 10:04:53 -0400 Subject: [PATCH 2/4] Address review: WCAG 3:1 action-icon contrast, Midwinter light/dark modes, CHANGELOG --- CHANGELOG.md | 1 + css/cacti.css | 8 ++-- css/carrot.css | 8 ++-- css/hollyberry.css | 4 +- css/midwinter.css | 112 ++++++++++++++++++++++++++++----------------- css/raspberry.css | 4 +- 6 files changed, 83 insertions(+), 54 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index ce4d800f..866a48a8 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,6 +8,7 @@ * feature: Add a status pill column to the 802.1x view after the username; clicking the pill drills down by setting the Status filter to that session status * feature: Lay the interfaces and dot1x status legends out as a centered footer in normal document flow via a shared `.mactrackLegendFooter` class, instead of a fixed-position overlay that could cover the last rows at the bottom of the page * feature: Restyle the interfaces and dot1x status legends as rounded, evenly-spaced solid-colour chips with theme-appropriate colours (matching the Thold/Monitor/Syslog legends and the Deepness emerald), sized to the longest label and laid out as a CSS grid so they stay equal width across wrapped rows; also fixed a stray `background-color: color:` typo in the `.int_no_device` rule +* feature: Ship a dedicated per-theme stylesheet for every Cacti theme (adding cacti, carrot, hollyberry, raspberry and midwinter alongside the existing dark, deepness, modern, paper-plane, paw and sunrise) so the Issues/802.1x status pills, the status legend and the action icons stay legible and theme-appropriate in every theme instead of falling back to the generic stylesheet; action-icon colours meet the 3:1 non-text contrast guideline and the Midwinter stylesheet adapts to its light/dark colour-mode toggle * dev: Convert plugin bootstrap include/include_once calls to fail-fast require/require_once across the web, CLI, and hook entry points so a missing dependency halts execution instead of continuing with an undefined API * feature: Add a root manifest.json and upgrade-time file pruning (mactrack_prune_files()) that removes tombstoned and dev-only paths, refuses any path resolving outside the plugin directory, warns on paths it cannot remove, and logs top-level entries the manifest does not account for * dev: Relocate the per-theme override stylesheets from themes// to css// alongside the base css/mactrack.css diff --git a/css/cacti.css b/css/cacti.css index 15c86b64..abc55df5 100644 --- a/css/cacti.css +++ b/css/cacti.css @@ -34,7 +34,7 @@ } .mtSync { - color: #3ad65f !important; + color: #15803d !important; } .mtRanges { @@ -50,11 +50,11 @@ } .mtMacs { - color: #FF9999 !important; + color: #c0392b !important; } .mtServer { - color: #2da84c !important; + color: #1f7a3d !important; } .mtPorts { @@ -62,7 +62,7 @@ } .mtIps { - color: #3399FF !important; + color: #2277dd !important; } /* diff --git a/css/carrot.css b/css/carrot.css index 86abaed4..aabb5967 100644 --- a/css/carrot.css +++ b/css/carrot.css @@ -34,7 +34,7 @@ } .mtSync { - color: #ffb347 !important; + color: #c2410c !important; } .mtRanges { @@ -50,11 +50,11 @@ } .mtMacs { - color: #FF9999 !important; + color: #c0392b !important; } .mtServer { - color: #ff9d00 !important; + color: #b5531a !important; } .mtPorts { @@ -62,7 +62,7 @@ } .mtIps { - color: #3399FF !important; + color: #2277dd !important; } /* diff --git a/css/hollyberry.css b/css/hollyberry.css index f7ac8f91..9ac1ca38 100644 --- a/css/hollyberry.css +++ b/css/hollyberry.css @@ -50,7 +50,7 @@ } .mtMacs { - color: #FF9999 !important; + color: #c0392b !important; } .mtServer { @@ -62,7 +62,7 @@ } .mtIps { - color: #3399FF !important; + color: #2277dd !important; } /* diff --git a/css/midwinter.css b/css/midwinter.css index f9a8622c..5f7eacde 100644 --- a/css/midwinter.css +++ b/css/midwinter.css @@ -21,49 +21,35 @@ +-------------------------------------------------------------------------+ */ -.mtChart { - color: #CC6633 !important; -} - -.mtChartDisabled { - color: #9999CC !important; -} - -.mtEdit { - color: #CCCCCC !important; -} - -.mtSync { - color: #4fc3f7 !important; -} - -.mtRanges { - color: #4a90d9 !important; -} - -.mtInterfaces { - color: #993300 !important; -} - -.mtNetwork { - color: #660033 !important; -} - -.mtMacs { - color: #FF9999 !important; -} - -.mtServer { - color: #5a9bd4 !important; -} - -.mtPorts { - color: #993300 !important; -} +/* + * MacTrack action-icon palette. Midwinter toggles light/dark via the + * [data-theme-color] attribute, so provide a legible palette (>= 3:1 + * non-text contrast against each mode's content background) per mode + * rather than one dark-only set. + */ +[data-theme-color='dark'] .mtChart { color: #e0905a !important; } +[data-theme-color='dark'] .mtChartDisabled { color: #9fa6d8 !important; } +[data-theme-color='dark'] .mtEdit { color: #cccccc !important; } +[data-theme-color='dark'] .mtSync { color: #4fc3f7 !important; } +[data-theme-color='dark'] .mtRanges { color: #6aa9e0 !important; } +[data-theme-color='dark'] .mtInterfaces { color: #e0795a !important; } +[data-theme-color='dark'] .mtNetwork { color: #d98cae !important; } +[data-theme-color='dark'] .mtMacs { color: #ff9999 !important; } +[data-theme-color='dark'] .mtServer { color: #7fb0e0 !important; } +[data-theme-color='dark'] .mtPorts { color: #e0795a !important; } +[data-theme-color='dark'] .mtIps { color: #5aa9ff !important; } -.mtIps { - color: #3399FF !important; -} +[data-theme-color='light'] .mtChart { color: #b5531a !important; } +[data-theme-color='light'] .mtChartDisabled { color: #5a5fb0 !important; } +[data-theme-color='light'] .mtEdit { color: #333333 !important; } +[data-theme-color='light'] .mtSync { color: #1f6fd0 !important; } +[data-theme-color='light'] .mtRanges { color: #2a5fa8 !important; } +[data-theme-color='light'] .mtInterfaces { color: #993300 !important; } +[data-theme-color='light'] .mtNetwork { color: #660033 !important; } +[data-theme-color='light'] .mtMacs { color: #c0392b !important; } +[data-theme-color='light'] .mtServer { color: #2277dd !important; } +[data-theme-color='light'] .mtPorts { color: #993300 !important; } +[data-theme-color='light'] .mtIps { color: #2277dd !important; } /* * Status legend chips: solid, opaque colours with white text (consistent with @@ -176,6 +162,48 @@ color: #eeeeee; } +/* + * The 0.2 status tints above sit legibly on both of Midwinter's mode + * backgrounds, but the row text colour must follow the mode: light text + * in dark mode, dark text in light mode (otherwise the light-mode rows + * render white-on-white). Scoped overrides win on specificity. + */ +[data-theme-color='dark'] .int_up, +[data-theme-color='dark'] .int_up_wo_alias, +[data-theme-color='dark'] .int_errors, +[data-theme-color='dark'] .int_discards, +[data-theme-color='dark'] .int_no_graph, +[data-theme-color='dark'] .int_no_device, +[data-theme-color='dark'] .int_changed, +[data-theme-color='dark'] .int_down, +[data-theme-color='dark'] .dot1x_authn_success, +[data-theme-color='dark'] .dot1x_auth_success, +[data-theme-color='dark'] .dot1x_authn_failed, +[data-theme-color='dark'] .dot1x_auth_failed, +[data-theme-color='dark'] .dot1x_running, +[data-theme-color='dark'] .dot1x_idle, +[data-theme-color='dark'] .dot1x_auth_no_method { + color: #eeeeee; +} + +[data-theme-color='light'] .int_up, +[data-theme-color='light'] .int_up_wo_alias, +[data-theme-color='light'] .int_errors, +[data-theme-color='light'] .int_discards, +[data-theme-color='light'] .int_no_graph, +[data-theme-color='light'] .int_no_device, +[data-theme-color='light'] .int_changed, +[data-theme-color='light'] .int_down, +[data-theme-color='light'] .dot1x_authn_success, +[data-theme-color='light'] .dot1x_auth_success, +[data-theme-color='light'] .dot1x_authn_failed, +[data-theme-color='light'] .dot1x_auth_failed, +[data-theme-color='light'] .dot1x_running, +[data-theme-color='light'] .dot1x_idle, +[data-theme-color='light'] .dot1x_auth_no_method { + color: #1a1a1a; +} + /* * Status pills for the interfaces "Issues" column and the 802.1x status * column. Outlined when inactive and solid when active; each pill takes diff --git a/css/raspberry.css b/css/raspberry.css index 699b7ac8..2b34fdfd 100644 --- a/css/raspberry.css +++ b/css/raspberry.css @@ -50,7 +50,7 @@ } .mtMacs { - color: #FF9999 !important; + color: #c0392b !important; } .mtServer { @@ -62,7 +62,7 @@ } .mtIps { - color: #3399FF !important; + color: #2277dd !important; } /* From 7d8421e8bf7fcb8a7d37a4f2e648a7ba5c12b38c Mon Sep 17 00:00:00 2001 From: TheWitness Date: Wed, 14 Oct 2026 10:31:48 -0400 Subject: [PATCH 3/4] Scope Midwinter row-status text overrides to so pills/legend keep white text --- css/midwinter.css | 64 ++++++++++++++++++++++++----------------------- 1 file changed, 33 insertions(+), 31 deletions(-) diff --git a/css/midwinter.css b/css/midwinter.css index 5f7eacde..ef7a48b1 100644 --- a/css/midwinter.css +++ b/css/midwinter.css @@ -166,41 +166,43 @@ * The 0.2 status tints above sit legibly on both of Midwinter's mode * backgrounds, but the row text colour must follow the mode: light text * in dark mode, dark text in light mode (otherwise the light-mode rows - * render white-on-white). Scoped overrides win on specificity. + * render white-on-white). Scoped to the status rows only so the + * pills and legend chips (which carry the same status classes) keep + * their own white-on-colour text. */ -[data-theme-color='dark'] .int_up, -[data-theme-color='dark'] .int_up_wo_alias, -[data-theme-color='dark'] .int_errors, -[data-theme-color='dark'] .int_discards, -[data-theme-color='dark'] .int_no_graph, -[data-theme-color='dark'] .int_no_device, -[data-theme-color='dark'] .int_changed, -[data-theme-color='dark'] .int_down, -[data-theme-color='dark'] .dot1x_authn_success, -[data-theme-color='dark'] .dot1x_auth_success, -[data-theme-color='dark'] .dot1x_authn_failed, -[data-theme-color='dark'] .dot1x_auth_failed, -[data-theme-color='dark'] .dot1x_running, -[data-theme-color='dark'] .dot1x_idle, -[data-theme-color='dark'] .dot1x_auth_no_method { +[data-theme-color='dark'] tr.int_up, +[data-theme-color='dark'] tr.int_up_wo_alias, +[data-theme-color='dark'] tr.int_errors, +[data-theme-color='dark'] tr.int_discards, +[data-theme-color='dark'] tr.int_no_graph, +[data-theme-color='dark'] tr.int_no_device, +[data-theme-color='dark'] tr.int_changed, +[data-theme-color='dark'] tr.int_down, +[data-theme-color='dark'] tr.dot1x_authn_success, +[data-theme-color='dark'] tr.dot1x_auth_success, +[data-theme-color='dark'] tr.dot1x_authn_failed, +[data-theme-color='dark'] tr.dot1x_auth_failed, +[data-theme-color='dark'] tr.dot1x_running, +[data-theme-color='dark'] tr.dot1x_idle, +[data-theme-color='dark'] tr.dot1x_auth_no_method { color: #eeeeee; } -[data-theme-color='light'] .int_up, -[data-theme-color='light'] .int_up_wo_alias, -[data-theme-color='light'] .int_errors, -[data-theme-color='light'] .int_discards, -[data-theme-color='light'] .int_no_graph, -[data-theme-color='light'] .int_no_device, -[data-theme-color='light'] .int_changed, -[data-theme-color='light'] .int_down, -[data-theme-color='light'] .dot1x_authn_success, -[data-theme-color='light'] .dot1x_auth_success, -[data-theme-color='light'] .dot1x_authn_failed, -[data-theme-color='light'] .dot1x_auth_failed, -[data-theme-color='light'] .dot1x_running, -[data-theme-color='light'] .dot1x_idle, -[data-theme-color='light'] .dot1x_auth_no_method { +[data-theme-color='light'] tr.int_up, +[data-theme-color='light'] tr.int_up_wo_alias, +[data-theme-color='light'] tr.int_errors, +[data-theme-color='light'] tr.int_discards, +[data-theme-color='light'] tr.int_no_graph, +[data-theme-color='light'] tr.int_no_device, +[data-theme-color='light'] tr.int_changed, +[data-theme-color='light'] tr.int_down, +[data-theme-color='light'] tr.dot1x_authn_success, +[data-theme-color='light'] tr.dot1x_auth_success, +[data-theme-color='light'] tr.dot1x_authn_failed, +[data-theme-color='light'] tr.dot1x_auth_failed, +[data-theme-color='light'] tr.dot1x_running, +[data-theme-color='light'] tr.dot1x_idle, +[data-theme-color='light'] tr.dot1x_auth_no_method { color: #1a1a1a; } From 48f5d6b83d7be045862f70269a4973c580ff56db Mon Sep 17 00:00:00 2001 From: TheWitness Date: Wed, 14 Oct 2026 10:35:30 -0400 Subject: [PATCH 4/4] Midwinter: drive row-tint text from --text-color-lighter so light mode is legible and pills/legend keep white text --- css/midwinter.css | 76 +++++++++++++---------------------------------- 1 file changed, 20 insertions(+), 56 deletions(-) diff --git a/css/midwinter.css b/css/midwinter.css index ef7a48b1..99ca2b59 100644 --- a/css/midwinter.css +++ b/css/midwinter.css @@ -96,115 +96,79 @@ .int_up { background-color: rgba(24, 185, 129, 0.2); - color: #eeeeee; + color: var(--text-color-lighter); } .int_up_wo_alias { background-color: rgba(255, 122, 48, 0.2); - color: #eeeeee; + color: var(--text-color-lighter); } .int_errors { background-color: rgba(251, 74, 20, 0.2); - color: #eeeeee; + color: var(--text-color-lighter); } .int_discards { background-color: rgba(250, 253, 158, 0.2); - color: #eeeeee; + color: var(--text-color-lighter); } .int_no_graph { background-color: rgba(205, 207, 196, 0.2); - color: #eeeeee; + color: var(--text-color-lighter); } .int_no_device { background-color: rgba(250, 253, 158, 0.2); - color: #eeeeee; + color: var(--text-color-lighter); } .int_changed { background-color: rgba(242, 25, 36, 0.2); - color: #eeeeee; + color: var(--text-color-lighter); } .int_down { background-color: rgba(242, 23, 33, 0.2); - color: #eeeeee; + color: var(--text-color-lighter); } .dot1x_authn_success { background-color: rgba(24, 185, 129, 0.2); - color: #eeeeee; + color: var(--text-color-lighter); } .dot1x_auth_success { background-color: rgba(31, 159, 110, 0.2); - color: #eeeeee; + color: var(--text-color-lighter); } .dot1x_authn_failed { background-color: rgba(242, 23, 33, 0.2); - color: #eeeeee; + color: var(--text-color-lighter); } .dot1x_auth_failed { background-color: rgba(255, 122, 48, 0.2); - color: #eeeeee; + color: var(--text-color-lighter); } .dot1x_running { background-color: rgba(251, 74, 20, 0.2); - color: #eeeeee; + color: var(--text-color-lighter); } .dot1x_idle { background-color: rgba(250, 253, 158, 0.2); - color: #eeeeee; + color: var(--text-color-lighter); } .dot1x_auth_no_method { background-color: rgba(205, 207, 196, 0.2); - color: #eeeeee; + color: var(--text-color-lighter); } /* - * The 0.2 status tints above sit legibly on both of Midwinter's mode - * backgrounds, but the row text colour must follow the mode: light text - * in dark mode, dark text in light mode (otherwise the light-mode rows - * render white-on-white). Scoped to the status rows only so the - * pills and legend chips (which carry the same status classes) keep - * their own white-on-colour text. + * Row text colour follows Midwinter's light/dark mode automatically via + * --text-color-lighter (light text in dark mode, near-black in light + * mode) so the 0.2 status tints stay legible in both modes. The pills + * and legend chips carry the same status classes but set their own white + * text in later rules, so they are unaffected. */ -[data-theme-color='dark'] tr.int_up, -[data-theme-color='dark'] tr.int_up_wo_alias, -[data-theme-color='dark'] tr.int_errors, -[data-theme-color='dark'] tr.int_discards, -[data-theme-color='dark'] tr.int_no_graph, -[data-theme-color='dark'] tr.int_no_device, -[data-theme-color='dark'] tr.int_changed, -[data-theme-color='dark'] tr.int_down, -[data-theme-color='dark'] tr.dot1x_authn_success, -[data-theme-color='dark'] tr.dot1x_auth_success, -[data-theme-color='dark'] tr.dot1x_authn_failed, -[data-theme-color='dark'] tr.dot1x_auth_failed, -[data-theme-color='dark'] tr.dot1x_running, -[data-theme-color='dark'] tr.dot1x_idle, -[data-theme-color='dark'] tr.dot1x_auth_no_method { - color: #eeeeee; -} - -[data-theme-color='light'] tr.int_up, -[data-theme-color='light'] tr.int_up_wo_alias, -[data-theme-color='light'] tr.int_errors, -[data-theme-color='light'] tr.int_discards, -[data-theme-color='light'] tr.int_no_graph, -[data-theme-color='light'] tr.int_no_device, -[data-theme-color='light'] tr.int_changed, -[data-theme-color='light'] tr.int_down, -[data-theme-color='light'] tr.dot1x_authn_success, -[data-theme-color='light'] tr.dot1x_auth_success, -[data-theme-color='light'] tr.dot1x_authn_failed, -[data-theme-color='light'] tr.dot1x_auth_failed, -[data-theme-color='light'] tr.dot1x_running, -[data-theme-color='light'] tr.dot1x_idle, -[data-theme-color='light'] tr.dot1x_auth_no_method { - color: #1a1a1a; -} /* * Status pills for the interfaces "Issues" column and the 802.1x status