_anthology.css 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284
  1. /* resources/css/modules/_anthology.css
  2. 文集栏目专属样式。
  3. 已提取到公共层:
  4. - components/_card-book.css → .book-cover 封面组件
  5. - components/_card.css → .author-avatar 头像组件
  6. */
  7. /* ══════════════════════════════════════════
  8. 一、文集卡片(.anthology-card)横向布局
  9. ══════════════════════════════════════════ */
  10. .anthology-card {
  11. background: var(--wp-card-bg);
  12. border: 1px solid var(--wp-border);
  13. border-radius: 10px;
  14. overflow: hidden;
  15. display: flex;
  16. transition: box-shadow .25s, transform .25s;
  17. margin-bottom: 1.1rem;
  18. text-decoration: none;
  19. color: inherit;
  20. }
  21. .anthology-card:hover {
  22. box-shadow: 0 8px 28px rgba(200,134,10,.12), 0 2px 8px rgba(0,0,0,.06);
  23. transform: translateY(-2px);
  24. color: inherit;
  25. text-decoration: none;
  26. }
  27. .anthology-card .book-cover { border-radius: 0; }
  28. .anthology-card__body {
  29. padding: 1.1rem 1.4rem;
  30. flex: 1;
  31. display: flex;
  32. flex-direction: column;
  33. min-width: 0;
  34. }
  35. .anthology-card__title {
  36. font-family: 'Noto Serif SC', 'Noto Serif', Georgia, serif;
  37. font-size: 1.1rem;
  38. font-weight: 600;
  39. color: var(--wp-ink);
  40. margin-bottom: .35rem;
  41. line-height: 1.4;
  42. }
  43. .anthology-card:hover .anthology-card__title { color: var(--wp-brand); }
  44. .anthology-card__desc {
  45. font-size: .8rem;
  46. color: var(--wp-ink-muted);
  47. margin-bottom: .65rem;
  48. line-height: 1.65;
  49. }
  50. .anthology-card__author { margin-bottom: .7rem; }
  51. .anthology-card__tags {
  52. display: flex;
  53. flex-wrap: wrap;
  54. gap: .3rem;
  55. margin-top: auto;
  56. }
  57. .anthology-tag {
  58. font-size: .7rem;
  59. color: var(--wp-ink-muted);
  60. background: var(--wp-brand-light);
  61. border: 1px solid var(--wp-border);
  62. padding: 1px 7px;
  63. border-radius: 4px;
  64. white-space: nowrap;
  65. }
  66. .anthology-tag--more {
  67. background: transparent;
  68. border-color: transparent;
  69. color: var(--wp-brand);
  70. }
  71. .anthology-card__meta {
  72. display: flex;
  73. align-items: center;
  74. gap: .85rem;
  75. margin-top: .65rem;
  76. padding-top: .65rem;
  77. border-top: 1px solid var(--wp-border);
  78. }
  79. .anthology-meta-item {
  80. font-size: .72rem;
  81. color: var(--wp-ink-muted);
  82. display: flex;
  83. align-items: center;
  84. gap: .25rem;
  85. }
  86. /* ══════════════════════════════════════════
  87. 二、页面头部(index 页)
  88. ══════════════════════════════════════════ */
  89. .anthology-page-header {
  90. background: linear-gradient(135deg, var(--wp-ink) 0%, #2d2010 100%);
  91. padding: 2.25rem 0 2rem;
  92. position: relative;
  93. overflow: hidden;
  94. }
  95. .anthology-page-header::before {
  96. content: '藏';
  97. font-family: 'Noto Serif SC', serif;
  98. font-size: 16rem;
  99. font-weight: 700;
  100. color: rgba(255,255,255,.03);
  101. position: absolute;
  102. right: -1rem;
  103. top: -2.5rem;
  104. line-height: 1;
  105. pointer-events: none;
  106. }
  107. .anthology-page-header h1 {
  108. font-family: 'Noto Serif SC', 'Noto Serif', Georgia, serif;
  109. font-size: 1.75rem;
  110. font-weight: 600;
  111. color: #fff;
  112. margin: 0 0 .3rem;
  113. letter-spacing: .08em;
  114. }
  115. .anthology-page-header p { color: rgba(255,255,255,.45); font-size: .85rem; margin: 0; }
  116. .result-badge {
  117. background: var(--wp-brand);
  118. color: var(--wp-ink);
  119. font-size: .75rem;
  120. font-weight: 700;
  121. padding: 2px 9px;
  122. border-radius: 20px;
  123. margin-left: .6rem;
  124. vertical-align: middle;
  125. }
  126. /* ══════════════════════════════════════════
  127. 三、侧边栏卡片(index + show 共用)
  128. ══════════════════════════════════════════ */
  129. .sb-card {
  130. background: var(--wp-card-bg);
  131. border: 1px solid var(--wp-border);
  132. border-radius: 10px;
  133. overflow: hidden;
  134. margin-bottom: 1.15rem;
  135. }
  136. .sb-head {
  137. padding: .8rem 1.2rem;
  138. border-bottom: 1px solid var(--wp-border);
  139. font-family: 'Noto Serif SC', 'Noto Serif', Georgia, serif;
  140. font-size: .875rem;
  141. font-weight: 600;
  142. color: var(--wp-ink-soft);
  143. letter-spacing: .04em;
  144. display: flex;
  145. align-items: center;
  146. gap: .45rem;
  147. }
  148. .sb-head::before {
  149. content: '';
  150. display: block;
  151. width: 3px;
  152. height: 13px;
  153. background: var(--wp-brand);
  154. border-radius: 2px;
  155. }
  156. .smeta-row {
  157. display: flex;
  158. padding: .7rem 1.2rem;
  159. border-bottom: 1px solid var(--wp-border);
  160. font-size: .8rem;
  161. align-items: flex-start;
  162. gap: .45rem;
  163. }
  164. .smeta-row:last-child { border-bottom: none; }
  165. .smeta-label { color: var(--wp-ink-muted); min-width: 65px; flex-shrink: 0; }
  166. .smeta-value { color: var(--wp-ink-soft); font-weight: 500; }
  167. .smeta-value a { color: var(--wp-brand); text-decoration: none; }
  168. .smeta-value a:hover { text-decoration: underline; }
  169. .author-block { display: flex; align-items: center; gap: .8rem; padding: 1.1rem 1.2rem; }
  170. .author-block-name { font-weight: 600; font-size: .9rem; color: var(--wp-ink); margin-bottom: .18rem; }
  171. .author-block-stats { font-size: .75rem; color: var(--wp-ink-muted); }
  172. .author-bio {
  173. font-size: .78rem; color: var(--wp-ink-muted); line-height: 1.65;
  174. padding: .9rem 1.2rem 1.1rem;
  175. border-top: 1px solid var(--wp-border);
  176. }
  177. .related-ul { list-style: none; padding: 0; margin: 0; }
  178. .related-ul li a {
  179. display: flex; align-items: center; gap: .7rem;
  180. padding: .7rem 1.2rem;
  181. border-bottom: 1px solid var(--wp-border);
  182. text-decoration: none;
  183. transition: background .15s;
  184. }
  185. .related-ul li:last-child a { border-bottom: none; }
  186. .related-ul li a:hover { background: var(--wp-surface-alt); }
  187. .related-t { font-size: .8rem; color: var(--wp-ink-soft); font-weight: 500; margin-bottom: .18rem; line-height: 1.3; }
  188. .related-ul li a:hover .related-t { color: var(--wp-brand); }
  189. .related-a { font-size: .7rem; color: var(--wp-ink-muted); }
  190. .author-ul { list-style: none; padding: .35rem 0; margin: 0; }
  191. .author-ul li a {
  192. display: flex; align-items: center; gap: .6rem;
  193. padding: .45rem 1.15rem;
  194. text-decoration: none;
  195. transition: background .15s;
  196. }
  197. .author-ul li a:hover { background: var(--wp-surface-alt); }
  198. /* ══════════════════════════════════════════
  199. 四、文章目录(show 页)
  200. ══════════════════════════════════════════ */
  201. .sec-card { background: var(--wp-card-bg); border: 1px solid var(--wp-border); border-radius: 10px; overflow: hidden; margin-bottom: 1.3rem; }
  202. .sec-header { padding: .85rem 1.4rem; border-bottom: 1px solid var(--wp-border); display: flex; align-items: center; gap: .55rem; }
  203. .sec-bar { width: 3px; height: 15px; background: var(--wp-brand); border-radius: 2px; flex-shrink: 0; }
  204. .sec-title { font-family: 'Noto Serif SC', 'Noto Serif', Georgia, serif; font-size: .9rem; font-weight: 600; color: var(--wp-ink-soft); letter-spacing: .04em; }
  205. .sec-count { margin-left: auto; font-size: .75rem; color: var(--wp-ink-muted); background: var(--wp-brand-light); padding: 2px 8px; border-radius: 10px; }
  206. .sec-body { padding: 1.15rem 1.4rem; font-size: .855rem; color: var(--wp-ink-soft); line-height: 1.95; }
  207. .sec-body p { margin-bottom: .8rem; }
  208. .sec-body p:last-child { margin-bottom: 0; }
  209. .toc-ul { list-style: none; padding: .35rem 0; margin: 0; }
  210. .toc-ul li a { display: flex; align-items: center; padding: .65rem 1.4rem; text-decoration: none; border-bottom: 1px solid rgba(232,221,208,.5); transition: background .15s; }
  211. .toc-ul li:last-child a { border-bottom: none; }
  212. .toc-ul li a:hover { background: var(--wp-surface-alt); }
  213. .toc-num { font-size: .72rem; color: var(--wp-ink-muted); width: 26px; flex-shrink: 0; }
  214. .toc-name { font-size: .855rem; color: var(--wp-ink-soft); flex: 1; line-height: 1.4; }
  215. .toc-ul li a:hover .toc-name { color: var(--wp-brand); }
  216. .toc-arrow { color: var(--wp-border); font-size: .85rem; }
  217. .toc-ul li a:hover .toc-arrow { color: var(--wp-brand); }
  218. /* ══════════════════════════════════════════
  219. 五、Hero(show 页)
  220. ══════════════════════════════════════════ */
  221. .anthology-hero { background: linear-gradient(135deg, var(--wp-ink) 0%, #2d2010 100%); padding: 2.5rem 0; }
  222. .hero-inner { display: flex; gap: 2.25rem; align-items: flex-start; }
  223. .hero-content { flex: 1; min-width: 0; }
  224. .hero-title { font-family: 'Noto Serif SC', 'Noto Serif', Georgia, serif; font-size: 1.75rem; font-weight: 700; color: #fff; line-height: 1.3; margin-bottom: .4rem; }
  225. .hero-subtitle { font-size: .88rem; color: rgba(255,255,255,.45); font-style: italic; letter-spacing: .04em; margin-bottom: 1.1rem; }
  226. .hero-tags { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: 1.3rem; }
  227. .hero-tag { font-size: .72rem; padding: 2px 9px; border-radius: 20px; background: rgba(200,134,10,.2); color: var(--wp-brand); border: 1px solid rgba(200,134,10,.3); }
  228. .hero-info-row { display: flex; flex-wrap: wrap; gap: 1.4rem; margin-bottom: 1.3rem; }
  229. .hi-item { display: flex; align-items: center; gap: .45rem; }
  230. .hi-label { font-size: .72rem; color: rgba(255,255,255,.4); letter-spacing: .04em; display: block; }
  231. .hi-value { font-size: .83rem; color: rgba(255,255,255,.82); display: block; }
  232. .hero-desc { font-size: .85rem; color: rgba(255,255,255,.6); line-height: 1.85; margin-bottom: 1.6rem; max-width: 600px; }
  233. .btn-read-primary { background: var(--wp-brand); color: var(--wp-ink); font-weight: 700; font-size: .88rem; padding: .55rem 1.6rem; border-radius: 6px; border: none; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: .45rem; transition: background .2s, transform .15s; }
  234. .btn-read-primary:hover { background: #dea020; color: var(--wp-ink); transform: translateY(-1px); }
  235. .btn-outline-hero { background: transparent; color: rgba(255,255,255,.7); font-size: .85rem; padding: .5rem 1.3rem; border-radius: 6px; border: 1px solid rgba(255,255,255,.2); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: .4rem; transition: all .2s; margin-left: .65rem; }
  236. .btn-outline-hero:hover { border-color: rgba(255,255,255,.5); color: #fff; }
  237. /* ══════════════════════════════════════════
  238. 六、响应式
  239. ══════════════════════════════════════════ */
  240. @media (max-width: 900px) {
  241. .hero-inner { flex-direction: column; align-items: center; }
  242. }
  243. @media (max-width: 768px) {
  244. .anthology-card { flex-direction: column; }
  245. .anthology-card .book-cover--md { width: 100%; min-width: unset; height: 90px; }
  246. }