2016-02-08 15:41:00 +01:00
|
|
|
/*! Icinga Web 2 | (c) 2016 Icinga Development Team | GPLv2+ */
|
|
|
|
|
|
2016-01-18 13:32:48 +01:00
|
|
|
@icinga-blue: #006D8C;
|
|
|
|
|
|
2021-04-28 16:42:21 +02:00
|
|
|
// Gray colors
|
|
|
|
|
@gray: #7F7F7F;
|
|
|
|
|
@gray-semilight: #A9A9A9;
|
|
|
|
|
@gray-light: #C9C9C9;
|
|
|
|
|
@gray-lighter: #EEEEEE;
|
|
|
|
|
@gray-lightest: #F7F7F7;
|
|
|
|
|
@disabled-gray: #9a9a9a;
|
|
|
|
|
|
|
|
|
|
// State colors
|
2016-01-18 13:32:48 +01:00
|
|
|
@color-ok: #006400;
|
|
|
|
|
@color-critical: #EE0000;
|
|
|
|
|
@color-critical-handled: #EE0000;
|
|
|
|
|
@color-warning: #8B5A00;
|
|
|
|
|
@color-warning-handled: #8B5A00;
|
|
|
|
|
@color-unknown: #800080;
|
|
|
|
|
@color-unknown-handled: #800080;
|
|
|
|
|
@color-unreachable: #800080;
|
|
|
|
|
@color-unreachable-handled: #800080;
|
|
|
|
|
@color-pending: #0000EE;
|
|
|
|
|
|
2021-04-28 16:44:08 +02:00
|
|
|
// Icinga colors
|
|
|
|
|
@low-sat-blue: #dae3e6;
|
2022-02-23 12:05:25 +01:00
|
|
|
@low-sat-blue-dark: #c0cccd;
|
2021-04-28 16:44:08 +02:00
|
|
|
|
|
|
|
|
// Background color for <body>
|
|
|
|
|
@body-bg-color: @white;
|
|
|
|
|
|
2016-01-18 13:32:48 +01:00
|
|
|
@text-color: #191919;
|
|
|
|
|
@text-color-light: #555555;
|
|
|
|
|
|
2017-11-27 15:51:08 +01:00
|
|
|
@menu-highlight-color: white;
|
|
|
|
|
@menu-2ndlvl-color: white;
|
|
|
|
|
@menu-2ndlvl-highlight-color: white;
|
2021-07-01 17:47:59 +02:00
|
|
|
@menu-2ndlvl-active-hover-color: @text-color;
|
2017-11-27 15:51:08 +01:00
|
|
|
|
|
|
|
|
#menu ul.nav-level-1 > .nav-item > a {
|
|
|
|
|
&:focus, &:hover {
|
|
|
|
|
text-decoration: underline;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2021-04-28 16:43:53 +02:00
|
|
|
#menu ul.nav-level-1 > .nav-item.active > a,
|
|
|
|
|
#menu .nav-level-1 > .nav-item.active:not(.selected) > a:hover {
|
|
|
|
|
color: @text-color;
|
|
|
|
|
background-color: @white;
|
|
|
|
|
}
|
|
|
|
|
|
2017-11-27 15:51:08 +01:00
|
|
|
#menu .nav-level-2 > .nav-item.active {
|
2021-04-28 16:43:53 +02:00
|
|
|
background-color: @white;
|
|
|
|
|
|
|
|
|
|
a {
|
|
|
|
|
color: @text-color;
|
|
|
|
|
}
|
2017-11-27 15:51:08 +01:00
|
|
|
|
|
|
|
|
> a:focus, > a:hover {
|
|
|
|
|
opacity: 1;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#menu .nav-level-2 > .nav-item > a {
|
|
|
|
|
&:hover, &:focus {
|
|
|
|
|
text-decoration: underline;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2019-08-12 11:01:14 +02:00
|
|
|
#menu ul:not(.nav-level-2) > .selected > a {
|
|
|
|
|
color: @text-color;
|
|
|
|
|
}
|
|
|
|
|
|
2017-11-27 15:51:08 +01:00
|
|
|
#menu .active > a {
|
|
|
|
|
text-decoration: underline;
|
|
|
|
|
}
|
|
|
|
|
|
2021-04-28 16:43:24 +02:00
|
|
|
.badge:not(.handled),
|
|
|
|
|
.state-badge:not(.handled) {
|
|
|
|
|
&.state-warning {
|
|
|
|
|
border: 1px solid @color-warning;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&.state-critical,
|
|
|
|
|
&.state-down {
|
|
|
|
|
border: 1px solid @color-critical;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&.state-unreachable {
|
|
|
|
|
border: 1px solid @color-unreachable;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&.state-unknown {
|
|
|
|
|
border: 1px solid @color-unknown;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&.state-ok,
|
|
|
|
|
&.state-up {
|
|
|
|
|
border: 1px solid @color-ok;
|
|
|
|
|
}
|
2016-01-18 13:32:48 +01:00
|
|
|
}
|
|
|
|
|
|
2021-04-28 16:43:24 +02:00
|
|
|
.badge.handled,
|
|
|
|
|
.badge.state-ok,
|
|
|
|
|
.state-badge.handled,
|
|
|
|
|
.state-badge.state-ok {
|
2016-01-18 13:32:48 +01:00
|
|
|
background-color: @body-bg-color !important;
|
2021-04-28 16:43:24 +02:00
|
|
|
color: @text-color !important;
|
2016-01-18 13:32:48 +01:00
|
|
|
|
|
|
|
|
&.state-warning {
|
|
|
|
|
border: 1px solid @color-warning-handled;
|
|
|
|
|
}
|
|
|
|
|
|
2021-04-28 16:43:24 +02:00
|
|
|
&.state-critical,
|
2016-01-18 13:32:48 +01:00
|
|
|
&.state-down {
|
|
|
|
|
border: 1px solid @color-critical-handled;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&.state-unreachable {
|
|
|
|
|
border: 1px solid @color-unreachable-handled;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&.state-unknown {
|
|
|
|
|
border: 1px solid @color-unknown-handled;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2016-04-12 13:53:51 +02:00
|
|
|
.boxview a:focus {
|
|
|
|
|
color: @text-color;
|
|
|
|
|
text-decoration: underline;
|
|
|
|
|
}
|
2016-06-01 14:40:55 +02:00
|
|
|
|
|
|
|
|
.icinga-module.module-monitoring {
|
|
|
|
|
@timeline-notification-color: #1650CF;
|
|
|
|
|
@timeline-hard-state-color: #A24600;
|
|
|
|
|
@timeline-comment-color: #346964;
|
|
|
|
|
@timeline-ack-color: #855D18;
|
|
|
|
|
@timeline-downtime-start-color: #515151;
|
|
|
|
|
@timeline-downtime-end-color: #5e5e2f;
|
|
|
|
|
|
|
|
|
|
// Unfortunately it does not suffice to only override the timeline colors here, because our less compiler seems to
|
|
|
|
|
// have the related style block in module.less already evaluated
|
|
|
|
|
|
|
|
|
|
.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%);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
2019-08-12 13:34:06 +02:00
|
|
|
|
2022-02-23 11:10:39 +01:00
|
|
|
.icinga-controls {
|
2020-05-15 09:01:10 +02:00
|
|
|
input:not([type="checkbox"]):not([type="radio"]),
|
2019-08-12 13:34:06 +02:00
|
|
|
.toggle-switch .toggle-slider:before,
|
2020-05-15 09:01:10 +02:00
|
|
|
.toggle-switch > .toggle-slider,
|
|
|
|
|
select,
|
|
|
|
|
textarea {
|
2019-08-12 13:34:06 +02:00
|
|
|
border: 1px solid @icinga-blue;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
input[type="checkbox"]:not(:checked) + .toggle-switch .toggle-slider:before {
|
|
|
|
|
height: 1.166666667em;
|
|
|
|
|
width: 1.166666667em;
|
|
|
|
|
margin: 1px;
|
|
|
|
|
}
|
|
|
|
|
}
|
2021-04-28 16:44:37 +02:00
|
|
|
|
2022-02-23 11:10:39 +01:00
|
|
|
.search-suggestions {
|
|
|
|
|
input:not([type="checkbox"]):not([type="radio"]),
|
|
|
|
|
.toggle-switch .toggle-slider:before,
|
|
|
|
|
.toggle-switch > .toggle-slider,
|
|
|
|
|
select,
|
|
|
|
|
textarea {
|
|
|
|
|
border: none;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2021-04-29 11:44:39 +02:00
|
|
|
.icinga-module.module-icingadb .list-item.overdue {
|
|
|
|
|
background: none;
|
|
|
|
|
|
|
|
|
|
header > *:not(time),
|
|
|
|
|
.caption {
|
|
|
|
|
opacity: 1;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2021-04-28 16:44:37 +02:00
|
|
|
.controls input.search,
|
|
|
|
|
input.search {
|
|
|
|
|
background-image: url(../img/icons/search.png);
|
|
|
|
|
}
|
|
|
|
|
|
2021-04-28 17:56:21 +02:00
|
|
|
.search-bar,
|
2022-02-17 16:48:51 +01:00
|
|
|
.button-link,
|
|
|
|
|
.view-mode-switcher > label {
|
2021-04-28 17:56:21 +02:00
|
|
|
border: 1px solid @icinga-blue;
|
2021-04-28 16:45:25 +02:00
|
|
|
}
|
|
|
|
|
|
2022-02-17 16:48:51 +01:00
|
|
|
// compensate for 1px border
|
|
|
|
|
.filter-input-area {
|
|
|
|
|
padding: 1/12em !important;
|
|
|
|
|
}
|
|
|
|
|
|
2021-04-28 17:56:21 +02:00
|
|
|
.view-mode-switcher > label {
|
2022-02-17 16:48:51 +01:00
|
|
|
padding: (10/16)*.25em (10/16)*.5em !important;
|
2021-04-28 17:56:21 +02:00
|
|
|
|
|
|
|
|
&:not(:first-of-type) {
|
|
|
|
|
border-left: none;
|
|
|
|
|
}
|
|
|
|
|
}
|
