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

css: Respect `--color-*`

This commit is contained in:
Johannes Meyer 2021-06-28 11:36:12 +02:00
parent 6990e48446
commit 804fe75d55
12 changed files with 127 additions and 113 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
modules/monitoring/public/css/module.less
View File

@ -264,12 +264,12 @@
}
div.box.ok_hosts.state_up {
background-color: @color-ok;
.var(background-color, color-ok);
border: 1px solid white;
}
div.box.problem_hosts.state_down {
background-color: @color-critical;
.var(background-color, color-critical);
border: 1px solid white;
}
@ -294,11 +294,11 @@ div.box.monitoringfeatures {
div.box.monitoringfeatures div.box-separator {
color: white;
background-color: @color-ok;
.var(background-color, color-ok);
}
div.box.monitoringfeatures div.feature-highlight {
background-color: @color-critical;
.var(background-color, color-critical);
}
div.box.monitoringfeatures a.feature-highlight {
@ -358,7 +358,7 @@ div.box.process {
}
div.backend-running {
background: @color-ok;
.var(background, color-ok);
color: white;
text-align: center;
margin-top: 1em;
@ -370,7 +370,7 @@ div.backend-running {
}
div.backend-not-running {
background: @color-critical;
.var(background, color-critical);
color: white;
text-align: center;
padding: 0.1em;
@ -675,37 +675,37 @@ form.instance-features span.description, form.object-features span.description {
padding: 0.66em 0.33em;
.state-critical {
background-color: @color-critical;
.var(background-color, color-critical);
.var(color, body-bg-color);
padding: 0.2em;
}
.state-ok {
background-color: @color-ok;
.var(background-color, color-ok);
.var(color, body-bg-color);
padding: 0.2em;
}
.state-unknown {
background-color: @color-unknown;
.var(background-color, color-unknown);
.var(color, body-bg-color);
padding: 0.2em;
}
.state-warning {
background-color: @color-warning;
.var(background-color, color-warning);
.var(color, body-bg-color);
padding: 0.2em;
}
.state-down {
background-color: @color-down;
.var(background-color, color-down);
.var(color, body-bg-color);
padding: 0.2em;
}
.state-up {
background-color: @color-up;
.var(background-color, color-up);
.var(color, body-bg-color);
padding: 0.2em;
}

28
modules/monitoring/public/css/tables.less
View File

@ -52,7 +52,7 @@
// Link to unhandled services in the hosts overview
.host-services-incidents {
color: @color-critical;
.var(color, color-critical);
font-family: @font-family-wide;
font-size: @font-size-small;
}
@ -141,55 +141,61 @@
.state-col {
&.state-ok,
&.state-up {
border-left: @border-left-width solid @color-ok;
border-left: @border-left-width solid;
.var(border-left-color, color-ok);
}
&.state-pending {
border-left: @border-left-width solid @color-pending;
border-left: @border-left-width solid;
.var(border-left-color, color-pending);
}
&.state-critical,
&.state-down {
background-color: @color-critical;
.var(background-color, color-critical);
.var(color, text-color-inverted);
&.handled {
background-color: inherit;
color: inherit;
border-left: @border-left-width solid @color-critical-handled;
border-left: @border-left-width solid;
.var(border-left-color, color-critical-handled);
}
}
&.state-warning {
background-color: @color-warning;
.var(background-color, color-warning);
.var(color, text-color-inverted);
&.handled {
background-color: inherit;
color: inherit;
border-left: @border-left-width solid @color-warning-handled;
border-left: @border-left-width solid;
.var(border-left-color, color-warning-handled);
}
}
&.state-unknown {
background-color: @color-unknown;
.var(background-color, color-unknown);
.var(color, text-color-inverted);
&.handled {
background-color: inherit;
color: inherit;
border-left: @border-left-width solid @color-unknown-handled;
border-left: @border-left-width solid;
.var(border-left-color, color-unknown-handled);
}
}
&.state-unreachable {
background-color: @color-unreachable;
.var(background-color, color-unreachable);
.var(color, text-color-inverted);
&.handled {
background-color: inherit;
color: inherit;
border-left: @border-left-width solid @color-unreachable-handled;
border-left: @border-left-width solid;
.var(border-left-color, color-unreachable-handled);
}
}

20
public/css/icinga/audit.less
View File

@ -40,15 +40,15 @@
.var(color, gray-light);
&.granted {
color: @color-granted;
.var(color, color-granted);
}
&.refused {
color: @color-refused;
.var(color, color-refused);
}
&.restricted {
color: @color-restricted;
.var(color, color-restricted);
}
}
@ -72,11 +72,11 @@
border-left-width: 2px;
&.granted {
border-color: @color-granted;
.var(border-color, color-granted);
}
&.refused {
border-color: @color-refused;
.var(border-color, color-refused);
}
}
@ -86,11 +86,11 @@
border-bottom-width: 2px;
&.granted {
border-color: @color-granted;
.var(border-color, color-granted);
}
&.refused {
border-color: @color-refused;
.var(border-color, color-refused);
}
&:first-child {
@ -105,11 +105,13 @@
.var(border-color, gray-lighter);
&.granted {
border: 2px solid @color-granted;
border: 2px solid;
.var(border-color, color-granted);
}
&.refused {
border: 2px solid @color-refused;
border: 2px solid;
.var(border-color, color-refused);
}
}

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

@ -21,6 +21,7 @@
@color-warning-handled: #ffcc66;
@color-critical: #ff5566;
@color-critical-handled: #ff99aa;
@color-critical-accentuated: darken(@color-critical, 10%);
@color-down: @color-critical;
@color-down-handled: @color-critical-handled;
@color-unknown: #aa44ff;
@ -75,6 +76,11 @@
@menu-flyout-color: @text-color;
@tab-hover-bg-color: fade(@body-bg-color, 50%);
// Form colors
@form-info-bg-color: fade(@color-ok, 20%);
@form-error-bg-color: fade(@color-critical, 30%);
@form-warning-bg-color: fade(@color-warning, 40%);
// Other colors
@color-granted: #59cd59;
@color-refused: #ee7373;

8
public/css/icinga/forms.less
View File

@ -292,7 +292,7 @@ form.icinga-form .form-controls {
}
input[type="submit"].btn-remove {
.button(~"var(--body-bg-color, @{body-bg-color})", @color-critical, darken(@color-critical, 10%));
.button(~"var(--body-bg-color, @{body-bg-color})", ~"var(--color-critical, @{color-critical})", ~"var(--color-critical-accentuated, @{color-critical-accentuated})");
}
input[type="submit"].btn-cancel {
@ -449,15 +449,15 @@ form.icinga-form {
.form-notifications {
&.info {
background-color: fade(@color-ok, 20%);
.var(background-color, form-info-bg-color);
}
&.error {
background-color: fade(@color-critical, 30%);
.var(background-color, form-error-bg-color);
}
&.warning {
background-color: fade(@color-warning, 40%);
.var(background-color, form-warning-bg-color);
}
}

8
public/css/icinga/health.less
View File

@ -11,19 +11,19 @@
span {
&.state-ok {
background-color: @color-ok;
.var(background-color, color-ok);
}
&.state-warning {
background-color: @color-warning;
.var(background-color, color-warning);
}
&.state-critical {
background-color: @color-critical;
.var(background-color, color-critical);
}
&.state-unknown {
background-color: @color-unknown;
.var(background-color, color-unknown);
}
}

16
public/css/icinga/layout.less
View File

@ -224,8 +224,8 @@
}
&.error {
border-color: @color-down;
background: @color-down;
.var(border-color, color-down);
.var(background, color-down);
.var(color, body-bg-color);
.icon {
@ -234,24 +234,24 @@
}
&.info {
border-color: @color-pending;
.var(border-color, color-pending);
.icon {
color: @color-pending;
.var(color, color-pending);
}
}
&.success {
border-color: @color-ok;
.var(border-color, color-ok);
.icon {
color: @color-ok;
.var(color, color-ok);
}
}
&.warning {
border-color: @color-warning;
background: @color-warning;
.var(border-color, color-warning);
.var(background, color-warning);
.var(color, body-bg-color);
.icon {

4
public/css/icinga/login.less
View File

@ -56,7 +56,7 @@
}
.errors {
background-color: @color-critical;
.var(background-color, color-critical);
color: white;
}
@ -118,7 +118,7 @@
}
.config-note {
background-color: @color-critical;
.var(background-color, color-critical);
margin: 0 auto 2em auto; // Center horizontally w/ bottom margin
max-width: 50%;
min-width: 24em;

6
public/css/icinga/main.less
View File

@ -76,7 +76,7 @@
}
a:hover > .icon-cancel {
color: @color-critical;
.var(color, color-critical);
}
.icon-stateful {
@ -376,7 +376,7 @@ a:hover > .icon-cancel {
.module-dependencies {
.unmet-dependencies {
background-color: @color-warning;
.var(background-color, color-warning);
.var(color, text-color-on-icinga-blue);
padding: .25em .5em;
margin-left: -.5em;
@ -394,7 +394,7 @@ a:hover > .icon-cancel {
}
.missing {
color: @color-critical;
.var(color, color-critical);
font-weight: bold;
}
}

52
public/css/icinga/mixins.less
View File

@ -146,86 +146,86 @@
// Mixin for stateful foreground colors, e.g. text or icons
.fg-stateful {
&.state-ok {
color: @color-ok;
.var(color, color-ok);
}
&.state-up {
color: @color-up;
.var(color, color-up);
}
&.state-warning {
color: @color-warning;
.var(color, color-warning);
&.handled {
color: @color-warning-handled;
.var(color, color-warning-handled);
}
}
&.state-critical {
color: @color-critical;
.var(color, color-critical);
&.handled {
color: @color-critical-handled;
.var(color, color-critical-handled);
}
}
&.state-down {
color: @color-down;
.var(color, color-down);
&.handled {
color: @color-down-handled;
.var(color, color-down-handled);
}
}
&.state-unreachable {
color: @color-unreachable;
.var(color, color-unreachable);
&.handled {
color: @color-unreachable-handled;
.var(color, color-unreachable-handled);
}
}
&.state-unknown {
color: @color-unknown;
.var(color, color-unknown);
&.handled {
color: @color-unknown-handled;
.var(color, color-unknown-handled);
}
}
&.state-pending {
color: @color-pending;
.var(color, color-pending);
}
}
// Mixin for stateful background colors
.bg-stateful {
&.state-ok {
background-color: @color-ok;
.var(background-color, color-ok);
}
&.state-up {
background-color: @color-up;
.var(background-color, color-up);
}
&.state-warning {
background-color: @color-warning;
.var(background-color, color-warning);
&.handled {
background-color: @color-warning-handled;
.var(background-color, color-warning-handled);
}
}
&.state-critical {
background-color: @color-critical;
.var(background-color, color-critical);
&.handled {
background-color: @color-critical-handled;
.var(background-color, color-critical-handled);
}
}
&.state-down {
background-color: @color-down;
.var(background-color, color-down);
&.handled {
background-color: @color-down-handled;
.var(background-color, color-down-handled);
}
}
&.state-unreachable {
background-color: @color-unreachable;
.var(background-color, color-unreachable);
&.handled {
background-color: @color-unreachable-handled;
.var(background-color, color-unreachable-handled);
}
}
&.state-unknown {
background-color: @color-unknown;
.var(background-color, color-unknown);
&.handled {
background-color: @color-unknown-handled;
.var(background-color, color-unknown-handled);
}
}
&.state-pending {
background-color: @color-pending;
.var(background-color, color-pending);
}
}

10
public/css/icinga/setup.less
View File

@ -104,7 +104,7 @@
}
&.complete {
background-color: @color-ok;
.var(background-color, color-ok);
}
&.visited {
@ -228,7 +228,7 @@ form#setup_requirements {
padding: 0.4em;
&.fulfilled {
background-color: @color-ok;
.var(background-color, color-ok);
}
&.not-available {
@ -237,7 +237,7 @@ form#setup_requirements {
}
&.missing {
background-color: @color-critical;
.var(background-color, color-critical);
}
}
}
@ -314,11 +314,11 @@ form#setup_requirements {
color: white;
&.success {
background-color: @color-ok;
.var(background-color, color-ok);
}
&.failure {
background-color: @color-critical;
.var(background-color, color-critical);
}
}

58
public/css/icinga/widgets.less
View File

@ -61,7 +61,7 @@
}
#application-state-summary > div {
background-color: @color-critical;
.var(background-color, color-critical);
color: #fff;
line-height: 1.5em;
padding: 0.5em 1em 0.5em 3em;
@ -239,15 +239,15 @@ form.role-form {
.privilege-preview .icon {
&.granted {
color: @color-granted;
.var(color, color-granted);
}
&.refused {
color: @color-refused;
.var(color, color-refused);
}
&.restricted {
color: @color-restricted;
.var(color, color-restricted);
}
}
}
@ -277,11 +277,11 @@ form.role-form {
text-align: center;
&.icon-ok {
color: @color-granted;
.var(color, color-granted);
}
&.icon-cancel {
color: @color-refused;
.var(color, color-refused);
}
}
}
@ -412,7 +412,7 @@ ul.tree li a {
}
ul.tree li a.error {
color: @color-critical-handled;
.var(color, color-critical-handled);
}
ul.tree li a:hover {
@ -421,7 +421,7 @@ ul.tree li a:hover {
}
ul.tree li a.error:hover {
color: @color-critical;
.var(color, color-critical);
}
/* charts should grow as much as possible but never beyond the current viewport's size */
@ -498,53 +498,53 @@ ul.tree li a.error:hover {
}
.slice-state-ok {
stroke: @color-ok;
background: @color-ok;
.var(stroke, color-ok);
.var(background, color-ok);
}
.slice-state-warning-handled {
stroke: @color-warning-handled;
background: @color-warning-handled;
.var(stroke, color-warning-handled);
.var(background, color-warning-handled);
}
.slice-state-warning {
stroke: @color-warning;
background: @color-unreachable-handled;
.var(stroke, color-warning);
.var(background, color-unreachable-handled);
}
.slice-state-critical-handled {
stroke: @color-critical-handled;
background: @color-critical-handled;
.var(stroke, color-critical-handled);
.var(background, color-critical-handled);
}
.slice-state-critical {
stroke: @color-critical;
background: @color-critical;
.var(stroke, color-critical);
.var(background, color-critical);
}
.slice-state-unknown-handled {
stroke: @color-unknown-handled;
background: @color-unknown-handled;
.var(stroke, color-unknown-handled);
.var(background, color-unknown-handled);
}
.slice-state-unknown {
stroke: @color-unknown;
background: @color-unknown;
.var(stroke, color-unknown);
.var(background, color-unknown);
}
.slice-state-unreachable-handled {
stroke: @color-unreachable-handled;
background: @color-unreachable-handled;
.var(stroke, color-unreachable-handled);
.var(background, color-unreachable-handled);
}
.slice-state-unreachable {
stroke: @color-unreachable;
background: @color-unreachable;
.var(stroke, color-unreachable);
.var(background, color-unreachable);
}
.slice-state-pending {
stroke: @color-pending;
background: @color-pending;
.var(stroke, color-pending);
.var(background, color-pending);
}
.slice-state-not-checked {
@ -585,7 +585,7 @@ ul.tree li a.error:hover {
}
.donut-label-big-eye-catching {
color: @color-critical;
.var(color, color-critical);
}
.donut-label-small {