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

Bugfix/fix collapsible bottom fade gradient (#4593) 

* base: Introduce `@body-bg-transparent-color

* main.less: Fix collapsible bottom fade gradient

* css: Raise `.impact`'s z-index even higher

Co-authored-by: Johannes Meyer <johannes.meyer@icinga.com>
This commit is contained in:
Florian Strohmaier 2021-11-10 09:34:40 +01:00 committed by GitHub
parent 2c01f38dec
commit 1b0bb1b80b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 10 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -47,6 +47,7 @@
// Background color for <body>
@body-bg-color: #282E39;
@body-bg-color-transparent: fade(@body-bg-color, 0);
// Text colors
@text-color: @white;
@ -113,8 +114,12 @@
@horizontal-padding: 1em; // 12px
@media (min-height: @prefer-light-color-scheme), (prefers-color-scheme: light) and (min-height: @enable-color-preference) {
@light-body-bg-color: #F5F9FA;
:root {
--body-bg-color: #F5F9FA;
--body-bg-color: @light-body-bg-color;
--body-bg-color-transparent: fade(@light-body-bg-color, 0);
--badge-color: #F5F9FA;
--text-color-inverted: #F5F9FA;
--text-color-on-icinga-blue: #F5F9FA;
@ -279,7 +284,7 @@ td, th {
left: 0;
opacity: .7;
z-index: 1;
z-index: 1000;
pointer-events: all;
.transition(opacity 1s 2s linear);
}

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

@ -366,12 +366,12 @@ a:hover > .icon-cancel {
.collapsible.collapsed:not([data-toggle-element]) {
position: relative;
&:before, &:after {
&:after {
content: "";
display: block;
height: 2em;
background: linear-gradient(transparent, @body-bg-color);
background: linear-gradient(transparent, var(--body-bg-color, @body-bg-color));
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;
@ -381,22 +381,6 @@ a:hover > .icon-cancel {
opacity: 1;
transition: opacity 2s 1s linear;
}
&:after {
opacity: 0;
background: linear-gradient(transparent, @body-bg-color);
background: linear-gradient(transparent, var(--body-bg-color, @body-bg-color));
}
}
.impact .collapsible.collapsed:not([data-toggle-element]) {
&:before {
opacity: 0;
}
&:after {
opacity: 1;
}
}
.role-memberships {