mirror of
https://github.com/Cacti/cacti.git
synced 2026-11-03 10:37:46 +09:00
TheWitness
356f4ae813
* fix(graphs): reveal graph content area after tree branch loads The jstree select_node handler hides .cactiGraphContentArea (#navigation_right) before loading a branch's graphs via AJAX to avoid flashing the previous branch, but the only re-show was coupled to a window resize event that does not fire after the AJAX load. On themes that hide .cactiGraphContentArea by default (e.g. Deepness) the content area stayed display:none and the graphs/filters were invisible. Re-show it on loadUrl completion. * fix(filter): keep the Edit Filter dialog columns from collapsing The modern filter Edit dialog is created with jQuery UI width:'auto'. Its body is a table-based label/field grid, which jQuery UI measures at min-content, collapsing the dialog content to a sliver and pushing the fields off to the right. Floor the content min-width so the columns lay out. Validated in Deepness and Dark. * fix(graphs): centre single-column graphs in the graph view graphWrapperOuter > div:first-child is width:fit-content inside a (full-width for one column) flex wrapper, so the graph rendered flush-left. Add auto horizontal margins so it centres; the absolutely-positioned drilldown toggle continues to track the graph. * fix(graphs): don't re-show content area on aborted branch load A superseding tree branch click aborts the in-flight loadUrl; its .always() must not re-show the content area the new selection just hid, or stale graphs flash while the new branch loads. Skip completions whose textStatus is 'abort'.
3003 lines
52 KiB
CSS
3003 lines
52 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 */
|
|
|
|
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;
|
|
-ms-overflow-style: scrollbar;
|
|
}
|
|
|
|
body {
|
|
margin: 0px;
|
|
background-color: white;
|
|
background-repeat: repeat-y;
|
|
overflow: hidden;
|
|
}
|
|
|
|
textarea {
|
|
font-family: 'Segoe UI', 'Segoe UI Web Regular', 'Segoe UI Symbol', 'Helvetica Neue', 'BBAlpha Sans', 'S60 Sans', Arial, sans-serif;
|
|
font-size: 1.0em;
|
|
padding: 5px;
|
|
width: 400px;
|
|
height: 100px;
|
|
-webkit-box-sizing: border-box;
|
|
-moz-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
table {
|
|
border-collapse: collapse;
|
|
border-spacing: 0;
|
|
border: none;
|
|
text-align: left;
|
|
}
|
|
|
|
td, th {
|
|
padding: 0px;
|
|
margin: 0px;
|
|
}
|
|
|
|
th {
|
|
white-space: nowrap;
|
|
height: 20px;
|
|
line-height: 20px;
|
|
}
|
|
|
|
img {
|
|
border: none;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
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: rgba(119,0,119,1);
|
|
text-decoration: none;
|
|
font-size: 12px;
|
|
}
|
|
|
|
a:hover {
|
|
text-decoration: none;
|
|
color: #333333;
|
|
}
|
|
|
|
i.fa, i.fas, i.fab, i.far, i.fal {
|
|
font-size: 15px;
|
|
padding: 0px 3px;
|
|
text-align: left;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
th .fa {
|
|
margin-top: -5px;
|
|
position: absolute;
|
|
right: 3px;
|
|
top: 50%;
|
|
}
|
|
|
|
#main {
|
|
display: none;
|
|
width: 100%;
|
|
position: relative;
|
|
z-index: 0;
|
|
}
|
|
|
|
input, select {
|
|
padding: 0.4em 0.4em 0.4em 0.4em;
|
|
}
|
|
|
|
label {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
#tab-console {
|
|
display: inline-block;
|
|
background-image: url('images/berry.svg');
|
|
background-size: 32px;
|
|
background-position: 45% 45%;
|
|
background-repeat: no-repeat;
|
|
min-width: 32px;
|
|
overflow: hidden;
|
|
margin: 0;
|
|
}
|
|
|
|
.glyph_tab-console:before {
|
|
display: inline-block;
|
|
content: '';
|
|
}
|
|
|
|
.text_tab-console {
|
|
display: none;
|
|
}
|
|
|
|
.nowrap {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.prewrap {
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
.top {
|
|
vertical-align: top;
|
|
}
|
|
|
|
.right {
|
|
text-align: right !important;
|
|
}
|
|
|
|
.left {
|
|
text-align: left;
|
|
}
|
|
|
|
.center {
|
|
text-align: center !important;
|
|
}
|
|
|
|
.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: rgba(148, 179, 107, 0.8);
|
|
}
|
|
|
|
.notBeingGraphed {
|
|
color: #484848;
|
|
}
|
|
|
|
.submenuoptions {
|
|
background: white;
|
|
border-width: 0px 3px 3px 3px;
|
|
border-color: rgba(119,119,0,119.7);
|
|
border-style: solid;
|
|
position: absolute;
|
|
top: 45px;
|
|
list-style: none;
|
|
text-align: left;
|
|
margin: 0px;
|
|
padding: 10px 0px 10px 0px;
|
|
}
|
|
|
|
.submenuoptions li a {
|
|
display: block;
|
|
padding: 2px 15px 2px 15px;
|
|
font-size: 14px;
|
|
font-weight: lighter;
|
|
color: rgba(119,119,0,119.9);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.submenuoptions li a:hover {
|
|
display: block;
|
|
background: rgba(119,119,0,119.1);
|
|
}
|
|
|
|
.menuoptions {
|
|
background: white;
|
|
border-width: 0px 3px 3px 3px;
|
|
border-color: rgba(119,119,0,119.7);
|
|
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: 2px 15px 2px 15px;
|
|
font-size: 14px;
|
|
font-weight: lighter;
|
|
color: rgba(119,119,0,119.9);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.menuoptions li a:hover {
|
|
display: block;
|
|
background: rgba(119,119,0,119.1);
|
|
}
|
|
|
|
.import_label {
|
|
opacity: 1;
|
|
}
|
|
|
|
.import_button {
|
|
display: none;
|
|
opacity: 0;
|
|
}
|
|
|
|
.import_text {
|
|
opacity: 1;
|
|
color: #2d4ca8;
|
|
}
|
|
|
|
.color-icon {
|
|
background-image: none !important;
|
|
}
|
|
|
|
.emailtest {
|
|
cursor: pointer;
|
|
display: block;
|
|
float: right;
|
|
text-align: right;
|
|
padding: 0px 5px 0px 0px;
|
|
}
|
|
|
|
.reloadquery {
|
|
cursor: pointer;
|
|
padding: 2px;
|
|
vertical-align: middle;
|
|
color: lime;
|
|
font-weight: bold;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.verbosequery {
|
|
cursor: pointer;
|
|
padding: 2px;
|
|
vertical-align: middle;
|
|
color: rgba(255, 204, 0, 0.8);
|
|
font-size: 14px;
|
|
}
|
|
|
|
.deletequery {
|
|
cursor: pointer;
|
|
padding: 2px;
|
|
vertical-align: middle;
|
|
color: red !important;
|
|
font-weight: bold;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.deletequery:hover {
|
|
color: red !important;
|
|
text-decoration: none;
|
|
padding: 2px;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.odd {
|
|
background: none repeat scroll 0 0 #F5F5F5;
|
|
border: none;
|
|
}
|
|
|
|
.odd td, .even td, .even-alternate td {
|
|
min-height: 20px !important;
|
|
line-height: 20px;
|
|
}
|
|
|
|
.even {
|
|
background: none repeat scroll 0 0 rgba(159,0,159,0.1);
|
|
border: none;
|
|
}
|
|
|
|
.even-alternate {
|
|
#background: none repeat scroll 0 0 #E7E9F2;
|
|
#background-color: #E7E9F2;
|
|
border: none;
|
|
#box-shadow: 0 0 1px rgba(119, 0, 119, 0.1);
|
|
}
|
|
|
|
.saveRow {
|
|
background-color: #EAEAEA;
|
|
text-align: right;
|
|
padding: 4px;
|
|
padding-right: 14px;
|
|
}
|
|
|
|
.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 {
|
|
background-color: rgba(119,0,119,1);
|
|
height: 45px;
|
|
width: 100%;
|
|
padding: 0px;
|
|
}
|
|
|
|
.cactiPageHead div {
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
|
|
.cactiPageHead #tabs {
|
|
overflow-x: auto;
|
|
overflow-y: hidden;
|
|
}
|
|
|
|
.cactiGraphPageHeadBackdrop {
|
|
padding-bottom: 0px;
|
|
float: right;
|
|
position: fixed;
|
|
}
|
|
|
|
.cactiPageBottom {
|
|
background-color: rgba(119,119,0,119.7);
|
|
height: 15px;
|
|
width: 100%;
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.cactiTreeNavigationArea {
|
|
background: #f0f0f0;
|
|
overflow-y: auto;
|
|
margin-left: 0px;
|
|
margin-right: 0px;
|
|
height: 100%;
|
|
float: left;
|
|
display: none;
|
|
}
|
|
|
|
.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 {
|
|
background: #f0f0f0;
|
|
overflow-y: auto !important;
|
|
width: 167px;
|
|
height: 100%;
|
|
float: left;
|
|
}
|
|
|
|
.cactiLogo {
|
|
background: #efefef url('./images/cacti_logo.svg') no-repeat 30px;
|
|
display: table;
|
|
cursor: pointer;
|
|
padding-bottom: 140px;
|
|
margin-bottom: 60px;
|
|
width: 156px;
|
|
margin-top: 10px;
|
|
margin-left: 2px;
|
|
margin-right: 2px;
|
|
}
|
|
|
|
.cactiAuthLogo {
|
|
display: hidden;
|
|
position: relative;
|
|
background: none;
|
|
#background: transparent url('./images/cacti_logo.svg') no-repeat 30px;
|
|
width: 130px;
|
|
height: 148px;
|
|
z-index: 2;
|
|
margin-top: -310px;
|
|
margin-left: 250px;
|
|
}
|
|
|
|
.cactiAuthCenter {
|
|
width: 350px;
|
|
}
|
|
|
|
.cactiAuthCenter hr {
|
|
display:none;
|
|
}
|
|
|
|
.cactiAuthArea {
|
|
-moz-border-radius: 10px;
|
|
border-radius: 10px;
|
|
padding: 15px;
|
|
background-color: white;
|
|
top: 30%;
|
|
width: 360px;
|
|
max-height: 300px;
|
|
background: #ffffff;
|
|
border: 1px solid #cccccc;
|
|
}
|
|
|
|
.cactiAuthBody input:-webkit-autofill,
|
|
.cactiAuthBody input:-webkit-autofill:hover,
|
|
.cactiAuthBody input:-webkit-autofill:focus,
|
|
.cactiAuthBody input:-webkit-autofill:active {
|
|
-webkit-text-fill-color: #000000;
|
|
-webkit-box-shadow: 0 0 0 1000px #ffffff inset;
|
|
caret-color: #000000;
|
|
transition: background-color 9999s ease-in-out 0s;
|
|
}
|
|
|
|
.cactiAuthTitle {
|
|
padding-top: 5px;
|
|
padding-bottom: 5px;
|
|
}
|
|
|
|
.cactiAuthTable td {
|
|
padding-bottom: 6px;
|
|
padding-right: 6px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.cactiAuthErrors {
|
|
color: red;
|
|
min-height: 20px;
|
|
}
|
|
|
|
legend {
|
|
font-size: 22px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.cactiAuthBody {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: #2d4ca8;
|
|
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzJkNGNhOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxYTE5NWUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
|
|
background: -moz-linear-gradient(left, rgba(79,0,79,1) 0%, rgba(119,0,119,0.7) 100%);
|
|
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(79,0,79,1)), color-stop(100%,rgba(119,0,119,0.7)));
|
|
background: -webkit-linear-gradient(left, rgba(79,0,79,1) 0%,rgba(119,0,119,0.7) 100%);
|
|
background: -o-linear-gradient(left, rgba(79,0,79,1) 0%,rgba(119,0,119,0.7) 100%);
|
|
background: -ms-linear-gradient(left, rgba(79,0,79,1) 0%,rgba(119,0,119,0.7) 100%);
|
|
background: linear-gradient(to right, rgba(79,0,79,1) 0%,rgba(119,0,119,0.7) 100%);
|
|
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2d4ca8', endColorstr='#1a195e',GradientType=1 );
|
|
}
|
|
|
|
.cactiAuthPanel {
|
|
padding: 4px 0px;
|
|
}
|
|
|
|
.versionInfo {
|
|
padding-top: 5px;
|
|
float: right;
|
|
margin-top: 15px;
|
|
color: white;
|
|
}
|
|
|
|
.actionsDropdown {
|
|
vertical-align: middle;
|
|
padding: 3px;
|
|
width: 100%;
|
|
text-align: right;
|
|
display: table;
|
|
}
|
|
|
|
.actionsDropdown div {
|
|
display: table-row;
|
|
margin-top: auto;
|
|
margin-bottom: auto;
|
|
}
|
|
|
|
.actionsDropdownButton {
|
|
vertical-align: top;
|
|
float: right;
|
|
margin-left: 3px;
|
|
padding-right: 14px;
|
|
display: table-cell;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.loginPanel {
|
|
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;
|
|
}
|
|
|
|
.cactiGraphContentArea {
|
|
height: 100vh;
|
|
overflow-y: auto !important;
|
|
overflow-x: hidden !important;
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.cactiGraphContentArea>div:last-child {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.cactiGraphContentAreaPreview {
|
|
height: 100vh;
|
|
overflow-y: auto !important;
|
|
overflow-x: hidden !important;
|
|
padding-left: 10px;
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.cactiGraphContentAreaPreview>div:last-child {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.cactiConsoleContentArea {
|
|
height: 100vh;
|
|
overflow-y: auto !important;
|
|
overflow-x: hidden !important;
|
|
padding-left: 10px;
|
|
}
|
|
|
|
.cactiConsoleContentArea>div:last-child {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.hyperLink {
|
|
color: #2d4ca8;
|
|
font-size: 12px;
|
|
padding: 3px;
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.iconLink {
|
|
}
|
|
|
|
.iconLink img {
|
|
padding-bottom: 2px;
|
|
}
|
|
|
|
.piinstall, .pienable, .pidisable, .piuninstall, .pierror, .piforceremove, .pirmdata, .piload, .pireadme, .pichangelog, .pirestore, .pirmarchive {
|
|
padding: 0px 3px !important;
|
|
}
|
|
|
|
.linkEditMain, .linkEditMain:visited, .linkEditMain:active {
|
|
color: #a84ca8;
|
|
text-decoration: none;
|
|
font-size: 12px;
|
|
white-space: nowrap;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.linkEditMain:hover {
|
|
color: yellow;
|
|
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;
|
|
color: red;
|
|
}
|
|
|
|
.textWarning {
|
|
font-size: 12px;
|
|
color: #ee7600 !important;
|
|
}
|
|
|
|
.textInfo {
|
|
font-size: 12px;
|
|
color: black;
|
|
}
|
|
|
|
.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;
|
|
display: none;
|
|
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(119,119,0,119.55);
|
|
}
|
|
|
|
.templateHeader td {
|
|
padding: 3px;
|
|
}
|
|
|
|
.textSubHeaderDark, .textSubHeaderDark:visited {
|
|
font-size: 11px;
|
|
color: white;
|
|
font-weight: bold;
|
|
padding: 0px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.cactiBorderWall {
|
|
border-width: 1px;
|
|
border-color: #E5E5E5;
|
|
border-style: solid;
|
|
}
|
|
|
|
.cactiTable {
|
|
display: table;
|
|
width: 100%;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.cactiInstallLoaderSpinnerTheme {
|
|
border-top-color: rgba(119,119,0,119.9) !important;
|
|
}
|
|
|
|
.cactiTableTitleRow {
|
|
color: white;
|
|
float: left;
|
|
text-align: left;
|
|
height: 24px;
|
|
padding: 2px;
|
|
display: table-column;
|
|
width: 100%;
|
|
font-size: 1em;
|
|
font-weight: 700;
|
|
background: rgba(102,0,102,0.7);
|
|
}
|
|
|
|
.cactiTableTitle {
|
|
color: white;
|
|
float: left;
|
|
text-align: left;
|
|
line-height: 22px;
|
|
display: table-column;
|
|
font-size: 1em;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.cactiTableButton {
|
|
float: right;
|
|
line-height: 22px;
|
|
display: table-column;
|
|
text-align: right;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.cactiTableButton.debug {
|
|
background: transparent;
|
|
float: right;
|
|
padding: 0px;
|
|
padding-bottom: 3px;
|
|
margin-right: -5px;
|
|
}
|
|
|
|
.cactiTableButton span, .cactiTableTitle span {
|
|
color: white;
|
|
padding: 0px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.cactiTableButton i {
|
|
padding: 0px 8px;
|
|
}
|
|
|
|
.cactiTableButton span:last-child, .cactiTableTitle span:last-child {
|
|
padding: 0px 5px;
|
|
}
|
|
|
|
.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: 28px;
|
|
line-height: 28px;
|
|
background: #a3184b;
|
|
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: #a3184b;
|
|
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: 30px;
|
|
}
|
|
|
|
.formColumn {
|
|
float: left;
|
|
display: table-column;
|
|
text-align: left;
|
|
}
|
|
|
|
.formColumnLeft {
|
|
float: left;
|
|
display: table-column;
|
|
width: 45%;
|
|
text-align: left;
|
|
}
|
|
|
|
.formColumnRight {
|
|
float: left;
|
|
display: table-column;
|
|
width: 45%;
|
|
text-align: left;
|
|
}
|
|
|
|
.formData {
|
|
display: inline-block;
|
|
float: left;
|
|
text-align: 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;
|
|
}
|
|
|
|
.formRadio {
|
|
line-height: 22px;
|
|
}
|
|
|
|
.formSubCheckbox {
|
|
line-height: 20px;
|
|
height: 20px;
|
|
float: left;
|
|
}
|
|
|
|
.formSubCheckbox input {
|
|
margin: 0px;
|
|
vertical-align: -10%;
|
|
}
|
|
|
|
.formSubCheckbox label {
|
|
}
|
|
|
|
.formCheckbox {
|
|
vertical-align: -15%;
|
|
}
|
|
|
|
.formFieldName {
|
|
display: inline-block;
|
|
color: #000000;
|
|
float: left;
|
|
text-align: left;
|
|
font-weight: bold;
|
|
padding-left: 3px;
|
|
}
|
|
|
|
.formFieldDescription {
|
|
float: left;
|
|
text-align: left;
|
|
font-weight: normal;
|
|
line-height: 14px;
|
|
}
|
|
|
|
.formTooltip {
|
|
display: inline-block;
|
|
padding-left: 4px;
|
|
}
|
|
|
|
.formHeader {
|
|
float: left;
|
|
width: 100%;
|
|
text-align: left;
|
|
line-height: 22px;
|
|
background: rgba(119, 0, 119, 0.55) none repeat scroll 0 0;
|
|
color: white;
|
|
font-weight: bold;
|
|
padding: 3px;
|
|
}
|
|
|
|
.formHeaderText {
|
|
padding-left: 3px;
|
|
}
|
|
|
|
.formHeaderAnchor {
|
|
float: right;
|
|
padding-right: 4px;
|
|
}
|
|
|
|
.formConfirmRadio {
|
|
width: 10px;
|
|
}
|
|
|
|
.formConfirmRow {
|
|
margin: 3px;
|
|
}
|
|
|
|
.formConfirmRow td {
|
|
padding: 3px 8px;
|
|
}
|
|
|
|
.formConfirmRow td:first-child {
|
|
width: 1%;
|
|
}
|
|
|
|
.hostInfoHeader {
|
|
width: 100%;
|
|
}
|
|
|
|
.queryAdd, .templateAdd {
|
|
padding: 3px;
|
|
}
|
|
|
|
@media screen and (max-width: 640px) {
|
|
.formRow {
|
|
display: table;
|
|
width: 100%;
|
|
line-height: 35px;
|
|
}
|
|
|
|
.formColumn {
|
|
float: left;
|
|
display: table-row;
|
|
color: #000000;
|
|
}
|
|
|
|
.formColumnLeft {
|
|
float: left;
|
|
display: table-row;
|
|
width: 90%;
|
|
color: #000000;
|
|
text-align: left;
|
|
}
|
|
|
|
.formColumnRight {
|
|
float: left;
|
|
display: table-row;
|
|
width: 100%;
|
|
color: #000000;
|
|
text-align: left;
|
|
}
|
|
|
|
.formFieldName {
|
|
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;
|
|
}
|
|
|
|
.ui-button-text-only .ui-button-text {
|
|
padding: 0.4em;
|
|
}
|
|
}
|
|
|
|
.graphItem {
|
|
background-color: #D5D5D5;
|
|
}
|
|
|
|
.graphItemAlternate {
|
|
background-color: #D2D6E7;
|
|
}
|
|
|
|
.break {
|
|
height: 4px;
|
|
}
|
|
|
|
.next {
|
|
padding-right: 6px;
|
|
padding-left: 6px;
|
|
}
|
|
|
|
.previous {
|
|
padding-right: 6px;
|
|
padding-left: 6px;
|
|
}
|
|
|
|
.cactiNavBarTop {
|
|
border-bottom: 1px solid rgba(119,119,0,119.5);
|
|
}
|
|
|
|
.cactiNavBarBottom {
|
|
background-color: #00438c;
|
|
}
|
|
|
|
.tableHeader {
|
|
display: table-row;
|
|
color: white;
|
|
background: rgba(109,0,109,0.55);
|
|
}
|
|
|
|
th.sortable {
|
|
cursor: pointer;
|
|
line-height: 10px;
|
|
}
|
|
|
|
.tableHeader th {
|
|
color: white;
|
|
cursor: pointer;
|
|
vertical-align: middle;
|
|
text-align: left;
|
|
font-size: 11px;
|
|
font-weight: bold;
|
|
padding: 2px;
|
|
}
|
|
|
|
.tableHeader th div {
|
|
display: block;
|
|
padding-right: 0px;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.tableHeaderColumnSelected {
|
|
background: rgba(109,0,109,1);
|
|
}
|
|
|
|
.tableHeaderColumnHover {
|
|
background: rgba(119,119,0,119.4);
|
|
}
|
|
|
|
.tableSubHeaderColumn, .tableSubHeaderColumnCenter, .tableSubHeaderColumnRight {
|
|
font-weight: bold;
|
|
vertical-align: middle;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
padding: 3px;
|
|
}
|
|
|
|
.tableSubHeaderColumnCenter {
|
|
text-align: center;
|
|
}
|
|
|
|
.tableSubHeaderColumnRight {
|
|
text-align: right;
|
|
}
|
|
|
|
.graphSubHeaderColumn {
|
|
color: white;
|
|
font-size: 12px;
|
|
vertical-align: middle;
|
|
text-align: left;
|
|
padding: 3px;
|
|
}
|
|
|
|
.tableSubHeaderCheckbox {
|
|
max-width: 20px;
|
|
width: 20px;
|
|
background: #a275A2;
|
|
}
|
|
|
|
.tableHeaderGraph {
|
|
background: rgba(102,0,102,0.7);
|
|
height: 25px;
|
|
}
|
|
|
|
.tableHeaderGraph span {
|
|
padding: 3px;
|
|
color: white;
|
|
vertical-align: top;
|
|
line-height: 22px;
|
|
}
|
|
|
|
.tableRow td {
|
|
line-height: 25px !important;
|
|
}
|
|
|
|
.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 {
|
|
display: table;
|
|
color: rgba(119,119,0,119.9);
|
|
width: 100%;
|
|
text-align: center;
|
|
height: 20px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.navBarNavigationPrevious {
|
|
text-align: left;
|
|
white-space: nowrap;
|
|
display: table-cell;
|
|
width: 10%;
|
|
height: 20px;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.navBarNavigationCenter {
|
|
text-align: center;
|
|
display: table-cell;
|
|
white-space: nowrap;
|
|
width: 80%;
|
|
height: 20px;
|
|
margin-top: auto;
|
|
}
|
|
|
|
.navBarNavigationCenter span {
|
|
vertical-align: middle;
|
|
display: table-cell;
|
|
}
|
|
|
|
.navBarNavigationNext {
|
|
text-align: right;
|
|
white-space: nowrap;
|
|
display: table-cell;
|
|
width: 10%;
|
|
padding: 2px 0px;
|
|
height: 20px;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.navBarNavigationNone {
|
|
text-align: center;
|
|
display: table-cell;
|
|
white-space: nowrap;
|
|
width: 100%;
|
|
height: 20px;
|
|
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 {
|
|
#z-index: 2;
|
|
position: absolute;
|
|
padding: 0px;
|
|
display: none;
|
|
overflow: auto;
|
|
color: white;
|
|
background-color: #e5e5e5;
|
|
border: 1px solid #e5e5e5;
|
|
}
|
|
|
|
.installArea {
|
|
background-color: white;
|
|
padding: 10px;
|
|
}
|
|
|
|
.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%;
|
|
}
|
|
|
|
.subTab a {
|
|
height: 14px;
|
|
border-bottom: 1px solid #555 !important;
|
|
}
|
|
|
|
.deleteMarker {
|
|
color: rgba(119,119,0,119.6);
|
|
vertical-align: middle;
|
|
text-decoration: none !important;
|
|
display: inline-block !important;
|
|
width: 14.75px !important;
|
|
}
|
|
|
|
.deleteMarker:hover {
|
|
text-decoration: none !important;
|
|
}
|
|
|
|
.deleteMarkerDisabled {
|
|
color: rgba(119,119,0,119.6);
|
|
vertical-align: middle;
|
|
text-decoration: none !important;
|
|
display: inline-block !important;
|
|
width: 14.75px !important;
|
|
}
|
|
|
|
.deleteMarkerDisabled:hover {
|
|
text-decoration: none !important;
|
|
}
|
|
|
|
.moveArrow {
|
|
color: #00438C !important;
|
|
height: 14px !important;
|
|
font-size: 14px !important;
|
|
display: inline-block !important;
|
|
width: 14.75px !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;
|
|
}
|
|
|
|
.maintabs {
|
|
line-height: 35px;
|
|
float: left;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.maintabs a.lefttab, .usertabs a {
|
|
color: #fff;
|
|
float: left !important;
|
|
padding: 5px 8px;
|
|
text-decoration: none;
|
|
font-size: 18px;
|
|
vertical-align: bottom;
|
|
}
|
|
|
|
.maintabs a:hover {
|
|
background-color: rgba(255,255,255,0.3);
|
|
}
|
|
|
|
.maintabs a.selected {
|
|
background-color: rgba(162,117,162,0.8);
|
|
}
|
|
|
|
.maintabs a:active {
|
|
font-size: 18px;
|
|
}
|
|
|
|
.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: #fff;
|
|
float: left !important;
|
|
text-decoration: none;
|
|
font-size: 18px;
|
|
vertical-align: bottom;
|
|
display: block;
|
|
}
|
|
|
|
.maintabs-submenu i, .maintabs-submenu-ellipsis i {
|
|
color: #fff;
|
|
padding-left: 2px;
|
|
font-size: 18px;
|
|
border-left: 1px solid #ccc;
|
|
}
|
|
|
|
div.submenu {
|
|
display: none;
|
|
position: absolute;
|
|
border: 2px solid #2d4ca8;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 200;
|
|
}
|
|
|
|
div.submenu span {
|
|
display: block;
|
|
}
|
|
|
|
.tabs a {
|
|
background-color: #ddd;
|
|
background-image: -moz-linear-gradient(#f0f0f0,#ddd);
|
|
background-image: -ms-linear-gradient(#f0f0f0,#ddd);
|
|
background-image: -webkit-linear-gradient(#f0f0f0,#ddd);
|
|
background-image: linear-gradient(#f0f0f0,#ddd);
|
|
background-repeat: repeat-x;
|
|
border: 1px solid #555;
|
|
border-color: #eee #ccc #ccc #eee;
|
|
color: #333;
|
|
float: left !important;
|
|
padding: 5px 8px;
|
|
text-decoration: none;
|
|
font-size: 11px;
|
|
vertical-align: bottom;
|
|
}
|
|
|
|
.tabs a:hover {
|
|
background-color: #ddd;
|
|
background-image: -moz-linear-gradient(#e0e0e0,#ccc);
|
|
background-image: -ms-linear-gradient(#e0e0e0,#ccc);
|
|
background-image: -webkit-linear-gradient(#e0e0e0,#ccc);
|
|
background-image: linear-gradient(#e0e0e0,#ccc);
|
|
background-repeat: repeat-x;
|
|
}
|
|
|
|
.tabs nav a.selected {
|
|
color: white;
|
|
border-bottom: 1px solid rgba(162,117,162,0.8);
|
|
background: rgba(162,117,162,0.8);
|
|
}
|
|
|
|
.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 #ccc;
|
|
}
|
|
|
|
.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;
|
|
border-top: 0px solid #999;
|
|
border-right: 0px solid #999;
|
|
border-left: 0px solid #999;
|
|
font-size: 12px;
|
|
margin: 0px 0;
|
|
}
|
|
|
|
#nav li a {
|
|
display: block;
|
|
padding: 2px 4px 2px 5px;
|
|
background: #ccc;
|
|
color: rgba(119,119,0,119.9);
|
|
text-decoration: none;
|
|
}
|
|
|
|
#nav li a.active {
|
|
font-weight: 600;
|
|
font-size: 14px;
|
|
background: #f0f0f0;
|
|
color: rgba(79, 0, 79, 1);
|
|
}
|
|
|
|
th {
|
|
border-right: 1px groove #eee;
|
|
}
|
|
|
|
th:last-child {
|
|
border-right: none !important;
|
|
}
|
|
|
|
tr.selected {
|
|
color: white;
|
|
background: rgba(119,0,119,1);
|
|
}
|
|
|
|
tr.selected a.linkEditMain:visited {
|
|
color: yellow;
|
|
}
|
|
|
|
tr:not(.selectable) a.linkEditMain:hover {
|
|
color: #2d4ca8;
|
|
}
|
|
|
|
tr.selectable a.linkEditMain:hover {
|
|
color: blue;
|
|
}
|
|
|
|
tr.selectable:hover:not(.selected) {
|
|
background: rgba(119,0,119,0.3);
|
|
}
|
|
|
|
tr.selectable td {
|
|
height: 25px;
|
|
}
|
|
|
|
tr.selected a {
|
|
color: yellow;
|
|
}
|
|
|
|
#nav li a.pic:hover:not(.selected), #nav li a.menu_parent:hover:not(.selected) {
|
|
background: rgba(224,224,224,1);
|
|
}
|
|
|
|
#nav li a.selected {
|
|
color: white;
|
|
background: rgba(109,0,109,1);
|
|
}
|
|
|
|
#nav li ul {
|
|
display: none;
|
|
padding: 0;
|
|
}
|
|
|
|
#nav li ul li a {
|
|
padding: 2px 4px 2px 35px;
|
|
background: #f0f0f0;
|
|
}
|
|
|
|
#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 {
|
|
.noprint {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.ui-tooltip {
|
|
max-width: none !important;
|
|
}
|
|
|
|
.ui-tooltip-content div.header {
|
|
color: #3f75a2;
|
|
}
|
|
|
|
.ui-tooltip-content div.content {
|
|
font-size: 10px;
|
|
color: #333333;
|
|
}
|
|
|
|
.ui-tooltip-content {
|
|
max-width: 500px !important;
|
|
overflow: auto !important;
|
|
opacity: 0.95;
|
|
border-radius: 5px !important;
|
|
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 {
|
|
float: left;
|
|
padding: 0px 2px 2px 2px;
|
|
text-decoration: none;
|
|
margin: 0px 1px;
|
|
vertical-align: -40%;
|
|
}
|
|
|
|
ul.pagination li span {
|
|
float: left;
|
|
padding: 0px 0px;
|
|
text-decoration: none;
|
|
margin: 0px 1px;
|
|
}
|
|
|
|
ul.pagination li a.active {
|
|
background: #000000; /*rgba(109,0,109,1);*/
|
|
color: white;
|
|
}
|
|
|
|
ul.pagination li a:hover:not(.active) {
|
|
background: #f0f0f0;
|
|
}
|
|
|
|
tr#realtime td:first-child {
|
|
height: 68px;
|
|
}
|
|
|
|
.logEmergency {
|
|
background-color: rgba(250, 116, 32, 0.2);
|
|
text-align: center;
|
|
width: 12.5%;
|
|
color: black;
|
|
}
|
|
|
|
.logCritical {
|
|
background-color: rgba(242, 23, 33, 0.2);
|
|
text-align: center;
|
|
width: 12.5%;
|
|
color: black;
|
|
}
|
|
|
|
.logAlert {
|
|
background-color: rgba(242, 25, 36, 0.2);
|
|
text-align: center;
|
|
width: 12.5%;
|
|
color: black;
|
|
}
|
|
|
|
.logWarning {
|
|
background-color: rgba(255, 122, 48, 0.2);
|
|
text-align: center;
|
|
width: 12.5%;
|
|
color: black;
|
|
}
|
|
|
|
.logError {
|
|
background-color: rgba(251, 74, 20, 0.2);
|
|
text-align: center;
|
|
width: 12.5%;
|
|
color: black;
|
|
}
|
|
|
|
.logNotice {
|
|
background-color: rgba(250, 253, 158, 0.2);
|
|
text-align: center;
|
|
width: 12.5%;
|
|
color: black;
|
|
}
|
|
|
|
.logInfo {
|
|
background-color: rgba(204, 255, 204, 0.2);
|
|
text-align: center;
|
|
width: 12.5%;
|
|
color: black;
|
|
}
|
|
|
|
.logDebug {
|
|
background-color: rgba(205, 207, 196, 0.2);
|
|
text-align: center;
|
|
width: 12.5%;
|
|
color: black;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
#graph_view_tree_content2_child > tbody > .tableHeader {
|
|
background: rgba(109,0,109,0.9);
|
|
}
|
|
|
|
.menuitem {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.menu_glyph {
|
|
font-size: 18px;
|
|
width: 20px;
|
|
padding-right: 3px;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.ui-autocomplete {
|
|
height: 300px;
|
|
overflow-y: scroll;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.ui-select-text input {
|
|
width: 180px;
|
|
margin: 0;
|
|
padding: 0;
|
|
background: transparent;
|
|
}
|
|
|
|
.ui-multiselect {
|
|
padding: 0.4em 1em;
|
|
text-align: left;
|
|
line-height: initial;
|
|
}
|
|
|
|
.ui-multiselect .ui-icon {
|
|
margin-top: 0px;
|
|
}
|
|
|
|
.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: rgba(119,119,0,119.9);
|
|
}
|
|
|
|
/* New Checkbox Stuff */
|
|
.checkboxSwitch {
|
|
position: relative;
|
|
display: inline-block;
|
|
width: 45px;
|
|
height: 24px;
|
|
margin-left: 5px;
|
|
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: rgba(59, 0, 59, 0.55);
|
|
-webkit-transition: .4s;
|
|
transition: .4s;
|
|
}
|
|
|
|
.checkboxSlider:before {
|
|
position: absolute;
|
|
content: "";
|
|
height: 16px;
|
|
width: 16px;
|
|
left: 4px;
|
|
bottom: 4px;
|
|
background-color: white;
|
|
background-image: url('./images/cacti_logo.svg');
|
|
background-repeat: no-repeat;
|
|
background-size: 7px;
|
|
background-position: center;
|
|
-webkit-transition: .4s;
|
|
transition: .4s;
|
|
}
|
|
|
|
input:checked + .checkboxSlider {
|
|
background-color: rgba(179,0,179,0.9);
|
|
}
|
|
|
|
input:disabled + .checkboxSlider {
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
input:focus + .checkboxSlider {
|
|
box-shadow: 0 0 1px #2196F3;
|
|
}
|
|
|
|
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;
|
|
height: 24px;
|
|
width: 24px;
|
|
background-color: rgba(119, 0, 119, 0.55);
|
|
-webkit-transition: .4s;
|
|
transition: .4s;
|
|
}
|
|
|
|
.radioSlider:before {
|
|
display: none;
|
|
position: absolute;
|
|
content: "";
|
|
height: 16px;
|
|
width: 16px;
|
|
left: 4px;
|
|
bottom: 4px;
|
|
background-color: white;
|
|
background-image: url('./images/cacti_logo.svg');
|
|
background-repeat: no-repeat;
|
|
background-size: 7px;
|
|
background-position: center;
|
|
-webkit-transition: .4s;
|
|
transition: .4s;
|
|
}
|
|
|
|
input:checked + .radioSlider {
|
|
background-color: rgba(119,119,0,119.9);
|
|
}
|
|
|
|
input:disabled + .radioSlider {
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
input:focus + .radioSlider {
|
|
box-shadow: 0 0 1px #2196F3;
|
|
}
|
|
|
|
input:checked + .radioSlider:before {
|
|
display: 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-button {
|
|
padding: .4em .4em;
|
|
}
|
|
|
|
.cactiLogo {
|
|
display: none;
|
|
}
|
|
|
|
.actionHelp {
|
|
color:#00758F !important;
|
|
}
|
|
|
|
.plusAdd {
|
|
color:#CE3500 !important;
|
|
}
|
|
|
|
.actionCog {
|
|
color:#FDAC53 !important;
|
|
}
|
|
|
|
.fileCSV {
|
|
color:#9BB7D4 !important;
|
|
}
|
|
|
|
.threeBars {
|
|
color:#B55A30 !important;
|
|
}
|
|
|
|
.editServer {
|
|
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;
|
|
}
|
|
|
|
|
|
/* 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 #aaaaaa;
|
|
border-radius: 6px;
|
|
background: #e6e6e6 url("images/ui-bg_glass_75_e6e6e6_1x400.png") 50% 50% repeat-x;
|
|
color: #222222;
|
|
}
|
|
|
|
/* 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: #222222;
|
|
}
|
|
|
|
/* 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: #999999;
|
|
background: #dadada;
|
|
color: #212121;
|
|
}
|
|
|
|
.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: rgba(119,119,0,119.9);
|
|
color: white;
|
|
}
|
|
/* ======================================================================== */
|
|
/* 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: ""; }
|
|
|
|
/*
|
|
* 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: rgba(59, 0, 59, 0.55);
|
|
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: rgba(179, 0, 179, 0.9);
|
|
}
|
|
|
|
.filterTable input[type='checkbox']:not(.formCheckbox):checked::before {
|
|
transform: translateX(20px);
|
|
}
|
|
|
|
.filterTable input[type='checkbox']:not(.formCheckbox):focus-visible {
|
|
outline: 2px solid rgba(179, 0, 179, 0.9);
|
|
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: #242424;
|
|
--cacti-dd-menu-bg: rgba(250,246,248,0.92);
|
|
--cacti-dd-menu-bg-open: rgba(255,255,255,0.97);
|
|
--cacti-dd-panel-bg: rgba(255,255,255,0.97);
|
|
--cacti-dd-border: rgba(70,10,40,0.20);
|
|
--cacti-dd-accent: #a83f6a;
|
|
}
|