tyler.durden
/
icingaweb2
mirror of https://github.com/Icinga/icingaweb2.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Integrate light theme's `@body-bg-color` using a media query

This commit is contained in:
Johannes Meyer 2021-06-23 11:01:31 +02:00
parent b59f26879e
commit 96687e37c6
13 changed files with 54 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -88,7 +88,7 @@ tbody > tr:nth-child(odd) {
}
tbody > tr:nth-child(even) {
background: @body-bg-color;
.var(background, body-bg-color);
}
td, th {

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

@ -2,7 +2,7 @@
.monitoring-statusbar {
position: relative;
background-color: @body-bg-color;
.var(background-color, body-bg-color);
border-top: 1px solid @gray-lighter;
padding: .25em @gutter;
line-height: 1.3;
@ -657,37 +657,37 @@ form.instance-features span.description, form.object-features span.description {
.state-critical {
background-color: @color-critical;
color: @body-bg-color;
.var(color, body-bg-color);
padding: 0.2em;
}
.state-ok {
background-color: @color-ok;
color: @body-bg-color;
.var(color, body-bg-color);
padding: 0.2em;
}
.state-unknown {
background-color: @color-unknown;
color: @body-bg-color;
.var(color, body-bg-color);
padding: 0.2em;
}
.state-warning {
background-color: @color-warning;
color: @body-bg-color;
.var(color, body-bg-color);
padding: 0.2em;
}
.state-down {
background-color: @color-down;
color: @body-bg-color;
.var(color, body-bg-color);
padding: 0.2em;
}
.state-up {
background-color: @color-up;
color: @body-bg-color;
.var(color, body-bg-color);
padding: 0.2em;
}
}

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

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

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

@ -69,6 +69,7 @@
@menu-2ndlvl-highlight-color: @text-color-inverted;
@menu-flyout-bg-color: @body-bg-color;
@menu-flyout-color: @text-color;
@tab-hover-bg-color: fade(@body-bg-color, 50%);
// Other colors
@color-granted: #59cd59;
@ -95,6 +96,17 @@
@vertical-padding: 0.5em; // 6px
@horizontal-padding: 1em; // 12px
@media (min-height: @prefer-light-color-scheme), (prefers-color-scheme: light) and (min-height: @enable-color-preference) {
:root {
--body-bg-color: #F5F9FA;
--badge-color: #F5F9FA;
--text-color-inverted: #F5F9FA;
--text-color-on-icinga-blue: #F5F9FA;
--menu-flyout-bg-color: #F5F9FA;
--tab-hover-bg-color: fade(#F5F9FA, 50%);
}
}
// Make padding not affect the final computed width of an element
html {
box-sizing: border-box;
@ -200,7 +212,8 @@ td, th {
content: "";
display: block;
background: @body-bg-color url(../img/icinga-loader.gif) no-repeat center center;
background: url(../img/icinga-loader.gif) no-repeat center center;
.var(background-color, body-bg-color);
background-size: 4em 4em;
opacity: 0;

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

@ -291,11 +291,11 @@ form.icinga-form .form-controls {
}
input[type="submit"].btn-remove {
.button(@body-bg-color, @color-critical, darken(@color-critical, 10%));
.button(~"var(--body-bg-color, @{body-bg-color})", @color-critical, darken(@color-critical, 10%));
}
input[type="submit"].btn-cancel {
.button(@body-bg-color, @gray, @black);
.button(~"var(--body-bg-color, @{body-bg-color})", @gray, @black);
}
button.noscript-apply {
@ -376,6 +376,7 @@ form.inline {
.icinga-controls input[type="checkbox"]:focus + .toggle-switch .toggle-slider {
box-shadow: 0 0 0 2px @body-bg-color, 0 0 0 4px fade(@icinga-blue, 40);
box-shadow: 0 0 0 2px var(--body-bg-color, @body-bg-color), 0 0 0 4px fade(@icinga-blue, 40);
}
.icinga-controls input[type="checkbox"]:checked + .toggle-switch .toggle-slider:before {

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

@ -20,7 +20,7 @@
#guest-error-message {
.fadein();
color: @body-bg-color;
.var(color, body-bg-color);
font-size: 2em;
}
@ -81,7 +81,7 @@
}
#layout {
background-color: @body-bg-color;
.var(background-color, body-bg-color);
color: @text-color;
font-family: @font-family;
}
@ -208,7 +208,7 @@
display: block;
line-height: 2.5em;
border-left: .5em solid @gray-light;
background: @body-bg-color;
.var(background, body-bg-color);
margin-bottom: 1px;
box-shadow: 0 0 1em 0 rgba(0,0,0,0.25);
@ -225,10 +225,10 @@
&.error {
border-color: @color-down;
background: @color-down;
color: @body-bg-color;
.var(color, body-bg-color);
.icon {
color: @body-bg-color;
.var(color, body-bg-color);
}
}
@ -251,10 +251,10 @@
&.warning {
border-color: @color-warning;
background: @color-warning;
color: @body-bg-color;
.var(color, body-bg-color);
.icon {
color: @body-bg-color;
.var(color, body-bg-color);
}
}
}

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

@ -324,7 +324,8 @@ a:hover > .icon-cancel {
content: "";
display: block;
height: 2em;
background: linear-gradient(fade(@body-bg-color, 0), @body-bg-color);
background: linear-gradient(transparent, @body-bg-color);
background: linear-gradient(transparent, var(--body-bg-color, @body-bg-color));
position: absolute;
bottom: 0;
left: 0;
@ -337,7 +338,8 @@ a:hover > .icon-cancel {
&:after {
opacity: 0;
background: linear-gradient(fade(@body-bg-color, 0), @body-bg-color);
background: linear-gradient(transparent, @body-bg-color);
background: linear-gradient(transparent, var(--body-bg-color, @body-bg-color));
}
}

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

@ -123,7 +123,7 @@
position: absolute;
right: -.75em;
background-color: @body-bg-color;
.var(background-color, body-bg-color);
box-shadow: 0 0 1em 0 rgba(0,0,0,0.6);
content: "";
display: block;
@ -154,7 +154,7 @@
&.active:after {
.transform(rotate(45deg));
background-color: @body-bg-color;
.var(background-color, body-bg-color);
box-shadow: 0 0 1em 0 rgba(0,0,0,.6);
content: "";
display: block;
@ -252,7 +252,7 @@
&:after {
.transform(rotate(45deg));
background-color: @body-bg-color;
.var(background-color, body-bg-color);
border-bottom: 1px solid @gray-light;
border-left: 1px solid @gray-light;
content: "";
@ -350,7 +350,7 @@
li {
display: block;
a, button[type="submit"] {
background-color: @body-bg-color;
.var(background-color, body-bg-color);
border: none;
left: -999px;
padding: @vertical-padding @horizontal-padding;
@ -461,7 +461,7 @@ input[type=text].search-input {
z-index: 3;
i {
background-color: @body-bg-color;
.var(background-color, body-bg-color);
border-radius: .25em 0 0 .25em;
font-size: 1.125em;
width: 2em;

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

@ -6,9 +6,10 @@
box-shadow: @arguments;
}
.button(@background-color: @body-bg-color, @border-font-color: @icinga-blue, @color-dark: darken(@border-font-color, 10%)) {
.button(@background-color: ~"var(--body-bg-color, @{body-bg-color})", @border-font-color: @icinga-blue, @color-dark: darken(@border-font-color, 10%)) {
.rounded-corners(3px);
background-color: extract-variable-default(@background-color);
background-color: @background-color;
border: 2px solid @border-font-color;
color: @border-font-color;
@ -25,6 +26,7 @@
&:hover,
&.btn-primary {
background-color: @border-font-color;
color: extract-variable-default(@background-color);
color: @background-color;
}
@ -32,6 +34,7 @@
&.btn-primary:hover {
background-color: @color-dark;
border-color: @color-dark;
color: extract-variable-default(@background-color);
color: @background-color;
}

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

@ -102,7 +102,7 @@
align-items: stretch;
flex-direction: column;
background-color: @body-bg-color;
.var(background-color, body-bg-color);
border-radius: .5em;
box-shadow: 0 0 2em 0 rgba(0, 0, 0, .6);
flex: 1;

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

@ -31,13 +31,13 @@
&:hover {
text-decoration: none;
background: fade(@body-bg-color, 50%);
.var(background, tab-hover-bg-color);
}
}
&.active > a,
> a:focus {
background-color: @body-bg-color;
.var(background-color, body-bg-color);
color: @text-color;
}
}
@ -55,7 +55,7 @@
.tabs > li > .close-container-control:hover,
.tabs > li > .refresh-container-control:focus,
.tabs > li > .refresh-container-control:hover {
background-color: @body-bg-color;
.var(background-color, body-bg-color);
color: @text-color;
text-decoration: none;
}
@ -64,7 +64,7 @@
.box-shadow();
.rounded-corners(0 0 0.3em 0.3em);
background-color: @body-bg-color;
.var(background-color, body-bg-color);
border: 1px solid @gray-light;
border-top: none;
margin-left: -1px;

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

@ -1,7 +1,7 @@
/*! Icinga Web 2 | (c) 2014 Icinga Development Team | GPLv2+ */
#announcements > ul {
background-color: @body-bg-color;
.var(background-color, body-bg-color);
list-style: none;
margin: 0;
padding: 0;
@ -458,7 +458,7 @@ ul.tree li a.error:hover {
position: relative;
.flyover-content {
background-color: @body-bg-color;
.var(background-color, body-bg-color);
border: 1px solid @gray-lighter;
box-shadow: 0 0 .5em 0 rgba(0, 0, 0, 0.2);
position: absolute;
@ -467,7 +467,7 @@ ul.tree li a.error:hover {
}
&.flyover-arrow-top .flyover-content:before {
background: @body-bg-color;
.var(background, body-bg-color);
border-left: 1px solid @gray-lighter;
border-top: 1px solid @gray-lighter;
content: "";

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

@ -7,7 +7,6 @@
@text-color: #535353;
@body-bg-color: #F5F9FA;
@menu-bg-color: #DEECF1;
@menu-color: #676767;