mirror of
https://codeberg.org/vlw/victorwesterlund.com.git
synced 2025-09-14 11:33:41 +02:00
62 lines
No EOL
1.2 KiB
CSS
62 lines
No EOL
1.2 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: 100vh;
|
|
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 {
|
|
background-color: rgba(var(--comp-inverted),.3);
|
|
}
|
|
|
|
/* -- Cards -- */
|
|
|
|
.modal.card .inner {
|
|
transition: var(--transition) transform, var(--transition) opacity;
|
|
position: relative;
|
|
background-color: var(--color-contrast);
|
|
width: calc(100vw - var(--padding));
|
|
max-width: 600px;
|
|
align-self: flex-end;
|
|
box-sizing: border-box;
|
|
padding: var(--padding);
|
|
transform: translateY(1vh);
|
|
border-radius: var(--border-radius);
|
|
opacity: 0;
|
|
}
|
|
|
|
.modal.card.active .inner {
|
|
transform: translateY(0);
|
|
opacity: 1;
|
|
} |