57 lines
1 KiB
Text
57 lines
1 KiB
Text
body > .curtain
|
|
{ // Position the curtain on top of everything and dim the background.
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
|
|
box-shadow: inset 0 0 5em 0 var(--curtain-inset);
|
|
background: var(--curtain-dim);
|
|
|
|
// Show an animation when entering screen.
|
|
animation: curtain-in 0.4s ease-in;
|
|
transform-origin: center;
|
|
|
|
z-index: 1000; // On top of main content.
|
|
|
|
&.closed
|
|
{ // Added when the curtain is closing and will soon be removed from DOM.
|
|
transition: transform 0.4s ease-out, filter 0.4s ease-out, opacity 0.4s ease-out;
|
|
|
|
transform: scale(1.2);
|
|
filter: blur(0.5em);
|
|
opacity: 0;
|
|
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
|
|
body.dimmed
|
|
{ // Disable scroll and blur the content when the body is dimmed.
|
|
overflow: hidden;
|
|
|
|
> *:not(.curtain)
|
|
{
|
|
transition: filter 0.4s ease-in;
|
|
|
|
filter: blur(0.25em);
|
|
}
|
|
}
|
|
|
|
@keyframes curtain-in
|
|
{ // Screen enter animation.
|
|
from
|
|
{
|
|
transform: scale(1.2);
|
|
filter: blur(0.5em);
|
|
opacity: 0;
|
|
}
|
|
|
|
to
|
|
{
|
|
transform: scale(1);
|
|
filter: blur(0);
|
|
opacity: 1;
|
|
}
|
|
}
|