mirror of
https://github.com/Icinga/icingaweb2.git
synced 2025-07-24 06:14:25 +02:00
Integrate light theme's gray-lighter
using a media query
This commit is contained in:
parent
b7f42e52dc
commit
49f905af06
@ -2,13 +2,20 @@
|
||||
|
||||
// Mixins
|
||||
|
||||
.gradient(@a: @gray-lighter; @b: @gray-lightest) {
|
||||
.gradient(@a: ~"var(--gray-lighter, @{gray-lighter})"; @b: @gray-lightest) {
|
||||
background: extract-variable-default(@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-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);
|
||||
}
|
||||
|
||||
|
@ -3,7 +3,8 @@
|
||||
.monitoring-statusbar {
|
||||
position: relative;
|
||||
.var(background-color, body-bg-color);
|
||||
border-top: 1px solid @gray-lighter;
|
||||
border-top: 1px solid;
|
||||
.var(border-top-color, gray-lighter);
|
||||
padding: .25em @gutter;
|
||||
line-height: 1.3;
|
||||
|
||||
@ -195,7 +196,7 @@
|
||||
padding: .25em .5em;
|
||||
|
||||
&:hover {
|
||||
background-color: @gray-lighter;
|
||||
.var(background-color, gray-lighter);
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
@ -285,7 +286,8 @@ div.box.ok_hosts div.box.entry, div.box.problem_hosts div.box.entry {
|
||||
}
|
||||
|
||||
div.box.monitoringfeatures {
|
||||
border: 1px solid @gray-lighter;
|
||||
border: 1px solid;
|
||||
.var(border-color, gray-lighter);
|
||||
border-left: 15px solid;
|
||||
.var(border-left-color, "gray");
|
||||
}
|
||||
@ -303,7 +305,8 @@ div.box.monitoringfeatures a.feature-highlight {
|
||||
}
|
||||
|
||||
div.box.hostservicechecks {
|
||||
border: 1px solid @gray-lighter;
|
||||
border: 1px solid;
|
||||
.var(border-color, gray-lighter);
|
||||
border-left: 15px solid;
|
||||
.var(border-left-color, "gray");
|
||||
}
|
||||
@ -317,7 +320,8 @@ div.box.hostservicechecks th {
|
||||
div.box.process {
|
||||
width: 100%;
|
||||
max-width: 50em;
|
||||
border: 1px solid @gray-lighter;
|
||||
border: 1px solid;
|
||||
.var(border-color, gray-lighter);
|
||||
border-left: 15px solid;
|
||||
.var(border-left-color, "gray");
|
||||
margin-bottom: 1em;
|
||||
@ -326,7 +330,8 @@ div.box.process {
|
||||
|
||||
.process div.box.header {
|
||||
min-height: 5em;
|
||||
border-bottom:1px solid @gray-lighter;
|
||||
border-bottom:1px solid;
|
||||
.var(border-bottom-color, gray-lighter);
|
||||
}
|
||||
|
||||
.process > .boxview > div.box {
|
||||
@ -337,7 +342,8 @@ div.box.process {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1em;
|
||||
padding-bottom: 1em;
|
||||
border-bottom:1px solid @gray-lighter;
|
||||
border-bottom:1px solid;
|
||||
.var(border-bottom-color, gray-lighter);
|
||||
}
|
||||
|
||||
.process th {
|
||||
@ -376,14 +382,16 @@ div.backend-not-running {
|
||||
div.box.features {
|
||||
width: 100%;
|
||||
max-width: 50em;
|
||||
border: 1px solid @gray-lighter;
|
||||
border: 1px solid;
|
||||
.var(border-color, gray-lighter);
|
||||
border-left: 15px solid;
|
||||
.var(border-left-color, "gray");
|
||||
}
|
||||
|
||||
.features div.box.header {
|
||||
min-height: 5em;
|
||||
border-bottom:1px solid @gray-lighter;
|
||||
border-bottom: 1px solid;
|
||||
.var(border-bottom-color, gray-lighter);
|
||||
}
|
||||
|
||||
.features > .boxview > div.box {
|
||||
@ -394,7 +402,8 @@ div.box.features {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1em;
|
||||
padding-bottom: 1em;
|
||||
border-bottom:1px solid @gray-lighter;
|
||||
border-bottom: 1px solid;
|
||||
.var(border-bottom-color, gray-lighter);
|
||||
}
|
||||
|
||||
|
||||
@ -403,7 +412,8 @@ div.box.features {
|
||||
div.box.stats {
|
||||
width: 100%;
|
||||
max-width: 50em;
|
||||
border: 1px solid @gray-lighter;
|
||||
border: 1px solid;
|
||||
.var(border-color, gray-lighter);
|
||||
border-left: 15px solid;
|
||||
.var(border-left-color, "gray");
|
||||
.var(color, text-color);
|
||||
@ -424,7 +434,8 @@ div.box.stats {
|
||||
|
||||
.stats > h2 {
|
||||
text-align: left;
|
||||
border-bottom: 1px solid @gray-lighter;
|
||||
border-bottom: 1px solid;
|
||||
.var(border-bottom-color, gray-lighter);
|
||||
|
||||
> .hosts-summary,
|
||||
> .services-summary {
|
||||
@ -444,7 +455,8 @@ div.box.stats {
|
||||
div.timeline-legend {
|
||||
padding: 0.5em;
|
||||
margin-top: 2em;
|
||||
border: 1px solid @gray-lighter;
|
||||
border: 1px solid;
|
||||
.var(border-color, gray-lighter);
|
||||
border-left: 15px solid;
|
||||
.var(border-left-color, "gray");
|
||||
|
||||
@ -658,7 +670,8 @@ form.instance-features span.description, form.object-features span.description {
|
||||
}
|
||||
|
||||
.plugin-output {
|
||||
border-left: 5px solid @gray-lighter;
|
||||
border-left: 5px solid;
|
||||
.var(border-left-color, gray-lighter);
|
||||
padding: 0.66em 0.33em;
|
||||
|
||||
.state-critical {
|
||||
|
@ -81,7 +81,8 @@
|
||||
}
|
||||
|
||||
.connector {
|
||||
border: 0 solid @gray-lighter;
|
||||
border: 0 solid;
|
||||
.var(border-color, gray-lighter);
|
||||
border-bottom-width: 2px;
|
||||
|
||||
&.granted {
|
||||
@ -100,7 +101,8 @@
|
||||
|
||||
.role {
|
||||
.rounded-corners(1em);
|
||||
border: 2px solid @gray-lighter;
|
||||
border: 2px solid;
|
||||
.var(border-color, gray-lighter);
|
||||
|
||||
&.granted {
|
||||
border: 2px solid @color-granted;
|
||||
@ -113,7 +115,7 @@
|
||||
|
||||
.restriction {
|
||||
font-family: @font-family-fixed;
|
||||
background-color: @gray-lighter;
|
||||
.var(background-color, gray-lighter);
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -128,6 +128,7 @@
|
||||
--gray: #7F7F7F;
|
||||
--gray-semilight: #A9A9A9;
|
||||
--gray-light: #C9C9C9;
|
||||
--gray-lighter: #EEEEEE;
|
||||
}
|
||||
}
|
||||
|
||||
@ -164,7 +165,8 @@ blockquote, p, pre {
|
||||
}
|
||||
|
||||
blockquote {
|
||||
border-left: 5px solid @gray-lighter;
|
||||
border-left: 5px solid;
|
||||
.var(border-left-color, gray-lighter);
|
||||
padding: 0.667em 0.333em;
|
||||
}
|
||||
|
||||
@ -174,7 +176,8 @@ h1, h2, h3, h4, h5, h6 {
|
||||
}
|
||||
|
||||
h1 {
|
||||
border-bottom: 1px solid @gray-lighter;
|
||||
border-bottom: 1px solid;
|
||||
.var(border-bottom-color, gray-lighter);
|
||||
font-size: 1.333em;
|
||||
}
|
||||
|
||||
|
@ -130,7 +130,7 @@ input.search {
|
||||
padding: 0.5em;
|
||||
}
|
||||
> a:hover {
|
||||
background-color: @gray-lighter;
|
||||
.var(background-color, gray-lighter);
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
@ -398,7 +398,7 @@ form.inline {
|
||||
.var(border-color, gray-light);
|
||||
|
||||
&:before {
|
||||
background-color: @gray-lighter;
|
||||
.var(background-color, gray-lighter);
|
||||
.var(border-color, gray-light);
|
||||
}
|
||||
}
|
||||
@ -411,7 +411,7 @@ form.icinga-form .control-group.disabled .control-label-group {
|
||||
.icinga-controls {
|
||||
input[disabled],
|
||||
select[disabled] {
|
||||
background: @gray-lighter;
|
||||
.var(background-color, gray-lighter);
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
|
@ -105,7 +105,8 @@ a:hover > .icon-cancel {
|
||||
margin: 0;
|
||||
|
||||
> dt {
|
||||
border-bottom: 1px solid @gray-lighter;
|
||||
border-bottom: 1px solid;
|
||||
.var(border-bottom-color, gray-lighter);
|
||||
margin-bottom: 0.25em;
|
||||
|
||||
&:hover {
|
||||
@ -275,7 +276,7 @@ a:hover > .icon-cancel {
|
||||
margin-top: -1em;
|
||||
margin-right: .25em;
|
||||
|
||||
background: @gray-lighter;
|
||||
.var(background, gray-lighter);
|
||||
.var(color, "gray");
|
||||
border: none;
|
||||
-webkit-box-shadow: 0 0 1/3em rgba(0,0,0,.3);
|
||||
|
@ -140,7 +140,8 @@
|
||||
// Columns
|
||||
|
||||
#layout.twocols #col2 {
|
||||
border-left: 1px solid @gray-lighter;
|
||||
border-left: 1px solid;
|
||||
.var(border-left-color, gray-lighter);
|
||||
}
|
||||
|
||||
#layout.twocols.wide-layout #col2 {
|
||||
@ -158,7 +159,8 @@
|
||||
}
|
||||
|
||||
#layout.twocols #col2 {
|
||||
border-left: 1px solid @gray-lighter;
|
||||
border-left: 1px solid;
|
||||
.var(border-left-color, gray-lighter);
|
||||
|
||||
&:empty {
|
||||
display: flex;
|
||||
|
@ -74,7 +74,7 @@
|
||||
}
|
||||
|
||||
.tabs > .dropdown-nav-item > ul > li:hover > a {
|
||||
background-color: @gray-lighter;
|
||||
.var(background-color, gray-lighter);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
@ -7,7 +7,8 @@
|
||||
padding: 0;
|
||||
|
||||
> li {
|
||||
border-bottom: 1px solid @gray-lighter;
|
||||
border-bottom: 1px solid;
|
||||
.var(border-bottom-color, gray-lighter);
|
||||
line-height: 1.5em;
|
||||
padding: 0.5em 1em 0.5em 3em;
|
||||
|
||||
@ -460,7 +461,8 @@ ul.tree li a.error:hover {
|
||||
|
||||
.flyover-content {
|
||||
.var(background-color, body-bg-color);
|
||||
border: 1px solid @gray-lighter;
|
||||
border: 1px solid;
|
||||
.var(border-color, gray-lighter);
|
||||
box-shadow: 0 0 .5em 0 rgba(0, 0, 0, 0.2);
|
||||
position: absolute;
|
||||
padding: @vertical-padding @horizontal-padding;
|
||||
@ -469,8 +471,10 @@ ul.tree li a.error:hover {
|
||||
|
||||
&.flyover-arrow-top .flyover-content:before {
|
||||
.var(background, body-bg-color);
|
||||
border-left: 1px solid @gray-lighter;
|
||||
border-top: 1px solid @gray-lighter;
|
||||
border-left: 1px solid;
|
||||
.var(border-left-color, gray-lighter);
|
||||
border-top: 1px solid;
|
||||
.var(border-top-color, gray-lighter);
|
||||
content: "";
|
||||
height: 1em;
|
||||
-ms-transform: rotate(45deg);
|
||||
|
@ -1,3 +1,2 @@
|
||||
|
||||
@gray-lighter: #EEEEEE;
|
||||
@gray-lightest: #F7F7F7;
|
||||
|
Loading…
x
Reference in New Issue
Block a user