_anthology.css 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697
  1. /* resources/css/modules/_anthology.css
  2. 文集栏目专属样式。
  3. 来源:anthology/index.blade.php + anthology/show.blade.php 内联 <style>,
  4. 两处重复规则已去重,以实际渲染效果为准。
  5. */
  6. /* ══════════════════════════════════════════
  7. 一、封面组件(.book-cover)
  8. 对应 components/ui/book-cover.blade.php
  9. ══════════════════════════════════════════ */
  10. .book-cover {
  11. position: relative;
  12. overflow: hidden;
  13. display: flex;
  14. flex-direction: column;
  15. align-items: center;
  16. justify-content: center;
  17. }
  18. /* 尺寸 */
  19. .book-cover--sm { width: 34px; min-width: 34px; height: 46px; }
  20. .book-cover--md { width: 130px; min-width: 130px; height: 180px; }
  21. .book-cover--lg { width: 155px; min-width: 155px; height: 215px; border-radius: 3px 9px 9px 3px; }
  22. /* 3D 书脊 */
  23. .book-cover--3d {
  24. box-shadow:
  25. -4px 0 0 rgba(0,0,0,.3),
  26. -6px 4px 14px rgba(0,0,0,.4),
  27. 4px 4px 18px rgba(0,0,0,.3);
  28. }
  29. .book-cover--3d::before {
  30. content: '';
  31. position: absolute;
  32. left: 0; top: 0; bottom: 0;
  33. width: 13px;
  34. background: linear-gradient(to right, rgba(0,0,0,.4), rgba(0,0,0,.1));
  35. border-radius: 3px 0 0 3px;
  36. z-index: 2;
  37. }
  38. /* 纹理叠加 */
  39. .book-cover::after {
  40. content: '';
  41. position: absolute;
  42. inset: 0;
  43. background: repeating-linear-gradient(
  44. 45deg, transparent, transparent 8px,
  45. rgba(255,255,255,.015) 8px, rgba(255,255,255,.015) 9px
  46. );
  47. z-index: 1;
  48. }
  49. /* 图片封面 */
  50. .book-cover__img {
  51. position: absolute;
  52. inset: 0;
  53. width: 100%;
  54. height: 100%;
  55. object-fit: cover;
  56. }
  57. /* 文字封面 */
  58. .book-cover__text {
  59. position: relative;
  60. z-index: 3;
  61. text-align: center;
  62. padding: 0 .5rem;
  63. }
  64. .book-cover__title {
  65. font-family: 'Noto Serif SC', 'Noto Serif', Georgia, serif;
  66. font-size: 1rem;
  67. font-weight: 600;
  68. color: #fff;
  69. line-height: 1.6;
  70. letter-spacing: .12em;
  71. word-break: break-all;
  72. }
  73. .book-cover--sm .book-cover__title {
  74. font-size: .6rem;
  75. letter-spacing: .04em;
  76. line-height: 1.3;
  77. }
  78. .book-cover__divider {
  79. width: 28px;
  80. height: 1px;
  81. background: var(--wp-brand);
  82. margin: .5rem auto;
  83. }
  84. .book-cover__subtitle {
  85. font-size: .65rem;
  86. color: rgba(255,255,255,.45);
  87. letter-spacing: .04em;
  88. }
  89. /* ══════════════════════════════════════════
  90. 二、作者头像组件(.author-avatar)
  91. 对应 components/ui/author-avatar.blade.php
  92. ══════════════════════════════════════════ */
  93. .author-avatar {
  94. display: flex;
  95. align-items: center;
  96. gap: .5rem;
  97. }
  98. .author-avatar__img,
  99. .author-avatar__initials {
  100. border-radius: 50%;
  101. flex-shrink: 0;
  102. object-fit: cover;
  103. }
  104. /* 尺寸 */
  105. .author-avatar--sm .author-avatar__img,
  106. .author-avatar--sm .author-avatar__initials {
  107. width: 24px; height: 24px;
  108. font-size: .65rem;
  109. }
  110. .author-avatar--md .author-avatar__img,
  111. .author-avatar--md .author-avatar__initials {
  112. width: 28px; height: 28px;
  113. font-size: .68rem;
  114. }
  115. .author-avatar--lg .author-avatar__img,
  116. .author-avatar--lg .author-avatar__initials {
  117. width: 48px; height: 48px;
  118. font-size: .95rem;
  119. }
  120. .author-avatar__initials {
  121. display: flex;
  122. align-items: center;
  123. justify-content: center;
  124. font-weight: 700;
  125. color: #fff;
  126. }
  127. .author-avatar__name {
  128. font-size: .8rem;
  129. color: var(--wp-ink-soft);
  130. font-weight: 500;
  131. display: block;
  132. }
  133. .author-avatar--lg .author-avatar__name {
  134. font-size: .9rem;
  135. }
  136. .author-avatar__sub {
  137. font-size: .72rem;
  138. color: var(--wp-ink-muted);
  139. display: block;
  140. }
  141. /* ══════════════════════════════════════════
  142. 三、文集卡片(.anthology-card)
  143. 横向布局:封面左 + 内容右
  144. ══════════════════════════════════════════ */
  145. .anthology-card {
  146. background: var(--wp-card-bg);
  147. border: 1px solid var(--wp-border);
  148. border-radius: 10px;
  149. overflow: hidden;
  150. display: flex;
  151. transition: box-shadow .25s, transform .25s;
  152. margin-bottom: 1.1rem;
  153. text-decoration: none;
  154. color: inherit;
  155. }
  156. .anthology-card:hover {
  157. box-shadow: 0 8px 28px rgba(200,134,10,.12), 0 2px 8px rgba(0,0,0,.06);
  158. transform: translateY(-2px);
  159. color: inherit;
  160. text-decoration: none;
  161. }
  162. .anthology-card .book-cover {
  163. border-radius: 0;
  164. }
  165. .anthology-card__body {
  166. padding: 1.1rem 1.4rem;
  167. flex: 1;
  168. display: flex;
  169. flex-direction: column;
  170. min-width: 0;
  171. }
  172. .anthology-card__title {
  173. font-family: 'Noto Serif SC', 'Noto Serif', Georgia, serif;
  174. font-size: 1.1rem;
  175. font-weight: 600;
  176. color: var(--wp-ink);
  177. margin-bottom: .35rem;
  178. line-height: 1.4;
  179. }
  180. .anthology-card:hover .anthology-card__title { color: var(--wp-brand); }
  181. .anthology-card__desc {
  182. font-size: .8rem;
  183. color: var(--wp-ink-muted);
  184. margin-bottom: .65rem;
  185. line-height: 1.65;
  186. }
  187. .anthology-card__author { margin-bottom: .7rem; }
  188. .anthology-card__tags {
  189. display: flex;
  190. flex-wrap: wrap;
  191. gap: .3rem;
  192. margin-top: auto;
  193. }
  194. .anthology-tag {
  195. font-size: .7rem;
  196. color: var(--wp-ink-muted);
  197. background: var(--wp-brand-light);
  198. border: 1px solid var(--wp-border);
  199. padding: 1px 7px;
  200. border-radius: 4px;
  201. white-space: nowrap;
  202. }
  203. .anthology-tag--more {
  204. background: transparent;
  205. border-color: transparent;
  206. color: var(--wp-brand);
  207. }
  208. .anthology-card__meta {
  209. display: flex;
  210. align-items: center;
  211. gap: .85rem;
  212. margin-top: .65rem;
  213. padding-top: .65rem;
  214. border-top: 1px solid var(--wp-border);
  215. }
  216. .anthology-meta-item {
  217. font-size: .72rem;
  218. color: var(--wp-ink-muted);
  219. display: flex;
  220. align-items: center;
  221. gap: .25rem;
  222. }
  223. /* ══════════════════════════════════════════
  224. 四、页面头部(index 页)
  225. ══════════════════════════════════════════ */
  226. .anthology-page-header {
  227. background: linear-gradient(135deg, var(--wp-ink) 0%, #2d2010 100%);
  228. padding: 2.25rem 0 2rem;
  229. position: relative;
  230. overflow: hidden;
  231. }
  232. .anthology-page-header::before {
  233. content: '藏';
  234. font-family: 'Noto Serif SC', serif;
  235. font-size: 16rem;
  236. font-weight: 700;
  237. color: rgba(255,255,255,.03);
  238. position: absolute;
  239. right: -1rem;
  240. top: -2.5rem;
  241. line-height: 1;
  242. pointer-events: none;
  243. }
  244. .anthology-page-header h1 {
  245. font-family: 'Noto Serif SC', 'Noto Serif', Georgia, serif;
  246. font-size: 1.75rem;
  247. font-weight: 600;
  248. color: #fff;
  249. margin: 0 0 .3rem;
  250. letter-spacing: .08em;
  251. }
  252. .anthology-page-header p {
  253. color: rgba(255,255,255,.45);
  254. font-size: .85rem;
  255. margin: 0;
  256. }
  257. .result-badge {
  258. background: var(--wp-brand);
  259. color: var(--wp-ink);
  260. font-size: .75rem;
  261. font-weight: 700;
  262. padding: 2px 9px;
  263. border-radius: 20px;
  264. margin-left: .6rem;
  265. vertical-align: middle;
  266. }
  267. /* ══════════════════════════════════════════
  268. 五、侧边栏卡片(index + show 共用)
  269. ══════════════════════════════════════════ */
  270. .sb-card {
  271. background: var(--wp-card-bg);
  272. border: 1px solid var(--wp-border);
  273. border-radius: 10px;
  274. overflow: hidden;
  275. margin-bottom: 1.15rem;
  276. }
  277. .sb-head {
  278. padding: .8rem 1.2rem;
  279. border-bottom: 1px solid var(--wp-border);
  280. font-family: 'Noto Serif SC', 'Noto Serif', Georgia, serif;
  281. font-size: .875rem;
  282. font-weight: 600;
  283. color: var(--wp-ink-soft);
  284. letter-spacing: .04em;
  285. display: flex;
  286. align-items: center;
  287. gap: .45rem;
  288. }
  289. .sb-head::before {
  290. content: '';
  291. display: block;
  292. width: 3px;
  293. height: 13px;
  294. background: var(--wp-brand);
  295. border-radius: 2px;
  296. }
  297. /* 侧边栏 meta 行 */
  298. .smeta-row {
  299. display: flex;
  300. padding: .7rem 1.2rem;
  301. border-bottom: 1px solid var(--wp-border);
  302. font-size: .8rem;
  303. align-items: flex-start;
  304. gap: .45rem;
  305. }
  306. .smeta-row:last-child { border-bottom: none; }
  307. .smeta-label {
  308. color: var(--wp-ink-muted);
  309. min-width: 65px;
  310. flex-shrink: 0;
  311. }
  312. .smeta-value {
  313. color: var(--wp-ink-soft);
  314. font-weight: 500;
  315. }
  316. .smeta-value a {
  317. color: var(--wp-brand);
  318. text-decoration: none;
  319. }
  320. .smeta-value a:hover { text-decoration: underline; }
  321. /* 作者块(show 页侧边栏大头像版) */
  322. .author-block {
  323. display: flex;
  324. align-items: center;
  325. gap: .8rem;
  326. padding: 1.1rem 1.2rem;
  327. }
  328. .author-block-name {
  329. font-weight: 600;
  330. font-size: .9rem;
  331. color: var(--wp-ink);
  332. margin-bottom: .18rem;
  333. }
  334. .author-block-stats {
  335. font-size: .75rem;
  336. color: var(--wp-ink-muted);
  337. }
  338. .author-bio {
  339. font-size: .78rem;
  340. color: var(--wp-ink-muted);
  341. line-height: 1.65;
  342. padding: .9rem 1.2rem 1.1rem;
  343. border-top: 1px solid var(--wp-border);
  344. }
  345. /* 相关文集列表 */
  346. .related-ul {
  347. list-style: none;
  348. padding: 0;
  349. margin: 0;
  350. }
  351. .related-ul li a {
  352. display: flex;
  353. align-items: center;
  354. gap: .7rem;
  355. padding: .7rem 1.2rem;
  356. border-bottom: 1px solid var(--wp-border);
  357. text-decoration: none;
  358. transition: background .15s;
  359. }
  360. .related-ul li:last-child a { border-bottom: none; }
  361. .related-ul li a:hover { background: var(--wp-surface-alt); }
  362. .related-t {
  363. font-size: .8rem;
  364. color: var(--wp-ink-soft);
  365. font-weight: 500;
  366. margin-bottom: .18rem;
  367. line-height: 1.3;
  368. }
  369. .related-ul li a:hover .related-t { color: var(--wp-brand); }
  370. .related-a {
  371. font-size: .7rem;
  372. color: var(--wp-ink-muted);
  373. }
  374. /* 作者列表(index 侧边栏) */
  375. .author-ul {
  376. list-style: none;
  377. padding: .35rem 0;
  378. margin: 0;
  379. }
  380. .author-ul li a {
  381. display: flex;
  382. align-items: center;
  383. gap: .6rem;
  384. padding: .45rem 1.15rem;
  385. text-decoration: none;
  386. transition: background .15s;
  387. }
  388. .author-ul li a:hover { background: var(--wp-surface-alt); }
  389. /* ══════════════════════════════════════════
  390. 六、文章目录(show 页)
  391. ══════════════════════════════════════════ */
  392. .sec-card {
  393. background: var(--wp-card-bg);
  394. border: 1px solid var(--wp-border);
  395. border-radius: 10px;
  396. overflow: hidden;
  397. margin-bottom: 1.3rem;
  398. }
  399. .sec-header {
  400. padding: .85rem 1.4rem;
  401. border-bottom: 1px solid var(--wp-border);
  402. display: flex;
  403. align-items: center;
  404. gap: .55rem;
  405. }
  406. .sec-bar {
  407. width: 3px;
  408. height: 15px;
  409. background: var(--wp-brand);
  410. border-radius: 2px;
  411. flex-shrink: 0;
  412. }
  413. .sec-title {
  414. font-family: 'Noto Serif SC', 'Noto Serif', Georgia, serif;
  415. font-size: .9rem;
  416. font-weight: 600;
  417. color: var(--wp-ink-soft);
  418. letter-spacing: .04em;
  419. }
  420. .sec-count {
  421. margin-left: auto;
  422. font-size: .75rem;
  423. color: var(--wp-ink-muted);
  424. background: var(--wp-brand-light);
  425. padding: 2px 8px;
  426. border-radius: 10px;
  427. }
  428. .sec-body {
  429. padding: 1.15rem 1.4rem;
  430. font-size: .855rem;
  431. color: var(--wp-ink-soft);
  432. line-height: 1.95;
  433. }
  434. .sec-body p { margin-bottom: .8rem; }
  435. .sec-body p:last-child { margin-bottom: 0; }
  436. /* TOC 列表 */
  437. .toc-ul {
  438. list-style: none;
  439. padding: .35rem 0;
  440. margin: 0;
  441. }
  442. .toc-ul li a {
  443. display: flex;
  444. align-items: center;
  445. padding: .65rem 1.4rem;
  446. text-decoration: none;
  447. border-bottom: 1px solid rgba(232,221,208,.5);
  448. transition: background .15s;
  449. }
  450. .toc-ul li:last-child a { border-bottom: none; }
  451. .toc-ul li a:hover { background: var(--wp-surface-alt); }
  452. .toc-num {
  453. font-size: .72rem;
  454. color: var(--wp-ink-muted);
  455. width: 26px;
  456. flex-shrink: 0;
  457. }
  458. .toc-name {
  459. font-size: .855rem;
  460. color: var(--wp-ink-soft);
  461. flex: 1;
  462. line-height: 1.4;
  463. }
  464. .toc-ul li a:hover .toc-name { color: var(--wp-brand); }
  465. .toc-arrow {
  466. color: var(--wp-border);
  467. font-size: .85rem;
  468. }
  469. .toc-ul li a:hover .toc-arrow { color: var(--wp-brand); }
  470. /* ══════════════════════════════════════════
  471. 七、Hero(show 页)
  472. ══════════════════════════════════════════ */
  473. .anthology-hero {
  474. background: linear-gradient(135deg, var(--wp-ink) 0%, #2d2010 100%);
  475. padding: 2.5rem 0;
  476. }
  477. .hero-inner {
  478. display: flex;
  479. gap: 2.25rem;
  480. align-items: flex-start;
  481. }
  482. .hero-content { flex: 1; min-width: 0; }
  483. .hero-title {
  484. font-family: 'Noto Serif SC', 'Noto Serif', Georgia, serif;
  485. font-size: 1.75rem;
  486. font-weight: 700;
  487. color: #fff;
  488. line-height: 1.3;
  489. margin-bottom: .4rem;
  490. }
  491. .hero-subtitle {
  492. font-size: .88rem;
  493. color: rgba(255,255,255,.45);
  494. font-style: italic;
  495. letter-spacing: .04em;
  496. margin-bottom: 1.1rem;
  497. }
  498. .hero-tags {
  499. display: flex;
  500. flex-wrap: wrap;
  501. gap: .35rem;
  502. margin-bottom: 1.3rem;
  503. }
  504. .hero-tag {
  505. font-size: .72rem;
  506. padding: 2px 9px;
  507. border-radius: 20px;
  508. background: rgba(200,134,10,.2);
  509. color: var(--wp-brand);
  510. border: 1px solid rgba(200,134,10,.3);
  511. }
  512. .hero-info-row {
  513. display: flex;
  514. flex-wrap: wrap;
  515. gap: 1.4rem;
  516. margin-bottom: 1.3rem;
  517. }
  518. .hi-item { display: flex; align-items: center; gap: .45rem; }
  519. .hi-label {
  520. font-size: .72rem;
  521. color: rgba(255,255,255,.4);
  522. letter-spacing: .04em;
  523. display: block;
  524. }
  525. .hi-value {
  526. font-size: .83rem;
  527. color: rgba(255,255,255,.82);
  528. display: block;
  529. }
  530. .hero-desc {
  531. font-size: .85rem;
  532. color: rgba(255,255,255,.6);
  533. line-height: 1.85;
  534. margin-bottom: 1.6rem;
  535. max-width: 600px;
  536. }
  537. /* Hero 按钮 */
  538. .btn-read-primary {
  539. background: var(--wp-brand);
  540. color: var(--wp-ink);
  541. font-weight: 700;
  542. font-size: .88rem;
  543. padding: .55rem 1.6rem;
  544. border-radius: 6px;
  545. border: none;
  546. cursor: pointer;
  547. text-decoration: none;
  548. display: inline-flex;
  549. align-items: center;
  550. gap: .45rem;
  551. transition: background .2s, transform .15s;
  552. }
  553. .btn-read-primary:hover {
  554. background: #dea020;
  555. color: var(--wp-ink);
  556. transform: translateY(-1px);
  557. }
  558. .btn-outline-hero {
  559. background: transparent;
  560. color: rgba(255,255,255,.7);
  561. font-size: .85rem;
  562. padding: .5rem 1.3rem;
  563. border-radius: 6px;
  564. border: 1px solid rgba(255,255,255,.2);
  565. cursor: pointer;
  566. text-decoration: none;
  567. display: inline-flex;
  568. align-items: center;
  569. gap: .4rem;
  570. transition: all .2s;
  571. margin-left: .65rem;
  572. }
  573. .btn-outline-hero:hover {
  574. border-color: rgba(255,255,255,.5);
  575. color: #fff;
  576. }
  577. /* ══════════════════════════════════════════
  578. 八、响应式
  579. ══════════════════════════════════════════ */
  580. @media (max-width: 900px) {
  581. .hero-inner {
  582. flex-direction: column;
  583. align-items: center;
  584. }
  585. }
  586. @media (max-width: 768px) {
  587. .anthology-card {
  588. flex-direction: column;
  589. }
  590. .anthology-card .book-cover--md {
  591. width: 100%;
  592. min-width: unset;
  593. height: 90px;
  594. }
  595. }