mirror of
https://github.com/Cacti/plugin_thold.git
synced 2026-10-23 03:27:05 +09:00
TheWitnessandTheWitness
1158c70de0
* Pin status legends to the bottom of the page (match MacTrack) Wrap the thold, host and log legend renders in the same fixed-position footer container MacTrack uses, so the legend stays pinned to the bottom of the viewport instead of scrolling away with the list. * Use a CSS class for the legend footer instead of inline styles Replace the inline fixed-position wrapper around the status legend with a plugin-specific *LegendFooter class defined in the plugin's stylesheet. The class lays the legend out as a centered footer in normal document flow, so it no longer sits outside flow and overlay the final rows, pagination, or action controls at the bottom of the page. --------- Co-authored-by: TheWitness <1439914+TheWitness@users.noreply.github.com>
391 lines
8.1 KiB
CSS
391 lines
8.1 KiB
CSS
/*
|
|
+-------------------------------------------------------------------------+
|
|
| 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/ |
|
|
+-------------------------------------------------------------------------+
|
|
*/
|
|
|
|
.deviceUpFull {
|
|
background-color: rgba(25, 142, 50, 0.2);
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
width: 14%;
|
|
padding: 4px 3px;
|
|
color: #eeeeee;
|
|
}
|
|
|
|
.deviceDownFull {
|
|
background-color: rgba(255, 0, 0, 0.2);
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
width: 14%;
|
|
padding: 4px 3px;
|
|
color: #eeeeee;
|
|
}
|
|
|
|
.deviceUnknownFull {
|
|
background-color: rgba(0, 0, 255, 0.2);
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
width: 14%;
|
|
padding: 4px 3px;
|
|
color: #eeeeee;
|
|
}
|
|
|
|
.deviceDisabledFull {
|
|
background-color: rgba(161, 161, 161, 0.2);
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
width: 14%;
|
|
padding: 4px 3px;
|
|
color: #eeeeee;
|
|
}
|
|
|
|
.deviceRecoveringFull {
|
|
background-color: rgba(255, 143, 30, 0.2);
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
width: 14%;
|
|
padding: 4px 3px;
|
|
color: #eeeeee;
|
|
}
|
|
|
|
.deviceErrorFull {
|
|
background-color: rgba(117, 15, 125, 0.2);
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
width: 14%;
|
|
padding: 4px 3px;
|
|
color: #eeeeee;
|
|
}
|
|
|
|
.deviceNotMonFull {
|
|
background-color: rgba(250, 253, 158, 0.2);
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
width: 14%;
|
|
padding: 4px 3px;
|
|
color: #eeeeee;
|
|
}
|
|
|
|
.tholdAlertNotify {
|
|
background-color: rgba(242, 25, 36, 0.2);
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
width: 11.11%;
|
|
padding: 4px 3px;
|
|
color: #eeeeee;
|
|
}
|
|
|
|
.tholdAlert2Warn {
|
|
background-color: rgba(200, 25, 36, 0.2);
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
width: 11.11%;
|
|
padding: 4px 3px;
|
|
color: #eeeeee;
|
|
}
|
|
|
|
.tholdWarningNotify {
|
|
background-color: rgba(251, 74, 20, 0.2);
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
width: 11.11%;
|
|
padding: 4px 3px;
|
|
color: #eeeeee;
|
|
}
|
|
|
|
.tholdReTriggerNotify {
|
|
background-color: rgba(200, 125, 88, 0.2);
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
width: 11.11%;
|
|
padding: 4px 3px;
|
|
color: #eeeeee;
|
|
}
|
|
|
|
.tholdReTriggerEvent {
|
|
background-color: rgba(255, 122, 48, 0.2);
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
width: 11.11%;
|
|
padding: 4px 3px;
|
|
color: #eeeeee;
|
|
}
|
|
|
|
.tholdTriggerEvent {
|
|
background-color: rgba(250, 253, 158, 0.2);
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
width: 11.11%;
|
|
padding: 4px 3px;
|
|
color: #eeeeee;
|
|
}
|
|
|
|
.tholdWarnTrigger {
|
|
background-color: rgba(210, 223, 128, 0.2);
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
width: 11.11%;
|
|
padding: 4px 3px;
|
|
color: #eeeeee;
|
|
}
|
|
|
|
.tholdRestoralNotify {
|
|
background-color: rgba(204, 255, 204, 0.2);
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
width: 11.11%;
|
|
padding: 4px 3px;
|
|
color: #eeeeee;
|
|
}
|
|
|
|
.tholdRestoralEvent {
|
|
background-color: rgba(205, 207, 196, 0.2);
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
width: 11.11%;
|
|
padding: 4px 3px;
|
|
color: #eeeeee;
|
|
}
|
|
|
|
.tholdRestore {
|
|
background-color: rgba(204, 255, 204, 0.2);
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
width: 14%;
|
|
padding: 4px 3px;
|
|
color: #eeeeee;
|
|
}
|
|
|
|
.tholdAlertTrigger {
|
|
background-color: rgba(242, 23, 33, 0.2);
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
width: 14%;
|
|
padding: 4px 3px;
|
|
color: #eeeeee;
|
|
}
|
|
|
|
.tholdReTrigger {
|
|
background-color: rgba(250, 116, 32, 0.2);
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
width: 14%;
|
|
padding: 4px 3px;
|
|
color: #eeeeee;
|
|
}
|
|
|
|
.tholdWarning {
|
|
background-color: rgba(255, 122, 48, 0.2);
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
width: 14%;
|
|
padding: 4px 3px;
|
|
color: #eeeeee;
|
|
}
|
|
|
|
.tholdAlert {
|
|
background-color: rgba(242, 25, 36, 0.2);
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
width: 14%;
|
|
padding: 4px 3px;
|
|
color: #eeeeee;
|
|
}
|
|
|
|
.tholdAckCol {
|
|
background-color: rgba(138, 43, 226, 0.2);
|
|
}
|
|
|
|
.tholdAcknowledgment {
|
|
background-color: rgba(138, 43, 226, 0.2);
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
width: 14%;
|
|
padding: 4px 3px;
|
|
color: #eeeeee;
|
|
}
|
|
|
|
.tholdBaseAlert {
|
|
background-color: rgba(251, 74, 20, 0.2);
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
width: 14%;
|
|
padding: 4px 3px;
|
|
color: #eeeeee;
|
|
}
|
|
|
|
.tholdNotice {
|
|
background-color: rgba(250, 253, 158, 0.2);
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
width: 14%;
|
|
padding: 4px 3px;
|
|
color: #eeeeee;
|
|
}
|
|
|
|
.tholdOk {
|
|
background-color: rgba(204, 255, 204, 0.2);
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
width: 14%;
|
|
padding: 4px 3px;
|
|
color: #eeeeee;
|
|
}
|
|
|
|
.tholdDisabled {
|
|
background-color: rgba(205, 207, 196, 0.2);
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
width: 14%;
|
|
padding: 4px 3px;
|
|
color: #eeeeee;
|
|
}
|
|
|
|
.tholdGlyphEdit {
|
|
color: #b3b3b3;
|
|
}
|
|
|
|
.tholdGlyphDisable {
|
|
color: #e06666;
|
|
}
|
|
|
|
.tholdGlyphEnable {
|
|
color: #4caf50;
|
|
}
|
|
|
|
.tholdGlyphChart {
|
|
color: #d6a13a;
|
|
}
|
|
|
|
.tholdGlyphLog {
|
|
color: #c7c04a;
|
|
}
|
|
|
|
.tholdGlyphAcknowledge {
|
|
color: #7cb342;
|
|
}
|
|
|
|
.tholdGlyphAcknowledgeResume {
|
|
color: #7cb342;
|
|
}
|
|
|
|
.tholdGlyphAcknowledgeSuspend {
|
|
color: #7cb342;
|
|
}
|
|
|
|
/* Graph view action glyphs (toggle threshold VRULEs, create threshold) */
|
|
.tholdVRules {
|
|
color: #4aa3df;
|
|
}
|
|
|
|
.tholdEdit {
|
|
color: #b3b3b3;
|
|
}
|
|
|
|
.tholdLog {
|
|
white-space: pre-wrap !important;
|
|
}
|
|
|
|
/*
|
|
* Status legend. Laid out as a wrapping CSS grid whose columns share one
|
|
* width (seeded from the longest label via --thold-chip-min) so every chip is
|
|
* equal width across all rows, with rounded corners and spacing between chips. A legend is a colour key, so the chips use their own solid, opaque
|
|
* colours with white text so they stay legible on every theme rather than
|
|
* inheriting the subtle row tints.
|
|
*/
|
|
.tholdLegend {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(var(--thold-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. */
|
|
.tholdLegendFooter {
|
|
display: table;
|
|
width: 100%;
|
|
margin: 8px auto 0;
|
|
}
|
|
|
|
.tholdLegend .tholdLegendItem {
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
min-width: 0;
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
padding: 4px 6px;
|
|
border-radius: 3px;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.tholdLegend .tholdAlert,
|
|
.tholdLegend .tholdAlertNotify,
|
|
.tholdLegend .deviceDownFull {
|
|
background-color: #a12820;
|
|
}
|
|
|
|
.tholdLegend .tholdBaseAlert,
|
|
.tholdLegend .tholdAlert2Warn {
|
|
background-color: #93302a;
|
|
}
|
|
|
|
.tholdLegend .tholdWarning,
|
|
.tholdLegend .tholdWarningNotify,
|
|
.tholdLegend .tholdReTriggerEvent {
|
|
background-color: #a85712;
|
|
}
|
|
|
|
.tholdLegend .deviceRecoveringFull {
|
|
background-color: #9a6a1a;
|
|
}
|
|
|
|
.tholdLegend .tholdNotice,
|
|
.tholdLegend .tholdWarnTrigger,
|
|
.tholdLegend .tholdTriggerEvent {
|
|
background-color: #7d6f18;
|
|
}
|
|
|
|
.tholdLegend .tholdOk,
|
|
.tholdLegend .deviceUpFull,
|
|
.tholdLegend .tholdRestoralNotify {
|
|
background-color: #2f8f3a;
|
|
}
|
|
|
|
.tholdLegend .tholdRestoralEvent {
|
|
background-color: #3f7a4a;
|
|
}
|
|
|
|
.tholdLegend .tholdAcknowledgment {
|
|
background-color: #6a4a9c;
|
|
}
|
|
|
|
.tholdLegend .deviceErrorFull {
|
|
background-color: #86407a;
|
|
}
|
|
|
|
.tholdLegend .tholdDisabled,
|
|
.tholdLegend .deviceDisabledFull,
|
|
.tholdLegend .deviceUnknownFull,
|
|
.tholdLegend .deviceNotMonFull {
|
|
background-color: #5f5f57;
|
|
}
|