mirrors/PairDrop
1
0
Fork 0
mirror of https://github.com/schlagmichdoch/PairDrop.git synced 2025-04-29 02:59:15 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Speed up initial load while still preventing css layout shift; Tidy up ui.js

Browse source
This commit is contained in:
schlagmichdoch 2023-10-11 23:22:10 +02:00
parent 2578803a78
commit ed2f1b0c61
8 changed files with 353 additions and 312 deletions
Download patch file Download diff file Expand all files Collapse all files

41
public_included_ws_fallback/styles.css
View file

@ -274,6 +274,9 @@ x-noscript {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#center {
@ -422,10 +425,6 @@ x-no-peers {
padding: 8px;
height: 137px;
text-align: center;
animation: fade-in 600ms;
animation-fill-mode: backwards;
/* prevent flickering on load */
animation-iteration-count: 0;
}
x-no-peers h2,
@ -643,7 +642,6 @@ footer .logo {
margin-bottom: 8px;
color: var(--primary-color);
margin-top: -10px;
animation: ease-in;
}
.discovery-wrapper {
@ -1258,22 +1256,23 @@ button::-moz-focus-inner {
z-index: 1;
}
#about:not(:target) header.fade-in {
#about:not(:target) header {
transition-delay: 400ms;
}
#about:target header.fade-in {
#about:target header {
transition-delay: 100ms;
}
#about .fade-in {
#about > * {
transition: opacity 300ms ease 300ms;
will-change: opacity;
pointer-events: all;
}
#about:not(:target) .fade-in {
opacity: 0 !important;
#about:not(:target) > header,
#about:not(:target) > section {
opacity: 0;
pointer-events: none;
transition-delay: 0s;
}
@ -1452,17 +1451,17 @@ x-peers:empty~x-instructions {
/* Prevent Cumulative Layout Shift */
body > header,
canvas,
#center,
x-no-peers,
x-peers,
x-instructions,
footer > .icon.logo,
.discovery-wrapper,
.known-as-wrapper {
transition: opacity 0.5s ease 0.1s;
opacity: 0; /* will be set to 1 after initial translation is loaded */
.fade-in {
animation: fade-in 600ms;
animation-fill-mode: backwards;
}
.no-animation-on-load {
animation-iteration-count: 0;
}
.opacity-0 {
opacity: 0;
}
/* Responsive Styles */