css: Don't use `.var()` or `var()` calls explicitly
This commit is contained in:
Johannes Meyer
parent
6e034b753e
commit
7a938f6b02
|
|
@ -2,27 +2,20 @@
|
|||
|
||||
// Mixins
|
||||
|
||||
.gradient(@a: ~"var(--gray-lighter, @{gray-lighter})"; @b: ~"var(--gray-lightest, @{gray-lightest})") {
|
||||
background: extract-variable-default(@a);
|
||||
.gradient(@a: @gray-lighter; @b: @gray-lightest) {
|
||||
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-linear-gradient(top, extract-variable-default(@a, true), extract-variable-default(@b, true));
|
||||
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: -ms-linear-gradient(top, extract-variable-default(@a, true), extract-variable-default(@b, true));
|
||||
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: linear-gradient(to bottom, extract-variable-default(@a, true), extract-variable-default(@b, true));
|
||||
background: linear-gradient(to bottom, @a, @b);
|
||||
}
|
||||
|
||||
// General styles
|
||||
|
||||
code {
|
||||
.var(color, icinga-blue);
|
||||
color: @icinga-blue;
|
||||
font-family: @font-family-fixed;
|
||||
}
|
||||
|
||||
|
|
@ -31,13 +24,11 @@ pre > code {
|
|||
}
|
||||
|
||||
.chapter a {
|
||||
border-bottom: 1px dotted;
|
||||
.var(border-bottom-color, gray-light);
|
||||
border-bottom: 1px dotted @gray-light;
|
||||
font-weight: @font-weight-bold;
|
||||
|
||||
&:hover {
|
||||
border-bottom: 1px solid;
|
||||
.var(border-bottom-color, text-color);
|
||||
border-bottom: 1px solid @text-color;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -49,8 +40,8 @@ pre > code {
|
|||
.search-highlight {
|
||||
.rounded-corners();
|
||||
|
||||
.var(background, icinga-blue);
|
||||
.var(color, text-color-on-icinga-blue);
|
||||
background: @icinga-blue;
|
||||
color: @text-color-on-icinga-blue;
|
||||
padding: 0 0.3em 0 0.3em;
|
||||
}
|
||||
|
||||
|
|
@ -70,7 +61,7 @@ pre > code {
|
|||
|
||||
a {
|
||||
&:before {
|
||||
.var(color, icinga-blue);
|
||||
color: @icinga-blue;
|
||||
content: counters(li,".") " ";
|
||||
display: inline-block;
|
||||
font-size: small;
|
||||
|
|
@ -97,7 +88,7 @@ tbody > tr:nth-child(odd) {
|
|||
}
|
||||
|
||||
tbody > tr:nth-child(even) {
|
||||
.var(background, body-bg-color);
|
||||
background: @body-bg-color;
|
||||
}
|
||||
|
||||
td, th {
|
||||
|
|
@ -111,8 +102,7 @@ td {
|
|||
}
|
||||
|
||||
th {
|
||||
border-bottom: 2px solid;
|
||||
.var(border-bottom-color, icinga-blue);
|
||||
border-bottom: 2px solid @icinga-blue;
|
||||
font-weight: @font-weight-bold;
|
||||
text-align: left;
|
||||
text-transform: uppercase;
|
||||
|
|
|
|||
|
|
@ -2,9 +2,8 @@
|
|||
|
||||
.monitoring-statusbar {
|
||||
position: relative;
|
||||
.var(background-color, body-bg-color);
|
||||
border-top: 1px solid;
|
||||
.var(border-top-color, gray-lighter);
|
||||
background-color: @body-bg-color;
|
||||
border-top: 1px solid @gray-lighter;
|
||||
padding: .25em @gutter;
|
||||
line-height: 1.3;
|
||||
|
||||
|
|
@ -32,11 +31,11 @@
|
|||
font-size: 1.25em;
|
||||
|
||||
&.-active {
|
||||
.var(color, icinga-blue);
|
||||
color: @icinga-blue;
|
||||
}
|
||||
|
||||
&.-inactive {
|
||||
.var(color, gray-light);
|
||||
color: @gray-light;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -71,7 +70,7 @@
|
|||
color: white;
|
||||
}
|
||||
.group-grid-cell > div.state-none {
|
||||
.var(background-color, gray-light);
|
||||
background-color: @gray-light;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -156,10 +155,10 @@
|
|||
}
|
||||
|
||||
.service-on {
|
||||
.var(color, text-color-light);
|
||||
color: @text-color-light;
|
||||
|
||||
> a {
|
||||
.var(color, text-color);
|
||||
color: @text-color;
|
||||
letter-spacing: normal;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
|
@ -187,7 +186,7 @@
|
|||
}
|
||||
|
||||
li {
|
||||
.var(color, icinga-blue);
|
||||
color: @icinga-blue;
|
||||
}
|
||||
|
||||
a,
|
||||
|
|
@ -196,7 +195,7 @@
|
|||
padding: .25em .5em;
|
||||
|
||||
&:hover {
|
||||
.var(background-color, gray-lighter);
|
||||
background-color: @gray-lighter;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -255,7 +254,7 @@
|
|||
.tactical div.box.header {
|
||||
margin: 10px;
|
||||
min-height: 8em;
|
||||
.var(color, text-color-inverted);
|
||||
color: @text-color-inverted;
|
||||
font-size: @font-size-dashboard;
|
||||
}
|
||||
|
||||
|
|
@ -264,12 +263,12 @@
|
|||
}
|
||||
|
||||
div.box.ok_hosts.state_up {
|
||||
.var(background-color, color-ok);
|
||||
background-color: @color-ok;
|
||||
border: 1px solid white;
|
||||
}
|
||||
|
||||
div.box.problem_hosts.state_down {
|
||||
.var(background-color, color-critical);
|
||||
background-color: @color-critical;
|
||||
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 {
|
||||
border: 1px solid;
|
||||
.var(border-color, gray-lighter);
|
||||
border-left: 15px solid;
|
||||
.var(border-left-color, "gray");
|
||||
border: 1px solid @gray-lighter;
|
||||
border-left: 15px @gray;
|
||||
}
|
||||
|
||||
div.box.monitoringfeatures div.box-separator {
|
||||
color: white;
|
||||
.var(background-color, color-ok);
|
||||
background-color: @color-ok;
|
||||
}
|
||||
|
||||
div.box.monitoringfeatures div.feature-highlight {
|
||||
.var(background-color, color-critical);
|
||||
background-color: @color-critical;
|
||||
}
|
||||
|
||||
div.box.monitoringfeatures a.feature-highlight {
|
||||
}
|
||||
|
||||
div.box.hostservicechecks {
|
||||
border: 1px solid;
|
||||
.var(border-color, gray-lighter);
|
||||
border-left: 15px solid;
|
||||
.var(border-left-color, "gray");
|
||||
border: 1px solid @gray-lighter;
|
||||
border-left: 15px @gray;
|
||||
}
|
||||
|
||||
div.box.hostservicechecks th {
|
||||
|
|
@ -320,18 +315,15 @@ div.box.hostservicechecks th {
|
|||
div.box.process {
|
||||
width: 100%;
|
||||
max-width: 50em;
|
||||
border: 1px solid;
|
||||
.var(border-color, gray-lighter);
|
||||
border-left: 15px solid;
|
||||
.var(border-left-color, "gray");
|
||||
border: 1px solid @gray-lighter;
|
||||
border-left: 15px @gray;
|
||||
margin-bottom: 1em;
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
.process div.box.header {
|
||||
min-height: 5em;
|
||||
border-bottom:1px solid;
|
||||
.var(border-bottom-color, gray-lighter);
|
||||
border-bottom: 1px solid @gray-lighter;
|
||||
}
|
||||
|
||||
.process > .boxview > div.box {
|
||||
|
|
@ -342,8 +334,7 @@ div.box.process {
|
|||
margin-top: 0;
|
||||
margin-bottom: 1em;
|
||||
padding-bottom: 1em;
|
||||
border-bottom:1px solid;
|
||||
.var(border-bottom-color, gray-lighter);
|
||||
border-bottom: 1px solid @gray-lighter;
|
||||
}
|
||||
|
||||
.process th {
|
||||
|
|
@ -358,7 +349,7 @@ div.box.process {
|
|||
}
|
||||
|
||||
div.backend-running {
|
||||
.var(background, color-ok);
|
||||
background: @color-ok;
|
||||
color: white;
|
||||
text-align: center;
|
||||
margin-top: 1em;
|
||||
|
|
@ -370,7 +361,7 @@ div.backend-running {
|
|||
}
|
||||
|
||||
div.backend-not-running {
|
||||
.var(background, color-critical);
|
||||
background: @color-critical;
|
||||
color: white;
|
||||
text-align: center;
|
||||
padding: 0.1em;
|
||||
|
|
@ -382,16 +373,13 @@ div.backend-not-running {
|
|||
div.box.features {
|
||||
width: 100%;
|
||||
max-width: 50em;
|
||||
border: 1px solid;
|
||||
.var(border-color, gray-lighter);
|
||||
border-left: 15px solid;
|
||||
.var(border-left-color, "gray");
|
||||
border: 1px solid @gray-lighter;
|
||||
border-left: 15px @gray;
|
||||
}
|
||||
|
||||
.features div.box.header {
|
||||
min-height: 5em;
|
||||
border-bottom: 1px solid;
|
||||
.var(border-bottom-color, gray-lighter);
|
||||
border-bottom: 1px solid @gray-lighter;
|
||||
}
|
||||
|
||||
.features > .boxview > div.box {
|
||||
|
|
@ -402,8 +390,7 @@ div.box.features {
|
|||
margin-top: 0;
|
||||
margin-bottom: 1em;
|
||||
padding-bottom: 1em;
|
||||
border-bottom: 1px solid;
|
||||
.var(border-bottom-color, gray-lighter);
|
||||
border-bottom: 1px solid @gray-lighter;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -412,11 +399,9 @@ div.box.features {
|
|||
div.box.stats {
|
||||
width: 100%;
|
||||
max-width: 50em;
|
||||
border: 1px solid;
|
||||
.var(border-color, gray-lighter);
|
||||
border-left: 15px solid;
|
||||
.var(border-left-color, "gray");
|
||||
.var(color, text-color);
|
||||
border: 1px solid @gray-lighter;
|
||||
border-left: 15px @gray;
|
||||
color: @text-color;
|
||||
}
|
||||
|
||||
.stats > .boxview > div.box {
|
||||
|
|
@ -429,13 +414,12 @@ div.box.stats {
|
|||
}
|
||||
|
||||
.stats > table > thead {
|
||||
.var(color, "gray");
|
||||
color: @gray;
|
||||
}
|
||||
|
||||
.stats > h2 {
|
||||
text-align: left;
|
||||
border-bottom: 1px solid;
|
||||
.var(border-bottom-color, gray-lighter);
|
||||
border-bottom: 1px solid @gray-lighter;
|
||||
|
||||
> .hosts-summary,
|
||||
> .services-summary {
|
||||
|
|
@ -455,10 +439,8 @@ div.box.stats {
|
|||
div.timeline-legend {
|
||||
padding: 0.5em;
|
||||
margin-top: 2em;
|
||||
border: 1px solid;
|
||||
.var(border-color, gray-lighter);
|
||||
border-left: 15px solid;
|
||||
.var(border-left-color, "gray");
|
||||
border: 1px solid @gray-lighter;
|
||||
border-left-width: 15px;
|
||||
|
||||
h2 {
|
||||
margin: 0;
|
||||
|
|
@ -478,7 +460,7 @@ div.timeline-legend {
|
|||
font-weight: @font-weight-bold;
|
||||
font-size: 11px;
|
||||
text-align: center;
|
||||
.var(color, text-color-inverted);
|
||||
color: @text-color-inverted;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
padding-top: 2px;
|
||||
|
|
@ -624,7 +606,7 @@ form.instance-features span.description, form.object-features span.description {
|
|||
text-align: left;
|
||||
margin-right: 0;
|
||||
width: @name-value-table-name-width;
|
||||
.var(color, text-color-light);
|
||||
color: @text-color-light;
|
||||
|
||||
label {
|
||||
font-size: inherit;
|
||||
|
|
@ -663,50 +645,49 @@ form.instance-features span.description, form.object-features span.description {
|
|||
|
||||
& + span.hint {
|
||||
margin: .35em;
|
||||
.var(color, gray-light);
|
||||
color: @gray-light;
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.plugin-output {
|
||||
border-left: 5px solid;
|
||||
.var(border-left-color, gray-lighter);
|
||||
border-left: 5px solid @gray-lighter;
|
||||
padding: 0.66em 0.33em;
|
||||
|
||||
.state-critical {
|
||||
.var(background-color, color-critical);
|
||||
.var(color, body-bg-color);
|
||||
background-color: @color-critical;
|
||||
color: @body-bg-color;
|
||||
padding: 0.2em;
|
||||
}
|
||||
|
||||
.state-ok {
|
||||
.var(background-color, color-ok);
|
||||
.var(color, body-bg-color);
|
||||
background-color: @color-ok;
|
||||
color: @body-bg-color;
|
||||
padding: 0.2em;
|
||||
}
|
||||
|
||||
.state-unknown {
|
||||
.var(background-color, color-unknown);
|
||||
.var(color, body-bg-color);
|
||||
background-color: @color-unknown;
|
||||
color: @body-bg-color;
|
||||
padding: 0.2em;
|
||||
}
|
||||
|
||||
.state-warning {
|
||||
.var(background-color, color-warning);
|
||||
.var(color, body-bg-color);
|
||||
background-color: @color-warning;
|
||||
color: @body-bg-color;
|
||||
padding: 0.2em;
|
||||
}
|
||||
|
||||
.state-down {
|
||||
.var(background-color, color-down);
|
||||
.var(color, body-bg-color);
|
||||
background-color: @color-down;
|
||||
color: @body-bg-color;
|
||||
padding: 0.2em;
|
||||
}
|
||||
|
||||
.state-up {
|
||||
.var(background-color, color-up);
|
||||
.var(color, body-bg-color);
|
||||
background-color: @color-up;
|
||||
color: @body-bg-color;
|
||||
padding: 0.2em;
|
||||
}
|
||||
}
|
||||
|
|
@ -715,12 +696,10 @@ form.instance-features span.description, form.object-features span.description {
|
|||
.markdown,
|
||||
.plugin-output {
|
||||
a {
|
||||
border-bottom: 1px dotted;
|
||||
.var(border-bottom-color, gray-light);
|
||||
border-bottom: 1px dotted @gray-light;
|
||||
|
||||
&:hover {
|
||||
border-bottom: 1px solid;
|
||||
.var(border-bottom-color, text-color);
|
||||
border-bottom: 1px solid @text-color;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
white-space: nowrap;
|
||||
|
||||
td {
|
||||
.var(color, gray-light);
|
||||
color: @gray-light;
|
||||
padding: 0.2em;
|
||||
text-align: center;
|
||||
width: 1em;
|
||||
|
|
@ -33,14 +33,14 @@
|
|||
font-size: 130%;
|
||||
|
||||
a {
|
||||
.var(color, text-color);
|
||||
color: @text-color;
|
||||
outline: none;
|
||||
|
||||
&:hover {
|
||||
.var(color, text-color-light);
|
||||
color: @text-color-light;
|
||||
}
|
||||
&:focus, &:active {
|
||||
.var(color, icinga-blue);
|
||||
color: @icinga-blue;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -66,7 +66,7 @@ form.filter-toggle {
|
|||
display: inline-block;
|
||||
vertical-align: top;
|
||||
margin-left: .5em;
|
||||
.var(color, gray-light);
|
||||
color: @gray-light;
|
||||
}
|
||||
|
||||
input[type="checkbox"]:checked ~ label {
|
||||
|
|
|
|||
|
|
@ -59,20 +59,20 @@
|
|||
|
||||
// Host name and IP addresses in the host and service detail view
|
||||
.host-meta {
|
||||
.var(color, text-color-light);
|
||||
color: @text-color-light;
|
||||
font-size: @font-size-small;
|
||||
}
|
||||
|
||||
// Link to unhandled services in the hosts overview
|
||||
.host-services-incidents {
|
||||
.var(color, color-critical);
|
||||
color: @color-critical;
|
||||
font-family: @font-family-wide;
|
||||
font-size: @font-size-small;
|
||||
}
|
||||
|
||||
// Notification recipient in the notifications overview
|
||||
.notification-recipient {
|
||||
.var(color, text-color-light);
|
||||
color: @text-color-light;
|
||||
float: right;
|
||||
font-size: @font-size-small;
|
||||
}
|
||||
|
|
@ -104,7 +104,7 @@
|
|||
|
||||
// Plugin output in overviews
|
||||
.overview-plugin-output {
|
||||
.var(color, text-color-light);
|
||||
color: @text-color-light;
|
||||
font-family: @font-family-fixed;
|
||||
font-size: @font-size-small;
|
||||
margin: 0;
|
||||
|
|
@ -146,7 +146,7 @@
|
|||
|
||||
// Service description if in the service detail view
|
||||
.service-meta {
|
||||
.var(color, text-color-light);
|
||||
color: @text-color-light;
|
||||
font-size: @font-size-small;
|
||||
}
|
||||
|
||||
|
|
@ -154,68 +154,61 @@
|
|||
.state-col {
|
||||
&.state-ok,
|
||||
&.state-up {
|
||||
border-left: @border-left-width solid;
|
||||
.var(border-left-color, color-ok);
|
||||
border-left: @border-left-width solid @color-ok;
|
||||
}
|
||||
|
||||
&.state-pending {
|
||||
border-left: @border-left-width solid;
|
||||
.var(border-left-color, color-pending);
|
||||
border-left: @border-left-width solid @color-pending;
|
||||
}
|
||||
|
||||
&.state-critical,
|
||||
&.state-down {
|
||||
.var(background-color, color-critical);
|
||||
.var(color, text-color-inverted);
|
||||
background-color: @color-critical;
|
||||
color: @text-color-inverted;
|
||||
|
||||
&.handled {
|
||||
background-color: inherit;
|
||||
color: inherit;
|
||||
border-left: @border-left-width solid;
|
||||
.var(border-left-color, color-critical-handled);
|
||||
border-left: @border-left-width solid @color-critical-handled;
|
||||
}
|
||||
}
|
||||
|
||||
&.state-warning {
|
||||
.var(background-color, color-warning);
|
||||
.var(color, text-color-inverted);
|
||||
background-color: @color-warning;
|
||||
color: @text-color-inverted;
|
||||
|
||||
&.handled {
|
||||
background-color: inherit;
|
||||
color: inherit;
|
||||
border-left: @border-left-width solid;
|
||||
.var(border-left-color, color-warning-handled);
|
||||
border-left: @border-left-width solid @color-warning-handled;
|
||||
}
|
||||
}
|
||||
|
||||
&.state-unknown {
|
||||
.var(background-color, color-unknown);
|
||||
.var(color, text-color-inverted);
|
||||
background-color: @color-unknown;
|
||||
color: @text-color-inverted;
|
||||
|
||||
&.handled {
|
||||
background-color: inherit;
|
||||
color: inherit;
|
||||
border-left: @border-left-width solid;
|
||||
.var(border-left-color, color-unknown-handled);
|
||||
border-left: @border-left-width solid @color-unknown-handled;
|
||||
}
|
||||
}
|
||||
|
||||
&.state-unreachable {
|
||||
.var(background-color, color-unreachable);
|
||||
.var(color, text-color-inverted);
|
||||
background-color: @color-unreachable;
|
||||
color: @text-color-inverted;
|
||||
|
||||
&.handled {
|
||||
background-color: inherit;
|
||||
color: inherit;
|
||||
border-left: @border-left-width solid;
|
||||
.var(border-left-color, color-unreachable-handled);
|
||||
border-left: @border-left-width solid @color-unreachable-handled;
|
||||
}
|
||||
}
|
||||
|
||||
// State class for history events
|
||||
&.state-no-state {
|
||||
border-left: @border-left-width solid;
|
||||
.var(border-left-color, text-color-light);
|
||||
border-left: @border-left-width solid @text-color-light;
|
||||
}
|
||||
|
||||
* {
|
||||
|
|
@ -263,11 +256,11 @@
|
|||
}
|
||||
|
||||
tr[href].active {
|
||||
.var(background-color, tr-active-color);
|
||||
background-color: @tr-active-color;
|
||||
}
|
||||
|
||||
tr[href]:hover {
|
||||
.var(background-color, tr-hover-color);
|
||||
background-color: @tr-hover-color;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -7,11 +7,11 @@
|
|||
|
||||
.about-social i {
|
||||
font-size: 1.7em;
|
||||
.var(color, text-color);
|
||||
color: @text-color;
|
||||
}
|
||||
|
||||
.about-social i:hover {
|
||||
.var(color, icinga-blue);
|
||||
color: @icinga-blue;
|
||||
}
|
||||
|
||||
.about-links {
|
||||
|
|
@ -23,11 +23,11 @@
|
|||
margin: 0.5em;
|
||||
padding: 0;
|
||||
font-size: 5em;
|
||||
.var(color, text-color);
|
||||
color: @text-color;
|
||||
}
|
||||
|
||||
.about-links i:hover {
|
||||
.var(color, icinga-blue);
|
||||
color: @icinga-blue;
|
||||
}
|
||||
|
||||
.common-table th {
|
||||
|
|
|
|||
|
|
@ -6,10 +6,10 @@
|
|||
li {
|
||||
.rounded-corners(3px);
|
||||
border: 1px solid;
|
||||
.var(border-color, low-sat-blue);
|
||||
border-color: @low-sat-blue;
|
||||
|
||||
&.active {
|
||||
.var(border-color, icinga-blue);
|
||||
border-color: @icinga-blue;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -20,14 +20,13 @@
|
|||
}
|
||||
|
||||
h3 {
|
||||
border-bottom: 1px solid;
|
||||
.var(border-bottom-color, gray-light);
|
||||
border-bottom: 1px solid @gray-light;
|
||||
}
|
||||
|
||||
h3 em,
|
||||
.previews em,
|
||||
.privilege-label em {
|
||||
.var(color, text-color-light);
|
||||
color: @text-color-light;
|
||||
}
|
||||
h3 em {
|
||||
font-weight: normal;
|
||||
|
|
@ -37,18 +36,18 @@
|
|||
}
|
||||
|
||||
.icon {
|
||||
.var(color, gray-light);
|
||||
color: @gray-light;
|
||||
|
||||
&.granted {
|
||||
.var(color, color-granted);
|
||||
color: @color-granted;
|
||||
}
|
||||
|
||||
&.refused {
|
||||
.var(color, color-refused);
|
||||
color: @color-refused;
|
||||
}
|
||||
|
||||
&.restricted {
|
||||
.var(color, color-restricted);
|
||||
color: @color-restricted;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -61,7 +60,7 @@
|
|||
&:hover .spacer {
|
||||
.transition(opacity .25s .25s ease-in);
|
||||
border: 0 dashed;
|
||||
.var(border-color, gray-light);
|
||||
border-color: @gray-light;
|
||||
border-top-width: .2em;
|
||||
opacity: 1;
|
||||
}
|
||||
|
|
@ -72,25 +71,25 @@
|
|||
border-left-width: 2px;
|
||||
|
||||
&.granted {
|
||||
.var(border-color, color-granted);
|
||||
border-color: @color-granted;
|
||||
}
|
||||
|
||||
&.refused {
|
||||
.var(border-color, color-refused);
|
||||
border-color: @color-refused;
|
||||
}
|
||||
}
|
||||
|
||||
.connector {
|
||||
border: 0 solid;
|
||||
.var(border-color, gray-lighter);
|
||||
border-color: @gray-lighter;
|
||||
border-bottom-width: 2px;
|
||||
|
||||
&.granted {
|
||||
.var(border-color, color-granted);
|
||||
border-color: @color-granted;
|
||||
}
|
||||
|
||||
&.refused {
|
||||
.var(border-color, color-refused);
|
||||
border-color: @color-refused;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
|
|
@ -102,22 +101,22 @@
|
|||
.role {
|
||||
.rounded-corners(1em);
|
||||
border: 2px solid;
|
||||
.var(border-color, gray-lighter);
|
||||
border-color: @gray-lighter;
|
||||
|
||||
&.granted {
|
||||
border: 2px solid;
|
||||
.var(border-color, color-granted);
|
||||
border-color: @color-granted;
|
||||
}
|
||||
|
||||
&.refused {
|
||||
border: 2px solid;
|
||||
.var(border-color, color-refused);
|
||||
border-color: @color-refused;
|
||||
}
|
||||
}
|
||||
|
||||
.restriction {
|
||||
font-family: @font-family-fixed;
|
||||
.var(background-color, gray-lighter);
|
||||
background-color: @gray-lighter;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -8,8 +8,8 @@
|
|||
.bg-stateful();
|
||||
.rounded-corners();
|
||||
|
||||
.var(background-color, "gray");
|
||||
.var(color, badge-color);
|
||||
background-color: @gray;
|
||||
color: @badge-color;
|
||||
display: inline-block;
|
||||
font-family: @font-family-wide;
|
||||
font-size: @font-size-small;
|
||||
|
|
|
|||
|
|
@ -186,8 +186,7 @@ blockquote, p, pre {
|
|||
}
|
||||
|
||||
blockquote {
|
||||
border-left: 5px solid;
|
||||
.var(border-left-color, gray-lighter);
|
||||
border-left: 5px solid @gray-lighter;
|
||||
padding: 0.667em 0.333em;
|
||||
}
|
||||
|
||||
|
|
@ -197,8 +196,7 @@ h1, h2, h3, h4, h5, h6 {
|
|||
}
|
||||
|
||||
h1 {
|
||||
border-bottom: 1px solid;
|
||||
.var(border-bottom-color, gray-lighter);
|
||||
border-bottom: 1px solid @gray-lighter;
|
||||
font-size: 1.333em;
|
||||
}
|
||||
|
||||
|
|
@ -225,7 +223,7 @@ h6 {
|
|||
|
||||
pre {
|
||||
.rounded-corners(.25em);
|
||||
.var(background-color, gray-lighter);
|
||||
background-color: @gray-lighter;
|
||||
font-family: @font-family-fixed;
|
||||
font-size: @font-size-small;
|
||||
padding: @vertical-padding @horizontal-padding;
|
||||
|
|
@ -262,7 +260,7 @@ td, th {
|
|||
display: block;
|
||||
|
||||
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;
|
||||
|
||||
opacity: 0;
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@ input.search {
|
|||
}
|
||||
|
||||
&:focus:not([readonly]) {
|
||||
.var(border-color, icinga-blue);
|
||||
border-color: @icinga-blue;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -64,7 +64,7 @@ input.search {
|
|||
margin: .5em 0;
|
||||
|
||||
> a {
|
||||
.var(color, icinga-blue);
|
||||
color: @icinga-blue;
|
||||
padding: .5em;
|
||||
line-height: 1;
|
||||
}
|
||||
|
|
@ -104,12 +104,11 @@ input.search {
|
|||
line-height: 1;
|
||||
|
||||
&.active {
|
||||
border-bottom: 2px solid;
|
||||
.var(border-bottom-color, icinga-blue);
|
||||
border-bottom: 2px solid @icinga-blue;
|
||||
|
||||
> a,
|
||||
> a:hover {
|
||||
.var(color, icinga-blue);
|
||||
color: @icinga-blue;
|
||||
/* Compensate border-bottom: 2px */
|
||||
margin-bottom: -2px;
|
||||
}
|
||||
|
|
@ -122,7 +121,7 @@ input.search {
|
|||
}
|
||||
|
||||
&.disabled {
|
||||
.var(color, disabled-gray);
|
||||
color: @disabled-gray;
|
||||
cursor: no-drop;
|
||||
}
|
||||
|
||||
|
|
@ -131,7 +130,7 @@ input.search {
|
|||
padding: 0.5em;
|
||||
}
|
||||
> a:hover {
|
||||
.var(background-color, gray-lighter);
|
||||
background-color: @gray-lighter;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -238,7 +237,7 @@ input.search {
|
|||
.icinga-datetime-picker .flatpickr-day.today {
|
||||
&:hover,
|
||||
&:focus {
|
||||
.var(color, fp-today_fg_color);
|
||||
color: @fp-today_fg_color;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -162,7 +162,7 @@ form.icinga-form .control-group .toggle-switch ~ .control-info {
|
|||
input[type="file"],
|
||||
textarea,
|
||||
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 {
|
||||
.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 {
|
||||
.button(~"var(--body-bg-color, @{body-bg-color})", ~"var(--gray, @{gray})", ~"var(--black, @{black})");
|
||||
.button(@body-bg-color, @gray, @black);
|
||||
}
|
||||
|
||||
button.noscript-apply {
|
||||
.var(color, "gray");
|
||||
.var(background-color, gray-lightest);
|
||||
.var(border-color, "gray");
|
||||
color: @gray;
|
||||
background-color: @gray-lightest;
|
||||
border-color: @gray;
|
||||
border-width: 1px;
|
||||
}
|
||||
|
||||
button[type="button"] {
|
||||
.var(background-color, low-sat-blue);
|
||||
background-color: @low-sat-blue;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -363,9 +363,9 @@ form.inline {
|
|||
top: 0;
|
||||
|
||||
display: inline-block;
|
||||
.var(background, low-sat-blue);
|
||||
background: @low-sat-blue;
|
||||
border: 1px solid;
|
||||
.var(border-color, low-sat-blue);
|
||||
border-color: @low-sat-blue;
|
||||
box-sizing: content-box;
|
||||
border-radius: 1em;
|
||||
height: 4/3em;
|
||||
|
|
@ -378,10 +378,10 @@ form.inline {
|
|||
top: 0;
|
||||
left: 0;
|
||||
|
||||
.var(background, text-color-inverted);
|
||||
background: @text-color-inverted;
|
||||
border-radius: 1em;
|
||||
border: 1px solid;
|
||||
.var(border-color, low-sat-blue);
|
||||
border-color: @low-sat-blue;
|
||||
box-sizing: border-box;
|
||||
content: "";
|
||||
display: block;
|
||||
|
|
@ -397,19 +397,18 @@ form.inline {
|
|||
}
|
||||
|
||||
.icinga-controls input[type="checkbox"]:checked + .toggle-switch .toggle-slider {
|
||||
.var(background-color, icinga-blue);
|
||||
background-color: @icinga-blue;
|
||||
border: 1px solid;
|
||||
.var(border-color, icinga-blue);
|
||||
border-color: @icinga-blue;
|
||||
}
|
||||
|
||||
.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 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 {
|
||||
border: 1px solid;
|
||||
.var(border-color, icinga-blue);
|
||||
border-color: @icinga-blue;
|
||||
left: 100%;
|
||||
margin-left: -4/3em;
|
||||
}
|
||||
|
|
@ -420,24 +419,24 @@ form.inline {
|
|||
cursor: default;
|
||||
|
||||
& > .toggle-slider {
|
||||
.var(background-color, gray-light);
|
||||
.var(border-color, gray-light);
|
||||
background-color: @gray-light;
|
||||
border-color: @gray-light;
|
||||
|
||||
&:before {
|
||||
.var(background-color, gray-lighter);
|
||||
.var(border-color, gray-light);
|
||||
background-color: @gray-lighter;
|
||||
border-color: @gray-light;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
form.icinga-form .control-group.disabled .control-label-group {
|
||||
.var(color, disabled-gray);
|
||||
color: @disabled-gray;
|
||||
}
|
||||
|
||||
.icinga-controls {
|
||||
input[disabled],
|
||||
select[disabled] {
|
||||
.var(background-color, gray-lighter);
|
||||
background-color: @gray-lighter;
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
|
|
@ -475,20 +474,20 @@ form.icinga-form {
|
|||
|
||||
.form-notifications {
|
||||
&.info {
|
||||
.var(background-color, form-info-bg-color);
|
||||
background-color: @form-info-bg-color;
|
||||
}
|
||||
|
||||
&.error {
|
||||
.var(background-color, form-error-bg-color);
|
||||
background-color: @form-error-bg-color;
|
||||
}
|
||||
|
||||
&.warning {
|
||||
.var(background-color, form-warning-bg-color);
|
||||
background-color: @form-warning-bg-color;
|
||||
}
|
||||
}
|
||||
|
||||
.form-description {
|
||||
.var(background-color, light-text-bg-color);
|
||||
background-color: @light-text-bg-color;
|
||||
}
|
||||
|
||||
.errors {
|
||||
|
|
@ -506,7 +505,7 @@ form.icinga-form {
|
|||
}
|
||||
|
||||
form.icinga-form .form-info {
|
||||
.var(color, text-color-light);
|
||||
color: @text-color-light;
|
||||
font-size: @font-size-small;
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
|
|
@ -516,13 +515,13 @@ form.icinga-form .form-info {
|
|||
|
||||
.icinga-controls {
|
||||
input::placeholder {
|
||||
.var(color, disabled-gray);
|
||||
color: @disabled-gray;
|
||||
font-style: italic;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
input:-ms-input-placeholder {
|
||||
.var(color, disabled-gray);
|
||||
color: @disabled-gray;
|
||||
font-style: italic;
|
||||
opacity: 1;
|
||||
}
|
||||
|
|
@ -548,7 +547,7 @@ form.icinga-form .form-info {
|
|||
display: none;
|
||||
|
||||
&:checked + img {
|
||||
.var(border-color, icinga-blue);
|
||||
border-color: @icinga-blue;
|
||||
border-radius: .25em;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -2,28 +2,28 @@
|
|||
|
||||
.app-health {
|
||||
header {
|
||||
.var(color, text-color-light);
|
||||
color: @text-color-light;
|
||||
|
||||
span {
|
||||
.var(color, text-color);
|
||||
color: @text-color;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
&.state-ok {
|
||||
.var(background-color, color-ok);
|
||||
background-color: @color-ok;
|
||||
}
|
||||
|
||||
&.state-warning {
|
||||
.var(background-color, color-warning);
|
||||
background-color: @color-warning;
|
||||
}
|
||||
|
||||
&.state-critical {
|
||||
.var(background-color, color-critical);
|
||||
background-color: @color-critical;
|
||||
}
|
||||
|
||||
&.state-unknown {
|
||||
.var(background-color, color-unknown);
|
||||
background-color: @color-unknown;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -37,12 +37,12 @@
|
|||
|
||||
tr:not(:last-child) td {
|
||||
border: 0 solid;
|
||||
.var(border-color, gray-light);
|
||||
border-color: @gray-light;
|
||||
border-bottom-width: 1px;
|
||||
}
|
||||
|
||||
section {
|
||||
.var(color, text-color-light);
|
||||
color: @text-color-light;
|
||||
font-family: @font-family-fixed;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
}
|
||||
|
||||
#guest-error {
|
||||
.var(background-color, icinga-blue);
|
||||
background-color: @icinga-blue;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
|
@ -20,7 +20,7 @@
|
|||
|
||||
#guest-error-message {
|
||||
.fadein();
|
||||
.var(color, body-bg-color);
|
||||
color: @body-bg-color;
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
|
|
@ -32,7 +32,7 @@
|
|||
}
|
||||
|
||||
#header-logo-container {
|
||||
.var(background, menu-bg-color);
|
||||
background: @menu-bg-color;
|
||||
height: 6em;
|
||||
padding: 1.25em;
|
||||
width: 16em;
|
||||
|
|
@ -81,8 +81,8 @@
|
|||
}
|
||||
|
||||
#layout {
|
||||
.var(background-color, body-bg-color);
|
||||
.var(color, text-color);
|
||||
background-color: @body-bg-color;
|
||||
color: @text-color;
|
||||
font-family: @font-family;
|
||||
}
|
||||
|
||||
|
|
@ -141,11 +141,11 @@
|
|||
|
||||
// Mobile menu
|
||||
#layout.minimal-layout #sidebar {
|
||||
.var(background-color, menu-bg-color);
|
||||
background-color: @menu-bg-color;
|
||||
}
|
||||
|
||||
#mobile-menu-toggle {
|
||||
.var(color, menu-color);
|
||||
color: @menu-color;
|
||||
text-align: right;
|
||||
|
||||
> button {
|
||||
|
|
@ -213,12 +213,11 @@
|
|||
}
|
||||
|
||||
#notifications > li {
|
||||
.var(color, text-color);
|
||||
color: @text-color;
|
||||
display: block;
|
||||
line-height: 2.5em;
|
||||
border-left: .5em solid;
|
||||
.var(border-left-color, gray-light);
|
||||
.var(background, body-bg-color);
|
||||
border-left: .5em solid @gray-light;
|
||||
background: @body-bg-color;
|
||||
margin-bottom: 1px;
|
||||
box-shadow: 0 0 1em 0 rgba(0,0,0,0.25);
|
||||
|
||||
|
|
@ -233,38 +232,38 @@
|
|||
}
|
||||
|
||||
&.error {
|
||||
.var(border-color, color-notification-error);
|
||||
.var(background, color-notification-error);
|
||||
.var(color, text-color-on-icinga-blue);
|
||||
border-color: @color-notification-error;
|
||||
background: @color-notification-error;
|
||||
color: @text-color-on-icinga-blue;
|
||||
|
||||
.icon {
|
||||
.var(color, text-color-on-icinga-blue);
|
||||
color: @text-color-on-icinga-blue;
|
||||
}
|
||||
}
|
||||
|
||||
&.info {
|
||||
.var(border-color, color-notification-info);
|
||||
border-color: @color-notification-info;
|
||||
|
||||
.icon {
|
||||
.var(color, color-notification-info);
|
||||
color: @color-notification-info;
|
||||
}
|
||||
}
|
||||
|
||||
&.success {
|
||||
.var(border-color, color-notification-success);
|
||||
border-color: @color-notification-success;
|
||||
|
||||
.icon {
|
||||
.var(color, color-notification-success);
|
||||
color: @color-notification-success;
|
||||
}
|
||||
}
|
||||
|
||||
&.warning {
|
||||
.var(border-color, color-notification-warning);
|
||||
.var(background, color-notification-warning);
|
||||
.var(color, text-color-inverted);
|
||||
border-color: @color-notification-warning;
|
||||
background: @color-notification-warning;
|
||||
color: @text-color-inverted;
|
||||
|
||||
.icon {
|
||||
.var(color, text-color-inverted);
|
||||
color: @text-color-inverted;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -342,10 +341,10 @@
|
|||
}
|
||||
|
||||
#search:focus {
|
||||
.var(background-color, menu-bg-color);
|
||||
background-color: @menu-bg-color;
|
||||
border-radius: 0 .25em .25em 0;
|
||||
box-shadow: 0 0 .25em 0 rgba(0, 0, 0, .2);
|
||||
.var(color, menu-color);
|
||||
color: @menu-color;
|
||||
width: 20em;
|
||||
position: fixed;
|
||||
z-index: 1;
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
|
||||
#login {
|
||||
height: 100%;
|
||||
.var(background-color, menu-bg-color);
|
||||
background-color: @menu-bg-color;
|
||||
background-image: url(../img/icingaweb2-background-orbs.jpg);
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
|
|
@ -18,8 +18,8 @@
|
|||
position: relative;
|
||||
z-index: 10;
|
||||
padding: 2em 6em;
|
||||
.var(background-color, login-box-background);
|
||||
.box-shadow(0, 0, 1em, 1em, ~"var(--login-box-background, @{login-box-background})");
|
||||
background-color: @login-box-background;
|
||||
.box-shadow(0, 0, 1em, 1em, @login-box-background);
|
||||
}
|
||||
|
||||
#icinga-logo {
|
||||
|
|
@ -43,7 +43,7 @@
|
|||
}
|
||||
|
||||
.errors {
|
||||
.var(background-color, color-critical);
|
||||
background-color: @color-critical;
|
||||
color: white;
|
||||
}
|
||||
|
||||
|
|
@ -76,12 +76,12 @@
|
|||
|
||||
input[type="submit"]:focus {
|
||||
outline: 3px solid;
|
||||
.var(outline-color, icinga-blue-light);
|
||||
outline-color: @icinga-blue-light;
|
||||
}
|
||||
|
||||
input[type=submit] {
|
||||
border-radius: .25em;
|
||||
.var(background, icinga-secondary);
|
||||
background: @icinga-secondary;
|
||||
color: white;
|
||||
border: none;
|
||||
height: 2.5em;
|
||||
|
|
@ -89,19 +89,19 @@
|
|||
width: 100%;
|
||||
|
||||
&:hover {
|
||||
.var(background-color, icinga-secondary-dark);
|
||||
background-color: @icinga-secondary-dark;
|
||||
}
|
||||
}
|
||||
|
||||
.config-note {
|
||||
.var(background-color, color-critical);
|
||||
background-color: @color-critical;
|
||||
margin: 0 auto 2em auto; // Center horizontally w/ bottom margin
|
||||
max-width: 50%;
|
||||
min-width: 24em;
|
||||
padding: 1em;
|
||||
|
||||
a {
|
||||
.var(color, text-color-inverted);
|
||||
color: @text-color-inverted;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
@name-value-table-name-width: 38/3em;
|
||||
|
||||
.action-link {
|
||||
.var(color, icinga-blue);
|
||||
color: @icinga-blue;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
|
|
@ -119,7 +119,7 @@
|
|||
}
|
||||
|
||||
a:hover > .icon-cancel {
|
||||
.var(color, color-critical);
|
||||
color: @color-critical;
|
||||
}
|
||||
|
||||
.icon-stateful {
|
||||
|
|
@ -132,12 +132,12 @@ a:hover > .icon-cancel {
|
|||
.action-link();
|
||||
.rounded-corners(3px);
|
||||
|
||||
.var(background, low-sat-blue);
|
||||
background: @low-sat-blue;
|
||||
display: inline-block;
|
||||
padding: 0.25em 0.5em;
|
||||
|
||||
&:hover {
|
||||
.var(background, low-sat-blue-dark);
|
||||
background: @low-sat-blue-dark;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -148,12 +148,11 @@ a:hover > .icon-cancel {
|
|||
margin: 0;
|
||||
|
||||
> dt {
|
||||
border-bottom: 1px solid;
|
||||
.var(border-bottom-color, gray-lighter);
|
||||
border-bottom: 1px solid @gray-lighter;
|
||||
margin-bottom: 0.25em;
|
||||
|
||||
&:hover {
|
||||
.var(background-color, gray-lightest);
|
||||
background-color: @gray-lightest;
|
||||
|
||||
> .remove-action button:not(.spinner.active) {
|
||||
visibility: visible;
|
||||
|
|
@ -171,7 +170,7 @@ a:hover > .icon-cancel {
|
|||
}
|
||||
|
||||
.comment-time {
|
||||
.var(color, text-color-light);
|
||||
color: @text-color-light;
|
||||
font-size: @font-size-small;
|
||||
}
|
||||
|
||||
|
|
@ -182,7 +181,7 @@ a:hover > .icon-cancel {
|
|||
}
|
||||
|
||||
> dt {
|
||||
.var(color, text-color-light);
|
||||
color: @text-color-light;
|
||||
font-size: @font-size-small;
|
||||
}
|
||||
}
|
||||
|
|
@ -206,13 +205,11 @@ a:hover > .icon-cancel {
|
|||
}
|
||||
|
||||
thead {
|
||||
border-bottom: 1px solid;
|
||||
.var(border-bottom-color, gray-light);
|
||||
border-bottom: 1px solid @gray-light;
|
||||
}
|
||||
|
||||
tbody tr {
|
||||
border-bottom: 1px solid;
|
||||
.var(border-bottom-color, gray-lightest);
|
||||
border-bottom: 1px solid @gray-lightest;
|
||||
border-left: 5px solid transparent;
|
||||
|
||||
&:last-child {
|
||||
|
|
@ -221,12 +218,12 @@ a:hover > .icon-cancel {
|
|||
}
|
||||
|
||||
tr[href].active {
|
||||
.var(background-color, tr-active-color);
|
||||
.var(border-left-color, icinga-blue);
|
||||
background-color: @tr-active-color;
|
||||
border-left-color: @icinga-blue;
|
||||
}
|
||||
|
||||
tr[href]:hover {
|
||||
.var(background-color, tr-hover-color);
|
||||
background-color: @tr-hover-color;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
|
@ -242,7 +239,7 @@ a:hover > .icon-cancel {
|
|||
}
|
||||
|
||||
.name-value-table > tbody > tr > th {
|
||||
.var(color, text-color-light);
|
||||
color: @text-color-light;
|
||||
// Reset default font-weight
|
||||
font-weight: normal;
|
||||
padding-left: 0;
|
||||
|
|
@ -320,15 +317,15 @@ a:hover > .icon-cancel {
|
|||
margin-top: -1em;
|
||||
margin-right: .25em;
|
||||
|
||||
.var(background, gray-lighter);
|
||||
.var(color, "gray");
|
||||
background: @gray-lighter;
|
||||
color: @gray;
|
||||
border: none;
|
||||
-webkit-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);
|
||||
|
||||
&:hover {
|
||||
.var(background, gray-light);
|
||||
background: @gray-light;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -371,7 +368,6 @@ a:hover > .icon-cancel {
|
|||
display: block;
|
||||
height: 2em;
|
||||
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;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
|
|
@ -403,8 +399,8 @@ a:hover > .icon-cancel {
|
|||
|
||||
.module-dependencies {
|
||||
.unmet-dependencies {
|
||||
.var(background-color, color-warning);
|
||||
.var(color, text-color-on-icinga-blue);
|
||||
background-color: @color-warning;
|
||||
color: @text-color-on-icinga-blue;
|
||||
padding: .25em .5em;
|
||||
margin-left: -.5em;
|
||||
}
|
||||
|
|
@ -412,16 +408,16 @@ a:hover > .icon-cancel {
|
|||
.name-value-table {
|
||||
> caption {
|
||||
font-weight: normal;
|
||||
.var(color, text-color-light);
|
||||
color: @text-color-light;
|
||||
}
|
||||
|
||||
> tbody > tr > th {
|
||||
font-weight: bold;
|
||||
.var(color, text-color);
|
||||
color: @text-color;
|
||||
}
|
||||
|
||||
.missing {
|
||||
.var(color, color-critical);
|
||||
color: @color-critical;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
|
@ -439,10 +435,8 @@ a:hover > .icon-cancel {
|
|||
height: 1.5em;
|
||||
width: 1.5em;
|
||||
left: 0.5em;
|
||||
border-top: 3px solid;
|
||||
border-right: 3px solid;
|
||||
.var(border-top-color, "gray");
|
||||
.var(border-right-color, "gray");
|
||||
border-top: 3px solid @gray;
|
||||
border-right: 3px solid @gray;
|
||||
border-top-right-radius: .50em;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
@icon-width: 1.7em; // 1.5em width + 0.2em right margin
|
||||
|
||||
#menu {
|
||||
.var(background-color, menu-bg-color);
|
||||
background-color: @menu-bg-color;
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
|
|
@ -65,16 +65,16 @@
|
|||
|
||||
#menu .nav-level-1 > .nav-item {
|
||||
line-height: 2.167em; // 26 px
|
||||
.var(color, menu-color);
|
||||
color: @menu-color;
|
||||
|
||||
&.active {
|
||||
.var(color, menu-active-color);
|
||||
color: @menu-active-color;
|
||||
|
||||
> a > .badge {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.var(background-color, menu-active-bg-color);
|
||||
background-color: @menu-active-bg-color;
|
||||
}
|
||||
|
||||
&.no-icon > a {
|
||||
|
|
@ -87,12 +87,12 @@
|
|||
|
||||
&.active:not(.selected) > a:focus,
|
||||
&.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:focus {
|
||||
.var(background-color, menu-hover-bg-color);
|
||||
background-color: @menu-hover-bg-color;
|
||||
}
|
||||
|
||||
// Balance icon weight for non active menu items
|
||||
|
|
@ -109,11 +109,11 @@
|
|||
}
|
||||
|
||||
#menu ul:not(.nav-level-2) > .selected > a {
|
||||
.var(background-color, menu-highlight-color);
|
||||
.var(color, text-color-inverted);
|
||||
background-color: @menu-highlight-color;
|
||||
color: @text-color-inverted;
|
||||
|
||||
&:focus {
|
||||
.var(background-color, menu-highlight-hover-bg-color);
|
||||
background-color: @menu-highlight-hover-bg-color;
|
||||
}
|
||||
|
||||
&:after {
|
||||
|
|
@ -122,7 +122,7 @@
|
|||
position: absolute;
|
||||
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);
|
||||
content: "";
|
||||
display: block;
|
||||
|
|
@ -138,7 +138,7 @@
|
|||
line-height: 1.833em; // 22px
|
||||
|
||||
> a {
|
||||
.var(color, menu-2ndlvl-color);
|
||||
color: @menu-2ndlvl-color;
|
||||
font-size: @font-size-small;
|
||||
padding: 0.364em 0.545em 0.364em 0.545em;
|
||||
|
||||
|
|
@ -156,7 +156,7 @@
|
|||
&.active:after {
|
||||
.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);
|
||||
content: "";
|
||||
display: block;
|
||||
|
|
@ -169,14 +169,14 @@
|
|||
}
|
||||
|
||||
&.active > a {
|
||||
.var(color, menu-2ndlvl-active-color);
|
||||
.var(background-color, menu-2ndlvl-active-bg-color);
|
||||
color: @menu-2ndlvl-active-color;
|
||||
background-color: @menu-2ndlvl-active-bg-color;
|
||||
|
||||
&:focus {
|
||||
&:first-of-type,
|
||||
&:first-of-type ~ a {
|
||||
.var(color, menu-2ndlvl-active-hover-color);
|
||||
.var(background-color, menu-2ndlvl-active-hover-bg-color);
|
||||
color: @menu-2ndlvl-active-hover-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-size: 1em auto;
|
||||
border: none;
|
||||
.var(color, menu-color);
|
||||
color: @menu-color;
|
||||
line-height: 2.167em;
|
||||
padding: .25em;
|
||||
padding-left: @icon-width + .75em;
|
||||
width: 100%;
|
||||
|
||||
&:focus::placeholder {
|
||||
.var(color, menu-color);
|
||||
color: @menu-color;
|
||||
}
|
||||
&:focus::-ms-input-placeholder {
|
||||
color: @menu-color;
|
||||
}
|
||||
|
||||
&.active {
|
||||
.var(background-color, menu-active-bg-color);
|
||||
background-color: @menu-active-bg-color;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&: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) #menu .nav-level-1 > .nav-item:not(.active).hover {
|
||||
> .nav-level-2 {
|
||||
.var(background-color, menu-flyout-bg-color);
|
||||
background-color: @menu-flyout-bg-color;
|
||||
border: 1px solid;
|
||||
.var(border-color, gray-light);
|
||||
border-color: @gray-light;
|
||||
border-radius: .25em;
|
||||
box-shadow: 0 0 1em 0 rgba(0,0,0,.3);
|
||||
padding: @vertical-padding 0;
|
||||
|
|
@ -271,11 +271,9 @@
|
|||
&:after {
|
||||
.transform(rotate(45deg));
|
||||
|
||||
.var(background-color, body-bg-color);
|
||||
border-bottom: 1px solid;
|
||||
.var(border-bottom-color, gray-light);
|
||||
border-left: 1px solid;
|
||||
.var(border-left-color, gray-light);
|
||||
background-color: @body-bg-color;
|
||||
border-bottom: 1px solid @gray-light;
|
||||
border-left: 1px solid @gray-light;
|
||||
content: "";
|
||||
display: block;
|
||||
height: 1.1em;
|
||||
|
|
@ -291,7 +289,7 @@
|
|||
position: relative;
|
||||
|
||||
> a {
|
||||
.var(color, menu-flyout-color);
|
||||
color: @menu-flyout-color;
|
||||
|
||||
&:first-of-type {
|
||||
padding-left: 1.5em;
|
||||
|
|
@ -302,13 +300,13 @@
|
|||
a:hover, a:focus {
|
||||
&:first-of-type,
|
||||
&:first-of-type ~ a {
|
||||
.var(background-color, menu-2ndlvl-highlight-bg-color);
|
||||
background-color: @menu-2ndlvl-highlight-bg-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.active > a {
|
||||
.var(color, menu-color);
|
||||
color: @menu-color;
|
||||
}
|
||||
|
||||
// Hide activity caret when displayed as flyout
|
||||
|
|
@ -376,7 +374,7 @@
|
|||
li {
|
||||
display: block;
|
||||
a, button[type="submit"] {
|
||||
.var(background-color, body-bg-color);
|
||||
background-color: @body-bg-color;
|
||||
border: none;
|
||||
left: -999px;
|
||||
padding: @vertical-padding @horizontal-padding;
|
||||
|
|
@ -410,13 +408,13 @@
|
|||
}
|
||||
|
||||
.search-input:focus ~ .search-reset:hover {
|
||||
.var(background-color, menu-active-hover-bg-color);
|
||||
background-color: @menu-active-hover-bg-color;
|
||||
}
|
||||
|
||||
.search-reset {
|
||||
background: none;
|
||||
border: 0;
|
||||
.var(color, menu-color);
|
||||
color: @menu-color;
|
||||
cursor: pointer;
|
||||
display: none;
|
||||
height: 100%;
|
||||
|
|
@ -428,7 +426,7 @@
|
|||
|
||||
&:focus,
|
||||
&:hover {
|
||||
.var(background-color, menu-search-hover-bg-color);
|
||||
background-color: @menu-search-hover-bg-color;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -441,19 +439,19 @@ input[type=text].search-input {
|
|||
}
|
||||
|
||||
.search-input:focus:-moz-placeholder { // FF 18-
|
||||
.var(color, gray-light);
|
||||
color: @gray-light;
|
||||
}
|
||||
|
||||
.search-input:focus::-moz-placeholder { // FF 19+
|
||||
.var(color, gray-light);
|
||||
color: @gray-light;
|
||||
}
|
||||
|
||||
.search-input:focus:-ms-input-placeholder {
|
||||
.var(color, gray-light);
|
||||
color: @gray-light;
|
||||
}
|
||||
|
||||
.search-input:focus::-webkit-input-placeholder {
|
||||
.var(color, gray-light);
|
||||
color: @gray-light;
|
||||
}
|
||||
|
||||
.search-input ~ .search-reset {
|
||||
|
|
@ -480,14 +478,14 @@ input[type=text].search-input {
|
|||
background: none;
|
||||
border: none;
|
||||
padding: 0;
|
||||
.var(color, text-color-light);
|
||||
color: @text-color-light;
|
||||
position: absolute;
|
||||
bottom: 0.2em;
|
||||
right: 0;
|
||||
z-index: 3;
|
||||
|
||||
i {
|
||||
.var(background-color, body-bg-color);
|
||||
background-color: @body-bg-color;
|
||||
border-radius: .25em 0 0 .25em;
|
||||
font-size: 1.125em;
|
||||
width: 2em;
|
||||
|
|
@ -499,7 +497,7 @@ input[type=text].search-input {
|
|||
|
||||
&:hover, &:focus {
|
||||
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) {
|
||||
&:not(.selected):not(.active) a:hover,
|
||||
&: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 {
|
||||
&:first-of-type,
|
||||
&:first-of-type ~ a {
|
||||
.var(background-color, menu-2ndlvl-highlight-bg-color);
|
||||
background-color: @menu-2ndlvl-highlight-bg-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,26 +1,20 @@
|
|||
/*! 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)) {
|
||||
-webkit-box-shadow: @x @y @blur @spread extract-variable-default(@color);
|
||||
-webkit-box-shadow: @arguments;
|
||||
-moz-box-shadow: @x @y @blur @spread extract-variable-default(@color);
|
||||
-moz-box-shadow: @arguments;
|
||||
box-shadow: @x @y @blur @spread extract-variable-default(@color);
|
||||
box-shadow: @arguments;
|
||||
}
|
||||
|
||||
.button(
|
||||
@background-color: ~"var(--body-bg-color, @{body-bg-color})",
|
||||
@border-font-color: ~"var(--icinga-blue, @{icinga-blue})",
|
||||
@color-dark: ~"var(--icinga-blue-dark, @{icinga-blue-dark})"
|
||||
@background-color: @body-bg-color,
|
||||
@border-font-color: @icinga-blue,
|
||||
@color-dark: @icinga-blue-dark
|
||||
) {
|
||||
.rounded-corners(3px);
|
||||
|
||||
background-color: extract-variable-default(@background-color);
|
||||
background-color: @background-color;
|
||||
border: extract-variable-default(2px solid @border-font-color);
|
||||
border: 2px solid @border-font-color;
|
||||
color: extract-variable-default(@border-font-color);
|
||||
color: @border-font-color;
|
||||
cursor: pointer;
|
||||
line-height: normal;
|
||||
|
|
@ -34,19 +28,14 @@
|
|||
&:focus,
|
||||
&:hover,
|
||||
&.btn-primary {
|
||||
background-color: extract-variable-default(@border-font-color);
|
||||
background-color: @border-font-color;
|
||||
color: extract-variable-default(@background-color);
|
||||
color: @background-color;
|
||||
}
|
||||
|
||||
&.btn-primary:focus,
|
||||
&.btn-primary:hover {
|
||||
background-color: extract-variable-default(@color-dark);
|
||||
background-color: @color-dark;
|
||||
border-color: extract-variable-default(@color-dark);
|
||||
border-color: @color-dark;
|
||||
color: extract-variable-default(@background-color);
|
||||
color: @background-color;
|
||||
}
|
||||
|
||||
|
|
@ -153,90 +142,85 @@
|
|||
// Mixin for stateful foreground colors, e.g. text or icons
|
||||
.fg-stateful {
|
||||
&.state-ok {
|
||||
.var(color, color-ok);
|
||||
color: @color-ok;
|
||||
}
|
||||
&.state-up {
|
||||
.var(color, color-up);
|
||||
color: @color-up;
|
||||
}
|
||||
&.state-warning {
|
||||
.var(color, color-warning);
|
||||
color: @color-warning;
|
||||
&.handled {
|
||||
.var(color, color-warning-handled);
|
||||
color: @color-warning-handled;
|
||||
}
|
||||
}
|
||||
&.state-critical {
|
||||
.var(color, color-critical);
|
||||
color: @color-critical;
|
||||
&.handled {
|
||||
.var(color, color-critical-handled);
|
||||
color: @color-critical-handled;
|
||||
}
|
||||
}
|
||||
&.state-down {
|
||||
.var(color, color-down);
|
||||
color: @color-down;
|
||||
&.handled {
|
||||
.var(color, color-down-handled);
|
||||
color: @color-down-handled;
|
||||
}
|
||||
}
|
||||
&.state-unreachable {
|
||||
.var(color, color-unreachable);
|
||||
color: @color-unreachable;
|
||||
&.handled {
|
||||
.var(color, color-unreachable-handled);
|
||||
color: @color-unreachable-handled;
|
||||
}
|
||||
}
|
||||
&.state-unknown {
|
||||
.var(color, color-unknown);
|
||||
color: @color-unknown;
|
||||
&.handled {
|
||||
.var(color, color-unknown-handled);
|
||||
color: @color-unknown-handled;
|
||||
}
|
||||
}
|
||||
&.state-pending {
|
||||
.var(color, color-pending);
|
||||
color: @color-pending;
|
||||
}
|
||||
}
|
||||
|
||||
// Mixin for stateful background colors
|
||||
.bg-stateful {
|
||||
&.state-ok {
|
||||
.var(background-color, color-ok);
|
||||
background-color: @color-ok;
|
||||
}
|
||||
&.state-up {
|
||||
.var(background-color, color-up);
|
||||
background-color: @color-up;
|
||||
}
|
||||
&.state-warning {
|
||||
.var(background-color, color-warning);
|
||||
background-color: @color-warning;
|
||||
&.handled {
|
||||
.var(background-color, color-warning-handled);
|
||||
background-color: @color-warning-handled;
|
||||
}
|
||||
}
|
||||
&.state-critical {
|
||||
.var(background-color, color-critical);
|
||||
background-color: @color-critical;
|
||||
&.handled {
|
||||
.var(background-color, color-critical-handled);
|
||||
background-color: @color-critical-handled;
|
||||
}
|
||||
}
|
||||
&.state-down {
|
||||
.var(background-color, color-down);
|
||||
background-color: @color-down;
|
||||
&.handled {
|
||||
.var(background-color, color-down-handled);
|
||||
background-color: @color-down-handled;
|
||||
}
|
||||
}
|
||||
&.state-unreachable {
|
||||
.var(background-color, color-unreachable);
|
||||
background-color: @color-unreachable;
|
||||
&.handled {
|
||||
.var(background-color, color-unreachable-handled);
|
||||
background-color: @color-unreachable-handled;
|
||||
}
|
||||
}
|
||||
&.state-unknown {
|
||||
.var(background-color, color-unknown);
|
||||
background-color: @color-unknown;
|
||||
&.handled {
|
||||
.var(background-color, color-unknown-handled);
|
||||
background-color: @color-unknown-handled;
|
||||
}
|
||||
}
|
||||
&.state-pending {
|
||||
.var(background-color, color-pending);
|
||||
background-color: @color-pending;
|
||||
}
|
||||
}
|
||||
|
||||
.var(@property, @variable) {
|
||||
@{property}: @@variable;
|
||||
@{property}: var(~"--@{variable}", @@variable);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -64,10 +64,10 @@
|
|||
top: .75em;
|
||||
right: 1em;
|
||||
|
||||
.var(background-color, "gray");
|
||||
background-color: @gray;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
.var(color, text-color-inverted);
|
||||
color: @text-color-inverted;
|
||||
height: 1.5em;
|
||||
line-height: 1em;
|
||||
padding: 0;
|
||||
|
|
@ -102,7 +102,7 @@
|
|||
align-items: stretch;
|
||||
flex-direction: column;
|
||||
|
||||
.var(background-color, body-bg-color);
|
||||
background-color: @body-bg-color;
|
||||
border-radius: .5em;
|
||||
box-shadow: 0 0 2em 0 rgba(0, 0, 0, .6);
|
||||
flex: 1;
|
||||
|
|
|
|||
|
|
@ -141,8 +141,7 @@
|
|||
// Columns
|
||||
|
||||
#layout.twocols #col2 {
|
||||
border-left: 1px solid;
|
||||
.var(border-left-color, gray-lighter);
|
||||
border-left: 1px solid @gray-lighter;
|
||||
}
|
||||
|
||||
#layout.twocols.wide-layout #col2 {
|
||||
|
|
@ -160,8 +159,7 @@
|
|||
}
|
||||
|
||||
#layout.twocols #col2 {
|
||||
border-left: 1px solid;
|
||||
.var(border-left-color, gray-lighter);
|
||||
border-left: 1px solid @gray-lighter;
|
||||
|
||||
&:empty {
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
.setup-header {
|
||||
width: 100%;
|
||||
height: 5.5em;
|
||||
.var(background-color, icinga-blue);
|
||||
background-color: @icinga-blue;
|
||||
text-align: center;
|
||||
|
||||
img {
|
||||
|
|
@ -103,7 +103,7 @@
|
|||
}
|
||||
|
||||
&.complete {
|
||||
.var(background-color, color-ok);
|
||||
background-color: @color-ok;
|
||||
}
|
||||
|
||||
&.visited {
|
||||
|
|
@ -227,7 +227,7 @@ form#setup_requirements {
|
|||
padding: 0.4em;
|
||||
|
||||
&.fulfilled {
|
||||
.var(background-color, color-ok);
|
||||
background-color: @color-ok;
|
||||
}
|
||||
|
||||
&.not-available {
|
||||
|
|
@ -236,7 +236,7 @@ form#setup_requirements {
|
|||
}
|
||||
|
||||
&.missing {
|
||||
.var(background-color, color-critical);
|
||||
background-color: @color-critical;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -313,11 +313,11 @@ form#setup_requirements {
|
|||
color: white;
|
||||
|
||||
&.success {
|
||||
.var(background-color, color-ok);
|
||||
background-color: @color-ok;
|
||||
}
|
||||
|
||||
&.failure {
|
||||
.var(background-color, color-critical);
|
||||
background-color: @color-critical;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -370,16 +370,16 @@ form#setup_requirements {
|
|||
text-align: left;
|
||||
font-size: 0.9em;
|
||||
border: 1px solid;
|
||||
.var(border-color, gray-light);
|
||||
border-color: @gray-light;
|
||||
|
||||
h3 {
|
||||
padding: 0.2em;
|
||||
margin: -1em -1em 1em;
|
||||
text-align: center;
|
||||
.var(color, text-color);
|
||||
.var(background-color, gray-lightest);
|
||||
color: @text-color;
|
||||
background-color: @gray-lightest;
|
||||
border: 1px solid;
|
||||
.var(border-color, gray-light);
|
||||
border-color: @gray-light;
|
||||
}
|
||||
|
||||
img {
|
||||
|
|
@ -423,8 +423,8 @@ form#setup_requirements {
|
|||
margin: 1em;
|
||||
padding: 0.3em;
|
||||
border: 1px solid;
|
||||
.var(border-color, gray-semilight);
|
||||
.var(background-color, gray-lightest);
|
||||
border-color: @gray-semilight;
|
||||
background-color: @gray-lightest;
|
||||
|
||||
.header {
|
||||
height: 2.5em;
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
// Styles for tab navigation of containers
|
||||
|
||||
.tabs {
|
||||
.var(background-color, menu-bg-color);
|
||||
background-color: @menu-bg-color;
|
||||
letter-spacing: -0.417em;
|
||||
}
|
||||
|
||||
|
|
@ -27,18 +27,18 @@
|
|||
}
|
||||
|
||||
> a {
|
||||
.var(color, menu-color);
|
||||
color: @menu-color;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
.var(background, tab-hover-bg-color);
|
||||
background: @tab-hover-bg-color;
|
||||
}
|
||||
}
|
||||
|
||||
&.active > a,
|
||||
> a:focus {
|
||||
.var(background-color, body-bg-color);
|
||||
.var(color, text-color);
|
||||
background-color: @body-bg-color;
|
||||
color: @text-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -55,8 +55,8 @@
|
|||
.tabs > li > .close-container-control:hover,
|
||||
.tabs > li > .refresh-container-control:focus,
|
||||
.tabs > li > .refresh-container-control:hover {
|
||||
.var(background-color, body-bg-color);
|
||||
.var(color, text-color);
|
||||
background-color: @body-bg-color;
|
||||
color: @text-color;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
|
@ -64,9 +64,9 @@
|
|||
.box-shadow();
|
||||
.rounded-corners(0 0 0.3em 0.3em);
|
||||
|
||||
.var(background-color, body-bg-color);
|
||||
background-color: @body-bg-color;
|
||||
border: 1px solid;
|
||||
.var(border-color, gray-light);
|
||||
border-color: @gray-light;
|
||||
border-top: none;
|
||||
margin-left: -1px;
|
||||
min-width: 14em;
|
||||
|
|
@ -74,7 +74,7 @@
|
|||
}
|
||||
|
||||
.tabs > .dropdown-nav-item > ul > li:hover > a {
|
||||
.var(background-color, gray-lighter);
|
||||
background-color: @gray-lighter;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,21 +1,20 @@
|
|||
/*! Icinga Web 2 | (c) 2014 Icinga Development Team | GPLv2+ */
|
||||
|
||||
#announcements > ul {
|
||||
.var(background-color, body-bg-color);
|
||||
background-color: @body-bg-color;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
> li {
|
||||
border-bottom: 1px solid;
|
||||
.var(border-bottom-color, gray-lighter);
|
||||
border-bottom: 1px solid @gray-lighter;
|
||||
line-height: 1.5em;
|
||||
padding: 0.5em 1em 0.5em 3em;
|
||||
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
.var(color, icinga-blue);
|
||||
color: @icinga-blue;
|
||||
content: "\e811";
|
||||
font-family: 'ifont';
|
||||
|
||||
|
|
@ -28,7 +27,7 @@
|
|||
}
|
||||
|
||||
a {
|
||||
.var(color, icinga-blue);
|
||||
color: @icinga-blue;
|
||||
}
|
||||
|
||||
.message {
|
||||
|
|
@ -60,13 +59,13 @@
|
|||
color: #fff;
|
||||
|
||||
&:hover .icon-cancel {
|
||||
.var(color, icinga-blue);
|
||||
color: @icinga-blue;
|
||||
}
|
||||
}
|
||||
|
||||
#application-state-summary > div {
|
||||
.var(background-color, color-critical);
|
||||
.var(color, text-color-on-icinga-blue);
|
||||
background-color: @color-critical;
|
||||
color: @text-color-on-icinga-blue;
|
||||
line-height: 1.5em;
|
||||
padding: 0.5em 1em 0.5em 3em;
|
||||
margin-left: 12em;
|
||||
|
|
@ -90,7 +89,7 @@
|
|||
}
|
||||
|
||||
> 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);
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
|
@ -134,7 +133,7 @@
|
|||
}
|
||||
|
||||
.link-description {
|
||||
.var(color, text-color-light);
|
||||
color: @text-color-light;
|
||||
}
|
||||
|
||||
.link-icon {
|
||||
|
|
@ -218,17 +217,17 @@ table.multiselect tr[href] td {
|
|||
}
|
||||
|
||||
ul.tree li.active {
|
||||
.var(background-color, gray-lightest);
|
||||
background-color: @gray-lightest;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: .5em;
|
||||
border: none;
|
||||
background: none;
|
||||
.var(color, text-color);
|
||||
color: @text-color;
|
||||
|
||||
&:hover, &:focus {
|
||||
.var(color, icinga-blue);
|
||||
color: @icinga-blue;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -249,7 +248,7 @@ form.role-form {
|
|||
}
|
||||
|
||||
.control-label-group em {
|
||||
.var(color, text-color-light);
|
||||
color: @text-color-light;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
|
|
@ -265,15 +264,15 @@ form.role-form {
|
|||
|
||||
.privilege-preview .icon {
|
||||
&.granted {
|
||||
.var(color, color-granted);
|
||||
color: @color-granted;
|
||||
}
|
||||
|
||||
&.refused {
|
||||
.var(color, color-refused);
|
||||
color: @color-refused;
|
||||
}
|
||||
|
||||
&.restricted {
|
||||
.var(color, color-restricted);
|
||||
color: @color-restricted;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -286,7 +285,7 @@ form.role-form {
|
|||
h3 em {
|
||||
font-size: .857em;
|
||||
font-weight: normal;
|
||||
.var(color, text-color-light);
|
||||
color: @text-color-light;
|
||||
}
|
||||
|
||||
h4 {
|
||||
|
|
@ -303,18 +302,17 @@ form.role-form {
|
|||
text-align: center;
|
||||
|
||||
&.icon-ok {
|
||||
.var(color, color-granted);
|
||||
color: @color-granted;
|
||||
}
|
||||
|
||||
&.icon-cancel {
|
||||
.var(color, color-refused);
|
||||
color: @color-refused;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.collapsible-control {
|
||||
border-bottom: 1px solid;
|
||||
.var(border-bottom-color, gray-light);
|
||||
border-bottom: 1px solid @gray-light;
|
||||
cursor: pointer;
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
|
|
@ -390,7 +388,7 @@ ul.tree li::before, ul.tree li::after {
|
|||
position: absolute;
|
||||
right: auto;
|
||||
left: -0.2em;
|
||||
.var(border-color, gray-light);
|
||||
border-color: @gray-light;
|
||||
border-style: dotted;
|
||||
border-width: 0;
|
||||
}
|
||||
|
|
@ -432,22 +430,22 @@ ul.tree li a {
|
|||
line-height: 2em;
|
||||
padding: 0 .5em;
|
||||
text-decoration: none;
|
||||
.var(color, "gray");
|
||||
color: @gray;
|
||||
background-repeat: no-repeat;
|
||||
background-position: 0.8em 0.4em;
|
||||
}
|
||||
|
||||
ul.tree li a.error {
|
||||
.var(color, color-critical-handled);
|
||||
color: @color-critical-handled;
|
||||
}
|
||||
|
||||
ul.tree li a:hover {
|
||||
.var(color, text-color);
|
||||
color: @text-color;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
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 */
|
||||
|
|
@ -486,9 +484,9 @@ ul.tree li a.error:hover {
|
|||
position: relative;
|
||||
|
||||
.flyover-content {
|
||||
.var(background-color, body-bg-color);
|
||||
background-color: @body-bg-color;
|
||||
border: 1px solid;
|
||||
.var(border-color, gray-lighter);
|
||||
border-color: @gray-lighter;
|
||||
box-shadow: 0 0 .5em 0 rgba(0, 0, 0, 0.2);
|
||||
position: absolute;
|
||||
padding: @vertical-padding @horizontal-padding;
|
||||
|
|
@ -496,11 +494,9 @@ ul.tree li a.error:hover {
|
|||
}
|
||||
|
||||
&.flyover-arrow-top .flyover-content:before {
|
||||
.var(background, body-bg-color);
|
||||
border-left: 1px solid;
|
||||
.var(border-left-color, gray-lighter);
|
||||
border-top: 1px solid;
|
||||
.var(border-top-color, gray-lighter);
|
||||
background: @body-bg-color;
|
||||
border-left: 1px solid @gray-lighter;
|
||||
border-top: 1px solid @gray-lighter;
|
||||
content: "";
|
||||
height: 1em;
|
||||
-ms-transform: rotate(45deg);
|
||||
|
|
@ -524,58 +520,58 @@ ul.tree li a.error:hover {
|
|||
}
|
||||
|
||||
.slice-state-ok {
|
||||
.var(stroke, color-ok);
|
||||
.var(background, color-ok);
|
||||
stroke: @color-ok;
|
||||
background: @color-ok;
|
||||
}
|
||||
|
||||
.slice-state-warning-handled {
|
||||
.var(stroke, color-warning-handled);
|
||||
.var(background, color-warning-handled);
|
||||
stroke: @color-warning-handled;
|
||||
background: @color-warning-handled;
|
||||
}
|
||||
|
||||
.slice-state-warning {
|
||||
.var(stroke, color-warning);
|
||||
.var(background, color-unreachable-handled);
|
||||
stroke: @color-warning;
|
||||
background: @color-unreachable-handled;
|
||||
}
|
||||
|
||||
.slice-state-critical-handled {
|
||||
.var(stroke, color-critical-handled);
|
||||
.var(background, color-critical-handled);
|
||||
stroke: @color-critical-handled;
|
||||
background: @color-critical-handled;
|
||||
}
|
||||
|
||||
.slice-state-critical {
|
||||
.var(stroke, color-critical);
|
||||
.var(background, color-critical);
|
||||
stroke: @color-critical;
|
||||
background: @color-critical;
|
||||
}
|
||||
|
||||
.slice-state-unknown-handled {
|
||||
.var(stroke, color-unknown-handled);
|
||||
.var(background, color-unknown-handled);
|
||||
stroke: @color-unknown-handled;
|
||||
background: @color-unknown-handled;
|
||||
}
|
||||
|
||||
.slice-state-unknown {
|
||||
.var(stroke, color-unknown);
|
||||
.var(background, color-unknown);
|
||||
stroke: @color-unknown;
|
||||
background: @color-unknown;
|
||||
}
|
||||
|
||||
.slice-state-unreachable-handled {
|
||||
.var(stroke, color-unreachable-handled);
|
||||
.var(background, color-unreachable-handled);
|
||||
stroke: @color-unreachable-handled;
|
||||
background: @color-unreachable-handled;
|
||||
}
|
||||
|
||||
.slice-state-unreachable {
|
||||
.var(stroke, color-unreachable);
|
||||
.var(background, color-unreachable);
|
||||
stroke: @color-unreachable;
|
||||
background: @color-unreachable;
|
||||
}
|
||||
|
||||
.slice-state-pending {
|
||||
.var(stroke, color-pending);
|
||||
.var(background, color-pending);
|
||||
stroke: @color-pending;
|
||||
background: @color-pending;
|
||||
}
|
||||
|
||||
.slice-state-not-checked {
|
||||
.var(stroke, gray-light);
|
||||
.var(background, gray-light);
|
||||
stroke: @gray-light;
|
||||
background: @gray-light;
|
||||
}
|
||||
|
||||
.donut {
|
||||
|
|
@ -592,7 +588,7 @@ ul.tree li a.error:hover {
|
|||
|
||||
.donut-label {
|
||||
font-weight: bold;
|
||||
.var(fill, text-color);
|
||||
fill: @text-color;
|
||||
}
|
||||
|
||||
.donut-label {
|
||||
|
|
@ -601,7 +597,7 @@ ul.tree li a.error:hover {
|
|||
}
|
||||
|
||||
.donut-label-big {
|
||||
.var(color, gray-light);
|
||||
color: @gray-light;
|
||||
.fg-stateful();
|
||||
font-size: 6em;
|
||||
line-height: 0;
|
||||
|
|
@ -612,7 +608,7 @@ ul.tree li a.error:hover {
|
|||
}
|
||||
|
||||
.donut-label-small {
|
||||
.var(fill, text-color);
|
||||
fill: @text-color;
|
||||
font-size: 1.2em;
|
||||
text-anchor: middle;
|
||||
-moz-transform: translateY(0.35em);
|
||||
|
|
|
|||
Loading…
Reference in New Issue