tyler.durden
/
icingaweb2
mirror of https://github.com/Icinga/icingaweb2.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #4673 from Icinga/bugfix/css-fix-theme-issues 

css: fix theme issues
This commit is contained in:
Johannes Meyer 2022-02-25 11:00:57 +01:00 committed by GitHub
parent 762663a3f6 e0e922efc9
commit b15da5283a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 72 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
public/css/icinga/base.less
View File

@ -13,7 +13,6 @@
@disabled-gray: #9a9a9a; @disabled-gray: #9a9a9a;
// State colors // State colors
@color-ok: #44bb77; @color-ok: #44bb77;
@color-up: @color-ok; @color-up: @color-ok;
@ -151,9 +150,46 @@
--gray-light: #d0d3da; --gray-light: #d0d3da;
--gray-lighter: #e8ecef; --gray-lighter: #e8ecef;
--gray-lightest: #F7F7F7; --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 // Make padding not affect the final computed width of an element
html { html {
box-sizing: border-box; box-sizing: border-box;

52
public/css/themes/colorblind.less
View File

@ -1,50 +1,28 @@
/*! Icinga Web 2 | (c) 2019 Icinga Development Team | GPLv2+ */ /*! Icinga Web 2 | (c) 2019 Icinga Development Team | GPLv2+ */
@color-ok: fade(#77E08E, 50%); @color-ok: fade(#77E08E, 25%);
@color-critical: #FE5566; @color-critical: #FE5566;
@color-critical-handled: fade(#FE5566, 50%); @color-critical-handled: fade(@color-critical, 33%);
@color-warning: #EAD010; @color-warning: #B0A029;
@color-warning-handled: fade(#EAD010, 50%); @color-warning-handled: fade(@color-warning, 33%);
@color-unknown: #7791E0; @color-unknown: #7791E0;
@color-unknown-handled: fade(#7791E0, 50%); @color-unknown-handled: fade(@color-unknown, 50%);
@color-unreachable: @color-unknown; @color-unreachable: @color-unknown;
@color-unreachable-handled: @color-unknown-handled; @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 */ /* Adapt font color to match handled / unhandled states */
.badge { .badge,
font-weight: 800; .state-badge {
} font-weight: bold;
color: @text-color !important;
.state-ok, &.handled,
.state-up { &.state-up,
color: @text-color; &.state-ok {
} color: fade(@text-color, 75%) !important;
.state-warning,
.state-critical,
.state-down,
.state-unknown {
&.handled {
color: @text-color;
} }
} }
.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 { .processinfo .process > div.backend-running {
color: @text-color; color: @text-color;

24
public/css/themes/high-contrast.less
View File

@ -24,6 +24,7 @@
// Icinga colors // Icinga colors
@low-sat-blue: #dae3e6; @low-sat-blue: #dae3e6;
@low-sat-blue-dark: #c0cccd;
// Background color for <body> // Background color for <body>
@body-bg-color: @white; @body-bg-color: @white;
@ -189,8 +190,7 @@
} }
} }
.icinga-controls, .icinga-controls {
.search-editor {
input:not([type="checkbox"]):not([type="radio"]), input:not([type="checkbox"]):not([type="radio"]),
.toggle-switch .toggle-slider:before, .toggle-switch .toggle-slider:before,
.toggle-switch > .toggle-slider, .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 { .icinga-module.module-icingadb .list-item.overdue {
background: none; background: none;
@ -221,12 +231,18 @@ input.search {
} }
.search-bar, .search-bar,
.button-link { .button-link,
.view-mode-switcher > label {
border: 1px solid @icinga-blue; border: 1px solid @icinga-blue;
} }
// compensate for 1px border
.filter-input-area {
padding: 1/12em !important;
}
.view-mode-switcher > label { .view-mode-switcher > label {
border: 1px solid @icinga-blue; padding: (10/16)*.25em (10/16)*.5em !important;
&:not(:first-of-type) { &:not(:first-of-type) {
border-left: none; border-left: none;