summaryrefslogtreecommitdiffstats
path: root/modules/monitoring/public/css/module.less
diff options
context:
space:
mode:
Diffstat (limited to 'modules/monitoring/public/css/module.less')
-rw-r--r--modules/monitoring/public/css/module.less1919
1 files changed, 1919 insertions, 0 deletions
diff --git a/modules/monitoring/public/css/module.less b/modules/monitoring/public/css/module.less
new file mode 100644
index 0000000..f97031c
--- /dev/null
+++ b/modules/monitoring/public/css/module.less
@@ -0,0 +1,1919 @@
+/*! Icinga Web 2 | (c) 2014 Icinga Development Team | GPLv2+ */
+
+.monitoring-statusbar {
+ position: relative;
+ background-color: @body-bg-color;
+ border-top: 1px solid @gray-lighter;
+ padding: .25em @gutter;
+ line-height: 1.3;
+
+ .services-summary,
+ .hosts-summary {
+ float: right;
+ margin-bottom: 0;
+ }
+
+ .selection-info {
+ float: left;
+ margin-top: 0.182em;
+ }
+}
+
+// Hostgroup- and servicegroup-grid styles
+
+.grid-toggle-link {
+ display: inline-block;
+ margin-left: 1em;
+ text-decoration: none;
+ vertical-align: middle;
+
+ > i {
+ font-size: 1.25em;
+
+ &.-active {
+ color: @icinga-blue;
+ }
+
+ &.-inactive {
+ color: @gray-light;
+ }
+ }
+}
+
+.group-grid {
+ display: grid;
+ grid-gap: 1em 3em;
+ grid-template-columns: repeat(auto-fit, 14em);
+
+ .group-grid-cell > a:last-child {
+ display: inline-block;
+ max-width: 10em;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ text-align: center;
+ vertical-align: middle;
+ }
+
+ .group-grid-cell > a:first-child,
+ .group-grid-cell > div.state-none {
+ .bg-stateful();
+ .rounded-corners();
+
+ display: inline-block;
+ margin-right: 1em;
+ padding: .5em;
+ height: 2.5em;
+ width: 2.5em;
+ text-align: center;
+ vertical-align: middle;
+ color: white;
+ }
+ .group-grid-cell > div.state-none {
+ background-color: @gray-light;
+ }
+}
+
+// Styles for the icon displayed if a check result is late
+.check-result-late {
+ &:before {
+ // Remove right margin because the check now form may be displayed right next to the icon and we already have a gap
+ // because of inline-blocks
+ margin-right: 0;
+ }
+}
+
+// Show more and load more links in overviews
+.action-links {
+ text-align: right;
+}
+
+.actions .nav {
+ li > a,
+ li > span {
+ display: inline-block;
+ }
+}
+
+// State summary badges
+.state-badges {
+ display: inline-block;
+ vertical-align: middle;
+
+ > ul > li {
+ padding-right: @vertical-padding;
+
+ &:last-child {
+ padding-right: 0;
+ }
+ }
+
+ .state-badge-group li {
+ margin-right: 1px;
+ }
+
+ .state-badge-group li:last-child {
+ margin-right: 0;
+ }
+
+ .state-badge-group .badge {
+ border-radius: 0;
+ }
+
+ .state-badge-group li:first-child > .badge {
+ border-top-left-radius: 0.4em;
+ border-bottom-left-radius: 0.4em;
+ }
+
+ .state-badge-group li:last-child > .badge {
+ border-top-right-radius: 0.4em;
+ border-bottom-right-radius: 0.4em;
+ }
+}
+
+// Performance data pie charts
+.inline-pie {
+ display: inline-block;
+ height: 14/12em;
+ margin-right: 0.1em;
+ position: relative;
+ top: 0.1em;
+ width: 14/12em;
+}
+
+// Host and service summaries in detail and list views
+.hosts-summary,
+.services-summary {
+ display: inline-block;
+ margin-bottom: 0.5em;
+
+ > .hosts-link,
+ > .services-link,
+ > .state-badges {
+ vertical-align: middle;
+ }
+}
+
+.service-on {
+ color: @text-color-light;
+
+ > a {
+ color: @text-color;
+ letter-spacing: normal;
+ font-weight: bold;
+ }
+}
+
+// State table in the host and service multi-selection and detail views
+.host-detail-state,
+.service-detail-state {
+ margin-bottom: 0.5em;
+}
+
+.grid {
+ .hosts-summary,
+ .services-summary {
+ float: left;
+ }
+}
+
+// Quick actions
+.quick-actions {
+ margin: 0 -.5em;
+
+ &:last-child {
+ margin-bottom: -.25em;
+ }
+
+ li {
+ color: @icinga-blue;
+ }
+
+ a,
+ button {
+ .rounded-corners();
+ padding: .25em .5em;
+
+ &:hover {
+ background-color: @gray-lighter;
+ text-decoration: none;
+ }
+ }
+}
+
+/* Generic box element */
+
+.boxview > div.box {
+ text-align: center;
+ vertical-align: top;
+ display: inline-block;
+ padding: 20px;
+}
+
+
+
+/* Box body of contents */
+
+.boxview div.box.contents {
+ padding-top: 20px;
+}
+
+.boxview div.box.contents table {
+ width: 100%;
+}
+
+.boxview div.box.contents td {
+ vertical-align: top;
+}
+
+/* Box entry */
+
+/* Any line of a box entry */
+.boxview div.box.entry a {
+ display: block;
+}
+
+.boxview div.box.badge {
+ padding: 5px;
+}
+
+
+/* First line of a box entry */
+.boxview div.box.entry a:first-child {
+}
+
+/* End of generic box element */
+
+/* Tactical overview element styles */
+
+.tactical > .boxview > div.box {
+ min-height: 45em;
+ padding: 0px;
+}
+
+.tactical div.box.header {
+ margin: 10px;
+ min-height: 8em;
+ color: @text-color-inverted;
+ font-size: @font-size-dashboard;
+}
+
+.tactical div.box.badge {
+ border-radius: 0.0em;
+}
+
+div.box.ok_hosts.state_up {
+ background-color: @color-ok;
+ border: 1px solid white;
+}
+
+div.box.problem_hosts.state_down {
+ background-color: @color-critical;
+ border: 1px solid white;
+}
+
+div.box.ok_hosts div.box.entry, div.box.problem_hosts div.box.entry {
+ min-width: 8em;
+ min-height: 4em;
+}
+
+.tactical div.box.contents {
+ background-color: white;
+ min-height: 13em;
+ font-size: @font-size-dashboard-small;
+ text-align: left;
+}
+
+div.box.monitoringfeatures {
+ border: 1px solid @gray-lighter;
+ border-left: 15px @gray;
+}
+
+div.box.monitoringfeatures div.box-separator {
+ color: white;
+ background-color: @color-ok;
+}
+
+div.box.monitoringfeatures div.feature-highlight {
+ background-color: @color-critical;
+}
+
+div.box.monitoringfeatures a.feature-highlight {
+}
+
+div.box.hostservicechecks {
+ border: 1px solid @gray-lighter;
+ border-left: 15px @gray;
+}
+
+div.box.hostservicechecks th {
+ padding-bottom: 20px;
+}
+
+/* Monitoring health - PROCESS - element styles */
+
+div.box.process {
+ width: 100%;
+ max-width: 50em;
+ border: 1px solid @gray-lighter;
+ border-left: 15px @gray;
+ margin-bottom: 1em;
+ margin-right: 1em;
+}
+
+.process div.box.header {
+ min-height: 5em;
+ border-bottom: 1px solid @gray-lighter;
+}
+
+.process > .boxview > div.box {
+ min-height: 30em;
+}
+
+.process h2 {
+ margin-top: 0;
+ margin-bottom: 1em;
+ padding-bottom: 1em;
+ border-bottom: 1px solid @gray-lighter;
+}
+
+.process th {
+ width: 50%;
+ text-align: right;
+}
+
+.process td {
+ width: 50%;
+ padding-left: 2em;
+ text-align: left;
+}
+
+div.backend-running {
+ background: @color-ok;
+ color: white;
+ text-align: center;
+ margin-top: 1em;
+ padding: 0.5em;
+
+ &.span {
+ color: white;
+ }
+}
+
+div.backend-not-running {
+ background: @color-critical;
+ color: white;
+ text-align: center;
+ padding: 0.1em;
+}
+
+
+/* Monitoring health - FEATURE - element styles */
+
+div.box.features {
+ width: 100%;
+ max-width: 50em;
+ border: 1px solid @gray-lighter;
+ border-left: 15px @gray;
+}
+
+.features div.box.header {
+ min-height: 5em;
+ border-bottom: 1px solid @gray-lighter;
+}
+
+.features > .boxview > div.box {
+ min-height: 30em;
+}
+
+.features h2 {
+ margin-top: 0;
+ margin-bottom: 1em;
+ padding-bottom: 1em;
+ border-bottom: 1px solid @gray-lighter;
+}
+
+
+/* Monitoring health - STATS - element styles */
+
+div.box.stats {
+ width: 100%;
+ max-width: 50em;
+ border: 1px solid @gray-lighter;
+ border-left: 15px @gray;
+ color: @text-color;
+}
+
+.stats > .boxview > div.box {
+ min-height: 30em;
+}
+
+.stats > .name-value-table {
+ table-layout: fixed;
+ text-align: left;
+}
+
+.stats > table > thead {
+ color: @gray;
+}
+
+.stats > h2 {
+ text-align: left;
+ border-bottom: 1px solid @gray-lighter;
+
+ > .hosts-summary,
+ > .services-summary {
+ width: 100%;
+ > .state-badges {
+ float: right;
+ }
+ }
+}
+
+.tinystatesummary .badge {
+ font-weight: normal;
+}
+
+/* Monitoring timeline styles */
+
+div.timeline-legend {
+ padding: 0.5em;
+ margin-top: 2em;
+ border: 1px solid @gray-lighter;
+ border-left-width: 15px;
+
+ h2 {
+ margin: 0;
+ margin-left: 0.5em;
+ line-height: 1.1em;
+ }
+
+ & > span {
+ display: inline-block;
+ padding: 0.5em;
+ margin: 0.5em;
+
+ span {
+ white-space: nowrap;
+ min-width: 25px;
+ font-family: tahoma, verdana, sans-serif;
+ font-weight: @font-weight-bold;
+ font-size: 11px;
+ text-align: center;
+ color: @text-color-inverted;
+ padding-left: 5px;
+ padding-right: 5px;
+ padding-top: 2px;
+ padding-bottom: 2px;
+ }
+ }
+}
+
+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 {
+ font-weight: bold;
+ white-space: nowrap;
+ }
+ }
+
+ 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));
+ }
+}
+
+@timeline-notification-color: #3a71ea;
+@timeline-hard-state-color: #ff7000;
+@timeline-comment-color: #79bdba;
+@timeline-ack-color: #a2721d;
+@timeline-downtime-start-color: #8e8e8e;
+@timeline-downtime-end-color: #d5d6ad;
+
+.timeline-notification {
+ background-color: @timeline-notification-color;
+
+ &.extrapolated {
+ background-color: lighten(@timeline-notification-color, 20%);
+ }
+}
+
+.timeline-hard-state {
+ background-color: @timeline-hard-state-color;
+
+ &.extrapolated {
+ background-color: lighten(@timeline-hard-state-color, 20%);
+ }
+}
+
+.timeline-comment {
+ background-color: @timeline-comment-color;
+
+ &.extrapolated {
+ background-color: lighten(@timeline-comment-color, 20%);
+ }
+}
+
+.timeline-ack {
+ background-color: @timeline-ack-color;
+
+ &.extrapolated {
+ background-color: lighten(@timeline-ack-color, 20%);
+ }
+}
+
+.timeline-downtime-start {
+ background-color: @timeline-downtime-start-color;
+
+ &.extrapolated {
+ background-color: lighten(@timeline-downtime-start-color, 20%);
+ }
+}
+
+.timeline-downtime-end {
+ background-color: @timeline-downtime-end-color;
+
+ &.extrapolated {
+ background-color: lighten(@timeline-downtime-end-color, 20%);
+ }
+}
+
+/* End of monitoring timeline styles */
+
+/* Object features */
+
+form.instance-features span.description, form.object-features span.description {
+ text-align: left;
+}
+
+.object-features {
+ .control-label-group {
+ text-align: left;
+ margin-right: 0;
+ width: @name-value-table-name-width;
+ color: @text-color-light;
+
+ label {
+ font-size: inherit;
+ }
+ }
+
+ .control-group {
+ margin-top: 0;
+ margin-bottom: 0;
+
+ &.indeterminate {
+ justify-content: flex-start;
+
+ .control-label-group {
+ flex: 0 1 auto;
+ }
+
+ select {
+ width: auto;
+ flex: 0 1 auto;
+
+ & + span.hint {
+ flex: 0 1 auto;
+ }
+ }
+ }
+ }
+
+ .toggle-switch {
+ margin-left: @table-column-padding;
+ }
+
+ select {
+ margin-right: .5em;
+ margin-left: @table-column-padding;
+
+ & + span.hint {
+ margin: .35em;
+ color: @gray-light;
+ font-style: italic;
+ }
+ }
+}
+
+.plugin-output {
+ border-left: 5px solid @gray-lighter;
+ padding: 0.66em 0.33em;
+
+ .state-critical {
+ background-color: @color-critical;
+ color: @body-bg-color;
+ padding: 0.2em;
+ }
+
+ .state-ok {
+ background-color: @color-ok;
+ color: @body-bg-color;
+ padding: 0.2em;
+ }
+
+ .state-unknown {
+ background-color: @color-unknown;
+ color: @body-bg-color;
+ padding: 0.2em;
+ }
+
+ .state-warning {
+ background-color: @color-warning;
+ color: @body-bg-color;
+ padding: 0.2em;
+ }
+
+ .state-down {
+ background-color: @color-down;
+ color: @body-bg-color;
+ padding: 0.2em;
+ }
+
+ .state-up {
+ background-color: @color-up;
+ color: @body-bg-color;
+ padding: 0.2em;
+ }
+}
+
+.go-ahead,
+.markdown,
+.plugin-output {
+ a {
+ border-bottom: 1px dotted @gray-light;
+
+ &:hover {
+ border-bottom: 1px solid @text-color;
+ text-decoration: none;
+ }
+ }
+}
+
+.event-details {
+ .badge {
+ font-size: 0.6em;
+ margin-right: 0.5em;
+ }
+
+ .state-label {
+ vertical-align: middle;
+ }
+}
+
+/* Object customvars */
+.custom-var-table {
+ .level-1 th {
+ padding-left: .5em;
+ }
+
+ .level-2 th {
+ padding-left: 1em;
+ }
+
+ .level-3 th {
+ padding-left: 1.5em;
+ }
+
+ .level-4 th {
+ padding-left: 2em;
+ }
+
+ .level-5 th {
+ padding-left: 2.5em;
+ }
+
+ .level-6 th {
+ padding-left: 3em;
+ }
+
+ .empty {
+ color: @gray-semilight;
+ }
+
+ thead th {
+ padding-left: 0;
+ text-align: left;
+ font-weight: bold;
+ font-size: 1.167em;
+
+ > span {
+ :nth-child(1),
+ :nth-child(2) {
+ display: none;
+ }
+ }
+ }
+
+ &[data-can-collapse] thead th > span {
+ :nth-child(1) {
+ display: none;
+ }
+
+ :nth-child(2) {
+ display: inline-block;
+ }
+ }
+
+ &.collapsed thead th > span {
+ :nth-child(1) {
+ display: inline-block;
+ }
+
+ :nth-child(2) {
+ display: none;
+ }
+ }
+}
+
+//p.pluginoutput {
+// width: 100%;
+// white-space: pre-wrap;
+// font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', 'DejaVu Sans Mono', 'Courier New', Courier, monospace;
+//}
+//
+//table.action td .pluginoutput {
+// font-size: 0.875em;
+// line-height: 1.2em;
+// padding: 0;
+// margin: 0;
+//}
+//
+//div.pluginoutput {
+// overflow: auto;
+// color: #888;
+// margin-bottom: 1em;
+// padding: 0.2em;
+//}
+//
+//div.pluginoutput pre {
+// white-space: pre-wrap;
+// border-left: 4px solid #d8d8d8;
+// padding: 0.3em 0 0.3em 1em;
+// font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', 'DejaVu Sans Mono', 'Courier New', Courier, monospace;
+//}
+//
+//table.objectstate td.state {
+// padding-top: 0.5em;
+// padding-bottom: 0.5em;
+//}
+//
+//div.contacts div.contact {
+// background-color: #eee;
+// padding: 0.5em;
+// border: 1px solid #d9d9d9;
+// overflow: hidden;
+// margin: 0.125em;
+// float: left;
+//}
+//
+//div.contacts div.contact a{
+// color: @colorTextDefault;
+//}
+//
+//div.contacts div.contact > img {
+// width: 80px;
+// height: 80px;
+// margin-right: 8px;
+// float: left;
+//}
+//
+//div.contacts div.notification-periods {
+// margin-top: 0.5em;
+//}
+//
+//.tinystatesummary {
+// .badges {
+// display: inline-block;
+// margin-bottom: 4px;
+// margin-left: 1em;
+// height: auto;
+// }
+//
+// .state > a {
+// color: white;
+// font-size: 0.857em;
+// padding: 2px 5px;
+// }
+//}
+//
+///* State badges */
+//span.state {
+// font-weight: bold;
+// color: white;
+// font-weight: bold;
+// padding: 2px 3px;
+// margin-right: 5px;
+//}
+//
+//span.state.active {
+// border: 2px solid #555;
+// padding: 2px 4px;
+// margin-right: 4px;
+//}
+//
+//span.state span.state {
+// margin: 0 -6px 0 5px;
+//}
+//
+//span.state.ok {
+// background: @colorOk;
+//}
+//
+//span.state.up {
+// background: @colorOk;
+//}
+//
+//span.state.critical {
+// background: @colorCritical;
+//}
+//
+//span.state.down {
+// background: @colorCritical;
+//}
+//
+//span.state.handled.critical {
+// background: @colorCriticalHandled;
+//}
+//
+//span.state.handled.down {
+// background: @colorCriticalHandled;
+//}
+//
+//span.state.warning {
+// background: @colorWarning;
+//}
+//
+//span.state.handled.warning {
+// background: @colorWarningHandled;
+//}
+//
+//span.state.unknown {
+// background: @colorUnknown;
+//}
+//
+//span.state.handled.unknown {
+// background: @colorUnknownHandled;
+//}
+//
+//span.state.pending {
+// background: @colorPending;
+//}
+//
+//form.instance-features span.description, form.object-features span.description {
+// display: inline;
+//}
+//
+//.boxview div.box form.instance-features div.header {
+// border-bottom: 1px solid #d9d9d9;
+// margin-bottom: 0.5em;
+//
+// h2 {
+// border: 0;
+// padding-bottom: 0;
+// }
+//}
+//
+//table.avp form.object-features div.header h4 {
+// margin: 0;
+//}
+//
+//table.avp {
+// th {
+// font-weight: normal;
+// font-size: 0.875em;
+// padding-top: 0.25em;
+// }
+//
+// h2 {
+// font-size: 0.875em;
+// line-height: 1.2em;
+// padding-bottom: 0.1em;
+// }
+//
+// td {
+// color: #666;
+// padding-bottom: 0.3em;
+// line-height: 1.5em;
+// th, td {
+// padding: 0;
+// }
+// }
+//
+// .badge a[href] {
+// color: @colorGray;
+// }
+//
+// .go-ahead {
+// a, button.link-like {
+// color: #222;
+// }
+// }
+//
+// .object-features {
+// label {
+// font-weight: normal;
+// margin-right: 0;
+// width: 14em;
+// font-size: 0.875em;
+// }
+//
+// input {
+// margin: 0;
+// }
+// }
+//}
+//
+//table.avp .customvar ul {
+// list-style-type: none;
+// margin: 0;
+// padding: 0;
+// padding-left: 1.5em;
+//}
+//
+//div.selection-info {
+// padding-top: 0.4em;
+// float: right;
+// cursor: help;
+// font-size: 0.857em;
+//}
+//
+//.optionbox {
+// margin-left: 0em;
+// margin-right: 3em;
+//}
+//
+//.optionbox label {
+// max-width: 6.5em;
+// text-align: left;
+// vertgical-align: middle;
+// margin-right: 0em;
+//}
+//
+//.optionbox input {
+// vertical-align: middle;
+//}
+//
+//.object-command form h1, .objects-command form h1 {
+// border: none;
+//}
+//
+//hr.command-separator {
+// border: none;
+// border-bottom: 2px solid @colorPetrol;
+//}
+//
+//div.backend-not-running {
+// background: @colorCritical;
+// color: white;
+// text-align: center;
+// padding: 0.1em;
+//}
+//
+//td.state {
+// .time-ago,
+// .time-since,
+// .time-until {
+// text-transform: capitalize;
+// }
+//}
+//
+//.inline-comments {
+// padding: 0;
+// margin: 0;
+// font-size: 0.857em;
+//
+// .time-ago {
+// font-style: italic;
+// color: #919191;
+// }
+//
+// li {
+// list-style-type: none;
+// margin-bottom: 8px;
+// }
+//
+// h3 {
+// border: none;
+// border-bottom: 1px solid gray;
+// font-weight: normal;
+// font-size: inherit;
+// color: inherit;
+// margin: 0;
+// padding-bottom: 0.1em;
+// }
+//
+// h3 .author {
+// font-weight: bold;
+// }
+//
+// h3 form {
+// display: none;
+// }
+//
+// h3 form {
+// float: right;
+// }
+//
+// li:hover h3 {
+// background: #F9F9F9;
+// position: relative;
+//
+// form {
+// display: inline;
+// }
+// }
+//
+// p {
+// margin: 0;
+//
+// a {
+// color: #222;
+// }
+// }
+//}
+//
+///* 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, table.objectstate td.state {
+// font-size: 0.857em;
+// text-align: center;
+//}
+//
+//
+///* State row behaviour */
+//
+//tr.state img.icon {
+// margin-right: 2px;
+//}
+//
+///* Hostgroup badge quickfix */
+//tr.state span a {
+// color: white;
+// font-size: 0.857em;
+// padding: 2px 5px;
+//}
+//
+//tr.state:hover a {
+// color: inherit;
+//}
+//
+//tr.state a.active {
+//}
+//
+//tr.state.new td.state {
+// font-weight: bold;
+//}
+//
+//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.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.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;
+// color: white;
+//}
+//
+//tr.state.warning.handled[href]:hover {
+// background-color: @colorWarningHandled;
+//}
+//
+//tr.state.critical[href]:hover, tr.state.down[href]:hover {
+// background-color: @colorCritical;
+// color: white;
+//}
+//
+//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;
+// color: white;
+//}
+//
+//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;
+// color: white;
+//}
+//
+//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 header */
+//.boxview div.box.header {
+// padding-bottom: 0.5em;
+// margin-bottom: 0.5em;
+// border-bottom: 1px solid #888;
+//}
+//
+//.boxview div.box.header h2 {
+// margin-top: 0.1em;
+// margin-bottom: 0;
+// font-size: 0.8em;
+// border-bottom: none;
+// color: @colorTextDefault;
+//}
+//
+//.boxview div.box.header h2:first-child {
+// margin-top: 0.2em;
+// font-size: inherit;
+// color: @colorTextDefault;
+//}
+//
+//.boxview div.box.header h2 > a {
+// color: inherit;
+//}
+//
+//.boxview div.box.header h2 > a:hover {
+// text-decoration: underline;
+//}
+//
+//.boxview div.box.header h3 {
+// line-height: 1.5em;
+// font-size: 0.9em;
+// color: #555;
+//}
+//
+///* 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;
+// }
+//}
+//
+///* 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: 1.0em;
+// font-weight: normal;
+// text-align: center;
+// white-space: nowrap;
+// border-bottom: 2px solid @gray-light;
+// }
+//
+// 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;
+// }
+//
+// &.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;
+// }
+//}
+//
+//table.action .objectflags {
+// float: right;
+//}
+//
+//table.objectstate {
+// border-collapse: separate;
+// border-spacing: 1px;
+//}
+//
+//table.objectstate td {
+// padding-left: 1em;
+//}
+//
+//table.objectstate tr.state td.state {
+// width: 9em;
+// text-align: center;
+// padding-left: 0;
+// border-radius: 0;
+//}
+//
+//table.avp td.performance-data {
+// padding: 0.3em 0 0.3em 1em;
+//}
+//
+//table.perfdata {
+// min-width: 24em;
+// font-size: 0.9em;
+// width: 100%;
+//}
+//
+//table.perfdata th {
+// padding: 0;
+// text-align: left;
+// padding-right: 0.5em;
+//}
+//
+//table.perfdata td {
+// white-space: nowrap;
+// padding-right: 0.5em;
+//}
generated by cgit v1.2.3 (git 2.39.1) at 2024-07-02 02:46:59 +0000