mirror of
https://codeberg.org/vlw/victorwesterlund.com.git
synced 2025-09-14 11:33:41 +02:00
102 lines
No EOL
1.8 KiB
CSS
102 lines
No EOL
1.8 KiB
CSS
/* -- Transition overrides -- */
|
|
|
|
body {
|
|
transition: var(--transition) background-color;
|
|
}
|
|
|
|
body main .screen {
|
|
transition: var(--transition) transform;
|
|
}
|
|
|
|
body.modalActive main .screen {
|
|
transition: 300ms;
|
|
transform: scale(.9,.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 + .modal {
|
|
transition: var(--transition) backdrop-filter;
|
|
backdrop-filter: blur(5px);
|
|
}
|
|
|
|
.modal.active {
|
|
pointer-events: all;
|
|
background-color: rgba(var(--comp-inverted),.4);
|
|
}
|
|
|
|
.modal .button {
|
|
background-color: rgba(var(--comp-inverted),.05);
|
|
}
|
|
|
|
.modal .button p {
|
|
color: var(--color-inverted);
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
|
|
/* -- Cards -- */
|
|
|
|
.modal.card .inner {
|
|
transition: var(--transition) transform, var(--transition) opacity;
|
|
position: relative;
|
|
background-color: var(--color-background);
|
|
width: calc(100vw - var(--padding));
|
|
max-width: 500px;
|
|
align-self: flex-end;
|
|
box-sizing: border-box;
|
|
padding: var(--padding);
|
|
transform: translateY(1vh);
|
|
border-radius: var(--border-radius);
|
|
opacity: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--padding);
|
|
}
|
|
|
|
.modal.card.active .inner {
|
|
transform: translateY(0);
|
|
opacity: 1;
|
|
}
|
|
|
|
.modal.card .button[data-action="close"] {
|
|
margin-top: auto;
|
|
} |