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

Integrate light theme's gray-lighter using a media query

Browse Source
This commit is contained in:
Johannes Meyer 2021-06-23 12:52:56 +02:00
parent b7f42e52dc
commit 49f905af06
11 changed files with 64 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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);
}

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

@ -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 {

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

@ -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);
}
}

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

@ -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;
}

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

@ -130,7 +130,7 @@ input.search {
padding: 0.5em;
}
> a:hover {
background-color: @gray-lighter;
.var(background-color, gray-lighter);
text-decoration: none;
}
}

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

@ -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;
}
}

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

@ -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);

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

@ -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;

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

@ -74,7 +74,7 @@
}
.tabs > .dropdown-nav-item > ul > li:hover > a {
background-color: @gray-lighter;
.var(background-color, gray-lighter);
text-decoration: none;
}

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

@ -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
public/css/themes/icinga-light-theme.less
View File

@ -1,3 +1,2 @@
@gray-lighter: #EEEEEE;
@gray-lightest: #F7F7F7;