10
0
mirror of https://github.com/LCPQ/QUESTDB_website.git synced 2024-12-25 05:43:46 +01:00
QUESTDB_website/static/css/modal.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%);
}