From b1622fcb2d2871aa44a7920aa405c11616348926 Mon Sep 17 00:00:00 2001 From: Johannes Meyer Date: Wed, 23 Jun 2021 08:42:10 +0200 Subject: [PATCH 01/21] Integrate light theme's selector rules using media queries --- public/css/icinga/base.less | 9 +++++++ public/css/icinga/controls.less | 8 ++++++ public/css/icinga/layout.less | 8 ++++++ public/css/themes/icinga-light-theme.less | 31 ----------------------- 4 files changed, 25 insertions(+), 31 deletions(-) diff --git a/public/css/icinga/base.less b/public/css/icinga/base.less index 5b1894cdb..d087b532e 100644 --- a/public/css/icinga/base.less +++ b/public/css/icinga/base.less @@ -232,3 +232,12 @@ td, th { top: 2.5em; } } + +@media (min-height: @prefer-light-color-scheme), (prefers-color-scheme: light) and (min-height: @enable-color-preference) { + .container { + &:before, + > .content:before { + background-image: url(../img/icinga-loader-light.gif) + } + } +} diff --git a/public/css/icinga/controls.less b/public/css/icinga/controls.less index 3f1ea7e18..549d31c76 100644 --- a/public/css/icinga/controls.less +++ b/public/css/icinga/controls.less @@ -43,6 +43,14 @@ input.search { } } +@media (min-height: @prefer-light-color-scheme), (prefers-color-scheme: light) and (min-height: @enable-color-preference) { + #menu input.search, + .controls input.search, + input.search { + background-image: url(../img/icons/search.png); + } +} + .backend-selection, .pagination-control, .selection-info, diff --git a/public/css/icinga/layout.less b/public/css/icinga/layout.less index e79566119..661164796 100644 --- a/public/css/icinga/layout.less +++ b/public/css/icinga/layout.less @@ -356,3 +356,11 @@ } } } + +@media (min-height: @prefer-light-color-scheme), (prefers-color-scheme: light) and (min-height: @enable-color-preference) { + #header-logo, + #mobile-menu-logo, + #about .icinga-logo { + filter: brightness(0.415) sepia(1) ~"saturate(0.1)" hue-rotate(144deg); + } +} diff --git a/public/css/themes/icinga-light-theme.less b/public/css/themes/icinga-light-theme.less index fdca95f7f..505d3880a 100644 --- a/public/css/themes/icinga-light-theme.less +++ b/public/css/themes/icinga-light-theme.less @@ -1,7 +1,4 @@ -@original-menu-bg-color: #06062B; -@original-low-sat-blue: #404d72; - @gray: #7F7F7F; @gray-semilight: #A9A9A9; @gray-light: #C9C9C9; @@ -20,31 +17,3 @@ @low-sat-blue: #DEECF1; @low-sat-blue-dark: #c0cccd; - -#header-logo, -#mobile-menu-logo, -#about .icinga-logo { - filter: brightness(0.415) sepia(1) ~"saturate(0.1)" hue-rotate(144deg); -} - -#menu input.search, -.controls input.search, -input.search { - background-image: url(../img/icons/search.png); -} - -#login { - background-color: @original-menu-bg-color; - - input[type=password], - input[type=text] { - background-color: @original-low-sat-blue; - } -} - -.container { - &:before, - > .content:before { - background-image: url(../img/icinga-loader-light.gif) - } -} From b59f26879e6b9f78c641c6c8da3467fbce92d096 Mon Sep 17 00:00:00 2001 From: Johannes Meyer Date: Wed, 23 Jun 2021 10:59:47 +0200 Subject: [PATCH 02/21] LessParser: Add custom function `extract-variable-default` --- library/Icinga/Util/LessParser.php | 57 +++++++++++++++++++++++++++++- 1 file changed, 56 insertions(+), 1 deletion(-) diff --git a/library/Icinga/Util/LessParser.php b/library/Icinga/Util/LessParser.php index e3439a782..0e5cccaca 100644 --- a/library/Icinga/Util/LessParser.php +++ b/library/Icinga/Util/LessParser.php @@ -3,11 +3,66 @@ namespace Icinga\Util; +use Less_Tree_Anonymous; +use Less_Tree_Expression; +use Less_Tree_Quoted; +use Less_Tree_Value; use lessc; require_once 'lessphp/lessc.inc.php'; class LessParser extends lessc { - // Overwrite methods here + public function __construct() + { + $this->registerFunction('extract-variable-default', [$this, 'extractVariableDefault']); + } + + /** + * Extract default from given variable call + * + * How to use: + * + * color: extract-variable-default(@mixin-parameter); + * color: @mixin-parameter; + * + * border: extract-variable-default(1px solid @mixin-parameter); + * border: 1px solid @mixin-parameter; + * + * background: drop-shadow(5px 0 3px extract-variable-default(@mixin-parameter, true)); + * background: drop-shadow(5px 0 3px @mixin-parameter); + * + * @param mixed $value + * @param bool $valAsDefault + * + * @return mixed + */ + public function extractVariableDefault($value, $valAsDefault = false) + { + $defaultValue = 'inherit'; + if ($value instanceof Less_Tree_Quoted) { + $stripped = preg_replace( + '~var\s*\(\s*[-\w]+\s*,\s*([^)]+)\)~', + '$1', + $value->value, + -1, + $replacements + ); + if ($replacements > 0) { + $defaultValue = $stripped; + } + } elseif ($value instanceof Less_Tree_Expression) { + foreach ($value->value as $i => $item) { + $value->value[$i] = $this->extractVariableDefault($item, true); + } + + return $value; + } + + if ($valAsDefault && $defaultValue === 'inherit') { + return $value; + } + + return new Less_Tree_Value([new Less_Tree_Anonymous($defaultValue)]); + } } From 96687e37c646eb516f08568d532cf55376ea7ef4 Mon Sep 17 00:00:00 2001 From: Johannes Meyer Date: Wed, 23 Jun 2021 11:01:31 +0200 Subject: [PATCH 03/21] Integrate light theme's `@body-bg-color` using a media query --- modules/doc/public/css/module.less | 2 +- modules/monitoring/public/css/module.less | 14 +++++++------- public/css/icinga/badges.less | 2 +- public/css/icinga/base.less | 15 ++++++++++++++- public/css/icinga/forms.less | 5 +++-- public/css/icinga/layout.less | 14 +++++++------- public/css/icinga/main.less | 6 ++++-- public/css/icinga/menu.less | 10 +++++----- public/css/icinga/mixins.less | 5 ++++- public/css/icinga/modal.less | 2 +- public/css/icinga/tabs.less | 8 ++++---- public/css/icinga/widgets.less | 6 +++--- public/css/themes/icinga-light-theme.less | 1 - 13 files changed, 54 insertions(+), 36 deletions(-) diff --git a/modules/doc/public/css/module.less b/modules/doc/public/css/module.less index 35cfc3d3a..fb0916db2 100644 --- a/modules/doc/public/css/module.less +++ b/modules/doc/public/css/module.less @@ -88,7 +88,7 @@ tbody > tr:nth-child(odd) { } tbody > tr:nth-child(even) { - background: @body-bg-color; + .var(background, body-bg-color); } td, th { diff --git a/modules/monitoring/public/css/module.less b/modules/monitoring/public/css/module.less index fdbe81c43..56809fb77 100644 --- a/modules/monitoring/public/css/module.less +++ b/modules/monitoring/public/css/module.less @@ -2,7 +2,7 @@ .monitoring-statusbar { position: relative; - background-color: @body-bg-color; + .var(background-color, body-bg-color); border-top: 1px solid @gray-lighter; padding: .25em @gutter; line-height: 1.3; @@ -657,37 +657,37 @@ form.instance-features span.description, form.object-features span.description { .state-critical { background-color: @color-critical; - color: @body-bg-color; + .var(color, body-bg-color); padding: 0.2em; } .state-ok { background-color: @color-ok; - color: @body-bg-color; + .var(color, body-bg-color); padding: 0.2em; } .state-unknown { background-color: @color-unknown; - color: @body-bg-color; + .var(color, body-bg-color); padding: 0.2em; } .state-warning { background-color: @color-warning; - color: @body-bg-color; + .var(color, body-bg-color); padding: 0.2em; } .state-down { background-color: @color-down; - color: @body-bg-color; + .var(color, body-bg-color); padding: 0.2em; } .state-up { background-color: @color-up; - color: @body-bg-color; + .var(color, body-bg-color); padding: 0.2em; } } diff --git a/public/css/icinga/badges.less b/public/css/icinga/badges.less index eae95c219..436a3bc2e 100644 --- a/public/css/icinga/badges.less +++ b/public/css/icinga/badges.less @@ -9,7 +9,7 @@ .rounded-corners(); background-color: @gray; - color: @badge-color; + .var(color, badge-color); display: inline-block; font-family: @font-family-wide; font-size: @font-size-small; diff --git a/public/css/icinga/base.less b/public/css/icinga/base.less index d087b532e..2da48ccdc 100644 --- a/public/css/icinga/base.less +++ b/public/css/icinga/base.less @@ -69,6 +69,7 @@ @menu-2ndlvl-highlight-color: @text-color-inverted; @menu-flyout-bg-color: @body-bg-color; @menu-flyout-color: @text-color; +@tab-hover-bg-color: fade(@body-bg-color, 50%); // Other colors @color-granted: #59cd59; @@ -95,6 +96,17 @@ @vertical-padding: 0.5em; // 6px @horizontal-padding: 1em; // 12px +@media (min-height: @prefer-light-color-scheme), (prefers-color-scheme: light) and (min-height: @enable-color-preference) { + :root { + --body-bg-color: #F5F9FA; + --badge-color: #F5F9FA; + --text-color-inverted: #F5F9FA; + --text-color-on-icinga-blue: #F5F9FA; + --menu-flyout-bg-color: #F5F9FA; + --tab-hover-bg-color: fade(#F5F9FA, 50%); + } +} + // Make padding not affect the final computed width of an element html { box-sizing: border-box; @@ -200,7 +212,8 @@ td, th { content: ""; display: block; - background: @body-bg-color url(../img/icinga-loader.gif) no-repeat center center; + background: url(../img/icinga-loader.gif) no-repeat center center; + .var(background-color, body-bg-color); background-size: 4em 4em; opacity: 0; diff --git a/public/css/icinga/forms.less b/public/css/icinga/forms.less index f534679f3..af3c9a250 100644 --- a/public/css/icinga/forms.less +++ b/public/css/icinga/forms.less @@ -291,11 +291,11 @@ form.icinga-form .form-controls { } input[type="submit"].btn-remove { - .button(@body-bg-color, @color-critical, darken(@color-critical, 10%)); + .button(~"var(--body-bg-color, @{body-bg-color})", @color-critical, darken(@color-critical, 10%)); } input[type="submit"].btn-cancel { - .button(@body-bg-color, @gray, @black); + .button(~"var(--body-bg-color, @{body-bg-color})", @gray, @black); } button.noscript-apply { @@ -376,6 +376,7 @@ form.inline { .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); } .icinga-controls input[type="checkbox"]:checked + .toggle-switch .toggle-slider:before { diff --git a/public/css/icinga/layout.less b/public/css/icinga/layout.less index 661164796..cc962f74a 100644 --- a/public/css/icinga/layout.less +++ b/public/css/icinga/layout.less @@ -20,7 +20,7 @@ #guest-error-message { .fadein(); - color: @body-bg-color; + .var(color, body-bg-color); font-size: 2em; } @@ -81,7 +81,7 @@ } #layout { - background-color: @body-bg-color; + .var(background-color, body-bg-color); color: @text-color; font-family: @font-family; } @@ -208,7 +208,7 @@ display: block; line-height: 2.5em; border-left: .5em solid @gray-light; - background: @body-bg-color; + .var(background, body-bg-color); margin-bottom: 1px; box-shadow: 0 0 1em 0 rgba(0,0,0,0.25); @@ -225,10 +225,10 @@ &.error { border-color: @color-down; background: @color-down; - color: @body-bg-color; + .var(color, body-bg-color); .icon { - color: @body-bg-color; + .var(color, body-bg-color); } } @@ -251,10 +251,10 @@ &.warning { border-color: @color-warning; background: @color-warning; - color: @body-bg-color; + .var(color, body-bg-color); .icon { - color: @body-bg-color; + .var(color, body-bg-color); } } } diff --git a/public/css/icinga/main.less b/public/css/icinga/main.less index cef87bb92..208effc85 100644 --- a/public/css/icinga/main.less +++ b/public/css/icinga/main.less @@ -324,7 +324,8 @@ a:hover > .icon-cancel { content: ""; display: block; height: 2em; - background: linear-gradient(fade(@body-bg-color, 0), @body-bg-color); + background: linear-gradient(transparent, @body-bg-color); + background: linear-gradient(transparent, var(--body-bg-color, @body-bg-color)); position: absolute; bottom: 0; left: 0; @@ -337,7 +338,8 @@ a:hover > .icon-cancel { &:after { opacity: 0; - background: linear-gradient(fade(@body-bg-color, 0), @body-bg-color); + background: linear-gradient(transparent, @body-bg-color); + background: linear-gradient(transparent, var(--body-bg-color, @body-bg-color)); } } diff --git a/public/css/icinga/menu.less b/public/css/icinga/menu.less index a93b39bac..f8007c021 100644 --- a/public/css/icinga/menu.less +++ b/public/css/icinga/menu.less @@ -123,7 +123,7 @@ position: absolute; right: -.75em; - background-color: @body-bg-color; + .var(background-color, body-bg-color); box-shadow: 0 0 1em 0 rgba(0,0,0,0.6); content: ""; display: block; @@ -154,7 +154,7 @@ &.active:after { .transform(rotate(45deg)); - background-color: @body-bg-color; + .var(background-color, body-bg-color); box-shadow: 0 0 1em 0 rgba(0,0,0,.6); content: ""; display: block; @@ -252,7 +252,7 @@ &:after { .transform(rotate(45deg)); - background-color: @body-bg-color; + .var(background-color, body-bg-color); border-bottom: 1px solid @gray-light; border-left: 1px solid @gray-light; content: ""; @@ -350,7 +350,7 @@ li { display: block; a, button[type="submit"] { - background-color: @body-bg-color; + .var(background-color, body-bg-color); border: none; left: -999px; padding: @vertical-padding @horizontal-padding; @@ -461,7 +461,7 @@ input[type=text].search-input { z-index: 3; i { - background-color: @body-bg-color; + .var(background-color, body-bg-color); border-radius: .25em 0 0 .25em; font-size: 1.125em; width: 2em; diff --git a/public/css/icinga/mixins.less b/public/css/icinga/mixins.less index afda5a6e6..512844681 100644 --- a/public/css/icinga/mixins.less +++ b/public/css/icinga/mixins.less @@ -6,9 +6,10 @@ box-shadow: @arguments; } -.button(@background-color: @body-bg-color, @border-font-color: @icinga-blue, @color-dark: darken(@border-font-color, 10%)) { +.button(@background-color: ~"var(--body-bg-color, @{body-bg-color})", @border-font-color: @icinga-blue, @color-dark: darken(@border-font-color, 10%)) { .rounded-corners(3px); + background-color: extract-variable-default(@background-color); background-color: @background-color; border: 2px solid @border-font-color; color: @border-font-color; @@ -25,6 +26,7 @@ &:hover, &.btn-primary { background-color: @border-font-color; + color: extract-variable-default(@background-color); color: @background-color; } @@ -32,6 +34,7 @@ &.btn-primary:hover { background-color: @color-dark; border-color: @color-dark; + color: extract-variable-default(@background-color); color: @background-color; } diff --git a/public/css/icinga/modal.less b/public/css/icinga/modal.less index 5b2be5014..726c7398a 100644 --- a/public/css/icinga/modal.less +++ b/public/css/icinga/modal.less @@ -102,7 +102,7 @@ align-items: stretch; flex-direction: column; - background-color: @body-bg-color; + .var(background-color, body-bg-color); border-radius: .5em; box-shadow: 0 0 2em 0 rgba(0, 0, 0, .6); flex: 1; diff --git a/public/css/icinga/tabs.less b/public/css/icinga/tabs.less index 36f021241..b23b78b72 100644 --- a/public/css/icinga/tabs.less +++ b/public/css/icinga/tabs.less @@ -31,13 +31,13 @@ &:hover { text-decoration: none; - background: fade(@body-bg-color, 50%); + .var(background, tab-hover-bg-color); } } &.active > a, > a:focus { - background-color: @body-bg-color; + .var(background-color, body-bg-color); color: @text-color; } } @@ -55,7 +55,7 @@ .tabs > li > .close-container-control:hover, .tabs > li > .refresh-container-control:focus, .tabs > li > .refresh-container-control:hover { - background-color: @body-bg-color; + .var(background-color, body-bg-color); color: @text-color; text-decoration: none; } @@ -64,7 +64,7 @@ .box-shadow(); .rounded-corners(0 0 0.3em 0.3em); - background-color: @body-bg-color; + .var(background-color, body-bg-color); border: 1px solid @gray-light; border-top: none; margin-left: -1px; diff --git a/public/css/icinga/widgets.less b/public/css/icinga/widgets.less index a6dd6a367..b1ce79cb7 100644 --- a/public/css/icinga/widgets.less +++ b/public/css/icinga/widgets.less @@ -1,7 +1,7 @@ /*! Icinga Web 2 | (c) 2014 Icinga Development Team | GPLv2+ */ #announcements > ul { - background-color: @body-bg-color; + .var(background-color, body-bg-color); list-style: none; margin: 0; padding: 0; @@ -458,7 +458,7 @@ ul.tree li a.error:hover { position: relative; .flyover-content { - background-color: @body-bg-color; + .var(background-color, body-bg-color); border: 1px solid @gray-lighter; box-shadow: 0 0 .5em 0 rgba(0, 0, 0, 0.2); position: absolute; @@ -467,7 +467,7 @@ ul.tree li a.error:hover { } &.flyover-arrow-top .flyover-content:before { - background: @body-bg-color; + .var(background, body-bg-color); border-left: 1px solid @gray-lighter; border-top: 1px solid @gray-lighter; content: ""; diff --git a/public/css/themes/icinga-light-theme.less b/public/css/themes/icinga-light-theme.less index 505d3880a..a65b84855 100644 --- a/public/css/themes/icinga-light-theme.less +++ b/public/css/themes/icinga-light-theme.less @@ -7,7 +7,6 @@ @text-color: #535353; -@body-bg-color: #F5F9FA; @menu-bg-color: #DEECF1; @menu-color: #676767; From 05acbd0a3f63dad533e22fac20f050ede1fdc89f Mon Sep 17 00:00:00 2001 From: Johannes Meyer Date: Wed, 23 Jun 2021 11:15:35 +0200 Subject: [PATCH 04/21] Integrate light theme's `@menu-bg-color` using a media query --- public/css/icinga/base.less | 6 ++++++ public/css/icinga/layout.less | 6 +++--- public/css/icinga/login.less | 2 +- public/css/icinga/menu.less | 8 ++++---- public/css/icinga/tabs.less | 2 +- public/css/themes/icinga-light-theme.less | 2 -- 6 files changed, 15 insertions(+), 11 deletions(-) diff --git a/public/css/icinga/base.less b/public/css/icinga/base.less index 2da48ccdc..14eeaead3 100644 --- a/public/css/icinga/base.less +++ b/public/css/icinga/base.less @@ -60,6 +60,8 @@ // Menu colors @menu-bg-color: #06062B; +@menu-hover-bg-color: fade(@menu-bg-color, 50%); +@menu-search-hover-bg-color: darken(@menu-bg-color, 20%); @menu-active-bg-color: #181742; @menu-color: #DBDBDB; @menu-active-color: @text-color; @@ -104,6 +106,10 @@ --text-color-on-icinga-blue: #F5F9FA; --menu-flyout-bg-color: #F5F9FA; --tab-hover-bg-color: fade(#F5F9FA, 50%); + + --menu-bg-color: #DEECF1; + --menu-hover-bg-color: fade(#DEECF1, 50%); + --menu-search-hover-bg-color: darken(#DEECF1, 20%); } } diff --git a/public/css/icinga/layout.less b/public/css/icinga/layout.less index cc962f74a..d94fa9fe2 100644 --- a/public/css/icinga/layout.less +++ b/public/css/icinga/layout.less @@ -32,7 +32,7 @@ } #header-logo-container { - background: @menu-bg-color; + .var(background, menu-bg-color); height: 6em; padding: 1.25em; width: 16em; @@ -141,7 +141,7 @@ // Mobile menu #layout.minimal-layout #sidebar { - background-color: @menu-bg-color; + .var(background-color, menu-bg-color); } #mobile-menu-toggle { @@ -332,7 +332,7 @@ } #search:focus { - background-color: @menu-bg-color; + .var(background-color, menu-bg-color); border-radius: 0 .25em .25em 0; box-shadow: 0 0 .25em 0 rgba(0, 0, 0, .2); color: @menu-color; diff --git a/public/css/icinga/login.less b/public/css/icinga/login.less index f57f080d3..0b3e10c39 100644 --- a/public/css/icinga/login.less +++ b/public/css/icinga/login.less @@ -4,7 +4,7 @@ #login { height: 100%; - background-color: @menu-bg-color; + .var(background-color, menu-bg-color); background-repeat: no-repeat; background-position: center center; text-align: center; diff --git a/public/css/icinga/menu.less b/public/css/icinga/menu.less index f8007c021..fe7192dab 100644 --- a/public/css/icinga/menu.less +++ b/public/css/icinga/menu.less @@ -10,7 +10,7 @@ @icon-width: 1.7em; // 1.5em width + 0.2em right margin #menu { - background-color: @menu-bg-color; + .var(background-color, menu-bg-color); width: 100%; flex: 1; overflow: auto; @@ -92,7 +92,7 @@ &:not(.selected) > a:hover, &:not(.selected) > a:focus { - background-color: fade(@menu-bg-color, 50%) + .var(background-color, menu-hover-bg-color); } // Balance icon weight for non active menu items @@ -222,7 +222,7 @@ &:hover, &:focus { - background-color: darken(@menu-bg-color, 20); + .var(background-color, menu-search-hover-bg-color); } } @@ -402,7 +402,7 @@ &:focus, &:hover { - background-color: darken(@menu-bg-color, 20); + .var(background-color, menu-search-hover-bg-color); outline: none; } } diff --git a/public/css/icinga/tabs.less b/public/css/icinga/tabs.less index b23b78b72..666915376 100644 --- a/public/css/icinga/tabs.less +++ b/public/css/icinga/tabs.less @@ -3,7 +3,7 @@ // Styles for tab navigation of containers .tabs { - background-color: @menu-bg-color; + .var(background-color, menu-bg-color); letter-spacing: -0.417em; } diff --git a/public/css/themes/icinga-light-theme.less b/public/css/themes/icinga-light-theme.less index a65b84855..4e60dc7da 100644 --- a/public/css/themes/icinga-light-theme.less +++ b/public/css/themes/icinga-light-theme.less @@ -7,8 +7,6 @@ @text-color: #535353; -@menu-bg-color: #DEECF1; - @menu-color: #676767; @menu-active-bg-color: #EDF7FC; From 039fdfc8af93271008c199d0cbfa2cead6133d6f Mon Sep 17 00:00:00 2001 From: Johannes Meyer Date: Wed, 23 Jun 2021 11:27:23 +0200 Subject: [PATCH 05/21] Integrate light theme's `@text-color` using a media query --- modules/doc/public/css/module.less | 3 ++- modules/monitoring/public/css/module.less | 7 ++++--- modules/monitoring/public/css/service-grid.less | 4 ++-- public/css/icinga/about.less | 4 ++-- public/css/icinga/base.less | 6 ++++++ public/css/icinga/health.less | 2 +- public/css/icinga/layout.less | 4 ++-- public/css/icinga/main.less | 2 +- public/css/icinga/setup.less | 2 +- public/css/icinga/tabs.less | 4 ++-- public/css/icinga/widgets.less | 8 ++++---- public/css/themes/icinga-light-theme.less | 2 -- 12 files changed, 27 insertions(+), 21 deletions(-) diff --git a/modules/doc/public/css/module.less b/modules/doc/public/css/module.less index fb0916db2..a027e1e86 100644 --- a/modules/doc/public/css/module.less +++ b/modules/doc/public/css/module.less @@ -28,7 +28,8 @@ pre > code { font-weight: @font-weight-bold; &:hover { - border-bottom: 1px @text-color solid; + border-bottom: 1px solid; + .var(border-bottom-color, text-color); text-decoration: none; } } diff --git a/modules/monitoring/public/css/module.less b/modules/monitoring/public/css/module.less index 56809fb77..40f735d8d 100644 --- a/modules/monitoring/public/css/module.less +++ b/modules/monitoring/public/css/module.less @@ -158,7 +158,7 @@ color: @text-color-light; > a { - color: @text-color; + .var(color, text-color); letter-spacing: normal; font-weight: bold; } @@ -401,7 +401,7 @@ div.box.stats { max-width: 50em; border: 1px solid @gray-lighter; border-left: 15px solid @gray; - color: @text-color; + .var(color, text-color); } .stats > .boxview > div.box { @@ -699,7 +699,8 @@ form.instance-features span.description, form.object-features span.description { border-bottom: 1px @gray-light dotted; &:hover { - border-bottom: 1px @text-color solid; + border-bottom: 1px solid; + .var(border-bottom-color, text-color); text-decoration: none; } } diff --git a/modules/monitoring/public/css/service-grid.less b/modules/monitoring/public/css/service-grid.less index 2501afb1f..3ab212843 100644 --- a/modules/monitoring/public/css/service-grid.less +++ b/modules/monitoring/public/css/service-grid.less @@ -33,7 +33,7 @@ font-size: 130%; a { - color: @text-color; + .var(color, text-color); outline: none; &:hover { @@ -72,4 +72,4 @@ form.filter-toggle { input[type="checkbox"]:checked ~ label { color: inherit; } -} \ No newline at end of file +} diff --git a/public/css/icinga/about.less b/public/css/icinga/about.less index de151fe97..caf24032b 100644 --- a/public/css/icinga/about.less +++ b/public/css/icinga/about.less @@ -7,7 +7,7 @@ .about-social i { font-size: 1.7em; - color: @text-color; + .var(color, text-color); } .about-social i:hover { @@ -23,7 +23,7 @@ margin: 0.5em; padding: 0; font-size: 5em; - color: @text-color; + .var(color, text-color); } .about-links i:hover { diff --git a/public/css/icinga/base.less b/public/css/icinga/base.less index 14eeaead3..81c9a1d99 100644 --- a/public/css/icinga/base.less +++ b/public/css/icinga/base.less @@ -110,6 +110,12 @@ --menu-bg-color: #DEECF1; --menu-hover-bg-color: fade(#DEECF1, 50%); --menu-search-hover-bg-color: darken(#DEECF1, 20%); + + --text-color: #535353; + --text-color-light: fade(#535353, 75%); + --link-color: #535353; + --menu-active-color: #535353; + --menu-flyout-color: #535353; } } diff --git a/public/css/icinga/health.less b/public/css/icinga/health.less index 402e63a41..b2efed065 100644 --- a/public/css/icinga/health.less +++ b/public/css/icinga/health.less @@ -5,7 +5,7 @@ color: @text-color-light; span { - color: @text-color; + .var(color, text-color); } } diff --git a/public/css/icinga/layout.less b/public/css/icinga/layout.less index d94fa9fe2..b5ffad512 100644 --- a/public/css/icinga/layout.less +++ b/public/css/icinga/layout.less @@ -82,7 +82,7 @@ #layout { .var(background-color, body-bg-color); - color: @text-color; + .var(color, text-color); font-family: @font-family; } @@ -204,7 +204,7 @@ } #notifications > li { - color: @text-color; + .var(color, text-color); display: block; line-height: 2.5em; border-left: .5em solid @gray-light; diff --git a/public/css/icinga/main.less b/public/css/icinga/main.less index 208effc85..90a0b091d 100644 --- a/public/css/icinga/main.less +++ b/public/css/icinga/main.less @@ -387,7 +387,7 @@ a:hover > .icon-cancel { > tbody > tr > th { font-weight: bold; - color: @text-color; + .var(color, text-color); } .missing { diff --git a/public/css/icinga/setup.less b/public/css/icinga/setup.less index ae985bd0c..9395c9614 100644 --- a/public/css/icinga/setup.less +++ b/public/css/icinga/setup.less @@ -376,7 +376,7 @@ form#setup_requirements { padding: 0.2em; margin: -1em -1em 1em; text-align: center; - color: @text-color; + .var(color, text-color); background-color: #f6fafa; border: 1px solid lightgrey; } diff --git a/public/css/icinga/tabs.less b/public/css/icinga/tabs.less index 666915376..0cdc1eda1 100644 --- a/public/css/icinga/tabs.less +++ b/public/css/icinga/tabs.less @@ -38,7 +38,7 @@ &.active > a, > a:focus { .var(background-color, body-bg-color); - color: @text-color; + .var(color, text-color); } } @@ -56,7 +56,7 @@ .tabs > li > .refresh-container-control:focus, .tabs > li > .refresh-container-control:hover { .var(background-color, body-bg-color); - color: @text-color; + .var(color, text-color); text-decoration: none; } diff --git a/public/css/icinga/widgets.less b/public/css/icinga/widgets.less index b1ce79cb7..88132bc30 100644 --- a/public/css/icinga/widgets.less +++ b/public/css/icinga/widgets.less @@ -202,7 +202,7 @@ table.multiselect tr[href] td { padding: .5em; border: none; background: none; - color: @text-color; + .var(color, text-color); &:hover, &:focus { color: @icinga-blue; @@ -414,7 +414,7 @@ ul.tree li a.error { } ul.tree li a:hover { - color: @text-color; + .var(color, text-color); text-decoration: underline; } @@ -561,7 +561,7 @@ ul.tree li a.error:hover { .donut-label { font-weight: bold; - fill: @text-color; + .var(fill, text-color); } .donut-label { @@ -584,7 +584,7 @@ ul.tree li a.error:hover { } .donut-label-small { - fill: @text-color; + .var(fill, text-color); font-size: 1.2em; text-anchor: middle; -moz-transform: translateY(0.35em); diff --git a/public/css/themes/icinga-light-theme.less b/public/css/themes/icinga-light-theme.less index 4e60dc7da..4f2ce5537 100644 --- a/public/css/themes/icinga-light-theme.less +++ b/public/css/themes/icinga-light-theme.less @@ -5,8 +5,6 @@ @gray-lighter: #EEEEEE; @gray-lightest: #F7F7F7; -@text-color: #535353; - @menu-color: #676767; @menu-active-bg-color: #EDF7FC; From 39983763f11ab5505f5a76ca7513063a6f67fda9 Mon Sep 17 00:00:00 2001 From: Johannes Meyer Date: Wed, 23 Jun 2021 11:29:52 +0200 Subject: [PATCH 06/21] Integrate light theme's `menu-color` using a media query --- public/css/icinga/base.less | 2 ++ public/css/icinga/layout.less | 4 ++-- public/css/icinga/menu.less | 8 ++++---- public/css/icinga/tabs.less | 2 +- public/css/themes/icinga-light-theme.less | 1 - 5 files changed, 9 insertions(+), 8 deletions(-) diff --git a/public/css/icinga/base.less b/public/css/icinga/base.less index 81c9a1d99..afe55fd94 100644 --- a/public/css/icinga/base.less +++ b/public/css/icinga/base.less @@ -107,6 +107,8 @@ --menu-flyout-bg-color: #F5F9FA; --tab-hover-bg-color: fade(#F5F9FA, 50%); + --menu-color: #676767; + --menu-bg-color: #DEECF1; --menu-hover-bg-color: fade(#DEECF1, 50%); --menu-search-hover-bg-color: darken(#DEECF1, 20%); diff --git a/public/css/icinga/layout.less b/public/css/icinga/layout.less index b5ffad512..ba3762ac1 100644 --- a/public/css/icinga/layout.less +++ b/public/css/icinga/layout.less @@ -145,7 +145,7 @@ } #mobile-menu-toggle { - color: @menu-color; + .var(color, menu-color); text-align: right; > button { @@ -335,7 +335,7 @@ .var(background-color, menu-bg-color); border-radius: 0 .25em .25em 0; box-shadow: 0 0 .25em 0 rgba(0, 0, 0, .2); - color: @menu-color; + .var(color, menu-color); width: 20em; position: fixed; z-index: 1; diff --git a/public/css/icinga/menu.less b/public/css/icinga/menu.less index fe7192dab..4e7e826ac 100644 --- a/public/css/icinga/menu.less +++ b/public/css/icinga/menu.less @@ -65,7 +65,7 @@ #menu .nav-level-1 > .nav-item { line-height: 2.167em; // 26 px - color: @menu-color; + .var(color, menu-color); &.active { color: @menu-active-color; @@ -210,7 +210,7 @@ background: transparent url('../img/icons/search_white.png') no-repeat 1em center; background-size: 1em auto; border: none; - color: @menu-color; + .var(color, menu-color); line-height: 2.167em; padding: .25em; padding-left: @icon-width + .75em; @@ -281,7 +281,7 @@ } &.active > a { - color: @menu-color; + .var(color, menu-color); } // Hide activity caret when displayed as flyout @@ -390,7 +390,7 @@ .search-reset { background: none; border: 0; - color: @menu-color; + .var(color, menu-color); cursor: pointer; display: none; height: 100%; diff --git a/public/css/icinga/tabs.less b/public/css/icinga/tabs.less index 0cdc1eda1..080caa47a 100644 --- a/public/css/icinga/tabs.less +++ b/public/css/icinga/tabs.less @@ -27,7 +27,7 @@ } > a { - color: @menu-color; + .var(color, menu-color); &:hover { text-decoration: none; diff --git a/public/css/themes/icinga-light-theme.less b/public/css/themes/icinga-light-theme.less index 4f2ce5537..8be4f4257 100644 --- a/public/css/themes/icinga-light-theme.less +++ b/public/css/themes/icinga-light-theme.less @@ -5,7 +5,6 @@ @gray-lighter: #EEEEEE; @gray-lightest: #F7F7F7; -@menu-color: #676767; @menu-active-bg-color: #EDF7FC; @menu-2ndlvl-color: #7E8182; From ff4dafe091f0fd6a2c99be84c16215be2b1ca9fb Mon Sep 17 00:00:00 2001 From: Johannes Meyer Date: Wed, 23 Jun 2021 11:36:00 +0200 Subject: [PATCH 07/21] Integrate light theme's `menu-active-bg-color` using a media query --- public/css/icinga/base.less | 4 +++- public/css/icinga/menu.less | 8 ++++---- public/css/themes/icinga-light-theme.less | 2 -- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/public/css/icinga/base.less b/public/css/icinga/base.less index afe55fd94..b113f699e 100644 --- a/public/css/icinga/base.less +++ b/public/css/icinga/base.less @@ -63,6 +63,7 @@ @menu-hover-bg-color: fade(@menu-bg-color, 50%); @menu-search-hover-bg-color: darken(@menu-bg-color, 20%); @menu-active-bg-color: #181742; +@menu-active-hover-bg-color: darken(@menu-active-bg-color, 20%); @menu-color: #DBDBDB; @menu-active-color: @text-color; @menu-highlight-color: @icinga-blue; @@ -108,10 +109,11 @@ --tab-hover-bg-color: fade(#F5F9FA, 50%); --menu-color: #676767; - --menu-bg-color: #DEECF1; --menu-hover-bg-color: fade(#DEECF1, 50%); --menu-search-hover-bg-color: darken(#DEECF1, 20%); + --menu-active-bg-color: #EDF7FC; + --menu-active-hover-bg-color: darken(#EDF7FC, 20%); --text-color: #535353; --text-color-light: fade(#535353, 75%); diff --git a/public/css/icinga/menu.less b/public/css/icinga/menu.less index 4e7e826ac..887e21350 100644 --- a/public/css/icinga/menu.less +++ b/public/css/icinga/menu.less @@ -74,7 +74,7 @@ display: none; } - background-color: @menu-active-bg-color; + .var(background-color, menu-active-bg-color); } &.no-icon > a { @@ -87,7 +87,7 @@ &.active:not(.selected) > a:focus, &.active:not(.selected) > a:hover { - background-color: darken(@menu-active-bg-color, 20); + .var(background-color, menu-active-hover-bg-color); } &:not(.selected) > a:hover, @@ -217,7 +217,7 @@ width: 100%; &.active { - background-color: @menu-active-bg-color; + .var(background-color, menu-active-bg-color); } &:hover, @@ -384,7 +384,7 @@ } .search-input:focus ~ .search-reset:hover { - background-color: darken(@menu-active-bg-color, 20); + .var(background-color, menu-active-hover-bg-color); } .search-reset { diff --git a/public/css/themes/icinga-light-theme.less b/public/css/themes/icinga-light-theme.less index 8be4f4257..9dfe5fe88 100644 --- a/public/css/themes/icinga-light-theme.less +++ b/public/css/themes/icinga-light-theme.less @@ -5,8 +5,6 @@ @gray-lighter: #EEEEEE; @gray-lightest: #F7F7F7; -@menu-active-bg-color: #EDF7FC; - @menu-2ndlvl-color: #7E8182; @low-sat-blue: #DEECF1; From 8bb50b372507429b495ce0465849aae805121435 Mon Sep 17 00:00:00 2001 From: Johannes Meyer Date: Wed, 23 Jun 2021 11:37:10 +0200 Subject: [PATCH 08/21] Integrate light theme's `menu-2ndlvl-color` using a media query --- public/css/icinga/base.less | 1 + public/css/icinga/menu.less | 2 +- public/css/themes/icinga-light-theme.less | 2 -- 3 files changed, 2 insertions(+), 3 deletions(-) diff --git a/public/css/icinga/base.less b/public/css/icinga/base.less index b113f699e..8d4c8b9ce 100644 --- a/public/css/icinga/base.less +++ b/public/css/icinga/base.less @@ -114,6 +114,7 @@ --menu-search-hover-bg-color: darken(#DEECF1, 20%); --menu-active-bg-color: #EDF7FC; --menu-active-hover-bg-color: darken(#EDF7FC, 20%); + --menu-2ndlvl-color: #7E8182; --text-color: #535353; --text-color-light: fade(#535353, 75%); diff --git a/public/css/icinga/menu.less b/public/css/icinga/menu.less index 887e21350..44273e547 100644 --- a/public/css/icinga/menu.less +++ b/public/css/icinga/menu.less @@ -139,7 +139,7 @@ line-height: 1.833em; // 22px > a { - color: @menu-2ndlvl-color; + .var(color, menu-2ndlvl-color); font-size: @font-size-small; padding: 0.364em 0.545em 0.364em (@icon-width + .75em)/@font-size-small; } diff --git a/public/css/themes/icinga-light-theme.less b/public/css/themes/icinga-light-theme.less index 9dfe5fe88..2ed450f34 100644 --- a/public/css/themes/icinga-light-theme.less +++ b/public/css/themes/icinga-light-theme.less @@ -5,7 +5,5 @@ @gray-lighter: #EEEEEE; @gray-lightest: #F7F7F7; -@menu-2ndlvl-color: #7E8182; - @low-sat-blue: #DEECF1; @low-sat-blue-dark: #c0cccd; From 02c0a9b1517b705c6eaa00b91dfcb6ad0b4b0395 Mon Sep 17 00:00:00 2001 From: Johannes Meyer Date: Wed, 23 Jun 2021 11:42:00 +0200 Subject: [PATCH 09/21] Integrate light theme's `low-sat-blue` using a media query --- public/css/icinga/audit.less | 3 ++- public/css/icinga/base.less | 2 ++ public/css/icinga/forms.less | 10 ++++++---- public/css/icinga/main.less | 2 +- public/css/themes/icinga-light-theme.less | 1 - 5 files changed, 11 insertions(+), 7 deletions(-) diff --git a/public/css/icinga/audit.less b/public/css/icinga/audit.less index 422e9c800..d41a68ecf 100644 --- a/public/css/icinga/audit.less +++ b/public/css/icinga/audit.less @@ -5,7 +5,8 @@ li { .rounded-corners(3px); - border: 1px solid @low-sat-blue; + border: 1px solid; + .var(border-color, low-sat-blue); &.active { border-color: @icinga-blue; diff --git a/public/css/icinga/base.less b/public/css/icinga/base.less index 8d4c8b9ce..6aae5530b 100644 --- a/public/css/icinga/base.less +++ b/public/css/icinga/base.less @@ -121,6 +121,8 @@ --link-color: #535353; --menu-active-color: #535353; --menu-flyout-color: #535353; + + --low-sat-blue: #DEECF1; } } diff --git a/public/css/icinga/forms.less b/public/css/icinga/forms.less index af3c9a250..79fb3fd3b 100644 --- a/public/css/icinga/forms.less +++ b/public/css/icinga/forms.less @@ -148,7 +148,7 @@ form.icinga-form .control-group .toggle-switch ~ .control-info { input[type="time"], textarea, select { - background-color: @low-sat-blue; + .var(background-color, low-sat-blue); } } @@ -338,8 +338,9 @@ form.inline { top: 0; display: inline-block; - background: @low-sat-blue; - border: 1px solid @low-sat-blue; + .var(background, low-sat-blue); + border: 1px solid; + .var(border-color, low-sat-blue); box-sizing: content-box; border-radius: 1em; height: 4/3em; @@ -354,7 +355,8 @@ form.inline { background: @text-color-inverted; border-radius: 1em; - border: 1px solid @low-sat-blue; + border: 1px solid; + .var(border-color, low-sat-blue); box-sizing: border-box; content: ""; display: block; diff --git a/public/css/icinga/main.less b/public/css/icinga/main.less index 90a0b091d..823b36de0 100644 --- a/public/css/icinga/main.less +++ b/public/css/icinga/main.less @@ -89,7 +89,7 @@ a:hover > .icon-cancel { .action-link(); .rounded-corners(3px); - background: @low-sat-blue; + .var(background, low-sat-blue); display: inline-block; padding: 0.25em 0.5em; diff --git a/public/css/themes/icinga-light-theme.less b/public/css/themes/icinga-light-theme.less index 2ed450f34..b3825b641 100644 --- a/public/css/themes/icinga-light-theme.less +++ b/public/css/themes/icinga-light-theme.less @@ -5,5 +5,4 @@ @gray-lighter: #EEEEEE; @gray-lightest: #F7F7F7; -@low-sat-blue: #DEECF1; @low-sat-blue-dark: #c0cccd; From 78aef14c9fdd6d7548eb2e83f5034c64cb7d735d Mon Sep 17 00:00:00 2001 From: Johannes Meyer Date: Wed, 23 Jun 2021 11:42:59 +0200 Subject: [PATCH 10/21] Integrate light theme's `low-sat-blue-dark` using a media query --- public/css/icinga/base.less | 1 + public/css/icinga/main.less | 2 +- public/css/themes/icinga-light-theme.less | 2 -- 3 files changed, 2 insertions(+), 3 deletions(-) diff --git a/public/css/icinga/base.less b/public/css/icinga/base.less index 6aae5530b..268de8866 100644 --- a/public/css/icinga/base.less +++ b/public/css/icinga/base.less @@ -123,6 +123,7 @@ --menu-flyout-color: #535353; --low-sat-blue: #DEECF1; + --low-sat-blue-dark: #c0cccd; } } diff --git a/public/css/icinga/main.less b/public/css/icinga/main.less index 823b36de0..9ef2b7603 100644 --- a/public/css/icinga/main.less +++ b/public/css/icinga/main.less @@ -94,7 +94,7 @@ a:hover > .icon-cancel { padding: 0.25em 0.5em; &:hover { - background: @low-sat-blue-dark; + .var(background, low-sat-blue-dark); text-decoration: none; } } diff --git a/public/css/themes/icinga-light-theme.less b/public/css/themes/icinga-light-theme.less index b3825b641..fa978f2f0 100644 --- a/public/css/themes/icinga-light-theme.less +++ b/public/css/themes/icinga-light-theme.less @@ -4,5 +4,3 @@ @gray-light: #C9C9C9; @gray-lighter: #EEEEEE; @gray-lightest: #F7F7F7; - -@low-sat-blue-dark: #c0cccd; From d82577c0e0e4f70fad4434bb9207351bbd2e55e6 Mon Sep 17 00:00:00 2001 From: Johannes Meyer Date: Wed, 23 Jun 2021 11:49:20 +0200 Subject: [PATCH 11/21] Integrate light theme's `gray` using a media query --- modules/monitoring/public/css/module.less | 20 +++++++++++++------- public/css/icinga/badges.less | 2 +- public/css/icinga/base.less | 2 ++ public/css/icinga/forms.less | 8 ++++---- public/css/icinga/main.less | 2 +- public/css/icinga/mixins.less | 5 ++++- public/css/icinga/modal.less | 2 +- public/css/icinga/widgets.less | 2 +- 8 files changed, 27 insertions(+), 16 deletions(-) diff --git a/modules/monitoring/public/css/module.less b/modules/monitoring/public/css/module.less index 40f735d8d..2b7ac465d 100644 --- a/modules/monitoring/public/css/module.less +++ b/modules/monitoring/public/css/module.less @@ -286,7 +286,8 @@ div.box.ok_hosts div.box.entry, div.box.problem_hosts div.box.entry { div.box.monitoringfeatures { border: 1px solid @gray-lighter; - border-left: 15px solid @gray; + border-left: 15px solid; + .var(border-left-color, "gray"); } div.box.monitoringfeatures div.box-separator { @@ -303,7 +304,8 @@ div.box.monitoringfeatures a.feature-highlight { div.box.hostservicechecks { border: 1px solid @gray-lighter; - border-left: 15px solid @gray; + border-left: 15px solid; + .var(border-left-color, "gray"); } div.box.hostservicechecks th { @@ -316,7 +318,8 @@ div.box.process { width: 100%; max-width: 50em; border: 1px solid @gray-lighter; - border-left: 15px solid @gray; + border-left: 15px solid; + .var(border-left-color, "gray"); margin-bottom: 1em; margin-right: 1em; } @@ -374,7 +377,8 @@ div.box.features { width: 100%; max-width: 50em; border: 1px solid @gray-lighter; - border-left: 15px solid @gray; + border-left: 15px solid; + .var(border-left-color, "gray"); } .features div.box.header { @@ -400,7 +404,8 @@ div.box.stats { width: 100%; max-width: 50em; border: 1px solid @gray-lighter; - border-left: 15px solid @gray; + border-left: 15px solid; + .var(border-left-color, "gray"); .var(color, text-color); } @@ -414,7 +419,7 @@ div.box.stats { } .stats > table > thead { - color: @gray; + .var(color, "gray"); } .stats > h2 { @@ -440,7 +445,8 @@ div.timeline-legend { padding: 0.5em; margin-top: 2em; border: 1px solid @gray-lighter; - border-left: 15px solid @gray; + border-left: 15px solid; + .var(border-left-color, "gray"); h2 { margin: 0; diff --git a/public/css/icinga/badges.less b/public/css/icinga/badges.less index 436a3bc2e..020f6176f 100644 --- a/public/css/icinga/badges.less +++ b/public/css/icinga/badges.less @@ -8,7 +8,7 @@ .bg-stateful(); .rounded-corners(); - background-color: @gray; + .var(background-color, "gray"); .var(color, badge-color); display: inline-block; font-family: @font-family-wide; diff --git a/public/css/icinga/base.less b/public/css/icinga/base.less index 268de8866..03620c662 100644 --- a/public/css/icinga/base.less +++ b/public/css/icinga/base.less @@ -124,6 +124,8 @@ --low-sat-blue: #DEECF1; --low-sat-blue-dark: #c0cccd; + + --gray: #7F7F7F; } } diff --git a/public/css/icinga/forms.less b/public/css/icinga/forms.less index 79fb3fd3b..993edcf8b 100644 --- a/public/css/icinga/forms.less +++ b/public/css/icinga/forms.less @@ -295,13 +295,13 @@ form.icinga-form .form-controls { } input[type="submit"].btn-cancel { - .button(~"var(--body-bg-color, @{body-bg-color})", @gray, @black); + .button(~"var(--body-bg-color, @{body-bg-color})", ~"var(--gray, @{gray})", @black); } button.noscript-apply { - color: @gray; + .var(color, "gray"); background-color: @gray-lightest; - border-color: @gray; + .var(border-color, "gray"); border-width: 1px; } } @@ -461,7 +461,7 @@ form.icinga-form { } .form-description { - background-color: fade(@gray, 5%); + .var(background-color, "gray"); } .errors { diff --git a/public/css/icinga/main.less b/public/css/icinga/main.less index 9ef2b7603..eb19f4240 100644 --- a/public/css/icinga/main.less +++ b/public/css/icinga/main.less @@ -275,7 +275,7 @@ a:hover > .icon-cancel { margin-right: .25em; background: @gray-lighter; - color: @gray; + .var(color, "gray"); border: none; -webkit-box-shadow: 0 0 1/3em rgba(0,0,0,.3); -moz-box-shadow: 0 0 1/3em rgba(0,0,0,.3); diff --git a/public/css/icinga/mixins.less b/public/css/icinga/mixins.less index 512844681..e9c4c657b 100644 --- a/public/css/icinga/mixins.less +++ b/public/css/icinga/mixins.less @@ -6,12 +6,14 @@ box-shadow: @arguments; } -.button(@background-color: ~"var(--body-bg-color, @{body-bg-color})", @border-font-color: @icinga-blue, @color-dark: darken(@border-font-color, 10%)) { +.button(@background-color: ~"var(--body-bg-color, @{body-bg-color})", @border-font-color: @icinga-blue, @color-dark: darken(@icinga-blue, 10%)) { .rounded-corners(3px); background-color: extract-variable-default(@background-color); background-color: @background-color; + border: extract-variable-default(2px solid @border-font-color); border: 2px solid @border-font-color; + color: extract-variable-default(@border-font-color); color: @border-font-color; cursor: pointer; line-height: normal; @@ -25,6 +27,7 @@ &:focus, &:hover, &.btn-primary { + background-color: extract-variable-default(@border-font-color); background-color: @border-font-color; color: extract-variable-default(@background-color); color: @background-color; diff --git a/public/css/icinga/modal.less b/public/css/icinga/modal.less index 726c7398a..db06855ba 100644 --- a/public/css/icinga/modal.less +++ b/public/css/icinga/modal.less @@ -64,7 +64,7 @@ top: .75em; right: .75em; - background-color: @gray; + .var(background-color, "gray"); border: none; border-radius: 50%; color: @text-color-inverted; diff --git a/public/css/icinga/widgets.less b/public/css/icinga/widgets.less index 88132bc30..7e5f8f45c 100644 --- a/public/css/icinga/widgets.less +++ b/public/css/icinga/widgets.less @@ -404,7 +404,7 @@ ul.tree li a { line-height: 2em; padding: 0 .5em; text-decoration: none; - color: @gray; + .var(color, "gray"); background-repeat: no-repeat; background-position: 0.8em 0.4em; } From 62979c31f0124e85a8c250c4a0501d03fe6a42e9 Mon Sep 17 00:00:00 2001 From: Johannes Meyer Date: Wed, 23 Jun 2021 11:50:14 +0200 Subject: [PATCH 12/21] Integrate light theme's `gray-semilight` using a media query --- public/css/icinga/base.less | 1 + public/css/icinga/setup.less | 3 ++- public/css/themes/icinga-light-theme.less | 1 - 3 files changed, 3 insertions(+), 2 deletions(-) diff --git a/public/css/icinga/base.less b/public/css/icinga/base.less index 03620c662..d21297a81 100644 --- a/public/css/icinga/base.less +++ b/public/css/icinga/base.less @@ -126,6 +126,7 @@ --low-sat-blue-dark: #c0cccd; --gray: #7F7F7F; + --gray-semilight: #A9A9A9; } } diff --git a/public/css/icinga/setup.less b/public/css/icinga/setup.less index 9395c9614..f149e5047 100644 --- a/public/css/icinga/setup.less +++ b/public/css/icinga/setup.less @@ -421,7 +421,8 @@ form#setup_requirements { height: 15em; margin: 1em; padding: 0.3em; - border: 1px solid @gray-semilight; + border: 1px solid; + .var(border-color, gray-semilight); background-color: @gray-lightest; .header { diff --git a/public/css/themes/icinga-light-theme.less b/public/css/themes/icinga-light-theme.less index fa978f2f0..8229b6da5 100644 --- a/public/css/themes/icinga-light-theme.less +++ b/public/css/themes/icinga-light-theme.less @@ -1,5 +1,4 @@ -@gray: #7F7F7F; @gray-semilight: #A9A9A9; @gray-light: #C9C9C9; @gray-lighter: #EEEEEE; From b7f42e52dce086b2c80a8ca186be62b2b09606ff Mon Sep 17 00:00:00 2001 From: Johannes Meyer Date: Wed, 23 Jun 2021 11:56:56 +0200 Subject: [PATCH 13/21] Integrate light theme's `gray-light` using a media query --- modules/doc/public/css/module.less | 3 ++- modules/monitoring/public/css/module.less | 9 +++++---- modules/monitoring/public/css/service-grid.less | 4 ++-- public/css/icinga/audit.less | 8 +++++--- public/css/icinga/base.less | 1 + public/css/icinga/forms.less | 9 +++++---- public/css/icinga/health.less | 3 ++- public/css/icinga/layout.less | 3 ++- public/css/icinga/main.less | 5 +++-- public/css/icinga/menu.less | 17 ++++++++++------- public/css/icinga/tabs.less | 3 ++- public/css/icinga/widgets.less | 11 ++++++----- public/css/themes/icinga-light-theme.less | 2 -- 13 files changed, 45 insertions(+), 33 deletions(-) diff --git a/modules/doc/public/css/module.less b/modules/doc/public/css/module.less index a027e1e86..8f239333b 100644 --- a/modules/doc/public/css/module.less +++ b/modules/doc/public/css/module.less @@ -24,7 +24,8 @@ pre > code { } .chapter a { - border-bottom: 1px @gray-light dotted; + border-bottom: 1px dotted; + .var(border-bottom-color, gray-light); font-weight: @font-weight-bold; &:hover { diff --git a/modules/monitoring/public/css/module.less b/modules/monitoring/public/css/module.less index 2b7ac465d..d5ff66dc1 100644 --- a/modules/monitoring/public/css/module.less +++ b/modules/monitoring/public/css/module.less @@ -35,7 +35,7 @@ } &.-inactive { - color: @gray-light; + .var(color, gray-light); } } } @@ -70,7 +70,7 @@ color: white; } .group-grid-cell > div.state-none { - background-color: @gray-light; + .var(background-color, gray-light); } } @@ -651,7 +651,7 @@ form.instance-features span.description, form.object-features span.description { & + span.hint { margin: .35em; - color: @gray-light; + .var(color, gray-light); font-style: italic; } } @@ -702,7 +702,8 @@ form.instance-features span.description, form.object-features span.description { .markdown, .plugin-output { a { - border-bottom: 1px @gray-light dotted; + border-bottom: 1px dotted; + .var(border-bottom-color, gray-light); &:hover { border-bottom: 1px solid; diff --git a/modules/monitoring/public/css/service-grid.less b/modules/monitoring/public/css/service-grid.less index 3ab212843..c3f86bb8f 100644 --- a/modules/monitoring/public/css/service-grid.less +++ b/modules/monitoring/public/css/service-grid.less @@ -5,7 +5,7 @@ white-space: nowrap; td { - color: @gray-light; + .var(color, gray-light); padding: 0.2em; text-align: center; width: 1em; @@ -66,7 +66,7 @@ form.filter-toggle { display: inline-block; vertical-align: top; margin-left: .5em; - color: @gray-light; + .var(color, gray-light); } input[type="checkbox"]:checked ~ label { diff --git a/public/css/icinga/audit.less b/public/css/icinga/audit.less index d41a68ecf..734017a12 100644 --- a/public/css/icinga/audit.less +++ b/public/css/icinga/audit.less @@ -20,7 +20,8 @@ } h3 { - border-bottom: 1px solid @gray-light; + border-bottom: 1px solid; + .var(border-bottom-color, gray-light); } h3 em, @@ -36,7 +37,7 @@ } .icon { - color: @gray-light; + .var(color, gray-light); &.granted { color: @color-granted; @@ -59,7 +60,8 @@ &:hover .spacer { .transition(opacity .25s .25s ease-in); - border: 0 dashed @gray-light; + border: 0 dashed; + .var(border-color, gray-light); border-top-width: .2em; opacity: 1; } diff --git a/public/css/icinga/base.less b/public/css/icinga/base.less index d21297a81..eb49ff512 100644 --- a/public/css/icinga/base.less +++ b/public/css/icinga/base.less @@ -127,6 +127,7 @@ --gray: #7F7F7F; --gray-semilight: #A9A9A9; + --gray-light: #C9C9C9; } } diff --git a/public/css/icinga/forms.less b/public/css/icinga/forms.less index 993edcf8b..12d40258d 100644 --- a/public/css/icinga/forms.less +++ b/public/css/icinga/forms.less @@ -110,7 +110,8 @@ form.icinga-form.inline .control-label-group { margin: 0; padding: 0; border: none; - border-top: 1px solid @gray-light; + border-top: 1px solid; + .var(border-top-color, gray-light); legend, .description { margin-left: .7em; @@ -393,12 +394,12 @@ form.inline { cursor: default; & > .toggle-slider { - background-color: @gray-light; - border-color: @gray-light; + .var(background-color, gray-light); + .var(border-color, gray-light); &:before { background-color: @gray-lighter; - border-color: @gray-light; + .var(border-color, gray-light); } } } diff --git a/public/css/icinga/health.less b/public/css/icinga/health.less index b2efed065..41681a97a 100644 --- a/public/css/icinga/health.less +++ b/public/css/icinga/health.less @@ -36,7 +36,8 @@ } tr:not(:last-child) td { - border: 0 solid @gray-light; + border: 0 solid; + .var(border-color, gray-light); border-bottom-width: 1px; } diff --git a/public/css/icinga/layout.less b/public/css/icinga/layout.less index ba3762ac1..63f788a2a 100644 --- a/public/css/icinga/layout.less +++ b/public/css/icinga/layout.less @@ -207,7 +207,8 @@ .var(color, text-color); display: block; line-height: 2.5em; - border-left: .5em solid @gray-light; + border-left: .5em solid; + .var(border-left-color, gray-light); .var(background, body-bg-color); margin-bottom: 1px; box-shadow: 0 0 1em 0 rgba(0,0,0,0.25); diff --git a/public/css/icinga/main.less b/public/css/icinga/main.less index eb19f4240..efb8464e5 100644 --- a/public/css/icinga/main.less +++ b/public/css/icinga/main.less @@ -162,7 +162,8 @@ a:hover > .icon-cancel { } thead { - border-bottom: 1px solid @gray-light; + border-bottom: 1px solid; + .var(border-bottom-color, gray-light); } tbody tr { @@ -282,7 +283,7 @@ a:hover > .icon-cancel { box-shadow: 0 0 1/3em rgba(0,0,0,.3); &:hover { - background: @gray-light; + .var(background, gray-light); } } diff --git a/public/css/icinga/menu.less b/public/css/icinga/menu.less index 44273e547..4355bffd0 100644 --- a/public/css/icinga/menu.less +++ b/public/css/icinga/menu.less @@ -241,7 +241,8 @@ #layout:not(.minimal-layout) #menu .nav-level-1 > .nav-item:not(.active).hover { > .nav-level-2 { background-color: @menu-flyout-bg-color; - border: 1px solid @gray-light; + border: 1px solid; + .var(border-color, gray-light); border-radius: .25em; box-shadow: 0 0 1em 0 rgba(0,0,0,.3); padding: @vertical-padding 0; @@ -253,8 +254,10 @@ .transform(rotate(45deg)); .var(background-color, body-bg-color); - border-bottom: 1px solid @gray-light; - border-left: 1px solid @gray-light; + border-bottom: 1px solid; + .var(border-bottom-color, gray-light); + border-left: 1px solid; + .var(border-left-color, gray-light); content: ""; display: block; height: 1.1em; @@ -415,19 +418,19 @@ input[type=text].search-input { } .search-input:focus:-moz-placeholder { // FF 18- - color: @gray-light; + .var(color, gray-light); } .search-input:focus::-moz-placeholder { // FF 19+ - color: @gray-light; + .var(color, gray-light); } .search-input:focus:-ms-input-placeholder { - color: @gray-light; + .var(color, gray-light); } .search-input:focus::-webkit-input-placeholder { - color: @gray-light; + .var(color, gray-light); } .search-input ~ .search-reset { diff --git a/public/css/icinga/tabs.less b/public/css/icinga/tabs.less index 080caa47a..a2cea3852 100644 --- a/public/css/icinga/tabs.less +++ b/public/css/icinga/tabs.less @@ -65,7 +65,8 @@ .rounded-corners(0 0 0.3em 0.3em); .var(background-color, body-bg-color); - border: 1px solid @gray-light; + border: 1px solid; + .var(border-color, gray-light); border-top: none; margin-left: -1px; min-width: 14em; diff --git a/public/css/icinga/widgets.less b/public/css/icinga/widgets.less index 7e5f8f45c..42df27a72 100644 --- a/public/css/icinga/widgets.less +++ b/public/css/icinga/widgets.less @@ -286,7 +286,8 @@ form.role-form { } .collapsible-control { - border-bottom: 1px solid @gray-light; + border-bottom: 1px solid; + .var(border-bottom-color, gray-light); cursor: pointer; -webkit-touch-callout: none; -webkit-user-select: none; @@ -362,7 +363,7 @@ ul.tree li::before, ul.tree li::after { position: absolute; right: auto; left: -0.2em; - border-color: @gray-light; + .var(border-color, gray-light); border-style: dotted; border-width: 0; } @@ -543,8 +544,8 @@ ul.tree li a.error:hover { } .slice-state-not-checked { - stroke: @gray-light; - background: @gray-light; + .var(stroke, gray-light); + .var(background, gray-light); } .donut { @@ -570,7 +571,7 @@ ul.tree li a.error:hover { } .donut-label-big { - color: @gray-light; + .var(color, gray-light); font-size: 6em; line-height: 0; text-anchor: middle; diff --git a/public/css/themes/icinga-light-theme.less b/public/css/themes/icinga-light-theme.less index 8229b6da5..2a4a1d552 100644 --- a/public/css/themes/icinga-light-theme.less +++ b/public/css/themes/icinga-light-theme.less @@ -1,5 +1,3 @@ -@gray-semilight: #A9A9A9; -@gray-light: #C9C9C9; @gray-lighter: #EEEEEE; @gray-lightest: #F7F7F7; From 49f905af06865f1ab5d2ea30f12d740af231e9a9 Mon Sep 17 00:00:00 2001 From: Johannes Meyer Date: Wed, 23 Jun 2021 12:52:56 +0200 Subject: [PATCH 14/21] Integrate light theme's `gray-lighter` using a media query --- modules/doc/public/css/module.less | 9 ++++- modules/monitoring/public/css/module.less | 41 +++++++++++++++-------- public/css/icinga/audit.less | 8 +++-- public/css/icinga/base.less | 7 ++-- public/css/icinga/controls.less | 2 +- public/css/icinga/forms.less | 4 +-- public/css/icinga/main.less | 5 +-- public/css/icinga/responsive.less | 6 ++-- public/css/icinga/tabs.less | 2 +- public/css/icinga/widgets.less | 12 ++++--- public/css/themes/icinga-light-theme.less | 1 - 11 files changed, 64 insertions(+), 33 deletions(-) diff --git a/modules/doc/public/css/module.less b/modules/doc/public/css/module.less index 8f239333b..c8c8c553c 100644 --- a/modules/doc/public/css/module.less +++ b/modules/doc/public/css/module.less @@ -2,13 +2,20 @@ // Mixins -.gradient(@a: @gray-lighter; @b: @gray-lightest) { +.gradient(@a: ~"var(--gray-lighter, @{gray-lighter})"; @b: @gray-lightest) { + background: extract-variable-default(@a); background: @a; + background: -webkit-gradient(linear, left top, left bottom, from(extract-variable-default(@a, true)), to(extract-variable-default(@b, true))); background: -webkit-gradient(linear, left top, left bottom, from(@a), to(@b)); + background: -webkit-linear-gradient(top, extract-variable-default(@a, true), extract-variable-default(@b, true)); background: -webkit-linear-gradient(top, @a, @b); + background: -moz-linear-gradient(top, extract-variable-default(@a, true), extract-variable-default(@b, true)); background: -moz-linear-gradient(top, @a, @b); + background: -ms-linear-gradient(top, extract-variable-default(@a, true), extract-variable-default(@b, true)); background: -ms-linear-gradient(top, @a, @b); + background: -o-linear-gradient(top, extract-variable-default(@a, true), extract-variable-default(@b, true)); background: -o-linear-gradient(top, @a, @b); + background: linear-gradient(to bottom, extract-variable-default(@a, true), extract-variable-default(@b, true)); background: linear-gradient(to bottom, @a, @b); } diff --git a/modules/monitoring/public/css/module.less b/modules/monitoring/public/css/module.less index d5ff66dc1..574e44389 100644 --- a/modules/monitoring/public/css/module.less +++ b/modules/monitoring/public/css/module.less @@ -3,7 +3,8 @@ .monitoring-statusbar { position: relative; .var(background-color, body-bg-color); - border-top: 1px solid @gray-lighter; + border-top: 1px solid; + .var(border-top-color, gray-lighter); padding: .25em @gutter; line-height: 1.3; @@ -195,7 +196,7 @@ padding: .25em .5em; &:hover { - background-color: @gray-lighter; + .var(background-color, gray-lighter); text-decoration: none; } } @@ -285,7 +286,8 @@ div.box.ok_hosts div.box.entry, div.box.problem_hosts div.box.entry { } div.box.monitoringfeatures { - border: 1px solid @gray-lighter; + border: 1px solid; + .var(border-color, gray-lighter); border-left: 15px solid; .var(border-left-color, "gray"); } @@ -303,7 +305,8 @@ div.box.monitoringfeatures a.feature-highlight { } div.box.hostservicechecks { - border: 1px solid @gray-lighter; + border: 1px solid; + .var(border-color, gray-lighter); border-left: 15px solid; .var(border-left-color, "gray"); } @@ -317,7 +320,8 @@ div.box.hostservicechecks th { div.box.process { width: 100%; max-width: 50em; - border: 1px solid @gray-lighter; + border: 1px solid; + .var(border-color, gray-lighter); border-left: 15px solid; .var(border-left-color, "gray"); margin-bottom: 1em; @@ -326,7 +330,8 @@ div.box.process { .process div.box.header { min-height: 5em; - border-bottom:1px solid @gray-lighter; + border-bottom:1px solid; + .var(border-bottom-color, gray-lighter); } .process > .boxview > div.box { @@ -337,7 +342,8 @@ div.box.process { margin-top: 0; margin-bottom: 1em; padding-bottom: 1em; - border-bottom:1px solid @gray-lighter; + border-bottom:1px solid; + .var(border-bottom-color, gray-lighter); } .process th { @@ -376,14 +382,16 @@ div.backend-not-running { div.box.features { width: 100%; max-width: 50em; - border: 1px solid @gray-lighter; + border: 1px solid; + .var(border-color, gray-lighter); border-left: 15px solid; .var(border-left-color, "gray"); } .features div.box.header { min-height: 5em; - border-bottom:1px solid @gray-lighter; + border-bottom: 1px solid; + .var(border-bottom-color, gray-lighter); } .features > .boxview > div.box { @@ -394,7 +402,8 @@ div.box.features { margin-top: 0; margin-bottom: 1em; padding-bottom: 1em; - border-bottom:1px solid @gray-lighter; + border-bottom: 1px solid; + .var(border-bottom-color, gray-lighter); } @@ -403,7 +412,8 @@ div.box.features { div.box.stats { width: 100%; max-width: 50em; - border: 1px solid @gray-lighter; + border: 1px solid; + .var(border-color, gray-lighter); border-left: 15px solid; .var(border-left-color, "gray"); .var(color, text-color); @@ -424,7 +434,8 @@ div.box.stats { .stats > h2 { text-align: left; - border-bottom: 1px solid @gray-lighter; + border-bottom: 1px solid; + .var(border-bottom-color, gray-lighter); > .hosts-summary, > .services-summary { @@ -444,7 +455,8 @@ div.box.stats { div.timeline-legend { padding: 0.5em; margin-top: 2em; - border: 1px solid @gray-lighter; + border: 1px solid; + .var(border-color, gray-lighter); border-left: 15px solid; .var(border-left-color, "gray"); @@ -658,7 +670,8 @@ form.instance-features span.description, form.object-features span.description { } .plugin-output { - border-left: 5px solid @gray-lighter; + border-left: 5px solid; + .var(border-left-color, gray-lighter); padding: 0.66em 0.33em; .state-critical { diff --git a/public/css/icinga/audit.less b/public/css/icinga/audit.less index 734017a12..6763237da 100644 --- a/public/css/icinga/audit.less +++ b/public/css/icinga/audit.less @@ -81,7 +81,8 @@ } .connector { - border: 0 solid @gray-lighter; + border: 0 solid; + .var(border-color, gray-lighter); border-bottom-width: 2px; &.granted { @@ -100,7 +101,8 @@ .role { .rounded-corners(1em); - border: 2px solid @gray-lighter; + border: 2px solid; + .var(border-color, gray-lighter); &.granted { border: 2px solid @color-granted; @@ -113,7 +115,7 @@ .restriction { font-family: @font-family-fixed; - background-color: @gray-lighter; + .var(background-color, gray-lighter); } } diff --git a/public/css/icinga/base.less b/public/css/icinga/base.less index eb49ff512..f86576a97 100644 --- a/public/css/icinga/base.less +++ b/public/css/icinga/base.less @@ -128,6 +128,7 @@ --gray: #7F7F7F; --gray-semilight: #A9A9A9; --gray-light: #C9C9C9; + --gray-lighter: #EEEEEE; } } @@ -164,7 +165,8 @@ blockquote, p, pre { } blockquote { - border-left: 5px solid @gray-lighter; + border-left: 5px solid; + .var(border-left-color, gray-lighter); padding: 0.667em 0.333em; } @@ -174,7 +176,8 @@ h1, h2, h3, h4, h5, h6 { } h1 { - border-bottom: 1px solid @gray-lighter; + border-bottom: 1px solid; + .var(border-bottom-color, gray-lighter); font-size: 1.333em; } diff --git a/public/css/icinga/controls.less b/public/css/icinga/controls.less index 549d31c76..1d6ce8d62 100644 --- a/public/css/icinga/controls.less +++ b/public/css/icinga/controls.less @@ -130,7 +130,7 @@ input.search { padding: 0.5em; } > a:hover { - background-color: @gray-lighter; + .var(background-color, gray-lighter); text-decoration: none; } } diff --git a/public/css/icinga/forms.less b/public/css/icinga/forms.less index 12d40258d..a6bdd4cb3 100644 --- a/public/css/icinga/forms.less +++ b/public/css/icinga/forms.less @@ -398,7 +398,7 @@ form.inline { .var(border-color, gray-light); &:before { - background-color: @gray-lighter; + .var(background-color, gray-lighter); .var(border-color, gray-light); } } @@ -411,7 +411,7 @@ form.icinga-form .control-group.disabled .control-label-group { .icinga-controls { input[disabled], select[disabled] { - background: @gray-lighter; + .var(background-color, gray-lighter); border-color: transparent; } } diff --git a/public/css/icinga/main.less b/public/css/icinga/main.less index efb8464e5..b5d6d1d3d 100644 --- a/public/css/icinga/main.less +++ b/public/css/icinga/main.less @@ -105,7 +105,8 @@ a:hover > .icon-cancel { margin: 0; > dt { - border-bottom: 1px solid @gray-lighter; + border-bottom: 1px solid; + .var(border-bottom-color, gray-lighter); margin-bottom: 0.25em; &:hover { @@ -275,7 +276,7 @@ a:hover > .icon-cancel { margin-top: -1em; margin-right: .25em; - background: @gray-lighter; + .var(background, gray-lighter); .var(color, "gray"); border: none; -webkit-box-shadow: 0 0 1/3em rgba(0,0,0,.3); diff --git a/public/css/icinga/responsive.less b/public/css/icinga/responsive.less index 6bb7580e5..1597cb1a8 100644 --- a/public/css/icinga/responsive.less +++ b/public/css/icinga/responsive.less @@ -140,7 +140,8 @@ // Columns #layout.twocols #col2 { - border-left: 1px solid @gray-lighter; + border-left: 1px solid; + .var(border-left-color, gray-lighter); } #layout.twocols.wide-layout #col2 { @@ -158,7 +159,8 @@ } #layout.twocols #col2 { - border-left: 1px solid @gray-lighter; + border-left: 1px solid; + .var(border-left-color, gray-lighter); &:empty { display: flex; diff --git a/public/css/icinga/tabs.less b/public/css/icinga/tabs.less index a2cea3852..8cb03bfe1 100644 --- a/public/css/icinga/tabs.less +++ b/public/css/icinga/tabs.less @@ -74,7 +74,7 @@ } .tabs > .dropdown-nav-item > ul > li:hover > a { - background-color: @gray-lighter; + .var(background-color, gray-lighter); text-decoration: none; } diff --git a/public/css/icinga/widgets.less b/public/css/icinga/widgets.less index 42df27a72..5fddc53f5 100644 --- a/public/css/icinga/widgets.less +++ b/public/css/icinga/widgets.less @@ -7,7 +7,8 @@ padding: 0; > li { - border-bottom: 1px solid @gray-lighter; + border-bottom: 1px solid; + .var(border-bottom-color, gray-lighter); line-height: 1.5em; padding: 0.5em 1em 0.5em 3em; @@ -460,7 +461,8 @@ ul.tree li a.error:hover { .flyover-content { .var(background-color, body-bg-color); - border: 1px solid @gray-lighter; + border: 1px solid; + .var(border-color, gray-lighter); box-shadow: 0 0 .5em 0 rgba(0, 0, 0, 0.2); position: absolute; padding: @vertical-padding @horizontal-padding; @@ -469,8 +471,10 @@ ul.tree li a.error:hover { &.flyover-arrow-top .flyover-content:before { .var(background, body-bg-color); - border-left: 1px solid @gray-lighter; - border-top: 1px solid @gray-lighter; + border-left: 1px solid; + .var(border-left-color, gray-lighter); + border-top: 1px solid; + .var(border-top-color, gray-lighter); content: ""; height: 1em; -ms-transform: rotate(45deg); diff --git a/public/css/themes/icinga-light-theme.less b/public/css/themes/icinga-light-theme.less index 2a4a1d552..040804ee1 100644 --- a/public/css/themes/icinga-light-theme.less +++ b/public/css/themes/icinga-light-theme.less @@ -1,3 +1,2 @@ -@gray-lighter: #EEEEEE; @gray-lightest: #F7F7F7; From 608499c4cd25e60cc2cd15e09f4a05316ba6ec6e Mon Sep 17 00:00:00 2001 From: Johannes Meyer Date: Wed, 23 Jun 2021 12:56:13 +0200 Subject: [PATCH 15/21] Integrate light theme's `gray-lightest` using a media query --- modules/doc/public/css/module.less | 2 +- public/css/icinga/base.less | 3 ++- public/css/icinga/forms.less | 2 +- public/css/icinga/main.less | 5 +++-- public/css/icinga/setup.less | 2 +- public/css/icinga/widgets.less | 2 +- public/css/themes/icinga-light-theme.less | 2 -- 7 files changed, 9 insertions(+), 9 deletions(-) delete mode 100644 public/css/themes/icinga-light-theme.less diff --git a/modules/doc/public/css/module.less b/modules/doc/public/css/module.less index c8c8c553c..c3e7e22b9 100644 --- a/modules/doc/public/css/module.less +++ b/modules/doc/public/css/module.less @@ -2,7 +2,7 @@ // Mixins -.gradient(@a: ~"var(--gray-lighter, @{gray-lighter})"; @b: @gray-lightest) { +.gradient(@a: ~"var(--gray-lighter, @{gray-lighter})"; @b: ~"var(--gray-lightest, @{gray-lightest})") { background: extract-variable-default(@a); background: @a; background: -webkit-gradient(linear, left top, left bottom, from(extract-variable-default(@a, true)), to(extract-variable-default(@b, true))); diff --git a/public/css/icinga/base.less b/public/css/icinga/base.less index f86576a97..3ca87a49e 100644 --- a/public/css/icinga/base.less +++ b/public/css/icinga/base.less @@ -129,6 +129,7 @@ --gray-semilight: #A9A9A9; --gray-light: #C9C9C9; --gray-lighter: #EEEEEE; + --gray-lightest: #F7F7F7; } } @@ -203,7 +204,7 @@ h6 { } pre { - background-color: @gray-lightest; + .var(background-color, gray-lightest); font-family: @font-family-fixed; font-size: @font-size-small; padding: @vertical-padding @horizontal-padding; diff --git a/public/css/icinga/forms.less b/public/css/icinga/forms.less index a6bdd4cb3..7518b13a5 100644 --- a/public/css/icinga/forms.less +++ b/public/css/icinga/forms.less @@ -301,7 +301,7 @@ form.icinga-form .form-controls { button.noscript-apply { .var(color, "gray"); - background-color: @gray-lightest; + .var(background-color, gray-lightest); .var(border-color, "gray"); border-width: 1px; } diff --git a/public/css/icinga/main.less b/public/css/icinga/main.less index b5d6d1d3d..ed2cb3132 100644 --- a/public/css/icinga/main.less +++ b/public/css/icinga/main.less @@ -110,7 +110,7 @@ a:hover > .icon-cancel { margin-bottom: 0.25em; &:hover { - background-color: @gray-lightest; + .var(background-color, gray-lightest); > .remove-action { visibility: visible; @@ -168,7 +168,8 @@ a:hover > .icon-cancel { } tbody tr { - border-bottom: 1px solid @gray-lightest; + border-bottom: 1px solid; + .var(border-bottom-color, gray-lightest); border-left: 5px solid transparent; &:last-child { diff --git a/public/css/icinga/setup.less b/public/css/icinga/setup.less index f149e5047..e4e3bdafc 100644 --- a/public/css/icinga/setup.less +++ b/public/css/icinga/setup.less @@ -423,7 +423,7 @@ form#setup_requirements { padding: 0.3em; border: 1px solid; .var(border-color, gray-semilight); - background-color: @gray-lightest; + .var(background-color, gray-lightest); .header { height: 2.5em; diff --git a/public/css/icinga/widgets.less b/public/css/icinga/widgets.less index 5fddc53f5..2dcd2e797 100644 --- a/public/css/icinga/widgets.less +++ b/public/css/icinga/widgets.less @@ -196,7 +196,7 @@ table.multiselect tr[href] td { } ul.tree li.active { - background-color: @gray-lightest; + .var(background-color, gray-lightest); } button { diff --git a/public/css/themes/icinga-light-theme.less b/public/css/themes/icinga-light-theme.less deleted file mode 100644 index 040804ee1..000000000 --- a/public/css/themes/icinga-light-theme.less +++ /dev/null @@ -1,2 +0,0 @@ - -@gray-lightest: #F7F7F7; From ac45a51ffb00d2321e01adf6c40b1cd1088b958e Mon Sep 17 00:00:00 2001 From: Johannes Meyer Date: Wed, 23 Jun 2021 14:25:57 +0200 Subject: [PATCH 16/21] css: Respect `--text-color-inverted` --- modules/monitoring/public/css/module.less | 4 ++-- modules/monitoring/public/css/tables.less | 8 ++++---- public/css/icinga/forms.less | 2 +- public/css/icinga/login.less | 2 +- public/css/icinga/menu.less | 8 ++++---- public/css/icinga/modal.less | 2 +- 6 files changed, 13 insertions(+), 13 deletions(-) diff --git a/modules/monitoring/public/css/module.less b/modules/monitoring/public/css/module.less index 574e44389..7b0920cd2 100644 --- a/modules/monitoring/public/css/module.less +++ b/modules/monitoring/public/css/module.less @@ -255,7 +255,7 @@ .tactical div.box.header { margin: 10px; min-height: 8em; - color: @text-color-inverted; + .var(color, text-color-inverted); font-size: @font-size-dashboard; } @@ -478,7 +478,7 @@ div.timeline-legend { font-weight: @font-weight-bold; font-size: 11px; text-align: center; - color: @text-color-inverted; + .var(color, text-color-inverted); padding-left: 5px; padding-right: 5px; padding-top: 2px; diff --git a/modules/monitoring/public/css/tables.less b/modules/monitoring/public/css/tables.less index e851f6c88..3f83e927e 100644 --- a/modules/monitoring/public/css/tables.less +++ b/modules/monitoring/public/css/tables.less @@ -151,7 +151,7 @@ &.state-critical, &.state-down { background-color: @color-critical; - color: @text-color-inverted; + .var(color, text-color-inverted); &.handled { background-color: inherit; @@ -162,7 +162,7 @@ &.state-warning { background-color: @color-warning; - color: @text-color-inverted; + .var(color, text-color-inverted); &.handled { background-color: inherit; @@ -173,7 +173,7 @@ &.state-unknown { background-color: @color-unknown; - color: @text-color-inverted; + .var(color, text-color-inverted); &.handled { background-color: inherit; @@ -184,7 +184,7 @@ &.state-unreachable { background-color: @color-unreachable; - color: @text-color-inverted; + .var(color, text-color-inverted); &.handled { background-color: inherit; diff --git a/public/css/icinga/forms.less b/public/css/icinga/forms.less index 7518b13a5..58225b8fc 100644 --- a/public/css/icinga/forms.less +++ b/public/css/icinga/forms.less @@ -354,7 +354,7 @@ form.inline { top: 0; left: 0; - background: @text-color-inverted; + .var(background, text-color-inverted); border-radius: 1em; border: 1px solid; .var(border-color, low-sat-blue); diff --git a/public/css/icinga/login.less b/public/css/icinga/login.less index 0b3e10c39..42f52575e 100644 --- a/public/css/icinga/login.less +++ b/public/css/icinga/login.less @@ -125,7 +125,7 @@ padding: 1em; a { - color: @text-color-inverted; + .var(color, text-color-inverted); font-weight: bold; } } diff --git a/public/css/icinga/menu.less b/public/css/icinga/menu.less index 4355bffd0..faffc8a6e 100644 --- a/public/css/icinga/menu.less +++ b/public/css/icinga/menu.less @@ -110,11 +110,11 @@ #menu ul:not(.nav-level-2) > .selected > a { background-color: @menu-highlight-color; - color: @text-color-inverted; + .var(color, text-color-inverted); &:hover { - color: @text-color-inverted; + .var(color, text-color-inverted); } &:after { @@ -327,7 +327,7 @@ } a.badge { - color: @text-color-inverted; + .var(color, text-color-inverted); flex: 0 1 auto; margin-right: 1em; padding: .25em; @@ -521,7 +521,7 @@ html.no-js #toggle-sidebar { } &.badge-nav-item a.badge { - color: @text-color-inverted; + .var(color, text-color-inverted); flex: 0 1 auto; margin-right: 1em; padding: .25em; diff --git a/public/css/icinga/modal.less b/public/css/icinga/modal.less index db06855ba..2aba4867b 100644 --- a/public/css/icinga/modal.less +++ b/public/css/icinga/modal.less @@ -67,7 +67,7 @@ .var(background-color, "gray"); border: none; border-radius: 50%; - color: @text-color-inverted; + .var(color, text-color-inverted); height: 1.5em; line-height: 1em; padding: 0; From fbb137a22757b698168650e6409777a0ed3d20ae Mon Sep 17 00:00:00 2001 From: Johannes Meyer Date: Wed, 23 Jun 2021 14:27:35 +0200 Subject: [PATCH 17/21] css: Respect `--text-color-on-icinga-blue` --- modules/doc/public/css/module.less | 2 +- public/css/icinga/main.less | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/modules/doc/public/css/module.less b/modules/doc/public/css/module.less index c3e7e22b9..b5b17e533 100644 --- a/modules/doc/public/css/module.less +++ b/modules/doc/public/css/module.less @@ -50,7 +50,7 @@ pre > code { .rounded-corners(); background: @icinga-blue; - color: @text-color-on-icinga-blue; + .var(color, text-color-on-icinga-blue); padding: 0 0.3em 0 0.3em; } diff --git a/public/css/icinga/main.less b/public/css/icinga/main.less index ed2cb3132..9795840ee 100644 --- a/public/css/icinga/main.less +++ b/public/css/icinga/main.less @@ -377,7 +377,7 @@ a:hover > .icon-cancel { .module-dependencies { .unmet-dependencies { background-color: @color-warning; - color: @text-color-on-icinga-blue; + .var(color, text-color-on-icinga-blue); padding: .25em .5em; margin-left: -.5em; } From 638cc5c683ca9723af23aa7f0d50425e0938db5a Mon Sep 17 00:00:00 2001 From: Johannes Meyer Date: Wed, 23 Jun 2021 14:28:30 +0200 Subject: [PATCH 18/21] css: Respect `--menu-flyout-bg-color` --- public/css/icinga/menu.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/css/icinga/menu.less b/public/css/icinga/menu.less index faffc8a6e..0cd009c2f 100644 --- a/public/css/icinga/menu.less +++ b/public/css/icinga/menu.less @@ -240,7 +240,7 @@ #layout:not(.minimal-layout).sidebar-collapsed #menu .nav-level-1 > .nav-item.hover, #layout:not(.minimal-layout) #menu .nav-level-1 > .nav-item:not(.active).hover { > .nav-level-2 { - background-color: @menu-flyout-bg-color; + .var(background-color, menu-flyout-bg-color); border: 1px solid; .var(border-color, gray-light); border-radius: .25em; From e3dbd01e8695b3a32f5234952ba4feb568c522e2 Mon Sep 17 00:00:00 2001 From: Johannes Meyer Date: Wed, 23 Jun 2021 14:42:21 +0200 Subject: [PATCH 19/21] css: Respect `--text-color-light` --- modules/monitoring/public/css/module.less | 4 ++-- modules/monitoring/public/css/service-grid.less | 2 +- modules/monitoring/public/css/tables.less | 11 ++++++----- public/css/icinga/audit.less | 2 +- public/css/icinga/forms.less | 2 +- public/css/icinga/health.less | 4 ++-- public/css/icinga/main.less | 8 ++++---- public/css/icinga/menu.less | 2 +- public/css/icinga/widgets.less | 6 +++--- 9 files changed, 21 insertions(+), 20 deletions(-) diff --git a/modules/monitoring/public/css/module.less b/modules/monitoring/public/css/module.less index 7b0920cd2..b8cecd4ad 100644 --- a/modules/monitoring/public/css/module.less +++ b/modules/monitoring/public/css/module.less @@ -156,7 +156,7 @@ } .service-on { - color: @text-color-light; + .var(color, text-color-light); > a { .var(color, text-color); @@ -624,7 +624,7 @@ form.instance-features span.description, form.object-features span.description { text-align: left; margin-right: 0; width: @name-value-table-name-width; - color: @text-color-light; + .var(color, text-color-light); label { font-size: inherit; diff --git a/modules/monitoring/public/css/service-grid.less b/modules/monitoring/public/css/service-grid.less index c3f86bb8f..35a544e7d 100644 --- a/modules/monitoring/public/css/service-grid.less +++ b/modules/monitoring/public/css/service-grid.less @@ -37,7 +37,7 @@ outline: none; &:hover { - color: @text-color-light; + .var(color, text-color-light); } &:focus, &:active { color: @icinga-blue; diff --git a/modules/monitoring/public/css/tables.less b/modules/monitoring/public/css/tables.less index 3f83e927e..1f7f6feea 100644 --- a/modules/monitoring/public/css/tables.less +++ b/modules/monitoring/public/css/tables.less @@ -46,7 +46,7 @@ // Host name and IP addresses in the host and service detail view .host-meta { - color: @text-color-light; + .var(color, text-color-light); font-size: @font-size-small; } @@ -59,7 +59,7 @@ // Notification recipient in the notifications overview .notification-recipient { - color: @text-color-light; + .var(color, text-color-light); float: right; font-size: @font-size-small; } @@ -91,7 +91,7 @@ // Plugin output in overviews .overview-plugin-output { - color: @text-color-light; + .var(color, text-color-light); font-family: @font-family-fixed; font-size: @font-size-small; margin: 0; @@ -133,7 +133,7 @@ // Service description if in the service detail view .service-meta { - color: @text-color-light; + .var(color, text-color-light); font-size: @font-size-small; } @@ -195,7 +195,8 @@ // State class for history events &.state-no-state { - border-left: @border-left-width solid @text-color-light; + border-left: @border-left-width solid; + .var(border-left-color, text-color-light); } * { diff --git a/public/css/icinga/audit.less b/public/css/icinga/audit.less index 6763237da..a05ad0be5 100644 --- a/public/css/icinga/audit.less +++ b/public/css/icinga/audit.less @@ -27,7 +27,7 @@ h3 em, .previews em, .privilege-label em { - color: @text-color-light; + .var(color, text-color-light); } h3 em { font-weight: normal; diff --git a/public/css/icinga/forms.less b/public/css/icinga/forms.less index 58225b8fc..1478ae1ad 100644 --- a/public/css/icinga/forms.less +++ b/public/css/icinga/forms.less @@ -480,7 +480,7 @@ form.icinga-form { } form.icinga-form .form-info { - color: @text-color-light; + .var(color, text-color-light); font-size: @font-size-small; list-style: none; padding-left: 0; diff --git a/public/css/icinga/health.less b/public/css/icinga/health.less index 41681a97a..b673edbbc 100644 --- a/public/css/icinga/health.less +++ b/public/css/icinga/health.less @@ -2,7 +2,7 @@ .app-health { header { - color: @text-color-light; + .var(color, text-color-light); span { .var(color, text-color); @@ -42,7 +42,7 @@ } section { - color: @text-color-light; + .var(color, text-color-light); font-family: @font-family-fixed; } } diff --git a/public/css/icinga/main.less b/public/css/icinga/main.less index 9795840ee..b6bf8816e 100644 --- a/public/css/icinga/main.less +++ b/public/css/icinga/main.less @@ -128,7 +128,7 @@ a:hover > .icon-cancel { } .comment-time { - color: @text-color-light; + .var(color, text-color-light); font-size: @font-size-small; } @@ -139,7 +139,7 @@ a:hover > .icon-cancel { } > dt { - color: @text-color-light; + .var(color, text-color-light); font-size: @font-size-small; } } @@ -199,7 +199,7 @@ a:hover > .icon-cancel { } .name-value-table > tbody > tr > th { - color: @text-color-light; + .var(color, text-color-light); // Reset default font-weight font-weight: normal; padding-left: 0; @@ -385,7 +385,7 @@ a:hover > .icon-cancel { .name-value-table { > caption { font-weight: normal; - color: @text-color-light; + .var(color, text-color-light); } > tbody > tr > th { diff --git a/public/css/icinga/menu.less b/public/css/icinga/menu.less index 0cd009c2f..0c4aea3c8 100644 --- a/public/css/icinga/menu.less +++ b/public/css/icinga/menu.less @@ -457,7 +457,7 @@ input[type=text].search-input { background: none; border: none; padding: 0; - color: @text-color-light; + .var(color, text-color-light); position: absolute; bottom: 0.2em; right: 0; diff --git a/public/css/icinga/widgets.less b/public/css/icinga/widgets.less index 2dcd2e797..faa9c3e8e 100644 --- a/public/css/icinga/widgets.less +++ b/public/css/icinga/widgets.less @@ -118,7 +118,7 @@ } .link-description { - color: @text-color-light; + .var(color, text-color-light); } .link-icon { @@ -227,7 +227,7 @@ form.role-form { } .control-label-group em { - color: @text-color-light; + .var(color, text-color-light); font-style: normal; } @@ -260,7 +260,7 @@ form.role-form { h3 em { font-size: .857em; font-weight: normal; - color: @text-color-light; + .var(color, text-color-light); } h4 { From 723e3ec3620b4ab2ea42b80d5b92738bf7693c6f Mon Sep 17 00:00:00 2001 From: Johannes Meyer Date: Wed, 23 Jun 2021 14:43:53 +0200 Subject: [PATCH 20/21] css: Respect `--menu-active-color` --- public/css/icinga/menu.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/css/icinga/menu.less b/public/css/icinga/menu.less index 0c4aea3c8..6895b5f8f 100644 --- a/public/css/icinga/menu.less +++ b/public/css/icinga/menu.less @@ -68,7 +68,7 @@ .var(color, menu-color); &.active { - color: @menu-active-color; + .var(color, menu-active-color); > a > .badge { display: none; From 36034afc934f79d71ebb2c6fbb2e4137a2090221 Mon Sep 17 00:00:00 2001 From: Johannes Meyer Date: Wed, 23 Jun 2021 14:44:41 +0200 Subject: [PATCH 21/21] css: Respect `--menu-flyout-color` --- public/css/icinga/menu.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/css/icinga/menu.less b/public/css/icinga/menu.less index 6895b5f8f..a3d52aa87 100644 --- a/public/css/icinga/menu.less +++ b/public/css/icinga/menu.less @@ -273,7 +273,7 @@ position: relative; > a { - color: @menu-flyout-color; + .var(color, menu-flyout-color); padding-left: 1.5em; }