roundabout,
created on Sunday, 2 February 2025, 13:00:48 (1738501248),
received on Sunday, 2 February 2025, 13:01:17 (1738501277)
Author identity: vlad <vlad.muntoiu@gmail.com>
17cba7a0b608f31f6ab33b6abe85c067ad6d1467
THEME.css
@@ -765,55 +765,99 @@ details.slidein[open] > summary ~ * {
}
}
dialog:modal {
animation: entranceY 500ms cubic-bezier(0.33, 1, 0.68, 1);
transform-origin: center;
@keyframes entranceX {
0% {
transform: rotateY(-90deg);
}
100% {
transform: rotateY(0);
}
}
@keyframes entranceY {
0% {
transform: rotateX(-90deg);
}
100% {
transform: rotateX(0);
}
}
@keyframes exitX {
0% {
transform: rotateY(0);
}
100% {
transform: rotateY(-90deg);
}
}
@keyframes exitY {
0% {
transform: rotateX(0);
}
100% {
transform: rotateX(-90deg);
}
}
dialog {
transition: opacity 250ms cubic-bezier(0.33, 1, 0.68, 1);
transition: display 500ms allow-discrete, overlay 500ms allow-discrete, opacity 250ms cubic-bezier(0.33, 1, 0.68, 1);
animation: exitY 500ms cubic-bezier(0.16, 1, 0.3, 1);
transform-origin: center;
}
dialog.sheet-left:modal {
animation: entranceX 500ms cubic-bezier(0.33, 1, 0.68, 1);
dialog::backdrop {
transition: display 500ms allow-discrete, opacity 500ms cubic-bezier(0.33, 1, 0.68, 1);
background: var(--color-modal-backdrop);
}
dialog[open]::backdrop {
animation: fade 500ms cubic-bezier(0.33, 1, 0.68, 1);
}
dialog[open] {
animation: entranceY 500ms cubic-bezier(0.33, 1, 0.68, 1);
}
dialog.sheet-left[open] {
animation-name: entranceX;
}
dialog.sheet-left {
animation-name: exitX;
transform-origin: left;
}
dialog.sheet-right:modal {
animation: entranceX 500ms cubic-bezier(0.33, 1, 0.68, 1);
dialog.sheet-right[open] {
animation-name: entranceX;
}
dialog.sheet-right {
animation-name: exitX;
transform-origin: right;
}
dialog.sheet-top:modal {
animation: entranceY 500ms cubic-bezier(0.33, 1, 0.68, 1);
transform-origin: top;
dialog.sheet-top[open] {
animation-name: entranceY;
}
dialog.sheet-bottom:modal {
animation: entranceY 500ms cubic-bezier(0.33, 1, 0.68, 1);
transform-origin: bottom;
dialog.sheet-top {
animation-name: exitY;
transform-origin: top;
}
dialog::backdrop {
backdrop-filter: saturate(0.5) contrast(0.5) brightness(1.25) blur(2px);
dialog.sheet-bottom[open] {
animation-name: entranceY;
}
@keyframes entranceX {
0% {
transform: rotateY(-90deg);
}
100% {
transform: rotateY(0);
}
dialog.sheet-bottom {
animation-name: exitY;
transform-origin: bottom;
}
@keyframes entranceY {
0% {
transform: rotateX(-90deg);
}
100% {
transform: rotateX(0);
}
dialog::backdrop {
backdrop-filter: saturate(0.5) contrast(0.5) brightness(1.25) blur(2px);
}
@keyframes fade {
dialogs.css
@@ -3,12 +3,7 @@ dialog::backdrop {
opacity: 0;
}
dialog:modal {
opacity: 1;
visibility: visible;
}
dialog:modal::backdrop {
dialog[open]::backdrop {
opacity: 1;
}
@@ -21,15 +16,16 @@ dialog {
padding: 0;
margin: 0;
position: fixed;
display: flex;
top: 0;
left: 0;
background: transparent;
border: none;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
}
dialog[open] {
display: flex;
}
dialog.sheet-left {