mirror of
https://github.com/Cacti/cacti.git
synced 2026-11-08 21:16:17 +09:00
netniV
e5ae849e2c
* Fix for Issue #1168 - Allow copy of debug query text to clipboard Issue #1168 - Allow debug query section to be copied to the clipboard - Currently, whilst clipboard code is run, no text is being copied - Various text updated to i18n calls. - CSS still needs to be generated * Update with working version of copy that doesn't collapse with table header * Update copyToClipboard to copy table as HTML not just the HTML text * Issue #1168 - Further clipboard enhancements issue #1168 now presents a 'Copy' link on the right side of a debug header table (currently a circle) This functionality has been extended to copy the entire debug via the "Data Query Debug Information" header Sections are automatically expanded whilst copying to allow selection copy, non-expansion prevents this * Further fixes for #1168 issue#1168: Now uses jQuery.dialog() for messages (a lot nicer!) Need to find out if there is a function to retrieve Cacti language messages, ie, get data from https://cacti/messages.php?text
780 lines
13 KiB
CSS
780 lines
13 KiB
CSS
/* main styles */
|
|
|
|
body, table, tr, td {
|
|
font-family: Verdana, Arial, Helvetica, sans-serif;
|
|
font-size: 10px;
|
|
}
|
|
|
|
body {
|
|
margin: 0px;
|
|
background-color: #ffffff;
|
|
background-repeat: repeat-y;
|
|
}
|
|
|
|
/* links */
|
|
|
|
a, a:active, a:visited {
|
|
color: blue;
|
|
text-decoration: none;
|
|
}
|
|
|
|
a:hover {
|
|
text-decoration: underline;
|
|
color: #333333;
|
|
}
|
|
|
|
tr.selected {
|
|
background-color: khaki;
|
|
}
|
|
|
|
.odd {
|
|
background-color:#F5F5F5;
|
|
}
|
|
|
|
.even {
|
|
background-color:#E5E5E5;
|
|
}
|
|
|
|
.even-alternate {
|
|
background-color:#E7E9F2;
|
|
}
|
|
|
|
.saveRow {
|
|
background-color:#EAEAEA;
|
|
}
|
|
|
|
.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: #a9a9a9;
|
|
min-height:25px;
|
|
border-bottom:2px solid #00438c;
|
|
}
|
|
|
|
.cactiGraphPageHeadBackdrop {
|
|
background: transparent url('./../images/cacti_backdrop2.gif') no-repeat center right;
|
|
background-color: #a9a9a9;
|
|
}
|
|
|
|
.cactiConsolePageHeadBackdrop {
|
|
background: transparent url('./../images/cacti_backdrop.gif') no-repeat center right;
|
|
background-color: #a9a9a9;
|
|
}
|
|
|
|
.breadCrumbBar {
|
|
background-color: #e9e9e9;
|
|
}
|
|
|
|
ul#breadcrumbs {
|
|
font-size:10px;
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
#breadcrumbs li {
|
|
float: left;
|
|
}
|
|
|
|
#breadcrumbs a {
|
|
padding: 0px 5px;
|
|
float: left;
|
|
text-decoration: none;
|
|
color: blue;
|
|
position: relative;
|
|
}
|
|
|
|
.cactiTreeNavigationArea {
|
|
background: #efefef url('./../images/shadow_gray.gif') repeat-x center top;
|
|
border-right: #aaaaaa 1px solid;
|
|
padding-left:5px;
|
|
padding-right:5px;
|
|
padding-top:10px;
|
|
}
|
|
|
|
.cactiConsoleNavigationArea {
|
|
background: #f5f5f5 url('./../images/shadow_gray.gif') repeat-x center top;
|
|
border-right: #aaaaaa 1px solid;
|
|
padding-left:5px;
|
|
padding-right:5px;
|
|
padding-top:8px;
|
|
}
|
|
|
|
.cactiGraphContentArea {
|
|
background: #ffffff url('./../images/shadow.gif') repeat-x center top;
|
|
padding-top:10px;
|
|
padding-right: 5px;
|
|
padding-left: 5px;
|
|
}
|
|
|
|
.cactiConsoleContentArea {
|
|
background: #ffffff url('./../images/shadow.gif') repeat-x center top;
|
|
padding-top:10px;
|
|
padding-right: 5px;
|
|
padding-left: 5px;
|
|
}
|
|
|
|
.linkEditMain, .linkEditMain:visited, .linkEditMain:active {
|
|
color: blue;
|
|
text-decoration: none;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.linkEditMain:hover {
|
|
color: blue;
|
|
text-decoration: underline;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.linkCopyDark, .linkCopyDark:visited, .linkCopyDark:active {
|
|
color: white;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.linkCopyDark:hover {
|
|
color: white;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.linkOverDark, .linkOverDark:visited, .linkOverDark:active {
|
|
color: white;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.linkOverDark:hover {
|
|
color: white;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* text styles */
|
|
|
|
.textError {
|
|
font-size: 12px;
|
|
font-weight: bold;
|
|
color: red;
|
|
}
|
|
|
|
.textInfo {
|
|
font-size: 12px;
|
|
font-weight: bold;
|
|
color: black;
|
|
}
|
|
|
|
.textHeader {
|
|
font-size: 12px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.bold {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.messageBox {
|
|
margin-bottom:5px;
|
|
padding:5px;
|
|
background-color:#FFFFFF;
|
|
border:1px solid #BBBBBB;
|
|
max-width:100%;
|
|
position:relative;
|
|
}
|
|
|
|
.textHeaderDark {
|
|
font-size: 12px;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.templateHeader {
|
|
background-color: #888888;
|
|
}
|
|
|
|
.textSubHeaderDark, .textSubHeaderDark:visited {
|
|
font-size: 10px;
|
|
color: #ffffff;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.tableBody {
|
|
background-color: #e1e1e1;
|
|
}
|
|
|
|
.cactiTable {
|
|
background-color: #f5f5f5;
|
|
border-width: 0px;
|
|
border-color: #00438c;
|
|
border-style: solid;
|
|
}
|
|
|
|
.cactiTableTitle {
|
|
background-color: #00438c;
|
|
}
|
|
|
|
.cactiNavBarTop {
|
|
background-color: #00438c;
|
|
}
|
|
|
|
.cactiNavBarBottom {
|
|
background-color: #00438c;
|
|
}
|
|
|
|
.cactiTreeNavigationArea {
|
|
background: #efefef url('./../images/shadow_gray.gif') repeat-x center top;
|
|
border-right: #aaaaaa 1px solid;
|
|
padding-left:5px;
|
|
padding-right:5px;
|
|
padding-top:10px;
|
|
}
|
|
|
|
.cactiConsoleNavigationArea {
|
|
background: #f5f5f5 url('./../images/shadow_gray.gif') repeat-x center top;
|
|
border-right: #aaaaaa 1px solid;
|
|
padding-left:0px;
|
|
padding-right:0px;
|
|
padding-top:5px;
|
|
}
|
|
|
|
.cactiConsoleNavigationArea table {
|
|
width:135px;
|
|
}
|
|
|
|
.tableHeader {
|
|
background-color: #6d88ad;
|
|
}
|
|
|
|
.tableHeader th {
|
|
color: #ffffff;
|
|
font-weight:bold;
|
|
vertical-align:bottom;
|
|
border-right: 1px groove #efefef;
|
|
text-align:left;
|
|
}
|
|
|
|
.tableSubHeaderColumn {
|
|
color: #ffffff;
|
|
font-weight:bold;
|
|
vertical-align:bottom;
|
|
text-align:left;
|
|
}
|
|
|
|
.graphSubHeaderColumn {
|
|
color: #ffffff;
|
|
font-size:12px;
|
|
vertical-align:bottom;
|
|
text-align:left;
|
|
}
|
|
|
|
.tableSubHeaderCheckbox {
|
|
background-color: #819bc0;
|
|
}
|
|
|
|
.tableConfirmation {
|
|
background-color: #f5f5f5;
|
|
border: 1px solid #aaaaaa;
|
|
}
|
|
|
|
.navBarNext, .navBarNext:visited, .navBarNext:active, .navBarNext:hover {
|
|
color: white;
|
|
font-weight: bold;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.navBarPrevious, .navBarPrevious:visited, .navBarPrevious:active, .navBarPrevious:hover {
|
|
color: white;
|
|
font-weight: bold;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.textArea {
|
|
font-size: 10px;
|
|
background-color:#f5f5f5;
|
|
}
|
|
|
|
.popupBox {
|
|
z-index: 2;
|
|
position: absolute;
|
|
padding: 0px;
|
|
display: none;
|
|
overflow: auto;
|
|
color: #FFFFFF;
|
|
background-color:#e5e5e5;
|
|
border:1px solid #e5e5e5;
|
|
}
|
|
|
|
.installArea {
|
|
background-color: #ffffff;
|
|
padding: 10px;
|
|
}
|
|
|
|
.textAreaNotes {
|
|
font-size: 12px;
|
|
font-family: Verdana, Arial, Helvetica, sans-serif;
|
|
}
|
|
|
|
.textEditTitle {
|
|
font-size: 10px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.textMenuHeader {
|
|
color: #ffffff;
|
|
background-color: #9C9C9C;
|
|
font-family: Verdana, Arial, Helvetica, sans-serif;
|
|
font-size: 10px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.textMenuItem {
|
|
background-color: #f5f5f5;
|
|
font-family: Verdana, Arial, Helvetica, sans-serif;
|
|
font-size: 10px;
|
|
}
|
|
|
|
.textMenuSubItem {
|
|
background-color: #ffffff;
|
|
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;
|
|
}
|
|
|
|
/* 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%;
|
|
}
|
|
|
|
.tab {
|
|
border-color: #999 #666 -moz-use-text-color #999;
|
|
border-style: solid solid none;
|
|
border-width: 1px 1px medium;
|
|
}
|
|
|
|
.tabs li a {
|
|
background-color: #DFDFDF;
|
|
float:left !important;
|
|
padding:3px 4px;
|
|
text-decoration:none;
|
|
font-size: 11px;
|
|
border-color: #999 #666 -moz-use-text-color #999;
|
|
border-style: solid solid none;
|
|
border-width: 1px 1px medium;
|
|
font-weight: bold;
|
|
}
|
|
|
|
|
|
.tabs a:hover {
|
|
background-color: silver;
|
|
}
|
|
|
|
.tabs a.selected {
|
|
background-color: silver;
|
|
}
|
|
|
|
.tabs li {
|
|
bottom:-1px;
|
|
float:left;
|
|
margin:0 3px 0 0;
|
|
position:relative;
|
|
}
|
|
|
|
.tabs li.current a {
|
|
background:#fff;
|
|
border-bottom:1px solid #fff;
|
|
}
|
|
.tabs li.current a:hover {
|
|
background:#fff;
|
|
border-bottom:1px solid #fff;
|
|
}
|
|
.tabs nav {
|
|
border-bottom:1px solid #ccc;
|
|
padding:0px 4px 0px 0px;
|
|
background-repeat:repeat-x;
|
|
zoom:1;
|
|
}
|
|
|
|
.tabs nav:after {
|
|
clear:both;
|
|
content:".";
|
|
display:block;
|
|
height:0;
|
|
visibility:hidden;
|
|
}
|
|
|
|
.tabs ul {
|
|
list-style:none;
|
|
margin:0;
|
|
padding:0;
|
|
}
|
|
|
|
/* Navigation Area */
|
|
#nav {
|
|
background-color: #f5f5f5
|
|
float: left;
|
|
width: 150;
|
|
border-top: 0px solid #999;
|
|
border-right: 0px solid #999;
|
|
border-left: 0px solid #999;
|
|
font-size:10px;
|
|
margin: 0px 0;
|
|
}
|
|
|
|
#nav li a {
|
|
display: block;
|
|
font-size: 10px;
|
|
padding: 2px 4px;
|
|
background: #ccc;
|
|
border-bottom: 1px solid #666;
|
|
border-top: 1px solid #eee;
|
|
text-decoration: none;
|
|
color: blue;
|
|
}
|
|
|
|
#nav li a.active {
|
|
color: snow;
|
|
background-color: #9c9c9c;
|
|
border-bottom: 1px solid #666;
|
|
font-weight: bold;
|
|
}
|
|
|
|
#nav li a.pic:hover, #nav li a.selected {
|
|
background-color: #e1e1e1;
|
|
}
|
|
|
|
#nav li ul {
|
|
display: none;
|
|
padding:0;
|
|
}
|
|
|
|
#nav li ul li a {
|
|
padding: 2px 4px;
|
|
background: #f5f5f5;
|
|
border-bottom: 1px dotted #ccc;
|
|
}
|
|
|
|
#nav li ul li {
|
|
list-style:none;
|
|
padding:0;
|
|
}
|
|
|
|
ul#nav {
|
|
list-style: none;
|
|
padding:0;
|
|
width:100%;
|
|
}
|
|
|
|
/* The main calendar widget. DIV containing a table. */
|
|
|
|
div.calendar { position: relative; }
|
|
|
|
.calendar, .calendar table {
|
|
border: 1px solid #556;
|
|
font-size: 11px;
|
|
color: #000;
|
|
cursor: default;
|
|
background: #eef;
|
|
font-family: tahoma,verdana,sans-serif;
|
|
}
|
|
|
|
/* Header part -- contains navigation buttons and day names. */
|
|
|
|
.calendar .button { /* "<<", "<", ">", ">>" buttons have this class */
|
|
text-align: center; /* They are the navigation buttons */
|
|
padding: 2px; /* Make the buttons seem like they're pressing */
|
|
}
|
|
|
|
.calendar .nav {
|
|
background: #778 url(./../../../images/menuarrow.gif) no-repeat 100% 100%;
|
|
}
|
|
|
|
.calendar thead .title { /* This holds the current "month, year" */
|
|
font-weight: bold; /* Pressing it will take you to the current date */
|
|
text-align: center;
|
|
background: #fff;
|
|
color: #000;
|
|
padding: 2px;
|
|
}
|
|
|
|
.calendar thead .headrow { /* Row <TR> containing navigation buttons */
|
|
background: #778;
|
|
color: #fff;
|
|
}
|
|
|
|
.calendar thead .daynames { /* Row <TR> containing the day names */
|
|
background: #bdf;
|
|
}
|
|
|
|
.calendar thead .name { /* Cells <TD> containing the day names */
|
|
border-bottom: 1px solid #556;
|
|
padding: 2px;
|
|
text-align: center;
|
|
color: #000;
|
|
}
|
|
|
|
.calendar thead .weekend { /* How a weekend day name shows in header */
|
|
color: #a66;
|
|
}
|
|
|
|
.calendar thead .hilite { /* How do the buttons in header appear when hover */
|
|
background-color: #aaf;
|
|
color: #000;
|
|
border: 1px solid #04f;
|
|
padding: 1px;
|
|
}
|
|
|
|
.calendar thead .active { /* Active (pressed) buttons in header */
|
|
background-color: #77c;
|
|
padding: 2px 0px 0px 2px;
|
|
}
|
|
|
|
/* The body part -- contains all the days in month. */
|
|
|
|
.calendar tbody .day { /* Cells <TD> containing month days dates */
|
|
width: 2em;
|
|
color: #456;
|
|
text-align: right;
|
|
padding: 2px 4px 2px 2px;
|
|
}
|
|
.calendar tbody .day.othermonth {
|
|
font-size: 80%;
|
|
color: #bbb;
|
|
}
|
|
.calendar tbody .day.othermonth.oweekend {
|
|
color: #fbb;
|
|
}
|
|
|
|
.calendar table .wn {
|
|
padding: 2px 3px 2px 2px;
|
|
border-right: 1px solid #000;
|
|
background: #bdf;
|
|
}
|
|
|
|
.calendar tbody .rowhilite td {
|
|
background: #def;
|
|
}
|
|
|
|
.calendar tbody .rowhilite td.wn {
|
|
background: #eef;
|
|
}
|
|
|
|
.calendar tbody td.hilite { /* Hovered cells <TD> */
|
|
background: #def;
|
|
padding: 1px 3px 1px 1px;
|
|
border: 1px solid #bbb;
|
|
}
|
|
|
|
.calendar tbody td.active { /* Active (pressed) cells <TD> */
|
|
background: #cde;
|
|
padding: 2px 2px 0px 2px;
|
|
}
|
|
|
|
.calendar tbody td.selected { /* Cell showing today date */
|
|
font-weight: bold;
|
|
border: 1px solid #000;
|
|
padding: 1px 3px 1px 1px;
|
|
background: #fff;
|
|
color: #000;
|
|
}
|
|
|
|
.calendar tbody td.weekend { /* Cells showing weekend days */
|
|
color: #a66;
|
|
}
|
|
|
|
.calendar tbody td.today { /* Cell showing selected date */
|
|
font-weight: bold;
|
|
color: #00f;
|
|
}
|
|
|
|
.calendar tbody .disabled { color: #999; }
|
|
|
|
.calendar tbody .emptycell { /* Empty cells (the best is to hide them) */
|
|
visibility: hidden;
|
|
}
|
|
|
|
.calendar tbody .emptyrow { /* Empty row (some months need less than 6 rows) */
|
|
display: none;
|
|
}
|
|
|
|
/* The footer part -- status bar and "Close" button */
|
|
|
|
.calendar tfoot .footrow { /* The <TR> in footer (only one right now) */
|
|
text-align: center;
|
|
background: #556;
|
|
color: #fff;
|
|
}
|
|
|
|
.calendar tfoot .ttip { /* Tooltip (status bar) cell <TD> */
|
|
background: #fff;
|
|
color: #445;
|
|
border-top: 1px solid #556;
|
|
padding: 1px;
|
|
}
|
|
|
|
.calendar tfoot .hilite { /* Hover style for buttons in footer */
|
|
background: #aaf;
|
|
border: 1px solid #04f;
|
|
color: #000;
|
|
padding: 1px;
|
|
}
|
|
|
|
.calendar tfoot .active { /* Active (pressed) style for buttons in footer */
|
|
background: #77c;
|
|
padding: 2px 0px 0px 2px;
|
|
}
|
|
|
|
/* Combo boxes (menus that display months/years for direct selection) */
|
|
|
|
.calendar .combo {
|
|
position: absolute;
|
|
display: none;
|
|
top: 0px;
|
|
left: 0px;
|
|
width: 4em;
|
|
cursor: default;
|
|
border: 1px solid #655;
|
|
background: #def;
|
|
color: #000;
|
|
font-size: 90%;
|
|
}
|
|
|
|
.calendar .combo .label,
|
|
.calendar .combo .label-IEfix {
|
|
text-align: center;
|
|
padding: 1px;
|
|
}
|
|
|
|
.calendar .combo .label-IEfix {
|
|
width: 4em;
|
|
}
|
|
|
|
.calendar .combo .hilite {
|
|
background: #acf;
|
|
}
|
|
|
|
.calendar .combo .active {
|
|
border-top: 1px solid #46a;
|
|
border-bottom: 1px solid #46a;
|
|
background: #eef;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.calendar td.time {
|
|
border-top: 1px solid #000;
|
|
padding: 1px 0px;
|
|
text-align: center;
|
|
background-color: #f4f0e8;
|
|
}
|
|
|
|
.calendar td.time .hour,
|
|
.calendar td.time .minute,
|
|
.calendar td.time .ampm {
|
|
padding: 0px 3px 0px 4px;
|
|
border: 1px solid #889;
|
|
font-weight: bold;
|
|
background-color: #fff;
|
|
}
|
|
|
|
.calendar td.time .ampm {
|
|
text-align: center;
|
|
}
|
|
|
|
.calendar td.time .colon {
|
|
padding: 0px 2px 0px 3px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.calendar td.time span.hilite {
|
|
border-color: #000;
|
|
background-color: #667;
|
|
color: #fff;
|
|
}
|
|
|
|
.calendar td.time span.active {
|
|
border-color: #f00;
|
|
background-color: #000;
|
|
color: #0f0;
|
|
}
|
|
|
|
@media print {
|
|
.noprint { display:none }
|
|
}
|