PTEROSOR/QUESTDB_website
10
0
Fork 0
mirror of https://github.com/LCPQ/QUESTDB_website.git synced 2024-08-25 13:41:50 +02:00
Code Releases Activity

Fallback when backdrop-filter or -webkit-backdrop-filter not exist like in FireFox

Browse Source
This commit is contained in:
Mickaël Véril 2020-01-24 17:15:38 +01:00
parent 3d92e97ffb
commit 7d5d38a1e9
1 changed files with 22 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
static/css/modal.css
View File

@ -3,17 +3,21 @@
with position:fixed. Width, height, top and left speak with position:fixed. Width, height, top and left speak
for themselves. Background we set to 80% white with for themselves. Background we set to 80% white with
our animation centered, and no-repeating */ our animation centered, and no-repeating */
.modal { .modal {
display: none; background-color: rgba(255, 255, 255, .9);
position: fixed;
z-index: 1000; @supports ((-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px))) {
top: 0; display : none;
left: 0; position : fixed;
height: 100%; z-index : 1000;
width: 100%; top : 0;
-webkit-backdrop-filter: blur(20px); left : 0;
backdrop-filter: blur(20px); height : 100%;
background-color: rgba(255,255,255,.3); 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 /* When the body has the loading class, we turn
@ -26,12 +30,13 @@ body.loading .modal {
modal element will be visible */ modal element will be visible */
body.loading .modal { body.loading .modal {
display: block; display: block;
cursor: wait cursor : wait
} }
.modal .content { .modal .content {
position: absolute; position : absolute;
left: 50%; left : 50%;
top: 50%; top : 50%;
-webkit-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%); transform : translate(-50%, -50%);
} }