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

21
ui/twind.ts
View File

@ -27,14 +27,11 @@ injectGlobal`
rgba(0, 0, 0, 0.1) 14px, rgba(0, 0, 0, 0.1) 14px,
rgba(0, 0, 0, 0.1) 28px 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; background-size: 40px 40px;
} }
@keyframes bg-stripes-scroll { @keyframes bg-scroll {
0% { to {
background-position: 0 40px;
}
100% {
background-position: 40px 0; background-position: 40px 0;
} }
} }
@ -63,11 +60,11 @@ injectGlobal`
opacity 0s; opacity 0s;
} }
.animate-fade-in { .backdrop-animate-fade-in::backdrop {
animation: fade-in 0.3s ease-out forwards; animation: fade-in 0.3s ease-out forwards;
} }
@keyframes fade-in { @keyframes fade-in {
0% { from {
opacity: 0; opacity: 0;
} }
} }
@ -76,13 +73,13 @@ injectGlobal`
animation: pop-in 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; animation: pop-in 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
} }
@keyframes pop-in { @keyframes pop-in {
0% { from {
transform: scale(0.8); transform: scale(0.8);
opacity: 0; opacity: 0;
} }
} }
} }
@layer components { @layer components {
.link { .link {
@apply text-sky-600 dark:text-sky-500 rounded-sm focus:outline focus:outline-2 focus:outline-offset-1 focus:outline-sky-600 dark:focus:outline-sky-500; @apply text-sky-600 dark:text-sky-500 rounded-sm focus:outline focus:outline-2 focus:outline-offset-1 focus:outline-sky-600 dark:focus:outline-sky-500;
@ -134,8 +131,8 @@ injectGlobal`
} }
.dialog { .dialog {
@apply animate-pop-in backdrop:animate-fade-in overflow-hidden overflow-y-auto rounded-md @apply 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; bg-zinc-100 text-zinc-900 shadow-lg backdrop:bg-black/30 dark:bg-zinc-800 dark:text-zinc-100;
} }
} }
`; `;