Skip to content

Add per-theme CSS for all remaining Cacti themes #392

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
TheWitness merged 4 commits into from
Oct 14, 2026
+1,228 −0
Merged

Add per-theme CSS for all remaining Cacti themes #392

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
a77cd52
Add per-theme CSS for all remaining Cacti themes
TheWitness Oct 14, 2026
b09989b
Address review: WCAG 3:1 action-icon contrast, Midwinter light/dark m…
TheWitness Oct 14, 2026
7d8421e
Scope Midwinter row-status text overrides to <tr> so pills/legend kee…
TheWitness Oct 14, 2026
48f5d6b
Midwinter: drive row-tint text from --text-color-lighter so light mod…
TheWitness Oct 14, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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/<theme>/ to css/<theme>/ alongside the base css/mactrack.css
Expand Down
248 changes: 248 additions & 0 deletions css/cacti.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,248 @@
/*
Comment thread
TheWitness marked this conversation as resolved.
+-------------------------------------------------------------------------+
| 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: #15803d !important;
}
Comment thread
TheWitness marked this conversation as resolved.

.mtRanges {
color: #007700 !important;
}

.mtInterfaces {
color: #993300 !important;
}

.mtNetwork {
color: #660033 !important;
}

.mtMacs {
color: #c0392b !important;
}
Comment thread
TheWitness marked this conversation as resolved.

.mtServer {
color: #1f7a3d !important;
}

.mtPorts {
color: #993300 !important;
}

.mtIps {
color: #2277dd !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; }
Loading
Loading