base.less: Redesign loading effect

This commit is contained in:
Florian Strohmaier 2020-02-27 15:36:22 +01:00 committed by Johannes Meyer
parent f93529ff74
commit 224e87c856
1 changed files with 29 additions and 8 deletions

View File

@ -188,13 +188,34 @@ td, th {
transition: none !important;
}
// Styles for when containers are loading. JS will remove this once the containers are ready
.impact {
.transition(background-color 2s 1s linear !important);
background-color: @gray-lighter !important;
}
.container {
&:before {
content: "";
display: block;
opacity: 0;
pointer-events: none;
z-index: -10;
}
.impact > .controls, .impact li.active a {
.transition(background-color 2s 1s linear !important);
background-color: @gray-lighter !important;
&.impact {
overflow: hidden;
position: relative;
}
&.impact:before {
content: "";
display: block;
background: @body-bg-color url(/img/icinga-loader.gif) no-repeat center center;
background-size: 4em 4em;
opacity: .7;
pointer-events: all;
position: absolute;
top: 2.5em;
right: 0;
bottom: 0;
left: 0;
z-index: 10;
.transition(opacity 1s 2s linear !important);
}
}