CSS: move monitoring styles to monitoring module
This commit is contained in:
Thomas Gelf
parent
21d3e64ff0
commit
edeb24792e
|
|
@ -24,7 +24,6 @@ class StyleSheet
|
|||
'css/icinga/setup.less',
|
||||
'css/icinga/widgets.less',
|
||||
'css/icinga/pagination.less',
|
||||
'css/icinga/monitoring-colors.less',
|
||||
'css/icinga/selection-toolbar.less',
|
||||
'css/icinga/login.less',
|
||||
'css/icinga/controls.less'
|
||||
|
|
|
|||
|
|
@ -350,3 +350,909 @@ td.state {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Special tables and states */
|
||||
|
||||
table.colors {
|
||||
font-size: 0.8em;
|
||||
width: 98%;
|
||||
margin: 0 1%;
|
||||
}
|
||||
|
||||
table.colors td {
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
width: 10%;
|
||||
height: 1.6em;
|
||||
font-weight: normal;
|
||||
border: 0.079em solid white;
|
||||
}
|
||||
|
||||
|
||||
|
||||
table.action td.state {
|
||||
font-size: 0.7em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
table.action td.timesince {
|
||||
width: 3.5em;
|
||||
}
|
||||
|
||||
|
||||
/* State row behaviour */
|
||||
|
||||
tr.state img.icon {
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
tr.state a {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
tr.state a.active {
|
||||
}
|
||||
|
||||
tr.state.new td.state {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
tr.state td.state strong {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
tr.state td.state {
|
||||
width: 9em;
|
||||
color: white;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
tr.state.handled td.state, tr.state.ok td.state, tr.state.up td.state, tr.state.pending td.state {
|
||||
border-left-style: solid;
|
||||
border-left-width: 1.5em;
|
||||
padding-left: 0em;
|
||||
padding-right: 0.5em;
|
||||
color: black;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
tr[href].active {
|
||||
background-color: #eee;
|
||||
color: black;
|
||||
}
|
||||
|
||||
tr.state.ok td.state, tr.state.up td.state {
|
||||
border-left-color: @colorOk;
|
||||
}
|
||||
|
||||
tr.state.warning td.state {
|
||||
background-color: @colorWarning;
|
||||
}
|
||||
|
||||
tr.state.warning.handled td.state {
|
||||
border-left-color: @colorWarningHandled;
|
||||
}
|
||||
|
||||
tr.state.critical td.state, tr.state.down td.state {
|
||||
background-color: @colorCritical;
|
||||
}
|
||||
|
||||
tr.state.critical.handled td.state, tr.state.down.handled td.state {
|
||||
border-left-color: @colorCriticalHandled;
|
||||
}
|
||||
|
||||
tr.state.unreachable td.state {
|
||||
background-color: @colorUnreachable;
|
||||
}
|
||||
|
||||
tr.state.unreachable.handled td.state {
|
||||
border-left-color: @colorUnreachableHandled;
|
||||
}
|
||||
|
||||
tr.state.unknown td.state {
|
||||
background-color: @colorUnknown;
|
||||
}
|
||||
|
||||
tr.state.unknown.handled td.state {
|
||||
border-left-color: @colorUnknownHandled;
|
||||
}
|
||||
|
||||
tr.state.pending td.state {
|
||||
border-left-color: @colorPending;
|
||||
}
|
||||
|
||||
tr.state.invalid td.state {
|
||||
background-color: @colorInvalid;
|
||||
}
|
||||
|
||||
tr.state.unreachable td.state {
|
||||
background-color: @colorUnreachable;
|
||||
}
|
||||
|
||||
tr.state.unreachable.handled td.state {
|
||||
border-left-color: @colorUnreachableHandled;
|
||||
}
|
||||
|
||||
tr.state.handled td.state {
|
||||
color: inherit;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
/* HOVER colors */
|
||||
tr[href]:hover {
|
||||
color: black;
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
tr.state[href]:hover td.state {
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
tr.state.ok[href]:hover, tr.state.up[href]:hover {
|
||||
background-color: @colorOk;
|
||||
}
|
||||
|
||||
tr.state.handled[href]:hover, tr.state.handled[href]:hover td.state {
|
||||
color: #121212 !important;
|
||||
}
|
||||
|
||||
tr.state.warning[href]:hover {
|
||||
background-color: @colorWarning;
|
||||
}
|
||||
|
||||
tr.state.warning.handled[href]:hover {
|
||||
background-color: @colorWarningHandled;
|
||||
}
|
||||
|
||||
tr.state.critical[href]:hover, tr.state.down[href]:hover {
|
||||
background-color: @colorCritical;
|
||||
}
|
||||
|
||||
tr.state.critical.handled[href]:hover, tr.state.down.handled[href]:hover {
|
||||
background-color: @colorCriticalHandled;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
tr.state.unknown[href]:hover {
|
||||
background-color: @colorUnknown;
|
||||
}
|
||||
|
||||
tr.state.unknown.handled[href]:hover {
|
||||
background-color: @colorUnknownHandled;
|
||||
}
|
||||
|
||||
tr.state.pending[href]:hover {
|
||||
background-color: @colorPending;
|
||||
}
|
||||
|
||||
tr.state.invalid[href]:hover {
|
||||
background-color: @colorInvalid;
|
||||
}
|
||||
|
||||
tr.state.unreachable[href]:hover {
|
||||
background-color: @colorUnreachable;
|
||||
}
|
||||
|
||||
tr.state.unreachable.handled[href]:hover {
|
||||
background-color: @colorUnreachableHandled;
|
||||
}
|
||||
|
||||
tr.state[href]:hover td.state {
|
||||
background-color: inherit !important;
|
||||
}
|
||||
|
||||
/* END of HOVER colors */
|
||||
|
||||
/* END of special tables and states */
|
||||
|
||||
|
||||
/* Generic colors */
|
||||
|
||||
a.critical {
|
||||
color: @colorCritical;
|
||||
}
|
||||
|
||||
/* END of Generic colors */
|
||||
|
||||
|
||||
/* Generic box element */
|
||||
|
||||
.boxview a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.boxview > div.box {
|
||||
text-align: center;
|
||||
vertical-align: top;
|
||||
display: inline-block;
|
||||
padding: 0.4em;
|
||||
margin: 0.4em;
|
||||
border: 1px solid #d9d9d9;
|
||||
background: #eee;
|
||||
}
|
||||
|
||||
/* Box caption */
|
||||
.boxview div.box h2 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.6em;
|
||||
font-size: 0.8em;
|
||||
color: @colorTextDefault;
|
||||
}
|
||||
|
||||
.boxview div.box h2:first-child {
|
||||
margin-top: 0.2em;
|
||||
padding-bottom: 0.5em;
|
||||
font-size: inherit;
|
||||
color: @colorTextDefault;
|
||||
border-bottom: 1px solid #d9d9d9;
|
||||
}
|
||||
|
||||
.boxview div.box h2 > a {
|
||||
color: inherit;
|
||||
margin-bottom: 0.2em;
|
||||
}
|
||||
|
||||
.boxview div.box h2 > a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.boxview div.box h2:first-child > a:hover {
|
||||
}
|
||||
|
||||
.boxview div.box h3 {
|
||||
line-height: 1.5em;
|
||||
font-size: 0.9em;
|
||||
color: #555;
|
||||
border-bottom: 1px solid #d9d9d9;
|
||||
}
|
||||
|
||||
/* Box body of contents */
|
||||
.boxview div.box.contents {
|
||||
padding: 0.2em;
|
||||
}
|
||||
|
||||
.boxview div.box.contents table {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.boxview div.box.contents td {
|
||||
width: 13em;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
/* Box separator */
|
||||
.boxview div.box-separator:first-child {
|
||||
border-top-width: 0;
|
||||
}
|
||||
|
||||
.boxview div.box-separator {
|
||||
font-size: 0.8em;
|
||||
padding: 0.4em 0 0.4em;
|
||||
border: 1px solid #d9d9d9;
|
||||
|
||||
font-weight: bold;
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
|
||||
/* Box entry */
|
||||
.boxview div.box.entry {
|
||||
min-height: 2.7em;
|
||||
margin: 0.2em;
|
||||
font-size: 0.9em;
|
||||
white-space: nowrap;
|
||||
|
||||
color: @colorTextDefault;
|
||||
}
|
||||
|
||||
/* Any line of a box entry */
|
||||
.boxview div.box.entry a {
|
||||
display: block;
|
||||
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.boxview div.box.entry a:hover {
|
||||
color: @colorTextDefault;
|
||||
}
|
||||
|
||||
/* First line of a box entry */
|
||||
.boxview div.box.entry a:first-child {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
/* End of generic box element */
|
||||
|
||||
|
||||
/* Monitoring box element styles */
|
||||
|
||||
/* Host- and Servicegroup element styles */
|
||||
|
||||
div.box.entry.state_up, div.box.entry.state_ok {
|
||||
border: 1px solid @colorOk;
|
||||
border-left: 1em solid @colorOk;
|
||||
}
|
||||
|
||||
div.box.entry.state_pending {
|
||||
border: 1px solid @colorPending;
|
||||
border-left: 1em solid @colorPending;
|
||||
}
|
||||
|
||||
div.box.entry.state_down, div.box.entry.state_critical {
|
||||
border: 1px solid @colorCritical;
|
||||
border-left: 1em solid @colorCritical;
|
||||
background-color: @colorCritical;
|
||||
color: white;
|
||||
}
|
||||
|
||||
div.box.entry.state_down a:hover, div.box.entry.state_critical a:hover {
|
||||
color: #dcdcdc;
|
||||
}
|
||||
|
||||
div.box.entry.state_warning {
|
||||
border: 1px solid @colorWarning;
|
||||
border-left: 1em solid @colorWarning;
|
||||
background-color: @colorWarning;
|
||||
color: white;
|
||||
}
|
||||
|
||||
div.box.entry.state_warning a:hover {
|
||||
color: #dcdcdc;
|
||||
}
|
||||
|
||||
div.box.entry.state_unreachable, div.box.entry.state_unknown {
|
||||
border: 1px solid @colorUnknown;
|
||||
border-left: 1em solid @colorUnknown;
|
||||
background-color: @colorUnknown;
|
||||
color: white;
|
||||
}
|
||||
|
||||
div.box.entry.state_unreachable a:hover, div.box.entry.state_unknown a:hover {
|
||||
color: #dcdcdc;
|
||||
}
|
||||
|
||||
div.box.entry.handled {
|
||||
background-color: transparent;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
div.box.entry.handled a:hover {
|
||||
color: @colorTextDefault;
|
||||
}
|
||||
|
||||
/* Tactical overview element styles */
|
||||
|
||||
.tactical > .boxview > div.box {
|
||||
min-height: 20em;
|
||||
min-width: 12.1em;
|
||||
}
|
||||
|
||||
.tactical div.box.contents {
|
||||
min-height: 14.5em;
|
||||
}
|
||||
|
||||
div.box.contents.zero {
|
||||
min-width: 11.1em;
|
||||
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
div.box.contents.zero span {
|
||||
font-weight: bold;
|
||||
line-height: 2em;
|
||||
|
||||
color: #666;
|
||||
}
|
||||
|
||||
div.box.contents.zero h3 {
|
||||
margin: 0;
|
||||
font-size: 12em;
|
||||
line-height: 1em;
|
||||
|
||||
color: #666;
|
||||
}
|
||||
|
||||
div.box.ok_hosts.state_up {
|
||||
border: 5px solid @colorOk;
|
||||
}
|
||||
|
||||
div.box.ok_hosts.state_pending {
|
||||
background-color: @colorPending;
|
||||
}
|
||||
|
||||
div.box.problem_hosts.state_down {
|
||||
border: 5px solid @colorCritical;
|
||||
}
|
||||
|
||||
div.box.problem_hosts.state_down.handled {
|
||||
background-color: @colorCriticalHandled;
|
||||
}
|
||||
|
||||
div.box.problem_hosts.state_unreachable {
|
||||
background-color: @colorUnreachable;
|
||||
}
|
||||
|
||||
div.box.problem_hosts.state_unreachable.handled {
|
||||
background-color: @colorUnreachableHandled;
|
||||
}
|
||||
|
||||
div.box.ok_hosts div.box.entry, div.box.problem_hosts div.box.entry {
|
||||
min-width: 11.1em;
|
||||
}
|
||||
|
||||
div.box.monitoringfeatures div.box.contents {
|
||||
padding: 0 2 0em;
|
||||
}
|
||||
|
||||
div.box.monitoringfeatures {
|
||||
border: 5px solid #d9d9d9;
|
||||
}
|
||||
|
||||
div.box.monitoringfeatures div.box-separator {
|
||||
color: white;
|
||||
background-color: @colorOk;
|
||||
}
|
||||
|
||||
div.box.monitoringfeatures div.feature-highlight {
|
||||
background-color: @colorCritical;
|
||||
}
|
||||
|
||||
div.box.monitoringfeatures a.feature-highlight {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
div.box.hostservicechecks {
|
||||
border: 5px solid #d9d9d9;
|
||||
}
|
||||
|
||||
/* Contactgroup element styles */
|
||||
|
||||
div.box.contactgroup {
|
||||
width: 18em;
|
||||
padding: 0.8em;
|
||||
}
|
||||
|
||||
div.box.contactgroup div.box.contents {
|
||||
padding: 0.6em;
|
||||
}
|
||||
|
||||
div.box.contactgroup div.box.entry {
|
||||
overflow: hidden;
|
||||
clear: left;
|
||||
}
|
||||
|
||||
div.box.contactgroup div.box.entry img {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
float: left;
|
||||
|
||||
}
|
||||
|
||||
div.box.contactgroup div.box.entry a {
|
||||
margin-top: 0.4em;
|
||||
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
div.box.contactgroup div.box.entry p {
|
||||
margin: 0.4em 0 0;
|
||||
}
|
||||
|
||||
div.circular {
|
||||
margin-top: 0.5em;
|
||||
margin-left: 2em;
|
||||
margin-right: 1em;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
float: left;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
/* End of monitoring box element styles */
|
||||
|
||||
|
||||
/* Monitoring pivot table styles */
|
||||
|
||||
div.pivot-pagination {
|
||||
margin: 1em;
|
||||
|
||||
table {
|
||||
table-layout: fixed;
|
||||
border-spacing: 1px;
|
||||
border-collapse: separate;
|
||||
border: 1px solid LightGrey;
|
||||
border-radius: 0.3em;
|
||||
|
||||
td {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
padding: 0;
|
||||
background-color: #fbfbfb;
|
||||
|
||||
&:hover, &.active {
|
||||
background-color: #e5e5e5;
|
||||
}
|
||||
|
||||
a {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
table.joystick-pagination {
|
||||
margin-top: -1.5em;
|
||||
|
||||
td {
|
||||
width: 1.25em;
|
||||
height: 1.3em;
|
||||
}
|
||||
}
|
||||
|
||||
table.pivot {
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: black;
|
||||
|
||||
&:hover {
|
||||
color: @colorTextDefault;
|
||||
}
|
||||
}
|
||||
|
||||
& > thead {
|
||||
th {
|
||||
height: 6em;
|
||||
|
||||
div {
|
||||
margin-right: -1.5em;
|
||||
padding-left: 1.3em;
|
||||
|
||||
span {
|
||||
width: 1.5em;
|
||||
margin-right: 0.25em;
|
||||
margin-top: 4em;
|
||||
line-height: 2em;
|
||||
white-space: nowrap;
|
||||
display: block;
|
||||
float: left;
|
||||
|
||||
transform: rotate(-45deg);
|
||||
transform-origin: bottom left;
|
||||
-o-transform: rotate(-45deg);
|
||||
-o-transform-origin: bottom left;
|
||||
-ms-transform: rotate(-45deg);
|
||||
-ms-transform-origin: bottom left;
|
||||
-moz-transform: rotate(-45deg);
|
||||
-moz-transform-origin: bottom left;
|
||||
-webkit-transform: rotate(-45deg);
|
||||
-webkit-transform-origin: bottom left;
|
||||
//filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
|
||||
|
||||
abbr {
|
||||
border: 0; // Remove highlighting in firefox
|
||||
font-size: 0.8em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& > tbody {
|
||||
th {
|
||||
padding: 0 14px 0 0;
|
||||
white-space: nowrap;
|
||||
|
||||
a {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 2px;
|
||||
min-width: 1.5em;
|
||||
line-height: 1.5em;
|
||||
text-align: center;
|
||||
|
||||
a {
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
display: block;
|
||||
border-radius: 0.5em;
|
||||
|
||||
&.state_ok {
|
||||
background-color: @colorOk;
|
||||
}
|
||||
|
||||
&.state_pending {
|
||||
background-color: @colorPending;
|
||||
}
|
||||
|
||||
&.state_warning {
|
||||
background-color: @colorWarning;
|
||||
|
||||
&.handled {
|
||||
background-color: @colorWarningHandled;
|
||||
}
|
||||
}
|
||||
|
||||
&.state_critical {
|
||||
background-color: @colorCritical;
|
||||
|
||||
&.handled {
|
||||
background-color: @colorCriticalHandled;
|
||||
}
|
||||
}
|
||||
|
||||
&.state_unknown {
|
||||
background-color: @colorUnknown;
|
||||
|
||||
&.handled {
|
||||
background-color: @colorUnknownHandled;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* End of monitoring pivot table styles */
|
||||
|
||||
/* Monitoring timeline styles */
|
||||
|
||||
div.timeline-legend {
|
||||
float: left;
|
||||
padding: 0.5em;
|
||||
border: 1px solid #d9d9d9;
|
||||
background-color: #eee;
|
||||
|
||||
h2 {
|
||||
margin: 0;
|
||||
margin-left: 0.5em;
|
||||
line-height: 1.1em;
|
||||
}
|
||||
|
||||
& > span {
|
||||
display: inline-block;
|
||||
padding: 0.5em;
|
||||
margin: 0.5em;
|
||||
|
||||
span {
|
||||
color: white;
|
||||
font-size: 0.8em;
|
||||
font-weight: bold;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div.timeline {
|
||||
div.timeframe {
|
||||
height: 7em;
|
||||
margin-bottom: 1em;
|
||||
clear: left;
|
||||
|
||||
span {
|
||||
width: 8em;
|
||||
margin-top: 2.3em;
|
||||
margin-right: 1.5em;
|
||||
display: block;
|
||||
float: left;
|
||||
text-align: center;
|
||||
|
||||
a {
|
||||
color: @colorTextDefault;
|
||||
font-size: 0.8em;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
|
||||
&:hover {
|
||||
color: @colorTextDefault;
|
||||
text-decoration: underline;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div.circle-box {
|
||||
// width: inline-style;
|
||||
height: 100%;
|
||||
margin-right: 0.5em;
|
||||
position: relative;
|
||||
float: left;
|
||||
|
||||
div.outer-circle {
|
||||
// width: inline-style;
|
||||
// height: inline-style;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
// margin-top: inline-style;
|
||||
|
||||
&.extrapolated {
|
||||
border-width: 2px;
|
||||
border-style: dotted;
|
||||
//border-color: inline-style;
|
||||
border-radius: 100%;
|
||||
// background-color: inline-style;
|
||||
}
|
||||
|
||||
a.inner-circle {
|
||||
// width: inline-style;
|
||||
// height: inline-style;
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
// margin-top: inline-style;
|
||||
// margin-left: inline-style;
|
||||
border-radius: 100%;
|
||||
// background-color: inline-style;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
border: 0;
|
||||
height: 1px;
|
||||
background-image: linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.3), rgba(0,0,0,0));
|
||||
background-image: -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.3), rgba(0,0,0,0));
|
||||
background-image: -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.3), rgba(0,0,0,0));
|
||||
background-image: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.3), rgba(0,0,0,0));
|
||||
background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.3), rgba(0,0,0,0));
|
||||
}
|
||||
}
|
||||
|
||||
/* End of monitoring timeline styles */
|
||||
|
||||
/* Monitoring groupsummary styles */
|
||||
|
||||
.dashboard table.groupview {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
table.groupview {
|
||||
width: 100%;
|
||||
margin-top: 1em;
|
||||
border-collapse: separate;
|
||||
border-spacing: 0.1em;
|
||||
|
||||
th {
|
||||
font-size: 0.9em;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
td {
|
||||
&.groupname {
|
||||
width: 60%;
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.total {
|
||||
width: 10%;
|
||||
}
|
||||
|
||||
&.state {
|
||||
width: 20%;
|
||||
white-space: nowrap;
|
||||
|
||||
&.change {
|
||||
width: 10%;
|
||||
text-align: center;
|
||||
border-left-width: 1.5em;
|
||||
border-left-style: solid;
|
||||
padding: 0.3em 0.5em 0.3em 0.5em;
|
||||
|
||||
strong {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
span.timesince {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
&.ok {
|
||||
border-color: @colorOk;
|
||||
}
|
||||
|
||||
&.pending {
|
||||
border-color: @colorPending;
|
||||
}
|
||||
|
||||
&.warning {
|
||||
border-color: @colorWarningHandled;
|
||||
|
||||
&.unhandled {
|
||||
color: white;
|
||||
border-left-width: 0;
|
||||
background-color: @colorWarning;
|
||||
}
|
||||
}
|
||||
|
||||
&.unknown {
|
||||
border-color: @colorUnknownHandled;
|
||||
|
||||
&.unhandled {
|
||||
color: white;
|
||||
border-left-width: 0;
|
||||
background-color: @colorUnknown;
|
||||
}
|
||||
}
|
||||
|
||||
&.critical {
|
||||
border-color: @colorCriticalHandled;
|
||||
|
||||
&.unhandled {
|
||||
color: white;
|
||||
border-left-width: 0;
|
||||
background-color: @colorCritical;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
span.state {
|
||||
&.handled {
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
a {
|
||||
font-size: 0.9em;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* End of monitoring groupsummary styles */
|
||||
|
||||
/* compact table */
|
||||
table.statesummary {
|
||||
text-align: left;
|
||||
width: auto;
|
||||
border-collapse: separate;
|
||||
|
||||
tr.state td.state {
|
||||
width: auto;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
td {
|
||||
font-size: 0.9em;
|
||||
line-height: 1.2em;
|
||||
padding-left: 0.2em;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
td.state {
|
||||
padding: 0.2em;
|
||||
min-width: 75px;
|
||||
font-size: 0.75em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
td.name {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
td a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -222,6 +222,64 @@ table.benchmark {
|
|||
background-color: #fbfcc5;
|
||||
}
|
||||
|
||||
/* Action table */
|
||||
table.action {
|
||||
font-size: 0.9em;
|
||||
border-collapse: separate;
|
||||
border-spacing: 1px;
|
||||
width: 100%;
|
||||
table-layout: fixed !important;
|
||||
margin: 0;
|
||||
color: @colorTextDefault;
|
||||
}
|
||||
|
||||
table.action th {
|
||||
text-align: left;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
table.action.wide td {
|
||||
line-height: 2.5em;
|
||||
}
|
||||
|
||||
table.action td {
|
||||
padding: 0.3em 0.5em 0.3em 0.5em;
|
||||
line-height: 1.5em;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.dashboard table.action td {
|
||||
line-height: 1.2em;
|
||||
padding: 0.2 0.4em 0.2em 0.5em;
|
||||
}
|
||||
|
||||
table.action td .pluginoutput {
|
||||
font-size: 0.8em;
|
||||
line-height: 1.2em;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
table.action td a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
table.action td a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* END of Action table */
|
||||
|
||||
/* Table behaviour */
|
||||
|
||||
tr[href] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* End of table behaviour */
|
||||
|
||||
|
||||
div.content.users {
|
||||
table.user-list {
|
||||
th.user-remove {
|
||||
|
|
|
|||
|
|
@ -1,964 +0,0 @@
|
|||
/*! Icinga Web 2 | (c) 2013-2015 Icinga Development Team | GPLv2+ */
|
||||
|
||||
/* Special tables and states */
|
||||
|
||||
table.colors {
|
||||
font-size: 0.8em;
|
||||
width: 98%;
|
||||
margin: 0 1%;
|
||||
}
|
||||
|
||||
table.colors td {
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
width: 10%;
|
||||
height: 1.6em;
|
||||
font-weight: normal;
|
||||
border: 0.079em solid white;
|
||||
}
|
||||
|
||||
/* Action table */
|
||||
table.action {
|
||||
font-size: 0.9em;
|
||||
border-collapse: separate;
|
||||
border-spacing: 1px;
|
||||
width: 100%;
|
||||
table-layout: fixed !important;
|
||||
margin: 0;
|
||||
color: @colorTextDefault;
|
||||
}
|
||||
|
||||
table.action th {
|
||||
text-align: left;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
table.action.wide td {
|
||||
line-height: 2.5em;
|
||||
}
|
||||
|
||||
table.action td {
|
||||
padding: 0.3em 0.5em 0.3em 0.5em;
|
||||
line-height: 1.5em;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.dashboard table.action td {
|
||||
line-height: 1.2em;
|
||||
padding: 0.2 0.4em 0.2em 0.5em;
|
||||
}
|
||||
|
||||
table.action td .pluginoutput {
|
||||
font-size: 0.8em;
|
||||
line-height: 1.2em;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
table.action td a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
table.action td a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* END of Action table */
|
||||
|
||||
|
||||
/* Table behaviour */
|
||||
|
||||
tr[href] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* End of table behaviour */
|
||||
|
||||
|
||||
table.action td.state {
|
||||
font-size: 0.7em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
table.action td.timesince {
|
||||
width: 3.5em;
|
||||
}
|
||||
|
||||
|
||||
/* State row behaviour */
|
||||
|
||||
tr.state img.icon {
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
tr.state a {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
tr.state a.active {
|
||||
}
|
||||
|
||||
tr.state.new td.state {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
tr.state td.state strong {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
tr.state td.state {
|
||||
width: 9em;
|
||||
color: white;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
tr.state.handled td.state, tr.state.ok td.state, tr.state.up td.state, tr.state.pending td.state {
|
||||
border-left-style: solid;
|
||||
border-left-width: 1.5em;
|
||||
padding-left: 0em;
|
||||
padding-right: 0.5em;
|
||||
color: black;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
tr[href].active {
|
||||
background-color: #eee;
|
||||
color: black;
|
||||
}
|
||||
|
||||
tr.state.ok td.state, tr.state.up td.state {
|
||||
border-left-color: @colorOk;
|
||||
}
|
||||
|
||||
tr.state.warning td.state {
|
||||
background-color: @colorWarning;
|
||||
}
|
||||
|
||||
tr.state.warning.handled td.state {
|
||||
border-left-color: @colorWarningHandled;
|
||||
}
|
||||
|
||||
tr.state.critical td.state, tr.state.down td.state {
|
||||
background-color: @colorCritical;
|
||||
}
|
||||
|
||||
tr.state.critical.handled td.state, tr.state.down.handled td.state {
|
||||
border-left-color: @colorCriticalHandled;
|
||||
}
|
||||
|
||||
tr.state.unreachable td.state {
|
||||
background-color: @colorUnreachable;
|
||||
}
|
||||
|
||||
tr.state.unreachable.handled td.state {
|
||||
border-left-color: @colorUnreachableHandled;
|
||||
}
|
||||
|
||||
tr.state.unknown td.state {
|
||||
background-color: @colorUnknown;
|
||||
}
|
||||
|
||||
tr.state.unknown.handled td.state {
|
||||
border-left-color: @colorUnknownHandled;
|
||||
}
|
||||
|
||||
tr.state.pending td.state {
|
||||
border-left-color: @colorPending;
|
||||
}
|
||||
|
||||
tr.state.invalid td.state {
|
||||
background-color: @colorInvalid;
|
||||
}
|
||||
|
||||
tr.state.unreachable td.state {
|
||||
background-color: @colorUnreachable;
|
||||
}
|
||||
|
||||
tr.state.unreachable.handled td.state {
|
||||
border-left-color: @colorUnreachableHandled;
|
||||
}
|
||||
|
||||
tr.state.handled td.state {
|
||||
color: inherit;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
/* HOVER colors */
|
||||
tr[href]:hover {
|
||||
color: black;
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
tr.state[href]:hover td.state {
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
tr.state.ok[href]:hover, tr.state.up[href]:hover {
|
||||
background-color: @colorOk;
|
||||
}
|
||||
|
||||
tr.state.handled[href]:hover, tr.state.handled[href]:hover td.state {
|
||||
color: #121212 !important;
|
||||
}
|
||||
|
||||
tr.state.warning[href]:hover {
|
||||
background-color: @colorWarning;
|
||||
}
|
||||
|
||||
tr.state.warning.handled[href]:hover {
|
||||
background-color: @colorWarningHandled;
|
||||
}
|
||||
|
||||
tr.state.critical[href]:hover, tr.state.down[href]:hover {
|
||||
background-color: @colorCritical;
|
||||
}
|
||||
|
||||
tr.state.critical.handled[href]:hover, tr.state.down.handled[href]:hover {
|
||||
background-color: @colorCriticalHandled;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
tr.state.unknown[href]:hover {
|
||||
background-color: @colorUnknown;
|
||||
}
|
||||
|
||||
tr.state.unknown.handled[href]:hover {
|
||||
background-color: @colorUnknownHandled;
|
||||
}
|
||||
|
||||
tr.state.pending[href]:hover {
|
||||
background-color: @colorPending;
|
||||
}
|
||||
|
||||
tr.state.invalid[href]:hover {
|
||||
background-color: @colorInvalid;
|
||||
}
|
||||
|
||||
tr.state.unreachable[href]:hover {
|
||||
background-color: @colorUnreachable;
|
||||
}
|
||||
|
||||
tr.state.unreachable.handled[href]:hover {
|
||||
background-color: @colorUnreachableHandled;
|
||||
}
|
||||
|
||||
tr.state[href]:hover td.state {
|
||||
background-color: inherit !important;
|
||||
}
|
||||
|
||||
/* END of HOVER colors */
|
||||
|
||||
/* END of special tables and states */
|
||||
|
||||
|
||||
/* Generic colors */
|
||||
|
||||
a.critical {
|
||||
color: @colorCritical;
|
||||
}
|
||||
|
||||
/* END of Generic colors */
|
||||
|
||||
|
||||
/* Generic box element */
|
||||
|
||||
.boxview a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.boxview > div.box {
|
||||
text-align: center;
|
||||
vertical-align: top;
|
||||
display: inline-block;
|
||||
padding: 0.4em;
|
||||
margin: 0.4em;
|
||||
border: 1px solid #d9d9d9;
|
||||
background: #eee;
|
||||
}
|
||||
|
||||
/* Box caption */
|
||||
.boxview div.box h2 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.6em;
|
||||
font-size: 0.8em;
|
||||
color: @colorTextDefault;
|
||||
}
|
||||
|
||||
.boxview div.box h2:first-child {
|
||||
margin-top: 0.2em;
|
||||
padding-bottom: 0.5em;
|
||||
font-size: inherit;
|
||||
color: @colorTextDefault;
|
||||
border-bottom: 1px solid #d9d9d9;
|
||||
}
|
||||
|
||||
.boxview div.box h2 > a {
|
||||
color: inherit;
|
||||
margin-bottom: 0.2em;
|
||||
}
|
||||
|
||||
.boxview div.box h2 > a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.boxview div.box h2:first-child > a:hover {
|
||||
}
|
||||
|
||||
.boxview div.box h3 {
|
||||
line-height: 1.5em;
|
||||
font-size: 0.9em;
|
||||
color: #555;
|
||||
border-bottom: 1px solid #d9d9d9;
|
||||
}
|
||||
|
||||
/* Box body of contents */
|
||||
.boxview div.box.contents {
|
||||
padding: 0.2em;
|
||||
}
|
||||
|
||||
.boxview div.box.contents table {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.boxview div.box.contents td {
|
||||
width: 13em;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
/* Box separator */
|
||||
.boxview div.box-separator:first-child {
|
||||
border-top-width: 0;
|
||||
}
|
||||
|
||||
.boxview div.box-separator {
|
||||
font-size: 0.8em;
|
||||
padding: 0.4em 0 0.4em;
|
||||
border: 1px solid #d9d9d9;
|
||||
|
||||
font-weight: bold;
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
|
||||
/* Box entry */
|
||||
.boxview div.box.entry {
|
||||
min-height: 2.7em;
|
||||
margin: 0.2em;
|
||||
font-size: 0.9em;
|
||||
white-space: nowrap;
|
||||
|
||||
color: @colorTextDefault;
|
||||
}
|
||||
|
||||
/* Any line of a box entry */
|
||||
.boxview div.box.entry a {
|
||||
display: block;
|
||||
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.boxview div.box.entry a:hover {
|
||||
color: @colorTextDefault;
|
||||
}
|
||||
|
||||
/* First line of a box entry */
|
||||
.boxview div.box.entry a:first-child {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
/* End of generic box element */
|
||||
|
||||
|
||||
/* Monitoring box element styles */
|
||||
|
||||
/* Host- and Servicegroup element styles */
|
||||
|
||||
div.box.entry.state_up, div.box.entry.state_ok {
|
||||
border: 1px solid @colorOk;
|
||||
border-left: 1em solid @colorOk;
|
||||
}
|
||||
|
||||
div.box.entry.state_pending {
|
||||
border: 1px solid @colorPending;
|
||||
border-left: 1em solid @colorPending;
|
||||
}
|
||||
|
||||
div.box.entry.state_down, div.box.entry.state_critical {
|
||||
border: 1px solid @colorCritical;
|
||||
border-left: 1em solid @colorCritical;
|
||||
background-color: @colorCritical;
|
||||
color: white;
|
||||
}
|
||||
|
||||
div.box.entry.state_down a:hover, div.box.entry.state_critical a:hover {
|
||||
color: #dcdcdc;
|
||||
}
|
||||
|
||||
div.box.entry.state_warning {
|
||||
border: 1px solid @colorWarning;
|
||||
border-left: 1em solid @colorWarning;
|
||||
background-color: @colorWarning;
|
||||
color: white;
|
||||
}
|
||||
|
||||
div.box.entry.state_warning a:hover {
|
||||
color: #dcdcdc;
|
||||
}
|
||||
|
||||
div.box.entry.state_unreachable, div.box.entry.state_unknown {
|
||||
border: 1px solid @colorUnknown;
|
||||
border-left: 1em solid @colorUnknown;
|
||||
background-color: @colorUnknown;
|
||||
color: white;
|
||||
}
|
||||
|
||||
div.box.entry.state_unreachable a:hover, div.box.entry.state_unknown a:hover {
|
||||
color: #dcdcdc;
|
||||
}
|
||||
|
||||
div.box.entry.handled {
|
||||
background-color: transparent;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
div.box.entry.handled a:hover {
|
||||
color: @colorTextDefault;
|
||||
}
|
||||
|
||||
/* Tactical overview element styles */
|
||||
|
||||
.tactical > .boxview > div.box {
|
||||
min-height: 20em;
|
||||
min-width: 12.1em;
|
||||
}
|
||||
|
||||
.tactical div.box.contents {
|
||||
min-height: 14.5em;
|
||||
}
|
||||
|
||||
div.box.contents.zero {
|
||||
min-width: 11.1em;
|
||||
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
div.box.contents.zero span {
|
||||
font-weight: bold;
|
||||
line-height: 2em;
|
||||
|
||||
color: #666;
|
||||
}
|
||||
|
||||
div.box.contents.zero h3 {
|
||||
margin: 0;
|
||||
font-size: 12em;
|
||||
line-height: 1em;
|
||||
|
||||
color: #666;
|
||||
}
|
||||
|
||||
div.box.ok_hosts.state_up {
|
||||
border: 5px solid @colorOk;
|
||||
}
|
||||
|
||||
div.box.ok_hosts.state_pending {
|
||||
background-color: @colorPending;
|
||||
}
|
||||
|
||||
div.box.problem_hosts.state_down {
|
||||
border: 5px solid @colorCritical;
|
||||
}
|
||||
|
||||
div.box.problem_hosts.state_down.handled {
|
||||
background-color: @colorCriticalHandled;
|
||||
}
|
||||
|
||||
div.box.problem_hosts.state_unreachable {
|
||||
background-color: @colorUnreachable;
|
||||
}
|
||||
|
||||
div.box.problem_hosts.state_unreachable.handled {
|
||||
background-color: @colorUnreachableHandled;
|
||||
}
|
||||
|
||||
div.box.ok_hosts div.box.entry, div.box.problem_hosts div.box.entry {
|
||||
min-width: 11.1em;
|
||||
}
|
||||
|
||||
div.box.monitoringfeatures div.box.contents {
|
||||
padding: 0 2 0em;
|
||||
}
|
||||
|
||||
div.box.monitoringfeatures {
|
||||
border: 5px solid #d9d9d9;
|
||||
}
|
||||
|
||||
div.box.monitoringfeatures div.box-separator {
|
||||
color: white;
|
||||
background-color: @colorOk;
|
||||
}
|
||||
|
||||
div.box.monitoringfeatures div.feature-highlight {
|
||||
background-color: @colorCritical;
|
||||
}
|
||||
|
||||
div.box.monitoringfeatures a.feature-highlight {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
div.box.hostservicechecks {
|
||||
border: 5px solid #d9d9d9;
|
||||
}
|
||||
|
||||
/* Contactgroup element styles */
|
||||
|
||||
div.box.contactgroup {
|
||||
width: 18em;
|
||||
padding: 0.8em;
|
||||
}
|
||||
|
||||
div.box.contactgroup div.box.contents {
|
||||
padding: 0.6em;
|
||||
}
|
||||
|
||||
div.box.contactgroup div.box.entry {
|
||||
overflow: hidden;
|
||||
clear: left;
|
||||
}
|
||||
|
||||
div.box.contactgroup div.box.entry img {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
float: left;
|
||||
|
||||
}
|
||||
|
||||
div.box.contactgroup div.box.entry a {
|
||||
margin-top: 0.4em;
|
||||
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
div.box.contactgroup div.box.entry p {
|
||||
margin: 0.4em 0 0;
|
||||
}
|
||||
|
||||
div.circular {
|
||||
margin-top: 0.5em;
|
||||
margin-left: 2em;
|
||||
margin-right: 1em;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
float: left;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
/* End of monitoring box element styles */
|
||||
|
||||
|
||||
/* Monitoring pivot table styles */
|
||||
|
||||
div.pivot-pagination {
|
||||
margin: 1em;
|
||||
|
||||
table {
|
||||
table-layout: fixed;
|
||||
border-spacing: 1px;
|
||||
border-collapse: separate;
|
||||
border: 1px solid LightGrey;
|
||||
border-radius: 0.3em;
|
||||
|
||||
td {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
padding: 0;
|
||||
background-color: #fbfbfb;
|
||||
|
||||
&:hover, &.active {
|
||||
background-color: #e5e5e5;
|
||||
}
|
||||
|
||||
a {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
table.joystick-pagination {
|
||||
margin-top: -1.5em;
|
||||
|
||||
td {
|
||||
width: 1.25em;
|
||||
height: 1.3em;
|
||||
}
|
||||
}
|
||||
|
||||
table.pivot {
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: black;
|
||||
|
||||
&:hover {
|
||||
color: @colorTextDefault;
|
||||
}
|
||||
}
|
||||
|
||||
& > thead {
|
||||
th {
|
||||
height: 6em;
|
||||
|
||||
div {
|
||||
margin-right: -1.5em;
|
||||
padding-left: 1.3em;
|
||||
|
||||
span {
|
||||
width: 1.5em;
|
||||
margin-right: 0.25em;
|
||||
margin-top: 4em;
|
||||
line-height: 2em;
|
||||
white-space: nowrap;
|
||||
display: block;
|
||||
float: left;
|
||||
|
||||
transform: rotate(-45deg);
|
||||
transform-origin: bottom left;
|
||||
-o-transform: rotate(-45deg);
|
||||
-o-transform-origin: bottom left;
|
||||
-ms-transform: rotate(-45deg);
|
||||
-ms-transform-origin: bottom left;
|
||||
-moz-transform: rotate(-45deg);
|
||||
-moz-transform-origin: bottom left;
|
||||
-webkit-transform: rotate(-45deg);
|
||||
-webkit-transform-origin: bottom left;
|
||||
//filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
|
||||
|
||||
abbr {
|
||||
border: 0; // Remove highlighting in firefox
|
||||
font-size: 0.8em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& > tbody {
|
||||
th {
|
||||
padding: 0 14px 0 0;
|
||||
white-space: nowrap;
|
||||
|
||||
a {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 2px;
|
||||
min-width: 1.5em;
|
||||
line-height: 1.5em;
|
||||
text-align: center;
|
||||
|
||||
a {
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
display: block;
|
||||
border-radius: 0.5em;
|
||||
|
||||
&.state_ok {
|
||||
background-color: @colorOk;
|
||||
}
|
||||
|
||||
&.state_pending {
|
||||
background-color: @colorPending;
|
||||
}
|
||||
|
||||
&.state_warning {
|
||||
background-color: @colorWarning;
|
||||
|
||||
&.handled {
|
||||
background-color: @colorWarningHandled;
|
||||
}
|
||||
}
|
||||
|
||||
&.state_critical {
|
||||
background-color: @colorCritical;
|
||||
|
||||
&.handled {
|
||||
background-color: @colorCriticalHandled;
|
||||
}
|
||||
}
|
||||
|
||||
&.state_unknown {
|
||||
background-color: @colorUnknown;
|
||||
|
||||
&.handled {
|
||||
background-color: @colorUnknownHandled;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* End of monitoring pivot table styles */
|
||||
|
||||
/* Monitoring timeline styles */
|
||||
|
||||
div.timeline-legend {
|
||||
float: left;
|
||||
padding: 0.5em;
|
||||
border: 1px solid #d9d9d9;
|
||||
background-color: #eee;
|
||||
|
||||
h2 {
|
||||
margin: 0;
|
||||
margin-left: 0.5em;
|
||||
line-height: 1.1em;
|
||||
}
|
||||
|
||||
& > span {
|
||||
display: inline-block;
|
||||
padding: 0.5em;
|
||||
margin: 0.5em;
|
||||
|
||||
span {
|
||||
color: white;
|
||||
font-size: 0.8em;
|
||||
font-weight: bold;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div.timeline {
|
||||
div.timeframe {
|
||||
height: 7em;
|
||||
margin-bottom: 1em;
|
||||
clear: left;
|
||||
|
||||
span {
|
||||
width: 8em;
|
||||
margin-top: 2.3em;
|
||||
margin-right: 1.5em;
|
||||
display: block;
|
||||
float: left;
|
||||
text-align: center;
|
||||
|
||||
a {
|
||||
color: @colorTextDefault;
|
||||
font-size: 0.8em;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
|
||||
&:hover {
|
||||
color: @colorTextDefault;
|
||||
text-decoration: underline;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div.circle-box {
|
||||
// width: inline-style;
|
||||
height: 100%;
|
||||
margin-right: 0.5em;
|
||||
position: relative;
|
||||
float: left;
|
||||
|
||||
div.outer-circle {
|
||||
// width: inline-style;
|
||||
// height: inline-style;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
// margin-top: inline-style;
|
||||
|
||||
&.extrapolated {
|
||||
border-width: 2px;
|
||||
border-style: dotted;
|
||||
//border-color: inline-style;
|
||||
border-radius: 100%;
|
||||
// background-color: inline-style;
|
||||
}
|
||||
|
||||
a.inner-circle {
|
||||
// width: inline-style;
|
||||
// height: inline-style;
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
// margin-top: inline-style;
|
||||
// margin-left: inline-style;
|
||||
border-radius: 100%;
|
||||
// background-color: inline-style;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
border: 0;
|
||||
height: 1px;
|
||||
background-image: linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.3), rgba(0,0,0,0));
|
||||
background-image: -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.3), rgba(0,0,0,0));
|
||||
background-image: -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.3), rgba(0,0,0,0));
|
||||
background-image: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.3), rgba(0,0,0,0));
|
||||
background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.3), rgba(0,0,0,0));
|
||||
}
|
||||
}
|
||||
|
||||
/* End of monitoring timeline styles */
|
||||
|
||||
/* Monitoring groupsummary styles */
|
||||
|
||||
.dashboard table.groupview {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
table.groupview {
|
||||
width: 100%;
|
||||
margin-top: 1em;
|
||||
border-collapse: separate;
|
||||
border-spacing: 0.1em;
|
||||
|
||||
th {
|
||||
font-size: 0.9em;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
td {
|
||||
&.groupname {
|
||||
width: 60%;
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.total {
|
||||
width: 10%;
|
||||
}
|
||||
|
||||
&.state {
|
||||
width: 20%;
|
||||
white-space: nowrap;
|
||||
|
||||
&.change {
|
||||
width: 10%;
|
||||
text-align: center;
|
||||
border-left-width: 1.5em;
|
||||
border-left-style: solid;
|
||||
padding: 0.3em 0.5em 0.3em 0.5em;
|
||||
|
||||
strong {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
span.timesince {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
&.ok {
|
||||
border-color: @colorOk;
|
||||
}
|
||||
|
||||
&.pending {
|
||||
border-color: @colorPending;
|
||||
}
|
||||
|
||||
&.warning {
|
||||
border-color: @colorWarningHandled;
|
||||
|
||||
&.unhandled {
|
||||
color: white;
|
||||
border-left-width: 0;
|
||||
background-color: @colorWarning;
|
||||
}
|
||||
}
|
||||
|
||||
&.unknown {
|
||||
border-color: @colorUnknownHandled;
|
||||
|
||||
&.unhandled {
|
||||
color: white;
|
||||
border-left-width: 0;
|
||||
background-color: @colorUnknown;
|
||||
}
|
||||
}
|
||||
|
||||
&.critical {
|
||||
border-color: @colorCriticalHandled;
|
||||
|
||||
&.unhandled {
|
||||
color: white;
|
||||
border-left-width: 0;
|
||||
background-color: @colorCritical;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
span.state {
|
||||
&.handled {
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
a {
|
||||
font-size: 0.9em;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* End of monitoring groupsummary styles */
|
||||
|
||||
/* compact table */
|
||||
table.statesummary {
|
||||
text-align: left;
|
||||
width: auto;
|
||||
border-collapse: separate;
|
||||
|
||||
tr.state td.state {
|
||||
width: auto;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
td {
|
||||
font-size: 0.9em;
|
||||
line-height: 1.2em;
|
||||
padding-left: 0.2em;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
td.state {
|
||||
padding: 0.2em;
|
||||
min-width: 75px;
|
||||
font-size: 0.75em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
td.name {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
td a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue