tyler.durden/icingaweb2
1
0
Fork 0
mirror of https://github.com/Icinga/icingaweb2.git synced 2025-07-30 09:14:08 +02:00
Code Issues Packages Projects Releases Wiki Activity

css: Don't use .var() or var() calls explicitly

Browse Source
This commit is contained in:
Johannes Meyer 2022-02-08 12:23:37 +01:00
parent 6e034b753e
commit 7a938f6b02
21 changed files with 370 additions and 444 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
modules/doc/public/css/module.less
View File

@ -2,27 +2,20 @@
// Mixins // Mixins
.gradient(@a: ~"var(--gray-lighter, @{gray-lighter})"; @b: ~"var(--gray-lightest, @{gray-lightest})") { .gradient(@a: @gray-lighter; @b: @gray-lightest) {
background: extract-variable-default(@a);
background: @a; background: @a;
background: -webkit-gradient(linear, left top, left bottom, from(extract-variable-default(@a, true)), to(extract-variable-default(@b, true)));
background: -webkit-gradient(linear, left top, left bottom, from(@a), to(@b)); background: -webkit-gradient(linear, left top, left bottom, from(@a), to(@b));
background: -webkit-linear-gradient(top, extract-variable-default(@a, true), extract-variable-default(@b, true));
background: -webkit-linear-gradient(top, @a, @b); background: -webkit-linear-gradient(top, @a, @b);
background: -moz-linear-gradient(top, extract-variable-default(@a, true), extract-variable-default(@b, true));
background: -moz-linear-gradient(top, @a, @b); background: -moz-linear-gradient(top, @a, @b);
background: -ms-linear-gradient(top, extract-variable-default(@a, true), extract-variable-default(@b, true));
background: -ms-linear-gradient(top, @a, @b); background: -ms-linear-gradient(top, @a, @b);
background: -o-linear-gradient(top, extract-variable-default(@a, true), extract-variable-default(@b, true));
background: -o-linear-gradient(top, @a, @b); background: -o-linear-gradient(top, @a, @b);
background: linear-gradient(to bottom, extract-variable-default(@a, true), extract-variable-default(@b, true));
background: linear-gradient(to bottom, @a, @b); background: linear-gradient(to bottom, @a, @b);
} }
// General styles // General styles
code { code {
.var(color, icinga-blue); color: @icinga-blue;
font-family: @font-family-fixed; font-family: @font-family-fixed;
} }
@ -31,13 +24,11 @@ pre > code {
} }
.chapter a { .chapter a {
border-bottom: 1px dotted; border-bottom: 1px dotted @gray-light;
.var(border-bottom-color, gray-light);
font-weight: @font-weight-bold; font-weight: @font-weight-bold;
&:hover { &:hover {
border-bottom: 1px solid; border-bottom: 1px solid @text-color;
.var(border-bottom-color, text-color);
text-decoration: none; text-decoration: none;
} }
} }
@ -49,8 +40,8 @@ pre > code {
.search-highlight { .search-highlight {
.rounded-corners(); .rounded-corners();
.var(background, icinga-blue); background: @icinga-blue;
.var(color, text-color-on-icinga-blue); color: @text-color-on-icinga-blue;
padding: 0 0.3em 0 0.3em; padding: 0 0.3em 0 0.3em;
} }
@ -70,7 +61,7 @@ pre > code {
a { a {
&:before { &:before {
.var(color, icinga-blue); color: @icinga-blue;
content: counters(li,".") " "; content: counters(li,".") " ";
display: inline-block; display: inline-block;
font-size: small; font-size: small;
@ -97,7 +88,7 @@ tbody > tr:nth-child(odd) {
} }
tbody > tr:nth-child(even) { tbody > tr:nth-child(even) {
.var(background, body-bg-color); background: @body-bg-color;
} }
td, th { td, th {
@ -111,8 +102,7 @@ td {
} }
th { th {
border-bottom: 2px solid; border-bottom: 2px solid @icinga-blue;
.var(border-bottom-color, icinga-blue);
font-weight: @font-weight-bold; font-weight: @font-weight-bold;
text-align: left; text-align: left;
text-transform: uppercase; text-transform: uppercase;

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

@ -2,9 +2,8 @@
.monitoring-statusbar { .monitoring-statusbar {
position: relative; position: relative;
.var(background-color, body-bg-color); background-color: @body-bg-color;
border-top: 1px solid; border-top: 1px solid @gray-lighter;
.var(border-top-color, gray-lighter);
padding: .25em @gutter; padding: .25em @gutter;
line-height: 1.3; line-height: 1.3;
@ -32,11 +31,11 @@
font-size: 1.25em; font-size: 1.25em;
&.-active { &.-active {
.var(color, icinga-blue); color: @icinga-blue;
} }
&.-inactive { &.-inactive {
.var(color, gray-light); color: @gray-light;
} }
} }
} }
@ -71,7 +70,7 @@
color: white; color: white;
} }
.group-grid-cell > div.state-none { .group-grid-cell > div.state-none {
.var(background-color, gray-light); background-color: @gray-light;
} }
} }
@ -156,10 +155,10 @@
} }
.service-on { .service-on {
.var(color, text-color-light); color: @text-color-light;
> a { > a {
.var(color, text-color); color: @text-color;
letter-spacing: normal; letter-spacing: normal;
font-weight: bold; font-weight: bold;
} }
@ -187,7 +186,7 @@
} }
li { li {
.var(color, icinga-blue); color: @icinga-blue;
} }
a, a,
@ -196,7 +195,7 @@
padding: .25em .5em; padding: .25em .5em;
&:hover { &:hover {
.var(background-color, gray-lighter); background-color: @gray-lighter;
text-decoration: none; text-decoration: none;
} }
} }
@ -255,7 +254,7 @@
.tactical div.box.header { .tactical div.box.header {
margin: 10px; margin: 10px;
min-height: 8em; min-height: 8em;
.var(color, text-color-inverted); color: @text-color-inverted;
font-size: @font-size-dashboard; font-size: @font-size-dashboard;
} }
@ -264,12 +263,12 @@
} }
div.box.ok_hosts.state_up { div.box.ok_hosts.state_up {
.var(background-color, color-ok); background-color: @color-ok;
border: 1px solid white; border: 1px solid white;
} }
div.box.problem_hosts.state_down { div.box.problem_hosts.state_down {
.var(background-color, color-critical); background-color: @color-critical;
border: 1px solid white; border: 1px solid white;
} }
@ -286,29 +285,25 @@ div.box.ok_hosts div.box.entry, div.box.problem_hosts div.box.entry {
} }
div.box.monitoringfeatures { div.box.monitoringfeatures {
border: 1px solid; border: 1px solid @gray-lighter;
.var(border-color, gray-lighter); border-left: 15px @gray;
border-left: 15px solid;
.var(border-left-color, "gray");
} }
div.box.monitoringfeatures div.box-separator { div.box.monitoringfeatures div.box-separator {
color: white; color: white;
.var(background-color, color-ok); background-color: @color-ok;
} }
div.box.monitoringfeatures div.feature-highlight { div.box.monitoringfeatures div.feature-highlight {
.var(background-color, color-critical); background-color: @color-critical;
} }
div.box.monitoringfeatures a.feature-highlight { div.box.monitoringfeatures a.feature-highlight {
} }
div.box.hostservicechecks { div.box.hostservicechecks {
border: 1px solid; border: 1px solid @gray-lighter;
.var(border-color, gray-lighter); border-left: 15px @gray;
border-left: 15px solid;
.var(border-left-color, "gray");
} }
div.box.hostservicechecks th { div.box.hostservicechecks th {
@ -320,18 +315,15 @@ div.box.hostservicechecks th {
div.box.process { div.box.process {
width: 100%; width: 100%;
max-width: 50em; max-width: 50em;
border: 1px solid; border: 1px solid @gray-lighter;
.var(border-color, gray-lighter); border-left: 15px @gray;
border-left: 15px solid;
.var(border-left-color, "gray");
margin-bottom: 1em; margin-bottom: 1em;
margin-right: 1em; margin-right: 1em;
} }
.process div.box.header { .process div.box.header {
min-height: 5em; min-height: 5em;
border-bottom:1px solid; border-bottom: 1px solid @gray-lighter;
.var(border-bottom-color, gray-lighter);
} }
.process > .boxview > div.box { .process > .boxview > div.box {
@ -342,8 +334,7 @@ div.box.process {
margin-top: 0; margin-top: 0;
margin-bottom: 1em; margin-bottom: 1em;
padding-bottom: 1em; padding-bottom: 1em;
border-bottom:1px solid; border-bottom: 1px solid @gray-lighter;
.var(border-bottom-color, gray-lighter);
} }
.process th { .process th {
@ -358,7 +349,7 @@ div.box.process {
} }
div.backend-running { div.backend-running {
.var(background, color-ok); background: @color-ok;
color: white; color: white;
text-align: center; text-align: center;
margin-top: 1em; margin-top: 1em;
@ -370,7 +361,7 @@ div.backend-running {
} }
div.backend-not-running { div.backend-not-running {
.var(background, color-critical); background: @color-critical;
color: white; color: white;
text-align: center; text-align: center;
padding: 0.1em; padding: 0.1em;
@ -382,16 +373,13 @@ div.backend-not-running {
div.box.features { div.box.features {
width: 100%; width: 100%;
max-width: 50em; max-width: 50em;
border: 1px solid; border: 1px solid @gray-lighter;
.var(border-color, gray-lighter); border-left: 15px @gray;
border-left: 15px solid;
.var(border-left-color, "gray");
} }
.features div.box.header { .features div.box.header {
min-height: 5em; min-height: 5em;
border-bottom: 1px solid; border-bottom: 1px solid @gray-lighter;
.var(border-bottom-color, gray-lighter);
} }
.features > .boxview > div.box { .features > .boxview > div.box {
@ -402,8 +390,7 @@ div.box.features {
margin-top: 0; margin-top: 0;
margin-bottom: 1em; margin-bottom: 1em;
padding-bottom: 1em; padding-bottom: 1em;
border-bottom: 1px solid; border-bottom: 1px solid @gray-lighter;
.var(border-bottom-color, gray-lighter);
} }
@ -412,11 +399,9 @@ div.box.features {
div.box.stats { div.box.stats {
width: 100%; width: 100%;
max-width: 50em; max-width: 50em;
border: 1px solid; border: 1px solid @gray-lighter;
.var(border-color, gray-lighter); border-left: 15px @gray;
border-left: 15px solid; color: @text-color;
.var(border-left-color, "gray");
.var(color, text-color);
} }
.stats > .boxview > div.box { .stats > .boxview > div.box {
@ -429,13 +414,12 @@ div.box.stats {
} }
.stats > table > thead { .stats > table > thead {
.var(color, "gray"); color: @gray;
} }
.stats > h2 { .stats > h2 {
text-align: left; text-align: left;
border-bottom: 1px solid; border-bottom: 1px solid @gray-lighter;
.var(border-bottom-color, gray-lighter);
> .hosts-summary, > .hosts-summary,
> .services-summary { > .services-summary {
@ -455,10 +439,8 @@ div.box.stats {
div.timeline-legend { div.timeline-legend {
padding: 0.5em; padding: 0.5em;
margin-top: 2em; margin-top: 2em;
border: 1px solid; border: 1px solid @gray-lighter;
.var(border-color, gray-lighter); border-left-width: 15px;
border-left: 15px solid;
.var(border-left-color, "gray");
h2 { h2 {
margin: 0; margin: 0;
@ -478,7 +460,7 @@ div.timeline-legend {
font-weight: @font-weight-bold; font-weight: @font-weight-bold;
font-size: 11px; font-size: 11px;
text-align: center; text-align: center;
.var(color, text-color-inverted); color: @text-color-inverted;
padding-left: 5px; padding-left: 5px;
padding-right: 5px; padding-right: 5px;
padding-top: 2px; padding-top: 2px;
@ -624,7 +606,7 @@ form.instance-features span.description, form.object-features span.description {
text-align: left; text-align: left;
margin-right: 0; margin-right: 0;
width: @name-value-table-name-width; width: @name-value-table-name-width;
.var(color, text-color-light); color: @text-color-light;
label { label {
font-size: inherit; font-size: inherit;
@ -663,50 +645,49 @@ form.instance-features span.description, form.object-features span.description {
& + span.hint { & + span.hint {
margin: .35em; margin: .35em;
.var(color, gray-light); color: @gray-light;
font-style: italic; font-style: italic;
} }
} }
} }
.plugin-output { .plugin-output {
border-left: 5px solid; border-left: 5px solid @gray-lighter;
.var(border-left-color, gray-lighter);
padding: 0.66em 0.33em; padding: 0.66em 0.33em;
.state-critical { .state-critical {
.var(background-color, color-critical); background-color: @color-critical;
.var(color, body-bg-color); color: @body-bg-color;
padding: 0.2em; padding: 0.2em;
} }
.state-ok { .state-ok {
.var(background-color, color-ok); background-color: @color-ok;
.var(color, body-bg-color); color: @body-bg-color;
padding: 0.2em; padding: 0.2em;
} }
.state-unknown { .state-unknown {
.var(background-color, color-unknown); background-color: @color-unknown;
.var(color, body-bg-color); color: @body-bg-color;
padding: 0.2em; padding: 0.2em;
} }
.state-warning { .state-warning {
.var(background-color, color-warning); background-color: @color-warning;
.var(color, body-bg-color); color: @body-bg-color;
padding: 0.2em; padding: 0.2em;
} }
.state-down { .state-down {
.var(background-color, color-down); background-color: @color-down;
.var(color, body-bg-color); color: @body-bg-color;
padding: 0.2em; padding: 0.2em;
} }
.state-up { .state-up {
.var(background-color, color-up); background-color: @color-up;
.var(color, body-bg-color); color: @body-bg-color;
padding: 0.2em; padding: 0.2em;
} }
} }
@ -715,12 +696,10 @@ form.instance-features span.description, form.object-features span.description {
.markdown, .markdown,
.plugin-output { .plugin-output {
a { a {
border-bottom: 1px dotted; border-bottom: 1px dotted @gray-light;
.var(border-bottom-color, gray-light);
&:hover { &:hover {
border-bottom: 1px solid; border-bottom: 1px solid @text-color;
.var(border-bottom-color, text-color);
text-decoration: none; text-decoration: none;
} }
} }

10
modules/monitoring/public/css/service-grid.less
View File

@ -5,7 +5,7 @@
white-space: nowrap; white-space: nowrap;
td { td {
.var(color, gray-light); color: @gray-light;
padding: 0.2em; padding: 0.2em;
text-align: center; text-align: center;
width: 1em; width: 1em;
@ -33,14 +33,14 @@
font-size: 130%; font-size: 130%;
a { a {
.var(color, text-color); color: @text-color;
outline: none; outline: none;
&:hover { &:hover {
.var(color, text-color-light); color: @text-color-light;
} }
&:focus, &:active { &:focus, &:active {
.var(color, icinga-blue); color: @icinga-blue;
} }
} }
@ -66,7 +66,7 @@ form.filter-toggle {
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
margin-left: .5em; margin-left: .5em;
.var(color, gray-light); color: @gray-light;
} }
input[type="checkbox"]:checked ~ label { input[type="checkbox"]:checked ~ label {

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

@ -59,20 +59,20 @@
// Host name and IP addresses in the host and service detail view // Host name and IP addresses in the host and service detail view
.host-meta { .host-meta {
.var(color, text-color-light); color: @text-color-light;
font-size: @font-size-small; font-size: @font-size-small;
} }
// Link to unhandled services in the hosts overview // Link to unhandled services in the hosts overview
.host-services-incidents { .host-services-incidents {
.var(color, color-critical); color: @color-critical;
font-family: @font-family-wide; font-family: @font-family-wide;
font-size: @font-size-small; font-size: @font-size-small;
} }
// Notification recipient in the notifications overview // Notification recipient in the notifications overview
.notification-recipient { .notification-recipient {
.var(color, text-color-light); color: @text-color-light;
float: right; float: right;
font-size: @font-size-small; font-size: @font-size-small;
} }
@ -104,7 +104,7 @@
// Plugin output in overviews // Plugin output in overviews
.overview-plugin-output { .overview-plugin-output {
.var(color, text-color-light); color: @text-color-light;
font-family: @font-family-fixed; font-family: @font-family-fixed;
font-size: @font-size-small; font-size: @font-size-small;
margin: 0; margin: 0;
@ -146,7 +146,7 @@
// Service description if in the service detail view // Service description if in the service detail view
.service-meta { .service-meta {
.var(color, text-color-light); color: @text-color-light;
font-size: @font-size-small; font-size: @font-size-small;
} }
@ -154,68 +154,61 @@
.state-col { .state-col {
&.state-ok, &.state-ok,
&.state-up { &.state-up {
border-left: @border-left-width solid; border-left: @border-left-width solid @color-ok;
.var(border-left-color, color-ok);
} }
&.state-pending { &.state-pending {
border-left: @border-left-width solid; border-left: @border-left-width solid @color-pending;
.var(border-left-color, color-pending);
} }
&.state-critical, &.state-critical,
&.state-down { &.state-down {
.var(background-color, color-critical); background-color: @color-critical;
.var(color, text-color-inverted); color: @text-color-inverted;
&.handled { &.handled {
background-color: inherit; background-color: inherit;
color: inherit; color: inherit;
border-left: @border-left-width solid; border-left: @border-left-width solid @color-critical-handled;
.var(border-left-color, color-critical-handled);
} }
} }
&.state-warning { &.state-warning {
.var(background-color, color-warning); background-color: @color-warning;
.var(color, text-color-inverted); color: @text-color-inverted;
&.handled { &.handled {
background-color: inherit; background-color: inherit;
color: inherit; color: inherit;
border-left: @border-left-width solid; border-left: @border-left-width solid @color-warning-handled;
.var(border-left-color, color-warning-handled);
} }
} }
&.state-unknown { &.state-unknown {
.var(background-color, color-unknown); background-color: @color-unknown;
.var(color, text-color-inverted); color: @text-color-inverted;
&.handled { &.handled {
background-color: inherit; background-color: inherit;
color: inherit; color: inherit;
border-left: @border-left-width solid; border-left: @border-left-width solid @color-unknown-handled;
.var(border-left-color, color-unknown-handled);
} }
} }
&.state-unreachable { &.state-unreachable {
.var(background-color, color-unreachable); background-color: @color-unreachable;
.var(color, text-color-inverted); color: @text-color-inverted;
&.handled { &.handled {
background-color: inherit; background-color: inherit;
color: inherit; color: inherit;
border-left: @border-left-width solid; border-left: @border-left-width solid @color-unreachable-handled;
.var(border-left-color, color-unreachable-handled);
} }
} }
// State class for history events // State class for history events
&.state-no-state { &.state-no-state {
border-left: @border-left-width solid; border-left: @border-left-width solid @text-color-light;
.var(border-left-color, text-color-light);
} }
* { * {
@ -263,11 +256,11 @@
} }
tr[href].active { tr[href].active {
.var(background-color, tr-active-color); background-color: @tr-active-color;
} }
tr[href]:hover { tr[href]:hover {
.var(background-color, tr-hover-color); background-color: @tr-hover-color;
cursor: pointer; cursor: pointer;
} }

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

@ -7,11 +7,11 @@
.about-social i { .about-social i {
font-size: 1.7em; font-size: 1.7em;
.var(color, text-color); color: @text-color;
} }
.about-social i:hover { .about-social i:hover {
.var(color, icinga-blue); color: @icinga-blue;
} }
.about-links { .about-links {
@ -23,11 +23,11 @@
margin: 0.5em; margin: 0.5em;
padding: 0; padding: 0;
font-size: 5em; font-size: 5em;
.var(color, text-color); color: @text-color;
} }
.about-links i:hover { .about-links i:hover {
.var(color, icinga-blue); color: @icinga-blue;
} }
.common-table th { .common-table th {

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

@ -6,10 +6,10 @@
li { li {
.rounded-corners(3px); .rounded-corners(3px);
border: 1px solid; border: 1px solid;
.var(border-color, low-sat-blue); border-color: @low-sat-blue;
&.active { &.active {
.var(border-color, icinga-blue); border-color: @icinga-blue;
} }
} }
} }
@ -20,14 +20,13 @@
} }
h3 { h3 {
border-bottom: 1px solid; border-bottom: 1px solid @gray-light;
.var(border-bottom-color, gray-light);
} }
h3 em, h3 em,
.previews em, .previews em,
.privilege-label em { .privilege-label em {
.var(color, text-color-light); color: @text-color-light;
} }
h3 em { h3 em {
font-weight: normal; font-weight: normal;
@ -37,18 +36,18 @@
} }
.icon { .icon {
.var(color, gray-light); color: @gray-light;
&.granted { &.granted {
.var(color, color-granted); color: @color-granted;
} }
&.refused { &.refused {
.var(color, color-refused); color: @color-refused;
} }
&.restricted { &.restricted {
.var(color, color-restricted); color: @color-restricted;
} }
} }
@ -61,7 +60,7 @@
&:hover .spacer { &:hover .spacer {
.transition(opacity .25s .25s ease-in); .transition(opacity .25s .25s ease-in);
border: 0 dashed; border: 0 dashed;
.var(border-color, gray-light); border-color: @gray-light;
border-top-width: .2em; border-top-width: .2em;
opacity: 1; opacity: 1;
} }
@ -72,25 +71,25 @@
border-left-width: 2px; border-left-width: 2px;
&.granted { &.granted {
.var(border-color, color-granted); border-color: @color-granted;
} }
&.refused { &.refused {
.var(border-color, color-refused); border-color: @color-refused;
} }
} }
.connector { .connector {
border: 0 solid; border: 0 solid;
.var(border-color, gray-lighter); border-color: @gray-lighter;
border-bottom-width: 2px; border-bottom-width: 2px;
&.granted { &.granted {
.var(border-color, color-granted); border-color: @color-granted;
} }
&.refused { &.refused {
.var(border-color, color-refused); border-color: @color-refused;
} }
&:first-child { &:first-child {
@ -102,22 +101,22 @@
.role { .role {
.rounded-corners(1em); .rounded-corners(1em);
border: 2px solid; border: 2px solid;
.var(border-color, gray-lighter); border-color: @gray-lighter;
&.granted { &.granted {
border: 2px solid; border: 2px solid;
.var(border-color, color-granted); border-color: @color-granted;
} }
&.refused { &.refused {
border: 2px solid; border: 2px solid;
.var(border-color, color-refused); border-color: @color-refused;
} }
} }
.restriction { .restriction {
font-family: @font-family-fixed; font-family: @font-family-fixed;
.var(background-color, gray-lighter); background-color: @gray-lighter;
} }
} }

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

@ -8,8 +8,8 @@
.bg-stateful(); .bg-stateful();
.rounded-corners(); .rounded-corners();
.var(background-color, "gray"); background-color: @gray;
.var(color, badge-color); color: @badge-color;
display: inline-block; display: inline-block;
font-family: @font-family-wide; font-family: @font-family-wide;
font-size: @font-size-small; font-size: @font-size-small;

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

@ -186,8 +186,7 @@ blockquote, p, pre {
} }
blockquote { blockquote {
border-left: 5px solid; border-left: 5px solid @gray-lighter;
.var(border-left-color, gray-lighter);
padding: 0.667em 0.333em; padding: 0.667em 0.333em;
} }
@ -197,8 +196,7 @@ h1, h2, h3, h4, h5, h6 {
} }
h1 { h1 {
border-bottom: 1px solid; border-bottom: 1px solid @gray-lighter;
.var(border-bottom-color, gray-lighter);
font-size: 1.333em; font-size: 1.333em;
} }
@ -225,7 +223,7 @@ h6 {
pre { pre {
.rounded-corners(.25em); .rounded-corners(.25em);
.var(background-color, gray-lighter); background-color: @gray-lighter;
font-family: @font-family-fixed; font-family: @font-family-fixed;
font-size: @font-size-small; font-size: @font-size-small;
padding: @vertical-padding @horizontal-padding; padding: @vertical-padding @horizontal-padding;
@ -262,7 +260,7 @@ td, th {
display: block; display: block;
background: url(../img/icinga-loader.gif) no-repeat center center; background: url(../img/icinga-loader.gif) no-repeat center center;
.var(background-color, body-bg-color); background-color: @body-bg-color;
background-size: 4em 4em; background-size: 4em 4em;
opacity: 0; opacity: 0;

15
public/css/icinga/controls.less
View File

@ -39,7 +39,7 @@ input.search {
} }
&:focus:not([readonly]) { &:focus:not([readonly]) {
.var(border-color, icinga-blue); border-color: @icinga-blue;
} }
} }
@ -64,7 +64,7 @@ input.search {
margin: .5em 0; margin: .5em 0;
> a { > a {
.var(color, icinga-blue); color: @icinga-blue;
padding: .5em; padding: .5em;
line-height: 1; line-height: 1;
} }
@ -104,12 +104,11 @@ input.search {
line-height: 1; line-height: 1;
&.active { &.active {
border-bottom: 2px solid; border-bottom: 2px solid @icinga-blue;
.var(border-bottom-color, icinga-blue);
> a, > a,
> a:hover { > a:hover {
.var(color, icinga-blue); color: @icinga-blue;
/* Compensate border-bottom: 2px */ /* Compensate border-bottom: 2px */
margin-bottom: -2px; margin-bottom: -2px;
} }
@ -122,7 +121,7 @@ input.search {
} }
&.disabled { &.disabled {
.var(color, disabled-gray); color: @disabled-gray;
cursor: no-drop; cursor: no-drop;
} }
@ -131,7 +130,7 @@ input.search {
padding: 0.5em; padding: 0.5em;
} }
> a:hover { > a:hover {
.var(background-color, gray-lighter); background-color: @gray-lighter;
text-decoration: none; text-decoration: none;
} }
} }
@ -238,7 +237,7 @@ input.search {
.icinga-datetime-picker .flatpickr-day.today { .icinga-datetime-picker .flatpickr-day.today {
&:hover, &:hover,
&:focus { &:focus {
.var(color, fp-today_fg_color); color: @fp-today_fg_color;
} }
} }

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

@ -162,7 +162,7 @@ form.icinga-form .control-group .toggle-switch ~ .control-info {
input[type="file"], input[type="file"],
textarea, textarea,
select { select {
.var(background-color, low-sat-blue); background-color: @low-sat-blue;
} }
} }
@ -306,22 +306,22 @@ form.icinga-form .form-controls {
} }
input[type="submit"].btn-remove { input[type="submit"].btn-remove {
.button(~"var(--body-bg-color, @{body-bg-color})", ~"var(--color-critical, @{color-critical})", ~"var(--color-critical-accentuated, @{color-critical-accentuated})"); .button(@body-bg-color, @color-critical, @color-critical-accentuated);
} }
input[type="submit"].btn-cancel { input[type="submit"].btn-cancel {
.button(~"var(--body-bg-color, @{body-bg-color})", ~"var(--gray, @{gray})", ~"var(--black, @{black})"); .button(@body-bg-color, @gray, @black);
} }
button.noscript-apply { button.noscript-apply {
.var(color, "gray"); color: @gray;
.var(background-color, gray-lightest); background-color: @gray-lightest;
.var(border-color, "gray"); border-color: @gray;
border-width: 1px; border-width: 1px;
} }
button[type="button"] { button[type="button"] {
.var(background-color, low-sat-blue); background-color: @low-sat-blue;
} }
} }
@ -363,9 +363,9 @@ form.inline {
top: 0; top: 0;
display: inline-block; display: inline-block;
.var(background, low-sat-blue); background: @low-sat-blue;
border: 1px solid; border: 1px solid;
.var(border-color, low-sat-blue); border-color: @low-sat-blue;
box-sizing: content-box; box-sizing: content-box;
border-radius: 1em; border-radius: 1em;
height: 4/3em; height: 4/3em;
@ -378,10 +378,10 @@ form.inline {
top: 0; top: 0;
left: 0; left: 0;
.var(background, text-color-inverted); background: @text-color-inverted;
border-radius: 1em; border-radius: 1em;
border: 1px solid; border: 1px solid;
.var(border-color, low-sat-blue); border-color: @low-sat-blue;
box-sizing: border-box; box-sizing: border-box;
content: ""; content: "";
display: block; display: block;
@ -397,19 +397,18 @@ form.inline {
} }
.icinga-controls input[type="checkbox"]:checked + .toggle-switch .toggle-slider { .icinga-controls input[type="checkbox"]:checked + .toggle-switch .toggle-slider {
.var(background-color, icinga-blue); background-color: @icinga-blue;
border: 1px solid; border: 1px solid;
.var(border-color, icinga-blue); border-color: @icinga-blue;
} }
.icinga-controls input[type="checkbox"]:focus + .toggle-switch .toggle-slider { .icinga-controls input[type="checkbox"]:focus + .toggle-switch .toggle-slider {
box-shadow: 0 0 0 2px @body-bg-color, 0 0 0 4px @icinga-blue-light; box-shadow: 0 0 0 2px @body-bg-color, 0 0 0 4px @icinga-blue-light;
box-shadow: 0 0 0 2px var(--body-bg-color, @body-bg-color), 0 0 0 4px var(--icinga-blue-light, @icinga-blue-light);
} }
.icinga-controls input[type="checkbox"]:checked + .toggle-switch .toggle-slider:before { .icinga-controls input[type="checkbox"]:checked + .toggle-switch .toggle-slider:before {
border: 1px solid; border: 1px solid;
.var(border-color, icinga-blue); border-color: @icinga-blue;
left: 100%; left: 100%;
margin-left: -4/3em; margin-left: -4/3em;
} }
@ -420,24 +419,24 @@ form.inline {
cursor: default; cursor: default;
& > .toggle-slider { & > .toggle-slider {
.var(background-color, gray-light); background-color: @gray-light;
.var(border-color, gray-light); border-color: @gray-light;
&:before { &:before {
.var(background-color, gray-lighter); background-color: @gray-lighter;
.var(border-color, gray-light); border-color: @gray-light;
} }
} }
} }
form.icinga-form .control-group.disabled .control-label-group { form.icinga-form .control-group.disabled .control-label-group {
.var(color, disabled-gray); color: @disabled-gray;
} }
.icinga-controls { .icinga-controls {
input[disabled], input[disabled],
select[disabled] { select[disabled] {
.var(background-color, gray-lighter); background-color: @gray-lighter;
border-color: transparent; border-color: transparent;
} }
} }
@ -475,20 +474,20 @@ form.icinga-form {
.form-notifications { .form-notifications {
&.info { &.info {
.var(background-color, form-info-bg-color); background-color: @form-info-bg-color;
} }
&.error { &.error {
.var(background-color, form-error-bg-color); background-color: @form-error-bg-color;
} }
&.warning { &.warning {
.var(background-color, form-warning-bg-color); background-color: @form-warning-bg-color;
} }
} }
.form-description { .form-description {
.var(background-color, light-text-bg-color); background-color: @light-text-bg-color;
} }
.errors { .errors {
@ -506,7 +505,7 @@ form.icinga-form {
} }
form.icinga-form .form-info { form.icinga-form .form-info {
.var(color, text-color-light); color: @text-color-light;
font-size: @font-size-small; font-size: @font-size-small;
list-style: none; list-style: none;
padding-left: 0; padding-left: 0;
@ -516,13 +515,13 @@ form.icinga-form .form-info {
.icinga-controls { .icinga-controls {
input::placeholder { input::placeholder {
.var(color, disabled-gray); color: @disabled-gray;
font-style: italic; font-style: italic;
opacity: 1; opacity: 1;
} }
input:-ms-input-placeholder { input:-ms-input-placeholder {
.var(color, disabled-gray); color: @disabled-gray;
font-style: italic; font-style: italic;
opacity: 1; opacity: 1;
} }
@ -548,7 +547,7 @@ form.icinga-form .form-info {
display: none; display: none;
&:checked + img { &:checked + img {
.var(border-color, icinga-blue); border-color: @icinga-blue;
border-radius: .25em; border-radius: .25em;
} }

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

@ -2,28 +2,28 @@
.app-health { .app-health {
header { header {
.var(color, text-color-light); color: @text-color-light;
span { span {
.var(color, text-color); color: @text-color;
} }
} }
span { span {
&.state-ok { &.state-ok {
.var(background-color, color-ok); background-color: @color-ok;
} }
&.state-warning { &.state-warning {
.var(background-color, color-warning); background-color: @color-warning;
} }
&.state-critical { &.state-critical {
.var(background-color, color-critical); background-color: @color-critical;
} }
&.state-unknown { &.state-unknown {
.var(background-color, color-unknown); background-color: @color-unknown;
} }
} }
@ -37,12 +37,12 @@
tr:not(:last-child) td { tr:not(:last-child) td {
border: 0 solid; border: 0 solid;
.var(border-color, gray-light); border-color: @gray-light;
border-bottom-width: 1px; border-bottom-width: 1px;
} }
section { section {
.var(color, text-color-light); color: @text-color-light;
font-family: @font-family-fixed; font-family: @font-family-fixed;
} }
} }

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

@ -9,7 +9,7 @@
} }
#guest-error { #guest-error {
.var(background-color, icinga-blue); background-color: @icinga-blue;
height: 100%; height: 100%;
overflow: auto; overflow: auto;
} }
@ -20,7 +20,7 @@
#guest-error-message { #guest-error-message {
.fadein(); .fadein();
.var(color, body-bg-color); color: @body-bg-color;
font-size: 2em; font-size: 2em;
} }
@ -32,7 +32,7 @@
} }
#header-logo-container { #header-logo-container {
.var(background, menu-bg-color); background: @menu-bg-color;
height: 6em; height: 6em;
padding: 1.25em; padding: 1.25em;
width: 16em; width: 16em;
@ -81,8 +81,8 @@
} }
#layout { #layout {
.var(background-color, body-bg-color); background-color: @body-bg-color;
.var(color, text-color); color: @text-color;
font-family: @font-family; font-family: @font-family;
} }
@ -141,11 +141,11 @@
// Mobile menu // Mobile menu
#layout.minimal-layout #sidebar { #layout.minimal-layout #sidebar {
.var(background-color, menu-bg-color); background-color: @menu-bg-color;
} }
#mobile-menu-toggle { #mobile-menu-toggle {
.var(color, menu-color); color: @menu-color;
text-align: right; text-align: right;
> button { > button {
@ -213,12 +213,11 @@
} }
#notifications > li { #notifications > li {
.var(color, text-color); color: @text-color;
display: block; display: block;
line-height: 2.5em; line-height: 2.5em;
border-left: .5em solid; border-left: .5em solid @gray-light;
.var(border-left-color, gray-light); background: @body-bg-color;
.var(background, body-bg-color);
margin-bottom: 1px; margin-bottom: 1px;
box-shadow: 0 0 1em 0 rgba(0,0,0,0.25); box-shadow: 0 0 1em 0 rgba(0,0,0,0.25);
@ -233,38 +232,38 @@
} }
&.error { &.error {
.var(border-color, color-notification-error); border-color: @color-notification-error;
.var(background, color-notification-error); background: @color-notification-error;
.var(color, text-color-on-icinga-blue); color: @text-color-on-icinga-blue;
.icon { .icon {
.var(color, text-color-on-icinga-blue); color: @text-color-on-icinga-blue;
} }
} }
&.info { &.info {
.var(border-color, color-notification-info); border-color: @color-notification-info;
.icon { .icon {
.var(color, color-notification-info); color: @color-notification-info;
} }
} }
&.success { &.success {
.var(border-color, color-notification-success); border-color: @color-notification-success;
.icon { .icon {
.var(color, color-notification-success); color: @color-notification-success;
} }
} }
&.warning { &.warning {
.var(border-color, color-notification-warning); border-color: @color-notification-warning;
.var(background, color-notification-warning); background: @color-notification-warning;
.var(color, text-color-inverted); color: @text-color-inverted;
.icon { .icon {
.var(color, text-color-inverted); color: @text-color-inverted;
} }
} }
} }
@ -342,10 +341,10 @@
} }
#search:focus { #search:focus {
.var(background-color, menu-bg-color); background-color: @menu-bg-color;
border-radius: 0 .25em .25em 0; border-radius: 0 .25em .25em 0;
box-shadow: 0 0 .25em 0 rgba(0, 0, 0, .2); box-shadow: 0 0 .25em 0 rgba(0, 0, 0, .2);
.var(color, menu-color); color: @menu-color;
width: 20em; width: 20em;
position: fixed; position: fixed;
z-index: 1; z-index: 1;

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

@ -4,7 +4,7 @@
#login { #login {
height: 100%; height: 100%;
.var(background-color, menu-bg-color); background-color: @menu-bg-color;
background-image: url(../img/icingaweb2-background-orbs.jpg); background-image: url(../img/icingaweb2-background-orbs.jpg);
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: cover; background-size: cover;
@ -18,8 +18,8 @@
position: relative; position: relative;
z-index: 10; z-index: 10;
padding: 2em 6em; padding: 2em 6em;
.var(background-color, login-box-background); background-color: @login-box-background;
.box-shadow(0, 0, 1em, 1em, ~"var(--login-box-background, @{login-box-background})"); .box-shadow(0, 0, 1em, 1em, @login-box-background);
} }
#icinga-logo { #icinga-logo {
@ -43,7 +43,7 @@
} }
.errors { .errors {
.var(background-color, color-critical); background-color: @color-critical;
color: white; color: white;
} }
@ -76,12 +76,12 @@
input[type="submit"]:focus { input[type="submit"]:focus {
outline: 3px solid; outline: 3px solid;
.var(outline-color, icinga-blue-light); outline-color: @icinga-blue-light;
} }
input[type=submit] { input[type=submit] {
border-radius: .25em; border-radius: .25em;
.var(background, icinga-secondary); background: @icinga-secondary;
color: white; color: white;
border: none; border: none;
height: 2.5em; height: 2.5em;
@ -89,19 +89,19 @@
width: 100%; width: 100%;
&:hover { &:hover {
.var(background-color, icinga-secondary-dark); background-color: @icinga-secondary-dark;
} }
} }
.config-note { .config-note {
.var(background-color, color-critical); background-color: @color-critical;
margin: 0 auto 2em auto; // Center horizontally w/ bottom margin margin: 0 auto 2em auto; // Center horizontally w/ bottom margin
max-width: 50%; max-width: 50%;
min-width: 24em; min-width: 24em;
padding: 1em; padding: 1em;
a { a {
.var(color, text-color-inverted); color: @text-color-inverted;
font-weight: bold; font-weight: bold;
} }
} }

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

@ -7,7 +7,7 @@
@name-value-table-name-width: 38/3em; @name-value-table-name-width: 38/3em;
.action-link { .action-link {
.var(color, icinga-blue); color: @icinga-blue;
} }
.error-message { .error-message {
@ -119,7 +119,7 @@
} }
a:hover > .icon-cancel { a:hover > .icon-cancel {
.var(color, color-critical); color: @color-critical;
} }
.icon-stateful { .icon-stateful {
@ -132,12 +132,12 @@ a:hover > .icon-cancel {
.action-link(); .action-link();
.rounded-corners(3px); .rounded-corners(3px);
.var(background, low-sat-blue); background: @low-sat-blue;
display: inline-block; display: inline-block;
padding: 0.25em 0.5em; padding: 0.25em 0.5em;
&:hover { &:hover {
.var(background, low-sat-blue-dark); background: @low-sat-blue-dark;
text-decoration: none; text-decoration: none;
} }
} }
@ -148,12 +148,11 @@ a:hover > .icon-cancel {
margin: 0; margin: 0;
> dt { > dt {
border-bottom: 1px solid; border-bottom: 1px solid @gray-lighter;
.var(border-bottom-color, gray-lighter);
margin-bottom: 0.25em; margin-bottom: 0.25em;
&:hover { &:hover {
.var(background-color, gray-lightest); background-color: @gray-lightest;
> .remove-action button:not(.spinner.active) { > .remove-action button:not(.spinner.active) {
visibility: visible; visibility: visible;
@ -171,7 +170,7 @@ a:hover > .icon-cancel {
} }
.comment-time { .comment-time {
.var(color, text-color-light); color: @text-color-light;
font-size: @font-size-small; font-size: @font-size-small;
} }
@ -182,7 +181,7 @@ a:hover > .icon-cancel {
} }
> dt { > dt {
.var(color, text-color-light); color: @text-color-light;
font-size: @font-size-small; font-size: @font-size-small;
} }
} }
@ -206,13 +205,11 @@ a:hover > .icon-cancel {
} }
thead { thead {
border-bottom: 1px solid; border-bottom: 1px solid @gray-light;
.var(border-bottom-color, gray-light);
} }
tbody tr { tbody tr {
border-bottom: 1px solid; border-bottom: 1px solid @gray-lightest;
.var(border-bottom-color, gray-lightest);
border-left: 5px solid transparent; border-left: 5px solid transparent;
&:last-child { &:last-child {
@ -221,12 +218,12 @@ a:hover > .icon-cancel {
} }
tr[href].active { tr[href].active {
.var(background-color, tr-active-color); background-color: @tr-active-color;
.var(border-left-color, icinga-blue); border-left-color: @icinga-blue;
} }
tr[href]:hover { tr[href]:hover {
.var(background-color, tr-hover-color); background-color: @tr-hover-color;
cursor: pointer; cursor: pointer;
} }
} }
@ -242,7 +239,7 @@ a:hover > .icon-cancel {
} }
.name-value-table > tbody > tr > th { .name-value-table > tbody > tr > th {
.var(color, text-color-light); color: @text-color-light;
// Reset default font-weight // Reset default font-weight
font-weight: normal; font-weight: normal;
padding-left: 0; padding-left: 0;
@ -320,15 +317,15 @@ a:hover > .icon-cancel {
margin-top: -1em; margin-top: -1em;
margin-right: .25em; margin-right: .25em;
.var(background, gray-lighter); background: @gray-lighter;
.var(color, "gray"); color: @gray;
border: none; border: none;
-webkit-box-shadow: 0 0 1/3em rgba(0,0,0,.3); -webkit-box-shadow: 0 0 1/3em rgba(0,0,0,.3);
-moz-box-shadow: 0 0 1/3em rgba(0,0,0,.3); -moz-box-shadow: 0 0 1/3em rgba(0,0,0,.3);
box-shadow: 0 0 1/3em rgba(0,0,0,.3); box-shadow: 0 0 1/3em rgba(0,0,0,.3);
&:hover { &:hover {
.var(background, gray-light); background: @gray-light;
} }
} }
@ -371,7 +368,6 @@ a:hover > .icon-cancel {
display: block; display: block;
height: 2em; height: 2em;
background: linear-gradient(@body-bg-color-transparent, @body-bg-color); background: linear-gradient(@body-bg-color-transparent, @body-bg-color);
background: linear-gradient(var(--body-bg-color-transparent, @body-bg-color-transparent), var(--body-bg-color, @body-bg-color));
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0; left: 0;
@ -403,8 +399,8 @@ a:hover > .icon-cancel {
.module-dependencies { .module-dependencies {
.unmet-dependencies { .unmet-dependencies {
.var(background-color, color-warning); background-color: @color-warning;
.var(color, text-color-on-icinga-blue); color: @text-color-on-icinga-blue;
padding: .25em .5em; padding: .25em .5em;
margin-left: -.5em; margin-left: -.5em;
} }
@ -412,16 +408,16 @@ a:hover > .icon-cancel {
.name-value-table { .name-value-table {
> caption { > caption {
font-weight: normal; font-weight: normal;
.var(color, text-color-light); color: @text-color-light;
} }
> tbody > tr > th { > tbody > tr > th {
font-weight: bold; font-weight: bold;
.var(color, text-color); color: @text-color;
} }
.missing { .missing {
.var(color, color-critical); color: @color-critical;
font-weight: bold; font-weight: bold;
} }
@ -439,10 +435,8 @@ a:hover > .icon-cancel {
height: 1.5em; height: 1.5em;
width: 1.5em; width: 1.5em;
left: 0.5em; left: 0.5em;
border-top: 3px solid; border-top: 3px solid @gray;
border-right: 3px solid; border-right: 3px solid @gray;
.var(border-top-color, "gray");
.var(border-right-color, "gray");
border-top-right-radius: .50em; border-top-right-radius: .50em;
transform: rotate(45deg); transform: rotate(45deg);
} }

84
public/css/icinga/menu.less
View File

@ -10,7 +10,7 @@
@icon-width: 1.7em; // 1.5em width + 0.2em right margin @icon-width: 1.7em; // 1.5em width + 0.2em right margin
#menu { #menu {
.var(background-color, menu-bg-color); background-color: @menu-bg-color;
width: 100%; width: 100%;
flex: 1; flex: 1;
overflow: auto; overflow: auto;
@ -65,16 +65,16 @@
#menu .nav-level-1 > .nav-item { #menu .nav-level-1 > .nav-item {
line-height: 2.167em; // 26 px line-height: 2.167em; // 26 px
.var(color, menu-color); color: @menu-color;
&.active { &.active {
.var(color, menu-active-color); color: @menu-active-color;
> a > .badge { > a > .badge {
display: none; display: none;
} }
.var(background-color, menu-active-bg-color); background-color: @menu-active-bg-color;
} }
&.no-icon > a { &.no-icon > a {
@ -87,12 +87,12 @@
&.active:not(.selected) > a:focus, &.active:not(.selected) > a:focus,
&.active:not(.selected) > a:hover { &.active:not(.selected) > a:hover {
.var(background-color, menu-active-hover-bg-color); background-color: @menu-active-hover-bg-color;
} }
&:not(.selected) > a:hover, &:not(.selected) > a:hover,
&:not(.selected) > a:focus { &:not(.selected) > a:focus {
.var(background-color, menu-hover-bg-color); background-color: @menu-hover-bg-color;
} }
// Balance icon weight for non active menu items // Balance icon weight for non active menu items
@ -109,11 +109,11 @@
} }
#menu ul:not(.nav-level-2) > .selected > a { #menu ul:not(.nav-level-2) > .selected > a {
.var(background-color, menu-highlight-color); background-color: @menu-highlight-color;
.var(color, text-color-inverted); color: @text-color-inverted;
&:focus { &:focus {
.var(background-color, menu-highlight-hover-bg-color); background-color: @menu-highlight-hover-bg-color;
} }
&:after { &:after {
@ -122,7 +122,7 @@
position: absolute; position: absolute;
right: -.75em; right: -.75em;
.var(background-color, body-bg-color); background-color: @body-bg-color;
box-shadow: 0 0 1em 0 rgba(0,0,0,0.6); box-shadow: 0 0 1em 0 rgba(0,0,0,0.6);
content: ""; content: "";
display: block; display: block;
@ -138,7 +138,7 @@
line-height: 1.833em; // 22px line-height: 1.833em; // 22px
> a { > a {
.var(color, menu-2ndlvl-color); color: @menu-2ndlvl-color;
font-size: @font-size-small; font-size: @font-size-small;
padding: 0.364em 0.545em 0.364em 0.545em; padding: 0.364em 0.545em 0.364em 0.545em;
@ -156,7 +156,7 @@
&.active:after { &.active:after {
.transform(rotate(45deg)); .transform(rotate(45deg));
.var(background-color, body-bg-color); background-color: @body-bg-color;
box-shadow: 0 0 1em 0 rgba(0,0,0,.6); box-shadow: 0 0 1em 0 rgba(0,0,0,.6);
content: ""; content: "";
display: block; display: block;
@ -169,14 +169,14 @@
} }
&.active > a { &.active > a {
.var(color, menu-2ndlvl-active-color); color: @menu-2ndlvl-active-color;
.var(background-color, menu-2ndlvl-active-bg-color); background-color: @menu-2ndlvl-active-bg-color;
&:focus { &:focus {
&:first-of-type, &:first-of-type,
&:first-of-type ~ a { &:first-of-type ~ a {
.var(color, menu-2ndlvl-active-hover-color); color: @menu-2ndlvl-active-hover-color;
.var(background-color, menu-2ndlvl-active-hover-bg-color); background-color: @menu-2ndlvl-active-hover-bg-color;
} }
} }
} }
@ -221,26 +221,26 @@
background: transparent url('../img/icons/search_white.png') no-repeat 1em center; background: transparent url('../img/icons/search_white.png') no-repeat 1em center;
background-size: 1em auto; background-size: 1em auto;
border: none; border: none;
.var(color, menu-color); color: @menu-color;
line-height: 2.167em; line-height: 2.167em;
padding: .25em; padding: .25em;
padding-left: @icon-width + .75em; padding-left: @icon-width + .75em;
width: 100%; width: 100%;
&:focus::placeholder { &:focus::placeholder {
.var(color, menu-color); color: @menu-color;
} }
&:focus::-ms-input-placeholder { &:focus::-ms-input-placeholder {
color: @menu-color; color: @menu-color;
} }
&.active { &.active {
.var(background-color, menu-active-bg-color); background-color: @menu-active-bg-color;
} }
&:hover, &:hover,
&:focus { &:focus {
.var(background-color, menu-search-hover-bg-color); background-color: @menu-search-hover-bg-color;
} }
} }
@ -258,9 +258,9 @@
#layout:not(.minimal-layout).sidebar-collapsed #menu .nav-level-1 > .nav-item.hover, #layout:not(.minimal-layout).sidebar-collapsed #menu .nav-level-1 > .nav-item.hover,
#layout:not(.minimal-layout) #menu .nav-level-1 > .nav-item:not(.active).hover { #layout:not(.minimal-layout) #menu .nav-level-1 > .nav-item:not(.active).hover {
> .nav-level-2 { > .nav-level-2 {
.var(background-color, menu-flyout-bg-color); background-color: @menu-flyout-bg-color;
border: 1px solid; border: 1px solid;
.var(border-color, gray-light); border-color: @gray-light;
border-radius: .25em; border-radius: .25em;
box-shadow: 0 0 1em 0 rgba(0,0,0,.3); box-shadow: 0 0 1em 0 rgba(0,0,0,.3);
padding: @vertical-padding 0; padding: @vertical-padding 0;
@ -271,11 +271,9 @@
&:after { &:after {
.transform(rotate(45deg)); .transform(rotate(45deg));
.var(background-color, body-bg-color); background-color: @body-bg-color;
border-bottom: 1px solid; border-bottom: 1px solid @gray-light;
.var(border-bottom-color, gray-light); border-left: 1px solid @gray-light;
border-left: 1px solid;
.var(border-left-color, gray-light);
content: ""; content: "";
display: block; display: block;
height: 1.1em; height: 1.1em;
@ -291,7 +289,7 @@
position: relative; position: relative;
> a { > a {
.var(color, menu-flyout-color); color: @menu-flyout-color;
&:first-of-type { &:first-of-type {
padding-left: 1.5em; padding-left: 1.5em;
@ -302,13 +300,13 @@
a:hover, a:focus { a:hover, a:focus {
&:first-of-type, &:first-of-type,
&:first-of-type ~ a { &:first-of-type ~ a {
.var(background-color, menu-2ndlvl-highlight-bg-color); background-color: @menu-2ndlvl-highlight-bg-color;
} }
} }
} }
&.active > a { &.active > a {
.var(color, menu-color); color: @menu-color;
} }
// Hide activity caret when displayed as flyout // Hide activity caret when displayed as flyout
@ -376,7 +374,7 @@
li { li {
display: block; display: block;
a, button[type="submit"] { a, button[type="submit"] {
.var(background-color, body-bg-color); background-color: @body-bg-color;
border: none; border: none;
left: -999px; left: -999px;
padding: @vertical-padding @horizontal-padding; padding: @vertical-padding @horizontal-padding;
@ -410,13 +408,13 @@
} }
.search-input:focus ~ .search-reset:hover { .search-input:focus ~ .search-reset:hover {
.var(background-color, menu-active-hover-bg-color); background-color: @menu-active-hover-bg-color;
} }
.search-reset { .search-reset {
background: none; background: none;
border: 0; border: 0;
.var(color, menu-color); color: @menu-color;
cursor: pointer; cursor: pointer;
display: none; display: none;
height: 100%; height: 100%;
@ -428,7 +426,7 @@
&:focus, &:focus,
&:hover { &:hover {
.var(background-color, menu-search-hover-bg-color); background-color: @menu-search-hover-bg-color;
outline: none; outline: none;
} }
} }
@ -441,19 +439,19 @@ input[type=text].search-input {
} }
.search-input:focus:-moz-placeholder { // FF 18- .search-input:focus:-moz-placeholder { // FF 18-
.var(color, gray-light); color: @gray-light;
} }
.search-input:focus::-moz-placeholder { // FF 19+ .search-input:focus::-moz-placeholder { // FF 19+
.var(color, gray-light); color: @gray-light;
} }
.search-input:focus:-ms-input-placeholder { .search-input:focus:-ms-input-placeholder {
.var(color, gray-light); color: @gray-light;
} }
.search-input:focus::-webkit-input-placeholder { .search-input:focus::-webkit-input-placeholder {
.var(color, gray-light); color: @gray-light;
} }
.search-input ~ .search-reset { .search-input ~ .search-reset {
@ -480,14 +478,14 @@ input[type=text].search-input {
background: none; background: none;
border: none; border: none;
padding: 0; padding: 0;
.var(color, text-color-light); color: @text-color-light;
position: absolute; position: absolute;
bottom: 0.2em; bottom: 0.2em;
right: 0; right: 0;
z-index: 3; z-index: 3;
i { i {
.var(background-color, body-bg-color); background-color: @body-bg-color;
border-radius: .25em 0 0 .25em; border-radius: .25em 0 0 .25em;
font-size: 1.125em; font-size: 1.125em;
width: 2em; width: 2em;
@ -499,7 +497,7 @@ input[type=text].search-input {
&:hover, &:focus { &:hover, &:focus {
i { i {
.var(color, menu-highlight-color); color: @menu-highlight-color;
} }
} }
} }
@ -526,7 +524,7 @@ html.no-js #toggle-sidebar {
&.nav-item:not(.badge-nav-item) { &.nav-item:not(.badge-nav-item) {
&:not(.selected):not(.active) a:hover, &:not(.selected):not(.active) a:hover,
&:not(.selected):not(.active) a:focus { &:not(.selected):not(.active) a:focus {
.var(background-color, menu-2ndlvl-highlight-bg-color); background-color: @menu-2ndlvl-highlight-bg-color;
} }
} }
} }
@ -561,7 +559,7 @@ html.no-js #toggle-sidebar {
a:focus { a:focus {
&:first-of-type, &:first-of-type,
&:first-of-type ~ a { &:first-of-type ~ a {
.var(background-color, menu-2ndlvl-highlight-bg-color); background-color: @menu-2ndlvl-highlight-bg-color;
} }
} }
} }

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

@ -1,26 +1,20 @@
/*! Icinga Web 2 | (c) 2015 Icinga Development Team | GPLv2+ */ /*! Icinga Web 2 | (c) 2015 Icinga Development Team | GPLv2+ */
.box-shadow(@x: 0.2em; @y: 0.2em; @blur: 0.2em; @spread: 0; @color: rgba(83, 83, 83, 0.25)) { .box-shadow(@x: 0.2em; @y: 0.2em; @blur: 0.2em; @spread: 0; @color: rgba(83, 83, 83, 0.25)) {
-webkit-box-shadow: @x @y @blur @spread extract-variable-default(@color);
-webkit-box-shadow: @arguments; -webkit-box-shadow: @arguments;
-moz-box-shadow: @x @y @blur @spread extract-variable-default(@color);
-moz-box-shadow: @arguments; -moz-box-shadow: @arguments;
box-shadow: @x @y @blur @spread extract-variable-default(@color);
box-shadow: @arguments; box-shadow: @arguments;
} }
.button( .button(
@background-color: ~"var(--body-bg-color, @{body-bg-color})", @background-color: @body-bg-color,
@border-font-color: ~"var(--icinga-blue, @{icinga-blue})", @border-font-color: @icinga-blue,
@color-dark: ~"var(--icinga-blue-dark, @{icinga-blue-dark})" @color-dark: @icinga-blue-dark
) { ) {
.rounded-corners(3px); .rounded-corners(3px);
background-color: extract-variable-default(@background-color);
background-color: @background-color; background-color: @background-color;
border: extract-variable-default(2px solid @border-font-color);
border: 2px solid @border-font-color; border: 2px solid @border-font-color;
color: extract-variable-default(@border-font-color);
color: @border-font-color; color: @border-font-color;
cursor: pointer; cursor: pointer;
line-height: normal; line-height: normal;
@ -34,19 +28,14 @@
&:focus, &:focus,
&:hover, &:hover,
&.btn-primary { &.btn-primary {
background-color: extract-variable-default(@border-font-color);
background-color: @border-font-color; background-color: @border-font-color;
color: extract-variable-default(@background-color);
color: @background-color; color: @background-color;
} }
&.btn-primary:focus, &.btn-primary:focus,
&.btn-primary:hover { &.btn-primary:hover {
background-color: extract-variable-default(@color-dark);
background-color: @color-dark; background-color: @color-dark;
border-color: extract-variable-default(@color-dark);
border-color: @color-dark; border-color: @color-dark;
color: extract-variable-default(@background-color);
color: @background-color; color: @background-color;
} }
@ -153,90 +142,85 @@
// Mixin for stateful foreground colors, e.g. text or icons // Mixin for stateful foreground colors, e.g. text or icons
.fg-stateful { .fg-stateful {
&.state-ok { &.state-ok {
.var(color, color-ok); color: @color-ok;
} }
&.state-up { &.state-up {
.var(color, color-up); color: @color-up;
} }
&.state-warning { &.state-warning {
.var(color, color-warning); color: @color-warning;
&.handled { &.handled {
.var(color, color-warning-handled); color: @color-warning-handled;
} }
} }
&.state-critical { &.state-critical {
.var(color, color-critical); color: @color-critical;
&.handled { &.handled {
.var(color, color-critical-handled); color: @color-critical-handled;
} }
} }
&.state-down { &.state-down {
.var(color, color-down); color: @color-down;
&.handled { &.handled {
.var(color, color-down-handled); color: @color-down-handled;
} }
} }
&.state-unreachable { &.state-unreachable {
.var(color, color-unreachable); color: @color-unreachable;
&.handled { &.handled {
.var(color, color-unreachable-handled); color: @color-unreachable-handled;
} }
} }
&.state-unknown { &.state-unknown {
.var(color, color-unknown); color: @color-unknown;
&.handled { &.handled {
.var(color, color-unknown-handled); color: @color-unknown-handled;
} }
} }
&.state-pending { &.state-pending {
.var(color, color-pending); color: @color-pending;
} }
} }
// Mixin for stateful background colors // Mixin for stateful background colors
.bg-stateful { .bg-stateful {
&.state-ok { &.state-ok {
.var(background-color, color-ok); background-color: @color-ok;
} }
&.state-up { &.state-up {
.var(background-color, color-up); background-color: @color-up;
} }
&.state-warning { &.state-warning {
.var(background-color, color-warning); background-color: @color-warning;
&.handled { &.handled {
.var(background-color, color-warning-handled); background-color: @color-warning-handled;
} }
} }
&.state-critical { &.state-critical {
.var(background-color, color-critical); background-color: @color-critical;
&.handled { &.handled {
.var(background-color, color-critical-handled); background-color: @color-critical-handled;
} }
} }
&.state-down { &.state-down {
.var(background-color, color-down); background-color: @color-down;
&.handled { &.handled {
.var(background-color, color-down-handled); background-color: @color-down-handled;
} }
} }
&.state-unreachable { &.state-unreachable {
.var(background-color, color-unreachable); background-color: @color-unreachable;
&.handled { &.handled {
.var(background-color, color-unreachable-handled); background-color: @color-unreachable-handled;
} }
} }
&.state-unknown { &.state-unknown {
.var(background-color, color-unknown); background-color: @color-unknown;
&.handled { &.handled {
.var(background-color, color-unknown-handled); background-color: @color-unknown-handled;
} }
} }
&.state-pending { &.state-pending {
.var(background-color, color-pending); background-color: @color-pending;
} }
} }
.var(@property, @variable) {
@{property}: @@variable;
@{property}: var(~"--@{variable}", @@variable);
}

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

@ -64,10 +64,10 @@
top: .75em; top: .75em;
right: 1em; right: 1em;
.var(background-color, "gray"); background-color: @gray;
border: none; border: none;
border-radius: 50%; border-radius: 50%;
.var(color, text-color-inverted); color: @text-color-inverted;
height: 1.5em; height: 1.5em;
line-height: 1em; line-height: 1em;
padding: 0; padding: 0;
@ -102,7 +102,7 @@
align-items: stretch; align-items: stretch;
flex-direction: column; flex-direction: column;
.var(background-color, body-bg-color); background-color: @body-bg-color;
border-radius: .5em; border-radius: .5em;
box-shadow: 0 0 2em 0 rgba(0, 0, 0, .6); box-shadow: 0 0 2em 0 rgba(0, 0, 0, .6);
flex: 1; flex: 1;

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

@ -141,8 +141,7 @@
// Columns // Columns
#layout.twocols #col2 { #layout.twocols #col2 {
border-left: 1px solid; border-left: 1px solid @gray-lighter;
.var(border-left-color, gray-lighter);
} }
#layout.twocols.wide-layout #col2 { #layout.twocols.wide-layout #col2 {
@ -160,8 +159,7 @@
} }
#layout.twocols #col2 { #layout.twocols #col2 {
border-left: 1px solid; border-left: 1px solid @gray-lighter;
.var(border-left-color, gray-lighter);
&:empty { &:empty {
display: flex; display: flex;

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

@ -16,7 +16,7 @@
.setup-header { .setup-header {
width: 100%; width: 100%;
height: 5.5em; height: 5.5em;
.var(background-color, icinga-blue); background-color: @icinga-blue;
text-align: center; text-align: center;
img { img {
@ -103,7 +103,7 @@
} }
&.complete { &.complete {
.var(background-color, color-ok); background-color: @color-ok;
} }
&.visited { &.visited {
@ -227,7 +227,7 @@ form#setup_requirements {
padding: 0.4em; padding: 0.4em;
&.fulfilled { &.fulfilled {
.var(background-color, color-ok); background-color: @color-ok;
} }
&.not-available { &.not-available {
@ -236,7 +236,7 @@ form#setup_requirements {
} }
&.missing { &.missing {
.var(background-color, color-critical); background-color: @color-critical;
} }
} }
} }
@ -313,11 +313,11 @@ form#setup_requirements {
color: white; color: white;
&.success { &.success {
.var(background-color, color-ok); background-color: @color-ok;
} }
&.failure { &.failure {
.var(background-color, color-critical); background-color: @color-critical;
} }
} }
@ -370,16 +370,16 @@ form#setup_requirements {
text-align: left; text-align: left;
font-size: 0.9em; font-size: 0.9em;
border: 1px solid; border: 1px solid;
.var(border-color, gray-light); border-color: @gray-light;
h3 { h3 {
padding: 0.2em; padding: 0.2em;
margin: -1em -1em 1em; margin: -1em -1em 1em;
text-align: center; text-align: center;
.var(color, text-color); color: @text-color;
.var(background-color, gray-lightest); background-color: @gray-lightest;
border: 1px solid; border: 1px solid;
.var(border-color, gray-light); border-color: @gray-light;
} }
img { img {
@ -423,8 +423,8 @@ form#setup_requirements {
margin: 1em; margin: 1em;
padding: 0.3em; padding: 0.3em;
border: 1px solid; border: 1px solid;
.var(border-color, gray-semilight); border-color: @gray-semilight;
.var(background-color, gray-lightest); background-color: @gray-lightest;
.header { .header {
height: 2.5em; height: 2.5em;

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

@ -3,7 +3,7 @@
// Styles for tab navigation of containers // Styles for tab navigation of containers
.tabs { .tabs {
.var(background-color, menu-bg-color); background-color: @menu-bg-color;
letter-spacing: -0.417em; letter-spacing: -0.417em;
} }
@ -27,18 +27,18 @@
} }
> a { > a {
.var(color, menu-color); color: @menu-color;
&:hover { &:hover {
text-decoration: none; text-decoration: none;
.var(background, tab-hover-bg-color); background: @tab-hover-bg-color;
} }
} }
&.active > a, &.active > a,
> a:focus { > a:focus {
.var(background-color, body-bg-color); background-color: @body-bg-color;
.var(color, text-color); color: @text-color;
} }
} }
@ -55,8 +55,8 @@
.tabs > li > .close-container-control:hover, .tabs > li > .close-container-control:hover,
.tabs > li > .refresh-container-control:focus, .tabs > li > .refresh-container-control:focus,
.tabs > li > .refresh-container-control:hover { .tabs > li > .refresh-container-control:hover {
.var(background-color, body-bg-color); background-color: @body-bg-color;
.var(color, text-color); color: @text-color;
text-decoration: none; text-decoration: none;
} }
@ -64,9 +64,9 @@
.box-shadow(); .box-shadow();
.rounded-corners(0 0 0.3em 0.3em); .rounded-corners(0 0 0.3em 0.3em);
.var(background-color, body-bg-color); background-color: @body-bg-color;
border: 1px solid; border: 1px solid;
.var(border-color, gray-light); border-color: @gray-light;
border-top: none; border-top: none;
margin-left: -1px; margin-left: -1px;
min-width: 14em; min-width: 14em;
@ -74,7 +74,7 @@
} }
.tabs > .dropdown-nav-item > ul > li:hover > a { .tabs > .dropdown-nav-item > ul > li:hover > a {
.var(background-color, gray-lighter); background-color: @gray-lighter;
text-decoration: none; text-decoration: none;
} }

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

@ -1,21 +1,20 @@
/*! Icinga Web 2 | (c) 2014 Icinga Development Team | GPLv2+ */ /*! Icinga Web 2 | (c) 2014 Icinga Development Team | GPLv2+ */
#announcements > ul { #announcements > ul {
.var(background-color, body-bg-color); background-color: @body-bg-color;
list-style: none; list-style: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
> li { > li {
border-bottom: 1px solid; border-bottom: 1px solid @gray-lighter;
.var(border-bottom-color, gray-lighter);
line-height: 1.5em; line-height: 1.5em;
padding: 0.5em 1em 0.5em 3em; padding: 0.5em 1em 0.5em 3em;
position: relative; position: relative;
&:before { &:before {
.var(color, icinga-blue); color: @icinga-blue;
content: "\e811"; content: "\e811";
font-family: 'ifont'; font-family: 'ifont';
@ -28,7 +27,7 @@
} }
a { a {
.var(color, icinga-blue); color: @icinga-blue;
} }
.message { .message {
@ -60,13 +59,13 @@
color: #fff; color: #fff;
&:hover .icon-cancel { &:hover .icon-cancel {
.var(color, icinga-blue); color: @icinga-blue;
} }
} }
#application-state-summary > div { #application-state-summary > div {
.var(background-color, color-critical); background-color: @color-critical;
.var(color, text-color-on-icinga-blue); color: @text-color-on-icinga-blue;
line-height: 1.5em; line-height: 1.5em;
padding: 0.5em 1em 0.5em 3em; padding: 0.5em 1em 0.5em 3em;
margin-left: 12em; margin-left: 12em;
@ -90,7 +89,7 @@
} }
> form .icon-cancel:before { > form .icon-cancel:before {
.var(color, text-color-on-icinga-blue); color: @text-color-on-icinga-blue;
} }
} }
@ -115,7 +114,7 @@
-moz-box-shadow: 0 0 0.5em 0 rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 0 0.5em 0 rgba(0, 0, 0, 0.2);
box-shadow: 0 0 0.5em 0 rgba(0, 0, 0, 0.2); box-shadow: 0 0 0.5em 0 rgba(0, 0, 0, 0.2);
.var(background-color, tr-hover-color); background-color: @tr-hover-color;
text-decoration: none; text-decoration: none;
} }
} }
@ -134,7 +133,7 @@
} }
.link-description { .link-description {
.var(color, text-color-light); color: @text-color-light;
} }
.link-icon { .link-icon {
@ -218,17 +217,17 @@ table.multiselect tr[href] td {
} }
ul.tree li.active { ul.tree li.active {
.var(background-color, gray-lightest); background-color: @gray-lightest;
} }
button { button {
padding: .5em; padding: .5em;
border: none; border: none;
background: none; background: none;
.var(color, text-color); color: @text-color;
&:hover, &:focus { &:hover, &:focus {
.var(color, icinga-blue); color: @icinga-blue;
} }
} }
@ -249,7 +248,7 @@ form.role-form {
} }
.control-label-group em { .control-label-group em {
.var(color, text-color-light); color: @text-color-light;
font-style: normal; font-style: normal;
} }
@ -265,15 +264,15 @@ form.role-form {
.privilege-preview .icon { .privilege-preview .icon {
&.granted { &.granted {
.var(color, color-granted); color: @color-granted;
} }
&.refused { &.refused {
.var(color, color-refused); color: @color-refused;
} }
&.restricted { &.restricted {
.var(color, color-restricted); color: @color-restricted;
} }
} }
} }
@ -286,7 +285,7 @@ form.role-form {
h3 em { h3 em {
font-size: .857em; font-size: .857em;
font-weight: normal; font-weight: normal;
.var(color, text-color-light); color: @text-color-light;
} }
h4 { h4 {
@ -303,18 +302,17 @@ form.role-form {
text-align: center; text-align: center;
&.icon-ok { &.icon-ok {
.var(color, color-granted); color: @color-granted;
} }
&.icon-cancel { &.icon-cancel {
.var(color, color-refused); color: @color-refused;
} }
} }
} }
.collapsible-control { .collapsible-control {
border-bottom: 1px solid; border-bottom: 1px solid @gray-light;
.var(border-bottom-color, gray-light);
cursor: pointer; cursor: pointer;
-webkit-touch-callout: none; -webkit-touch-callout: none;
-webkit-user-select: none; -webkit-user-select: none;
@ -390,7 +388,7 @@ ul.tree li::before, ul.tree li::after {
position: absolute; position: absolute;
right: auto; right: auto;
left: -0.2em; left: -0.2em;
.var(border-color, gray-light); border-color: @gray-light;
border-style: dotted; border-style: dotted;
border-width: 0; border-width: 0;
} }
@ -432,22 +430,22 @@ ul.tree li a {
line-height: 2em; line-height: 2em;
padding: 0 .5em; padding: 0 .5em;
text-decoration: none; text-decoration: none;
.var(color, "gray"); color: @gray;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: 0.8em 0.4em; background-position: 0.8em 0.4em;
} }
ul.tree li a.error { ul.tree li a.error {
.var(color, color-critical-handled); color: @color-critical-handled;
} }
ul.tree li a:hover { ul.tree li a:hover {
.var(color, text-color); color: @text-color;
text-decoration: underline; text-decoration: underline;
} }
ul.tree li a.error:hover { ul.tree li a.error:hover {
.var(color, color-critical); color: @color-critical;
} }
/* charts should grow as much as possible but never beyond the current viewport's size */ /* charts should grow as much as possible but never beyond the current viewport's size */
@ -486,9 +484,9 @@ ul.tree li a.error:hover {
position: relative; position: relative;
.flyover-content { .flyover-content {
.var(background-color, body-bg-color); background-color: @body-bg-color;
border: 1px solid; border: 1px solid;
.var(border-color, gray-lighter); border-color: @gray-lighter;
box-shadow: 0 0 .5em 0 rgba(0, 0, 0, 0.2); box-shadow: 0 0 .5em 0 rgba(0, 0, 0, 0.2);
position: absolute; position: absolute;
padding: @vertical-padding @horizontal-padding; padding: @vertical-padding @horizontal-padding;
@ -496,11 +494,9 @@ ul.tree li a.error:hover {
} }
&.flyover-arrow-top .flyover-content:before { &.flyover-arrow-top .flyover-content:before {
.var(background, body-bg-color); background: @body-bg-color;
border-left: 1px solid; border-left: 1px solid @gray-lighter;
.var(border-left-color, gray-lighter); border-top: 1px solid @gray-lighter;
border-top: 1px solid;
.var(border-top-color, gray-lighter);
content: ""; content: "";
height: 1em; height: 1em;
-ms-transform: rotate(45deg); -ms-transform: rotate(45deg);
@ -524,58 +520,58 @@ ul.tree li a.error:hover {
} }
.slice-state-ok { .slice-state-ok {
.var(stroke, color-ok); stroke: @color-ok;
.var(background, color-ok); background: @color-ok;
} }
.slice-state-warning-handled { .slice-state-warning-handled {
.var(stroke, color-warning-handled); stroke: @color-warning-handled;
.var(background, color-warning-handled); background: @color-warning-handled;
} }
.slice-state-warning { .slice-state-warning {
.var(stroke, color-warning); stroke: @color-warning;
.var(background, color-unreachable-handled); background: @color-unreachable-handled;
} }
.slice-state-critical-handled { .slice-state-critical-handled {
.var(stroke, color-critical-handled); stroke: @color-critical-handled;
.var(background, color-critical-handled); background: @color-critical-handled;
} }
.slice-state-critical { .slice-state-critical {
.var(stroke, color-critical); stroke: @color-critical;
.var(background, color-critical); background: @color-critical;
} }
.slice-state-unknown-handled { .slice-state-unknown-handled {
.var(stroke, color-unknown-handled); stroke: @color-unknown-handled;
.var(background, color-unknown-handled); background: @color-unknown-handled;
} }
.slice-state-unknown { .slice-state-unknown {
.var(stroke, color-unknown); stroke: @color-unknown;
.var(background, color-unknown); background: @color-unknown;
} }
.slice-state-unreachable-handled { .slice-state-unreachable-handled {
.var(stroke, color-unreachable-handled); stroke: @color-unreachable-handled;
.var(background, color-unreachable-handled); background: @color-unreachable-handled;
} }
.slice-state-unreachable { .slice-state-unreachable {
.var(stroke, color-unreachable); stroke: @color-unreachable;
.var(background, color-unreachable); background: @color-unreachable;
} }
.slice-state-pending { .slice-state-pending {
.var(stroke, color-pending); stroke: @color-pending;
.var(background, color-pending); background: @color-pending;
} }
.slice-state-not-checked { .slice-state-not-checked {
.var(stroke, gray-light); stroke: @gray-light;
.var(background, gray-light); background: @gray-light;
} }
.donut { .donut {
@ -592,7 +588,7 @@ ul.tree li a.error:hover {
.donut-label { .donut-label {
font-weight: bold; font-weight: bold;
.var(fill, text-color); fill: @text-color;
} }
.donut-label { .donut-label {
@ -601,7 +597,7 @@ ul.tree li a.error:hover {
} }
.donut-label-big { .donut-label-big {
.var(color, gray-light); color: @gray-light;
.fg-stateful(); .fg-stateful();
font-size: 6em; font-size: 6em;
line-height: 0; line-height: 0;
@ -612,7 +608,7 @@ ul.tree li a.error:hover {
} }
.donut-label-small { .donut-label-small {
.var(fill, text-color); fill: @text-color;
font-size: 1.2em; font-size: 1.2em;
text-anchor: middle; text-anchor: middle;
-moz-transform: translateY(0.35em); -moz-transform: translateY(0.35em);