Files
cacti/include/themes/paper-plane/main.css
T
TheWitness 5c1577a382 Force plugins.php action icons over POST and enlarge Tabler icons (#8394)
The install, enable, remote enable, load and dialog-confirmed actions on
plugins.php are guarded by csrf_require_post() on the server. The anchors
were still activated by the generic GET anchor handler, so clicking them
returned a 405 on the develop branch. Submit these actions over POST:

- The dialog Continue button and the Check Latest control now post.
- A capture-phase document click listener intercepts the install, enable,
  remote enable and load icons before the bubble-phase generic handler, so
  they post, keep working after Ajax table refreshes, and bind only once.

Tabler (i.ti) icons rendered smaller than the FontAwesome glyphs used on
the 1.2.x branch, so give them an explicit 16px rule matching the fa
layout in each bundled theme, and cover the new rule with
develop-theme-correctness targeted tests.
2026-10-15 13:39:18 -04:00

3606 lines
62 KiB
CSS

/*
+-------------------------------------------------------------------------+
| Copyright (C) 2004-2026 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/ |
+-------------------------------------------------------------------------+
*/
/* main styles */
html {
height: 100%;
width: 100%;
background: #1D1F21;
background-image: linear-gradient(#1D1F21,#000000);
}
body, table, tr, td, textarea {
font-family: 'Segoe UI', 'Segoe UI Web Regular', 'Segoe UI Symbol', 'Helvetica Neue', 'BBAlpha Sans', 'S60 Sans', Arial, sans-serif;
font-size: 12px;
/* fix those ever present IE issues */
-ms-overflow-style: scrollbar;
}
body {
margin: 0px;
background-color: white;
background-repeat: repeat-y;
overflow: hidden;
background: #1D1F21;
background-image: linear-gradient(#1D1F21,#000000);
}
table {
border-collapse: collapse;
border-spacing: 0;
border: none;
text-align: left;
outline-style: none;
}
td, th {
padding: 2px 2px;
margin: 0px;
}
th {
white-space: nowrap;
user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
}
img {
border: none;
vertical-align: middle;
}
i.ti {
font-size: 16px;
padding: 0px 3px;
text-align: left;
vertical-align: middle;
}
i.fa, i.fas, i.fab, i.far, i.fal {
font-size: 15px;
padding: 0px 3px;
text-align: left;
vertical-align: middle;
}
.menu_parent i.fa, .menu_parent i.fas, .menu_parent i.fab, .menu_parent i.far, .menu_parent i.fal {
color: lightgrey;
}
fieldset {
border: none;
padding: 0px;
margin: 0px;
}
.cols1 {
width: 100%;
display:table-cell;
}
.cols2 {
width: 50%;
display:table-cell;
}
.cols3 {
width: 33%;
display:table-cell;
}
.cols4 {
width: 25%;
display:table-cell;
}
.cols5 {
width: 20%;
display:table-cell;
}
.cols6 {
width: 16.6%;
display:table-cell;
}
.graphPage {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}
hr.menu {
border: 0;
height: 1px;
background: #333;
background-image: linear-gradient(to right, #ccc, #333, #ccc);
}
.reindex_methods span {
font-size: 9px;
}
.checkboxLabel {
display: none;
}
.realms .checkboxLabel {
display: inline !important;
}
/* links */
a, a:active, a:visited {
color: #2d4ca8;
text-decoration: none;
font-size: 12px;
}
a:hover {
text-decoration: none;
color: #333333;
}
th .fa {
margin-top: -5px;
position: absolute;
right: 3px;
top: 50%;
}
pre {
color: snow;
}
form#tree_edit>div {
background: #F7F7F7;
}
#main {
display: none;
width: 100%;
position: relative;
z-index: 0;
}
#main > br {
display: none;
}
#main > table {
width: 100%;
}
input, select {
padding: 0.4em 0.4em 0.4em 0.4em;
}
label {
white-space: nowrap;
}
.glyph_tab-console:before {
content: "\f1d8";
padding: 0px 5px 0px 5px;
}
.text_tab-console {
display: none;
}
.nowrap {
white-space: nowrap;
}
.prewrap {
white-space: pre-wrap;
}
.wrap {
white-space: normal !important;
}
.top {
vertical-align: top;
}
.right {
text-align: right !important;
}
.left {
text-align: left;
}
.center {
text-align: center !important;
}
.flexContainer {
display: flex;
flex-wrap: wrap;
margin-left: auto;
margin-right: auto;
justify-content: flex-start;
}
.flexChild {
display: inline-block;
margin-top: 5px;
flex-basis: 20%;
min-width: 200px;
}
.usermenudown {
background: transparent url('./../../../images/bullet_arrow_down.png') no-repeat center right;
}
.usermenuup {
background: transparent url('./../../../images/bullet_arrow_up.png') no-repeat center right;
}
.user {
padding-right: 16px;
font-weight: bold;
cursor: pointer;
}
.filter {
position: relative;
left: -20px;
margin-right: -10px;
font-size: 13px !important;
}
.badpassword {
padding: 4px;
color: red;
font-size: 1.5em !important;
vertical-align: bottom;
}
.goodpassword {
padding: 4px;
color: green;
font-size: 1.5em !important;
vertical-align: bottom;
}
.associated {
color: green;
font-weight: bold;
}
.notAssociated {
color: red;
font-weight: bold;
}
.disabled_row span, .disabled_row td, .disabled_row a {
color: grey;
}
.disabled {
color: grey;
font-weight: bold;
}
.idle {
color: green;
font-weight: bold;
}
.running {
color: red;
font-weight: bold;
}
.newObject {
color: blue;
}
.updateObject {
color: grey;
}
.unmetDependency {
color: red;
}
.foundDependency {
color: navy;
}
.success {
color: green;
}
.failed {
color: red;
}
.accessGranted {
color: green;
font-weight: bold;
}
.accessGrantedItem {
color: green;
}
.accessRestricted {
color: red;
font-weight: bold;
}
.accessRestrictedItem {
color: red;
}
.deleteIcon {
width: 10px;
height: 10px;
cursor: pointer;
padding: 2px;
border: none;
}
.drillDown {
cursor: pointer;
}
.monoSpace {
font-size: 9px;
font-family: monospace;
}
.utilityPick {
width: 200px;
}
.itemlist {
max-height: 200px;
overflow-y: auto;
}
.realms {
width: 20%;
vertical-align: top;
white-space: nowrap;
}
.spikeKillMenuItem {
display: block;
width: 100%:;
}
.deviceUp {
color: rgba(40, 180, 40, 1.0) !important;
}
.deviceDown {
color: #ff0000 !important;
}
.deviceUnknown {
color: #0000ff !important;
}
.deviceDisabled {
color: #a1a1a1 !important;
}
.deviceRecovering {
color: #ff8f1e !important;
}
.deviceError {
color: #750F7D !important;
}
.deviceDownMuted {
color: #ffe333 !important;
}
.deviceThreshold {
color: #ffa833 !important;
}
.deviceUnmonitored {
color: rgba(250, 253, 158, 0.8) !important;
}
.deviceWarning {
color: #aa7807 !important;
}
.deviceAlert {
color: #660000 !important;
}
.deviceUpBg {
color: rgba(22,22,22,0.8);
font-size: 10pt;
font-weight: bold;
background-color: rgba(148, 179, 107, 0.8);
}
.deviceDownBg {
color: rgba(22,22,22,0.8);
font-size: 10pt;
font-weight: bold;
background-color: #ff0000;
}
.deviceUnknownBg {
color: rgba(22,22,22,0.8);
font-size: 10pt;
font-weight: bold;
background-color: #0000ff;
}
.deviceDisabledBg {
color: rgba(22,22,22,0.8);
font-size: 10pt;
font-weight: bold;
background-color: #a1a1a1;
}
.deviceRecoveringBg {
color: rgba(22,22,22,0.8);
font-size: 10pt;
font-weight: bold;
background-color: #ff8f1e;
}
.deviceErrorBg {
color: rgba(22,22,22,0.8);
font-size: 10pt;
font-weight: bold;
background-color: #750F7D;
}
.deviceDownMutedBg {
color: rgba(22,22,22,0.8);
font-size: 10pt;
font-weight: bold;
background-color: #ffe333;
}
.deviceThresholdBg {
color: rgba(22,22,22,0.8);
font-size: 10pt;
font-weight: bold;
background-color: #ffa833;
}
.deviceUnmonitoredBg {
color: rgba(22,22,22,0.8);
font-size: 10pt;
font-weight: bold;
background-color: rgba(250, 253, 158, 0.8);
}
.deviceWarningBg {
color: rgba(22,22,22,0.8);
font-size: 10pt;
font-weight: bold;
background-color: #aa7807;
}
.deviceAlertBg {
color: rgba(22,22,22,0.8);
font-size: 10pt;
font-weight: bold;
background-color: #660000;
}
.beingGraphed {
color: green;
}
.notBeingGraphed {
color: #484848;
}
.submenuoptions {
border-width: 1px 2px 2px 2px;
border-color: #000000;
border-style: solid;
position: absolute;
top: 45px;
list-style: none;
text-align: left;
margin: 0px;
padding: 10px 0px 10px 0px;
background: #FFFFFF;
}
.submenuoptions li a {
display: block;
padding: 4px 15px;
font-size: 12px;
font-weight: light;
color: #000000;
text-decoration: none;
}
.submenuoptions li a:hover {
display: block;
color: white;
background: #5CB85C;
}
.menuoptions {
background: #F7F7F7;
border-width: 1px 2px 2px 2px;
border-color: #000000;
border-style: solid;
display: block;
float: right;
position: absolute;
right: 0px;
top: 45px;
list-style: none;
text-align: right;
margin: 0px;
padding: 10px 0px 10px 0px;
}
.menuoptions li a {
display: block;
padding: 4px 15px;
font-family: Verdana,Arial,sans-serif;
font-size: 12px;
font-weight: light;
color: #000000;
text-decoration: none;
}
.menuoptions li a:hover {
display: block;
color: white;
background: #5CB85C;
}
.import_label {
opacity: 1;
}
.import_button {
display: none;
opacity: 0;
}
.import_text {
opacity: 1;
}
.color-icon {
background-image: none !important;
}
#dbghide {
color: orange !important;
}
.emailtest {
cursor: pointer;
display: block;
float: right;
text-align: right;
padding: 0px 5px 0px 0px;
}
.reloadquery {
cursor: pointer;
padding: 1px;
vertical-align: middle;
color: #32CD32;
font-weight: bold;
font-size: 14px;
padding-right: 10px !important;
}
.verbosequery {
cursor: pointer;
padding: 1px;
vertical-align: middle;
color: orange;
font-size: 14px;
padding-right: 10px;
}
.deletequery {
cursor: pointer;
padding: 1px;
vertical-align: middle;
color: #174163 !important;
font-weight: bold;
font-size: 14px;
padding-right: 10px;
}
.deletequery:hover {
color: #174163 !important;
text-decoration: none;
padding: 1px;
vertical-align: middle;
}
.tableRow {
color: #333333;
line-height: 20px;
}
.odd {
border: none;
background: none repeat scroll 0 0 #e8e8e8;
}
.odd.tableRow {
color: #333333;
background: none repeat scroll 0 0 #f0f0f0;
}
.tableRowGraph td {
padding: 3px;
vertical-align: top;
background: none repeat scroll 0 0 #222222;
}
.even {
border: none;
background: none repeat scroll 0 0 #e8e8e8;
}
.even.tableRow {
color: #333333;
background: none repeat scroll 0 0 #e8e8e8;
}
.even-alternate {
background: none repeat scroll 0 0 #f0f0f0;
}
.even-alternate.tableRow {
color: #333333;
background: none repeat scroll 0 0 #e8e8e8;
}
.tableRow {
padding: 4px 5px !important;
}
.saveRow {
border-color: #222;
text-align: right;
padding: 4px;
padding-right: 14px;
}
.saveRow > input.ui-button {
border: 1px solid #707274;
color: #ffffff;
background: #5c5e60;
outline-style: none;
}
.saveRow > input.ui-button:hover {
color: #ffffff;
border: 1px solid #808284;
background: #6c6e70;
}
.treeArea, .treeItemsArea {
width: 25%;
border: 1px solid #006400;
vertical-align: top;
}
.linkMarker {
color: #c16921;
}
.filteredValue {
background-color: #F8D93D;
}
.graphItemGr1Alt1 {
background-color: #EEEEEE;
}
.graphItemGr1Alt2 {
background-color: #EEEEEE;
}
.graphItemGr1Cust {
background-color: #D5D5D5;
}
.graphItemGr2Alt1 {
background-color: #E7E9F2;
}
.graphItemGr2Alt2 {
background-color: #E7E9F2;
}
.graphItemGr1Cust {
background-color: #D2D6E7;
}
.graphItemAdd {
background-color: #00438c;
}
.graphItemDel {
background-color: #C63636;
}
.graphItemHR {
color: #FF0000;
}
.hostUp {
color: #000000;
font-size: 10px;
font-weight: normal;
font-family: monospace;
}
.hostDown {
color: #ff0000;
font-size: 10px;
font-weight: normal;
font-family: monospace;
}
.cactiPageHead {
z-index: 10;
height: 45px;
width: 100%;
padding: 0px;
border-color: #222;
*/
box-shadow: inset 0 1px 0 rgba(255,255,255,.09);
*/
background-color: #100000;
*/
background-image: -webkit-gradient(linear, left 0%, left 100%, from(#3a3b3c), to(#100000));
background-image: -webkit-linear-gradient(top, #3a3b3c 0%, #100000 100%);
background-image: -moz-linear-gradient(top, #3a3b3c 0%, #100000 100%);
background-image: linear-gradient(to bottom, #3a3b3c 0%, #100000 100%);
background-repeat: repeat-x;
}
.cactiPageHead div {
left: 0;
top: 0;
}
.cactiPageHead #tabs {
overflow-x: auto;
overflow-y: hidden;
}
.cactiGraphPageHeadBackdrop {
padding-bottom: 0px;
float: right;
position: fixed;
}
.cactiPageBottom {
height: 25px;
line-height: 25px;
width: 100%;
border-color: #222;
*/
box-shadow: inset 0 1px 0 rgba(255,255,255,.09);
*/
background-color: #100000;
*/
background-image: -webkit-gradient(linear, left 0%, left 100%, from(#3a3b3c), to(#100000));
background-image: -webkit-linear-gradient(top, #3a3b3c 0%, #100000 100%);
background-image: -moz-linear-gradient(top, #3a3b3c 0%, #100000 100%);
background-image: linear-gradient(to bottom, #3a3b3c 0%, #100000 100%);
background-repeat: repeat-x;
text-align: right;
position: fixed;
bottom: 0px;
left: 0px;
}
.cactiPageBottom a {
color: #9d9d9d;
padding: 0px 8px;
text-decoration: none;
font-size: 16px;
outline-style: none;
}
.cactiConsolePageHeadBackdrop {
padding-bottom: 0px;
float: right;
position: fixed;
}
.navigation {
overflow: hidden;
}
.debug td {
padding: 3px;
margin: 0px;
}
.breadCrumbBar {
display: none !important;
}
.cactiContent {
clear: both;
width: 100%;
vertical-align: top;
background: #1D1F21;
background-image: linear-gradient(#1D1F21,#000000);
}
.cactiTreeNavigationArea {
overflow-y: auto;
overflow-x: hidden;
margin-left: 0px;
margin-right: 0px;
height: 100%;
float: left;
display: none;
color: #9d9d9d;
}
.cactiTreeNavigationArea a {
padding-right: 18px !important;
}
.cactiTreeNavigationArea div:first-child {
padding-left: 5px;
}
.cactiTreeSearch {
padding-top: 5px;
}
.jstree {
position: relative;
display: block;
}
.cactiContentNavigationArea {
overflow: hidden;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
vertical-align: top;
left: 0px;
}
.cactiConsoleNavigationArea {
overflow-y: auto !important;
overflow-x: hidden;
width: 170px;
height: 100%;
float: left;
}
.cactiLogo {
background: transparent url('./images/cacti_logo.svg') no-repeat 30px;
display: none;
cursor: pointer;
padding-bottom: 140px;
margin-bottom: 60px;
width: 156px;
margin-top: 10px;
margin-left: 2px;
margin-right: 2px;
height: 100px;
}
.cactiAuthLeft {
display: none;
}
.cactiAuthCenter {
position: absolute;
background-color: transparent;
width: 350px;
height: 200px;
top: 45%;
left: 50%;
padding: 10px 15px;
margin: -100px 0 0 -150px;
}
.cactiAuthCenter legend {
}
.cactiAuthLogo {
display: none;
}
.cactiAuthArea {
color: #9d9d9d;
padding: 20px;
border-radius: 10px;
background: #26282b;
border: 1px solid #3a3b3c;
}
.cactiAuthBody input:-webkit-autofill,
.cactiAuthBody input:-webkit-autofill:hover,
.cactiAuthBody input:-webkit-autofill:focus,
.cactiAuthBody input:-webkit-autofill:active {
-webkit-text-fill-color: #333333;
-webkit-box-shadow: 0 0 0 1000px #f5f5f5 inset;
caret-color: #333333;
transition: background-color 9999s ease-in-out 0s;
}
.cactiAuthTable td {
padding-bottom: 6px;
padding-right: 6px;
white-space: nowrap;
}
.cactiAuthTable input.ui-button {
border: 1px solid #707274;
color: #ffffff;
background: #5c5e60;
outline-style: none;
}
.cactiAuthTable input.ui-button:hover {
color: #ffffff;
border: 1px solid #808284;
background: #6c6e70;
}
.cactiAuthErrors {
color: red;
min-height: 15px;
}
legend {
color: #93CEFF;
font-size: 22px;
font-weight: bold;
}
.cactiAuthRight {
display: none;
width: 33%;
float: right;
}
.cactiAuthBody {
height: 100% !important;
width: 100% !important;
background: #1D1F21;
}
.versionInfo {
position: fixed;
right: 5px;
bottom: 5px;
color: #5CB85C;
}
.actionsDropdown {
vertical-align: middle;
padding: 3px;
width: 100%;
text-align: right;
display: table;
}
.actionsDropdown div {
display: table-row;
margin-top: auto;
margin-bottom: auto;
}
.actionsDropdown > div > span.ui-selectmenu-button {
background: #ffffff !important;
outline-style: none;
color: #555555;
border: 1px solid #bbbbbb;
}
.actionsDropdown > div > span.ui-selectmenu-button:hover,
.actionsDropdown > div > span.ui-selectmenu-button[aria-expanded="true"] {
outline-style: none;
color: #333333;
border: 1px solid #888888;
background: #ffffff !important;
}
.actionsDropdownButton {
vertical-align: top;
float: right;
margin-left: 3px;
padding-right: 14px;
display: table-cell;
}
.actionsDropdownButton > input.ui-button {
border: 1px solid #555555;
color: #ffffff;
background: linear-gradient(to bottom, #3a3b3c 0%, #100000 100%) !important;
outline-style: none;
padding: 4px;
}
.actionsDropdownButton > input.ui-button:hover {
color: #ffffff;
border: 1px solid #777777;
background: linear-gradient(to bottom, #4a4b4c 0%, #200000 100%) !important;
}
.actionsDropdownArrow {
margin-top: auto;
margin-bottom: auto;
float: left !important;
padding: 3px;
}
.cactiTooltipHint {
cursor: pointer;
padding: 5px;
font-size: 14px !important;
}
.spikekillData, .spikekillData td {
border: 1px solid #999;
}
.spikekillNote {
padding: 1px;
margin: 0px;
}
.spikekillMenu {
background: #f5f5f5 none repeat scroll 0 0;
border: 1px solid #979797;
box-shadow: 2px 2px 2px #999999;
margin: 0;
padding: 2px;
line-height: 1.5em;
}
.spikekillMenu li {
vertical-align: middle;
}
.spikekillMenu i {
text-align: center;
width: 2.0em;
display: inline-block;
}
.spikekillMenu i:empty {
width: 2.0em;
display: inline-block;
}
.cactiAuthPanel {
padding: 4px 0px;
}
.treeTable {
width: 100%;
}
.treeArea {
vertical-align: top;
}
.graphDrillDown {
padding: 10px 3px;
display: inline-block;
vertical-align: top;
align-self: left;
z-index: 4;
height: 100%;
height: 200px;
width: 22px;
min-width: 22px;
}
.graphWrapper {
padding: 10px 3px;
display: inline-block;
}
.graphWrapperOuter div {
color: rgb(157, 157, 157);
}
.cactiGraphContentArea {
height: 100vh;
display: none;
overflow-y: auto !important;
overflow-x: hidden !important;
border-left: 1px solid #000000;
}
.cactiGraphContentArea span[align="center"] {
color: #9d9d9d;
}
.cactiGraphContentArea .tableHeader > td {
color: white;
text-align: left;
padding: 3px 5px;
width: 100%;
font-size: 13px;
font-weight: 600;
text-transform: none;
border-color: #222;
background-image: linear-gradient(to bottom, #3a3b3c 0%, #100000 100%);
background-repeat: repeat-x;
}
.cactiGraphContentAreaPreview {
height: 100vh;
overflow-y: auto !important;
}
.cactiGraphContentAreaPreview span[align="center"] {
color: #9d9d9d;
}
.cactiGraphContentAreaPreview .cactitable {
background: none !important;
color: #CCC;
}
.cactiConsoleContentArea {
overflow-y: auto !important;
overflow-x: hidden;
border-left: 1px solid #000000;
height: 95vh;
}
#graph_view_preview2 table.cactiTable {
background: none !important;
}
#graph_view_tree_content2 table.cactiTable {
background: none !important;
}
#graph_view_preview2 .tableRow {
background: none !important;
}
#graph_view_tree_content2 .tableRow {
background: none !important;
}
.hyperLink {
color: #2d4ca8;
padding: 3px;
cursor: pointer;
text-decoration: none;
}
.iconLink {
width: 20px;
line-height: 20px;
display: inline-block;
}
.piinstall, .pienable, .pidisable, .piuninstall, .pierror, .piforceremove, .pirmdata, .piload, .pireadme, .pichangelog, .pirestore, .pirmarchive {
padding: 0px 3px !important;
}
.linkEditMain, .linkEditMain:visited, .linkEditMain:active {
color: #1b7a3d;
text-decoration: none;
font-size: 12px;
white-space: nowrap;
cursor: pointer;
}
.linkEditMain:hover {
color: #333333;
white-space: nowrap;
text-decoration: none;
}
.linkOverDark, .linkOverDark:visited, .linkOverDark:active {
color: white;
font-weight: normal;
text-decoration: none;
cursor: pointer;
}
.linkOverDark:hover {
color: white;
text-decoration: none;
}
.linkCopyDark, .linkCopyDark:visited, .linkCopyDark:active {
color: white;
font-weight: normal;
text-decoration: none;
cursor: pointer;
}
.linkCopyDark:hover {
color: white;
text-decoration: none;
}
/* text styles */
.textError {
font-size: 12px;
font-weight: bold;
color: red;
}
.textWarning {
font-size: 12px;
font-weight: normal;
color: #ee7600 !important;
}
.textInfo {
font-size: 12px;
color: #9d9d9d;
}
.textInfo.left {
color: #000000;
}
tr>td.textInfo.left {
background: #F7F7F7;
color: #000000;
}
tr>td.textInfo.right {
background: #F7F7F7;
color: #CCC;
}
.textHeader {
font-size: 12px;
font-weight: bold;
}
.textOverflow {
max-width: 200px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: block;
}
.bold {
font-weight: bold;
}
.remover {
cursor: pointer;
}
.messageContainer {
text-align: center;
position: absolute;
left: 30%;
right: 30%;
margin-left: auto;
margin-right: auto;
z-index: 4;
}
.messageBox {
padding: 1px;
margin-top: 2px;
border-radius: 3px;
background-color: white;
border: 1px solid #BBBBBB;
position: relative;
z-index: 4;
}
.textHeaderDark {
font-size: 12px;
font-weight: bold;
color: white;
}
.templateHeader {
background: rgba(0,0,0,0.55);
}
.templateHeader td {
padding: 3px;
}
.textSubHeaderDark, .textSubHeaderDark:visited {
outline-style: none;
}
.cactiBorderWall {
border-width: 1px;
border-color: #222222;
border-style: solid;
}
.cactiTable {
width: 100%;
margin-left: auto;
margin-right: auto;
border-color: #222;
color: #333333;
}
.cactiInstallLoaderSpinnerTheme {
border-top-color: #CCC !important;
}
.cactiTableTitleRow {
color: white;
float: left;
text-align: left;
padding-left: 3px;
display: block;
width: 100%;
height: 25px;
line-height: 25px;
font-size: 13px;
font-weight: 600;
border-color: #222;
background-image: linear-gradient(to bottom, #3a3b3c 0%, #100000 100%);
background-repeat: repeat-x;
}
.cactiTableTitle {
color: white;
float: left;
text-align: left;
padding-left: 3px;
vertical-align: middle;
display: block;
height: 25px;
line-height: 25px;
font-size: 13px;
font-weight: 600;
border-color: #222;
background-image: linear-gradient(to bottom, #3a3b3c 0%, #100000 100%);
background-repeat: repeat-x;
}
.cactiTableButton {
float: right;
padding: 0px;
display: block;
text-align: right;
vertical-align: middle;
font-size: 13px;
color: #FFF;
height: 25px;
line-height: 25px;
border-color: #222;
background-image: linear-gradient(to bottom, #3a3b3c 0%, #100000 100%);
background-repeat: repeat-x;
white-space: nowrap;
}
.cactiTableButton.debug {
background: transparent;
float: right;
padding: 0px;
padding-bottom: 3px;
margin-right: -5px;
}
.cactiTableButton span, .cactiTableTitle span {
padding: 0px;
white-space: nowrap;
overflow: hidden;
}
.cactiTableButton i {
padding: 0px 8px;
}
.cactiTableButton span:last-child i, .cactiTableTitle span:last-child i {
padding: 0px 8px !important;
}
.cactiDebugTable {
width: 100%;
}
.filterTable {
white-space: nowrap;
}
.filterTable td:first-child {
width: 55px;
min-width: 55px;
}
.filterTable td {
padding: 2px;
white-space: nowrap;
}
.filterTable td label {
vertical-align: 10%;
}
.filterTable .filterRow {
display: table-row;
}
.filterTable .filterColumn {
display: table-cell;
padding: 5px 0px 5px 5px;
text-align: left;
}
.filterTable .filterColumn label {
vertical-align: -10%;
}
.filterTable .filterColumn label.checkboxSwitch {
vertical-align: middle;
}
.filterTable .filterColumnButton {
display: table-cell;
padding: 5px 0px 5px 5px;
text-align: left;
}
.filterTable .filterColumn:first-child {
width: 55px;
}
/* Modern page filter dialog skin (page_filter_format = modern), scoped to the
cactiFilterDialog widget so other dialogs are unaffected. */
.cactiFilterModernBar .filterColumn,
.cactiFilterModernBar .filterColumnButton {
vertical-align: middle;
}
/* Narrow the regex Search box on the modern bar to the normal filter width. */
.cactiFilterModernBar input#rfilter {
width: 30ch;
}
.icon-rotate {
display: inline-block;
animation: fa-spin 1.5s linear infinite;
}
.cactiFilterModernBar .barSep {
display: inline-block;
width: 1px;
height: 20px;
margin: 0 6px;
background-color: rgba(128, 128, 128, 0.45);
vertical-align: middle;
}
.ui-dialog.cactiFilterDialog {
padding: 0;
border-radius: 6px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
overflow: hidden;
}
.ui-dialog.cactiFilterDialog .ui-dialog-titlebar {
border: 0;
border-radius: 0;
padding: 0 14px;
height: 25px;
line-height: 25px;
background: #357a39;
color: #ffffff;
font-size: 14px;
}
.ui-dialog.cactiFilterDialog .ui-dialog-title {
font-weight: bold;
}
.ui-dialog.cactiFilterDialog .ui-dialog-titlebar .ui-dialog-titlebar-close {
background: transparent;
border: 0;
color: inherit;
}
.ui-dialog.cactiFilterDialog .ui-dialog-titlebar-close .ui-icon {
background: none;
text-indent: 0;
color: inherit;
}
.ui-dialog.cactiFilterDialog .ui-dialog-titlebar-close .ui-icon::before {
content: '\00d7';
display: block;
width: 16px;
line-height: 16px;
font-size: 18px;
font-weight: bold;
text-align: center;
}
.ui-dialog.cactiFilterDialog .ui-dialog-content {
/* floor the content width so the table-display edit rows lay out instead of collapsing to min-content under the dialog's width:auto sizing */
min-width: 480px;
padding: 14px 16px;
}
.ui-dialog.cactiFilterDialog .cactiFilterEditTable {
white-space: normal;
}
.ui-dialog.cactiFilterDialog .cactiFilterEditRow .filterColumn:first-child {
min-width: 120px;
padding-right: 12px;
font-weight: bold;
}
.ui-dialog.cactiFilterDialog .cactiFilterEditRow .filterColumn:last-child select,
.ui-dialog.cactiFilterDialog .cactiFilterEditRow .filterColumn:last-child input[type="text"] {
min-width: 220px;
}
.ui-dialog.cactiFilterDialog .ui-dialog-buttonpane {
margin: 0;
border-top: 1px solid rgba(0, 0, 0, 0.12);
padding: 8px 12px;
}
.ui-dialog.cactiFilterDialog .ui-dialog-buttonpane .ui-button {
margin: 0 0 0 6px;
padding: 5px 14px;
}
.ui-dialog.cactiFilterDialog .ui-dialog-buttonpane .ui-button:first-child {
background: #357a39;
color: #ffffff;
border-color: rgba(0, 0, 0, 0.25);
}
.settingsFilter {
display: table;
white-space: nowrap;
}
.settingsFilter div {
display: table-cell;
padding: 5px 0px 5px 5px;
vertical-align: middle;
}
.pingRow {
padding-left: 5px;
min-height: 50px;
vertical-align: text-top;
display: table-cell;
margin: 0px;
}
.formRow {
display: table;
width: 100%;
line-height: 35px;
}
.checkboxgroup {
line-height: 25px;
}
.formColumn {
float: left;
display: table-column;
}
.formColumnLeft {
float: left;
display: table-column;
width: 45%;
text-align: left;
color: #000;
}
.formColumnRight {
float: left;
display: table-column;
width: 45%;
text-align: left;
color: #000;
}
.formData {
display: inline-block;
float: left;
}
.confirm_actions .formColumnLeft {
min-width: 10%;
max-width: 45%;
width: initial;
display: table-cell;
float: initial;
vertical-align: middle;
}
.confirm_actions .formColumnRight {
display: table-cell;
float: initial;
}
.confirm_actions label {
white-space: wrap;
}
.formFieldName {
display: inline-block;
color: #000;
float: left;
text-align: left;
padding-left: 3px;
}
.formFieldDescription {
float: left;
text-align: left;
font-weight: normal;
line-height: 14px;
}
.formTooltip {
display: inline-block;
}
.formHeader {
float: left;
width: 100%;
text-align: left;
font-size: 13px;
line-height: 25px;
text-transform: none;
background-image: -webkit-linear-gradient(top, #3a3b3c 0%, #100000 100%);
background-image: -moz-linear-gradient(top, #3a3b3c 0%, #100000 100%);
background-image: linear-gradient(to bottom, #3a3b3c 0%, #100000 100%);
background-repeat: repeat-x;
border-bottom: 1px solid #000;
}
.formHeaderAnchor {
float: right;
padding-right: 8px;
}
.formHeaderText {
padding-left: 3px;
color: #FFF;
}
.formConfirmRadio {
width: 10px;
}
.formConfirmRow {
margin: 3px;
}
.formConfirmRow td {
padding: 3px 8px;
}
.formConfirmRow td:first-child {
width: 1%;
}
.hostInfoHeader {
width: 100%;
}
@media screen and (max-width: 640px) {
.formRow {
display: table;
width: 100%;
line-height: 30px;
}
.formColumn {
float: left;
display: table-row;
}
.formColumnLeft {
float: left;
display: table-row;
width: 90%;
}
.formColumnRight {
float: left;
display: table-row;
width: 100%;
}
.formFieldName {
color: snow;
color: #000000;
float: left;
text-align: left;
white-space: nowrap;
padding-left: 3px;
}
.formData {
float: left;
}
.hostInfoHeader {
overflow: hidden;
}
.queryAdd, .templateAdd, .navBar, #ping_results {
display: none;
}
}
.graphItem {
background-color: #D5D5D5;
}
.graphItemAlternate {
background-color: #D2D6E7;
}
.break {
height: 0px;
}
.next {
padding-right: 6px;
padding-left: 6px;
}
.previous {
padding-right: 6px;
padding-left: 6px;
}
.cactiNavBarTop {
border-bottom: 1px solid rgba(0,0,0,0.5);
}
.cactiNavBarBottom {
background-color: #00438c;
}
.tableHeader {
display: table-row;
color: #000000;
font-weight: 700;
text-transform: uppercase;
border-bottom: 1px solid rgba(0,0,0,0.1);
}
.tableHeader th.sortable {
cursor: pointer !important;
line-height: 10px;
}
.tableHeader th, .tableHeader td {
color: #9d9d9d;
font-weight: 600;
vertical-align: middle;
text-align: left;
text-transform: none;
background-image: -webkit-linear-gradient(top, #3a3b3c 0%, #100000 100%);
background-image: -moz-linear-gradient(top, #3a3b3c 0%, #100000 100%);
background-image: linear-gradient(to bottom, #3a3b3c 0%, #100000 100%);
background-repeat: repeat-x;
}
.tableHeader th div {
display: block;
padding-right: 0px;
}
.tableHeaderColumnSelected {
color: white !important;
background: none;
box-shadow: inset 0 0 20px 0 rgba(0,0,0,.5);
border-bottom: 3px solid #5CB85C !important;
}
.tableHeaderColumnHover {
color: white !important;
}
.tableSubHeaderColumn, .tableSubHeaderColumnCenter, .tableSubHeaderColumnRight {
cursor: pointer;
text-align: left;
padding: 3px;
outline-style: none;
}
.tableSubHeaderColumnCenter {
text-align: center;
}
.tableSubHeaderColumnRight {
text-align: right;
}
.tablesorter-headerRow {
background-image: -webkit-linear-gradient(top, #3a3b3c 0%, #100000 100%);
background-image: -moz-linear-gradient(top, #3a3b3c 0%, #100000 100%);
background-image: linear-gradient(to bottom, #3a3b3c 0%, #100000 100%);
background-repeat: repeat-x;
border-bottom: 1px solid #000;
}
.tablesorter-headerDesc, .tablesorter-headerAsc {
color: white !important;
background: none !important;
box-shadow: inset 0 0 20px 0 rgba(0,0,0,.5) !important;
border-bottom: 3px solid #5CB85C !important;
}
.tablesorter-header-inner {
padding: 2px;
}
.tablesorter-headerUnSorted div.textSubHeaderDark {
color: #9d9d9d;
}
.graphSubHeaderColumn {
color: #white;
font-size: 12px;
vertical-align: middle;
text-align: left;
padding: 3px;
}
.tableSubHeaderCheckbox {
max-width: 20px;
width: 20px;
background: #3F75A2;
}
.image_table {
width: 100%;
}
.tableConfirmation {
width: 100%;
text-align: center;
background-color: #f5f5f5;
border: 1px solid #aaaaaa;
}
.navBar {
min-width: 30%;
white-space: nowrap;
}
.navBarNavigation {
border-color: #222;
background-image: -webkit-linear-gradient(top, #3a3b3c 0%, #100000 100%);
background-image: -moz-linear-gradient(top, #3a3b3c 0%, #100000 100%);
background-image: linear-gradient(to bottom, #3a3b3c 0%, #100000 100%);
background-repeat: repeat-x;
color: #9D9D9D;
width: 100%;
text-align: center;
line-height: 25px;
height: 25px;
margin-left: auto;
margin-right: auto;
}
.navBarNavigation a {
color: #9D9D9D;
}
.navBarNavigation a:hover {
color: #FFFFFF;
}
.navBarNavigationPrevious {
text-align: left;
cursor: pointer;
font-weight: bold;
float: left;
white-space: nowrap;
display: block;
width: 10%;
height: 25px;
vertical-align: middle;
background-image: -webkit-linear-gradient(top, #3a3b3c 0%, #100000 100%);
background-image: -moz-linear-gradient(top, #3a3b3c 0%, #100000 100%);
background-image: linear-gradient(to bottom, #3a3b3c 0%, #100000 100%);
background-repeat: repeat-x;
}
.navBarNavigationCenter {
text-align: center;
display: block;
float: left;
white-space: nowrap;
width: 80%;
height: 25px;
margin-top: auto;
background-image: -webkit-linear-gradient(top, #3a3b3c 0%, #100000 100%);
background-image: -moz-linear-gradient(top, #3a3b3c 0%, #100000 100%);
background-image: linear-gradient(to bottom, #3a3b3c 0%, #100000 100%);
background-repeat: repeat-x;
}
.navBarNavigationCenter span {
vertical-align: middle;
}
.navBarNavigationNext {
text-align: right;
cursor: pointer;
font-weight: bold;
float: right;
white-space: nowrap;
display: block;
width: 10%;
height: 25px;
vertical-align: middle;
background-image: -webkit-linear-gradient(top, #3a3b3c 0%, #100000 100%);
background-image: -moz-linear-gradient(top, #3a3b3c 0%, #100000 100%);
background-image: linear-gradient(to bottom, #3a3b3c 0%, #100000 100%);
background-repeat: repeat-x;
}
.navBarNavigationNone {
text-align: center;
display: block;
float: left;
white-space: nowrap;
width: 100%;
height: 25px;
margin-top: auto;
}
.navBarNavigationNext i.ui-icon {
margin-top: -16px;
margin-right: -16px;
top: 50%;
}
.navBarNavigationPrevious i.ui-icon {
margin-bottom: -16px;
margin-left: -16px;
top: 50%;
}
.textArea {
font-size: 12px;
background-color: #f5f5f5;
}
.textArea a {
font-size: 1.1em;
}
.popupBox {
position: absolute;
padding: 0px;
display: none;
overflow: auto;
color: white;
background-color: #e5e5e5;
border: 1px solid #e5e5e5;
}
.installArea {
background-color: white;
padding: 10px;
}
.cactiInstallArea {
background-color: #e5e5e5;
}
.textAreaNotes {
font-size: 12px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
.textEditTitle {
font-weight: bold;
}
.textMenuHeader {
color: white;
background-color: #9C9C9C;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
}
.textMenuItem {
background-color: #efefef;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
}
.textMenuSubItem {
background-color: white;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
}
.textMenuItemSelected {
background-color: #E1E1E1;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
}
.txtErrorTextBox {
border: 2px solid #ff0000 !important;
}
.txtErrorText {
color: #FF0000;
font-size: 12px;
font-weight: bold;
}
/* tabs */
.tabSpacer {
width: 0px;
padding-right: 2px;
padding-left: 0px;
}
.tabsMarginLeft {
padding-left: 2px;
}
.tabSelected {
background-color: silver;
white-space: nowrap;
width: 1%;
}
.tabNotSelected {
background-color: #dfdfdf;
white-space: nowrap;
width: 1%;
}
.deleteMarker {
color: rgba(0,0,0,0.6);
vertical-align: middle;
text-decoration: none !important;
padding-right: 7px !important;
display: inline-block !important;
width: 14.75px !important;
}
.deleteMarker:hover {
text-decoration: none !important;
}
.deleteMarkerDisabled {
display: inline-block !important;
width: 14.75px !important;
padding-right: 7px !important;
}
.moveArrow {
color: #00438C !important;
height: 14px !important;
display: inline-block !important;
width: 14.75px !important;
font-size: 14px !important;
vertical-align: middle;
text-decoration: none !important;
}
.moveArrow:hover {
text-decoration: none !important;
}
.moveArrowNone {
display: inline-block !important;
width: 14.75px !important;
}
.action, .shiftArrow, .calendar {
cursor: pointer;
padding: 2px;
}
td.tab {
border-top: 1px solid #999;
border-right: 1px solid #666;
border-left: 1px solid #999;
padding-left: 3px;
padding-right: 3px;
min-width: 0%;
border-bottom: none;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
-moz-border-radius-topright: 4px;
-moz-border-radius-topleft: 4px;
}
.cactiGraphHeaderBackground {
display: none;
}
div#gtabs {
padding-bottom: 0px;
vertical-align: bottom;
display: none !important;
position: fixed;
right: 5px;
top: 5px;
height: 30px;
}
.ellipsis {
width: 25px !important;
display: none;
}
.usertabs {
float: right !important;
width: 78px !important;
white-space: nowrap;
overflow: hidden;
right: 0;
}
.maintabs {
line-height: 30px;
float: left;
overflow: hidden;
height: 32px;
}
.maintabs a.lefttab, .usertabs a {
color: #9d9d9d;
float: left !important;
padding: 5px 8px;
text-decoration: none;
font-size: 18px;
vertical-align: bottom;
outline-style: none;
border-bottom: 3px solid transparent;
}
.usertabs {
float: right !important;
}
.usertabs nav ul {
float: right;
padding-right: 5px;
}
.usertabs a {
padding: 5px 6px;
display: block;
}
.maintabs-has-submenu a {
padding: 5px 4px 5px 9px;
}
.maintabs a.lefttab:hover, .maintabs a:hover {
color: white;
background: none;
}
.maintabs a.selected {
color: white !important;
background: none;
box-shadow: inset 0 0 20px 0 rgba(0,0,0,.5);
border-bottom: 3px solid #5CB85C;
}
.maintabs nav {
display: block;
}
.maintabs li {
bottom: -1px;
float: left;
}
.maintabs-submenu {
display: none;
}
#menu-tab-graphs.maintabs-submenu, .maintabs-submenu-ellipsis a {
padding: 5px 5px 5px 0px;
color: #9d9d9d;
float: left !important;
text-decoration: none;
font-size: 18px;
vertical-align: bottom;
outline-style: none;
border-bottom: 3px solid transparent;
display: block;
}
.maintabs-submenu i, .maintabs-submenu-ellipsis i {
font-size: 18px;
}
.maintabs-submenu i:hover, .maintabs-submenu-ellipsis i:hover {
color: #fff;
}
div.submenu {
display: none;
position: absolute;
border: 2px solid #2d4ca8;
top: 0;
left: 0;
z-index: 200;
}
div.submenu span {
display: block;
}
.tabs {
float: left;
width: 100%;
line-height: 20px;
border-color: #222;
background-image: -webkit-linear-gradient(top, #3a3b3c 0%, #100000 100%);
background-image: -moz-linear-gradient(top, #3a3b3c 0%, #100000 100%);
background-image: linear-gradient(to bottom, #3a3b3c 0%, #100000 100%);
background-repeat: repeat-x;
}
.tabs a {
color: #9d9d9d;
float: left !important;
padding: 5px 8px;
font-size: 14px;
vertical-align: bottom;
text-decoration: none;
outline-style: none;
border-bottom: 3px solid transparent;
}
.tabs a:hover {
color: white;
}
.tabs nav a.selected {
color: white;
background: none;
box-shadow: inset 0 0 20px 0 rgba(0,0,0,.5);
border-bottom: 3px solid #5CB85C;
}
.tabs li {
bottom: -1px;
float: left;
margin: 0 3px 0 0;
position: relative;
}
.tabs li.current a, .maintabs li.current a {
background: #fff;
border-bottom: 1px solid #fff;
}
.tabs li.current a:hover, .maintabs li.current a:hover {
background: #fff;
border-bottom: 1px solid #fff;
}
.tabs nav {
border-bottom: 1px solid #000;
}
.tabs nav:after, .maintabs nav:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
}
.tabs ul, .maintabs ul {
list-style: none;
margin: 0;
padding: 0;
}
tr td:last-child .checkbox {
margin-right: 10px !important;
}
tr th:last-child .checkbox {
margin-right: 10px !important;
}
/* Navigation Area */
#nav {
float: left;
font-size: 12px;
margin: 0px 0;
}
#nav li a {
display: block;
padding: 2px 4px 2px 7px;
color: #93CEFF;
text-decoration: none;
}
#nav li a.active {
font-weight: 600;
font-size: 14px;
color: #93CEFF;
}
#nav li a.active:hover {
color: white;
}
th {
border-right: 1px groove #9d9d9d;
height: 18px;
}
th:last-child {
border-right: none !important;
}
tr.selected {
background: #AAAAAA !important;
color: #000000;
}
tr.selected td:first-child {
border-left: 10px solid #5CB85C !important;
}
tr.selected a.linkEditMain:visited {
color: #00008B;
}
tr:not(.selectable) a.linkEditMain:hover {
color: orange;
}
tr.selectable {
border-left: 10px solid transparent !important;
white-space: nowrap;
}
tr.selectable:hover a.linkEditMain,
tr.selectable a.linkEditMain:hover {
color: #7ee787;
}
tr.selectable:hover:not(.selected) {
background: #1D1F21;
color: #fff;
}
tr.selected a {
color: #0000CD;
}
#nav li a.pic:hover:not(.selected), #nav li a.menu_parent:hover:not(.selected) {
}
#nav li a.selected {
color: white;
}
#nav li ul {
display: none;
padding: 0;
border-left: 5px solid #5CB85C;
}
#nav li ul li a {
padding: 2px 4px 2px 35px;
outline-style: none;
}
#nav li ul li a:hover {
color: white;
}
#nav li ul li {
list-style: none;
padding: 0;
}
ul#nav {
list-style: none;
padding: 0;
width: 100%;
}
.clogError {
background-color: #FF3932;
}
.clogWarning {
background-color: #EACC00;
}
.clogSQL {
background-color: #6DC8FE;
}
.clogDebug {
background-color: #C4FD3D;
}
.clogStats {
background-color: #96E78A;
}
.clogLimit {
background-color: #EACC00;
}
.clogStats td, .clogDebug td, .clogSQL td, .clogWarning td, .clogError td, .clogLimit td {
padding: 3px;
}
@media print {
html {
--graph-print-background: #1d1f21;
}
.noprint {
display: none;
}
}
.ui-tooltip {
max-width: 500px;
word-break: break-word;
}
.ui-tooltip-content div.header {
color: #3f75a2;
}
.ui-tooltip-content div.content {
font-size: 10px;
color: #333333;
}
.ui-tooltip-content {
overflow: auto !important;
opacity: 0.95;
border: transparent;
}
.ui-selectmenu-search input {
width: 100%;
}
div.preformatted {
font-family: monospace;
white-space: pre;
}
ul.pagination {
display: inline-block;
padding: 0;
margin: 0;
vertical-align: middle;
}
ul.pagination li {
display: inline;
}
ul.pagination li a {
color: #9D9D9D;
float: left;
padding: 0px 2px 2px 2px;
text-decoration: none;
margin: 0px 1px;
}
ul.pagination li span {
float: left;
padding: 0px 0px;
text-decoration: none;
margin: 0px 1px;
}
ul.pagination li a.active {
color: white;
background: none;
box-shadow: inset 0 0 20px 0 rgba(0,0,0,.5);
border-bottom: 1px solid #5CB85C;
}
ul.pagination li a:hover:not(.active) {
color: #FFFFFF;
}
tr#realtime td:first-child {
height: 68px;
}
.logEmergency {
background-color: rgba(255, 6, 6, 0.4);
text-align: center;
width: 12.5%;
color: rgb(211, 211, 211);
}
.logCritical {
background-color: rgba(242, 23, 33, 0.4);
text-align: center;
width: 12.5%;
color: rgb(211, 211, 211);
}
.logAlert {
background-color: rgba(242, 25, 36, 0.4);
text-align: center;
width: 12.5%;
color: rgb(211, 211, 211);
}
.logWarning {
background-color: rgba(255, 122, 48, 0.4);
text-align: center;
width: 12.5%;
color: rgb(211, 211, 211);
}
.logError {
background-color: rgba(251, 74, 20, 0.4);
text-align: center;
width: 12.5%;
color: rgb(211, 211, 211);
}
.logNotice {
background-color: rgba(250, 253, 158, 0.4);
text-align: center;
width: 12.5%;
color: rgb(211, 211, 211);
}
.logInfo {
background-color: rgba(204, 255, 204, 0.4);
text-align: center;
width: 12.5%;
color: rgb(211, 211, 211);
}
.logDebug {
background-color: rgba(205, 207, 196, 0.4);
text-align: center;
width: 12.5%;
color: rgb(211, 211, 211);
}
.darkblue {
background: #2d4ca8;
}
.ui-corner-all {
border-radius: 0px !important;
-moz-border-radius-bottomright: 0px !important;
-moz-border-radius-bottomleft: 0px !important;
-moz-border-radius-topright: 0px !important;
-moz-border-radius-topleft: 0px !important;
}
.menuitem {
white-space: nowrap;
}
.menu_glyph {
font-size: 18px !important;
vertical-align: middle;
text-align: left;
width: 22px;
padding-right: 0px !important;
display: inline-block;
}
.submenu_glyph {
width: 20px;
vertical-align: 10%;
}
.menuitem span {
}
.resetHover {
color: black;
}
.dropdownMenu {
font-family: Verdana,Arial,sans-serif;
}
.hostInfoHeader {
background: none repeat scroll 0 0 #fbfdff;
}
.ui-autocomplete {
height: 300px;
overflow-y: scroll;
overflow-x: hidden;
}
.ui-select-text input {
width: 180px;
margin: 0;
padding: 0;
background: transparent;
}
.ui-multiselect-checkboxes span {
font-size: 12px;
}
.ui-multiselect-header {
background-color: #E5E5E5;
margin-bottom: 3px;
}
.ui-multiselect, .ui-multiselect-button, .ui-selectmenu-button {
padding: 0.3em 0.5em !important;
text-align: left;
line-height: initial;
}
.ui-multiselect-filter, .ui-widget-header {
font-weight: normal !important;
}
.ui-multiselect-header ul {
height: 20px;
float: left;
}
.ui-multiselect-filter {
margin-bottom: 4px;
}
.ui-multiselect-filter-label > input {
padding: 2px;
margin-left: 4px;
}
.ui-widget {
font-size: unset;
}
.ui-checkboxradio-icon {
display: none;
}
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover {
color: white;
background-image: linear-gradient(to bottom, #3a3b3c 0%, #100000 100%);
background-repeat: repeat-x;
}
/* New Checkbox Stuff */
.checkboxSwitch {
position: relative;
display: inline-block;
width: 45px;
height: 24px;
margin-right: 5px;
vertical-align: middle;
}
.checkboxSwitch input {
display: none;
}
.checkboxSlider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #aaa;
-webkit-transition: .4s;
transition: .4s;
}
.checkboxSlider:before {
position: absolute;
content: "";
height: 16px;
width: 16px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .checkboxSlider {
background-color: #3a3b3c;
}
input:disabled + .checkboxSlider {
cursor: not-allowed;
}
input:focus + .checkboxSlider {
box-shadow: 0 0 1px #3a3b3c;
}
input:checked + .checkboxSlider:before {
-webkit-transform: translateX(20px);
-ms-transform: translateX(20px);
transform: translateX(20px);
}
/* Rounded.checkboxSliders */
.checkboxSlider.checkboxRound {
border-radius: 24px;
}
.checkboxSlider.checkboxRound:before {
border-radius: 50%;
}
.checkboxLabelWanted {
display: inline-block;
margin-left: 5px;
margin-right: 10px;
}
.right {
text-align: right;
}
.radioSwitch {
position: relative;
display: inline-block;
margin-left: 5px;
margin-right: 5px;
height: 24px;
width: 24px;
vertical-align: middle;
}
.radioSwitch input {
display: none;
}
.radioSlider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 24px;
height: 24px;
background-color: #aaa;
-webkit-transition: .4s;
transition: .4s;
}
.radioSlider:before {
display: none;
position: absolute;
content: "";
height: 16px;
width: 16px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .radioSlider {
background-color: #3a3b3c;
}
input:disabled + .radioSlider {
cursor: not-allowed;
}
input:focus + .radioSlider {
box-shadow: 0 0 1px #3a3b3c;
}
input:checked + .radioSlider:before {
display: inline-block;
}
/* Rounded.radioSliders */
.radioSlider.radioRound {
border-radius: 24px;
}
.radioSlider.radioRound:before {
border-radius: 50%;
}
.radioLabelWanted {
display: inline-block;
margin-left: 5px;
margin-right: 10px;
vertical-align: middle;
line-height: 20px;
}
td.center > table {
margin: 0 auto;
}
.ui-menu-item-wrapper {
white-space: nowrap;
}
.ui-tabs-active .ui-tabs-anchor {
color: #FFFFFF !important;
}
.bb-chart {
}
.bb-chart-arc path {
fill: #A8A8A8;
}
.bb-tooltip {
}
.bb-legend-item {
fill: #A8A8A8;
}
.bb-grid {
fill: #A8A8A8;
}
.bb-axis {
fill: #A8A8A8;
}
/*-- Chart --*/
.bb svg {
font: 10px sans-serif;
-webkit-tap-highlight-color: transparent;
}
.bb path, .bb line {
fill: none;
stroke: #E0E0E0;
}
.bb text {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.bb-legend-item-tile,
.bb-xgrid-focus,
.bb-ygrid,
.bb-event-rect,
.bb-bars path {
shape-rendering: crispEdges;
}
.bb-chart-arc path {
stroke: #fff;
}
.bb-chart-arc text {
fill: #fff;
font-size: 13px;
}
/*-- Axis --*/
/*-- Grid --*/
.bb-grid line {
stroke: #aaa;
}
.bb-grid text {
fill: #aaa;
}
.bb-xgrid, .bb-ygrid {
stroke-dasharray: 3 3;
}
/*-- Text on Chart --*/
.bb-text.bb-empty {
fill: #808080;
font-size: 2em;
}
/*-- Line --*/
.bb-line {
stroke-width: 1px;
}
/*-- Point --*/
.bb-circle._expanded_ {
stroke-width: 1px;
stroke: white;
}
.bb-selected-circle {
fill: white;
stroke-width: 2px;
}
/*-- Bar --*/
.bb-bar {
stroke-width: 0;
}
.bb-bar._expanded_ {
fill-opacity: 0.75;
}
/*-- Focus --*/
.bb-target.bb-focused {
opacity: 1;
}
.bb-target.bb-focused path.bb-line, .bb-target.bb-focused path.bb-step {
stroke-width: 2px;
}
.bb-target.bb-defocused {
opacity: 0.3 !important;
}
/*-- Region --*/
.bb-region {
fill: steelblue;
fill-opacity: .1;
}
/*-- Brush --*/
.bb-brush .extent {
fill-opacity: .1;
}
/*-- Select - Drag --*/
/*-- Legend --*/
.bb-legend-item {
font-size: 12px;
}
.bb-legend-item-hidden {
opacity: 0.15;
}
.bb-legend-background {
opacity: 0.75;
fill: white;
stroke: lightgray;
stroke-width: 1;
}
/*-- Title --*/
.bb-title {
font: 14px sans-serif;
}
/*-- Area --*/
.bb-area {
stroke-width: 0;
opacity: 0.2;
}
/*-- Arc --*/
.bb-chart-arcs-title {
dominant-baseline: middle;
font-size: 1.3em;
}
.bb-chart-arcs .bb-chart-arcs-background {
fill: #E0E0E0;
stroke: none;
}
.bb-chart-arcs .bb-chart-arcs-gauge-unit {
fill: #000;
font-size: 16px;
}
.bb-chart-arcs .bb-chart-arcs-gauge-max {
fill: #777;
}
.bb-chart-arcs .bb-chart-arcs-gauge-min {
fill: #777;
}
.bb-chart-arc .bb-gauge-value {
fill: #000;
/* font-size: 28px !important;*/
}
.bb-button .bb-zoom-reset {
font-size: 11px;
border: solid 1px #161616;
background-color: #161616;
padding: 5px;
color: snow;
border-radius: 5px;
cursor: pointer;
}
circle {
stroke: #7e818f;
stroke-width: 1px;
fill: transparent !important;
}
[id*='_edit'] .tableHeader:hover, .tableHeader:hover td {
background: none repeat scroll 0 0 rgba(200,200,200,0.8) !important;
}
.tableHeaderGraph {
color: rgb(157, 157, 157);
background-image: linear-gradient(to bottom, #3a3b3c 0%, #100000 100%);
background-repeat: repeat-x;
}
.tableHeaderGraph span {
color: rgb(157, 157, 157);
padding: 3px;
line-height: 22px;
}
.actionHelp {
color:#00758F !important;
}
.plusAdd {
color:#CE3500 !important;
}
.actionCog {
color:#FDAC53 !important;
}
.fileCSV {
color:#9BB7D4 !important;
}
.threeBars {
color:#B55A30 !important;
}
.editDevice {
color:#F5DF4D !important;
}
.editTemplate {
color:#0072B5 !important;
}
.realTime {
color:#A0DAA9 !important;
}
.spikeKill {
color:#E9897E !important;
}
.newDevice {
color:#00A170 !important;
}
.newGraph {
color:#926AA6 !important;
}
.reindexDevice {
color:#D2386C !important;
}
.enableDebug {
color:#363945 !important;
}
.disableDebug {
color:#939597 !important;
}
.repopulateCache {
color:#EFE1CE !important;
}
.viewCache {
color:#E0B589 !important;
}
.viewGraphs {
color:#9A8B4F !important;
}
.viewSources {
color:#56C6A9 !important;
}
.expandAggregate {
color:#9BB7D4 !important;
}
.ui-state-default, .ui-selectmenu-button, .ui-button {
border: 1px solid #d3d3d3;
background: #f5f5f5 !important;
font-weight: normal;
color: #555555;
}
.ui-button {
background: #5c5e60 !important;
color: #ffffff !important;
border: 1px solid #707274 !important;
}
.ui-button:hover, .ui-button:focus {
background: #6c6e70 !important;
background-image: none !important;
color: #ffffff !important;
border: 1px solid #808284 !important;
}
/* Secondary buttons (type=button): lighter than the primary submit buttons */
input[type='button'].ui-button {
background: #e6e6e6 !important;
color: #555555 !important;
border: 1px solid #d3d3d3 !important;
}
input[type='button'].ui-button:hover, input[type='button'].ui-button:focus {
background: #dadada !important;
background-image: none !important;
color: #212121 !important;
border: 1px solid #999999 !important;
}
.ui-selectmenu-button, .ui-multiselect {
background: #ffffff !important;
color: #555555 !important;
border: 1px solid #bbbbbb !important;
}
.ui-selectmenu-button:hover, .ui-multiselect:hover {
background: #ffffff !important;
background-image: none !important;
color: #333333 !important;
border: 1px solid #888888 !important;
}
/* Select2 - adapt to look like a native Cacti/jQuery UI control.
Select2 4.x ships no jQuery UI theme, so these overrides reuse this
theme's own jquery-ui.css/main.css colors (see .ui-widget-content /
.ui-state-hover / .ui-state-active) to match its look and feel. */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
border: 1px solid #d3d3d3;
border-radius: 6px;
background: #f5f5f5;
color: #555555;
}
/* match jQuery UI's shorter button height */
.select2-container--default .select2-selection--single {
height: 24px;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
line-height: 24px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
height: 22px;
}
/* match the multi-select (e.g. Templates) control to the single-select height;
flexbox centers content vertically regardless of font metrics */
.select2-container--default .select2-selection--multiple {
min-height: 24px;
padding: 0 20px 0 0;
display: flex;
flex-wrap: wrap;
align-items: center;
}
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
display: block;
flex: 1;
margin: 0;
padding-left: 8px;
overflow: hidden;
line-height: 24px;
}
/* select2-multi-count always replaces the rendered area with "N Selected" text;
only hide the inline search-while-typing box while closed (it doesn't fit
that display and was inflating the control's height) - let it reappear once
the dropdown opens, since that's the only place multi-selects can search from */
select.select2-multi-count.select2-hidden-accessible + .select2-container:not(.select2-container--open) .select2-search--inline {
display: none;
}
.select2-selection--multiple .select2-count-label {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* once open, let the search box sit on its own row below the current
selection instead of overlapping it */
.select2-container--default .select2-selection--multiple .select2-search--inline {
display: block;
width: 100%;
margin: 4px 0 0;
}
.select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field {
width: 100% !important;
box-sizing: border-box;
margin: 0 !important;
}
/* select2 doesn't draw a dropdown arrow for multi-selects by default; add one to match */
.select2-container--default .select2-selection--multiple::after {
content: '';
position: absolute;
top: 50%;
right: 8px;
margin-top: -2px;
border-color: currentColor transparent transparent transparent;
border-style: solid;
border-width: 5px 4px 0 4px;
height: 0;
width: 0;
pointer-events: none;
}
.select2-container--default.select2-container--open .select2-selection--multiple::after {
border-color: transparent transparent currentColor transparent;
border-width: 0 4px 5px 4px;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.select2-results__option {
white-space: nowrap;
min-height: 24px;
box-sizing: border-box;
}
/* keep the first 15 results visible before the list needs to scroll */
.select2-container--default .select2-results > .select2-results__options {
max-height: 360px;
}
/* checkbox-style indicator for select2-multi-count option rows */
.select2-results__option .select2-checkbox-option {
position: relative;
display: block;
padding-left: 20px;
}
.select2-results__option .select2-checkbox-option::before {
content: '';
position: absolute;
left: 0;
top: 50%;
width: 13px;
height: 13px;
margin-top: -7px;
border: 1px solid currentColor;
border-radius: 2px;
box-sizing: border-box;
}
/* select2 also (re)uses aria-selected for mouse-hover/keyboard highlight
* tracking, unrelated to actual selection - key off the --selected class
* instead, which setClasses() only ever sets from the real selected data */
.select2-results__option.select2-results__option--selected .select2-checkbox-option::after {
content: '\2713';
position: absolute;
left: 2px;
top: 50%;
margin-top: -7px;
font-size: 11px;
line-height: 13px;
}
.select2-container--default .select2-selection--single .select2-selection__rendered,
.select2-container--default .select2-selection--single .select2-selection__placeholder {
color: #333333;
}
/* select2 keeps --focus set after the dropdown closes; only --open should get the active look */
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--multiple {
border-color: #888888;
background: #ffffff;
color: #333333;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
border-top-color: #222222;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
background: #dadada;
border: 1px solid #aaaaaa;
color: #212121;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
color: #212121;
}
.select2-dropdown {
border: 1px solid #aaaaaa;
background: #ffffff;
color: #222222;
}
.select2-container--default .select2-search--dropdown .select2-search__field,
.select2-container--default .select2-search--inline .select2-search__field {
border: 1px solid #aaaaaa;
background: #ffffff;
color: #222222;
}
.select2-container--default .select2-results__option--selected {
background: #dadada;
color: #212121;
}
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
background: #dadada;
color: #212121;
}
/* ======================================================================== */
/* jsTree glyph icons - node type colors, sizing, and open/close carets */
/* ======================================================================== */
/* remove the indent/connector dotted lines (also disabled via dots:false) */
.jstree-default .jstree-node { background: transparent !important; }
/* node type glyphs, centered in the 20px node row */
.jstree-default .jstree-anchor > .jstree-themeicon {
background-image: none !important;
font-size: 14px;
line-height: 20px;
text-align: center;
vertical-align: middle;
}
.jstree-default .jstree-anchor > .jstree-themeicon.ti-folder { color: #F9A825; }
.jstree-default .jstree-anchor > .jstree-themeicon.ti-sitemap { color: #546E7A; }
.jstree-default .jstree-anchor > .jstree-themeicon.ti-building { color: #00897B; }
.jstree-default .jstree-anchor > .jstree-themeicon.ti-map-pin { color: #E53935; }
.jstree-default .jstree-anchor > .jstree-themeicon.ti-server { color: #1E88E5; }
.jstree-default .jstree-anchor > .jstree-themeicon.ti-server-cog { color: #8E24AA; }
.jstree-default .jstree-anchor > .jstree-themeicon.ti-list-search { color: #0097A7; }
.jstree-default .jstree-anchor > .jstree-themeicon.ti-chart-line { color: #388E3C; }
.jstree-default .jstree-anchor > .jstree-themeicon.ti-chart-histogram { color: #F57C00; }
.jstree-default .jstree-anchor > .jstree-themeicon.ti-chart-infographic { color: #C2185B; }
/* open/close carets as glyphs, centered to match the node glyphs */
/* scoped to non-loading nodes so the AJAX loading throbber is preserved */
.jstree-default .jstree-node:not(.jstree-loading) > .jstree-ocl {
background: none !important;
font-family: "tabler-icons";
font-size: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
height: 20px;
color: #78909C;
}
.jstree-default .jstree-closed:not(.jstree-loading) > .jstree-ocl::before { content: "\ea61"; }
.jstree-default .jstree-open:not(.jstree-loading) > .jstree-ocl::before { content: "\ea5f"; }
.jstree-default .jstree-leaf:not(.jstree-loading) > .jstree-ocl::before { content: ""; }
/* Tree search box sits in the dark tree nav area - keep it dark with light text */
#searcher {
background: #262626 !important;
color: #ffffff !important;
border: 1px solid #555555 !important;
}
/* Device status pills - translucent badges per state (matches the Deepness theme) */
.deviceStatus {
display: inline-block;
padding: 1px 9px;
border: 1px solid transparent;
border-radius: 10px;
font-size: 11px;
font-weight: 600;
line-height: 16px;
white-space: nowrap;
}
.deviceStatus.deviceUp {
background-color: rgba(46, 125, 50, 0.16);
border-color: rgba(46, 125, 50, 0.55);
color: #1b5e20 !important;
}
.deviceStatus.deviceDown {
background-color: rgba(198, 40, 40, 0.16);
border-color: rgba(198, 40, 40, 0.55);
color: #b71c1c !important;
}
.deviceStatus.deviceRecovering {
background-color: rgba(230, 126, 34, 0.16);
border-color: rgba(230, 126, 34, 0.55);
color: #d35400 !important;
}
.deviceStatus.deviceError {
background-color: rgba(123, 31, 162, 0.16);
border-color: rgba(123, 31, 162, 0.5);
color: #6a1b9a !important;
}
.deviceStatus.deviceUnknown {
background-color: rgba(21, 101, 192, 0.16);
border-color: rgba(21, 101, 192, 0.5);
color: #0d47a1 !important;
}
.deviceStatus.deviceDisabled {
background-color: rgba(97, 97, 97, 0.16);
border-color: rgba(97, 97, 97, 0.5);
color: #424242 !important;
}
/*
* Filter-table toggle switches (1.2.x). Render the raw filter checkboxes
* (<input type='checkbox'> directly inside a .filterTable wrapper) as on/off
* toggle switches styled to match this theme's form checkboxSlider, with the
* label text first and the switch second. form_checkbox() sliders (class
* 'formCheckbox') already render this way and are left untouched.
*/
.filterTable span:has(> input[type='checkbox']:not(.formCheckbox)),
.filterTable div:has(> input[type='checkbox']:not(.formCheckbox)) {
display: inline-flex;
flex-direction: row-reverse;
align-items: center;
gap: 6px;
}
.filterTable input[type='checkbox']:not(.formCheckbox) {
-webkit-appearance: none;
appearance: none;
box-sizing: border-box;
position: relative;
flex: 0 0 auto;
width: 45px;
height: 24px;
margin: 0;
padding: 0;
border-radius: 24px !important;
background: #aaaaaa;
cursor: pointer;
vertical-align: middle;
transition: background 0.4s;
}
.filterTable input[type='checkbox']:not(.formCheckbox)::before {
content: '';
position: absolute;
top: 4px;
left: 4px;
width: 16px;
height: 16px;
border-radius: 50%;
background: #ffffff;
transition: transform 0.4s;
}
.filterTable input[type='checkbox']:not(.formCheckbox):checked {
background: #3a3b3c;
}
.filterTable input[type='checkbox']:not(.formCheckbox):checked::before {
transform: translateX(20px);
}
.filterTable input[type='checkbox']:not(.formCheckbox):focus-visible {
outline: 2px solid #3a3b3c;
outline-offset: 1px;
}
.filterTable input[type='checkbox']:not(.formCheckbox):disabled {
opacity: 0.6;
cursor: not-allowed;
}
.filterTable input[type='checkbox']:not(.formCheckbox) + label {
cursor: pointer;
}
/* Graph drilldown action menu palette (consumed by include/css/graph_drilldown.css). */
:root {
--cacti-dd-fg: #ffffff;
--cacti-dd-menu-bg: rgba(10,11,13,0.60);
--cacti-dd-menu-bg-open: rgba(10,11,13,0.86);
--cacti-dd-panel-bg: rgba(29,31,33,0.92);
--cacti-dd-border: rgba(255,255,255,0.16);
--cacti-dd-accent: #7cb342;
}