/* resources/css/modules/_library-index.css Library 门户首页专属样式。 */ /* ══════════════════════════════════════════ 一、区块通用结构 ══════════════════════════════════════════ */ .lib-section { margin-top: 2rem; margin-bottom: 0.5rem; } .lib-section__header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; padding-bottom: 0.625rem; border-bottom: 1px solid var(--tblr-border-color); } .lib-section__title { font-size: 1rem; font-weight: 600; color: var(--tblr-body-color); margin: 0; display: flex; align-items: center; gap: 0.4rem; flex: 1; } .lib-section__title .ti { font-size: 1.125rem; color: var(--tblr-secondary); } .lib-section__more { font-size: 0.8125rem; color: var(--tblr-primary); text-decoration: none; white-space: nowrap; display: flex; align-items: center; gap: 0.25rem; flex-shrink: 0; } .lib-section__more:hover { text-decoration: underline; } /* ══════════════════════════════════════════ 二、三藏分类卡片头部 ══════════════════════════════════════════ */ .lib-cat-card__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; } .lib-cat-card__name { font-size: 0.9375rem; font-weight: 600; color: var(--tblr-body-color); } .lib-cat-card__more { font-size: 0.75rem; color: var(--tblr-primary); text-decoration: none; display: flex; align-items: center; gap: 0.2rem; flex-shrink: 0; } .lib-cat-card__more:hover { text-decoration: underline; } /* ══════════════════════════════════════════ 三、"持续更新中" 标签 ══════════════════════════════════════════ */ .lib-live-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 0.6875rem; font-weight: 500; color: #3b6d11; background: #eaf3de; border: 1px solid #c0dd97; border-radius: 20px; padding: 2px 8px; margin-left: 0.25rem; } .lib-live-dot { width: 6px; height: 6px; border-radius: 50%; background: #639922; flex-shrink: 0; animation: lib-live-pulse 2s ease-in-out infinite; } @keyframes lib-live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } /* ══════════════════════════════════════════ 四、最新译文列表 ══════════════════════════════════════════ */ .lib-recent { padding: 0; /* 覆盖 wiki-card 默认 padding,由 item 自己管理 */ } .lib-recent__item { display: flex; align-items: center; gap: 0.875rem; padding: 0.75rem 1.25rem; border-bottom: 1px solid var(--tblr-border-color); text-decoration: none; color: inherit; transition: background 0.12s; } .lib-recent__item:last-child { border-bottom: none; } .lib-recent__item:hover { background: var(--tblr-bg-surface-secondary); color: inherit; text-decoration: none; } /* 封面缩略图固定不缩 */ .lib-recent__item .book-cover { flex-shrink: 0; } .lib-recent__info { flex: 1; min-width: 0; } .lib-recent__title { font-size: 0.9375rem; font-weight: 500; color: var(--tblr-body-color); margin-bottom: 0.25rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lib-recent__item:hover .lib-recent__title { color: var(--tblr-primary); } .lib-recent__meta { font-size: 0.75rem; color: var(--tblr-secondary); display: flex; align-items: center; gap: 0.375rem; flex-wrap: wrap; } .lib-recent__sep { opacity: 0.5; } .lib-recent__right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; } .lib-recent__time { font-size: 0.75rem; color: var(--tblr-secondary); white-space: nowrap; } /* 新增 / 更新 徽章 */ .lib-new-badge { font-size: 0.625rem; font-weight: 600; padding: 1px 6px; border-radius: 20px; background: #e6f1fb; color: #185fa5; border: 1px solid #b5d4f4; white-space: nowrap; } .lib-update-badge { font-size: 0.625rem; font-weight: 600; padding: 1px 6px; border-radius: 20px; background: #f1efe8; color: #5f5e5a; border: 1px solid #d3d1c7; white-space: nowrap; } /* ══════════════════════════════════════════ 五、栏目导航卡片 ══════════════════════════════════════════ */ .lib-nav-card { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 1.25rem 1rem; background: var(--tblr-bg-surface); border: 1px solid var(--tblr-border-color); border-radius: var(--tblr-border-radius-lg); text-decoration: none; color: inherit; transition: background 0.12s, transform 0.15s, box-shadow 0.15s; height: 100%; } .lib-nav-card:hover { background: var(--tblr-bg-surface-secondary); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.06); color: inherit; text-decoration: none; } .lib-nav-card__icon { font-size: 1.75rem; color: var(--tblr-primary); margin-bottom: 0.625rem; display: block; } .lib-nav-card__name { font-size: 0.9375rem; font-weight: 600; color: var(--tblr-body-color); margin-bottom: 0.25rem; } .lib-nav-card__desc { font-size: 0.75rem; color: var(--tblr-secondary); line-height: 1.4; } /* ══════════════════════════════════════════ 六、响应式 ══════════════════════════════════════════ */ /* 最新译文:手机隐藏作者,只显示标题+分类+时间 */ @media (max-width: 576px) { .lib-recent__item { padding: 0.625rem 1rem; gap: 0.625rem; } .lib-recent__author, .lib-recent__sep:last-of-type { display: none; } .lib-recent__title { font-size: 0.875rem; } } /* 栏目导航:手机 2 列,平板 3 列,桌面 5 列(Bootstrap row g-3 自动处理) */ @media (max-width: 575px) { .lib-nav-card { padding: 1rem 0.75rem; } .lib-nav-card__icon { font-size: 1.5rem; } .lib-nav-card__desc { display: none; /* 手机隐藏描述,只显示图标+名称 */ } } /* 三藏分类卡片:手机 2 列已由 Bootstrap col-6 处理 */ @media (max-width: 575px) { .lib-cat-card__more { display: none; /* 手机隐藏"更多"链接,避免挤压 */ } }