|
|
@@ -48,19 +48,17 @@ defineProps<{
|
|
|
.thinking-indicator__dots {
|
|
|
display: inline-flex;
|
|
|
align-items: center;
|
|
|
- gap: 5px;
|
|
|
- padding: 8px 12px;
|
|
|
- border-radius: 999px;
|
|
|
- background: color-mix(in srgb, var(--text-secondary) 12%, transparent);
|
|
|
+ height: 16px;
|
|
|
+ gap: 4px;
|
|
|
}
|
|
|
|
|
|
.thinking-indicator__dot {
|
|
|
- width: 6.5px;
|
|
|
- height: 6.5px;
|
|
|
+ width: 6px;
|
|
|
+ height: 6px;
|
|
|
border-radius: 50%;
|
|
|
- background: color-mix(in srgb, var(--accent) 85%, transparent);
|
|
|
- animation: thinking-dot-wave 1s cubic-bezier(.37, 0, .63, 1) infinite;
|
|
|
- animation-delay: calc(var(--dot-index) * -.16s);
|
|
|
+ background: color-mix(in srgb, var(--accent) 90%, transparent);
|
|
|
+ animation: thinking-dot-bounce 0.9s ease-in-out infinite;
|
|
|
+ animation-delay: calc(var(--dot-index) * 0.15s);
|
|
|
}
|
|
|
|
|
|
.thinking-indicator__elapsed {
|
|
|
@@ -69,9 +67,9 @@ defineProps<{
|
|
|
font-variant-numeric: tabular-nums;
|
|
|
}
|
|
|
|
|
|
-@keyframes thinking-dot-wave {
|
|
|
- 0%, 100% { transform: scale(.35); }
|
|
|
- 50% { transform: scale(1); }
|
|
|
+@keyframes thinking-dot-bounce {
|
|
|
+ 0%, 55%, 100% { transform: translateY(0); }
|
|
|
+ 28% { transform: translateY(-5px); }
|
|
|
}
|
|
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
