mirror of
https://github.com/LCPQ/QUESTDB_website.git
synced 2024-08-25 05:31:51 +02:00
42 lines
1.3 KiB
CSS
42 lines
1.3 KiB
CSS
/* Start by setting display:none to make this hidden.
|
|
Then we position it in relation to the viewport window
|
|
with position:fixed. Width, height, top and left speak
|
|
for themselves. Background we set to 80% white with
|
|
our animation centered, and no-repeating */
|
|
.modal {
|
|
background-color: rgba(255, 255, 255, .9);
|
|
|
|
@supports ((-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px))) {
|
|
display : none;
|
|
position : fixed;
|
|
z-index : 1000;
|
|
top : 0;
|
|
left : 0;
|
|
height : 100%;
|
|
width : 100%;
|
|
-webkit-backdrop-filter: blur(20px);
|
|
backdrop-filter : blur(20px);
|
|
background-color : rgba(255, 255, 255, .3);
|
|
}
|
|
}
|
|
|
|
/* When the body has the loading class, we turn
|
|
the scrollbar off with overflow:hidden */
|
|
body.loading .modal {
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Anytime the body has the loading class, our
|
|
modal element will be visible */
|
|
body.loading .modal {
|
|
display: block;
|
|
cursor : wait
|
|
}
|
|
|
|
.modal .content {
|
|
position : absolute;
|
|
left : 50%;
|
|
top : 50%;
|
|
-webkit-transform: translate(-50%, -50%);
|
|
transform : translate(-50%, -50%);
|
|
} |