585 lines
13 KiB
CSS
585 lines
13 KiB
CSS
/**
|
||
* AKSRT Post Card / List — 1:1 Zibll Alignment
|
||
*
|
||
* 对齐 zibll main.css 的 .posts-item 系统
|
||
* - 默认 = 列表模式（无额外类名）
|
||
* - .card = 卡片模式
|
||
*
|
||
* 布局：inline-block（对齐 zibll，不用 Grid）
|
||
*/
|
||
|
||
/* ============================================================
|
||
* 列表容器 — 对齐 zibll .posts-row
|
||
* ============================================================ */
|
||
.post-grid {
|
||
margin-left: -8px;
|
||
margin-right: -8px;
|
||
font-size: 0; /* 消除 inline-block 间隙 */
|
||
}
|
||
|
||
.post-grid--list {
|
||
margin-left: 0;
|
||
margin-right: 0;
|
||
}
|
||
|
||
/* ============================================================
|
||
* 通用 posts-item 基础 — 对齐 zibll line 7585
|
||
* ============================================================ */
|
||
.posts-item {
|
||
padding: 20px;
|
||
margin: 15px 0;
|
||
background: var(--main-bg-color, #fff);
|
||
overflow: hidden;
|
||
transition: 0.2s;
|
||
box-shadow: 0 0 10px var(--main-shadow, rgba(116, 116, 116, 0.08));
|
||
border-radius: var(--main-radius, 8px);
|
||
}
|
||
|
||
/* ============================================================
|
||
* 卡片模式 .posts-item.card — 对齐 zibll line 7733
|
||
* ============================================================ */
|
||
.posts-item.card {
|
||
width: calc(33.333% - 16px);
|
||
display: inline-block;
|
||
margin: 8px;
|
||
padding: 10px;
|
||
vertical-align: top;
|
||
transition: 0.3s;
|
||
font-size: 1rem; /* 重置容器 font-size: 0 */
|
||
}
|
||
|
||
@media (max-width: 991px) {
|
||
.posts-item.card {
|
||
width: calc(33.333% - 12px);
|
||
margin: 6px;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 767px) {
|
||
.posts-item.card {
|
||
width: calc(50% - 10px);
|
||
margin: 5px;
|
||
padding: 8px;
|
||
}
|
||
}
|
||
|
||
/* ============================================================
|
||
* 缩略图 — 对齐 zibll line 7604
|
||
* ============================================================ */
|
||
.item-thumbnail {
|
||
position: relative;
|
||
overflow: hidden;
|
||
border-radius: var(--main-radius, 8px);
|
||
}
|
||
|
||
/* 列表模式缩略图 */
|
||
.posts-item:not(.card) .item-thumbnail {
|
||
width: 190px;
|
||
height: 0;
|
||
padding-bottom: var(--posts-list-scale, 70%);
|
||
float: left;
|
||
margin-right: 20px;
|
||
}
|
||
|
||
/* 卡片模式缩略图 */
|
||
.posts-item.card .item-thumbnail {
|
||
width: 100%;
|
||
height: 0;
|
||
padding-bottom: var(--posts-card-scale, 70%);
|
||
}
|
||
|
||
.item-thumbnail a {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
display: block;
|
||
}
|
||
|
||
.item-thumbnail img,
|
||
.item-thumbnail .fit-cover {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
transition: transform 0.3s ease;
|
||
}
|
||
|
||
.posts-item:hover .item-thumbnail img {
|
||
transform: scale(1.05);
|
||
}
|
||
|
||
/* 图片徽章 */
|
||
.img-badge {
|
||
position: absolute;
|
||
top: 8px;
|
||
padding: 2px 8px;
|
||
border-radius: 4px;
|
||
font-size: 11px;
|
||
font-weight: 600;
|
||
color: #fff;
|
||
z-index: 2;
|
||
}
|
||
|
||
.img-badge.left {
|
||
left: 8px;
|
||
}
|
||
|
||
.badge-sticky {
|
||
background: var(--color-error, #ef4444);
|
||
}
|
||
|
||
/* ============================================================
|
||
* 标题 — 对齐 zibll line 7669
|
||
* ============================================================ */
|
||
.item-heading {
|
||
margin-top: 0;
|
||
margin-bottom: 5px;
|
||
font-size: 18px;
|
||
line-height: 1.4em;
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 2;
|
||
overflow: hidden;
|
||
max-height: 2.8em;
|
||
}
|
||
|
||
.item-heading--bold {
|
||
font-weight: 700;
|
||
}
|
||
|
||
.fit-cover {
|
||
object-fit: cover;
|
||
}
|
||
|
||
.fit-contain {
|
||
object-fit: contain;
|
||
}
|
||
|
||
.posts-item.card .item-heading {
|
||
font-size: 14px;
|
||
min-height: 2.8em; /* 对齐 zibll：定高使无摘要卡片底部 meta 对齐；line-height/max-height 继承基类 1.4em/2.8em */
|
||
}
|
||
|
||
.item-heading a {
|
||
color: var(--key-color, #333);
|
||
}
|
||
|
||
.item-heading a:hover {
|
||
color: var(--focus-color, #f04494);
|
||
}
|
||
|
||
/* ============================================================
|
||
* 摘要 — 对齐 zibll 单行 ellipsis
|
||
* ============================================================ */
|
||
.item-excerpt {
|
||
font-size: 13px;
|
||
color: var(--muted-color, #777);
|
||
line-height: 1.5;
|
||
margin: 5px 0;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
/* ============================================================
|
||
* 元信息 — 对齐 zibll line 7701
|
||
* ============================================================ */
|
||
.item-meta {
|
||
font-size: 13px;
|
||
color: var(--muted-2-color, #999);
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.item-meta item {
|
||
margin-right: 8px;
|
||
}
|
||
|
||
.meta-author {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
}
|
||
|
||
.meta-avatar {
|
||
width: 20px;
|
||
height: 20px;
|
||
border-radius: 50%;
|
||
object-fit: cover;
|
||
}
|
||
|
||
.meta-time {
|
||
font-size: 12px;
|
||
}
|
||
|
||
.meta-right {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
float: right;
|
||
}
|
||
|
||
.meta-item {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 3px;
|
||
}
|
||
|
||
.meta-item i {
|
||
font-size: 11px;
|
||
opacity: 0.7;
|
||
}
|
||
|
||
.meta-dot {
|
||
width: 4px;
|
||
height: 4px;
|
||
border-radius: 999px;
|
||
background: currentColor;
|
||
opacity: 0.3;
|
||
display: inline-block;
|
||
}
|
||
|
||
/* ============================================================
|
||
* 标签 — 对齐 zibll line 7723
|
||
* ============================================================ */
|
||
.item-tags {
|
||
margin-top: 8px;
|
||
}
|
||
|
||
.item-tags .badge {
|
||
display: inline-block;
|
||
font-size: 11px;
|
||
padding: 2px 5px;
|
||
margin-right: 5px;
|
||
border-radius: 50px;
|
||
text-decoration: none;
|
||
transition: 0.15s;
|
||
}
|
||
|
||
.badge-price {
|
||
background: rgba(239, 68, 68, 0.1);
|
||
color: var(--color-error, #ef4444);
|
||
}
|
||
|
||
.badge-category {
|
||
background: var(--focus-shadow-color, rgba(253, 83, 161, 0.12));
|
||
color: var(--focus-color, #f04494);
|
||
}
|
||
|
||
.badge-category:hover {
|
||
background: var(--focus-shadow-color, rgba(253, 83, 161, 0.2));
|
||
color: var(--focus-color, #f04494);
|
||
text-decoration: none;
|
||
}
|
||
|
||
.badge-tag {
|
||
background: var(--muted-bg-color, #eee);
|
||
color: var(--muted-2-color, #999);
|
||
}
|
||
|
||
.badge-tag:hover {
|
||
background: var(--focus-shadow-color, rgba(253, 83, 161, 0.12));
|
||
color: var(--focus-color, #f04494);
|
||
text-decoration: none;
|
||
}
|
||
|
||
/* ============================================================
|
||
* 卡片模式 body — 对齐 zibll padding: 10px 整体
|
||
* ============================================================ */
|
||
.posts-item.card .item-body {
|
||
width: 100%;
|
||
margin: 10px 0 0;
|
||
padding: 0;
|
||
}
|
||
|
||
/* ============================================================
|
||
* 列表模式 clearfix — 对齐 zibll float 布局
|
||
* ============================================================ */
|
||
.posts-item:not(.card)::after {
|
||
content: "";
|
||
display: table;
|
||
clear: both;
|
||
}
|
||
|
||
/* ============================================================
|
||
* Mini 文章列表 — 对齐 zibll .posts-mini line 7903
|
||
* ============================================================ */
|
||
.posts-mini {
|
||
padding: 10px;
|
||
display: inline-flex;
|
||
width: 50%;
|
||
vertical-align: top;
|
||
font-size: 1rem;
|
||
}
|
||
|
||
.posts-mini .item-thumbnail {
|
||
width: 96px;
|
||
min-width: 96px;
|
||
height: 0;
|
||
padding-bottom: 70%;
|
||
float: none;
|
||
margin-right: 12px;
|
||
margin-top: 2px;
|
||
}
|
||
|
||
.posts-mini .item-heading {
|
||
font-size: 14px;
|
||
line-height: 1.5;
|
||
-webkit-line-clamp: 2;
|
||
max-height: 3em;
|
||
}
|
||
|
||
@media (max-width: 767px) {
|
||
.posts-mini {
|
||
width: 100%;
|
||
}
|
||
}
|
||
|
||
/* ============================================================
|
||
* AJAX 翻页 — 对齐 zibll
|
||
* ============================================================ */
|
||
.ajax-pagination {
|
||
text-align: center;
|
||
padding: 20px 0;
|
||
}
|
||
|
||
.ajax-pagination .ajax-next {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 5px 15px;
|
||
border-radius: 30px;
|
||
background: var(--muted-bg-color, #eee);
|
||
color: var(--muted-color, #777);
|
||
font-size: 14px;
|
||
cursor: pointer;
|
||
transition: 0.15s;
|
||
border: none;
|
||
text-decoration: none;
|
||
}
|
||
|
||
.ajax-pagination .ajax-next:hover {
|
||
background: var(--focus-shadow-color, rgba(253, 83, 161, 0.12));
|
||
color: var(--focus-color, #f04494);
|
||
text-decoration: none;
|
||
}
|
||
|
||
.ajax-pagination .ajax-next.is-loading {
|
||
pointer-events: none;
|
||
opacity: 0.7;
|
||
}
|
||
|
||
.ajax-pagination .ajax-nomore {
|
||
color: var(--muted-2-color, #999);
|
||
font-size: 13px;
|
||
}
|
||
|
||
/* ============================================================
|
||
* 骨架屏（AKSRT 保留，Zibll 无此特性）
|
||
* ============================================================ */
|
||
.skeleton-card {
|
||
background: var(--main-bg-color, #fff);
|
||
border-radius: var(--main-radius, 8px);
|
||
overflow: hidden;
|
||
box-shadow: 0 0 10px var(--main-shadow, rgba(116, 116, 116, 0.08));
|
||
}
|
||
|
||
.skeleton-card__thumb {
|
||
width: 100%;
|
||
padding-top: var(--posts-card-scale, 70%);
|
||
background: var(--muted-bg-color, #eee);
|
||
animation: skeleton-pulse 1.5s ease-in-out infinite;
|
||
}
|
||
|
||
.skeleton-card__body {
|
||
padding: 10px;
|
||
}
|
||
|
||
.skeleton-card__line {
|
||
height: 14px;
|
||
border-radius: 4px;
|
||
background: var(--muted-bg-color, #eee);
|
||
margin-bottom: 8px;
|
||
animation: skeleton-pulse 1.5s ease-in-out infinite;
|
||
}
|
||
|
||
.skeleton-card__line--short {
|
||
width: 60%;
|
||
}
|
||
|
||
.skeleton-card__line--meta {
|
||
width: 40%;
|
||
height: 12px;
|
||
margin-top: 12px;
|
||
}
|
||
|
||
@keyframes skeleton-pulse {
|
||
0%, 100% { opacity: 1; }
|
||
50% { opacity: 0.5; }
|
||
}
|
||
|
||
/* ============================================================
|
||
* 卡片样式变体 — 对齐 zibll main.css 7682–7900
|
||
* ============================================================ */
|
||
|
||
/* 卡片标签占位高度（无标签卡片不塌陷） */
|
||
.posts-item.card .item-tags {
|
||
min-height: 23px;
|
||
}
|
||
|
||
/* style2：透明底，hover 才出卡片底 + 阴影 */
|
||
.posts-item.card.style2 {
|
||
background: transparent;
|
||
box-shadow: none;
|
||
}
|
||
|
||
.posts-item.card.style2:hover {
|
||
background: var(--main-bg-color, #fff);
|
||
box-shadow: 0 0 10px var(--main-shadow, rgba(116, 116, 116, 0.08));
|
||
}
|
||
|
||
/* style3：padding 0，缩略图顶部圆角，body 内 padding 10px */
|
||
.posts-item.card.style3 {
|
||
padding: 0;
|
||
}
|
||
|
||
.posts-item.card.style3 .item-thumbnail,
|
||
.posts-item.card.style3 .item-thumbnail img {
|
||
border-radius: var(--main-radius, 8px) var(--main-radius, 8px) 0 0;
|
||
}
|
||
|
||
.posts-item.card.style3 .item-body {
|
||
padding: 10px;
|
||
margin: 0;
|
||
}
|
||
|
||
/* 窄缩略图列表变体 .list.style2：130px 缩略图 + 单行标题 ellipsis */
|
||
.posts-item.list.style2 .item-thumbnail {
|
||
width: 130px;
|
||
}
|
||
|
||
.posts-item.list.style2 .item-heading {
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
display: unset;
|
||
max-height: 1.4em;
|
||
}
|
||
|
||
/* 多图卡片 .mult-thumb：九宫格缩略图（每行 4 列） */
|
||
.posts-item.mult-thumb .thumb-items {
|
||
margin: 0 -3px 6px -3px;
|
||
}
|
||
|
||
.posts-item.mult-thumb .thumb-items > span {
|
||
width: calc(25% - 6px);
|
||
display: inline-block;
|
||
height: 0;
|
||
padding-bottom: calc(var(--posts-list-scale, 70%) / 4);
|
||
margin: 0 3px;
|
||
position: relative;
|
||
}
|
||
|
||
.posts-item.mult-thumb .thumb-items > span > img {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
}
|
||
|
||
.posts-item.mult-thumb .thumb-items.contain > span {
|
||
background: var(--main-border-color, rgba(50, 50, 50, 0.06));
|
||
border-radius: var(--main-radius, 8px);
|
||
overflow: hidden;
|
||
}
|
||
|
||
.posts-item.mult-thumb .thumb-items.contain > span > img {
|
||
object-fit: contain;
|
||
border-radius: 0;
|
||
}
|
||
|
||
/* 无间距连排 .no_margin：首尾圆角，中间无圆角无阴影 */
|
||
.posts-item.no_margin {
|
||
margin: 0;
|
||
box-shadow: none;
|
||
border-radius: 0;
|
||
}
|
||
|
||
.posts-item.no_margin:first-of-type {
|
||
margin-top: 10px;
|
||
border-radius: var(--main-radius, 8px) var(--main-radius, 8px) 0 0;
|
||
}
|
||
|
||
.posts-item.no_margin:last-of-type {
|
||
margin-bottom: 15px;
|
||
border-radius: 0 0 var(--main-radius, 8px) var(--main-radius, 8px);
|
||
}
|
||
|
||
.posts-item + .pagenav,
|
||
.posts-item + .aksrt-pagination,
|
||
.posts-item + .pagination,
|
||
.posts-item + .navigation.pagination {
|
||
margin-top: -15px;
|
||
}
|
||
|
||
.posts-item.card + .pagenav,
|
||
.posts-item.card + .aksrt-pagination,
|
||
.posts-item.card + .pagination,
|
||
.posts-item.card + .navigation.pagination {
|
||
margin-top: -10px;
|
||
}
|
||
|
||
/* mini 列表缩略图 hover 放大（对齐 zibll .posts-item:hover 缩略图） */
|
||
.posts-mini:hover .item-thumbnail img {
|
||
transform: scale(1.05);
|
||
}
|
||
|
||
/* 瀑布流 .waterfall-box：缩略图保持原始比例（配合瀑布流 JS 时启用） */
|
||
.waterfall-box {
|
||
position: relative;
|
||
}
|
||
|
||
.waterfall-box .card .item-thumbnail {
|
||
padding-bottom: 0;
|
||
height: auto;
|
||
}
|
||
|
||
.waterfall-box .card .item-thumbnail img {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
}
|
||
|
||
/* ============================================================
|
||
* 暗色模式 — 对齐 zibll
|
||
* ============================================================ */
|
||
.theme-dark .posts-item,
|
||
html.dark .posts-item {
|
||
background: var(--main-bg-color, #323335);
|
||
border-color: var(--main-border-color, rgba(114, 114, 114, 0.1));
|
||
}
|
||
|
||
/* ============================================================
|
||
* 无缩略图状态
|
||
* ============================================================ */
|
||
.posts-item.no-thumb {
|
||
overflow: visible;
|
||
}
|
||
|
||
.posts-item.no-thumb .item-body {
|
||
width: 100%;
|
||
}
|
||
|
||
.posts-item.has-no-thumb {
|
||
overflow: visible;
|
||
}
|
||
|
||
.posts-item.has-no-thumb .item-body {
|
||
width: 100%;
|
||
}
|