/* resources/css/modules/_tipitaka.css Tipitaka 栏目专属样式。 来源:book-list.blade.php / book-item.blade.php 内联样式提取, 去除 CDN 引入,风格与 wiki 对齐。 */ /* ══════════════════════════════════════════ 一、书籍卡片(.card-book) 纵向:封面上 + 信息下 ══════════════════════════════════════════ */ .card-book { transition: transform 0.2s, box-shadow 0.2s; } .card-book:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1); } .card-book__link { display: block; text-decoration: none; color: inherit; } .card-book__link:hover { text-decoration: none; color: inherit; } /* 封面:撑满卡片宽度 */ .card-book .book-cover--md { width: 100%; min-width: unset; height: 200px; border-radius: var(--tblr-border-radius); } @media (max-width: 768px) { .card-book .book-cover--md { height: 150px; } } /* 信息区 */ .card-book__info { padding: 0.75rem 0 0; } .card-book__title { font-size: 0.9375rem; font-weight: 600; color: var(--tblr-body-color); margin-bottom: 0.25rem; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .card-book:hover .card-book__title { color: var(--tblr-primary); } .card-book__author { font-size: 0.8125rem; color: var(--tblr-secondary); margin-bottom: 0.25rem; } .card-book__publisher { font-size: 0.8125rem; color: var(--tblr-secondary); margin-bottom: 0.375rem; } .card-book__publisher-link { color: var(--tblr-primary); text-decoration: none; } .card-book__publisher-link:hover { text-decoration: underline; } .card-book__badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 0.375rem; } .card-book__badge { display: inline-block; padding: 2px 8px; background: var(--tblr-bg-surface-secondary); border: 1px solid var(--tblr-border-color); border-radius: 20px; font-size: 0.6875rem; color: var(--tblr-secondary); } /* ══════════════════════════════════════════ 二、书籍网格(.book-grid) ══════════════════════════════════════════ */ .book-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1.25rem; } @media (max-width: 575px) { .book-grid { grid-template-columns: repeat(2, 1fr); gap: 0.875rem; } } /* ══════════════════════════════════════════ 三、show 页 — 文字截断 ══════════════════════════════════════════ */ .line2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } /* ══════════════════════════════════════════ 四、子分类网格 ══════════════════════════════════════════ */ .tipitaka-sub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; } /* ══════════════════════════════════════════ 五、过滤器区 ══════════════════════════════════════════ */ .tipitaka-filters { display: flex; flex-direction: column; gap: 0.875rem; } .tipitaka-filter-row { display: flex; align-items: flex-start; gap: 0.75rem; } .tipitaka-filter-label { font-size: 0.75rem; font-weight: 500; color: var(--tblr-secondary); white-space: nowrap; padding-top: 4px; min-width: 2.5rem; } .tipitaka-filter-pills { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; } .tipitaka-pill { display: inline-flex; align-items: center; gap: 4px; font-size: 0.8125rem; padding: 3px 10px; border-radius: 20px; border: 1px solid var(--tblr-border-color); color: var(--tblr-body-color); background: var(--tblr-bg-surface); text-decoration: none; transition: background 0.12s, border-color 0.12s, color 0.12s; white-space: nowrap; } .tipitaka-pill:hover { background: var(--tblr-bg-surface-secondary); border-color: var(--tblr-border-color-dark, #adb5bd); color: var(--tblr-body-color); text-decoration: none; } .tipitaka-pill--active { background: var(--tblr-primary); border-color: var(--tblr-primary); color: #fff; pointer-events: none; } .tipitaka-pill--active:hover { background: var(--tblr-primary); color: #fff; } .tipitaka-pill-count { font-size: 0.6875rem; opacity: 0.75; } .tipitaka-author-select { max-width: 220px; } .tipitaka-filter-clear { display: flex; justify-content: flex-end; padding-top: 0.25rem; border-top: 1px solid var(--tblr-border-color); } .tipitaka-clear-btn { font-size: 0.75rem; color: var(--tblr-secondary); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; transition: color 0.12s; } .tipitaka-clear-btn:hover { color: var(--tblr-danger); } /* ══════════════════════════════════════════ 六、排序栏 ══════════════════════════════════════════ */ .tipitaka-sort-bar { display: flex; align-items: center; justify-content: space-between; padding: 0 0.25rem; } .tipitaka-sort-bar__count { font-size: 0.8125rem; color: var(--tblr-secondary); } .tipitaka-sort-bar__count strong { color: var(--tblr-body-color); font-weight: 500; } .tipitaka-sort-bar__right { display: flex; align-items: center; gap: 0.5rem; } .tipitaka-sort-bar__label { font-size: 0.8125rem; color: var(--tblr-secondary); white-space: nowrap; } .tipitaka-sort-select { width: auto; min-width: 80px; } /* ══════════════════════════════════════════ 七、活跃译者列表 ══════════════════════════════════════════ */ .tipitaka-author-list { list-style: none; padding: 0; margin: 0; } .tipitaka-author-list li { border-bottom: 1px solid var(--tblr-border-color); } .tipitaka-author-list li:last-child { border-bottom: none; } .tipitaka-author-item { display: flex; align-items: center; gap: 0.625rem; padding: 6px 0; text-decoration: none; color: inherit; transition: background 0.12s; } .tipitaka-author-item:hover { color: var(--tblr-primary); text-decoration: none; } .tipitaka-author-item__info { display: flex; flex-direction: column; min-width: 0; } .tipitaka-author-item__name { font-size: 0.8125rem; font-weight: 500; color: var(--tblr-body-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tipitaka-author-item:hover .tipitaka-author-item__name { color: var(--tblr-primary); } .tipitaka-author-item__count { font-size: 0.6875rem; color: var(--tblr-secondary); } /* ══════════════════════════════════════════ 八、响应式 ══════════════════════════════════════════ */ @media (max-width: 768px) { /* 过滤器:label 和 pills 垂直排列 */ .tipitaka-filter-row { flex-direction: column; gap: 0.375rem; } .tipitaka-filter-label { padding-top: 0; } /* 作者下拉撑满 */ .tipitaka-author-select { max-width: 100%; width: 100%; } }