385 lines
7.6 KiB
Plaintext
385 lines
7.6 KiB
Plaintext
/*! Icinga Web 2 | (c) 2017 Icinga Development Team | GPLv2+ */
|
|
|
|
/* solarized colors: http://simianuprising.com/wp-content/uploads/2012/08/solarized-reference-horizontal.png */
|
|
|
|
// Solarized base colors
|
|
@base01: #586e75;
|
|
@base00: #657b83;
|
|
@base02: #073645;
|
|
@base03: #002b36;
|
|
@base0: #839496;
|
|
@base1: #93a1a1;
|
|
@base2: #eee8d5;
|
|
|
|
// Gray colors
|
|
@gray: @base1;
|
|
@gray-light: @base01;
|
|
@gray-lighter: #00222b;
|
|
@gray-lightest: @base02;
|
|
|
|
// Icinga colors
|
|
@icinga-blue: @base1;
|
|
|
|
@color-ok: #859900;
|
|
@color-critical: #dc322f;
|
|
@color-critical-handled: #a82523;
|
|
@color-warning: #cf9b00;
|
|
@color-warning-handled: #b58900;
|
|
@color-unknown: #6c71c4;
|
|
@color-unknown-handled: #444f83;
|
|
@color-unreachable: #2aa198;
|
|
@color-unreachable-handled: #1d736c;
|
|
@color-pending: #268bd2;
|
|
// Notification colors
|
|
|
|
// Background color for <body>
|
|
@body-bg-color: @base03;
|
|
|
|
// Text colors
|
|
@text-color: @base2;
|
|
@text-color-light: @base1;
|
|
@text-color-on-icinga-blue: @base2;
|
|
@text-color-inverted: @base02;
|
|
|
|
// Text color on <a>
|
|
@link-color: @base0;
|
|
@tr-active-color: @base01;
|
|
@tr-hover-color: @base02;
|
|
|
|
// Menu colors
|
|
@menu-bg-color: @base02;
|
|
@menu-active-bg-color: @base03;
|
|
@menu-highlight-color: @icinga-blue;
|
|
@menu-2ndlvl-color: #c4c4c4;
|
|
@menu-flyout-color: @text-color;
|
|
|
|
// Form colors
|
|
@button-primary-color: lighten(@base02, 20);
|
|
|
|
#header {
|
|
background-color: @base02;
|
|
}
|
|
|
|
.tabs > li > a {
|
|
color: @base00;
|
|
}
|
|
|
|
.action-link {
|
|
color: @link-color;
|
|
}
|
|
|
|
input, select {
|
|
background-color: @body-bg-color;
|
|
}
|
|
|
|
#login {
|
|
background: @base02;
|
|
|
|
.control-label {
|
|
color: @base0;
|
|
}
|
|
|
|
input[type=submit] {
|
|
color: @base0;
|
|
background-color: @base02;
|
|
}
|
|
}
|
|
|
|
#login-footer {
|
|
color: @base01;
|
|
}
|
|
|
|
textarea {
|
|
background-color: @base01;
|
|
}
|
|
|
|
.control-button, input[type="submit"] {
|
|
color: @base0;
|
|
}
|
|
|
|
.badge.handled {
|
|
background-color: @body-bg-color !important;
|
|
color: @text-color;
|
|
|
|
&.state-warning {
|
|
border: 1px solid @color-warning-handled;
|
|
margin-top: -1px;
|
|
}
|
|
|
|
&.state-critical {
|
|
border: 1px solid @color-critical-handled;
|
|
margin-top: -1px;
|
|
}
|
|
|
|
&.state-down {
|
|
border: 1px solid @color-critical-handled;
|
|
margin-top: -1px;
|
|
}
|
|
|
|
&.state-unreachable {
|
|
border: 1px solid @color-unreachable-handled;
|
|
margin-top: -1px;
|
|
}
|
|
|
|
&.state-unknown {
|
|
border: 1px solid @color-unknown-handled;
|
|
margin-top: -1px;
|
|
}
|
|
}
|
|
|
|
#menu {
|
|
background-color: @base02;
|
|
|
|
input.search {
|
|
color: @text-color;
|
|
background-image: url(../img/icons/search_white.png);
|
|
|
|
&:focus {
|
|
background-image: url(../img/icons/search_white.png) !important;
|
|
}
|
|
}
|
|
|
|
.nav-level-1 > .nav-item {
|
|
color: @text-color;
|
|
|
|
&.active, &:hover {
|
|
color: @text-color;
|
|
background-color: darken(@base03, 5);
|
|
}
|
|
|
|
&.active:not(.selected) {
|
|
background-color: darken(@base03, 3);
|
|
|
|
& > a:focus,
|
|
& > a:hover {
|
|
background-color: darken(@base03, 5);
|
|
}
|
|
}
|
|
}
|
|
|
|
.nav-level-2 > .nav-item {
|
|
color: @text-color;
|
|
background-color: darken(@base03, 3);
|
|
|
|
&.active, &:hover {
|
|
a {
|
|
color: @text-color;
|
|
}
|
|
background-color: @base00;
|
|
}
|
|
|
|
&.active.selected {
|
|
background-color: @button-primary-color;
|
|
}
|
|
|
|
&:not(.selected):not(.active) > a:hover,
|
|
&:not(.selected):not(.active) > a:focus {
|
|
color: @text-color;
|
|
}
|
|
}
|
|
|
|
ul:not(.nav-level-2) > .selected > a {
|
|
background-color: darken(@base03, 3);
|
|
color: @text-color;
|
|
|
|
&:after {
|
|
background-color: darken(@base03, 3);
|
|
box-shadow: 0 0 1em 0 rgba(0,0,0,0.6);
|
|
}
|
|
}
|
|
|
|
.nav-level-2 > .nav-item:not(.selected):not(.active) {
|
|
& > a:hover,
|
|
& > a:focus {
|
|
background-color: darken(@base03, 5);
|
|
}
|
|
}
|
|
|
|
.nav-itemxx{
|
|
&:hover,
|
|
&:hover > a,
|
|
&.active,
|
|
&.active > a {
|
|
color: @text-color !important;
|
|
//background-color: @base01 !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.boxview a:focus {
|
|
color: @text-color;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
table.avp tbody th {
|
|
background-color: transparent;
|
|
}
|
|
|
|
.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%);
|
|
}
|
|
}
|
|
}
|
|
|
|
.icinga-module.module-monitoring {
|
|
.tactical {
|
|
.box {
|
|
border-color: @body-bg-color !important;
|
|
}
|
|
|
|
div.box.contents {
|
|
background: @body-bg-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
.icinga-module.module-director {
|
|
form {
|
|
input[type=text], input[type=password], textarea, select, .director-suggestions li {
|
|
background-color: @body-bg-color;
|
|
border-bottom: 1px solid @gray-light;
|
|
}
|
|
|
|
.director-suggestions li:hover {
|
|
background-color: @icinga-blue;
|
|
}
|
|
|
|
ul.extensible-set input[type=text] {
|
|
background-color: @icinga-blue;
|
|
color: @base2;
|
|
}
|
|
|
|
p.description {
|
|
background-color: @base02;
|
|
}
|
|
|
|
option {
|
|
background-color: @body-bg-color;
|
|
}
|
|
}
|
|
|
|
dd.active ul.extensible-set input[type=text], ul.extensible-set.sortable input[type=text] {
|
|
background: @body-bg-color;
|
|
border: 1px solid @gray-light;
|
|
}
|
|
|
|
ul.main-actions li a {
|
|
color: @icinga-blue;
|
|
}
|
|
}
|
|
|
|
/* Form styles */
|
|
|
|
@input-background: lighten(@base02, 5);
|
|
|
|
.icinga-controls {
|
|
input[type="text"],
|
|
input[type="password"],
|
|
input[type="number"],
|
|
input[type="datetime-local"],
|
|
input[type="date"],
|
|
input[type="time"],
|
|
textarea,
|
|
select {
|
|
background-color: @input-background;
|
|
}
|
|
|
|
& .toggle-switch .toggle-slider {
|
|
background: @input-background;
|
|
border: 2px solid @input-background;
|
|
}
|
|
|
|
& .toggle-switch .toggle-slider:before {
|
|
background: @body-bg-color;
|
|
border: 1px solid @body-bg-color;
|
|
}
|
|
|
|
& input[type="checkbox"]:checked + .toggle-switch .toggle-slider {
|
|
background-color: @button-primary-color;
|
|
border: 1px solid @button-primary-color;
|
|
}
|
|
|
|
& input[type="checkbox"]:focus + .toggle-switch .toggle-slider {
|
|
box-shadow: 0 0 0 2px @body-bg-color, 0 0 0 4px fade(@button-primary-color, 40);
|
|
}
|
|
|
|
& input[type="checkbox"]:checked + .toggle-switch .toggle-slider:before {
|
|
border: 1px solid @button-primary-color;
|
|
}
|
|
}
|
|
|
|
.button {
|
|
background-color: @input-background;
|
|
border: 2px solid @input-background;
|
|
color: @text-color;
|
|
|
|
&:focus,
|
|
&:hover,
|
|
&.btn-primary {
|
|
background-color: lighten(@base02, 15);
|
|
border-color: lighten(@base02, 15);
|
|
color: @text-color;
|
|
}
|
|
|
|
&.btn-primary:focus,
|
|
&.btn-primary:hover {
|
|
background-color: @button-primary-color;
|
|
border-color: @button-primary-color;
|
|
color: @text-color;
|
|
}
|
|
}
|