Core/src/styles/components/_curtains.less

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;
	}
}