tyler.durden/icingaweb2
1
0
Fork 0
mirror of https://github.com/Icinga/icingaweb2.git synced 2025-07-27 07:44:04 +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 // 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: @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);
} }

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

@ -3,7 +3,8 @@
.monitoring-statusbar { .monitoring-statusbar {
position: relative; position: relative;
.var(background-color, body-bg-color); .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; padding: .25em @gutter;
line-height: 1.3; line-height: 1.3;
@ -195,7 +196,7 @@
padding: .25em .5em; padding: .25em .5em;
&:hover { &:hover {
background-color: @gray-lighter; .var(background-color, gray-lighter);
text-decoration: none; text-decoration: none;
} }
} }
@ -285,7 +286,8 @@ div.box.ok_hosts div.box.entry, div.box.problem_hosts div.box.entry {
} }
div.box.monitoringfeatures { div.box.monitoringfeatures {
border: 1px solid @gray-lighter; border: 1px solid;
.var(border-color, gray-lighter);
border-left: 15px solid; border-left: 15px solid;
.var(border-left-color, "gray"); .var(border-left-color, "gray");
} }
@ -303,7 +305,8 @@ div.box.monitoringfeatures a.feature-highlight {
} }
div.box.hostservicechecks { div.box.hostservicechecks {
border: 1px solid @gray-lighter; border: 1px solid;
.var(border-color, gray-lighter);
border-left: 15px solid; border-left: 15px solid;
.var(border-left-color, "gray"); .var(border-left-color, "gray");
} }
@ -317,7 +320,8 @@ div.box.hostservicechecks th {
div.box.process { div.box.process {
width: 100%; width: 100%;
max-width: 50em; max-width: 50em;
border: 1px solid @gray-lighter; border: 1px solid;
.var(border-color, gray-lighter);
border-left: 15px solid; border-left: 15px solid;
.var(border-left-color, "gray"); .var(border-left-color, "gray");
margin-bottom: 1em; margin-bottom: 1em;
@ -326,7 +330,8 @@ div.box.process {
.process div.box.header { .process div.box.header {
min-height: 5em; min-height: 5em;
border-bottom:1px solid @gray-lighter; border-bottom:1px solid;
.var(border-bottom-color, gray-lighter);
} }
.process > .boxview > div.box { .process > .boxview > div.box {
@ -337,7 +342,8 @@ 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 @gray-lighter; border-bottom:1px solid;
.var(border-bottom-color, gray-lighter);
} }
.process th { .process th {
@ -376,14 +382,16 @@ div.backend-not-running {
div.box.features { div.box.features {
width: 100%; width: 100%;
max-width: 50em; max-width: 50em;
border: 1px solid @gray-lighter; border: 1px solid;
.var(border-color, gray-lighter);
border-left: 15px solid; border-left: 15px solid;
.var(border-left-color, "gray"); .var(border-left-color, "gray");
} }
.features div.box.header { .features div.box.header {
min-height: 5em; min-height: 5em;
border-bottom:1px solid @gray-lighter; border-bottom: 1px solid;
.var(border-bottom-color, gray-lighter);
} }
.features > .boxview > div.box { .features > .boxview > div.box {
@ -394,7 +402,8 @@ 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 @gray-lighter; border-bottom: 1px solid;
.var(border-bottom-color, gray-lighter);
} }
@ -403,7 +412,8 @@ div.box.features {
div.box.stats { div.box.stats {
width: 100%; width: 100%;
max-width: 50em; max-width: 50em;
border: 1px solid @gray-lighter; border: 1px solid;
.var(border-color, gray-lighter);
border-left: 15px solid; border-left: 15px solid;
.var(border-left-color, "gray"); .var(border-left-color, "gray");
.var(color, text-color); .var(color, text-color);
@ -424,7 +434,8 @@ div.box.stats {
.stats > h2 { .stats > h2 {
text-align: left; text-align: left;
border-bottom: 1px solid @gray-lighter; border-bottom: 1px solid;
.var(border-bottom-color, gray-lighter);
> .hosts-summary, > .hosts-summary,
> .services-summary { > .services-summary {
@ -444,7 +455,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 @gray-lighter; border: 1px solid;
.var(border-color, gray-lighter);
border-left: 15px solid; border-left: 15px solid;
.var(border-left-color, "gray"); .var(border-left-color, "gray");
@ -658,7 +670,8 @@ form.instance-features span.description, form.object-features span.description {
} }
.plugin-output { .plugin-output {
border-left: 5px solid @gray-lighter; border-left: 5px solid;
.var(border-left-color, gray-lighter);
padding: 0.66em 0.33em; padding: 0.66em 0.33em;
.state-critical { .state-critical {

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

@ -81,7 +81,8 @@
} }
.connector { .connector {
border: 0 solid @gray-lighter; border: 0 solid;
.var(border-color, gray-lighter);
border-bottom-width: 2px; border-bottom-width: 2px;
&.granted { &.granted {
@ -100,7 +101,8 @@
.role { .role {
.rounded-corners(1em); .rounded-corners(1em);
border: 2px solid @gray-lighter; border: 2px solid;
.var(border-color, gray-lighter);
&.granted { &.granted {
border: 2px solid @color-granted; border: 2px solid @color-granted;
@ -113,7 +115,7 @@
.restriction { .restriction {
font-family: @font-family-fixed; 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: #7F7F7F;
--gray-semilight: #A9A9A9; --gray-semilight: #A9A9A9;
--gray-light: #C9C9C9; --gray-light: #C9C9C9;
--gray-lighter: #EEEEEE;
} }
} }
@ -164,7 +165,8 @@ blockquote, p, pre {
} }
blockquote { blockquote {
border-left: 5px solid @gray-lighter; border-left: 5px solid;
.var(border-left-color, gray-lighter);
padding: 0.667em 0.333em; padding: 0.667em 0.333em;
} }
@ -174,7 +176,8 @@ h1, h2, h3, h4, h5, h6 {
} }
h1 { h1 {
border-bottom: 1px solid @gray-lighter; border-bottom: 1px solid;
.var(border-bottom-color, gray-lighter);
font-size: 1.333em; font-size: 1.333em;
} }

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

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

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

@ -398,7 +398,7 @@ form.inline {
.var(border-color, gray-light); .var(border-color, gray-light);
&:before { &:before {
background-color: @gray-lighter; .var(background-color, gray-lighter);
.var(border-color, gray-light); .var(border-color, gray-light);
} }
} }
@ -411,7 +411,7 @@ form.icinga-form .control-group.disabled .control-label-group {
.icinga-controls { .icinga-controls {
input[disabled], input[disabled],
select[disabled] { select[disabled] {
background: @gray-lighter; .var(background-color, gray-lighter);
border-color: transparent; border-color: transparent;
} }
} }

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

@ -105,7 +105,8 @@ a:hover > .icon-cancel {
margin: 0; margin: 0;
> dt { > dt {
border-bottom: 1px solid @gray-lighter; border-bottom: 1px solid;
.var(border-bottom-color, gray-lighter);
margin-bottom: 0.25em; margin-bottom: 0.25em;
&:hover { &:hover {
@ -275,7 +276,7 @@ a:hover > .icon-cancel {
margin-top: -1em; margin-top: -1em;
margin-right: .25em; margin-right: .25em;
background: @gray-lighter; .var(background, gray-lighter);
.var(color, "gray"); .var(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);

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

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

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

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

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

@ -7,7 +7,8 @@
padding: 0; padding: 0;
> li { > li {
border-bottom: 1px solid @gray-lighter; border-bottom: 1px solid;
.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;
@ -460,7 +461,8 @@ ul.tree li a.error:hover {
.flyover-content { .flyover-content {
.var(background-color, body-bg-color); .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); 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;
@ -469,8 +471,10 @@ ul.tree li a.error:hover {
&.flyover-arrow-top .flyover-content:before { &.flyover-arrow-top .flyover-content:before {
.var(background, body-bg-color); .var(background, body-bg-color);
border-left: 1px solid @gray-lighter; border-left: 1px solid;
border-top: 1px solid @gray-lighter; .var(border-left-color, 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);

1
public/css/themes/icinga-light-theme.less
View File

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