Merge pull request #4402 from Icinga/respect-yet-unused-css-variables-as-well
Respect yet unused CSS variables as well
This commit is contained in:
commit
03f0c8deb3
|
@ -22,7 +22,7 @@
|
|||
// General styles
|
||||
|
||||
code {
|
||||
color: @icinga-blue;
|
||||
.var(color, icinga-blue);
|
||||
font-family: @font-family-fixed;
|
||||
}
|
||||
|
||||
|
@ -49,7 +49,7 @@ pre > code {
|
|||
.search-highlight {
|
||||
.rounded-corners();
|
||||
|
||||
background: @icinga-blue;
|
||||
.var(background, icinga-blue);
|
||||
.var(color, text-color-on-icinga-blue);
|
||||
padding: 0 0.3em 0 0.3em;
|
||||
}
|
||||
|
@ -70,7 +70,7 @@ pre > code {
|
|||
|
||||
a {
|
||||
&:before {
|
||||
color: @icinga-blue;
|
||||
.var(color, icinga-blue);
|
||||
content: counters(li,".") " ";
|
||||
display: inline-block;
|
||||
font-size: small;
|
||||
|
@ -111,7 +111,8 @@ td {
|
|||
}
|
||||
|
||||
th {
|
||||
border-bottom: 2px solid @icinga-blue;
|
||||
border-bottom: 2px solid;
|
||||
.var(border-bottom-color, icinga-blue);
|
||||
font-weight: @font-weight-bold;
|
||||
text-align: left;
|
||||
text-transform: uppercase;
|
||||
|
|
|
@ -32,7 +32,7 @@
|
|||
font-size: 1.25em;
|
||||
|
||||
&.-active {
|
||||
color: @icinga-blue;
|
||||
.var(color, icinga-blue);
|
||||
}
|
||||
|
||||
&.-inactive {
|
||||
|
@ -187,7 +187,7 @@
|
|||
}
|
||||
|
||||
li {
|
||||
color: @icinga-blue;
|
||||
.var(color, icinga-blue);
|
||||
}
|
||||
|
||||
a,
|
||||
|
@ -264,12 +264,12 @@
|
|||
}
|
||||
|
||||
div.box.ok_hosts.state_up {
|
||||
background-color: @color-ok;
|
||||
.var(background-color, color-ok);
|
||||
border: 1px solid white;
|
||||
}
|
||||
|
||||
div.box.problem_hosts.state_down {
|
||||
background-color: @color-critical;
|
||||
.var(background-color, color-critical);
|
||||
border: 1px solid white;
|
||||
}
|
||||
|
||||
|
@ -294,11 +294,11 @@ div.box.monitoringfeatures {
|
|||
|
||||
div.box.monitoringfeatures div.box-separator {
|
||||
color: white;
|
||||
background-color: @color-ok;
|
||||
.var(background-color, color-ok);
|
||||
}
|
||||
|
||||
div.box.monitoringfeatures div.feature-highlight {
|
||||
background-color: @color-critical;
|
||||
.var(background-color, color-critical);
|
||||
}
|
||||
|
||||
div.box.monitoringfeatures a.feature-highlight {
|
||||
|
@ -358,7 +358,7 @@ div.box.process {
|
|||
}
|
||||
|
||||
div.backend-running {
|
||||
background: @color-ok;
|
||||
.var(background, color-ok);
|
||||
color: white;
|
||||
text-align: center;
|
||||
margin-top: 1em;
|
||||
|
@ -370,7 +370,7 @@ div.backend-running {
|
|||
}
|
||||
|
||||
div.backend-not-running {
|
||||
background: @color-critical;
|
||||
.var(background, color-critical);
|
||||
color: white;
|
||||
text-align: center;
|
||||
padding: 0.1em;
|
||||
|
@ -675,37 +675,37 @@ form.instance-features span.description, form.object-features span.description {
|
|||
padding: 0.66em 0.33em;
|
||||
|
||||
.state-critical {
|
||||
background-color: @color-critical;
|
||||
.var(background-color, color-critical);
|
||||
.var(color, body-bg-color);
|
||||
padding: 0.2em;
|
||||
}
|
||||
|
||||
.state-ok {
|
||||
background-color: @color-ok;
|
||||
.var(background-color, color-ok);
|
||||
.var(color, body-bg-color);
|
||||
padding: 0.2em;
|
||||
}
|
||||
|
||||
.state-unknown {
|
||||
background-color: @color-unknown;
|
||||
.var(background-color, color-unknown);
|
||||
.var(color, body-bg-color);
|
||||
padding: 0.2em;
|
||||
}
|
||||
|
||||
.state-warning {
|
||||
background-color: @color-warning;
|
||||
.var(background-color, color-warning);
|
||||
.var(color, body-bg-color);
|
||||
padding: 0.2em;
|
||||
}
|
||||
|
||||
.state-down {
|
||||
background-color: @color-down;
|
||||
.var(background-color, color-down);
|
||||
.var(color, body-bg-color);
|
||||
padding: 0.2em;
|
||||
}
|
||||
|
||||
.state-up {
|
||||
background-color: @color-up;
|
||||
.var(background-color, color-up);
|
||||
.var(color, body-bg-color);
|
||||
padding: 0.2em;
|
||||
}
|
||||
|
|
|
@ -40,7 +40,7 @@
|
|||
.var(color, text-color-light);
|
||||
}
|
||||
&:focus, &:active {
|
||||
color: @icinga-blue;
|
||||
.var(color, icinga-blue);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -52,7 +52,7 @@
|
|||
|
||||
// Link to unhandled services in the hosts overview
|
||||
.host-services-incidents {
|
||||
color: @color-critical;
|
||||
.var(color, color-critical);
|
||||
font-family: @font-family-wide;
|
||||
font-size: @font-size-small;
|
||||
}
|
||||
|
@ -141,55 +141,61 @@
|
|||
.state-col {
|
||||
&.state-ok,
|
||||
&.state-up {
|
||||
border-left: @border-left-width solid @color-ok;
|
||||
border-left: @border-left-width solid;
|
||||
.var(border-left-color, color-ok);
|
||||
}
|
||||
|
||||
&.state-pending {
|
||||
border-left: @border-left-width solid @color-pending;
|
||||
border-left: @border-left-width solid;
|
||||
.var(border-left-color, color-pending);
|
||||
}
|
||||
|
||||
&.state-critical,
|
||||
&.state-down {
|
||||
background-color: @color-critical;
|
||||
.var(background-color, color-critical);
|
||||
.var(color, text-color-inverted);
|
||||
|
||||
&.handled {
|
||||
background-color: inherit;
|
||||
color: inherit;
|
||||
border-left: @border-left-width solid @color-critical-handled;
|
||||
border-left: @border-left-width solid;
|
||||
.var(border-left-color, color-critical-handled);
|
||||
}
|
||||
}
|
||||
|
||||
&.state-warning {
|
||||
background-color: @color-warning;
|
||||
.var(background-color, color-warning);
|
||||
.var(color, text-color-inverted);
|
||||
|
||||
&.handled {
|
||||
background-color: inherit;
|
||||
color: inherit;
|
||||
border-left: @border-left-width solid @color-warning-handled;
|
||||
border-left: @border-left-width solid;
|
||||
.var(border-left-color, color-warning-handled);
|
||||
}
|
||||
}
|
||||
|
||||
&.state-unknown {
|
||||
background-color: @color-unknown;
|
||||
.var(background-color, color-unknown);
|
||||
.var(color, text-color-inverted);
|
||||
|
||||
&.handled {
|
||||
background-color: inherit;
|
||||
color: inherit;
|
||||
border-left: @border-left-width solid @color-unknown-handled;
|
||||
border-left: @border-left-width solid;
|
||||
.var(border-left-color, color-unknown-handled);
|
||||
}
|
||||
}
|
||||
|
||||
&.state-unreachable {
|
||||
background-color: @color-unreachable;
|
||||
.var(background-color, color-unreachable);
|
||||
.var(color, text-color-inverted);
|
||||
|
||||
&.handled {
|
||||
background-color: inherit;
|
||||
color: inherit;
|
||||
border-left: @border-left-width solid @color-unreachable-handled;
|
||||
border-left: @border-left-width solid;
|
||||
.var(border-left-color, color-unreachable-handled);
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -244,11 +250,11 @@
|
|||
}
|
||||
|
||||
tr[href].active {
|
||||
background-color: @tr-active-color;
|
||||
.var(background-color, tr-active-color);
|
||||
}
|
||||
|
||||
tr[href]:hover {
|
||||
background-color: @tr-hover-color;
|
||||
.var(background-color, tr-hover-color);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
|
|
@ -11,7 +11,7 @@
|
|||
}
|
||||
|
||||
.about-social i:hover {
|
||||
color: @icinga-blue;
|
||||
.var(color, icinga-blue);
|
||||
}
|
||||
|
||||
.about-links {
|
||||
|
@ -27,7 +27,7 @@
|
|||
}
|
||||
|
||||
.about-links i:hover {
|
||||
color: @icinga-blue;
|
||||
.var(color, icinga-blue);
|
||||
}
|
||||
|
||||
.common-table th {
|
||||
|
|
|
@ -9,7 +9,7 @@
|
|||
.var(border-color, low-sat-blue);
|
||||
|
||||
&.active {
|
||||
border-color: @icinga-blue;
|
||||
.var(border-color, icinga-blue);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -40,15 +40,15 @@
|
|||
.var(color, gray-light);
|
||||
|
||||
&.granted {
|
||||
color: @color-granted;
|
||||
.var(color, color-granted);
|
||||
}
|
||||
|
||||
&.refused {
|
||||
color: @color-refused;
|
||||
.var(color, color-refused);
|
||||
}
|
||||
|
||||
&.restricted {
|
||||
color: @color-restricted;
|
||||
.var(color, color-restricted);
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -72,11 +72,11 @@
|
|||
border-left-width: 2px;
|
||||
|
||||
&.granted {
|
||||
border-color: @color-granted;
|
||||
.var(border-color, color-granted);
|
||||
}
|
||||
|
||||
&.refused {
|
||||
border-color: @color-refused;
|
||||
.var(border-color, color-refused);
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -86,11 +86,11 @@
|
|||
border-bottom-width: 2px;
|
||||
|
||||
&.granted {
|
||||
border-color: @color-granted;
|
||||
.var(border-color, color-granted);
|
||||
}
|
||||
|
||||
&.refused {
|
||||
border-color: @color-refused;
|
||||
.var(border-color, color-refused);
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
|
@ -105,11 +105,13 @@
|
|||
.var(border-color, gray-lighter);
|
||||
|
||||
&.granted {
|
||||
border: 2px solid @color-granted;
|
||||
border: 2px solid;
|
||||
.var(border-color, color-granted);
|
||||
}
|
||||
|
||||
&.refused {
|
||||
border: 2px solid @color-refused;
|
||||
border: 2px solid;
|
||||
.var(border-color, color-refused);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -21,6 +21,7 @@
|
|||
@color-warning-handled: #ffcc66;
|
||||
@color-critical: #ff5566;
|
||||
@color-critical-handled: #ff99aa;
|
||||
@color-critical-accentuated: darken(@color-critical, 10%);
|
||||
@color-down: @color-critical;
|
||||
@color-down-handled: @color-critical-handled;
|
||||
@color-unknown: #aa44ff;
|
||||
|
@ -32,16 +33,17 @@
|
|||
// Icinga colors
|
||||
@icinga-blue: #00C3ED;
|
||||
@icinga-secondary: #EF4F98;
|
||||
@icinga-secondary-dark: darken(@icinga-secondary, 10%);
|
||||
@low-sat-blue: #404d72;
|
||||
@low-sat-blue-dark: #434374;
|
||||
@icinga-blue-light: #a5c4cd;
|
||||
@icinga-blue-light: fade(@icinga-blue, 50%);
|
||||
@icinga-blue-dark: #0081a6;
|
||||
|
||||
// Notification colors
|
||||
@color-notification-error: @color-critical;
|
||||
@color-notification-info: @color-pending;
|
||||
@color-notification-success: #fe6;
|
||||
@color-notification-warning: @color-warning-handled;
|
||||
@color-notification-success: @color-ok;
|
||||
@color-notification-warning: @color-warning;
|
||||
|
||||
// Background color for <body>
|
||||
@body-bg-color: #282E39;
|
||||
|
@ -56,8 +58,8 @@
|
|||
// Text color on <a>
|
||||
@link-color: @text-color;
|
||||
|
||||
@tr-active-color: rgba(0,195,237,0.5);
|
||||
@tr-hover-color: rgba(0,195,237,0.2);
|
||||
@tr-active-color: fade(@icinga-blue, 25);
|
||||
@tr-hover-color: fade(@icinga-blue, 5);
|
||||
|
||||
// Menu colors
|
||||
@menu-bg-color: #06062B;
|
||||
|
@ -75,6 +77,11 @@
|
|||
@menu-flyout-color: @text-color;
|
||||
@tab-hover-bg-color: fade(@body-bg-color, 50%);
|
||||
|
||||
// Form colors
|
||||
@form-info-bg-color: fade(@color-ok, 20%);
|
||||
@form-error-bg-color: fade(@color-critical, 30%);
|
||||
@form-warning-bg-color: fade(@color-warning, 40%);
|
||||
|
||||
// Other colors
|
||||
@color-granted: #59cd59;
|
||||
@color-refused: #ee7373;
|
||||
|
|
|
@ -39,7 +39,7 @@ input.search {
|
|||
}
|
||||
|
||||
&:focus:not([readonly]) {
|
||||
border-color: @icinga-blue;
|
||||
.var(border-color, icinga-blue);
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -64,7 +64,7 @@ input.search {
|
|||
margin: .5em 0;
|
||||
|
||||
> a {
|
||||
color: @icinga-blue;
|
||||
.var(color, icinga-blue);
|
||||
padding: .5em;
|
||||
line-height: 1;
|
||||
}
|
||||
|
@ -104,11 +104,12 @@ input.search {
|
|||
line-height: 1;
|
||||
|
||||
&.active {
|
||||
border-bottom: 2px solid @icinga-blue;
|
||||
border-bottom: 2px solid;
|
||||
.var(border-bottom-color, icinga-blue);
|
||||
|
||||
> a,
|
||||
> a:hover {
|
||||
color: @icinga-blue;
|
||||
.var(color, icinga-blue);
|
||||
/* Compensate border-bottom: 2px */
|
||||
margin-bottom: -2px;
|
||||
}
|
||||
|
@ -121,7 +122,7 @@ input.search {
|
|||
}
|
||||
|
||||
&.disabled {
|
||||
color: @disabled-gray;
|
||||
.var(color, disabled-gray);
|
||||
cursor: no-drop;
|
||||
}
|
||||
|
||||
|
|
|
@ -292,11 +292,11 @@ form.icinga-form .form-controls {
|
|||
}
|
||||
|
||||
input[type="submit"].btn-remove {
|
||||
.button(~"var(--body-bg-color, @{body-bg-color})", @color-critical, darken(@color-critical, 10%));
|
||||
.button(~"var(--body-bg-color, @{body-bg-color})", ~"var(--color-critical, @{color-critical})", ~"var(--color-critical-accentuated, @{color-critical-accentuated})");
|
||||
}
|
||||
|
||||
input[type="submit"].btn-cancel {
|
||||
.button(~"var(--body-bg-color, @{body-bg-color})", ~"var(--gray, @{gray})", @black);
|
||||
.button(~"var(--body-bg-color, @{body-bg-color})", ~"var(--gray, @{gray})", ~"var(--black, @{black})");
|
||||
}
|
||||
|
||||
button.noscript-apply {
|
||||
|
@ -373,17 +373,19 @@ form.inline {
|
|||
}
|
||||
|
||||
.icinga-controls input[type="checkbox"]:checked + .toggle-switch .toggle-slider {
|
||||
background-color: @icinga-blue;
|
||||
border: 1px solid @icinga-blue;
|
||||
.var(background-color, icinga-blue);
|
||||
border: 1px solid;
|
||||
.var(border-color, icinga-blue);
|
||||
}
|
||||
|
||||
.icinga-controls input[type="checkbox"]:focus + .toggle-switch .toggle-slider {
|
||||
box-shadow: 0 0 0 2px @body-bg-color, 0 0 0 4px fade(@icinga-blue, 40);
|
||||
box-shadow: 0 0 0 2px var(--body-bg-color, @body-bg-color), 0 0 0 4px fade(@icinga-blue, 40);
|
||||
box-shadow: 0 0 0 2px @body-bg-color, 0 0 0 4px @icinga-blue-light;
|
||||
box-shadow: 0 0 0 2px var(--body-bg-color, @body-bg-color), 0 0 0 4px var(--icinga-blue-light, @icinga-blue-light);
|
||||
}
|
||||
|
||||
.icinga-controls input[type="checkbox"]:checked + .toggle-switch .toggle-slider:before {
|
||||
border: 1px solid @icinga-blue;
|
||||
border: 1px solid;
|
||||
.var(border-color, icinga-blue);
|
||||
left: 100%;
|
||||
margin-left: -4/3em;
|
||||
}
|
||||
|
@ -405,7 +407,7 @@ form.inline {
|
|||
}
|
||||
|
||||
form.icinga-form .control-group.disabled .control-label-group {
|
||||
color: @disabled-gray;
|
||||
.var(color, disabled-gray);
|
||||
}
|
||||
|
||||
.icinga-controls {
|
||||
|
@ -449,15 +451,15 @@ form.icinga-form {
|
|||
|
||||
.form-notifications {
|
||||
&.info {
|
||||
background-color: fade(@color-ok, 20%);
|
||||
.var(background-color, form-info-bg-color);
|
||||
}
|
||||
|
||||
&.error {
|
||||
background-color: fade(@color-critical, 30%);
|
||||
.var(background-color, form-error-bg-color);
|
||||
}
|
||||
|
||||
&.warning {
|
||||
background-color: fade(@color-warning, 40%);
|
||||
.var(background-color, form-warning-bg-color);
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -490,13 +492,13 @@ form.icinga-form .form-info {
|
|||
|
||||
.icinga-controls {
|
||||
input::placeholder {
|
||||
color: @disabled-gray;
|
||||
.var(color, disabled-gray);
|
||||
font-style: italic;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
input:-ms-input-placeholder {
|
||||
color: @disabled-gray;
|
||||
.var(color, disabled-gray);
|
||||
font-style: italic;
|
||||
opacity: 1;
|
||||
}
|
||||
|
@ -522,7 +524,7 @@ form.icinga-form .form-info {
|
|||
display: none;
|
||||
|
||||
&:checked + img {
|
||||
border-color: @icinga-blue;
|
||||
.var(border-color, icinga-blue);
|
||||
border-radius: .25em;
|
||||
}
|
||||
|
||||
|
|
|
@ -11,19 +11,19 @@
|
|||
|
||||
span {
|
||||
&.state-ok {
|
||||
background-color: @color-ok;
|
||||
.var(background-color, color-ok);
|
||||
}
|
||||
|
||||
&.state-warning {
|
||||
background-color: @color-warning;
|
||||
.var(background-color, color-warning);
|
||||
}
|
||||
|
||||
&.state-critical {
|
||||
background-color: @color-critical;
|
||||
.var(background-color, color-critical);
|
||||
}
|
||||
|
||||
&.state-unknown {
|
||||
background-color: @color-unknown;
|
||||
.var(background-color, color-unknown);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -9,7 +9,7 @@
|
|||
}
|
||||
|
||||
#guest-error {
|
||||
background-color: @icinga-blue;
|
||||
.var(background-color, icinga-blue);
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
@ -224,38 +224,38 @@
|
|||
}
|
||||
|
||||
&.error {
|
||||
border-color: @color-down;
|
||||
background: @color-down;
|
||||
.var(color, body-bg-color);
|
||||
.var(border-color, color-notification-error);
|
||||
.var(background, color-notification-error);
|
||||
.var(color, text-color-on-icinga-blue);
|
||||
|
||||
.icon {
|
||||
.var(color, body-bg-color);
|
||||
.var(color, text-color-on-icinga-blue);
|
||||
}
|
||||
}
|
||||
|
||||
&.info {
|
||||
border-color: @color-pending;
|
||||
.var(border-color, color-notification-info);
|
||||
|
||||
.icon {
|
||||
color: @color-pending;
|
||||
.var(color, color-notification-info);
|
||||
}
|
||||
}
|
||||
|
||||
&.success {
|
||||
border-color: @color-ok;
|
||||
.var(border-color, color-notification-success);
|
||||
|
||||
.icon {
|
||||
color: @color-ok;
|
||||
.var(color, color-notification-success);
|
||||
}
|
||||
}
|
||||
|
||||
&.warning {
|
||||
border-color: @color-warning;
|
||||
background: @color-warning;
|
||||
.var(color, body-bg-color);
|
||||
.var(border-color, color-notification-warning);
|
||||
.var(background, color-notification-warning);
|
||||
.var(color, text-color-inverted);
|
||||
|
||||
.icon {
|
||||
.var(color, body-bg-color);
|
||||
.var(color, text-color-inverted);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -56,7 +56,7 @@
|
|||
}
|
||||
|
||||
.errors {
|
||||
background-color: @color-critical;
|
||||
.var(background-color, color-critical);
|
||||
color: white;
|
||||
}
|
||||
|
||||
|
@ -96,7 +96,8 @@
|
|||
}
|
||||
|
||||
input[type="submit"]:focus {
|
||||
outline: 3px solid fade(@icinga-blue, 50%);
|
||||
outline: 3px solid;
|
||||
.var(outline-color, icinga-blue-light);
|
||||
}
|
||||
|
||||
.form-controls {
|
||||
|
@ -105,7 +106,7 @@
|
|||
|
||||
input[type=submit] {
|
||||
border-radius: .25em;
|
||||
background: @icinga-secondary;
|
||||
.var(background, icinga-secondary);
|
||||
color: white;
|
||||
border: none;
|
||||
height: 2.5em;
|
||||
|
@ -113,12 +114,12 @@
|
|||
width: 100%;
|
||||
|
||||
&:hover {
|
||||
background-color: darken(@icinga-secondary, 10)
|
||||
.var(background-color, icinga-secondary-dark);
|
||||
}
|
||||
}
|
||||
|
||||
.config-note {
|
||||
background-color: @color-critical;
|
||||
.var(background-color, color-critical);
|
||||
margin: 0 auto 2em auto; // Center horizontally w/ bottom margin
|
||||
max-width: 50%;
|
||||
min-width: 24em;
|
||||
|
@ -196,11 +197,11 @@
|
|||
|
||||
a {
|
||||
font-weight: @font-weight-bold;
|
||||
color: @icinga-secondary;
|
||||
.var(color, icinga-secondary);
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
color: darken(@icinga-blue, 10);
|
||||
.var(color, icinga-secondary-dark);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -7,7 +7,7 @@
|
|||
@name-value-table-name-width: 38/3em;
|
||||
|
||||
.action-link {
|
||||
color: @icinga-blue;
|
||||
.var(color, icinga-blue);
|
||||
}
|
||||
|
||||
.error-message {
|
||||
|
@ -76,7 +76,7 @@
|
|||
}
|
||||
|
||||
a:hover > .icon-cancel {
|
||||
color: @color-critical;
|
||||
.var(color, color-critical);
|
||||
}
|
||||
|
||||
.icon-stateful {
|
||||
|
@ -178,12 +178,12 @@ a:hover > .icon-cancel {
|
|||
}
|
||||
|
||||
tr[href].active {
|
||||
background-color: @tr-active-color;
|
||||
border-left-color: @icinga-blue;
|
||||
.var(background-color, tr-active-color);
|
||||
.var(border-left-color, icinga-blue);
|
||||
}
|
||||
|
||||
tr[href]:hover {
|
||||
background-color: @tr-hover-color;
|
||||
.var(background-color, tr-hover-color);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
@ -376,7 +376,7 @@ a:hover > .icon-cancel {
|
|||
|
||||
.module-dependencies {
|
||||
.unmet-dependencies {
|
||||
background-color: @color-warning;
|
||||
.var(background-color, color-warning);
|
||||
.var(color, text-color-on-icinga-blue);
|
||||
padding: .25em .5em;
|
||||
margin-left: -.5em;
|
||||
|
@ -394,7 +394,7 @@ a:hover > .icon-cancel {
|
|||
}
|
||||
|
||||
.missing {
|
||||
color: @color-critical;
|
||||
.var(color, color-critical);
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -109,7 +109,7 @@
|
|||
}
|
||||
|
||||
#menu ul:not(.nav-level-2) > .selected > a {
|
||||
background-color: @menu-highlight-color;
|
||||
.var(background-color, menu-highlight-color);
|
||||
.var(color, text-color-inverted);
|
||||
|
||||
|
||||
|
@ -145,7 +145,7 @@
|
|||
}
|
||||
|
||||
&.active {
|
||||
background-color: @menu-highlight-color;
|
||||
.var(background-color, menu-highlight-color);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
@ -167,7 +167,7 @@
|
|||
}
|
||||
|
||||
&.active > a {
|
||||
color: @menu-2ndlvl-highlight-color;
|
||||
.var(color, menu-2ndlvl-highlight-color);
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -279,7 +279,7 @@
|
|||
|
||||
&:not(.active) {
|
||||
&:hover, &:focus {
|
||||
background-color: @tr-active-color;
|
||||
.var(background-color, tr-active-color);
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -476,7 +476,7 @@ input[type=text].search-input {
|
|||
|
||||
&:hover, &:focus {
|
||||
i {
|
||||
color: @menu-highlight-color;
|
||||
.var(color, menu-highlight-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -503,7 +503,7 @@ html.no-js #toggle-sidebar {
|
|||
&.nav-item:not(.badge-nav-item) {
|
||||
&:not(.selected):not(.active):hover,
|
||||
&:not(.selected):not(.active):focus {
|
||||
background-color: @menu-2ndlvl-highlight-bg-color;
|
||||
.var(background-color, menu-2ndlvl-highlight-bg-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -536,7 +536,7 @@ html.no-js #toggle-sidebar {
|
|||
#layout:not(.sidebar-collapsed) #menu .nav-level-1 > .nav-item.active .nav-level-2 > li {
|
||||
&.badge-nav-item:not(.selected) {
|
||||
&:hover {
|
||||
background-color: @menu-2ndlvl-highlight-bg-color;
|
||||
.var(background-color, menu-2ndlvl-highlight-bg-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -6,7 +6,11 @@
|
|||
box-shadow: @arguments;
|
||||
}
|
||||
|
||||
.button(@background-color: ~"var(--body-bg-color, @{body-bg-color})", @border-font-color: @icinga-blue, @color-dark: darken(@icinga-blue, 10%)) {
|
||||
.button(
|
||||
@background-color: ~"var(--body-bg-color, @{body-bg-color})",
|
||||
@border-font-color: ~"var(--icinga-blue, @{icinga-blue})",
|
||||
@color-dark: ~"var(--icinga-blue-dark, @{icinga-blue-dark})"
|
||||
) {
|
||||
.rounded-corners(3px);
|
||||
|
||||
background-color: extract-variable-default(@background-color);
|
||||
|
@ -35,7 +39,9 @@
|
|||
|
||||
&.btn-primary:focus,
|
||||
&.btn-primary:hover {
|
||||
background-color: extract-variable-default(@color-dark);
|
||||
background-color: @color-dark;
|
||||
border-color: extract-variable-default(@color-dark);
|
||||
border-color: @color-dark;
|
||||
color: extract-variable-default(@background-color);
|
||||
color: @background-color;
|
||||
|
@ -144,86 +150,86 @@
|
|||
// Mixin for stateful foreground colors, e.g. text or icons
|
||||
.fg-stateful {
|
||||
&.state-ok {
|
||||
color: @color-ok;
|
||||
.var(color, color-ok);
|
||||
}
|
||||
&.state-up {
|
||||
color: @color-up;
|
||||
.var(color, color-up);
|
||||
}
|
||||
&.state-warning {
|
||||
color: @color-warning;
|
||||
.var(color, color-warning);
|
||||
&.handled {
|
||||
color: @color-warning-handled;
|
||||
.var(color, color-warning-handled);
|
||||
}
|
||||
}
|
||||
&.state-critical {
|
||||
color: @color-critical;
|
||||
.var(color, color-critical);
|
||||
&.handled {
|
||||
color: @color-critical-handled;
|
||||
.var(color, color-critical-handled);
|
||||
}
|
||||
}
|
||||
&.state-down {
|
||||
color: @color-down;
|
||||
.var(color, color-down);
|
||||
&.handled {
|
||||
color: @color-down-handled;
|
||||
.var(color, color-down-handled);
|
||||
}
|
||||
}
|
||||
&.state-unreachable {
|
||||
color: @color-unreachable;
|
||||
.var(color, color-unreachable);
|
||||
&.handled {
|
||||
color: @color-unreachable-handled;
|
||||
.var(color, color-unreachable-handled);
|
||||
}
|
||||
}
|
||||
&.state-unknown {
|
||||
color: @color-unknown;
|
||||
.var(color, color-unknown);
|
||||
&.handled {
|
||||
color: @color-unknown-handled;
|
||||
.var(color, color-unknown-handled);
|
||||
}
|
||||
}
|
||||
&.state-pending {
|
||||
color: @color-pending;
|
||||
.var(color, color-pending);
|
||||
}
|
||||
}
|
||||
|
||||
// Mixin for stateful background colors
|
||||
.bg-stateful {
|
||||
&.state-ok {
|
||||
background-color: @color-ok;
|
||||
.var(background-color, color-ok);
|
||||
}
|
||||
&.state-up {
|
||||
background-color: @color-up;
|
||||
.var(background-color, color-up);
|
||||
}
|
||||
&.state-warning {
|
||||
background-color: @color-warning;
|
||||
.var(background-color, color-warning);
|
||||
&.handled {
|
||||
background-color: @color-warning-handled;
|
||||
.var(background-color, color-warning-handled);
|
||||
}
|
||||
}
|
||||
&.state-critical {
|
||||
background-color: @color-critical;
|
||||
.var(background-color, color-critical);
|
||||
&.handled {
|
||||
background-color: @color-critical-handled;
|
||||
.var(background-color, color-critical-handled);
|
||||
}
|
||||
}
|
||||
&.state-down {
|
||||
background-color: @color-down;
|
||||
.var(background-color, color-down);
|
||||
&.handled {
|
||||
background-color: @color-down-handled;
|
||||
.var(background-color, color-down-handled);
|
||||
}
|
||||
}
|
||||
&.state-unreachable {
|
||||
background-color: @color-unreachable;
|
||||
.var(background-color, color-unreachable);
|
||||
&.handled {
|
||||
background-color: @color-unreachable-handled;
|
||||
.var(background-color, color-unreachable-handled);
|
||||
}
|
||||
}
|
||||
&.state-unknown {
|
||||
background-color: @color-unknown;
|
||||
.var(background-color, color-unknown);
|
||||
&.handled {
|
||||
background-color: @color-unknown-handled;
|
||||
.var(background-color, color-unknown-handled);
|
||||
}
|
||||
}
|
||||
&.state-pending {
|
||||
background-color: @color-pending;
|
||||
.var(background-color, color-pending);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -16,7 +16,7 @@
|
|||
.setup-header {
|
||||
width: 100%;
|
||||
height: 5.5em;
|
||||
background-color: @icinga-blue;
|
||||
.var(background-color, icinga-blue);
|
||||
border-bottom: 1px solid #d9d9d9;
|
||||
text-align: center;
|
||||
|
||||
|
@ -104,7 +104,7 @@
|
|||
}
|
||||
|
||||
&.complete {
|
||||
background-color: @color-ok;
|
||||
.var(background-color, color-ok);
|
||||
}
|
||||
|
||||
&.visited {
|
||||
|
@ -228,7 +228,7 @@ form#setup_requirements {
|
|||
padding: 0.4em;
|
||||
|
||||
&.fulfilled {
|
||||
background-color: @color-ok;
|
||||
.var(background-color, color-ok);
|
||||
}
|
||||
|
||||
&.not-available {
|
||||
|
@ -237,7 +237,7 @@ form#setup_requirements {
|
|||
}
|
||||
|
||||
&.missing {
|
||||
background-color: @color-critical;
|
||||
.var(background-color, color-critical);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -314,11 +314,11 @@ form#setup_requirements {
|
|||
color: white;
|
||||
|
||||
&.success {
|
||||
background-color: @color-ok;
|
||||
.var(background-color, color-ok);
|
||||
}
|
||||
|
||||
&.failure {
|
||||
background-color: @color-critical;
|
||||
.var(background-color, color-critical);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -15,7 +15,7 @@
|
|||
position: relative;
|
||||
|
||||
&:before {
|
||||
color: @icinga-blue;
|
||||
.var(color, icinga-blue);
|
||||
content: "\e811";
|
||||
font-family: 'ifont';
|
||||
|
||||
|
@ -28,7 +28,7 @@
|
|||
}
|
||||
|
||||
a {
|
||||
color: @icinga-blue;
|
||||
.var(color, icinga-blue);
|
||||
}
|
||||
|
||||
.message {
|
||||
|
@ -56,12 +56,12 @@
|
|||
color: #fff;
|
||||
|
||||
&:hover .icon-cancel {
|
||||
color: @icinga-blue;
|
||||
.var(color, icinga-blue);
|
||||
}
|
||||
}
|
||||
|
||||
#application-state-summary > div {
|
||||
background-color: @color-critical;
|
||||
.var(background-color, color-critical);
|
||||
color: #fff;
|
||||
line-height: 1.5em;
|
||||
padding: 0.5em 1em 0.5em 3em;
|
||||
|
@ -99,7 +99,7 @@
|
|||
-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;
|
||||
.var(background-color, tr-hover-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
@ -206,7 +206,7 @@ table.multiselect tr[href] td {
|
|||
.var(color, text-color);
|
||||
|
||||
&:hover, &:focus {
|
||||
color: @icinga-blue;
|
||||
.var(color, icinga-blue);
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -239,15 +239,15 @@ form.role-form {
|
|||
|
||||
.privilege-preview .icon {
|
||||
&.granted {
|
||||
color: @color-granted;
|
||||
.var(color, color-granted);
|
||||
}
|
||||
|
||||
&.refused {
|
||||
color: @color-refused;
|
||||
.var(color, color-refused);
|
||||
}
|
||||
|
||||
&.restricted {
|
||||
color: @color-restricted;
|
||||
.var(color, color-restricted);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -277,11 +277,11 @@ form.role-form {
|
|||
text-align: center;
|
||||
|
||||
&.icon-ok {
|
||||
color: @color-granted;
|
||||
.var(color, color-granted);
|
||||
}
|
||||
|
||||
&.icon-cancel {
|
||||
color: @color-refused;
|
||||
.var(color, color-refused);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -412,7 +412,7 @@ ul.tree li a {
|
|||
}
|
||||
|
||||
ul.tree li a.error {
|
||||
color: @color-critical-handled;
|
||||
.var(color, color-critical-handled);
|
||||
}
|
||||
|
||||
ul.tree li a:hover {
|
||||
|
@ -421,7 +421,7 @@ ul.tree li a:hover {
|
|||
}
|
||||
|
||||
ul.tree li a.error:hover {
|
||||
color: @color-critical;
|
||||
.var(color, color-critical);
|
||||
}
|
||||
|
||||
/* charts should grow as much as possible but never beyond the current viewport's size */
|
||||
|
@ -498,53 +498,53 @@ ul.tree li a.error:hover {
|
|||
}
|
||||
|
||||
.slice-state-ok {
|
||||
stroke: @color-ok;
|
||||
background: @color-ok;
|
||||
.var(stroke, color-ok);
|
||||
.var(background, color-ok);
|
||||
}
|
||||
|
||||
.slice-state-warning-handled {
|
||||
stroke: @color-warning-handled;
|
||||
background: @color-warning-handled;
|
||||
.var(stroke, color-warning-handled);
|
||||
.var(background, color-warning-handled);
|
||||
}
|
||||
|
||||
.slice-state-warning {
|
||||
stroke: @color-warning;
|
||||
background: @color-unreachable-handled;
|
||||
.var(stroke, color-warning);
|
||||
.var(background, color-unreachable-handled);
|
||||
}
|
||||
|
||||
.slice-state-critical-handled {
|
||||
stroke: @color-critical-handled;
|
||||
background: @color-critical-handled;
|
||||
.var(stroke, color-critical-handled);
|
||||
.var(background, color-critical-handled);
|
||||
}
|
||||
|
||||
.slice-state-critical {
|
||||
stroke: @color-critical;
|
||||
background: @color-critical;
|
||||
.var(stroke, color-critical);
|
||||
.var(background, color-critical);
|
||||
}
|
||||
|
||||
.slice-state-unknown-handled {
|
||||
stroke: @color-unknown-handled;
|
||||
background: @color-unknown-handled;
|
||||
.var(stroke, color-unknown-handled);
|
||||
.var(background, color-unknown-handled);
|
||||
}
|
||||
|
||||
.slice-state-unknown {
|
||||
stroke: @color-unknown;
|
||||
background: @color-unknown;
|
||||
.var(stroke, color-unknown);
|
||||
.var(background, color-unknown);
|
||||
}
|
||||
|
||||
.slice-state-unreachable-handled {
|
||||
stroke: @color-unreachable-handled;
|
||||
background: @color-unreachable-handled;
|
||||
.var(stroke, color-unreachable-handled);
|
||||
.var(background, color-unreachable-handled);
|
||||
}
|
||||
|
||||
.slice-state-unreachable {
|
||||
stroke: @color-unreachable;
|
||||
background: @color-unreachable;
|
||||
.var(stroke, color-unreachable);
|
||||
.var(background, color-unreachable);
|
||||
}
|
||||
|
||||
.slice-state-pending {
|
||||
stroke: @color-pending;
|
||||
background: @color-pending;
|
||||
.var(stroke, color-pending);
|
||||
.var(background, color-pending);
|
||||
}
|
||||
|
||||
.slice-state-not-checked {
|
||||
|
@ -585,7 +585,7 @@ ul.tree li a.error:hover {
|
|||
}
|
||||
|
||||
.donut-label-big-eye-catching {
|
||||
color: @color-critical;
|
||||
.var(color, color-critical);
|
||||
}
|
||||
|
||||
.donut-label-small {
|
||||
|
|
Loading…
Reference in New Issue