diff --git a/public/css/icinga/base.less b/public/css/icinga/base.less index 266e61dc0..ec24ed891 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; @@ -151,9 +150,46 @@ --gray-light: #d0d3da; --gray-lighter: #e8ecef; --gray-lightest: #F7F7F7; + + // ipl-web overrides + --base-gray: var(--gray); + --base-gray-light: var(--gray-light); + --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); + + --searchbar-bg: var(--low-sat-blue); + + --search-logical-operator-bg: fade(#819398, 50%); // --gray } }; +// ipl-web overrides +@default-bg: @body-bg-color; + +@base-gray: @gray; +@base-gray-light: @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: @text-color-light; + +@state-ok: @color-ok; +@state-warning: @color-warning; +@state-critical: @color-critical; +@state-pending: @color-pending; +@state-unknown: @color-unknown; + +@primary-button-hover-bg: @icinga-blue-dark; + +@searchbar-bg: @low-sat-blue; + // Make padding not affect the final computed width of an element html { box-sizing: border-box; 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; diff --git a/public/css/themes/high-contrast.less b/public/css/themes/high-contrast.less index 995127ba8..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; @@ -189,8 +190,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 +206,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; @@ -221,12 +231,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;