mirror of
https://codeberg.org/vlw/victorwesterlund.com.git
synced 2025-09-14 11:33:41 +02:00
134 lines
No EOL
2.2 KiB
CSS
134 lines
No EOL
2.2 KiB
CSS
/* -- Transition overrides -- */
|
|
|
|
body main .screen {
|
|
transition: var(--transition) transform;
|
|
transition-delay: calc(var(--transition) / 2);
|
|
}
|
|
|
|
body .modal.active ~ main .screen {
|
|
transition: var(--transition);
|
|
transition-delay: 1ms;
|
|
transform: scale(.95);
|
|
opacity: .5;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* -- Boilerplate -- */
|
|
|
|
.modal {
|
|
transition: var(--transition) background-color;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100vw;
|
|
height: 100%;
|
|
z-index: 1;
|
|
pointer-events: none;
|
|
box-sizing: border-box;
|
|
background-color: rgba(var(--comp-inverted),0);
|
|
padding: var(--padding);
|
|
}
|
|
|
|
.modal.active {
|
|
pointer-events: all;
|
|
background-color: rgba(var(--comp-inverted),.4);
|
|
}
|
|
|
|
.modal .button {
|
|
align-self: stretch;
|
|
}
|
|
|
|
.modal .inner {
|
|
transition: var(--transition) transform, var(--transition) opacity;
|
|
position: relative;
|
|
background-color: var(--color-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);
|
|
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: 10vw;
|
|
--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: 15vw;
|
|
}
|
|
|
|
@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: translateY(1vh);
|
|
}
|
|
|
|
.modal.card.active .inner {
|
|
transform: 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);
|
|
} |