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:
Johannes Meyer 2021-06-29 12:54:50 +02:00 committed by GitHub
commit 03f0c8deb3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
17 changed files with 199 additions and 173 deletions

View File

@ -22,7 +22,7 @@
// General styles // General styles
code { code {
color: @icinga-blue; .var(color, icinga-blue);
font-family: @font-family-fixed; font-family: @font-family-fixed;
} }
@ -49,7 +49,7 @@ pre > code {
.search-highlight { .search-highlight {
.rounded-corners(); .rounded-corners();
background: @icinga-blue; .var(background, icinga-blue);
.var(color, text-color-on-icinga-blue); .var(color, text-color-on-icinga-blue);
padding: 0 0.3em 0 0.3em; padding: 0 0.3em 0 0.3em;
} }
@ -70,7 +70,7 @@ pre > code {
a { a {
&:before { &:before {
color: @icinga-blue; .var(color, icinga-blue);
content: counters(li,".") " "; content: counters(li,".") " ";
display: inline-block; display: inline-block;
font-size: small; font-size: small;
@ -111,7 +111,8 @@ td {
} }
th { th {
border-bottom: 2px solid @icinga-blue; border-bottom: 2px solid;
.var(border-bottom-color, icinga-blue);
font-weight: @font-weight-bold; font-weight: @font-weight-bold;
text-align: left; text-align: left;
text-transform: uppercase; text-transform: uppercase;

View File

@ -32,7 +32,7 @@
font-size: 1.25em; font-size: 1.25em;
&.-active { &.-active {
color: @icinga-blue; .var(color, icinga-blue);
} }
&.-inactive { &.-inactive {
@ -187,7 +187,7 @@
} }
li { li {
color: @icinga-blue; .var(color, icinga-blue);
} }
a, a,
@ -264,12 +264,12 @@
} }
div.box.ok_hosts.state_up { div.box.ok_hosts.state_up {
background-color: @color-ok; .var(background-color, color-ok);
border: 1px solid white; border: 1px solid white;
} }
div.box.problem_hosts.state_down { div.box.problem_hosts.state_down {
background-color: @color-critical; .var(background-color, color-critical);
border: 1px solid white; border: 1px solid white;
} }
@ -294,11 +294,11 @@ div.box.monitoringfeatures {
div.box.monitoringfeatures div.box-separator { div.box.monitoringfeatures div.box-separator {
color: white; color: white;
background-color: @color-ok; .var(background-color, color-ok);
} }
div.box.monitoringfeatures div.feature-highlight { div.box.monitoringfeatures div.feature-highlight {
background-color: @color-critical; .var(background-color, color-critical);
} }
div.box.monitoringfeatures a.feature-highlight { div.box.monitoringfeatures a.feature-highlight {
@ -358,7 +358,7 @@ div.box.process {
} }
div.backend-running { div.backend-running {
background: @color-ok; .var(background, color-ok);
color: white; color: white;
text-align: center; text-align: center;
margin-top: 1em; margin-top: 1em;
@ -370,7 +370,7 @@ div.backend-running {
} }
div.backend-not-running { div.backend-not-running {
background: @color-critical; .var(background, color-critical);
color: white; color: white;
text-align: center; text-align: center;
padding: 0.1em; padding: 0.1em;
@ -675,37 +675,37 @@ form.instance-features span.description, form.object-features span.description {
padding: 0.66em 0.33em; padding: 0.66em 0.33em;
.state-critical { .state-critical {
background-color: @color-critical; .var(background-color, color-critical);
.var(color, body-bg-color); .var(color, body-bg-color);
padding: 0.2em; padding: 0.2em;
} }
.state-ok { .state-ok {
background-color: @color-ok; .var(background-color, color-ok);
.var(color, body-bg-color); .var(color, body-bg-color);
padding: 0.2em; padding: 0.2em;
} }
.state-unknown { .state-unknown {
background-color: @color-unknown; .var(background-color, color-unknown);
.var(color, body-bg-color); .var(color, body-bg-color);
padding: 0.2em; padding: 0.2em;
} }
.state-warning { .state-warning {
background-color: @color-warning; .var(background-color, color-warning);
.var(color, body-bg-color); .var(color, body-bg-color);
padding: 0.2em; padding: 0.2em;
} }
.state-down { .state-down {
background-color: @color-down; .var(background-color, color-down);
.var(color, body-bg-color); .var(color, body-bg-color);
padding: 0.2em; padding: 0.2em;
} }
.state-up { .state-up {
background-color: @color-up; .var(background-color, color-up);
.var(color, body-bg-color); .var(color, body-bg-color);
padding: 0.2em; padding: 0.2em;
} }

View File

@ -40,7 +40,7 @@
.var(color, text-color-light); .var(color, text-color-light);
} }
&:focus, &:active { &:focus, &:active {
color: @icinga-blue; .var(color, icinga-blue);
} }
} }

View File

@ -52,7 +52,7 @@
// Link to unhandled services in the hosts overview // Link to unhandled services in the hosts overview
.host-services-incidents { .host-services-incidents {
color: @color-critical; .var(color, color-critical);
font-family: @font-family-wide; font-family: @font-family-wide;
font-size: @font-size-small; font-size: @font-size-small;
} }
@ -141,55 +141,61 @@
.state-col { .state-col {
&.state-ok, &.state-ok,
&.state-up { &.state-up {
border-left: @border-left-width solid @color-ok; border-left: @border-left-width solid;
.var(border-left-color, color-ok);
} }
&.state-pending { &.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-critical,
&.state-down { &.state-down {
background-color: @color-critical; .var(background-color, color-critical);
.var(color, text-color-inverted); .var(color, text-color-inverted);
&.handled { &.handled {
background-color: inherit; background-color: inherit;
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 { &.state-warning {
background-color: @color-warning; .var(background-color, color-warning);
.var(color, text-color-inverted); .var(color, text-color-inverted);
&.handled { &.handled {
background-color: inherit; background-color: inherit;
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 { &.state-unknown {
background-color: @color-unknown; .var(background-color, color-unknown);
.var(color, text-color-inverted); .var(color, text-color-inverted);
&.handled { &.handled {
background-color: inherit; background-color: inherit;
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 { &.state-unreachable {
background-color: @color-unreachable; .var(background-color, color-unreachable);
.var(color, text-color-inverted); .var(color, text-color-inverted);
&.handled { &.handled {
background-color: inherit; background-color: inherit;
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 { tr[href].active {
background-color: @tr-active-color; .var(background-color, tr-active-color);
} }
tr[href]:hover { tr[href]:hover {
background-color: @tr-hover-color; .var(background-color, tr-hover-color);
cursor: pointer; cursor: pointer;
} }

View File

@ -11,7 +11,7 @@
} }
.about-social i:hover { .about-social i:hover {
color: @icinga-blue; .var(color, icinga-blue);
} }
.about-links { .about-links {
@ -27,7 +27,7 @@
} }
.about-links i:hover { .about-links i:hover {
color: @icinga-blue; .var(color, icinga-blue);
} }
.common-table th { .common-table th {

View File

@ -9,7 +9,7 @@
.var(border-color, low-sat-blue); .var(border-color, low-sat-blue);
&.active { &.active {
border-color: @icinga-blue; .var(border-color, icinga-blue);
} }
} }
} }
@ -40,15 +40,15 @@
.var(color, gray-light); .var(color, gray-light);
&.granted { &.granted {
color: @color-granted; .var(color, color-granted);
} }
&.refused { &.refused {
color: @color-refused; .var(color, color-refused);
} }
&.restricted { &.restricted {
color: @color-restricted; .var(color, color-restricted);
} }
} }
@ -72,11 +72,11 @@
border-left-width: 2px; border-left-width: 2px;
&.granted { &.granted {
border-color: @color-granted; .var(border-color, color-granted);
} }
&.refused { &.refused {
border-color: @color-refused; .var(border-color, color-refused);
} }
} }
@ -86,11 +86,11 @@
border-bottom-width: 2px; border-bottom-width: 2px;
&.granted { &.granted {
border-color: @color-granted; .var(border-color, color-granted);
} }
&.refused { &.refused {
border-color: @color-refused; .var(border-color, color-refused);
} }
&:first-child { &:first-child {
@ -105,11 +105,13 @@
.var(border-color, gray-lighter); .var(border-color, gray-lighter);
&.granted { &.granted {
border: 2px solid @color-granted; border: 2px solid;
.var(border-color, color-granted);
} }
&.refused { &.refused {
border: 2px solid @color-refused; border: 2px solid;
.var(border-color, color-refused);
} }
} }

View File

@ -21,6 +21,7 @@
@color-warning-handled: #ffcc66; @color-warning-handled: #ffcc66;
@color-critical: #ff5566; @color-critical: #ff5566;
@color-critical-handled: #ff99aa; @color-critical-handled: #ff99aa;
@color-critical-accentuated: darken(@color-critical, 10%);
@color-down: @color-critical; @color-down: @color-critical;
@color-down-handled: @color-critical-handled; @color-down-handled: @color-critical-handled;
@color-unknown: #aa44ff; @color-unknown: #aa44ff;
@ -32,16 +33,17 @@
// Icinga colors // Icinga colors
@icinga-blue: #00C3ED; @icinga-blue: #00C3ED;
@icinga-secondary: #EF4F98; @icinga-secondary: #EF4F98;
@icinga-secondary-dark: darken(@icinga-secondary, 10%);
@low-sat-blue: #404d72; @low-sat-blue: #404d72;
@low-sat-blue-dark: #434374; @low-sat-blue-dark: #434374;
@icinga-blue-light: #a5c4cd; @icinga-blue-light: fade(@icinga-blue, 50%);
@icinga-blue-dark: #0081a6; @icinga-blue-dark: #0081a6;
// Notification colors // Notification colors
@color-notification-error: @color-critical; @color-notification-error: @color-critical;
@color-notification-info: @color-pending; @color-notification-info: @color-pending;
@color-notification-success: #fe6; @color-notification-success: @color-ok;
@color-notification-warning: @color-warning-handled; @color-notification-warning: @color-warning;
// Background color for <body> // Background color for <body>
@body-bg-color: #282E39; @body-bg-color: #282E39;
@ -56,8 +58,8 @@
// Text color on <a> // Text color on <a>
@link-color: @text-color; @link-color: @text-color;
@tr-active-color: rgba(0,195,237,0.5); @tr-active-color: fade(@icinga-blue, 25);
@tr-hover-color: rgba(0,195,237,0.2); @tr-hover-color: fade(@icinga-blue, 5);
// Menu colors // Menu colors
@menu-bg-color: #06062B; @menu-bg-color: #06062B;
@ -75,6 +77,11 @@
@menu-flyout-color: @text-color; @menu-flyout-color: @text-color;
@tab-hover-bg-color: fade(@body-bg-color, 50%); @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 // Other colors
@color-granted: #59cd59; @color-granted: #59cd59;
@color-refused: #ee7373; @color-refused: #ee7373;

View File

@ -39,7 +39,7 @@ input.search {
} }
&:focus:not([readonly]) { &:focus:not([readonly]) {
border-color: @icinga-blue; .var(border-color, icinga-blue);
} }
} }
@ -64,7 +64,7 @@ input.search {
margin: .5em 0; margin: .5em 0;
> a { > a {
color: @icinga-blue; .var(color, icinga-blue);
padding: .5em; padding: .5em;
line-height: 1; line-height: 1;
} }
@ -104,11 +104,12 @@ input.search {
line-height: 1; line-height: 1;
&.active { &.active {
border-bottom: 2px solid @icinga-blue; border-bottom: 2px solid;
.var(border-bottom-color, icinga-blue);
> a, > a,
> a:hover { > a:hover {
color: @icinga-blue; .var(color, icinga-blue);
/* Compensate border-bottom: 2px */ /* Compensate border-bottom: 2px */
margin-bottom: -2px; margin-bottom: -2px;
} }
@ -121,7 +122,7 @@ input.search {
} }
&.disabled { &.disabled {
color: @disabled-gray; .var(color, disabled-gray);
cursor: no-drop; cursor: no-drop;
} }

View File

@ -292,11 +292,11 @@ form.icinga-form .form-controls {
} }
input[type="submit"].btn-remove { 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 { 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 { button.noscript-apply {
@ -373,17 +373,19 @@ form.inline {
} }
.icinga-controls input[type="checkbox"]:checked + .toggle-switch .toggle-slider { .icinga-controls input[type="checkbox"]:checked + .toggle-switch .toggle-slider {
background-color: @icinga-blue; .var(background-color, icinga-blue);
border: 1px solid @icinga-blue; border: 1px solid;
.var(border-color, icinga-blue);
} }
.icinga-controls input[type="checkbox"]:focus + .toggle-switch .toggle-slider { .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 @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 fade(@icinga-blue, 40); 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 { .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%; left: 100%;
margin-left: -4/3em; margin-left: -4/3em;
} }
@ -405,7 +407,7 @@ form.inline {
} }
form.icinga-form .control-group.disabled .control-label-group { form.icinga-form .control-group.disabled .control-label-group {
color: @disabled-gray; .var(color, disabled-gray);
} }
.icinga-controls { .icinga-controls {
@ -449,15 +451,15 @@ form.icinga-form {
.form-notifications { .form-notifications {
&.info { &.info {
background-color: fade(@color-ok, 20%); .var(background-color, form-info-bg-color);
} }
&.error { &.error {
background-color: fade(@color-critical, 30%); .var(background-color, form-error-bg-color);
} }
&.warning { &.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 { .icinga-controls {
input::placeholder { input::placeholder {
color: @disabled-gray; .var(color, disabled-gray);
font-style: italic; font-style: italic;
opacity: 1; opacity: 1;
} }
input:-ms-input-placeholder { input:-ms-input-placeholder {
color: @disabled-gray; .var(color, disabled-gray);
font-style: italic; font-style: italic;
opacity: 1; opacity: 1;
} }
@ -522,7 +524,7 @@ form.icinga-form .form-info {
display: none; display: none;
&:checked + img { &:checked + img {
border-color: @icinga-blue; .var(border-color, icinga-blue);
border-radius: .25em; border-radius: .25em;
} }

View File

@ -11,19 +11,19 @@
span { span {
&.state-ok { &.state-ok {
background-color: @color-ok; .var(background-color, color-ok);
} }
&.state-warning { &.state-warning {
background-color: @color-warning; .var(background-color, color-warning);
} }
&.state-critical { &.state-critical {
background-color: @color-critical; .var(background-color, color-critical);
} }
&.state-unknown { &.state-unknown {
background-color: @color-unknown; .var(background-color, color-unknown);
} }
} }

View File

@ -9,7 +9,7 @@
} }
#guest-error { #guest-error {
background-color: @icinga-blue; .var(background-color, icinga-blue);
height: 100%; height: 100%;
overflow: auto; overflow: auto;
} }
@ -224,38 +224,38 @@
} }
&.error { &.error {
border-color: @color-down; .var(border-color, color-notification-error);
background: @color-down; .var(background, color-notification-error);
.var(color, body-bg-color); .var(color, text-color-on-icinga-blue);
.icon { .icon {
.var(color, body-bg-color); .var(color, text-color-on-icinga-blue);
} }
} }
&.info { &.info {
border-color: @color-pending; .var(border-color, color-notification-info);
.icon { .icon {
color: @color-pending; .var(color, color-notification-info);
} }
} }
&.success { &.success {
border-color: @color-ok; .var(border-color, color-notification-success);
.icon { .icon {
color: @color-ok; .var(color, color-notification-success);
} }
} }
&.warning { &.warning {
border-color: @color-warning; .var(border-color, color-notification-warning);
background: @color-warning; .var(background, color-notification-warning);
.var(color, body-bg-color); .var(color, text-color-inverted);
.icon { .icon {
.var(color, body-bg-color); .var(color, text-color-inverted);
} }
} }
} }

View File

@ -56,7 +56,7 @@
} }
.errors { .errors {
background-color: @color-critical; .var(background-color, color-critical);
color: white; color: white;
} }
@ -96,7 +96,8 @@
} }
input[type="submit"]:focus { input[type="submit"]:focus {
outline: 3px solid fade(@icinga-blue, 50%); outline: 3px solid;
.var(outline-color, icinga-blue-light);
} }
.form-controls { .form-controls {
@ -105,7 +106,7 @@
input[type=submit] { input[type=submit] {
border-radius: .25em; border-radius: .25em;
background: @icinga-secondary; .var(background, icinga-secondary);
color: white; color: white;
border: none; border: none;
height: 2.5em; height: 2.5em;
@ -113,12 +114,12 @@
width: 100%; width: 100%;
&:hover { &:hover {
background-color: darken(@icinga-secondary, 10) .var(background-color, icinga-secondary-dark);
} }
} }
.config-note { .config-note {
background-color: @color-critical; .var(background-color, color-critical);
margin: 0 auto 2em auto; // Center horizontally w/ bottom margin margin: 0 auto 2em auto; // Center horizontally w/ bottom margin
max-width: 50%; max-width: 50%;
min-width: 24em; min-width: 24em;
@ -196,11 +197,11 @@
a { a {
font-weight: @font-weight-bold; font-weight: @font-weight-bold;
color: @icinga-secondary; .var(color, icinga-secondary);
&:hover { &:hover {
text-decoration: none; text-decoration: none;
color: darken(@icinga-blue, 10); .var(color, icinga-secondary-dark);
} }
} }
} }

View File

@ -7,7 +7,7 @@
@name-value-table-name-width: 38/3em; @name-value-table-name-width: 38/3em;
.action-link { .action-link {
color: @icinga-blue; .var(color, icinga-blue);
} }
.error-message { .error-message {
@ -76,7 +76,7 @@
} }
a:hover > .icon-cancel { a:hover > .icon-cancel {
color: @color-critical; .var(color, color-critical);
} }
.icon-stateful { .icon-stateful {
@ -178,12 +178,12 @@ a:hover > .icon-cancel {
} }
tr[href].active { tr[href].active {
background-color: @tr-active-color; .var(background-color, tr-active-color);
border-left-color: @icinga-blue; .var(border-left-color, icinga-blue);
} }
tr[href]:hover { tr[href]:hover {
background-color: @tr-hover-color; .var(background-color, tr-hover-color);
cursor: pointer; cursor: pointer;
} }
} }
@ -376,7 +376,7 @@ a:hover > .icon-cancel {
.module-dependencies { .module-dependencies {
.unmet-dependencies { .unmet-dependencies {
background-color: @color-warning; .var(background-color, color-warning);
.var(color, text-color-on-icinga-blue); .var(color, text-color-on-icinga-blue);
padding: .25em .5em; padding: .25em .5em;
margin-left: -.5em; margin-left: -.5em;
@ -394,7 +394,7 @@ a:hover > .icon-cancel {
} }
.missing { .missing {
color: @color-critical; .var(color, color-critical);
font-weight: bold; font-weight: bold;
} }
} }

View File

@ -109,7 +109,7 @@
} }
#menu ul:not(.nav-level-2) > .selected > a { #menu ul:not(.nav-level-2) > .selected > a {
background-color: @menu-highlight-color; .var(background-color, menu-highlight-color);
.var(color, text-color-inverted); .var(color, text-color-inverted);
@ -145,7 +145,7 @@
} }
&.active { &.active {
background-color: @menu-highlight-color; .var(background-color, menu-highlight-color);
overflow: hidden; overflow: hidden;
position: relative; position: relative;
} }
@ -167,7 +167,7 @@
} }
&.active > a { &.active > a {
color: @menu-2ndlvl-highlight-color; .var(color, menu-2ndlvl-highlight-color);
} }
} }
@ -279,7 +279,7 @@
&:not(.active) { &:not(.active) {
&:hover, &:focus { &:hover, &:focus {
background-color: @tr-active-color; .var(background-color, tr-active-color);
} }
} }
@ -476,7 +476,7 @@ input[type=text].search-input {
&:hover, &:focus { &:hover, &:focus {
i { 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) { &.nav-item:not(.badge-nav-item) {
&:not(.selected):not(.active):hover, &:not(.selected):not(.active):hover,
&:not(.selected):not(.active):focus { &: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 { #layout:not(.sidebar-collapsed) #menu .nav-level-1 > .nav-item.active .nav-level-2 > li {
&.badge-nav-item:not(.selected) { &.badge-nav-item:not(.selected) {
&:hover { &:hover {
background-color: @menu-2ndlvl-highlight-bg-color; .var(background-color, menu-2ndlvl-highlight-bg-color);
} }
} }
} }

View File

@ -6,7 +6,11 @@
box-shadow: @arguments; 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); .rounded-corners(3px);
background-color: extract-variable-default(@background-color); background-color: extract-variable-default(@background-color);
@ -35,7 +39,9 @@
&.btn-primary:focus, &.btn-primary:focus,
&.btn-primary:hover { &.btn-primary:hover {
background-color: extract-variable-default(@color-dark);
background-color: @color-dark; background-color: @color-dark;
border-color: extract-variable-default(@color-dark);
border-color: @color-dark; border-color: @color-dark;
color: extract-variable-default(@background-color); color: extract-variable-default(@background-color);
color: @background-color; color: @background-color;
@ -144,86 +150,86 @@
// Mixin for stateful foreground colors, e.g. text or icons // Mixin for stateful foreground colors, e.g. text or icons
.fg-stateful { .fg-stateful {
&.state-ok { &.state-ok {
color: @color-ok; .var(color, color-ok);
} }
&.state-up { &.state-up {
color: @color-up; .var(color, color-up);
} }
&.state-warning { &.state-warning {
color: @color-warning; .var(color, color-warning);
&.handled { &.handled {
color: @color-warning-handled; .var(color, color-warning-handled);
} }
} }
&.state-critical { &.state-critical {
color: @color-critical; .var(color, color-critical);
&.handled { &.handled {
color: @color-critical-handled; .var(color, color-critical-handled);
} }
} }
&.state-down { &.state-down {
color: @color-down; .var(color, color-down);
&.handled { &.handled {
color: @color-down-handled; .var(color, color-down-handled);
} }
} }
&.state-unreachable { &.state-unreachable {
color: @color-unreachable; .var(color, color-unreachable);
&.handled { &.handled {
color: @color-unreachable-handled; .var(color, color-unreachable-handled);
} }
} }
&.state-unknown { &.state-unknown {
color: @color-unknown; .var(color, color-unknown);
&.handled { &.handled {
color: @color-unknown-handled; .var(color, color-unknown-handled);
} }
} }
&.state-pending { &.state-pending {
color: @color-pending; .var(color, color-pending);
} }
} }
// Mixin for stateful background colors // Mixin for stateful background colors
.bg-stateful { .bg-stateful {
&.state-ok { &.state-ok {
background-color: @color-ok; .var(background-color, color-ok);
} }
&.state-up { &.state-up {
background-color: @color-up; .var(background-color, color-up);
} }
&.state-warning { &.state-warning {
background-color: @color-warning; .var(background-color, color-warning);
&.handled { &.handled {
background-color: @color-warning-handled; .var(background-color, color-warning-handled);
} }
} }
&.state-critical { &.state-critical {
background-color: @color-critical; .var(background-color, color-critical);
&.handled { &.handled {
background-color: @color-critical-handled; .var(background-color, color-critical-handled);
} }
} }
&.state-down { &.state-down {
background-color: @color-down; .var(background-color, color-down);
&.handled { &.handled {
background-color: @color-down-handled; .var(background-color, color-down-handled);
} }
} }
&.state-unreachable { &.state-unreachable {
background-color: @color-unreachable; .var(background-color, color-unreachable);
&.handled { &.handled {
background-color: @color-unreachable-handled; .var(background-color, color-unreachable-handled);
} }
} }
&.state-unknown { &.state-unknown {
background-color: @color-unknown; .var(background-color, color-unknown);
&.handled { &.handled {
background-color: @color-unknown-handled; .var(background-color, color-unknown-handled);
} }
} }
&.state-pending { &.state-pending {
background-color: @color-pending; .var(background-color, color-pending);
} }
} }

View File

@ -16,7 +16,7 @@
.setup-header { .setup-header {
width: 100%; width: 100%;
height: 5.5em; height: 5.5em;
background-color: @icinga-blue; .var(background-color, icinga-blue);
border-bottom: 1px solid #d9d9d9; border-bottom: 1px solid #d9d9d9;
text-align: center; text-align: center;
@ -104,7 +104,7 @@
} }
&.complete { &.complete {
background-color: @color-ok; .var(background-color, color-ok);
} }
&.visited { &.visited {
@ -228,7 +228,7 @@ form#setup_requirements {
padding: 0.4em; padding: 0.4em;
&.fulfilled { &.fulfilled {
background-color: @color-ok; .var(background-color, color-ok);
} }
&.not-available { &.not-available {
@ -237,7 +237,7 @@ form#setup_requirements {
} }
&.missing { &.missing {
background-color: @color-critical; .var(background-color, color-critical);
} }
} }
} }
@ -314,11 +314,11 @@ form#setup_requirements {
color: white; color: white;
&.success { &.success {
background-color: @color-ok; .var(background-color, color-ok);
} }
&.failure { &.failure {
background-color: @color-critical; .var(background-color, color-critical);
} }
} }

View File

@ -15,7 +15,7 @@
position: relative; position: relative;
&:before { &:before {
color: @icinga-blue; .var(color, icinga-blue);
content: "\e811"; content: "\e811";
font-family: 'ifont'; font-family: 'ifont';
@ -28,7 +28,7 @@
} }
a { a {
color: @icinga-blue; .var(color, icinga-blue);
} }
.message { .message {
@ -56,12 +56,12 @@
color: #fff; color: #fff;
&:hover .icon-cancel { &:hover .icon-cancel {
color: @icinga-blue; .var(color, icinga-blue);
} }
} }
#application-state-summary > div { #application-state-summary > div {
background-color: @color-critical; .var(background-color, color-critical);
color: #fff; color: #fff;
line-height: 1.5em; line-height: 1.5em;
padding: 0.5em 1em 0.5em 3em; 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); -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); 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; text-decoration: none;
} }
} }
@ -206,7 +206,7 @@ table.multiselect tr[href] td {
.var(color, text-color); .var(color, text-color);
&:hover, &:focus { &:hover, &:focus {
color: @icinga-blue; .var(color, icinga-blue);
} }
} }
@ -239,15 +239,15 @@ form.role-form {
.privilege-preview .icon { .privilege-preview .icon {
&.granted { &.granted {
color: @color-granted; .var(color, color-granted);
} }
&.refused { &.refused {
color: @color-refused; .var(color, color-refused);
} }
&.restricted { &.restricted {
color: @color-restricted; .var(color, color-restricted);
} }
} }
} }
@ -277,11 +277,11 @@ form.role-form {
text-align: center; text-align: center;
&.icon-ok { &.icon-ok {
color: @color-granted; .var(color, color-granted);
} }
&.icon-cancel { &.icon-cancel {
color: @color-refused; .var(color, color-refused);
} }
} }
} }
@ -412,7 +412,7 @@ ul.tree li a {
} }
ul.tree li a.error { ul.tree li a.error {
color: @color-critical-handled; .var(color, color-critical-handled);
} }
ul.tree li a:hover { ul.tree li a:hover {
@ -421,7 +421,7 @@ ul.tree li a:hover {
} }
ul.tree li a.error: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 */ /* 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 { .slice-state-ok {
stroke: @color-ok; .var(stroke, color-ok);
background: @color-ok; .var(background, color-ok);
} }
.slice-state-warning-handled { .slice-state-warning-handled {
stroke: @color-warning-handled; .var(stroke, color-warning-handled);
background: @color-warning-handled; .var(background, color-warning-handled);
} }
.slice-state-warning { .slice-state-warning {
stroke: @color-warning; .var(stroke, color-warning);
background: @color-unreachable-handled; .var(background, color-unreachable-handled);
} }
.slice-state-critical-handled { .slice-state-critical-handled {
stroke: @color-critical-handled; .var(stroke, color-critical-handled);
background: @color-critical-handled; .var(background, color-critical-handled);
} }
.slice-state-critical { .slice-state-critical {
stroke: @color-critical; .var(stroke, color-critical);
background: @color-critical; .var(background, color-critical);
} }
.slice-state-unknown-handled { .slice-state-unknown-handled {
stroke: @color-unknown-handled; .var(stroke, color-unknown-handled);
background: @color-unknown-handled; .var(background, color-unknown-handled);
} }
.slice-state-unknown { .slice-state-unknown {
stroke: @color-unknown; .var(stroke, color-unknown);
background: @color-unknown; .var(background, color-unknown);
} }
.slice-state-unreachable-handled { .slice-state-unreachable-handled {
stroke: @color-unreachable-handled; .var(stroke, color-unreachable-handled);
background: @color-unreachable-handled; .var(background, color-unreachable-handled);
} }
.slice-state-unreachable { .slice-state-unreachable {
stroke: @color-unreachable; .var(stroke, color-unreachable);
background: @color-unreachable; .var(background, color-unreachable);
} }
.slice-state-pending { .slice-state-pending {
stroke: @color-pending; .var(stroke, color-pending);
background: @color-pending; .var(background, color-pending);
} }
.slice-state-not-checked { .slice-state-not-checked {
@ -585,7 +585,7 @@ ul.tree li a.error:hover {
} }
.donut-label-big-eye-catching { .donut-label-big-eye-catching {
color: @color-critical; .var(color, color-critical);
} }
.donut-label-small { .donut-label-small {