47 lines
775 B
Text
47 lines
775 B
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.
|
||
|
|
}
|
||
|
|
|
||
|
|
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.2em);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@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;
|
||
|
|
}
|
||
|
|
}
|