_wiki.css 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997
  1. /* resources/css/modules/_wiki.css
  2. Wiki 栏目专属样式。
  3. 来源:
  4. - wiki.css(布局、侧边栏、组件、term popover/drawer)
  5. - wiki-content.css(正文排版,作用域 .wiki-content-body)
  6. 去重:wiki-search.css / wiki.css 末尾重复内容已移至 components/_search-results.css
  7. wiki-search.css / wiki.css 末尾重复的分页已移至 components/_pagination.css
  8. */
  9. /* ══════════════════════════════════════════
  10. 一、三栏布局
  11. ══════════════════════════════════════════ */
  12. .wiki-layout {
  13. display: grid;
  14. grid-template-columns: 200px 1fr 200px;
  15. grid-template-areas: "left main right";
  16. gap: 1.5rem;
  17. align-items: start;
  18. padding-top: 1.5rem;
  19. padding-bottom: 3rem;
  20. }
  21. .wiki-sidebar-left {
  22. grid-area: left;
  23. }
  24. .wiki-sidebar-right {
  25. grid-area: right;
  26. }
  27. .wiki-main {
  28. grid-area: main;
  29. min-width: 0;
  30. display: flex;
  31. flex-direction: column;
  32. gap: 1rem;
  33. }
  34. /* ══════════════════════════════════════════
  35. 二、通用卡片 / 侧边栏
  36. ══════════════════════════════════════════ */
  37. .wiki-card {
  38. background: var(--tblr-bg-surface);
  39. border: 1px solid var(--tblr-border-color);
  40. border-radius: var(--tblr-border-radius-lg);
  41. padding: 1.5rem;
  42. }
  43. .wiki-sidebar-section {
  44. background: var(--tblr-bg-surface);
  45. border: 1px solid var(--tblr-border-color);
  46. border-radius: var(--tblr-border-radius-lg);
  47. padding: 1rem 1.125rem;
  48. margin-bottom: 1rem;
  49. }
  50. .wiki-sidebar-title {
  51. font-size: 0.6875rem;
  52. font-weight: 500;
  53. letter-spacing: 0.05em;
  54. text-transform: uppercase;
  55. color: var(--tblr-secondary);
  56. margin-bottom: 0.75rem;
  57. }
  58. /* ── 分类列表 ── */
  59. .wiki-cat-list {
  60. list-style: none;
  61. padding: 0;
  62. margin: 0;
  63. }
  64. .wiki-cat-list li {
  65. margin-bottom: 2px;
  66. }
  67. .wiki-cat-list a {
  68. display: flex;
  69. align-items: center;
  70. font-size: 0.8125rem;
  71. color: var(--tblr-body-color);
  72. text-decoration: none;
  73. padding: 5px 8px;
  74. border-radius: var(--tblr-border-radius);
  75. transition: background 0.12s;
  76. }
  77. .wiki-cat-list a:hover {
  78. background: var(--tblr-bg-surface-secondary);
  79. }
  80. .wiki-cat-list a.active {
  81. background: var(--tblr-bg-surface-secondary);
  82. font-weight: 500;
  83. color: var(--tblr-primary);
  84. }
  85. .wiki-cat-count {
  86. font-size: 0.6875rem;
  87. background: var(--tblr-bg-surface-secondary);
  88. border: 1px solid var(--tblr-border-color);
  89. border-radius: 20px;
  90. padding: 1px 7px;
  91. color: var(--tblr-secondary);
  92. margin-left: auto;
  93. flex-shrink: 0;
  94. }
  95. /* ══════════════════════════════════════════
  96. 三、目录(TOC)
  97. ══════════════════════════════════════════ */
  98. .wiki-toc-list {
  99. list-style: none;
  100. padding: 0;
  101. margin: 0;
  102. }
  103. .wiki-toc-list li {
  104. border-bottom: 1px solid var(--tblr-border-color);
  105. }
  106. .wiki-toc-list li:last-child {
  107. border-bottom: none;
  108. }
  109. .wiki-toc-list a {
  110. display: block;
  111. font-size: 0.8125rem;
  112. color: var(--tblr-secondary);
  113. text-decoration: none;
  114. padding: 5px 0;
  115. transition: color 0.12s;
  116. }
  117. .wiki-toc-list a:hover {
  118. color: var(--tblr-body-color);
  119. }
  120. .wiki-toc-list a.active {
  121. color: var(--tblr-body-color);
  122. font-weight: 500;
  123. }
  124. .wiki-toc-list .toc-level-2 a {
  125. padding-left: 0.5rem;
  126. }
  127. .wiki-toc-list .toc-level-3 a {
  128. padding-left: 1rem;
  129. }
  130. .wiki-toc-num {
  131. color: var(--tblr-secondary);
  132. margin-right: 5px;
  133. font-size: 0.75rem;
  134. }
  135. /* ══════════════════════════════════════════
  136. 四、相关条目
  137. ══════════════════════════════════════════ */
  138. .wiki-related-list {
  139. list-style: none;
  140. padding: 0;
  141. margin: 0;
  142. }
  143. .wiki-related-list li {
  144. border-bottom: 1px solid var(--tblr-border-color);
  145. }
  146. .wiki-related-list li:last-child {
  147. border-bottom: none;
  148. }
  149. .wiki-related-list a {
  150. display: flex;
  151. justify-content: space-between;
  152. align-items: center;
  153. font-size: 0.8125rem;
  154. color: var(--tblr-primary);
  155. text-decoration: none;
  156. padding: 6px 0;
  157. }
  158. .wiki-related-zh {
  159. font-size: 0.75rem;
  160. color: var(--tblr-secondary);
  161. }
  162. /* ══════════════════════════════════════════
  163. 五、元信息表格
  164. ══════════════════════════════════════════ */
  165. .wiki-meta-table {
  166. width: 100%;
  167. font-size: 0.8125rem;
  168. border-collapse: collapse;
  169. }
  170. .wiki-meta-table td {
  171. padding: 3px 0;
  172. }
  173. .wiki-meta-table td:last-child {
  174. text-align: right;
  175. color: var(--tblr-secondary);
  176. }
  177. /* ══════════════════════════════════════════
  178. 六、条目头部
  179. ══════════════════════════════════════════ */
  180. .wiki-entry-header {
  181. margin-bottom: 1.25rem;
  182. }
  183. .wiki-entry-title {
  184. font-family: "Noto Serif", Georgia, serif;
  185. font-size: 1.75rem;
  186. font-weight: 600;
  187. line-height: 1.25;
  188. margin: 0.375rem 0 0.75rem;
  189. color: var(--tblr-body-color);
  190. }
  191. .wiki-entry-langs-inline {
  192. display: flex;
  193. flex-wrap: wrap;
  194. gap: 6px;
  195. margin-bottom: 0.5rem;
  196. }
  197. .wiki-lang-pill {
  198. font-size: 0.75rem;
  199. padding: 3px 10px;
  200. border-radius: 20px;
  201. border: 1px solid var(--tblr-border-color);
  202. color: var(--tblr-secondary);
  203. }
  204. .wiki-lang-pill strong {
  205. font-weight: 500;
  206. color: var(--tblr-body-color);
  207. margin-right: 3px;
  208. }
  209. /* ── 语言版本切换 ── */
  210. .wiki-entry-lang-switcher {
  211. display: flex;
  212. flex-wrap: wrap;
  213. align-items: center;
  214. gap: 6px;
  215. padding: 0.625rem 0.875rem;
  216. background: var(--tblr-bg-surface-secondary);
  217. border-radius: var(--tblr-border-radius);
  218. margin-bottom: 1.25rem;
  219. font-size: 0.8125rem;
  220. }
  221. .wiki-entry-lang-label {
  222. color: var(--tblr-secondary);
  223. }
  224. .wiki-entry-lang-btn {
  225. font-size: 0.75rem;
  226. padding: 3px 10px;
  227. border-radius: 20px;
  228. border: 1px solid var(--tblr-border-color);
  229. color: var(--tblr-primary);
  230. text-decoration: none;
  231. transition: background 0.12s;
  232. }
  233. .wiki-entry-lang-btn:hover {
  234. background: var(--tblr-bg-surface);
  235. }
  236. /* ══════════════════════════════════════════
  237. 七、质量标签
  238. ══════════════════════════════════════════ */
  239. .wiki-quality-badge {
  240. display: inline-flex;
  241. align-items: center;
  242. gap: 5px;
  243. font-size: 0.6875rem;
  244. padding: 3px 10px;
  245. border-radius: 20px;
  246. font-weight: 500;
  247. margin-bottom: 4px;
  248. }
  249. .wiki-quality-dot {
  250. width: 6px;
  251. height: 6px;
  252. border-radius: 50%;
  253. flex-shrink: 0;
  254. }
  255. .wiki-badge--featured {
  256. background: #eaf3de;
  257. color: #3b6d11;
  258. border: 1px solid #c0dd97;
  259. }
  260. .wiki-badge--featured .wiki-quality-dot {
  261. background: #639922;
  262. }
  263. .wiki-badge--review {
  264. background: #faeeda;
  265. color: #854f0b;
  266. border: 1px solid #fac775;
  267. }
  268. .wiki-badge--review .wiki-quality-dot {
  269. background: #ba7517;
  270. }
  271. .wiki-badge--stub {
  272. background: #f1efe8;
  273. color: #5f5e5a;
  274. border: 1px solid #d3d1c7;
  275. }
  276. .wiki-badge--stub .wiki-quality-dot {
  277. background: #888780;
  278. }
  279. /* ══════════════════════════════════════════
  280. 八、标签
  281. ══════════════════════════════════════════ */
  282. .wiki-tags {
  283. display: flex;
  284. flex-wrap: wrap;
  285. gap: 6px;
  286. padding-top: 1rem;
  287. border-top: 1px solid var(--tblr-border-color);
  288. margin-top: 1.5rem;
  289. }
  290. .wiki-tag {
  291. font-size: 0.75rem;
  292. padding: 3px 10px;
  293. border-radius: 20px;
  294. border: 1px solid var(--tblr-border-color);
  295. color: var(--tblr-secondary);
  296. text-decoration: none;
  297. transition: background 0.12s;
  298. }
  299. .wiki-tag:hover {
  300. background: var(--tblr-bg-surface-secondary);
  301. color: var(--tblr-body-color);
  302. }
  303. /* ══════════════════════════════════════════
  304. 九、首页组件
  305. ══════════════════════════════════════════ */
  306. /* 今日条目 */
  307. .wiki-today-banner {
  308. background: var(--tblr-bg-surface-secondary);
  309. border: 1px solid var(--tblr-border-color);
  310. border-radius: var(--tblr-border-radius-lg);
  311. padding: 1.25rem 1.5rem;
  312. display: flex;
  313. gap: 1.25rem;
  314. align-items: flex-start;
  315. }
  316. .wiki-today-icon {
  317. width: 48px;
  318. height: 48px;
  319. border-radius: var(--tblr-border-radius);
  320. background: #e1f5ee;
  321. display: flex;
  322. align-items: center;
  323. justify-content: center;
  324. font-size: 1.375rem;
  325. flex-shrink: 0;
  326. }
  327. .wiki-today-label {
  328. font-size: 0.6875rem;
  329. text-transform: uppercase;
  330. letter-spacing: 0.05em;
  331. color: var(--tblr-secondary);
  332. margin-bottom: 4px;
  333. }
  334. .wiki-today-title {
  335. font-family: "Noto Serif", Georgia, serif;
  336. font-size: 1.125rem;
  337. font-weight: 600;
  338. margin-bottom: 6px;
  339. color: var(--tblr-body-color);
  340. }
  341. .wiki-today-snippet {
  342. font-size: 0.875rem;
  343. color: var(--tblr-secondary);
  344. line-height: 1.6;
  345. }
  346. .wiki-today-link {
  347. font-size: 0.8125rem;
  348. color: var(--tblr-primary);
  349. text-decoration: none;
  350. margin-top: 10px;
  351. display: inline-block;
  352. }
  353. /* 精选网格 */
  354. .wiki-featured-grid {
  355. display: grid;
  356. grid-template-columns: repeat(3, minmax(0, 1fr));
  357. gap: 8px;
  358. }
  359. .wiki-featured-card {
  360. border: 1px solid var(--tblr-border-color);
  361. border-radius: var(--tblr-border-radius);
  362. padding: 10px 12px;
  363. cursor: pointer;
  364. text-decoration: none;
  365. display: block;
  366. transition: background 0.12s;
  367. color: var(--tblr-body-color);
  368. }
  369. .wiki-featured-card:hover {
  370. background: var(--tblr-bg-surface-secondary);
  371. }
  372. .wiki-featured-label {
  373. font-size: 0.6875rem;
  374. font-weight: 500;
  375. text-transform: uppercase;
  376. letter-spacing: 0.05em;
  377. color: var(--tblr-secondary);
  378. margin-bottom: 5px;
  379. }
  380. .wiki-featured-title {
  381. font-size: 0.875rem;
  382. font-weight: 500;
  383. margin-bottom: 2px;
  384. }
  385. .wiki-featured-pali {
  386. font-size: 0.75rem;
  387. font-style: italic;
  388. color: var(--tblr-secondary);
  389. }
  390. /* ══════════════════════════════════════════
  391. 十、term-ref 行内术语标记
  392. ══════════════════════════════════════════ */
  393. .term-ref {
  394. font-style: italic;
  395. color: var(--tblr-primary);
  396. border-bottom: 1px dotted var(--tblr-primary);
  397. cursor: pointer;
  398. }
  399. /* ══════════════════════════════════════════
  400. 十一、Term Popover(桌面)
  401. ══════════════════════════════════════════ */
  402. .wiki-term-popover.popover {
  403. max-width: 280px;
  404. font-size: 0.8125rem;
  405. border: 0.5px solid var(--tblr-border-color);
  406. border-radius: var(--tblr-border-radius-lg);
  407. box-shadow: none;
  408. }
  409. .wiki-term-popover .popover-arrow {
  410. display: none;
  411. }
  412. .wiki-term-popover .popover-body {
  413. padding: 0;
  414. }
  415. .wiki-popover-word {
  416. font-family: "Noto Serif", Georgia, serif;
  417. font-size: 0.9375rem;
  418. font-style: italic;
  419. font-weight: 600;
  420. color: var(--tblr-primary);
  421. padding: 10px 14px;
  422. border-bottom: 0.5px solid var(--tblr-border-color);
  423. }
  424. .wiki-popover-meaning {
  425. font-size: 0.9rem;
  426. font-weight: 500;
  427. color: var(--tblr-body-color);
  428. padding: 8px 14px 4px;
  429. }
  430. .wiki-popover-summary {
  431. font-size: 0.8125rem;
  432. color: var(--tblr-secondary);
  433. line-height: 1.55;
  434. padding: 0 14px 12px;
  435. }
  436. /* ══════════════════════════════════════════
  437. 十二、Term Drawer(移动端 Offcanvas)
  438. 所有阅读页公用,此处定义,reader.css 通过 @import 引入
  439. ══════════════════════════════════════════ */
  440. .wiki-term-drawer {
  441. border-radius: 1rem 1rem 0 0;
  442. max-height: 55vh;
  443. }
  444. .wiki-term-drawer .offcanvas-header {
  445. padding-top: 0.6rem;
  446. padding-bottom: 0.6rem;
  447. }
  448. .wiki-drawer-word {
  449. font-family: "Noto Serif", Georgia, serif;
  450. font-size: 1.125rem;
  451. font-style: italic;
  452. font-weight: 600;
  453. color: var(--tblr-primary);
  454. }
  455. .wiki-drawer-meaning {
  456. font-size: 0.9375rem;
  457. font-weight: 500;
  458. color: var(--tblr-body-color);
  459. margin-top: 2px;
  460. }
  461. .wiki-drawer-summary {
  462. font-size: 0.9375rem;
  463. color: var(--tblr-body-color);
  464. line-height: 1.65;
  465. }
  466. .wiki-drawer-link {
  467. display: inline-block;
  468. margin-top: 1rem;
  469. font-size: 0.875rem;
  470. color: var(--tblr-primary);
  471. text-decoration: none;
  472. }
  473. /* ── term-card 共享(Popover + Drawer 复用) ── */
  474. .wiki-term-card-word {
  475. font-family: "Noto Serif", Georgia, serif;
  476. font-size: 0.9375rem;
  477. font-style: italic;
  478. font-weight: 600;
  479. color: var(--tblr-primary);
  480. padding: 8px;
  481. margin-bottom: 8px;
  482. border-bottom: 0.5px solid var(--tblr-border-color);
  483. }
  484. .wiki-term-card-meaning {
  485. font-size: 0.875rem;
  486. font-weight: 500;
  487. color: var(--tblr-body-color);
  488. margin-bottom: 5px;
  489. }
  490. .wiki-term-card-summary {
  491. font-size: 0.8125rem;
  492. color: var(--tblr-secondary);
  493. line-height: 1.55;
  494. }
  495. /* ── Skeleton loading ── */
  496. .wiki-term-skeleton-word,
  497. .wiki-term-skeleton-line {
  498. background: linear-gradient(90deg, #e8e8e8 25%, #f5f5f5 50%, #e8e8e8 75%);
  499. background-size: 200% 100%;
  500. animation: wiki-skeleton-shimmer 1.2s infinite;
  501. border-radius: 4px;
  502. }
  503. .wiki-term-skeleton-word {
  504. height: 18px;
  505. width: 120px;
  506. margin-bottom: 8px;
  507. }
  508. .wiki-term-skeleton-line {
  509. height: 13px;
  510. width: 100%;
  511. margin-bottom: 6px;
  512. }
  513. .wiki-term-skeleton-line.short {
  514. width: 60%;
  515. }
  516. @keyframes wiki-skeleton-shimmer {
  517. 0% {
  518. background-position: 200% 0;
  519. }
  520. 100% {
  521. background-position: -200% 0;
  522. }
  523. }
  524. /* ══════════════════════════════════════════
  525. 十三、正文排版(.wiki-content-body)
  526. 来源:wiki-content.css,作用域不变
  527. ══════════════════════════════════════════ */
  528. .wiki-content-body {
  529. font-family: "Noto Serif", Georgia, "Times New Roman", serif;
  530. font-size: 1rem;
  531. line-height: 1.875;
  532. color: var(--tblr-body-color);
  533. word-break: break-word;
  534. overflow-wrap: break-word;
  535. }
  536. .wiki-content-body p {
  537. margin-top: 0;
  538. margin-bottom: 1.125em;
  539. }
  540. .wiki-content-body h1,
  541. .wiki-content-body h2,
  542. .wiki-content-body h3,
  543. .wiki-content-body h4,
  544. .wiki-content-body h5,
  545. .wiki-content-body h6 {
  546. font-family: "Noto Serif", Georgia, serif;
  547. font-weight: 600;
  548. line-height: 1.3;
  549. color: var(--tblr-body-color);
  550. margin-top: 2em;
  551. margin-bottom: 0.6em;
  552. scroll-margin-top: 80px;
  553. }
  554. .wiki-content-body h1 {
  555. font-size: 1.375rem;
  556. padding-bottom: 0.4em;
  557. border-bottom: 2px solid var(--tblr-border-color);
  558. }
  559. .wiki-content-body h2 {
  560. font-size: 1.25rem;
  561. padding-bottom: 0.4em;
  562. border-bottom: 1px solid var(--tblr-border-color);
  563. }
  564. .wiki-content-body h3 {
  565. font-size: 1.0625rem;
  566. }
  567. .wiki-content-body h4 {
  568. font-size: 0.9375rem;
  569. font-weight: 600;
  570. color: var(--tblr-secondary);
  571. }
  572. .wiki-content-body strong,
  573. .wiki-content-body b {
  574. font-weight: 600;
  575. }
  576. .wiki-content-body em,
  577. .wiki-content-body i {
  578. font-style: italic;
  579. }
  580. .wiki-content-body a {
  581. color: var(--tblr-primary);
  582. text-decoration: none;
  583. border-bottom: 1px solid transparent;
  584. transition: border-color 0.12s;
  585. }
  586. .wiki-content-body a:hover {
  587. border-bottom-color: var(--tblr-primary);
  588. }
  589. .wiki-content-body blockquote {
  590. margin: 1.5em 0;
  591. padding: 0.875rem 1.125rem;
  592. border-left: 3px solid var(--tblr-border-color-dark, #adb5bd);
  593. background: var(--tblr-bg-surface-secondary);
  594. border-radius: 0 var(--tblr-border-radius) var(--tblr-border-radius) 0;
  595. font-size: 0.9375rem;
  596. line-height: 1.75;
  597. }
  598. .wiki-content-body blockquote p {
  599. margin-bottom: 0.5em;
  600. }
  601. .wiki-content-body blockquote p:last-child {
  602. margin-bottom: 0;
  603. }
  604. .wiki-content-body blockquote cite {
  605. display: block;
  606. margin-top: 0.625rem;
  607. font-size: 0.8125rem;
  608. font-style: normal;
  609. color: var(--tblr-secondary);
  610. }
  611. .wiki-content-body ul,
  612. .wiki-content-body ol {
  613. padding-left: 1.5em;
  614. margin-bottom: 1.125em;
  615. }
  616. .wiki-content-body li {
  617. margin-bottom: 0.375em;
  618. line-height: 1.75;
  619. }
  620. .wiki-content-body table {
  621. width: 100%;
  622. border-collapse: collapse;
  623. font-size: 0.9rem;
  624. margin-bottom: 1.5em;
  625. }
  626. .wiki-content-body th {
  627. font-family: "Noto Serif", Georgia, serif;
  628. font-weight: 600;
  629. font-size: 0.8125rem;
  630. text-align: left;
  631. padding: 8px 12px;
  632. background: var(--tblr-bg-surface-secondary);
  633. border-bottom: 2px solid var(--tblr-border-color);
  634. color: var(--tblr-secondary);
  635. text-transform: uppercase;
  636. letter-spacing: 0.04em;
  637. }
  638. .wiki-content-body td {
  639. padding: 8px 12px;
  640. border-bottom: 1px solid var(--tblr-border-color);
  641. vertical-align: top;
  642. }
  643. .wiki-content-body tr:last-child td {
  644. border-bottom: none;
  645. }
  646. .wiki-content-body code {
  647. font-family: var(
  648. --tblr-font-monospace,
  649. "SFMono-Regular",
  650. Consolas,
  651. monospace
  652. );
  653. font-size: 0.875em;
  654. background: var(--tblr-bg-surface-secondary);
  655. border: 1px solid var(--tblr-border-color);
  656. border-radius: 4px;
  657. padding: 1px 5px;
  658. }
  659. .wiki-content-body hr {
  660. border: none;
  661. border-top: 1px solid var(--tblr-border-color);
  662. margin: 2em 0;
  663. }
  664. .wiki-content-body img {
  665. max-width: 100%;
  666. height: auto;
  667. border-radius: var(--tblr-border-radius);
  668. margin: 0.75em 0;
  669. }
  670. .wiki-content-body figure {
  671. margin: 1.5em 0;
  672. text-align: center;
  673. }
  674. .wiki-content-body figcaption {
  675. font-size: 0.8125rem;
  676. color: var(--tblr-secondary);
  677. margin-top: 0.5em;
  678. font-style: italic;
  679. }
  680. /* ══════════════════════════════════════════
  681. 十四、响应式
  682. ══════════════════════════════════════════ */
  683. @media (max-width: 992px) {
  684. .wiki-layout {
  685. grid-template-columns: 180px 1fr;
  686. grid-template-areas:
  687. "left main"
  688. "left right";
  689. }
  690. .wiki-sidebar-right {
  691. display: flex;
  692. flex-wrap: wrap;
  693. gap: 1rem;
  694. }
  695. .wiki-sidebar-right .wiki-sidebar-section {
  696. flex: 1 1 180px;
  697. margin-bottom: 0;
  698. }
  699. }
  700. @media (max-width: 768px) {
  701. .wiki-layout {
  702. grid-template-columns: 1fr;
  703. grid-template-areas: "main" "right" "left";
  704. }
  705. .wiki-featured-grid {
  706. grid-template-columns: repeat(2, minmax(0, 1fr));
  707. }
  708. .wiki-sidebar-left,
  709. .wiki-sidebar-right {
  710. display: none;
  711. }
  712. }
  713. /* ══════════════════════════════════════════
  714. 十五、Wiki 首页(home.blade.php)
  715. 替代原 home.blade.php 内联 <style>,风格与 wiki 整体保持一致
  716. ══════════════════════════════════════════ */
  717. .wiki-home-container {
  718. display: flex;
  719. flex-direction: column;
  720. align-items: center;
  721. justify-content: center;
  722. min-height: calc(100vh - 300px);
  723. padding: 3rem 1.5rem;
  724. }
  725. /* ── 法轮图标 ── */
  726. .wiki-home-wheel {
  727. margin-bottom: 1.5rem;
  728. }
  729. .wiki-home-wheel-img {
  730. width: 120px;
  731. height: auto;
  732. opacity: 0.85;
  733. transition: transform 0.3s ease;
  734. }
  735. .wiki-home-wheel-img:hover {
  736. transform: scale(1.05);
  737. }
  738. /* ── 标题 ── */
  739. .wiki-home-title {
  740. text-align: center;
  741. margin-bottom: 2rem;
  742. }
  743. .wiki-home-title h1 {
  744. font-family: "Noto Serif", Georgia, serif;
  745. font-size: 2.25rem;
  746. font-weight: 600;
  747. color: var(--tblr-body-color);
  748. margin-bottom: 0.5rem;
  749. }
  750. /* ── 搜索框 ── */
  751. .wiki-home-search {
  752. width: 100%;
  753. max-width: 640px;
  754. margin: 0 auto 1.5rem;
  755. }
  756. /* ── 热门标签 ── */
  757. .wiki-home-hot-tags {
  758. text-align: center;
  759. margin-bottom: 2.5rem;
  760. font-size: 0.9rem;
  761. }
  762. .wiki-hot-tag {
  763. display: inline-block;
  764. padding: 0.3rem 0.75rem;
  765. background: var(--tblr-bg-surface-secondary);
  766. border: 1px solid var(--tblr-border-color);
  767. border-radius: 20px;
  768. color: var(--tblr-secondary);
  769. font-size: 0.8125rem;
  770. text-decoration: none;
  771. margin: 2px;
  772. transition: background 0.12s, color 0.12s;
  773. }
  774. .wiki-hot-tag:hover {
  775. background: var(--wp-brand-light);
  776. border-color: var(--wp-brand);
  777. color: var(--wp-brand-dark);
  778. }
  779. /* ── 语言选择 ── */
  780. .wiki-home-languages {
  781. width: 100%;
  782. max-width: 800px;
  783. margin: 0 auto 2rem;
  784. }
  785. .wiki-home-divider {
  786. display: flex;
  787. align-items: center;
  788. text-align: center;
  789. margin-bottom: 1.5rem;
  790. gap: 1.5rem;
  791. color: var(--tblr-secondary);
  792. font-size: 0.875rem;
  793. }
  794. .wiki-home-divider::before,
  795. .wiki-home-divider::after {
  796. content: "";
  797. flex: 1;
  798. border-bottom: 1px solid var(--tblr-border-color);
  799. }
  800. .wiki-language-tags {
  801. display: flex;
  802. flex-wrap: wrap;
  803. justify-content: center;
  804. gap: 0.75rem;
  805. }
  806. .wiki-language-tag {
  807. display: inline-block;
  808. padding: 0.4rem 1.125rem;
  809. background: var(--tblr-bg-surface-secondary);
  810. border: 1px solid var(--tblr-border-color);
  811. border-radius: 30px;
  812. color: var(--tblr-body-color);
  813. font-size: 0.875rem;
  814. text-decoration: none;
  815. transition: background 0.12s, border-color 0.12s;
  816. }
  817. .wiki-language-tag:hover {
  818. background: var(--wp-brand-light);
  819. border-color: var(--wp-brand);
  820. color: var(--wp-brand-dark);
  821. }
  822. .wiki-language-tag.active {
  823. background: var(--wp-brand);
  824. border-color: var(--wp-brand);
  825. color: #fff;
  826. }
  827. .wiki-language-tag.active:hover {
  828. background: var(--wp-brand-dark);
  829. border-color: var(--wp-brand-dark);
  830. }
  831. /* ── 统计 ── */
  832. .wiki-home-stats {
  833. text-align: center;
  834. font-size: 0.875rem;
  835. padding-top: 1.5rem;
  836. border-top: 1px solid var(--tblr-border-color);
  837. width: 100%;
  838. max-width: 640px;
  839. }
  840. /* ── 响应式 ── */
  841. @media (max-width: 768px) {
  842. .wiki-home-container {
  843. min-height: calc(100vh - 200px);
  844. padding: 2rem 1rem;
  845. }
  846. .wiki-home-wheel-img {
  847. width: 90px;
  848. }
  849. .wiki-home-title h1 {
  850. font-size: 1.75rem;
  851. }
  852. .wiki-language-tag {
  853. padding: 0.35rem 0.875rem;
  854. font-size: 0.8125rem;
  855. }
  856. }