61 lines
1.2 KiB
SCSS
61 lines
1.2 KiB
SCSS
@keyframes flashing {
|
|
0%,
|
|
100% {
|
|
opacity: 0;
|
|
}
|
|
50% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
article.streaming .cooked {
|
|
.progress-dot::after {
|
|
content: "\25CF";
|
|
font-family: Söhne Circle, system-ui, -apple-system, Segoe UI, Roboto,
|
|
Ubuntu, Cantarell, Noto Sans, sans-serif;
|
|
line-height: normal;
|
|
margin-left: 0.25rem;
|
|
vertical-align: baseline;
|
|
animation: flashing 1.5s 3s infinite;
|
|
display: inline-block;
|
|
font-size: 1rem;
|
|
color: var(--tertiary-medium);
|
|
}
|
|
|
|
> .progress-dot:only-child::after {
|
|
// if the progress dot is the only content
|
|
// we are likely waiting longer for a response
|
|
// so it can start animating instantly
|
|
animation: flashing 1.5s infinite;
|
|
}
|
|
}
|
|
|
|
@keyframes ai-indicator-wave {
|
|
0%,
|
|
60%,
|
|
100% {
|
|
transform: initial;
|
|
}
|
|
30% {
|
|
transform: translateY(-0.2em);
|
|
}
|
|
}
|
|
|
|
.ai-indicator-wave {
|
|
flex: 0 0 auto;
|
|
display: inline-flex;
|
|
|
|
&__dot {
|
|
display: inline-block;
|
|
@media (prefers-reduced-motion: no-preference) {
|
|
animation: ai-indicator-wave 1.8s linear infinite;
|
|
}
|
|
&:nth-child(2) {
|
|
animation-delay: -1.6s;
|
|
}
|
|
&:nth-child(3) {
|
|
animation-delay: -1.4s;
|
|
}
|
|
}
|
|
}
|