_card-book.css 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199
  1. /* resources/css/components/_card-book.css
  2. 书籍封面组件(.book-cover)+ 纵向书籍卡片(.card-book)。
  3. .book-cover 从 _anthology.css 提取,供 anthology / tipitaka 共用。
  4. */
  5. /* ══════════════════════════════════════════
  6. 一、书籍封面(.book-cover)
  7. ══════════════════════════════════════════ */
  8. .book-cover {
  9. position: relative;
  10. overflow: hidden;
  11. display: flex;
  12. flex-direction: column;
  13. align-items: center;
  14. justify-content: center;
  15. }
  16. /* 尺寸 */
  17. .book-cover--sm { width: 34px; min-width: 34px; height: 46px; }
  18. .book-cover--md { width: 130px; min-width: 130px; height: 180px; }
  19. .book-cover--lg { width: 155px; min-width: 155px; height: 215px; border-radius: 3px 9px 9px 3px; }
  20. /* 3D 书脊 */
  21. .book-cover--3d {
  22. box-shadow:
  23. -4px 0 0 rgba(0,0,0,.3),
  24. -6px 4px 14px rgba(0,0,0,.4),
  25. 4px 4px 18px rgba(0,0,0,.3);
  26. }
  27. .book-cover--3d::before {
  28. content: '';
  29. position: absolute;
  30. left: 0; top: 0; bottom: 0;
  31. width: 13px;
  32. background: linear-gradient(to right, rgba(0,0,0,.4), rgba(0,0,0,.1));
  33. border-radius: 3px 0 0 3px;
  34. z-index: 2;
  35. }
  36. /* 纹理叠加 */
  37. .book-cover::after {
  38. content: '';
  39. position: absolute;
  40. inset: 0;
  41. background: repeating-linear-gradient(
  42. 45deg, transparent, transparent 8px,
  43. rgba(255,255,255,.015) 8px, rgba(255,255,255,.015) 9px
  44. );
  45. z-index: 1;
  46. }
  47. /* 图片封面 */
  48. .book-cover__img {
  49. position: absolute;
  50. inset: 0;
  51. width: 100%;
  52. height: 100%;
  53. object-fit: cover;
  54. }
  55. /* 文字封面 */
  56. .book-cover__text {
  57. position: relative;
  58. z-index: 3;
  59. text-align: center;
  60. padding: 0 .5rem;
  61. }
  62. .book-cover__title {
  63. font-family: 'Noto Serif SC', 'Noto Serif', Georgia, serif;
  64. font-size: 1rem;
  65. font-weight: 600;
  66. color: #fff;
  67. line-height: 1.6;
  68. letter-spacing: .12em;
  69. word-break: break-all;
  70. }
  71. .book-cover--sm .book-cover__title {
  72. font-size: .6rem;
  73. letter-spacing: .04em;
  74. line-height: 1.3;
  75. }
  76. .book-cover__divider {
  77. width: 28px;
  78. height: 1px;
  79. background: var(--wp-brand);
  80. margin: .5rem auto;
  81. }
  82. .book-cover__subtitle {
  83. font-size: .65rem;
  84. color: rgba(255,255,255,.45);
  85. letter-spacing: .04em;
  86. }
  87. /* ══════════════════════════════════════════
  88. 二、纵向书籍卡片(.card-book)
  89. tipitaka 列表页使用
  90. ══════════════════════════════════════════ */
  91. .card-book {
  92. transition: transform 0.2s, box-shadow 0.2s;
  93. }
  94. .card-book:hover {
  95. transform: translateY(-2px);
  96. box-shadow: 0 8px 24px rgba(0,0,0,.1);
  97. }
  98. .card-book__link {
  99. display: block;
  100. text-decoration: none;
  101. color: inherit;
  102. }
  103. .card-book__link:hover {
  104. text-decoration: none;
  105. color: inherit;
  106. }
  107. /* 封面撑满卡片宽度 */
  108. .card-book .book-cover--md {
  109. width: 100%;
  110. min-width: unset;
  111. height: 200px;
  112. border-radius: var(--tblr-border-radius);
  113. }
  114. @media (max-width: 768px) {
  115. .card-book .book-cover--md { height: 150px; }
  116. }
  117. .card-book__info { padding: .75rem 0 0; }
  118. .card-book__title {
  119. font-size: 0.9375rem;
  120. font-weight: 600;
  121. color: var(--tblr-body-color);
  122. margin-bottom: .25rem;
  123. line-height: 1.4;
  124. display: -webkit-box;
  125. -webkit-line-clamp: 2;
  126. -webkit-box-orient: vertical;
  127. overflow: hidden;
  128. }
  129. .card-book:hover .card-book__title { color: var(--tblr-primary); }
  130. .card-book__author,
  131. .card-book__publisher {
  132. font-size: .8125rem;
  133. color: var(--tblr-secondary);
  134. margin-bottom: .25rem;
  135. }
  136. .card-book__publisher-link {
  137. color: var(--tblr-primary);
  138. text-decoration: none;
  139. }
  140. .card-book__publisher-link:hover { text-decoration: underline; }
  141. .card-book__badges {
  142. display: flex;
  143. flex-wrap: wrap;
  144. gap: 4px;
  145. margin-top: .375rem;
  146. }
  147. .card-book__badge {
  148. display: inline-block;
  149. padding: 2px 8px;
  150. background: var(--tblr-bg-surface-secondary);
  151. border: 1px solid var(--tblr-border-color);
  152. border-radius: 20px;
  153. font-size: .6875rem;
  154. color: var(--tblr-secondary);
  155. }
  156. /* ══════════════════════════════════════════
  157. 三、书籍网格
  158. ══════════════════════════════════════════ */
  159. .book-grid {
  160. display: grid;
  161. grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  162. gap: 1.25rem;
  163. }
  164. @media (max-width: 575px) {
  165. .book-grid {
  166. grid-template-columns: repeat(2, 1fr);
  167. gap: .875rem;
  168. }
  169. }