olcxjas-softworks/PLWL
2
0
Fork 0
Code Issues Pull requests Projects Releases 16 Packages Wiki Activity Actions

tuff popup transition

Browse source
This commit is contained in:
olcxja 2026-09-30 19:02:41 +02:00
commit 6f9c486774
2 changed files with 86 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

35
renderer/style.css
View file

@ -603,6 +603,7 @@ select {
opacity: 0;
transform: scale(0.6);
transition: all 0.2s var(--spring);
position: relative;
}
.modal-overlay.show .modal {
opacity: 1;
@ -613,6 +614,40 @@ select {
transform: scale(0.8);
transition: all 0.15s ease;
}
/* --- animated content swap (import mode -> prefix picker etc.) -------------- */
/* During the morph the box keeps a fixed pixel height and glides to the new
content's height; overflow is clipped ONLY then (a permanent clip would
cut off open custom-select dropdowns). */
.modal.resizing {
overflow: hidden;
transition: height 0.22s var(--spring);
will-change: height;
}
/* Opaque snapshot of the OLD content laid over the new one; fades out while
the box glides -> content dissolves from old to new (like switching tabs). */
.modal .modal-ghost {
position: absolute;
inset: 1.4rem 1.6rem; /* overlay the box's own padding area */
z-index: 5;
pointer-events: none;
background: var(--panel-color);
display: flex;
flex-direction: column;
gap: 0.8rem; /* mirror the modal's layout so the snapshot aligns 1:1 */
opacity: 1;
}
.modal.swapping .modal-ghost {
transition: opacity 0.18s ease;
opacity: 0;
}
/* new content fades in under the fading-out ghost -> real crossfade */
.modal.swapping > :not(.modal-ghost) {
animation: modal-content-in 0.2s ease;
}
@keyframes modal-content-in {
from { opacity: 0; }
to { opacity: 1; }
}
.modal h2 {
font-family: 'Nunito Black', 'Nunito', sans-serif;
font-size: 1.2rem;