mirror of
https://github.com/Cacti/cacti.git
synced 2026-11-09 05:26:50 +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'.
3503 lines
64 KiB
CSS
3503 lines
64 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/ |
|
|
+-------------------------------------------------------------------------+
|
|
*/
|
|
|
|
:root {
|
|
color-scheme: dark;
|
|
|
|
/* Deepness - a dark, emerald-green theme in the Fuzzball colour family. */
|
|
/* Surfaces */
|
|
--dp-page: #0b0e13;
|
|
--dp-sidebar: #090c11;
|
|
--dp-header: #070a0e;
|
|
--dp-panel: #11161d;
|
|
--dp-panel-alt: #161c25;
|
|
--dp-elevated: #1b2330;
|
|
|
|
/* Table rows */
|
|
--dp-row-odd: #11161d;
|
|
--dp-row-even: #0d1217;
|
|
--dp-row-hover: #19222e;
|
|
--dp-selected: #103528;
|
|
|
|
/* Lines / overlays */
|
|
--dp-border: #263040;
|
|
--dp-border-strong: #32415a;
|
|
--dp-overlay: rgba(0, 0, 0, 0.55);
|
|
|
|
/* Chart gridlines */
|
|
--dp-grid: #2b3647;
|
|
|
|
/* Text */
|
|
--dp-text: #e6edf3;
|
|
--dp-text-muted: #97a3b0;
|
|
|
|
/* Emerald accent */
|
|
--dp-accent: #18b981;
|
|
--dp-accent-hover: #26cf94;
|
|
--dp-accent-deep: #0c5f44;
|
|
--dp-accent-soft: rgba(24, 185, 129, 0.3);
|
|
--dp-accent-faint: rgba(24, 185, 129, 0.15);
|
|
--dp-link: #3bc991;
|
|
--dp-link-hover: #63dcaf;
|
|
}
|
|
/* 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: var(--dp-page);
|
|
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;
|
|
user-select: none;
|
|
-ms-user-select: none;
|
|
-moz-user-select: none;
|
|
-webkit-user-select: none;
|
|
}
|
|
|
|
img {
|
|
border: none;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
i.fa, i.fas, i.fab, i.far, i.fal {
|
|
padding: 0px 3px;
|
|
font-size: 15px;
|
|
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: var(--dp-text);
|
|
}
|
|
|
|
fieldset {
|
|
border: none;
|
|
padding: 0px;
|
|
margin: 0px;
|
|
}
|
|
|
|
hr.menu {
|
|
border: 0;
|
|
height: 1px;
|
|
background: var(--dp-border);
|
|
background-image: linear-gradient(to right, var(--dp-border), var(--dp-border), var(--dp-border));
|
|
}
|
|
|
|
.reindex_methods span {
|
|
font-size: 9px;
|
|
}
|
|
|
|
.checkboxLabel {
|
|
display: none;
|
|
}
|
|
|
|
.realms .checkboxLabel {
|
|
display: inline !important;
|
|
}
|
|
|
|
/* links */
|
|
|
|
a, a:active, a:visited {
|
|
color: var(--dp-link);
|
|
text-decoration: none;
|
|
font-size: 12px;
|
|
}
|
|
|
|
a:hover {
|
|
text-decoration: none;
|
|
color: var(--dp-link-hover);
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
/* Flat, theme-appropriate text fields - drop the jQuery UI ui-state-default gradient image */
|
|
input[type="text"],
|
|
input[type="password"],
|
|
input[type="number"],
|
|
input[type="email"],
|
|
input[type="url"],
|
|
input[type="search"],
|
|
input[type="tel"],
|
|
input.ui-state-default,
|
|
textarea,
|
|
textarea.ui-state-default {
|
|
background: var(--dp-panel);
|
|
background-image: none;
|
|
border: 1px solid var(--dp-border);
|
|
color: var(--dp-text);
|
|
}
|
|
|
|
input[type="text"]:focus,
|
|
input[type="password"]:focus,
|
|
input[type="number"]:focus,
|
|
input[type="email"]:focus,
|
|
input[type="url"]:focus,
|
|
input[type="search"]:focus,
|
|
input[type="tel"]:focus,
|
|
textarea:focus {
|
|
background-image: none;
|
|
border-color: var(--dp-accent);
|
|
}
|
|
|
|
/* Buttons - flat secondary by default (drops the jQuery UI ui-state-default gradient) */
|
|
.ui-button,
|
|
input[type="button"],
|
|
input[type="reset"],
|
|
button {
|
|
background: var(--dp-elevated);
|
|
background-image: none;
|
|
border: 1px solid var(--dp-border-strong);
|
|
color: var(--dp-text);
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.ui-button:hover,
|
|
input[type="button"]:hover,
|
|
input[type="reset"]:hover,
|
|
button:hover {
|
|
background: var(--dp-row-hover);
|
|
background-image: none;
|
|
border-color: var(--dp-accent);
|
|
color: var(--dp-text);
|
|
}
|
|
|
|
/* Primary action (submit, e.g. Go) - translucent emerald, a touch more prominent */
|
|
input[type="submit"],
|
|
input[type="submit"].ui-button,
|
|
button[type="submit"] {
|
|
background: rgba(24, 185, 129, 0.8);
|
|
background-image: none;
|
|
border: 1px solid var(--dp-accent);
|
|
color: var(--dp-page);
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
input[type="submit"]:hover,
|
|
input[type="submit"].ui-button:hover,
|
|
button[type="submit"]:hover {
|
|
background: rgba(24, 185, 129, 0.95);
|
|
background-image: none;
|
|
border-color: var(--dp-accent-hover);
|
|
color: var(--dp-page);
|
|
}
|
|
|
|
label {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.glyph_tab-console:before {
|
|
content: "";
|
|
display: inline-block;
|
|
width: 1em;
|
|
height: 1em;
|
|
background-color: currentColor;
|
|
-webkit-mask: url('./images/rockylinux.svg') no-repeat center / contain;
|
|
mask: url('./images/rockylinux.svg') no-repeat center / contain;
|
|
vertical-align: -0.125em;
|
|
}
|
|
|
|
/* Emerald console glyph when the Console tab is not the active tab */
|
|
#tab-console:not(.selected) .glyph_tab-console {
|
|
color: var(--dp-accent);
|
|
}
|
|
|
|
.text_tab-console {
|
|
display: none;
|
|
}
|
|
|
|
.nowrap {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.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: #3dd9a1;
|
|
font-size: 1.5em !important;
|
|
vertical-align: bottom;
|
|
}
|
|
|
|
.associated {
|
|
color: #3dd9a1;
|
|
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: #3dd9a1;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.running {
|
|
color: red;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.newObject {
|
|
color: blue;
|
|
}
|
|
|
|
.updateObject {
|
|
color: grey;
|
|
}
|
|
|
|
.unmetDependency {
|
|
color: red;
|
|
}
|
|
|
|
.foundDependency {
|
|
color: navy;
|
|
}
|
|
|
|
.success {
|
|
color: #3dd9a1;
|
|
}
|
|
|
|
.failed {
|
|
color: red;
|
|
}
|
|
|
|
.accessGranted {
|
|
color: #3dd9a1;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.accessGrantedItem {
|
|
color: #3dd9a1;
|
|
}
|
|
|
|
.accessRestricted {
|
|
color: red;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.accessRestrictedItem {
|
|
color: red;
|
|
}
|
|
|
|
.deleteIcon {
|
|
width: 10px;
|
|
height: 10px;
|
|
cursor: pointer;
|
|
padding: 2px;
|
|
border: none;
|
|
}
|
|
|
|
.drillDown {
|
|
cursor: pointer;
|
|
font-size: 15px;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.viewSources {
|
|
color:#56C6A9 !important;
|
|
}
|
|
|
|
.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: #3dd9a1 !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;
|
|
}
|
|
|
|
/* Device status pills - rounded translucent badges per state (get_colored_device_status) */
|
|
.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(24, 185, 129, 0.15);
|
|
border-color: rgba(24, 185, 129, 0.55);
|
|
color: #3dd9a1 !important;
|
|
}
|
|
|
|
.deviceStatus.deviceDown {
|
|
background-color: rgba(255, 64, 64, 0.15);
|
|
border-color: rgba(255, 64, 64, 0.55);
|
|
color: #ff6b6b !important;
|
|
}
|
|
|
|
.deviceStatus.deviceRecovering {
|
|
background-color: rgba(255, 143, 30, 0.15);
|
|
border-color: rgba(255, 143, 30, 0.55);
|
|
color: #ffab52 !important;
|
|
}
|
|
|
|
.deviceStatus.deviceError {
|
|
background-color: rgba(176, 90, 230, 0.15);
|
|
border-color: rgba(176, 90, 230, 0.5);
|
|
color: #c792ea !important;
|
|
}
|
|
|
|
.deviceStatus.deviceUnknown {
|
|
background-color: rgba(96, 140, 210, 0.15);
|
|
border-color: rgba(96, 140, 210, 0.5);
|
|
color: #8fb6e8 !important;
|
|
}
|
|
|
|
.deviceStatus.deviceDisabled {
|
|
background-color: rgba(161, 161, 161, 0.12);
|
|
border-color: rgba(161, 161, 161, 0.45);
|
|
color: #b8b8b8 !important;
|
|
}
|
|
|
|
.deviceUpBg {
|
|
color: rgba(22,22,22,0.8);
|
|
font-size: 10pt;
|
|
font-weight: bold;
|
|
background-color: #18b981;
|
|
}
|
|
|
|
.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: #3bc991;
|
|
}
|
|
|
|
.notBeingGraphed {
|
|
color: var(--dp-text-muted);
|
|
}
|
|
|
|
.submenuoptions {
|
|
background: var(--dp-panel);
|
|
border-width: 0px 3px 3px 3px;
|
|
border-color: var(--dp-header);
|
|
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: light;
|
|
color: var(--dp-text);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.submenuoptions li a:hover {
|
|
display: block;
|
|
background: var(--dp-row-hover);
|
|
}
|
|
|
|
.menuoptions {
|
|
background: var(--dp-panel);
|
|
border-width: 0px 3px 3px 3px;
|
|
border-color: var(--dp-header);
|
|
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: light;
|
|
color: var(--dp-text);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.menuoptions li a:hover {
|
|
display: block;
|
|
background: var(--dp-row-hover);
|
|
}
|
|
|
|
.import_label {
|
|
opacity: 1;
|
|
}
|
|
|
|
.import_button {
|
|
display: none;
|
|
opacity: 0;
|
|
}
|
|
|
|
.import_text {
|
|
opacity: 1;
|
|
color: var(--dp-accent);
|
|
}
|
|
|
|
.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: 1px;
|
|
vertical-align: middle;
|
|
color: var(--dp-accent);
|
|
font-weight: bold;
|
|
font-size: 14px;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.verbosequery {
|
|
cursor: pointer;
|
|
padding: 1px;
|
|
vertical-align: middle;
|
|
color: rgba(255, 204, 0, 0.8);
|
|
font-size: 14px;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.deletequery {
|
|
cursor: pointer;
|
|
padding: 1px;
|
|
vertical-align: middle;
|
|
color: red !important;
|
|
font-weight: bold;
|
|
font-size: 14px;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.deletequery:hover {
|
|
color: red !important;
|
|
text-decoration: none;
|
|
padding: 1px;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.odd {
|
|
background: none repeat scroll 0 0 var(--dp-row-odd);
|
|
border: none;
|
|
}
|
|
|
|
.odd td, .even td, .even-alternate td {
|
|
min-height: 20px !important;
|
|
line-height: 20px;
|
|
}
|
|
|
|
.even {
|
|
background: none repeat scroll 0 0 var(--dp-row-even);
|
|
border: none;
|
|
}
|
|
|
|
.even-alternate {
|
|
#background: none repeat scroll 0 0 var(--dp-panel-alt);
|
|
#background-color: var(--dp-panel-alt);
|
|
border: none;
|
|
#box-shadow: 0 0 1px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.saveRow {
|
|
background-color: var(--dp-panel);
|
|
text-align: right;
|
|
padding: 4px;
|
|
}
|
|
|
|
.treeArea, .treeItemsArea {
|
|
width: 25%;
|
|
border: 1px solid var(--dp-accent-deep);
|
|
vertical-align: top;
|
|
}
|
|
|
|
.linkMarker {
|
|
color: #c16921;
|
|
}
|
|
|
|
.filteredValue {
|
|
background-color: #F8D93D;
|
|
}
|
|
|
|
.graphItemGr1Alt1 {
|
|
background-color: var(--dp-panel);
|
|
}
|
|
|
|
.graphItemGr1Alt2 {
|
|
background-color: var(--dp-panel);
|
|
}
|
|
|
|
.graphItemGr1Cust {
|
|
background-color: var(--dp-panel-alt);
|
|
}
|
|
|
|
.graphItemGr2Alt1 {
|
|
background-color: var(--dp-panel-alt);
|
|
}
|
|
|
|
.graphItemGr2Alt2 {
|
|
background-color: var(--dp-panel-alt);
|
|
}
|
|
|
|
.graphItemGr1Cust {
|
|
background-color: var(--dp-panel-alt);
|
|
}
|
|
|
|
.graphItemAdd {
|
|
background-color: var(--dp-accent);
|
|
}
|
|
|
|
.graphItemDel {
|
|
background-color: #C63636;
|
|
}
|
|
|
|
.graphItemHR {
|
|
color: #FF0000;
|
|
}
|
|
|
|
.hostUp {
|
|
color: var(--dp-text);
|
|
font-size: 10px;
|
|
font-weight: normal;
|
|
font-family: monospace;
|
|
}
|
|
|
|
.hostDown {
|
|
color: #ff0000;
|
|
font-size: 10px;
|
|
font-weight: normal;
|
|
font-family: monospace;
|
|
}
|
|
|
|
.cactiPageHead {
|
|
background-color: var(--dp-header);
|
|
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: var(--dp-header);
|
|
height: 15px;
|
|
width: 100%;
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
z-index: 3;
|
|
}
|
|
|
|
.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: var(--dp-sidebar);
|
|
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: var(--dp-sidebar);
|
|
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: -6px;
|
|
margin-left: 2px;
|
|
margin-right: 2px;
|
|
}
|
|
|
|
.cactiAuthBody {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: var(--dp-page);
|
|
}
|
|
|
|
.cactiAuthArea {
|
|
border-radius: 10px;
|
|
position: relative;
|
|
padding: 15px;
|
|
max-width: 360px;
|
|
max-height: 300px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
background: var(--dp-panel-alt);
|
|
border: 1px solid var(--dp-border);
|
|
}
|
|
|
|
.cactiAuthBody input:-webkit-autofill,
|
|
.cactiAuthBody input:-webkit-autofill:hover,
|
|
.cactiAuthBody input:-webkit-autofill:focus,
|
|
.cactiAuthBody input:-webkit-autofill:active {
|
|
-webkit-text-fill-color: var(--dp-text);
|
|
-webkit-box-shadow: 0 0 0 1000px var(--dp-panel) inset;
|
|
caret-color: var(--dp-text);
|
|
transition: background-color 9999s ease-in-out 0s;
|
|
}
|
|
|
|
.cactiAuthLogo {
|
|
display: none;
|
|
}
|
|
|
|
/* Graph action icons: hidden until the row is hovered (ported from the dark theme) */
|
|
.graphDrillDown {
|
|
vertical-align: top;
|
|
align-self: left;
|
|
z-index: 4;
|
|
padding: 3px;
|
|
height: 100%;
|
|
width: 22px;
|
|
min-width: 22px;
|
|
}
|
|
|
|
.iconWrapper {
|
|
display: none;
|
|
}
|
|
|
|
.cactiAuthTable td {
|
|
padding-bottom: 6px;
|
|
padding-right: 6px;
|
|
}
|
|
|
|
.cactiAuthErrors {
|
|
color: red;
|
|
min-height: 15px;
|
|
}
|
|
|
|
legend {
|
|
font-size: 22px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.versionInfo {
|
|
padding-top: 5px;
|
|
float: right;
|
|
margin-top: 10px;
|
|
color: var(--dp-text);
|
|
}
|
|
|
|
.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;
|
|
margin-right: 5px;
|
|
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 var(--dp-border);
|
|
}
|
|
|
|
.spikekillNote {
|
|
padding: 1px;
|
|
margin: 0px;
|
|
}
|
|
|
|
.spikekillMenu {
|
|
background: var(--dp-row-odd) none repeat scroll 0 0;
|
|
border: 1px solid var(--dp-border);
|
|
box-shadow: 2px 2px 2px var(--dp-border);
|
|
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;
|
|
}
|
|
|
|
.graphWrapper {
|
|
position: relative;
|
|
}
|
|
|
|
.cactiGraphContentArea {
|
|
height: 100vh;
|
|
display: none;
|
|
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: 92vh;
|
|
overflow-y: auto !important;
|
|
overflow-x: hidden;
|
|
padding-left: 10px;
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.cactiConsoleContentArea>div:last-child {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.cactiConsoleContentArea>main:last-child {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.hyperLink {
|
|
color: var(--dp-accent);
|
|
font-size: 12px;
|
|
padding: 3px;
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.iconLink {
|
|
width: 20px;
|
|
line-height: 20px;
|
|
display: inline-block;
|
|
}
|
|
|
|
.piinstall, .pienable, .pidisable, .piuninstall, .pierror, .piforceremove {
|
|
padding: 0px 3px !important;
|
|
}
|
|
|
|
.linkEditMain, .linkEditMain:visited, .linkEditMain:active {
|
|
color: var(--dp-accent);
|
|
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: var(--dp-text);
|
|
font-weight: normal;
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.linkOverDark:hover {
|
|
color: var(--dp-text);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.linkCopyDark, .linkCopyDark:visited, .linkCopyDark:active {
|
|
color: var(--dp-text);
|
|
font-weight: normal;
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.linkCopyDark:hover {
|
|
color: var(--dp-text);
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* text styles */
|
|
|
|
.textError {
|
|
font-size: 12px;
|
|
color: red;
|
|
}
|
|
|
|
.textWarning {
|
|
font-size: 12px;
|
|
color: #ee7600 !important;
|
|
}
|
|
|
|
.textInfo {
|
|
font-size: 12px;
|
|
color: var(--dp-text);
|
|
}
|
|
|
|
.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: var(--dp-panel);
|
|
border: 1px solid var(--dp-border);
|
|
position: relative;
|
|
z-index: 4;
|
|
}
|
|
|
|
.textHeaderDark {
|
|
font-size: 12px;
|
|
font-weight: bold;
|
|
color: var(--dp-text);
|
|
}
|
|
|
|
.templateHeader {
|
|
background: var(--dp-overlay);
|
|
}
|
|
|
|
.templateHeader td {
|
|
padding: 3px;
|
|
}
|
|
|
|
.textSubHeaderDark, .textSubHeaderDark:visited {
|
|
font-size: 11px;
|
|
color: var(--dp-text);
|
|
font-weight: bold;
|
|
padding: 0px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.cactiBorderWall {
|
|
border-width: 1px;
|
|
border-color: var(--dp-row-even);
|
|
border-style: solid;
|
|
}
|
|
|
|
.cactiTable {
|
|
display: table;
|
|
width: 100%;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.cactiInstallLoaderSpinnerTheme {
|
|
border-top-color: var(--dp-text) !important;
|
|
}
|
|
|
|
.cactiTableTitleRow {
|
|
color: var(--dp-text);
|
|
float: left;
|
|
padding-left: 3px;
|
|
text-align: left;
|
|
display: block;
|
|
width: 100%;
|
|
height: 28px;
|
|
line-height: 28px;
|
|
font-size: 1em;
|
|
font-weight: 700;
|
|
background: var(--dp-header);
|
|
}
|
|
|
|
.cactiTableTitle {
|
|
color: var(--dp-text);
|
|
float: left;
|
|
padding-left: 3px;
|
|
text-align: left;
|
|
display: block;
|
|
width: 70%;
|
|
height: 28px;
|
|
line-height: 28px;
|
|
font-size: 1em;
|
|
font-weight: 700;
|
|
background: var(--dp-header);
|
|
}
|
|
|
|
.cactiTableButton {
|
|
float: right;
|
|
padding: 0px;
|
|
display: block;
|
|
text-align: right;
|
|
width: calc(30% - 3px);
|
|
height: 28px;
|
|
line-height: 28px;
|
|
background: var(--dp-header);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.cactiTableButton.debug {
|
|
background: transparent;
|
|
float: right;
|
|
padding: 0px;
|
|
padding-bottom: 3px;
|
|
margin-right: -5px;
|
|
}
|
|
|
|
.cactiTableButton span, .cactiTableTitle span {
|
|
color: var(--dp-text);
|
|
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 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 (page_filter_format = modern): the Layouts bar and the
|
|
jQuery UI Edit dialog (dialogClass cactiFilterDialog). */
|
|
.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.55);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.ui-dialog.cactiFilterDialog .ui-dialog-titlebar {
|
|
border: 0;
|
|
border-radius: 0;
|
|
padding: 0 14px;
|
|
height: 28px;
|
|
line-height: 28px;
|
|
background: var(--dp-accent-deep);
|
|
color: var(--dp-text);
|
|
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 .ui-dialog-content input[type="text"],
|
|
.ui-dialog.cactiFilterDialog .ui-dialog-content input.ui-state-default,
|
|
.ui-dialog.cactiFilterDialog .ui-dialog-content textarea,
|
|
.ui-dialog.cactiFilterDialog .ui-dialog-content select {
|
|
background: var(--dp-panel);
|
|
background-image: none;
|
|
border: 1px solid var(--dp-border);
|
|
color: var(--dp-text);
|
|
}
|
|
|
|
.ui-dialog.cactiFilterDialog .ui-dialog-content input[type="text"]:focus,
|
|
.ui-dialog.cactiFilterDialog .ui-dialog-content input.ui-state-default:focus,
|
|
.ui-dialog.cactiFilterDialog .ui-dialog-content textarea:focus,
|
|
.ui-dialog.cactiFilterDialog .ui-dialog-content select:focus {
|
|
border-color: var(--dp-accent);
|
|
}
|
|
|
|
.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 var(--dp-border);
|
|
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: var(--dp-accent-deep);
|
|
color: var(--dp-text);
|
|
border-color: var(--dp-border-strong);
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.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: var(--dp-text);
|
|
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: 25px;
|
|
background: var(--dp-overlay) none repeat scroll 0 0;
|
|
color: var(--dp-text);
|
|
font-weight: bold;
|
|
}
|
|
|
|
.formHeaderText {
|
|
padding-left: 3px;
|
|
}
|
|
|
|
.formHeaderAnchor {
|
|
float: right;
|
|
padding-right: 8px;
|
|
}
|
|
|
|
.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: var(--dp-text);
|
|
}
|
|
|
|
.formColumnLeft {
|
|
float: left;
|
|
display: table-row;
|
|
width: 90%;
|
|
color: var(--dp-text);
|
|
text-align: left;
|
|
}
|
|
|
|
.formColumnRight {
|
|
float: left;
|
|
display: table-row;
|
|
width: 100%;
|
|
color: var(--dp-text);
|
|
text-align: left;
|
|
}
|
|
|
|
.formFieldName {
|
|
color: var(--dp-text);
|
|
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: var(--dp-panel-alt);
|
|
}
|
|
|
|
.graphItemAlternate {
|
|
background-color: var(--dp-panel-alt);
|
|
}
|
|
|
|
.break {
|
|
height: 4px;
|
|
}
|
|
|
|
.next {
|
|
padding-right: 6px;
|
|
padding-left: 6px;
|
|
}
|
|
|
|
.previous {
|
|
padding-right: 6px;
|
|
padding-left: 6px;
|
|
}
|
|
|
|
.cactiNavBarTop {
|
|
border-bottom: 1px solid var(--dp-border);
|
|
}
|
|
|
|
.cactiNavBarBottom {
|
|
background-color: var(--dp-accent);
|
|
}
|
|
|
|
.tableHeader {
|
|
display: table-row;
|
|
color: var(--dp-text);
|
|
background: var(--dp-overlay);
|
|
}
|
|
|
|
th.sortable {
|
|
cursor: pointer;
|
|
line-height: 10px;
|
|
}
|
|
|
|
.tableHeader th {
|
|
color: var(--dp-text);
|
|
vertical-align: middle;
|
|
text-align: left;
|
|
font-size: 11px;
|
|
font-weight: bold;
|
|
padding: 0px 2px;
|
|
height: 28px;
|
|
line-height: 28px;
|
|
}
|
|
|
|
.tableHeader th.sortable {
|
|
cursor: pointer !important;
|
|
}
|
|
|
|
.tableHeader th div {
|
|
display: block;
|
|
padding-right: 8px;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.tableHeaderColumnSelected {
|
|
background: var(--dp-accent-soft);
|
|
}
|
|
|
|
.tableHeader th.tableHeaderColumnSelected,
|
|
.tableHeader th.tableHeaderColumnSelected div,
|
|
.tableHeader th.tableHeaderColumnSelected a,
|
|
.tableHeader th.tableHeaderColumnSelected a:link,
|
|
.tableHeader th.tableHeaderColumnSelected a:visited,
|
|
.tableHeader th.tableHeaderColumnSelected a:hover,
|
|
.tableHeader th.tableHeaderColumnSelected .fa {
|
|
color: var(--dp-text);
|
|
}
|
|
|
|
/* Sorted columns: primary a touch stronger than the secondary/subsequent */
|
|
.tableHeader th.primarySort,
|
|
.tableHeader th.tablesorter-headerAsc,
|
|
.tableHeader th.tablesorter-headerDesc {
|
|
background: var(--dp-accent-soft);
|
|
}
|
|
|
|
.tableHeader th.secondarySort {
|
|
background: var(--dp-accent-faint);
|
|
}
|
|
|
|
.tableHeaderColumnHover {
|
|
background: var(--dp-row-hover);
|
|
}
|
|
|
|
.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;
|
|
text-align: center;
|
|
}
|
|
|
|
.tableRowGraph td {
|
|
padding: 3px;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.tableRow td {
|
|
line-height: 20px !important;
|
|
}
|
|
|
|
.image_table {
|
|
width: 100%;
|
|
}
|
|
|
|
.tableConfirmation {
|
|
width: 100%;
|
|
text-align: center;
|
|
background-color: var(--dp-row-odd);
|
|
border: 1px solid var(--dp-border);
|
|
}
|
|
|
|
.navBar {
|
|
min-width: 30%;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.navBarNavigation {
|
|
display: table;
|
|
color: var(--dp-text);
|
|
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: var(--dp-row-odd);
|
|
}
|
|
|
|
.textArea a {
|
|
font-size: 1.1em;
|
|
}
|
|
|
|
.popupBox {
|
|
#z-index: 2;
|
|
position: absolute;
|
|
padding: 0px;
|
|
display: none;
|
|
overflow: auto;
|
|
color: var(--dp-text);
|
|
background-color: var(--dp-row-even);
|
|
border: 1px solid var(--dp-row-even);
|
|
}
|
|
|
|
.installArea {
|
|
background-color: var(--dp-panel);
|
|
padding: 10px;
|
|
}
|
|
|
|
.textAreaNotes {
|
|
font-size: 12px;
|
|
font-family: Verdana, Arial, Helvetica, sans-serif;
|
|
}
|
|
|
|
.textEditTitle {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.textMenuHeader {
|
|
color: var(--dp-text);
|
|
background-color: var(--dp-border);
|
|
font-family: Verdana, Arial, Helvetica, sans-serif;
|
|
font-size: 10px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.textMenuItem {
|
|
background-color: var(--dp-panel);
|
|
font-family: Verdana, Arial, Helvetica, sans-serif;
|
|
font-size: 10px;
|
|
}
|
|
|
|
.textMenuSubItem {
|
|
background-color: var(--dp-panel);
|
|
font-family: Verdana, Arial, Helvetica, sans-serif;
|
|
font-size: 10px;
|
|
}
|
|
|
|
.textMenuItemSelected {
|
|
background-color: var(--dp-panel-alt);
|
|
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: var(--dp-panel-alt);
|
|
white-space: nowrap;
|
|
width: 1%;
|
|
}
|
|
|
|
.tabNotSelected {
|
|
background-color: var(--dp-panel-alt);
|
|
white-space: nowrap;
|
|
width: 1%;
|
|
}
|
|
|
|
.subTab a {
|
|
height: 14px;
|
|
border-bottom: 1px solid var(--dp-border) !important;
|
|
}
|
|
|
|
.deleteMarker {
|
|
color: var(--dp-text-muted);
|
|
vertical-align: middle;
|
|
text-decoration: none !important;
|
|
padding-right: 7px !important;
|
|
}
|
|
|
|
.deleteMarker:hover {
|
|
text-decoration: none !important;
|
|
}
|
|
|
|
.deleteMarkerDisabled {
|
|
color: var(--dp-text-muted);
|
|
vertical-align: middle;
|
|
text-decoration: none !important;
|
|
padding-right: 7px !important;
|
|
}
|
|
|
|
.deleteMarkerDisabled:hover {
|
|
text-decoration: none !important;
|
|
}
|
|
|
|
.moveArrow {
|
|
color: var(--dp-accent) !important;
|
|
height: 14px !important;
|
|
display: inline-block;
|
|
width: 11.75px;
|
|
font-size: 14px !important;
|
|
vertical-align: middle;
|
|
text-decoration: none !important;
|
|
}
|
|
|
|
.moveArrow:hover {
|
|
text-decoration: none !important;
|
|
}
|
|
|
|
.moveArrowNone {
|
|
display: inline-block;
|
|
width: 14.75px;
|
|
}
|
|
|
|
.action, .shiftArrow, .calendar {
|
|
cursor: pointer;
|
|
padding: 2px;
|
|
}
|
|
|
|
td.tab {
|
|
border-top: 1px solid var(--dp-border);
|
|
border-right: 1px solid var(--dp-border);
|
|
border-left: 1px solid var(--dp-border);
|
|
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: 80px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.maintabs {
|
|
line-height: 35px;
|
|
float: left;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.maintabs a.lefttab, .usertabs a {
|
|
color: var(--dp-text);
|
|
float: left !important;
|
|
padding: 5px 8px;
|
|
text-decoration: none;
|
|
font-size: 18px;
|
|
vertical-align: bottom;
|
|
}
|
|
|
|
.maintabs a:hover {
|
|
background-color: var(--dp-row-hover);
|
|
}
|
|
|
|
.maintabs a.selected {
|
|
color: var(--dp-text);
|
|
background-color: var(--dp-accent-soft);
|
|
}
|
|
|
|
.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: var(--dp-text);
|
|
float: left !important;
|
|
text-decoration: none;
|
|
font-size: 18px;
|
|
vertical-align: bottom;
|
|
display: block;
|
|
}
|
|
|
|
.maintabs-submenu i, .maintabs-submenu-ellipsis i {
|
|
color: var(--dp-text);
|
|
padding-left: 2px;
|
|
font-size: 18px;
|
|
border-left: 1px solid var(--dp-border);
|
|
}
|
|
|
|
div.submenu {
|
|
display: none;
|
|
position: absolute;
|
|
border: 2px solid var(--dp-accent);
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 200;
|
|
}
|
|
|
|
div.submenu span {
|
|
display: block;
|
|
}
|
|
|
|
.tabs a {
|
|
background-color: var(--dp-border);
|
|
background-image: -moz-linear-gradient(var(--dp-sidebar),var(--dp-border));
|
|
background-image: -ms-linear-gradient(var(--dp-sidebar),var(--dp-border));
|
|
background-image: -webkit-linear-gradient(var(--dp-sidebar),var(--dp-border));
|
|
background-image: linear-gradient(var(--dp-sidebar),var(--dp-border));
|
|
background-repeat: repeat-x;
|
|
border: 1px solid var(--dp-border);
|
|
border-color: var(--dp-border) var(--dp-border) var(--dp-border) var(--dp-border);
|
|
color: var(--dp-text);
|
|
float: left !important;
|
|
padding: 5px 8px;
|
|
text-decoration: none;
|
|
font-size: 11px;
|
|
vertical-align: bottom;
|
|
}
|
|
|
|
.tabs a:hover {
|
|
background-color: var(--dp-border);
|
|
background-image: -moz-linear-gradient(var(--dp-panel-alt),var(--dp-border));
|
|
background-image: -ms-linear-gradient(var(--dp-panel-alt),var(--dp-border));
|
|
background-image: -webkit-linear-gradient(var(--dp-panel-alt),var(--dp-border));
|
|
background-image: linear-gradient(var(--dp-panel-alt),var(--dp-border));
|
|
background-repeat: repeat-x;
|
|
}
|
|
|
|
.tabs nav a.selected {
|
|
color: var(--dp-text);
|
|
border-bottom: 1px solid var(--dp-accent);
|
|
background: var(--dp-accent-soft);
|
|
}
|
|
|
|
.tabs li {
|
|
bottom: -1px;
|
|
float: left;
|
|
margin: 0 3px 0 0;
|
|
position: relative;
|
|
}
|
|
|
|
.tabs li.current a, .maintabs li.current a {
|
|
background: transparent;
|
|
border-bottom: 2px solid var(--dp-accent);
|
|
}
|
|
|
|
.tabs li.current a:hover, .maintabs li.current a:hover {
|
|
background: transparent;
|
|
border-bottom: 2px solid var(--dp-accent);
|
|
}
|
|
|
|
.tabs nav {
|
|
border-bottom: 1px solid var(--dp-border);
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
/* Navigation Area */
|
|
#nav {
|
|
float: left;
|
|
border-top: 0px solid var(--dp-border);
|
|
border-right: 0px solid var(--dp-border);
|
|
border-left: 0px solid var(--dp-border);
|
|
font-size: 12px;
|
|
margin: 0px 0;
|
|
}
|
|
|
|
#nav li a {
|
|
display: block;
|
|
padding: 2px 4px 2px 5px;
|
|
background: var(--dp-border);
|
|
color: var(--dp-text);
|
|
text-decoration: none;
|
|
}
|
|
|
|
#nav li a.active {
|
|
font-weight: 600;
|
|
font-size: 14px;
|
|
background: var(--dp-sidebar);
|
|
color: var(--dp-text);
|
|
}
|
|
|
|
th {
|
|
border-right: 1px groove var(--dp-border);
|
|
}
|
|
|
|
th:last-child {
|
|
border-right: none !important;
|
|
}
|
|
|
|
tr.selected {
|
|
color: var(--dp-text);
|
|
background: rgba(24, 185, 129, 0.14);
|
|
}
|
|
|
|
tr.selected a.linkEditMain:visited {
|
|
color: #6ee7b7;
|
|
}
|
|
|
|
tr:not(.selectable) a.linkEditMain:hover {
|
|
color: var(--dp-accent);
|
|
}
|
|
|
|
tr.selectable a.linkEditMain:hover {
|
|
color: #6ee7b7;
|
|
}
|
|
|
|
tr.selectable:hover:not(.selected) {
|
|
background: rgba(24, 185, 129, 0.08);
|
|
}
|
|
|
|
tr.selectable.selected:hover {
|
|
background: rgba(24, 185, 129, 0.2);
|
|
}
|
|
|
|
tr.selectable td {
|
|
padding: 3px;
|
|
}
|
|
|
|
tr.selected a {
|
|
color: #6ee7b7;
|
|
}
|
|
|
|
tr td:last-child .checkbox {
|
|
margin-right: 10px !important;
|
|
}
|
|
|
|
tr th:last-child .checkbox {
|
|
margin-right: 10px !important;
|
|
}
|
|
|
|
/* Square, emerald-accented table checkboxes (select-all + row selects); the
|
|
right margin above keeps them clear of the content scrollbar */
|
|
input[type="checkbox"].checkbox {
|
|
accent-color: var(--dp-accent);
|
|
width: 15px;
|
|
height: 15px;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.fa-angle-double-up, .fa-angle-double-down {
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.fa-plus, .fa-question-circle {
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.fa-compress, .fa-expand {
|
|
margin-right: 10px;
|
|
}
|
|
|
|
#nav li a.pic:hover:not(.selected) {
|
|
background: var(--dp-row-hover);
|
|
}
|
|
|
|
#nav li a.selected {
|
|
color: var(--dp-text);
|
|
background: var(--dp-accent-soft);
|
|
}
|
|
|
|
#nav li a.selected i,
|
|
#nav li a.selected .menu_glyph {
|
|
color: var(--dp-text);
|
|
}
|
|
|
|
#nav li ul {
|
|
display: none;
|
|
padding: 0;
|
|
}
|
|
|
|
#nav li ul li a {
|
|
padding: 2px 4px 2px 5px;
|
|
background: var(--dp-sidebar);
|
|
}
|
|
|
|
#nav li ul li {
|
|
list-style: none;
|
|
padding: 0;
|
|
}
|
|
|
|
ul#nav {
|
|
list-style: none;
|
|
padding: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
.clogError {
|
|
color: var(--dp-text);
|
|
background-color: rgba(201, 42, 42, 0.18);
|
|
}
|
|
|
|
.clogWarning {
|
|
color: var(--dp-text);
|
|
background-color: rgba(234, 179, 8, 0.16);
|
|
}
|
|
|
|
.clogSQL {
|
|
color: var(--dp-text);
|
|
background-color: rgba(56, 189, 248, 0.14);
|
|
}
|
|
|
|
.clogDebug {
|
|
color: var(--dp-text);
|
|
background-color: rgba(148, 163, 184, 0.14);
|
|
}
|
|
|
|
.clogStats {
|
|
color: var(--dp-text);
|
|
background-color: rgba(24, 185, 129, 0.1);
|
|
}
|
|
|
|
.clogLimit {
|
|
color: var(--dp-text);
|
|
background-color: rgba(234, 179, 8, 0.16);
|
|
}
|
|
|
|
.clogStats td, .clogDebug td, .clogSQL td, .clogWarning td, .clogError td, .clogLimit td {
|
|
padding: 3px;
|
|
}
|
|
|
|
@media print {
|
|
.noprint {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.ui-tooltip {
|
|
max-width: 500px;
|
|
word-break: break-word;
|
|
background: var(--dp-elevated);
|
|
background-image: none;
|
|
border: 1px solid var(--dp-border-strong);
|
|
color: var(--dp-text);
|
|
border-radius: 5px;
|
|
box-shadow: 0 4px 14px var(--dp-overlay);
|
|
}
|
|
|
|
.ui-tooltip-content div.header {
|
|
color: var(--dp-accent);
|
|
}
|
|
|
|
.ui-tooltip-content div.content {
|
|
font-size: 10px;
|
|
color: var(--dp-text);
|
|
}
|
|
|
|
.ui-tooltip-content {
|
|
overflow: auto !important;
|
|
opacity: 0.95;
|
|
border-radius: 5px !important;
|
|
border: transparent;
|
|
}
|
|
|
|
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: var(--dp-accent-soft);
|
|
color: var(--dp-text);
|
|
}
|
|
|
|
ul.pagination li a:hover:not(.active) {
|
|
background: var(--dp-sidebar);
|
|
}
|
|
|
|
tr#realtime td:first-child {
|
|
height: 68px;
|
|
}
|
|
|
|
.logEmergency {
|
|
background-color: rgba(255, 6, 6, 0.4);
|
|
text-align: center;
|
|
width: 12.5%;
|
|
padding: 3px;
|
|
color: var(--dp-text);
|
|
}
|
|
|
|
.logCritical {
|
|
background-color: rgba(242, 23, 33, 0.2);
|
|
text-align: center;
|
|
width: 12.5%;
|
|
padding: 3px;
|
|
color: var(--dp-text);
|
|
}
|
|
|
|
.logAlert {
|
|
background-color: rgba(242, 25, 36, 0.2);
|
|
text-align: center;
|
|
width: 12.5%;
|
|
padding: 3px;
|
|
color: var(--dp-text);
|
|
}
|
|
|
|
.logWarning {
|
|
background-color: rgba(255, 122, 48, 0.2);
|
|
text-align: center;
|
|
width: 12.5%;
|
|
padding: 3px;
|
|
color: var(--dp-text);
|
|
}
|
|
|
|
.logError {
|
|
background-color: rgba(251, 74, 20, 0.2);
|
|
text-align: center;
|
|
width: 12.5%;
|
|
padding: 3px;
|
|
color: var(--dp-text);
|
|
}
|
|
|
|
.logNotice {
|
|
background-color: rgba(250, 253, 158, 0.2);
|
|
text-align: center;
|
|
width: 12.5%;
|
|
padding: 3px;
|
|
color: var(--dp-text);
|
|
}
|
|
|
|
.logInfo {
|
|
background-color: rgba(24, 185, 129, 0.2);
|
|
text-align: center;
|
|
width: 12.5%;
|
|
padding: 3px;
|
|
color: var(--dp-text);
|
|
}
|
|
|
|
.logDebug {
|
|
background-color: rgba(205, 207, 196, 0.2);
|
|
text-align: center;
|
|
width: 12.5%;
|
|
padding: 3px;
|
|
color: var(--dp-text);
|
|
}
|
|
|
|
.darkblue {
|
|
background: var(--dp-accent);
|
|
}
|
|
|
|
.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: var(--dp-header);
|
|
}
|
|
|
|
.menuitem {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.menu_glyph {
|
|
font-size: 18px;
|
|
vertical-align: middle;
|
|
text-align: left;
|
|
width: 22px;
|
|
padding-right: 0px !important;
|
|
display: inline-block;
|
|
}
|
|
|
|
.menuitem span {
|
|
vertical-align: middle;
|
|
line-height: 20px;
|
|
}
|
|
|
|
.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: var(--dp-row-even);
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.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: var(--dp-text);
|
|
background: var(--dp-header);
|
|
}
|
|
|
|
/* 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: var(--dp-overlay);
|
|
-webkit-transition: .4s;
|
|
transition: .4s;
|
|
}
|
|
|
|
.checkboxSlider:before {
|
|
position: absolute;
|
|
content: "";
|
|
height: 16px;
|
|
width: 16px;
|
|
left: 4px;
|
|
bottom: 4px;
|
|
background-color: var(--dp-accent-hover);
|
|
-webkit-transition: .4s;
|
|
transition: .4s;
|
|
}
|
|
|
|
input:checked + .checkboxSlider {
|
|
background-color: rgba(24, 185, 129, 0.4);
|
|
}
|
|
|
|
input:disabled + .checkboxSlider {
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
input:focus + .checkboxSlider {
|
|
box-shadow: 0 0 1px var(--dp-accent);
|
|
}
|
|
|
|
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: var(--dp-overlay);
|
|
-webkit-transition: .4s;
|
|
transition: .4s;
|
|
}
|
|
|
|
.radioSlider:before {
|
|
display: none;
|
|
position: absolute;
|
|
content: "";
|
|
height: 16px;
|
|
width: 16px;
|
|
left: 4px;
|
|
bottom: 4px;
|
|
background-color: var(--dp-accent-hover);
|
|
-webkit-transition: .4s;
|
|
transition: .4s;
|
|
}
|
|
|
|
input:checked + .radioSlider {
|
|
background-color: rgba(24, 185, 129, 0.4);
|
|
}
|
|
|
|
input:disabled + .radioSlider {
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
input:focus + .radioSlider {
|
|
box-shadow: 0 0 1px var(--dp-accent);
|
|
}
|
|
|
|
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-tabs-active .ui-tabs-anchor {
|
|
color: var(--dp-text) !important;
|
|
}
|
|
|
|
[id*='_edit'] .tableRowGraph:hover {
|
|
background-color: rgba(0, 0, 255, .3) !important;
|
|
border-left: 2px solid yellow !important;
|
|
border-right: 2px solid yellow !important;
|
|
}
|
|
|
|
.tableRowGraph {
|
|
border: 2px solid rgba(0,0,0,0);
|
|
}
|
|
|
|
/* 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 var(--dp-border);
|
|
border-radius: 6px;
|
|
background: var(--dp-panel);
|
|
color: var(--dp-text);
|
|
}
|
|
|
|
/* stock select2.css paints disabled single/multi-selects #eee, which strands
|
|
this theme's light label text; keep them on a dark surface with muted text */
|
|
.select2-container--default.select2-container--disabled .select2-selection--single,
|
|
.select2-container--default.select2-container--disabled .select2-selection--multiple {
|
|
background: var(--dp-panel-alt);
|
|
color: var(--dp-text-muted);
|
|
}
|
|
|
|
/* 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: var(--dp-text);
|
|
}
|
|
|
|
/* 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: var(--dp-border);
|
|
background: var(--dp-panel-alt);
|
|
color: var(--dp-text);
|
|
}
|
|
|
|
.select2-container--default .select2-selection--single .select2-selection__arrow b {
|
|
border-top-color: var(--dp-text);
|
|
}
|
|
|
|
.select2-container--default .select2-selection--multiple .select2-selection__choice {
|
|
background: var(--dp-panel-alt);
|
|
border: 1px solid var(--dp-border);
|
|
color: var(--dp-text);
|
|
}
|
|
|
|
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
|
|
color: var(--dp-text);
|
|
}
|
|
|
|
.select2-dropdown {
|
|
border: 1px solid var(--dp-border);
|
|
background: var(--dp-panel);
|
|
color: var(--dp-text);
|
|
}
|
|
|
|
.select2-container--default .select2-search--dropdown .select2-search__field,
|
|
.select2-container--default .select2-search--inline .select2-search__field {
|
|
border: 1px solid var(--dp-border);
|
|
background: var(--dp-panel);
|
|
color: var(--dp-text);
|
|
}
|
|
|
|
.select2-container--default .select2-results__option--selected {
|
|
background: var(--dp-panel-alt);
|
|
color: var(--dp-text);
|
|
}
|
|
|
|
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
|
|
background: var(--dp-header);
|
|
color: var(--dp-text);
|
|
}
|
|
/* ======================================================================== */
|
|
/* 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.fa-sitemap { color: #90A4AE; }
|
|
.jstree-default .jstree-anchor > .jstree-themeicon.fa-folder { color: #FFCA28; }
|
|
.jstree-default .jstree-anchor > .jstree-themeicon.fa-building { color: #2DD4BF; }
|
|
.jstree-default .jstree-anchor > .jstree-themeicon.fa-map-marker-alt { color: #EF5350; }
|
|
.jstree-default .jstree-anchor > .jstree-themeicon.fa-server { color: #42A5F5; }
|
|
.jstree-default .jstree-anchor > .jstree-themeicon.fa-cubes { color: #AB47BC; }
|
|
.jstree-default .jstree-anchor > .jstree-themeicon.fa-database { color: #26C6DA; }
|
|
.jstree-default .jstree-anchor > .jstree-themeicon.fa-chart-line { color: #66BB6A; }
|
|
.jstree-default .jstree-anchor > .jstree-themeicon.fa-chart-bar { color: #FFA726; }
|
|
.jstree-default .jstree-anchor > .jstree-themeicon.fa-chart-pie { color: #EC407A; }
|
|
|
|
/* open/close carets as glyphs, centered to match the node glyphs */
|
|
.jstree-default .jstree-ocl {
|
|
background: none !important;
|
|
font-family: 'Font Awesome 5 Free';
|
|
font-weight: 900;
|
|
font-size: 14px;
|
|
line-height: 20px;
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
color: #78909C;
|
|
}
|
|
.jstree-default .jstree-open > .jstree-ocl,
|
|
.jstree-default .jstree-closed > .jstree-ocl { padding-top: 4px; }
|
|
.jstree-default .jstree-closed > .jstree-ocl::before { content: "\f105"; }
|
|
.jstree-default .jstree-open > .jstree-ocl::before { content: "\f107"; }
|
|
.jstree-default .jstree-leaf > .jstree-ocl::before { content: ""; }
|
|
|
|
/* selected/hovered whole-row: use the theme's translucent emerald, not jstree's default blue */
|
|
.jstree-default .jstree-wholerow-clicked {
|
|
background: var(--dp-accent-soft);
|
|
}
|
|
.jstree-default .jstree-wholerow-hovered {
|
|
background: var(--dp-row-hover);
|
|
}
|
|
.jstree-default .jstree-clicked,
|
|
.jstree-default .jstree-anchor.jstree-clicked,
|
|
.jstree-default .jstree-anchor:focus {
|
|
background: transparent;
|
|
box-shadow: none;
|
|
border-radius: 0;
|
|
}
|
|
|
|
/* ======================================================================== */
|
|
/* Billboard charts (billboard.js 3.13) - billboard.css is not loaded on the */
|
|
/* AJAX overload path, so the full stylesheet is mirrored here (like the Dark */
|
|
/* theme) repainted onto the theme palette via :root. Keep in sync with */
|
|
/* billboard.css. */
|
|
/* ======================================================================== */
|
|
|
|
/*-- Chart --*/
|
|
.bb svg {
|
|
font: 10px sans-serif;
|
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
|
}
|
|
|
|
.bb path, .bb line {
|
|
fill: none;
|
|
stroke: var(--dp-text-muted);
|
|
}
|
|
|
|
.bb text, .bb .bb-button {
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
user-select: none;
|
|
}
|
|
|
|
.bb-legend-item-tile,
|
|
.bb-xgrid-focus,
|
|
.bb-ygrid-focus,
|
|
.bb-ygrid {
|
|
shape-rendering: crispEdges;
|
|
}
|
|
|
|
.bb-chart-arcs .bb-needle {
|
|
fill: var(--dp-text);
|
|
}
|
|
|
|
.bb-chart-arc .bb-gauge-value {
|
|
fill: var(--dp-text);
|
|
}
|
|
|
|
.bb-chart-arc path {
|
|
stroke: var(--dp-panel);
|
|
}
|
|
|
|
.bb-chart-arc rect {
|
|
stroke: var(--dp-panel);
|
|
stroke-width: 1;
|
|
}
|
|
|
|
.bb-chart-arc text {
|
|
fill: var(--dp-text);
|
|
font-size: 13px;
|
|
}
|
|
|
|
/*-- Funnel --*/
|
|
.bb-chart-funnels path {
|
|
stroke-width: 0;
|
|
}
|
|
|
|
.bb-chart-funnels + .bb-chart-texts text {
|
|
font-size: 13px;
|
|
fill: var(--dp-text);
|
|
}
|
|
|
|
/*-- Axis --*/
|
|
.bb-axis {
|
|
shape-rendering: crispEdges;
|
|
}
|
|
|
|
.bb-axis .bb-axis-x-tooltip, .bb-axis .bb-axis-y-tooltip, .bb-axis .bb-axis-y2-tooltip {
|
|
font-size: 1em;
|
|
fill: var(--dp-text);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/*-- Grid --*/
|
|
.bb-grid {
|
|
pointer-events: none;
|
|
}
|
|
|
|
.bb-grid line {
|
|
stroke: var(--dp-grid);
|
|
}
|
|
|
|
.bb-grid text {
|
|
fill: var(--dp-text-muted);
|
|
}
|
|
|
|
.bb-xgrid, .bb-ygrid {
|
|
stroke-dasharray: 3 3;
|
|
}
|
|
|
|
/*-- Text on Chart --*/
|
|
.bb-text.bb-empty {
|
|
fill: var(--dp-text-muted);
|
|
font-size: 2em;
|
|
}
|
|
|
|
/*-- Line --*/
|
|
.bb-line {
|
|
stroke-width: 1px;
|
|
}
|
|
|
|
/*-- Point --*/
|
|
.bb-circle._expanded_ {
|
|
stroke-width: 1px;
|
|
stroke: var(--dp-text);
|
|
}
|
|
|
|
.bb-selected-circle {
|
|
fill: var(--dp-text);
|
|
stroke-width: 2px;
|
|
}
|
|
|
|
/*-- Bar --*/
|
|
.bb-bar {
|
|
stroke-width: 0;
|
|
}
|
|
|
|
.bb-bar._expanded_ {
|
|
fill-opacity: 0.75;
|
|
}
|
|
|
|
/*-- Candlestick --*/
|
|
.bb-candlestick {
|
|
stroke-width: 1px;
|
|
}
|
|
|
|
.bb-candlestick._expanded_ {
|
|
fill-opacity: 0.75;
|
|
}
|
|
|
|
/*-- Focus --*/
|
|
.bb-target.bb-focused, .bb-circles.bb-focused {
|
|
opacity: 1;
|
|
}
|
|
|
|
.bb-target.bb-focused path.bb-line, .bb-target.bb-focused path.bb-step, .bb-circles.bb-focused path.bb-line, .bb-circles.bb-focused path.bb-step {
|
|
stroke-width: 2px;
|
|
}
|
|
|
|
.bb-target.bb-defocused, .bb-circles.bb-defocused {
|
|
opacity: 0.3 !important;
|
|
}
|
|
|
|
.bb-target.bb-defocused .text-overlapping, .bb-circles.bb-defocused .text-overlapping {
|
|
opacity: 0.05 !important;
|
|
}
|
|
|
|
/*-- Region --*/
|
|
.bb-region {
|
|
fill: var(--dp-accent);
|
|
}
|
|
|
|
.bb-region rect {
|
|
fill-opacity: 0.1;
|
|
}
|
|
|
|
/*-- Zoom region --*/
|
|
.bb-zoom-brush {
|
|
fill-opacity: 0.1;
|
|
}
|
|
|
|
/*-- Brush --*/
|
|
.bb-brush .extent {
|
|
fill-opacity: 0.1;
|
|
}
|
|
|
|
/*-- Legend --*/
|
|
.bb-legend-item {
|
|
font-size: 12px;
|
|
user-select: none;
|
|
}
|
|
|
|
.bb-legend-item-hidden {
|
|
opacity: 0.15;
|
|
}
|
|
|
|
.bb-legend-background {
|
|
opacity: 0.75;
|
|
fill: var(--dp-panel);
|
|
stroke: var(--dp-border);
|
|
stroke-width: 1;
|
|
}
|
|
|
|
/*-- Title --*/
|
|
.bb-title {
|
|
font: 14px sans-serif;
|
|
}
|
|
|
|
/*-- Treemap --*/
|
|
.bb-chart-treemaps rect {
|
|
stroke: var(--dp-panel);
|
|
stroke-width: 1px;
|
|
}
|
|
|
|
/*-- Tooltip --*/
|
|
.bb-tooltip-container {
|
|
z-index: 10;
|
|
user-select: none;
|
|
}
|
|
|
|
.bb-tooltip {
|
|
border-collapse: collapse;
|
|
border-spacing: 0;
|
|
background-color: var(--dp-elevated);
|
|
empty-cells: show;
|
|
opacity: 0.9;
|
|
box-shadow: 7px 7px 12px -9px var(--dp-overlay);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.bb-tooltip tr {
|
|
border: 1px solid var(--dp-border);
|
|
}
|
|
|
|
.bb-tooltip th {
|
|
background-color: var(--dp-elevated);
|
|
font-size: 14px;
|
|
padding: 2px 5px;
|
|
text-align: left;
|
|
color: var(--dp-text);
|
|
}
|
|
|
|
.bb-tooltip td {
|
|
font-size: 13px;
|
|
padding: 3px 6px;
|
|
background-color: var(--dp-panel);
|
|
border-left: 1px dotted var(--dp-border-strong);
|
|
}
|
|
|
|
.bb-tooltip td > span, .bb-tooltip td > svg {
|
|
display: inline-block;
|
|
width: 10px;
|
|
height: 10px;
|
|
margin-right: 6px;
|
|
}
|
|
|
|
.bb-tooltip.value {
|
|
text-align: right;
|
|
}
|
|
|
|
/*-- Area --*/
|
|
.bb-area {
|
|
stroke-width: 0;
|
|
opacity: 0.2;
|
|
}
|
|
|
|
/*-- Arc --*/
|
|
.bb-chart-arcs-title {
|
|
dominant-baseline: middle;
|
|
font-size: 1.3em;
|
|
}
|
|
|
|
text.bb-chart-arcs-gauge-title {
|
|
dominant-baseline: middle;
|
|
font-size: 2.7em;
|
|
}
|
|
|
|
.bb-chart-arcs .bb-chart-arcs-background {
|
|
fill: var(--dp-elevated);
|
|
stroke: none;
|
|
}
|
|
|
|
.bb-chart-arcs .bb-chart-arcs-gauge-unit {
|
|
fill: var(--dp-text);
|
|
font-size: 16px;
|
|
}
|
|
|
|
.bb-chart-arcs .bb-chart-arcs-gauge-max {
|
|
fill: var(--dp-text-muted);
|
|
}
|
|
|
|
.bb-chart-arcs .bb-chart-arcs-gauge-min {
|
|
fill: var(--dp-text-muted);
|
|
}
|
|
|
|
.bb-chart-arcs .bb-levels circle {
|
|
fill: none;
|
|
stroke: var(--dp-border-strong);
|
|
stroke-width: 0.5px;
|
|
}
|
|
|
|
.bb-chart-arcs .bb-levels text {
|
|
fill: var(--dp-text-muted);
|
|
}
|
|
|
|
/*-- Radar --*/
|
|
.bb-chart-radars .bb-levels polygon {
|
|
fill: none;
|
|
stroke: var(--dp-border-strong);
|
|
stroke-width: 0.5px;
|
|
}
|
|
|
|
.bb-chart-radars .bb-levels text {
|
|
fill: var(--dp-text-muted);
|
|
}
|
|
|
|
.bb-chart-radars .bb-axis line {
|
|
stroke: var(--dp-border-strong);
|
|
stroke-width: 0.5px;
|
|
}
|
|
|
|
.bb-chart-radars .bb-axis text {
|
|
font-size: 1.15em;
|
|
cursor: default;
|
|
}
|
|
|
|
.bb-chart-radars .bb-shapes polygon {
|
|
fill-opacity: 0.2;
|
|
stroke-width: 1px;
|
|
}
|
|
|
|
/*-- Button --*/
|
|
.bb-button {
|
|
position: absolute;
|
|
top: 10px;
|
|
right: 10px;
|
|
}
|
|
|
|
.bb-button .bb-zoom-reset {
|
|
font-size: 11px;
|
|
border: solid 1px var(--dp-border);
|
|
background-color: var(--dp-panel);
|
|
color: var(--dp-text);
|
|
padding: 5px;
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/*
|
|
* 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: var(--dp-overlay);
|
|
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: var(--dp-accent-hover);
|
|
transition: transform 0.4s;
|
|
}
|
|
|
|
.filterTable input[type='checkbox']:not(.formCheckbox):checked {
|
|
background: rgba(24, 185, 129, 0.4);
|
|
}
|
|
|
|
.filterTable input[type='checkbox']:not(.formCheckbox):checked::before {
|
|
transform: translateX(20px);
|
|
}
|
|
|
|
.filterTable input[type='checkbox']:not(.formCheckbox):focus-visible {
|
|
outline: 2px solid rgba(24, 185, 129, 0.4);
|
|
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: #e6edf3;
|
|
--cacti-dd-menu-bg: rgba(11,14,19,0.70);
|
|
--cacti-dd-menu-bg-open: rgba(11,14,19,0.90);
|
|
--cacti-dd-panel-bg: rgba(17,22,29,0.94);
|
|
--cacti-dd-border: rgba(230,237,243,0.16);
|
|
--cacti-dd-accent: #1f9f6e;
|
|
}
|