Something went wrong. Try again.
ATProto-based AI Assistant Chat interface.
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384/* * A list that scrolls between parts that stay put, such as the sidebar's chats, fading out at * both ends rather than stopping at a line. The top fade grows over the first bit of scrolling, so * the first row is clear at rest. */
@property --fade-top { syntax: "<length>"; inherits: false; initial-value: 0px;}
@keyframes fade-top { to { --fade-top: 1.5rem; }}
@utility scroll-fade { mask-image: linear-gradient(to bottom, black calc(100% - 1.5rem), transparent);
/* Without scroll timelines the animation would end at once, fading the top before any scroll. */ @supports (animation-timeline: scroll()) { mask-image: linear-gradient( to bottom, transparent, black var(--fade-top), black calc(100% - 1.5rem), transparent ); animation: fade-top linear both; animation-timeline: scroll(self); animation-range: 0 2rem; }}
@property --fade-bottom { syntax: "<length>"; inherits: false; initial-value: 0px;}
@keyframes fade-bottom { from { --fade-bottom: 1.5rem; } to { --fade-bottom: 0px; }}
/* * A box that scrolls in place, such as a card's long table, fading at each end only while there is * more to scroll that way, so a short list and either end at rest stay clear. The top fade starts * under a sticky header as tall as its scroll-fade-inset. It grows as scroll-fade's top does, with * the same keyframes. Without scroll timelines nothing fades, since a fixed fade would cover the * last row at the bottom. */@utility scroll-fade-ends { @supports (animation-timeline: scroll()) { mask-image: linear-gradient( to bottom, black var(--fade-inset, 0px), transparent var(--fade-inset, 0px), black calc(var(--fade-inset, 0px) + var(--fade-top)), black calc(100% - var(--fade-bottom)), transparent ); animation: fade-top linear both, fade-bottom linear both; animation-timeline: scroll(self); animation-range: 0 2rem, calc(100% - 2rem) 100%; }}
/* How far down scroll-fade-ends starts its top fade, in spacing steps, such as scroll-fade-inset-9 under a header as tall as h-9. */@utility scroll-fade-inset-* { --fade-inset: calc(var(--spacing) * --value(integer));}