wiki-content.css 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208
  1. /* resources/css/wiki-content.css */
  2. /* WikiPāli — 百科正文排版
  3. 作用域:.wiki-content-body
  4. 设计原则:
  5. - 衬线字体为主,保持阅读节奏
  6. - 标题层级明确,不与 Tabler 全局样式冲突
  7. - blockquote / 引用块 突出原典风格
  8. */
  9. @import url('https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,400;0,600;1,400&display=swap');
  10. /* ── 容器基础 ── */
  11. .wiki-content-body {
  12. font-family: 'Noto Serif', Georgia, 'Times New Roman', serif;
  13. font-size: 1rem;
  14. line-height: 1.875;
  15. color: var(--tblr-body-color);
  16. word-break: break-word;
  17. overflow-wrap: break-word;
  18. }
  19. /* ── 段落 ── */
  20. .wiki-content-body p {
  21. margin-top: 0;
  22. margin-bottom: 1.125em;
  23. }
  24. /* ── 标题 ── */
  25. .wiki-content-body h1,
  26. .wiki-content-body h2,
  27. .wiki-content-body h3,
  28. .wiki-content-body h4,
  29. .wiki-content-body h5,
  30. .wiki-content-body h6 {
  31. font-family: 'Noto Serif', Georgia, serif;
  32. font-weight: 600;
  33. line-height: 1.3;
  34. color: var(--tblr-body-color);
  35. margin-top: 2em;
  36. margin-bottom: 0.6em;
  37. scroll-margin-top: 80px; /* 锚点跳转留出导航高度 */
  38. }
  39. /* h2 是正文主要分节标题 */
  40. .wiki-content-body h2 {
  41. font-size: 1.25rem;
  42. padding-bottom: 0.4em;
  43. border-bottom: 1px solid var(--tblr-border-color);
  44. }
  45. .wiki-content-body h3 {
  46. font-size: 1.0625rem;
  47. }
  48. .wiki-content-body h4 {
  49. font-size: 0.9375rem;
  50. font-weight: 600;
  51. color: var(--tblr-secondary);
  52. }
  53. /* h1 在正文中通常不出现(条目标题由 entry-header 组件渲染)
  54. 若 controller 传入的 HTML 含有 h1,降级处理 */
  55. .wiki-content-body h1 {
  56. font-size: 1.375rem;
  57. padding-bottom: 0.4em;
  58. border-bottom: 2px solid var(--tblr-border-color);
  59. }
  60. /* ── 强调 ── */
  61. .wiki-content-body strong,
  62. .wiki-content-body b {
  63. font-weight: 600;
  64. color: var(--tblr-body-color);
  65. }
  66. .wiki-content-body em,
  67. .wiki-content-body i {
  68. font-style: italic;
  69. }
  70. /* ── 链接 ── */
  71. .wiki-content-body a {
  72. color: var(--tblr-primary);
  73. text-decoration: none;
  74. border-bottom: 1px solid transparent;
  75. transition: border-color 0.12s;
  76. }
  77. .wiki-content-body a:hover {
  78. border-bottom-color: var(--tblr-primary);
  79. }
  80. /* ── 引用块(原典引用) ── */
  81. .wiki-content-body blockquote {
  82. margin: 1.5em 0;
  83. padding: 0.875rem 1.125rem;
  84. border-left: 3px solid var(--tblr-border-color-dark, #adb5bd);
  85. background: var(--tblr-bg-surface-secondary);
  86. border-radius: 0 var(--tblr-border-radius) var(--tblr-border-radius) 0;
  87. color: var(--tblr-body-color);
  88. font-size: 0.9375rem;
  89. line-height: 1.75;
  90. }
  91. .wiki-content-body blockquote p {
  92. margin-bottom: 0.5em;
  93. }
  94. .wiki-content-body blockquote p:last-child {
  95. margin-bottom: 0;
  96. }
  97. .wiki-content-body blockquote cite {
  98. display: block;
  99. margin-top: 0.625rem;
  100. font-size: 0.8125rem;
  101. font-style: normal;
  102. color: var(--tblr-secondary);
  103. }
  104. /* ── 列表 ── */
  105. .wiki-content-body ul,
  106. .wiki-content-body ol {
  107. padding-left: 1.5em;
  108. margin-bottom: 1.125em;
  109. }
  110. .wiki-content-body li {
  111. margin-bottom: 0.375em;
  112. line-height: 1.75;
  113. }
  114. .wiki-content-body ul ul,
  115. .wiki-content-body ol ol,
  116. .wiki-content-body ul ol,
  117. .wiki-content-body ol ul {
  118. margin-top: 0.375em;
  119. margin-bottom: 0;
  120. }
  121. /* ── 表格 ── */
  122. .wiki-content-body table {
  123. width: 100%;
  124. border-collapse: collapse;
  125. font-size: 0.9rem;
  126. margin-bottom: 1.5em;
  127. }
  128. .wiki-content-body th {
  129. font-family: 'Noto Serif', Georgia, serif;
  130. font-weight: 600;
  131. font-size: 0.8125rem;
  132. text-align: left;
  133. padding: 8px 12px;
  134. background: var(--tblr-bg-surface-secondary);
  135. border-bottom: 2px solid var(--tblr-border-color);
  136. color: var(--tblr-secondary);
  137. text-transform: uppercase;
  138. letter-spacing: 0.04em;
  139. }
  140. .wiki-content-body td {
  141. padding: 8px 12px;
  142. border-bottom: 1px solid var(--tblr-border-color);
  143. vertical-align: top;
  144. }
  145. .wiki-content-body tr:last-child td {
  146. border-bottom: none;
  147. }
  148. /* ── 行内代码 ── */
  149. .wiki-content-body code {
  150. font-family: var(--tblr-font-monospace, 'SFMono-Regular', Consolas, monospace);
  151. font-size: 0.875em;
  152. background: var(--tblr-bg-surface-secondary);
  153. border: 1px solid var(--tblr-border-color);
  154. border-radius: 4px;
  155. padding: 1px 5px;
  156. color: var(--tblr-body-color);
  157. }
  158. /* ── 分隔线 ── */
  159. .wiki-content-body hr {
  160. border: none;
  161. border-top: 1px solid var(--tblr-border-color);
  162. margin: 2em 0;
  163. }
  164. /* ── 图片 ── */
  165. .wiki-content-body img {
  166. max-width: 100%;
  167. height: auto;
  168. border-radius: var(--tblr-border-radius);
  169. margin: 0.75em 0;
  170. }
  171. .wiki-content-body figure {
  172. margin: 1.5em 0;
  173. text-align: center;
  174. }
  175. .wiki-content-body figcaption {
  176. font-size: 0.8125rem;
  177. color: var(--tblr-secondary);
  178. margin-top: 0.5em;
  179. font-style: italic;
  180. }