victorwesterlund.com/public/assets/css/modal.css

/* Victor Westerlund */

/* -- Transition overrides -- */

body main .screen {
	transition: var(--transition) transform, var(--transition) filter;
	transition-delay: calc(var(--transition) / 2);
}

.modal.active + .modal:nth-child(n+2),
body .modal.active ~ main .screen {
	transition: var(--transition);
	transition-delay: 1ms;
	transform: scale(.95);
	pointer-events: none;
	filter: blur(2px);
}

.modal.active + .modal {
	z-index: 10;
}

.modal:first-child {
	z-index: 15;
}

.modal.active + .modal:nth-child(n+2) {
	filter: blur(2px) brightness(.5);
	z-index: 5;
}

/* -- Boilerplate -- */

.modal {
	transition: var(--transition) transform, var(--transition) filter;
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100%;
	z-index: 10;
	pointer-events: none;
	box-sizing: border-box;
	padding: var(--padding);
}

.modal.active {
	pointer-events: all;
}

.modal .button {
	align-self: stretch;
}

.modal .inner {
	transition: var(--transition) transform, var(--transition) opacity;
	position: relative;
	background-color: var(--swatch-background);
	width: calc(100vw - var(--padding));
	max-width: 500px;
	max-height: 100%;
	overflow-y: auto;
	word-break: break-word;
	box-sizing: border-box;
	padding: var(--padding);
	border-radius: var(--border-radius);
	box-shadow: 0 3px 30px 0 rgba(33,33,33,.2);
	opacity: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--padding);
}

.modal.active .inner {
	opacity: 1;
}

.modal .inner > h1,
.modal .inner > h2,
.modal .inner > p {
	text-align: center;
}

/* ---- */

.spinner.logo {
	--size: clamp(30px,5vw,60px);
	--anim-speed: 1s;
	align-self: center;
	margin-top: var(--padding);
	margin-left: calc((var(--size) / 2) * -1);
	animation: logoSpinner var(--anim-speed) infinite alternate linear;
}

.error {
	text-align: center;
	font-size: 20px;
}

.error:first-line {
	font-size: 50px;
}

@keyframes logoSpinner {
	to {
		opacity: .1;
	}
}

/* ---- */

.modal h1 {
	font-size: clamp(20px,2vw,20px);
}

.modal pre {
	align-self: stretch;
	overflow: scroll;
	background-color: black;
	color: white;
	padding: 10px 15px;
    border-radius: 6px;
}

/* -- Cards -- */

.modal.card .inner {
	align-self: flex-end;
	transform: scale(.99) translateY(1vh);
}

.modal.card.active .inner {
	transform: scale(1) translateY(0);
}

.modal.card .button[data-action="close"] {
	margin-top: auto;
}

/* -- Dialogs -- */

.modal.dialog .inner {
	transform: scale(.95);
}

.modal.dialog.active .inner {
	transform: scale(1);
}

@media (min-aspect-ratio: 14/9) {
	/* -- Transition overrides -- */

	body .modal {
		transition-delay: calc(var(--transition) / 2);
	}
	
	body .modal.active {
		transition-delay: 1ms;
	}

	/* -- Boilerplate -- */

	.modal.card .inner {
		align-self: unset;
		transform: scale(.99) translateY(10px);
	}

	.modal.dialog .inner {
		width: unset;
		min-width: 100px;
		max-width: 50vw;
	}

	.modal.dialog .button {
		align-self: unset;
		width: clamp(100px,100%,500px);
	}
}