639 lines
11 KiB
Plaintext
639 lines
11 KiB
Plaintext
/*! Icinga Web 2 | (c) 2014 Icinga Development Team | GPLv2+ */
|
|
|
|
#announcements > ul {
|
|
background-color: @body-bg-color;
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
|
|
> li {
|
|
border-bottom: 1px solid @gray-lighter;
|
|
line-height: 1.5em;
|
|
padding: 0.5em 1em 0.5em 3em;
|
|
|
|
position: relative;
|
|
|
|
&:before {
|
|
color: @icinga-blue;
|
|
content: "\e811";
|
|
font-family: 'ifont';
|
|
|
|
position: absolute;
|
|
left: 1.25em;
|
|
}
|
|
|
|
&:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
a {
|
|
color: @icinga-blue;
|
|
}
|
|
|
|
.message {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
padding-right: 1.5em;
|
|
font-size: 7/6em;
|
|
}
|
|
}
|
|
}
|
|
|
|
.acknowledge-announcement-control,
|
|
.application-state-acknowledge-message-control {
|
|
background: none;
|
|
border: none;
|
|
display: block;
|
|
margin-top: -0.75em;
|
|
|
|
position: absolute;
|
|
right: .75em;
|
|
top: 50%;
|
|
}
|
|
|
|
.application-state-acknowledge-message-control .link-button {
|
|
color: #fff;
|
|
|
|
&:hover .icon-cancel {
|
|
color: @icinga-blue;
|
|
}
|
|
}
|
|
|
|
#application-state-summary > div {
|
|
background-color: @color-critical;
|
|
color: #fff;
|
|
line-height: 1.5em;
|
|
padding: 0.5em 1em 0.5em 3em;
|
|
width: 100%;
|
|
|
|
position: relative;
|
|
|
|
&:before {
|
|
content: "\e84d";
|
|
font-family: 'ifont';
|
|
|
|
position: absolute;
|
|
left: 1.25em;
|
|
}
|
|
}
|
|
|
|
.dashboard-link {
|
|
.clearfix();
|
|
display: block;
|
|
max-width: 100%;
|
|
vertical-align: middle;
|
|
padding: 1em;
|
|
width: 36em;
|
|
|
|
&:hover {
|
|
-webkit-border-radius: 4px;
|
|
-moz-border-radius: 4px;
|
|
border-radius: 4px;
|
|
|
|
-webkit-background-clip: padding-box;
|
|
-moz-background-clip: padding;
|
|
background-clip: padding-box;
|
|
|
|
-webkit-box-shadow: 0 0 0.5em 0 rgba(0, 0, 0, 0.2);
|
|
-moz-box-shadow: 0 0 0.5em 0 rgba(0, 0, 0, 0.2);
|
|
box-shadow: 0 0 0.5em 0 rgba(0, 0, 0, 0.2);
|
|
|
|
background-color: @tr-hover-color;
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
|
|
.dashboard.content > .container {
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.link-meta {
|
|
display: table-cell;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.link-label {
|
|
font-weight: @font-weight-bold;
|
|
}
|
|
|
|
.link-description {
|
|
color: @text-color-light;
|
|
}
|
|
|
|
.link-icon {
|
|
display: table-cell;
|
|
padding-right: .5em;
|
|
vertical-align: middle;
|
|
|
|
> i {
|
|
font-size: 3em;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
> img {
|
|
width: 3em;
|
|
height: 3em;
|
|
margin-right: .6em;
|
|
}
|
|
}
|
|
|
|
table.historycolorgrid {
|
|
font-size: 1.5em;
|
|
}
|
|
|
|
table.historycolorgrid th {
|
|
width: 1em;
|
|
height: 1em;
|
|
margin: 0.5em;
|
|
font-size: 0.55em;
|
|
font-weight: bold;
|
|
}
|
|
|
|
table.historycolorgrid td {
|
|
width: 1em;
|
|
height: 1em;
|
|
margin: 1em;
|
|
}
|
|
|
|
table.historycolorgrid td:hover {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
table.historycolorgrid td.weekday {
|
|
font-size: 0.55em;
|
|
font-weight: bold;
|
|
width: 2.5em;
|
|
opacity: 1.0;
|
|
}
|
|
|
|
table.historycolorgrid a, table.historycolorgrid span {
|
|
.rounded-corners(0.2em);
|
|
margin: 0;
|
|
text-decoration: none;
|
|
display: block;
|
|
width: 1.1em;
|
|
height: 1.1em;
|
|
}
|
|
|
|
table.historycolorgrid a:hover {
|
|
text-decoration: none;
|
|
}
|
|
|
|
table.multiselect tr[href] td {
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
}
|
|
|
|
#main div.filter {
|
|
form.editor {
|
|
max-width: 37em;
|
|
|
|
input[type=text], select {
|
|
width: 12em;
|
|
height: 2em;
|
|
line-height: 1;
|
|
}
|
|
|
|
ul.tree li.active {
|
|
background-color: @gray-lightest;
|
|
}
|
|
|
|
button {
|
|
border: none;
|
|
background: none;
|
|
}
|
|
|
|
.buttons {
|
|
padding: .25em 0;
|
|
text-align: right;
|
|
}
|
|
|
|
.buttons input {
|
|
.button();
|
|
}
|
|
|
|
.buttons input:not(:last-child) {
|
|
margin-right:.5em;
|
|
}
|
|
}
|
|
}
|
|
|
|
form.role-form {
|
|
&.icinga-form .control-label-group {
|
|
width: 20em;
|
|
}
|
|
|
|
.control-label-group em {
|
|
color: @text-color-light;
|
|
font-style: normal;
|
|
}
|
|
|
|
fieldset.collapsible {
|
|
border: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
|
|
h3 em {
|
|
font-size: .857em;
|
|
font-weight: normal;
|
|
color: @text-color-light;
|
|
}
|
|
|
|
h4 {
|
|
margin-top: 1.5em;
|
|
}
|
|
|
|
.collapsible-control {
|
|
border-bottom: 1px solid @gray-light;
|
|
cursor: pointer;
|
|
-webkit-touch-callout: none;
|
|
-webkit-user-select: none;
|
|
-khtml-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
}
|
|
|
|
.collapsible-control:after {
|
|
content: "\f103";
|
|
display: inline-block;
|
|
font-family: 'ifont';
|
|
font-weight: normal;
|
|
padding: 0 .25em;
|
|
margin-right: .25em;
|
|
width: 1em;
|
|
opacity: .6;
|
|
float: right;
|
|
}
|
|
|
|
&.collapsed .collapsible-control:after {
|
|
content: "\e87a";
|
|
}
|
|
}
|
|
}
|
|
|
|
ul.tree select:first-of-type { /* ?? */
|
|
margin-bottom: 0.3em;
|
|
margin-left: 2em;
|
|
}
|
|
|
|
ul.tree {
|
|
padding: 0;
|
|
margin: 0;
|
|
padding-top: .5em;
|
|
}
|
|
|
|
ul.tree ul {
|
|
padding-left: 1em;
|
|
}
|
|
|
|
ul.tree li {
|
|
margin: 0;
|
|
list-style-type: none;
|
|
position: relative;
|
|
padding: 0;
|
|
}
|
|
|
|
ul.tree li .handle {
|
|
background-image: url('../img/tree/tree-minus.gif');
|
|
background-repeat: no-repeat;
|
|
display: inline-block;
|
|
position: absolute;
|
|
width: 1.5em;
|
|
height: 2em;
|
|
left: 0em;
|
|
background-position: center center;
|
|
z-index: 1;
|
|
cursor: pointer;
|
|
}
|
|
|
|
ul.tree li.collapsed > .handle {
|
|
background-image: url('../img/tree/tree-plus.gif');
|
|
}
|
|
|
|
ul.tree li.collapsed > ul {
|
|
display: none;
|
|
}
|
|
|
|
ul.tree li::before, ul.tree li::after {
|
|
content: '';
|
|
position: absolute;
|
|
right: auto;
|
|
left: -0.2em;
|
|
border-color: @gray-light;
|
|
border-style: dotted;
|
|
border-width: 0;
|
|
}
|
|
|
|
/* This is the left vertical line */
|
|
ul.tree li::before {
|
|
border-left-width: 1px;
|
|
top: -.5em;
|
|
width: 1em;
|
|
height: 2.5em;
|
|
bottom: 1em;
|
|
}
|
|
|
|
/* This is the horizontal dash in front of each item */
|
|
ul.tree li::after {
|
|
border-top-width: 1px;
|
|
top: 1em;
|
|
width: 2em;
|
|
height: 1em;
|
|
}
|
|
|
|
/* Stop left vertical line at "mid-height" after last nodes (at each level) */
|
|
ul.tree li:last-child::before {
|
|
height: 1.5em;
|
|
}
|
|
|
|
/* No border for the root element - there must be only ONE root */
|
|
ul.tree > li::before, ul.tree > li::after {
|
|
display: none;
|
|
}
|
|
|
|
/* No connector before (each) root element */
|
|
ul.tree > ul > li::before, ul.tree > ul > li::after {
|
|
border: 0;
|
|
}
|
|
|
|
ul.tree li a {
|
|
display: inline-block;
|
|
line-height: 2em;
|
|
padding: 0 .5em;
|
|
text-decoration: none;
|
|
color: @gray;
|
|
background-repeat: no-repeat;
|
|
background-position: 0.8em 0.4em;
|
|
}
|
|
|
|
ul.tree li a.error {
|
|
color: @color-critical-handled;
|
|
}
|
|
|
|
ul.tree li a:hover {
|
|
color: @text-color;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
ul.tree li a.error:hover {
|
|
color: @color-critical;
|
|
}
|
|
|
|
/* charts should grow as much as possible but never beyond the current viewport's size */
|
|
.svg-container-responsive {
|
|
padding: 1.5em;
|
|
height: 80vh;
|
|
}
|
|
|
|
.tipsy .tipsy-inner {
|
|
// overwrite tooltip max width, we need them to grow bigger
|
|
font-family: @font-family;
|
|
font-size: @font-size-small;
|
|
max-width: 300px;
|
|
text-align: left;
|
|
background-color: rgba(0,0,0,0.8);
|
|
}
|
|
|
|
.progress-label span {
|
|
font-size: 1.5em;
|
|
.animate(blink 1.4s infinite both);
|
|
|
|
&:nth-child(2) {
|
|
animation-delay: .2s;
|
|
}
|
|
|
|
&:nth-child(3) {
|
|
animation-delay: .4s;
|
|
}
|
|
}
|
|
|
|
.flyover:not(.flyover-expanded) .flyover-content {
|
|
display: none;
|
|
}
|
|
|
|
.flyover {
|
|
position: relative;
|
|
|
|
.flyover-content {
|
|
background-color: @body-bg-color;
|
|
border: 1px solid @gray-lighter;
|
|
box-shadow: 0 0 .5em 0 rgba(0, 0, 0, 0.2);
|
|
position: absolute;
|
|
padding: @vertical-padding @horizontal-padding;
|
|
.rounded-corners();
|
|
}
|
|
|
|
&.flyover-arrow-top .flyover-content:before {
|
|
background: @body-bg-color;
|
|
border-left: 1px solid @gray-lighter;
|
|
border-top: 1px solid @gray-lighter;
|
|
content: "";
|
|
height: 1em;
|
|
-ms-transform: rotate(45deg);
|
|
transform: rotate(45deg);
|
|
width: 1em;
|
|
|
|
position: absolute;
|
|
left: 6px;
|
|
top: -7px;
|
|
}
|
|
|
|
&.flyover-right .flyover-content {
|
|
left: auto;
|
|
right: 0;
|
|
}
|
|
|
|
&.flyover-arrow-top.flyover-right .flyover-content:before {
|
|
left: auto;
|
|
right: 6px;
|
|
}
|
|
}
|
|
|
|
.slice-state-ok {
|
|
stroke: @color-ok;
|
|
background: @color-ok;
|
|
}
|
|
|
|
.slice-state-warning-handled {
|
|
stroke: @color-warning-handled;
|
|
background: @color-warning-handled;
|
|
}
|
|
|
|
.slice-state-warning {
|
|
stroke: @color-warning;
|
|
background: @color-unreachable-handled;
|
|
}
|
|
|
|
.slice-state-critical-handled {
|
|
stroke: @color-critical-handled;
|
|
background: @color-critical-handled;
|
|
}
|
|
|
|
.slice-state-critical {
|
|
stroke: @color-critical;
|
|
background: @color-critical;
|
|
}
|
|
|
|
.slice-state-unknown-handled {
|
|
stroke: @color-unknown-handled;
|
|
background: @color-unknown-handled;
|
|
}
|
|
|
|
.slice-state-unknown {
|
|
stroke: @color-unknown;
|
|
background: @color-unknown;
|
|
}
|
|
|
|
.slice-state-unreachable-handled {
|
|
stroke: @color-unreachable-handled;
|
|
background: @color-unreachable-handled;
|
|
}
|
|
|
|
.slice-state-unreachable {
|
|
stroke: @color-unreachable;
|
|
background: @color-unreachable;
|
|
}
|
|
|
|
.slice-state-pending {
|
|
stroke: @color-pending;
|
|
background: @color-pending;
|
|
}
|
|
|
|
.slice-state-not-checked {
|
|
stroke: @gray-light;
|
|
background: @gray-light;
|
|
}
|
|
|
|
.donut {
|
|
width: 22em;
|
|
height: 22em;
|
|
min-width: 11.5em;
|
|
display: table;
|
|
}
|
|
|
|
.donut-graph {
|
|
width: 22em;
|
|
height: 22em;
|
|
}
|
|
|
|
.donut-label {
|
|
font-weight: bold;
|
|
fill: @text-color;
|
|
}
|
|
|
|
.donut-label {
|
|
margin-top: -12.5em;
|
|
text-align: center;
|
|
}
|
|
|
|
.donut-label-big {
|
|
color: @gray-light;
|
|
font-size: 6em;
|
|
line-height: 0;
|
|
text-anchor: middle;
|
|
&:hover {
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
|
|
.donut-label-big-eye-catching {
|
|
color: @color-critical;
|
|
}
|
|
|
|
.donut-label-small {
|
|
fill: @text-color;
|
|
font-size: 1.2em;
|
|
text-anchor: middle;
|
|
-moz-transform: translateY(0.35em);
|
|
-ms-transform: translateY(0.35em);
|
|
-webkit-transform: translateY(0.35em);
|
|
transform: translateY(0.35em);
|
|
}
|
|
|
|
.donut-container {
|
|
width: 36em;
|
|
float: left;
|
|
}
|
|
|
|
.dashboard .donut-container {
|
|
width: 50%;
|
|
font-size: 80%;
|
|
|
|
.donut-legend {
|
|
margin-left: auto;
|
|
}
|
|
}
|
|
|
|
.donut-legend {
|
|
width: 50%;
|
|
padding: 0;
|
|
margin-left: 18em;
|
|
list-style-type: none;
|
|
|
|
li {
|
|
vertical-align: middle;
|
|
|
|
&:not(:last-child) {
|
|
margin-bottom: .5em;
|
|
}
|
|
|
|
.badge {
|
|
font-weight: bold;
|
|
margin-right: .5em;
|
|
vertical-align: initial;
|
|
}
|
|
}
|
|
}
|
|
|
|
input[type="checkbox"].expandable-toggle {
|
|
display: none;
|
|
|
|
& + label {
|
|
float: right;
|
|
margin-right: 1em;
|
|
|
|
cursor: pointer;
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
}
|
|
|
|
& ~ .expandable-content {
|
|
clear: right; // Because the label is floating right
|
|
}
|
|
|
|
&:checked ~ .expandable-content {
|
|
-webkit-transition: opacity 0.2s linear;
|
|
-moz-transition: opacity 0.2s linear;
|
|
-o-transition: opacity 0.2s linear;
|
|
transition: opacity 0.2s linear;
|
|
}
|
|
|
|
&:not(:checked) ~ .expandable-content {
|
|
height: 0;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
|
|
-webkit-transition: opacity 0.2s linear, visibility 0.2s;
|
|
-moz-transition: opacity 0.2s linear, visibility 0.2s;
|
|
-o-transition: opacity 0.2s linear, visibility 0.2s;
|
|
transition: opacity 0.2s linear, visibility 0.2s;
|
|
}
|
|
|
|
&:checked ~ label .expandable-expand-label {
|
|
display: none;
|
|
}
|
|
|
|
&:not(:checked) ~ label .expandable-collapse-label {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
html.no-js .progress-label {
|
|
display: none;
|
|
}
|