@import "tailwindcss"; @plugin "@tailwindcss/typography"; /* 原始frontend-demo的样式,直接复制 */ body { font-family: 'Noto Sans SC', 'Inter', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background-color: #F8F7F2; /* A light, neutral background */ } /* 自定义滚动条 */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: #f1f1f1; } ::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: #a3a8b0; } /* 加载动画 */ .loader { border: 4px solid #f3f3f3; border-top: 4px solid #6366f1; border-radius: 50%; width: 40px; height: 40px; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* 元素渐入动画 */ .fade-in { animation: fadeIn 0.8s ease-in-out; } @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* 聊天气泡样式 */ .chat-bubble-ai { background-color: #f3f4f6; color: #1f2937; border-radius: 20px 20px 20px 5px; } .chat-bubble-user { background-color: #6366f1; color: #ffffff; border-radius: 20px 20px 5px 20px; } @layer base { button, a[href] { cursor: pointer; } } /* Markdown 排版优化(配合 Typography 插件的 prose 类) */ .prose { max-width: none; } /* 代码块与内联代码 */ .prose pre { overflow: auto; } .prose code { white-space: pre-wrap; word-break: break-word; } /* 表格滚动 */ .prose table { display: block; width: max-content; max-width: 100%; overflow-x: auto; } /* 图片自适应 */ .prose img { max-width: 100%; height: auto; border-radius: 0.375rem; /* rounded-md */ }