From 663cc530174d4e595e143dde950a8968160fd29c Mon Sep 17 00:00:00 2001 From: Johannes Meyer Date: Mon, 28 Jun 2021 11:13:23 +0200 Subject: [PATCH 1/7] css: Respect `--black` --- public/css/icinga/forms.less | 2 +- public/css/icinga/mixins.less | 2 ++ 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/public/css/icinga/forms.less b/public/css/icinga/forms.less index 9193c4ca2..d489ad78f 100644 --- a/public/css/icinga/forms.less +++ b/public/css/icinga/forms.less @@ -296,7 +296,7 @@ form.icinga-form .form-controls { } 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 { diff --git a/public/css/icinga/mixins.less b/public/css/icinga/mixins.less index e9c4c657b..2624871ad 100644 --- a/public/css/icinga/mixins.less +++ b/public/css/icinga/mixins.less @@ -35,7 +35,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; From 6990e48446b611582258363d1307937d0cd6bfdf Mon Sep 17 00:00:00 2001 From: Johannes Meyer Date: Mon, 28 Jun 2021 11:24:02 +0200 Subject: [PATCH 2/7] css: Respect `--disabled-gray` --- public/css/icinga/controls.less | 2 +- public/css/icinga/forms.less | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/public/css/icinga/controls.less b/public/css/icinga/controls.less index 1a500912b..aaaec2998 100644 --- a/public/css/icinga/controls.less +++ b/public/css/icinga/controls.less @@ -121,7 +121,7 @@ input.search { } &.disabled { - color: @disabled-gray; + .var(color, disabled-gray); cursor: no-drop; } diff --git a/public/css/icinga/forms.less b/public/css/icinga/forms.less index d489ad78f..e98cdffc8 100644 --- a/public/css/icinga/forms.less +++ b/public/css/icinga/forms.less @@ -405,7 +405,7 @@ form.inline { } form.icinga-form .control-group.disabled .control-label-group { - color: @disabled-gray; + .var(color, disabled-gray); } .icinga-controls { @@ -490,13 +490,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; } From 804fe75d55828acbf646c230bfc5dbfb3c886b2f Mon Sep 17 00:00:00 2001 From: Johannes Meyer Date: Mon, 28 Jun 2021 11:36:12 +0200 Subject: [PATCH 3/7] css: Respect `--color-*` --- modules/monitoring/public/css/module.less | 24 +++++----- modules/monitoring/public/css/tables.less | 28 ++++++----- public/css/icinga/audit.less | 20 ++++---- public/css/icinga/base.less | 6 +++ public/css/icinga/forms.less | 8 ++-- public/css/icinga/health.less | 8 ++-- public/css/icinga/layout.less | 16 +++---- public/css/icinga/login.less | 4 +- public/css/icinga/main.less | 6 +-- public/css/icinga/mixins.less | 52 ++++++++++---------- public/css/icinga/setup.less | 10 ++-- public/css/icinga/widgets.less | 58 +++++++++++------------ 12 files changed, 127 insertions(+), 113 deletions(-) diff --git a/modules/monitoring/public/css/module.less b/modules/monitoring/public/css/module.less index b8cecd4ad..d02575d0c 100644 --- a/modules/monitoring/public/css/module.less +++ b/modules/monitoring/public/css/module.less @@ -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; } diff --git a/modules/monitoring/public/css/tables.less b/modules/monitoring/public/css/tables.less index 1f7f6feea..1ea584e22 100644 --- a/modules/monitoring/public/css/tables.less +++ b/modules/monitoring/public/css/tables.less @@ -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); } } diff --git a/public/css/icinga/audit.less b/public/css/icinga/audit.less index a05ad0be5..725899e42 100644 --- a/public/css/icinga/audit.less +++ b/public/css/icinga/audit.less @@ -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); } } diff --git a/public/css/icinga/base.less b/public/css/icinga/base.less index 08468187f..ec6312190 100644 --- a/public/css/icinga/base.less +++ b/public/css/icinga/base.less @@ -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; @@ -75,6 +76,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; diff --git a/public/css/icinga/forms.less b/public/css/icinga/forms.less index e98cdffc8..678a6cbdd 100644 --- a/public/css/icinga/forms.less +++ b/public/css/icinga/forms.less @@ -292,7 +292,7 @@ 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 { @@ -449,15 +449,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); } } diff --git a/public/css/icinga/health.less b/public/css/icinga/health.less index b673edbbc..5c9fe01e0 100644 --- a/public/css/icinga/health.less +++ b/public/css/icinga/health.less @@ -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); } } diff --git a/public/css/icinga/layout.less b/public/css/icinga/layout.less index 63f788a2a..382354524 100644 --- a/public/css/icinga/layout.less +++ b/public/css/icinga/layout.less @@ -224,8 +224,8 @@ } &.error { - border-color: @color-down; - background: @color-down; + .var(border-color, color-down); + .var(background, color-down); .var(color, body-bg-color); .icon { @@ -234,24 +234,24 @@ } &.info { - border-color: @color-pending; + .var(border-color, color-pending); .icon { - color: @color-pending; + .var(color, color-pending); } } &.success { - border-color: @color-ok; + .var(border-color, color-ok); .icon { - color: @color-ok; + .var(color, color-ok); } } &.warning { - border-color: @color-warning; - background: @color-warning; + .var(border-color, color-warning); + .var(background, color-warning); .var(color, body-bg-color); .icon { diff --git a/public/css/icinga/login.less b/public/css/icinga/login.less index 42f52575e..6d831afe0 100644 --- a/public/css/icinga/login.less +++ b/public/css/icinga/login.less @@ -56,7 +56,7 @@ } .errors { - background-color: @color-critical; + .var(background-color, color-critical); color: white; } @@ -118,7 +118,7 @@ } .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; diff --git a/public/css/icinga/main.less b/public/css/icinga/main.less index b6bf8816e..c52967f5d 100644 --- a/public/css/icinga/main.less +++ b/public/css/icinga/main.less @@ -76,7 +76,7 @@ } a:hover > .icon-cancel { - color: @color-critical; + .var(color, color-critical); } .icon-stateful { @@ -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; } } diff --git a/public/css/icinga/mixins.less b/public/css/icinga/mixins.less index 2624871ad..28917dc65 100644 --- a/public/css/icinga/mixins.less +++ b/public/css/icinga/mixins.less @@ -146,86 +146,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); } } diff --git a/public/css/icinga/setup.less b/public/css/icinga/setup.less index e4e3bdafc..30071291b 100644 --- a/public/css/icinga/setup.less +++ b/public/css/icinga/setup.less @@ -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); } } diff --git a/public/css/icinga/widgets.less b/public/css/icinga/widgets.less index faa9c3e8e..2edfcec03 100644 --- a/public/css/icinga/widgets.less +++ b/public/css/icinga/widgets.less @@ -61,7 +61,7 @@ } #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; @@ -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 { From b68281388ab9261f869e82eac5d5dc7d1640d678 Mon Sep 17 00:00:00 2001 From: Johannes Meyer Date: Mon, 28 Jun 2021 12:37:42 +0200 Subject: [PATCH 4/7] css: Fix notification color vars and respect `--color-notification-*` --- public/css/icinga/base.less | 4 ++-- public/css/icinga/layout.less | 24 ++++++++++++------------ 2 files changed, 14 insertions(+), 14 deletions(-) diff --git a/public/css/icinga/base.less b/public/css/icinga/base.less index ec6312190..f7f212213 100644 --- a/public/css/icinga/base.less +++ b/public/css/icinga/base.less @@ -41,8 +41,8 @@ // 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-bg-color: #282E39; diff --git a/public/css/icinga/layout.less b/public/css/icinga/layout.less index 382354524..f5b435c58 100644 --- a/public/css/icinga/layout.less +++ b/public/css/icinga/layout.less @@ -224,38 +224,38 @@ } &.error { - .var(border-color, color-down); - .var(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 { - .var(border-color, color-pending); + .var(border-color, color-notification-info); .icon { - .var(color, color-pending); + .var(color, color-notification-info); } } &.success { - .var(border-color, color-ok); + .var(border-color, color-notification-success); .icon { - .var(color, color-ok); + .var(color, color-notification-success); } } &.warning { - .var(border-color, color-warning); - .var(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); } } } From fad9eb0a840c6561816f8536f3fcb9846a53d0a0 Mon Sep 17 00:00:00 2001 From: Johannes Meyer Date: Mon, 28 Jun 2021 14:08:27 +0200 Subject: [PATCH 5/7] css: Respect remaining `--menu-*` vars --- public/css/icinga/menu.less | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/public/css/icinga/menu.less b/public/css/icinga/menu.less index a3d52aa87..29fa8e505 100644 --- a/public/css/icinga/menu.less +++ b/public/css/icinga/menu.less @@ -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); } } @@ -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); } } } From 6c235c64b5f0f05aef3aa66f8a6fedfc7981520a Mon Sep 17 00:00:00 2001 From: Johannes Meyer Date: Mon, 28 Jun 2021 14:12:58 +0200 Subject: [PATCH 6/7] css: Respect `--tr-*-color` --- modules/monitoring/public/css/tables.less | 4 ++-- public/css/icinga/main.less | 4 ++-- public/css/icinga/menu.less | 2 +- public/css/icinga/widgets.less | 2 +- 4 files changed, 6 insertions(+), 6 deletions(-) diff --git a/modules/monitoring/public/css/tables.less b/modules/monitoring/public/css/tables.less index 1ea584e22..f470f4aa0 100644 --- a/modules/monitoring/public/css/tables.less +++ b/modules/monitoring/public/css/tables.less @@ -250,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; } diff --git a/public/css/icinga/main.less b/public/css/icinga/main.less index c52967f5d..e2063a378 100644 --- a/public/css/icinga/main.less +++ b/public/css/icinga/main.less @@ -178,12 +178,12 @@ a:hover > .icon-cancel { } tr[href].active { - background-color: @tr-active-color; + .var(background-color, tr-active-color); border-left-color: @icinga-blue; } tr[href]:hover { - background-color: @tr-hover-color; + .var(background-color, tr-hover-color); cursor: pointer; } } diff --git a/public/css/icinga/menu.less b/public/css/icinga/menu.less index 29fa8e505..0257b4c5b 100644 --- a/public/css/icinga/menu.less +++ b/public/css/icinga/menu.less @@ -279,7 +279,7 @@ &:not(.active) { &:hover, &:focus { - background-color: @tr-active-color; + .var(background-color, tr-active-color); } } diff --git a/public/css/icinga/widgets.less b/public/css/icinga/widgets.less index 2edfcec03..69745a1fa 100644 --- a/public/css/icinga/widgets.less +++ b/public/css/icinga/widgets.less @@ -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; } } From b88dad952556c7fe8e4b89d46885cf8ccf2dd222 Mon Sep 17 00:00:00 2001 From: Johannes Meyer Date: Mon, 28 Jun 2021 16:22:19 +0200 Subject: [PATCH 7/7] css: Respect `--icinga-*` --- modules/doc/public/css/module.less | 9 +++++---- modules/monitoring/public/css/module.less | 4 ++-- modules/monitoring/public/css/service-grid.less | 2 +- public/css/icinga/about.less | 4 ++-- public/css/icinga/audit.less | 2 +- public/css/icinga/base.less | 7 ++++--- public/css/icinga/controls.less | 9 +++++---- public/css/icinga/forms.less | 14 ++++++++------ public/css/icinga/layout.less | 2 +- public/css/icinga/login.less | 11 ++++++----- public/css/icinga/main.less | 4 ++-- public/css/icinga/mixins.less | 6 +++++- public/css/icinga/setup.less | 2 +- public/css/icinga/widgets.less | 8 ++++---- 14 files changed, 47 insertions(+), 37 deletions(-) diff --git a/modules/doc/public/css/module.less b/modules/doc/public/css/module.less index b5b17e533..97d293824 100644 --- a/modules/doc/public/css/module.less +++ b/modules/doc/public/css/module.less @@ -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; diff --git a/modules/monitoring/public/css/module.less b/modules/monitoring/public/css/module.less index d02575d0c..03d062804 100644 --- a/modules/monitoring/public/css/module.less +++ b/modules/monitoring/public/css/module.less @@ -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, diff --git a/modules/monitoring/public/css/service-grid.less b/modules/monitoring/public/css/service-grid.less index 35a544e7d..936f0a97f 100644 --- a/modules/monitoring/public/css/service-grid.less +++ b/modules/monitoring/public/css/service-grid.less @@ -40,7 +40,7 @@ .var(color, text-color-light); } &:focus, &:active { - color: @icinga-blue; + .var(color, icinga-blue); } } diff --git a/public/css/icinga/about.less b/public/css/icinga/about.less index caf24032b..464200242 100644 --- a/public/css/icinga/about.less +++ b/public/css/icinga/about.less @@ -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 { diff --git a/public/css/icinga/audit.less b/public/css/icinga/audit.less index 725899e42..a3e9c7acf 100644 --- a/public/css/icinga/audit.less +++ b/public/css/icinga/audit.less @@ -9,7 +9,7 @@ .var(border-color, low-sat-blue); &.active { - border-color: @icinga-blue; + .var(border-color, icinga-blue); } } } diff --git a/public/css/icinga/base.less b/public/css/icinga/base.less index f7f212213..c903d692d 100644 --- a/public/css/icinga/base.less +++ b/public/css/icinga/base.less @@ -33,9 +33,10 @@ // 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 @@ -57,8 +58,8 @@ // Text color on @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; diff --git a/public/css/icinga/controls.less b/public/css/icinga/controls.less index aaaec2998..7f6c485d3 100644 --- a/public/css/icinga/controls.less +++ b/public/css/icinga/controls.less @@ -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; } diff --git a/public/css/icinga/forms.less b/public/css/icinga/forms.less index 678a6cbdd..90953a2de 100644 --- a/public/css/icinga/forms.less +++ b/public/css/icinga/forms.less @@ -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; } @@ -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; } diff --git a/public/css/icinga/layout.less b/public/css/icinga/layout.less index f5b435c58..d425acc13 100644 --- a/public/css/icinga/layout.less +++ b/public/css/icinga/layout.less @@ -9,7 +9,7 @@ } #guest-error { - background-color: @icinga-blue; + .var(background-color, icinga-blue); height: 100%; overflow: auto; } diff --git a/public/css/icinga/login.less b/public/css/icinga/login.less index 6d831afe0..7c2544f9a 100644 --- a/public/css/icinga/login.less +++ b/public/css/icinga/login.less @@ -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,7 +114,7 @@ width: 100%; &:hover { - background-color: darken(@icinga-secondary, 10) + .var(background-color, icinga-secondary-dark); } } @@ -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); } } } diff --git a/public/css/icinga/main.less b/public/css/icinga/main.less index e2063a378..17a04bd94 100644 --- a/public/css/icinga/main.less +++ b/public/css/icinga/main.less @@ -7,7 +7,7 @@ @name-value-table-name-width: 38/3em; .action-link { - color: @icinga-blue; + .var(color, icinga-blue); } .error-message { @@ -179,7 +179,7 @@ a:hover > .icon-cancel { tr[href].active { .var(background-color, tr-active-color); - border-left-color: @icinga-blue; + .var(border-left-color, icinga-blue); } tr[href]:hover { diff --git a/public/css/icinga/mixins.less b/public/css/icinga/mixins.less index 28917dc65..2a7619b95 100644 --- a/public/css/icinga/mixins.less +++ b/public/css/icinga/mixins.less @@ -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); diff --git a/public/css/icinga/setup.less b/public/css/icinga/setup.less index 30071291b..7d77880d3 100644 --- a/public/css/icinga/setup.less +++ b/public/css/icinga/setup.less @@ -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; diff --git a/public/css/icinga/widgets.less b/public/css/icinga/widgets.less index 69745a1fa..f79b1114b 100644 --- a/public/css/icinga/widgets.less +++ b/public/css/icinga/widgets.less @@ -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,7 +56,7 @@ color: #fff; &:hover .icon-cancel { - color: @icinga-blue; + .var(color, icinga-blue); } } @@ -206,7 +206,7 @@ table.multiselect tr[href] td { .var(color, text-color); &:hover, &:focus { - color: @icinga-blue; + .var(color, icinga-blue); } }