tildeverse
/
cryptpad
4
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Fade in and delay the placeholder to hide it to high connection users

This commit is contained in:
Maxime Cesson 2022-08-02 14:09:42 +02:00
parent 96a12d12a9
commit 46c0df4304
2 changed files with 14 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
customize.dist/pre-loading.js
View File

@ -17,5 +17,10 @@ elem.innerHTML = [
document.addEventListener('DOMContentLoaded', function() {
document.body.appendChild(elem);
// fallback if CSS animations not available
setTimeout(() => {
document.querySelector('.placeholder-logo-container').style.opacity = 100;
document.querySelector('.placeholder-message-container').style.opacity = 100;
}, 3000);
});
}());

9
customize.dist/src/pre-loading.css
View File

@ -41,6 +41,8 @@
flex: 0 1 auto;
min-height: 0;
text-align: center;
opacity: 0;
animation: fadein 5s ease 2s forwards;
}
#placeholder .placeholder-logo-container img {
max-width: 100%;
@ -56,6 +58,8 @@
display: flex;
flex-flow: column;
align-items: center;
opacity: 0;
animation: fadein 5s ease 2s forwards;
}
#placeholder .placeholder-logo {
margin-left: auto;
@ -67,6 +71,11 @@
margin-bottom: 2em;
}
@keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
@media screen and (max-width: 500px) {
#placeholder {
font-size: 16px !important;