fix(style): move ChronikFuerDichBox animation to global CSS to suppress Tailwind noise

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-05-12 10:49:10 +02:00
committed by marcel
parent ed91c9bcf6
commit 890b811bc1
2 changed files with 32 additions and 24 deletions

View File

@@ -79,7 +79,7 @@ function href(n: NotificationItem): string {
<ul role="list" class="flex flex-col gap-2"> <ul role="list" class="flex flex-col gap-2">
{#each unread as n (n.id)} {#each unread as n (n.id)}
<li <li
class="fade-in group flex items-start gap-3 rounded-sm p-2 transition-colors hover:bg-canvas" class="chronik-fade-in group flex items-start gap-3 rounded-sm p-2 transition-colors hover:bg-canvas"
> >
<a <a
href={href(n)} href={href(n)}
@@ -124,26 +124,3 @@ function href(n: NotificationItem): string {
</ul> </ul>
{/if} {/if}
</section> </section>
<style>
.fade-in {
animation: chronik-fade-in 160ms ease-out;
}
@keyframes chronik-fade-in {
from {
opacity: 0;
transform: translateY(-4px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@media (prefers-reduced-motion: reduce) {
.fade-in {
animation: none;
}
}
</style>

View File

@@ -459,3 +459,34 @@
transform: translateX(350%); transform: translateX(350%);
} }
} }
@media print {
:global(.app-nav) {
display: none;
}
@page {
margin: 1.5cm;
}
}
.chronik-fade-in {
animation: chronik-fade-in 160ms ease-out;
}
@keyframes chronik-fade-in {
from {
opacity: 0;
transform: translateY(-4px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@media (prefers-reduced-motion: reduce) {
.chronik-fade-in {
animation: none;
}
}