Merge pull request #4673 from Icinga/bugfix/css-fix-theme-issues
css: fix theme issues
This commit is contained in:
Johannes Meyer
GitHub
commit
b15da5283a
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -24,6 +24,7 @@
|
|||
|
||||
// Icinga colors
|
||||
@low-sat-blue: #dae3e6;
|
||||
@low-sat-blue-dark: #c0cccd;
|
||||
|
||||
// Background color for <body>
|
||||
@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;
|
||||
|
|
|
|||
Loading…
Reference in New Issue