content.css 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133
  1. /* 重置页面布局 - 移除全局overflow限制 */
  2. html,
  3. body {
  4. margin: 0 !important;
  5. padding: 0 !important;
  6. width: 100% !important;
  7. height: 100% !important;
  8. }
  9. /* 动画中状态 - 禁用页面滚动 */
  10. body.sidebar-animating {
  11. overflow: hidden !important;
  12. }
  13. /* 主内容区域 */
  14. #paiwise-main-wrapper {
  15. position: fixed !important;
  16. top: 0 !important;
  17. left: 0 !important;
  18. width: 100% !important;
  19. height: 100vh !important;
  20. overflow-y: auto !important;
  21. overflow-x: hidden !important;
  22. transition: width 0.3s ease-out !important;
  23. backface-visibility: hidden !important; /* 优化动画性能 */
  24. -webkit-font-smoothing: antialiased !important;
  25. }
  26. /* 侧边栏 */
  27. #paiwise-sidebar {
  28. position: fixed !important;
  29. top: 0 !important;
  30. right: 0 !important;
  31. width: 400px !important;
  32. height: 100vh !important;
  33. background: #fff !important;
  34. border: none !important;
  35. box-shadow: -4px 0 16px rgba(0, 0, 0, 0.08) !important;
  36. z-index: 2147483647 !important;
  37. transform: translateX(100%) !important;
  38. visibility: hidden !important;
  39. opacity: 0 !important;
  40. transition: transform 0.3s ease-out, visibility 0.3s, opacity 0.3s !important;
  41. }
  42. /* 侧边栏显示状态 */
  43. #paiwise-sidebar.show {
  44. transform: translateX(0) !important;
  45. visibility: visible !important;
  46. opacity: 1 !important;
  47. }
  48. /* 主内容区域在侧边栏显示时的状态 */
  49. body.sidebar-open #paiwise-main-wrapper {
  50. width: calc(100% - 400px) !important;
  51. }
  52. /* 移除所有动画关键帧,使用transform实现动画 */
  53. .message-content {
  54. position: relative;
  55. padding: 12px;
  56. border-radius: 12px;
  57. background: #fff;
  58. box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  59. transition: all 0.3s ease;
  60. max-width: 100%;
  61. overflow-wrap: break-word;
  62. word-wrap: break-word;
  63. word-break: break-word;
  64. hyphens: auto;
  65. white-space: pre-line; /* 保留换行但合并空格 */
  66. font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
  67. "Helvetica Neue", Arial, sans-serif;
  68. line-height: 1.6;
  69. text-align: left;
  70. }
  71. /* AI回复的特殊样式 */
  72. .message.assistant .message-content {
  73. background: #f0f4f8;
  74. border-top-left-radius: 4px;
  75. padding: 12px; /* 统一内边距 */
  76. }
  77. /* 列表样式 */
  78. .message.assistant .message-content ol,
  79. .message.assistant .message-content ul {
  80. margin: 8px 0;
  81. padding-left: 24px;
  82. }
  83. /* 段落间距 */
  84. .message.assistant .message-content p {
  85. margin: 8px 0;
  86. text-align: left;
  87. padding: 0;
  88. }
  89. /* 标题样式 */
  90. .message.assistant .message-content h1,
  91. .message.assistant .message-content h2,
  92. .message.assistant .message-content h3 {
  93. margin: 16px 0 8px;
  94. font-weight: 600;
  95. }
  96. /* 代码块样式 */
  97. .message.assistant .message-content pre,
  98. .message.assistant .message-content code {
  99. background: rgba(0, 0, 0, 0.04);
  100. padding: 2px 4px;
  101. border-radius: 4px;
  102. font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  103. }
  104. /* 表格样式 */
  105. .message.assistant .message-content table {
  106. border-collapse: collapse;
  107. margin: 8px 0;
  108. width: 100%;
  109. }
  110. .message.assistant .message-content th,
  111. .message.assistant .message-content td {
  112. border: 1px solid #e0e4e8;
  113. padding: 8px;
  114. text-align: left;
  115. }
  116. .message.assistant .message-content th {
  117. background: #f5f7f9;
  118. }