364db041eb
- Updated styles in AccountSetting, SystemConfig, Version, and other components to improve dark mode visibility. - Added dark mode classes for text and background colors to ensure better contrast and readability. - Modified CSS variables in dark.css for consistent theming. - Improved accessibility by ensuring all text elements are legible in dark mode.
45 lines
904 B
Vue
45 lines
904 B
Vue
<template>
|
|
<div class="flex items-start gap-3 justify-start">
|
|
<ChatAvatar :src="aiAvatarSrc" />
|
|
<div
|
|
class="px-4 py-3 bg-white dark:bg-[#1f1f22] border border-[#E5E8EE] dark:border-[#2a2a2d] rounded-2xl rounded-tl-sm flex items-center gap-1"
|
|
>
|
|
<span class="dot" />
|
|
<span class="dot" />
|
|
<span class="dot" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import ChatAvatar from '../ChatAvatar.vue'
|
|
import aiAvatarSrc from '@assets/images/login/blue_logo.png'
|
|
</script>
|
|
|
|
<style scoped>
|
|
.dot {
|
|
display: inline-block;
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 9999px;
|
|
background: #2b7fff;
|
|
animation: wave 1.3s linear infinite;
|
|
}
|
|
.dot:nth-child(2) {
|
|
animation-delay: -1.1s;
|
|
}
|
|
.dot:nth-child(3) {
|
|
animation-delay: -0.9s;
|
|
}
|
|
@keyframes wave {
|
|
0%,
|
|
60%,
|
|
100% {
|
|
transform: initial;
|
|
}
|
|
30% {
|
|
transform: translateY(-4px);
|
|
}
|
|
}
|
|
</style>
|