123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133 |
- /* 重置页面布局 - 移除全局overflow限制 */
- html,
- body {
- margin: 0 !important;
- padding: 0 !important;
- width: 100% !important;
- height: 100% !important;
- }
- /* 动画中状态 - 禁用页面滚动 */
- body.sidebar-animating {
- overflow: hidden !important;
- }
- /* 主内容区域 */
- #paiwise-main-wrapper {
- position: fixed !important;
- top: 0 !important;
- left: 0 !important;
- width: 100% !important;
- height: 100vh !important;
- overflow-y: auto !important;
- overflow-x: hidden !important;
- transition: width 0.3s ease-out !important;
- backface-visibility: hidden !important; /* 优化动画性能 */
- -webkit-font-smoothing: antialiased !important;
- }
- /* 侧边栏 */
- #paiwise-sidebar {
- position: fixed !important;
- top: 0 !important;
- right: 0 !important;
- width: 400px !important;
- height: 100vh !important;
- background: #fff !important;
- border: none !important;
- box-shadow: -4px 0 16px rgba(0, 0, 0, 0.08) !important;
- z-index: 2147483647 !important;
- transform: translateX(100%) !important;
- visibility: hidden !important;
- opacity: 0 !important;
- transition: transform 0.3s ease-out, visibility 0.3s, opacity 0.3s !important;
- }
- /* 侧边栏显示状态 */
- #paiwise-sidebar.show {
- transform: translateX(0) !important;
- visibility: visible !important;
- opacity: 1 !important;
- }
- /* 主内容区域在侧边栏显示时的状态 */
- body.sidebar-open #paiwise-main-wrapper {
- width: calc(100% - 400px) !important;
- }
- /* 移除所有动画关键帧,使用transform实现动画 */
- .message-content {
- position: relative;
- padding: 12px;
- border-radius: 12px;
- background: #fff;
- box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
- transition: all 0.3s ease;
- max-width: 100%;
- overflow-wrap: break-word;
- word-wrap: break-word;
- word-break: break-word;
- hyphens: auto;
- white-space: pre-line; /* 保留换行但合并空格 */
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
- "Helvetica Neue", Arial, sans-serif;
- line-height: 1.6;
- text-align: left;
- }
- /* AI回复的特殊样式 */
- .message.assistant .message-content {
- background: #f0f4f8;
- border-top-left-radius: 4px;
- padding: 12px; /* 统一内边距 */
- }
- /* 列表样式 */
- .message.assistant .message-content ol,
- .message.assistant .message-content ul {
- margin: 8px 0;
- padding-left: 24px;
- }
- /* 段落间距 */
- .message.assistant .message-content p {
- margin: 8px 0;
- text-align: left;
- padding: 0;
- }
- /* 标题样式 */
- .message.assistant .message-content h1,
- .message.assistant .message-content h2,
- .message.assistant .message-content h3 {
- margin: 16px 0 8px;
- font-weight: 600;
- }
- /* 代码块样式 */
- .message.assistant .message-content pre,
- .message.assistant .message-content code {
- background: rgba(0, 0, 0, 0.04);
- padding: 2px 4px;
- border-radius: 4px;
- font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
- }
- /* 表格样式 */
- .message.assistant .message-content table {
- border-collapse: collapse;
- margin: 8px 0;
- width: 100%;
- }
- .message.assistant .message-content th,
- .message.assistant .message-content td {
- border: 1px solid #e0e4e8;
- padding: 8px;
- text-align: left;
- }
- .message.assistant .message-content th {
- background: #f5f7f9;
- }
|