/* ========================================================== DeepSeek Chat – 主题变量 & 基础样式（支持暗黑模式） ========================================================== */ /* ------------------- 颜色变量（默认亮色） ------------------- */ :root { /* 页面整体 */ --bg-page: #f4f4f4; /* 页面背景 */ --text-primary: #000000; /* 主要文字 */ --text-secondary:#555555; /* 次要文字 */ /* 容器 */ --bg-container: #ffffff; /* 聊天框背景 */ --border-color: #ddd; /* 边框/分割线颜色 */ /* 消息气泡 */ --bg-message-assist: #f1f1f1; /* 助手（deepseek）消息 */ --bg-message-user: #d1e7ff; /* 用户消息 */ /* 交互色 */ --accent: #0078d7; /* 按钮、链接主色 */ --accent-hover: #005ea6; /* 悬停时的颜色 */ /* 头部 */ --header-bg: #fafafa; /* 头部背景 */ } /* ------------------- 暗黑主题变量（当时生效） ------------------- */ body.dark { --bg-page: #181a1b; --text-primary: #e4e6e9; --text-secondary: #b0b3b8; --bg-container: #242526; --border-color: #3a3b3c; --bg-message-assist: #2c2f31; --bg-message-user: #1a3d5a; --accent: #3399ff; --accent-hover: #1a8cff; --header-bg: #2c2f31; } /* ------------------- 基础布局 ------------------- */ body { font-family: 'Segoe UI', sans-serif; background-color: var(--bg-page); color: var(--text-primary); margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; height: 100vh; } /* ------------------- 容器 ------------------- */ .chat-container { width: 800px; /* 大屏宽度 */ height: 90vh; /* 高度占视口 90% */ background: var(--bg-container); border-radius: 8px; box-shadow: 0 0 15px rgba(0,0,0,0.1); display: flex; flex-direction: column; } /* ------------------- 头部 ------------------- */ .chat-header { display: flex; justify-content: flex-end; align-items: center; padding: 10px; border-bottom: 1px solid var(--border-color); background: var(--header-bg); gap: 8px; /* 按钮之间的间距 */ } /* 头部按钮（新建聊天 & 暗黑切换） */ .chat-header button { padding: 8px 15px; font-size: 14px; border: none; background-color: var(--accent); color: white; border-radius: 5px; cursor: pointer; } .chat-header button:hover { background-color: var(--accent-hover); } /* ------------------- 消息显示区 ------------------- */ .chat-box { flex: 1; overflow-y: auto; padding: 20px; border-bottom: 1px solid var(--border-color); } /* 单条消息 */ .message { display: flex; align-items: flex-start; margin-bottom: 15px; } /* 头像 */ .avatar { width: 50px; height: 50px; border-radius: 50%; margin-right: 10px; } /* 消息内容气泡 */ .message-content { background: var(--bg-message-assist); padding: 10px 15px; border-radius: 8px; max-width: 80%; color: var(--text-primary); line-height: 1.4; word-break: break-word; } /* 用户消息使用不同背景 */ .message.user .message-content { background: var(--bg-message-user); } /* ------------------- 输入表单 ------------------- */ form { display: flex; border-top: 1px solid var(--border-color); } /* 输入框 */ input { flex: 1; padding: 15px; font-size: 16px; border: none; outline: none; background: var(--bg-container); color: var(--text-primary); } /* 发送按钮 */ button { padding: 15px 25px; font-size: 16px; border: none; background-color: var(--accent); color: white; cursor: pointer; } button:hover { background-color: var(--accent-hover); } /* ------------------- 响应式布局 ------------------- */ @media (max-width: 768px) { .chat-container { width: 100%; height: 100vh; border-radius: 0; } .chat-header { padding: 8px; } .chat-header button { font-size: 12px; padding: 6px 10px; } .chat-box { padding: 10px; } .avatar { width: 36px; height: 36px; margin-right: 8px; } .message-content { font-size: 14px; padding: 8px 10px; max-width: 85%; } form { flex-direction: row; } input { font-size: 14px; padding: 10px; } button { font-size: 14px; padding: 10px 15px; } } @media (max-width: 480px) { .message-content { font-size: 13px; max-width: 80%; } .avatar { width: 30px; height: 30px; } input { font-size: 13px; } button { font-size: 13px; } } /* ------------------- “思考中”加载动画 ------------------- */ .message.loading .message-content { display: flex; gap: 4px; align-items: center; } /* 小圆点 */ .message.loading .dot { width: 6px; height: 6px; background: #777; border-radius: 50%; animation: bounce 1s infinite ease-in-out; } /* 让每个点错开 */ .message.loading .dot:nth-child(2) { animation-delay: 0.2s; } .message.loading .dot:nth-child(3) { animation-delay: 0.4s; } @keyframes bounce { 0%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-6px); } }