From acaab3737f25de8ab0b319713d5976dc427a2b25 Mon Sep 17 00:00:00 2001 From: Florian Strohmaier Date: Wed, 16 Feb 2022 13:32:58 +0100 Subject: [PATCH 1/8] colorblind: Optimize for new theme modes --- public/css/themes/colorblind.less | 52 +++++++++---------------------- 1 file changed, 15 insertions(+), 37 deletions(-) diff --git a/public/css/themes/colorblind.less b/public/css/themes/colorblind.less index cf92013e1..c6df58580 100644 --- a/public/css/themes/colorblind.less +++ b/public/css/themes/colorblind.less @@ -1,50 +1,28 @@ /*! Icinga Web 2 | (c) 2019 Icinga Development Team | GPLv2+ */ -@color-ok: fade(#77E08E, 50%); +@color-ok: fade(#77E08E, 25%); @color-critical: #FE5566; -@color-critical-handled: fade(#FE5566, 50%); -@color-warning: #EAD010; -@color-warning-handled: fade(#EAD010, 50%); +@color-critical-handled: fade(@color-critical, 33%); +@color-warning: #B0A029; +@color-warning-handled: fade(@color-warning, 33%); @color-unknown: #7791E0; -@color-unknown-handled: fade(#7791E0, 50%); +@color-unknown-handled: fade(@color-unknown, 50%); @color-unreachable: @color-unknown; @color-unreachable-handled: @color-unknown-handled; -@color-pending:fade(#FFFFFF, 75%); +@color-pending: fade(#FFFFFF, 75%); -/* Adapt font color to match handled / unhandled states and maintain readability with text-shadows */ -.badge { - font-weight: 800; -} +/* Adapt font color to match handled / unhandled states */ +.badge, +.state-badge { + font-weight: bold; + color: @text-color !important; -.state-ok, -.state-up { - color: @text-color; -} -.state-warning, -.state-critical, -.state-down, -.state-unknown { - &.handled { - color: @text-color; + &.handled, + &.state-up, + &.state-ok { + color: fade(@text-color, 75%) !important; } } -.state-warning, -.state-critical, -.state-down, -.state-unknown { - color: @text-color-inverted; -} -.state-warning:not(.handled) { - text-shadow: 0 0 3px mix(@text-color, @color-warning, 60); -} -.state-critical:not(.handled), -.state-down:not(.handled) { - text-shadow: 0 0 1px mix(@text-color, @color-critical, 20); -} -.state-unknown:not(.handled), -.state-unreachable:not(.handled) { - text-shadow: 0 0 1px mix(@text-color, @color-unknown, 20); -} .processinfo .process > div.backend-running { color: @text-color; From 9f6a4f47971b98f321169ad89b1eb55fb97c909c Mon Sep 17 00:00:00 2001 From: Florian Strohmaier Date: Thu, 17 Feb 2022 09:54:46 +0100 Subject: [PATCH 2/8] base.less: Set ipl-web vars --- public/css/icinga/base.less | 70 ++++++++++++++++++++++++++++++++++++- 1 file changed, 69 insertions(+), 1 deletion(-) diff --git a/public/css/icinga/base.less b/public/css/icinga/base.less index 266e61dc0..7d82b6b2e 100644 --- a/public/css/icinga/base.less +++ b/public/css/icinga/base.less @@ -13,7 +13,6 @@ @disabled-gray: #9a9a9a; - // State colors @color-ok: #44bb77; @color-up: @color-ok; @@ -154,6 +153,75 @@ } }; +// ipl-web overrides +@default-bg: @body-bg-color; + +@base-gray: @gray; +@base-gray-light: @gray-light; +@base-gray-lighter: @gray-light; +@base-disabled: @disabled-gray; + +@base-primary-color: @icinga-blue; +@base-primary-bg: @icinga-blue; + +@default-text-color: @text-color; +@default-text-color-light: fade(@default-text-color, 75%); +@default-text-color-inverted: @default-bg; + +@state-ok: @color-ok; +@state-up: @state-ok; +@state-warning: @color-warning; +@state-critical: @color-critical; +@state-down: @state-critical; +@state-pending: @color-pending; +@state-unknown: @color-unknown; + +@primary-button-color: @default-text-color-inverted; +@primary-button-bg: @base-primary-bg; +@primary-button-hover-bg: @icinga-blue-dark; + +@search-term-bg: @base-gray; +@search-term-color: @default-text-color-inverted; +@search-term-selected-bg: @base-gray-light; +@search-term-invalid-bg: @state-critical; +@search-term-invalid-color: @default-text-color-inverted; +@search-term-disabled-bg: @base-disabled; +@search-term-selected-color: @base-gray-light; +@search-term-highlighted-bg: @base-primary-bg; +@search-term-highlighted-color: @default-text-color-inverted; + +@search-condition-remove-bg: @state-critical; +@search-condition-remove-color: @default-text-color-inverted; + +@search-logical-operator-bg: @base-gray-light; +@search-logical-operator-color: @default-text-color-light; + +@searchbar-bg: @low-sat-blue; +@searchbar-scrollbar-bg: @base-gray-light; + +@search-editor-control-color: @base-gray-light; +@search-editor-logical-op-bg: @base-gray-light; +@search-editor-context-menu-border-color: @base-gray-light; +@search-editor-context-menu-bg: @default-bg; +@search-editor-drag-outline-color: @base-gray; + +@control-color: @base-primary-color; +@control-hover-bg: @base-gray-lighter; +@control-disabled-color: @base-disabled; + +@suggestions-bg: @default-bg; +@suggestions-color: @default-text-color-light; +@suggestions-focus-bg: @base-primary-bg; +@suggestions-focus-color: @default-text-color-inverted; +@suggestions-default-opt-bg: fade(@base-primary-bg, 10%); +@suggestions-default-opt-color: @default-text-color-light; +@suggestions-hover-bg: fade(@base-primary-bg, 30%); +@suggestions-border-color: @base-gray-light; +@suggestions-separation-bg: @base-gray-lighter; +@suggestions-failure-message-color: @default-text-color-light; + +@card-border-color: @base-gray-light; + // Make padding not affect the final computed width of an element html { box-sizing: border-box; From 24b6fa987bba38b84cbd20dd6058392c4acdff94 Mon Sep 17 00:00:00 2001 From: Florian Strohmaier Date: Thu, 17 Feb 2022 16:48:51 +0100 Subject: [PATCH 3/8] high-contrast.less: Compensate border with reduced padding --- public/css/themes/high-contrast.less | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/public/css/themes/high-contrast.less b/public/css/themes/high-contrast.less index 995127ba8..d2ec9aedb 100644 --- a/public/css/themes/high-contrast.less +++ b/public/css/themes/high-contrast.less @@ -221,12 +221,18 @@ input.search { } .search-bar, -.button-link { +.button-link, +.view-mode-switcher > label { border: 1px solid @icinga-blue; } +// compensate for 1px border +.filter-input-area { + padding: 1/12em !important; +} + .view-mode-switcher > label { - border: 1px solid @icinga-blue; + padding: (10/16)*.25em (10/16)*.5em !important; &:not(:first-of-type) { border-left: none; From 67e7339bfcd2a794df33cde8c692216d8b6de7a0 Mon Sep 17 00:00:00 2001 From: Florian Strohmaier Date: Wed, 23 Feb 2022 11:10:39 +0100 Subject: [PATCH 4/8] high-contrast.less: Fix search-suggestions input border --- public/css/themes/high-contrast.less | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/public/css/themes/high-contrast.less b/public/css/themes/high-contrast.less index d2ec9aedb..d74abc5a1 100644 --- a/public/css/themes/high-contrast.less +++ b/public/css/themes/high-contrast.less @@ -189,8 +189,7 @@ } } -.icinga-controls, -.search-editor { +.icinga-controls { input:not([type="checkbox"]):not([type="radio"]), .toggle-switch .toggle-slider:before, .toggle-switch > .toggle-slider, @@ -206,6 +205,16 @@ } } +.search-suggestions { + input:not([type="checkbox"]):not([type="radio"]), + .toggle-switch .toggle-slider:before, + .toggle-switch > .toggle-slider, + select, + textarea { + border: none; + } +} + .icinga-module.module-icingadb .list-item.overdue { background: none; From 3c7660536bff94871592d7f8ffb584b45866efe9 Mon Sep 17 00:00:00 2001 From: Florian Strohmaier Date: Wed, 23 Feb 2022 12:05:25 +0100 Subject: [PATCH 5/8] high-contrast.less: `@low-sat-dark` from light theme --- public/css/themes/high-contrast.less | 1 + 1 file changed, 1 insertion(+) diff --git a/public/css/themes/high-contrast.less b/public/css/themes/high-contrast.less index d74abc5a1..b22ffd5cb 100644 --- a/public/css/themes/high-contrast.less +++ b/public/css/themes/high-contrast.less @@ -24,6 +24,7 @@ // Icinga colors @low-sat-blue: #dae3e6; +@low-sat-blue-dark: #c0cccd; // Background color for @body-bg-color: @white; From c02895d3b05f383beb747820aaa9284d61b29899 Mon Sep 17 00:00:00 2001 From: Florian Strohmaier Date: Wed, 23 Feb 2022 12:06:18 +0100 Subject: [PATCH 6/8] base.less: Remove redundant ipl-web vars --- public/css/icinga/base.less | 49 ++----------------------------------- 1 file changed, 2 insertions(+), 47 deletions(-) diff --git a/public/css/icinga/base.less b/public/css/icinga/base.less index 7d82b6b2e..c391b37bc 100644 --- a/public/css/icinga/base.less +++ b/public/css/icinga/base.less @@ -158,69 +158,24 @@ @base-gray: @gray; @base-gray-light: @gray-light; -@base-gray-lighter: @gray-light; +@base-gray-lighter: @gray-lighter; @base-disabled: @disabled-gray; @base-primary-color: @icinga-blue; @base-primary-bg: @icinga-blue; @default-text-color: @text-color; -@default-text-color-light: fade(@default-text-color, 75%); -@default-text-color-inverted: @default-bg; +@default-text-color-light: @text-color-light; @state-ok: @color-ok; -@state-up: @state-ok; @state-warning: @color-warning; @state-critical: @color-critical; -@state-down: @state-critical; @state-pending: @color-pending; @state-unknown: @color-unknown; -@primary-button-color: @default-text-color-inverted; -@primary-button-bg: @base-primary-bg; @primary-button-hover-bg: @icinga-blue-dark; -@search-term-bg: @base-gray; -@search-term-color: @default-text-color-inverted; -@search-term-selected-bg: @base-gray-light; -@search-term-invalid-bg: @state-critical; -@search-term-invalid-color: @default-text-color-inverted; -@search-term-disabled-bg: @base-disabled; -@search-term-selected-color: @base-gray-light; -@search-term-highlighted-bg: @base-primary-bg; -@search-term-highlighted-color: @default-text-color-inverted; - -@search-condition-remove-bg: @state-critical; -@search-condition-remove-color: @default-text-color-inverted; - -@search-logical-operator-bg: @base-gray-light; -@search-logical-operator-color: @default-text-color-light; - @searchbar-bg: @low-sat-blue; -@searchbar-scrollbar-bg: @base-gray-light; - -@search-editor-control-color: @base-gray-light; -@search-editor-logical-op-bg: @base-gray-light; -@search-editor-context-menu-border-color: @base-gray-light; -@search-editor-context-menu-bg: @default-bg; -@search-editor-drag-outline-color: @base-gray; - -@control-color: @base-primary-color; -@control-hover-bg: @base-gray-lighter; -@control-disabled-color: @base-disabled; - -@suggestions-bg: @default-bg; -@suggestions-color: @default-text-color-light; -@suggestions-focus-bg: @base-primary-bg; -@suggestions-focus-color: @default-text-color-inverted; -@suggestions-default-opt-bg: fade(@base-primary-bg, 10%); -@suggestions-default-opt-color: @default-text-color-light; -@suggestions-hover-bg: fade(@base-primary-bg, 30%); -@suggestions-border-color: @base-gray-light; -@suggestions-separation-bg: @base-gray-lighter; -@suggestions-failure-message-color: @default-text-color-light; - -@card-border-color: @base-gray-light; // Make padding not affect the final computed width of an element html { From 6bf05b8a8be4a871c8cf242b9a4d3bb4edbd7f28 Mon Sep 17 00:00:00 2001 From: Florian Strohmaier Date: Thu, 24 Feb 2022 19:15:14 +0100 Subject: [PATCH 7/8] base.less: Add ipl-web overrides for light mode vars --- public/css/icinga/base.less | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/public/css/icinga/base.less b/public/css/icinga/base.less index c391b37bc..6369b7117 100644 --- a/public/css/icinga/base.less +++ b/public/css/icinga/base.less @@ -150,6 +150,28 @@ --gray-light: #d0d3da; --gray-lighter: #e8ecef; --gray-lightest: #F7F7F7; + + // ipl-web overrides + --base-gray: var(--gray); + --base-gray-semilight: var(--gray-semilight); + --base-gray-light: var(--gray-light); + --base-gray-lighter: var(--gray-light); + + --base-remove-bg: @color-critical; + + --default-text-color: var(--text-color); + --default-text-color-light: var(--text-color-light); + --default-text-color-inverted: var(--text-color-inverted); + + --primary-button-bg: @icinga-blue; + --primary-button-hover-bg: @icinga-blue-dark; + + --searchbar-bg: var(--low-sat-blue); + + --search-logical-operator-bg: fade(@gray, 50%); + + --suggestions-default-opt-bg: fade(@icinga-blue, 10%); + --suggestions-hover-bg: fade(@icinga-blue, 30%); } }; From e0e922efc9bc994ed0c79b03f3fb883152daeeab Mon Sep 17 00:00:00 2001 From: Johannes Meyer Date: Fri, 25 Feb 2022 10:48:03 +0100 Subject: [PATCH 8/8] base.less: Cleanup overidden ipl-web light variables --- public/css/icinga/base.less | 13 ++----------- 1 file changed, 2 insertions(+), 11 deletions(-) diff --git a/public/css/icinga/base.less b/public/css/icinga/base.less index 6369b7117..ec24ed891 100644 --- a/public/css/icinga/base.less +++ b/public/css/icinga/base.less @@ -153,25 +153,16 @@ // ipl-web overrides --base-gray: var(--gray); - --base-gray-semilight: var(--gray-semilight); --base-gray-light: var(--gray-light); - --base-gray-lighter: var(--gray-light); - - --base-remove-bg: @color-critical; + --base-gray-lighter: var(--gray-lighter); --default-text-color: var(--text-color); --default-text-color-light: var(--text-color-light); --default-text-color-inverted: var(--text-color-inverted); - --primary-button-bg: @icinga-blue; - --primary-button-hover-bg: @icinga-blue-dark; - --searchbar-bg: var(--low-sat-blue); - --search-logical-operator-bg: fade(@gray, 50%); - - --suggestions-default-opt-bg: fade(@icinga-blue, 10%); - --suggestions-hover-bg: fade(@icinga-blue, 30%); + --search-logical-operator-bg: fade(#819398, 50%); // --gray } };