pinks
/
eris
1
0
Fork 4
Code Issues 15 Pull Requests 1 Activity

dialog animations

This commit is contained in:
pinks 2023-10-19 03:18:56 +02:00
parent 11d8a66c18
commit f020499f4d
2 changed files with 12 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
ui/WorkersPage.tsx
View File

@ -43,7 +43,7 @@ export function WorkersPage(props: { sessionId?: string }) {
</button>
)}
<dialog
className="dialog"
className="dialog animate-pop-in backdrop-animate-fade-in"
ref={createWorkerModalRef}
>
<form
@ -231,7 +231,7 @@ function WorkerListItem(props: { worker: WorkerData; sessionId?: string }) {
)}
</p>
<dialog
className="dialog"
className="dialog animate-pop-in backdrop-animate-fade-in"
ref={editWorkerModalRef}
>
<form
@ -293,7 +293,7 @@ function WorkerListItem(props: { worker: WorkerData; sessionId?: string }) {
</form>
</dialog>
<dialog
className="dialog"
className="dialog animate-pop-in backdrop-animate-fade-in"
ref={deleteWorkerModalRef}
>
<form

19
ui/twind.ts
View File

@ -27,14 +27,11 @@ injectGlobal`
rgba(0, 0, 0, 0.1) 14px,
rgba(0, 0, 0, 0.1) 28px
);
animation: bg-stripes-scroll 0.5s linear infinite;
animation: bg-scroll 0.5s linear infinite;
background-size: 40px 40px;
}
@keyframes bg-stripes-scroll {
0% {
background-position: 0 40px;
}
100% {
@keyframes bg-scroll {
to {
background-position: 40px 0;
}
}
@ -63,11 +60,11 @@ injectGlobal`
opacity 0s;
}
.animate-fade-in {
.backdrop-animate-fade-in::backdrop {
animation: fade-in 0.3s ease-out forwards;
}
@keyframes fade-in {
0% {
from {
opacity: 0;
}
}
@ -76,7 +73,7 @@ injectGlobal`
animation: pop-in 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
@keyframes pop-in {
0% {
from {
transform: scale(0.8);
opacity: 0;
}
@ -134,8 +131,8 @@ injectGlobal`
}
.dialog {
@apply animate-pop-in backdrop:animate-fade-in overflow-hidden overflow-y-auto rounded-md
bg-zinc-100 text-zinc-900 shadow-lg backdrop:bg-black/20 dark:bg-zinc-800 dark:text-zinc-100;
@apply overflow-hidden overflow-y-auto rounded-md
bg-zinc-100 text-zinc-900 shadow-lg backdrop:bg-black/30 dark:bg-zinc-800 dark:text-zinc-100;
}
}
`;