_tipitaka.css 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452
  1. /* resources/css/modules/_tipitaka.css
  2. Tipitaka 栏目专属样式。
  3. 来源:book-list.blade.php / book-item.blade.php 内联样式提取,
  4. 去除 CDN 引入,风格与 wiki 对齐。
  5. */
  6. /* ══════════════════════════════════════════
  7. 一、书籍卡片(.card-book)
  8. 纵向:封面上 + 信息下
  9. ══════════════════════════════════════════ */
  10. .card-book {
  11. transition:
  12. transform 0.2s,
  13. box-shadow 0.2s;
  14. }
  15. .card-book:hover {
  16. transform: translateY(-2px);
  17. box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  18. }
  19. .card-book__link {
  20. display: block;
  21. text-decoration: none;
  22. color: inherit;
  23. }
  24. .card-book__link:hover {
  25. text-decoration: none;
  26. color: inherit;
  27. }
  28. /* 封面:撑满卡片宽度 */
  29. .card-book .book-cover--md {
  30. width: 100%;
  31. min-width: unset;
  32. height: 200px;
  33. border-radius: var(--tblr-border-radius);
  34. }
  35. @media (max-width: 768px) {
  36. .card-book .book-cover--md {
  37. height: 150px;
  38. }
  39. }
  40. /* 信息区 */
  41. .card-book__info {
  42. padding: 0.75rem 0 0;
  43. }
  44. .card-book__title {
  45. font-size: 0.9375rem;
  46. font-weight: 600;
  47. color: var(--tblr-body-color);
  48. margin-bottom: 0.25rem;
  49. line-height: 1.4;
  50. display: -webkit-box;
  51. -webkit-line-clamp: 2;
  52. -webkit-box-orient: vertical;
  53. overflow: hidden;
  54. }
  55. .card-book:hover .card-book__title {
  56. color: var(--tblr-primary);
  57. }
  58. .card-book__author {
  59. font-size: 0.8125rem;
  60. color: var(--tblr-secondary);
  61. margin-bottom: 0.25rem;
  62. }
  63. .card-book__publisher {
  64. font-size: 0.8125rem;
  65. color: var(--tblr-secondary);
  66. margin-bottom: 0.375rem;
  67. }
  68. .card-book__publisher-link {
  69. color: var(--tblr-primary);
  70. text-decoration: none;
  71. }
  72. .card-book__publisher-link:hover {
  73. text-decoration: underline;
  74. }
  75. .card-book__badges {
  76. display: flex;
  77. flex-wrap: wrap;
  78. gap: 4px;
  79. margin-top: 0.375rem;
  80. }
  81. .card-book__badge {
  82. display: inline-block;
  83. padding: 2px 8px;
  84. background: var(--tblr-bg-surface-secondary);
  85. border: 1px solid var(--tblr-border-color);
  86. border-radius: 20px;
  87. font-size: 0.6875rem;
  88. color: var(--tblr-secondary);
  89. }
  90. /* ══════════════════════════════════════════
  91. 二、书籍网格(.book-grid)
  92. ══════════════════════════════════════════ */
  93. .book-grid {
  94. display: grid;
  95. grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  96. gap: 1.25rem;
  97. }
  98. @media (max-width: 575px) {
  99. .book-grid {
  100. grid-template-columns: repeat(2, 1fr);
  101. gap: 0.875rem;
  102. }
  103. }
  104. /* ══════════════════════════════════════════
  105. 三、show 页 — 文字截断
  106. ══════════════════════════════════════════ */
  107. .line2 {
  108. display: -webkit-box;
  109. -webkit-line-clamp: 2;
  110. -webkit-box-orient: vertical;
  111. overflow: hidden;
  112. text-overflow: ellipsis;
  113. }
  114. /* ══════════════════════════════════════════
  115. 四、子分类网格
  116. ══════════════════════════════════════════ */
  117. .tipitaka-sub-grid {
  118. display: grid;
  119. grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  120. gap: 8px;
  121. }
  122. /* ══════════════════════════════════════════
  123. 五、过滤器区
  124. ══════════════════════════════════════════ */
  125. .tipitaka-filters {
  126. display: flex;
  127. flex-direction: column;
  128. gap: 0.875rem;
  129. }
  130. .tipitaka-filter-row {
  131. display: flex;
  132. align-items: flex-start;
  133. gap: 0.75rem;
  134. }
  135. .tipitaka-filter-label {
  136. font-size: 0.75rem;
  137. font-weight: 500;
  138. color: var(--tblr-secondary);
  139. white-space: nowrap;
  140. padding-top: 4px;
  141. min-width: 2.5rem;
  142. }
  143. .tipitaka-filter-pills {
  144. display: flex;
  145. flex-wrap: wrap;
  146. gap: 6px;
  147. flex: 1;
  148. }
  149. .tipitaka-pill {
  150. display: inline-flex;
  151. align-items: center;
  152. gap: 4px;
  153. font-size: 0.8125rem;
  154. padding: 3px 10px;
  155. border-radius: 20px;
  156. border: 1px solid var(--tblr-border-color);
  157. color: var(--tblr-body-color);
  158. background: var(--tblr-bg-surface);
  159. text-decoration: none;
  160. transition:
  161. background 0.12s,
  162. border-color 0.12s,
  163. color 0.12s;
  164. white-space: nowrap;
  165. }
  166. .tipitaka-pill:hover {
  167. background: var(--tblr-bg-surface-secondary);
  168. border-color: var(--tblr-border-color-dark, #adb5bd);
  169. color: var(--tblr-body-color);
  170. text-decoration: none;
  171. }
  172. .tipitaka-pill--active {
  173. background: var(--tblr-primary);
  174. border-color: var(--tblr-primary);
  175. color: #fff;
  176. pointer-events: none;
  177. }
  178. .tipitaka-pill--active:hover {
  179. background: var(--tblr-primary);
  180. color: #fff;
  181. }
  182. .tipitaka-pill-count {
  183. font-size: 0.6875rem;
  184. opacity: 0.75;
  185. }
  186. .tipitaka-author-select {
  187. max-width: 220px;
  188. }
  189. .tipitaka-filter-clear {
  190. display: flex;
  191. justify-content: flex-end;
  192. padding-top: 0.25rem;
  193. border-top: 1px solid var(--tblr-border-color);
  194. }
  195. .tipitaka-clear-btn {
  196. font-size: 0.75rem;
  197. color: var(--tblr-secondary);
  198. text-decoration: none;
  199. display: inline-flex;
  200. align-items: center;
  201. gap: 4px;
  202. transition: color 0.12s;
  203. }
  204. .tipitaka-clear-btn:hover {
  205. color: var(--tblr-danger);
  206. }
  207. /* ══════════════════════════════════════════
  208. 六、排序栏
  209. ══════════════════════════════════════════ */
  210. .tipitaka-sort-bar {
  211. display: flex;
  212. align-items: center;
  213. justify-content: space-between;
  214. padding: 0 0.25rem;
  215. }
  216. .tipitaka-sort-bar__count {
  217. font-size: 0.8125rem;
  218. color: var(--tblr-secondary);
  219. }
  220. .tipitaka-sort-bar__count strong {
  221. color: var(--tblr-body-color);
  222. font-weight: 500;
  223. }
  224. .tipitaka-sort-bar__right {
  225. display: flex;
  226. align-items: center;
  227. gap: 0.5rem;
  228. }
  229. .tipitaka-sort-bar__label {
  230. font-size: 0.8125rem;
  231. color: var(--tblr-secondary);
  232. white-space: nowrap;
  233. }
  234. .tipitaka-sort-select {
  235. width: auto;
  236. min-width: 80px;
  237. }
  238. /* ══════════════════════════════════════════
  239. 七、活跃译者列表
  240. ══════════════════════════════════════════ */
  241. .tipitaka-author-list {
  242. list-style: none;
  243. padding: 0;
  244. margin: 0;
  245. }
  246. .tipitaka-author-list li {
  247. border-bottom: 1px solid var(--tblr-border-color);
  248. }
  249. .tipitaka-author-list li:last-child {
  250. border-bottom: none;
  251. }
  252. .tipitaka-author-item {
  253. display: flex;
  254. align-items: center;
  255. gap: 0.625rem;
  256. padding: 6px 0;
  257. text-decoration: none;
  258. color: inherit;
  259. transition: background 0.12s;
  260. }
  261. .tipitaka-author-item:hover {
  262. color: var(--tblr-primary);
  263. text-decoration: none;
  264. }
  265. .tipitaka-author-item__info {
  266. display: flex;
  267. flex-direction: column;
  268. min-width: 0;
  269. }
  270. .tipitaka-author-item__name {
  271. font-size: 0.8125rem;
  272. font-weight: 500;
  273. color: var(--tblr-body-color);
  274. white-space: nowrap;
  275. overflow: hidden;
  276. text-overflow: ellipsis;
  277. }
  278. .tipitaka-author-item:hover .tipitaka-author-item__name {
  279. color: var(--tblr-primary);
  280. }
  281. .tipitaka-author-item__count {
  282. font-size: 0.6875rem;
  283. color: var(--tblr-secondary);
  284. }
  285. /* ══════════════════════════════════════════
  286. 八、响应式
  287. ══════════════════════════════════════════ */
  288. @media (max-width: 768px) {
  289. /* 过滤器:label 和 pills 垂直排列 */
  290. .tipitaka-filter-row {
  291. flex-direction: column;
  292. gap: 0.375rem;
  293. }
  294. .tipitaka-filter-label {
  295. padding-top: 0;
  296. }
  297. /* 作者下拉撑满 */
  298. .tipitaka-author-select {
  299. max-width: 100%;
  300. width: 100%;
  301. }
  302. }
  303. /* 目录项布局 */
  304. .toc-item {
  305. display: flex;
  306. flex-direction: column; /* 默认:手机上下 */
  307. gap: 0.4rem;
  308. }
  309. /* 标题 */
  310. .toc-title {
  311. font-size: 0.95rem;
  312. }
  313. /* 进度区 */
  314. .toc-progress {
  315. display: flex;
  316. align-items: center;
  317. gap: 0.5rem;
  318. }
  319. /* 百分比 */
  320. .toc-progress-text {
  321. font-size: 0.7rem;
  322. color: var(--tblr-secondary);
  323. white-space: nowrap;
  324. }
  325. /* ≥ md(平板/桌面):左右分布 */
  326. @media (min-width: 768px) {
  327. .toc-item {
  328. flex-direction: row;
  329. align-items: center;
  330. }
  331. .toc-title {
  332. flex: 1;
  333. }
  334. .toc-progress {
  335. width: 140px;
  336. }
  337. }
  338. /* ══════════════════════════════════════════
  339. 子分类网格
  340. ══════════════════════════════════════════ */
  341. .tipitaka-subcategory-grid {
  342. display: grid;
  343. grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  344. gap: 8px;
  345. padding: 4px 0;
  346. }
  347. .tipitaka-subcategory-item {
  348. display: flex;
  349. flex-direction: column;
  350. align-items: center;
  351. gap: 8px;
  352. padding: 16px 12px;
  353. border-radius: var(--tblr-border-radius);
  354. text-decoration: none;
  355. color: var(--tblr-body-color);
  356. border: 1px solid transparent;
  357. transition:
  358. background 0.15s,
  359. border-color 0.15s;
  360. }
  361. .tipitaka-subcategory-item:hover {
  362. background: var(--tblr-bg-surface-secondary);
  363. border-color: var(--tblr-border-color);
  364. text-decoration: none;
  365. color: var(--tblr-body-color);
  366. }
  367. .tipitaka-subcategory-icon {
  368. font-size: 40px;
  369. color: var(--tblr-secondary);
  370. line-height: 1;
  371. }
  372. .tipitaka-subcategory-item:hover .tipitaka-subcategory-icon {
  373. color: var(--tblr-body-color);
  374. }
  375. .tipitaka-subcategory-name {
  376. font-size: 0.8125rem;
  377. text-align: center;
  378. line-height: 1.4;
  379. color: var(--tblr-secondary);
  380. }