234 lines
5.0 KiB
CSS
234 lines
5.0 KiB
CSS
/* ========== 分页 — 对齐 legacy pagination ========== */
|
|
.pagination,
|
|
.aksrt-pagination,
|
|
.navigation.pagination .nav-links,
|
|
.pagenav.ajax-pag {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 6px;
|
|
padding: 24px 0;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.pagination a,
|
|
.pagination span,
|
|
.aksrt-pagination a,
|
|
.aksrt-pagination span,
|
|
.navigation.pagination a,
|
|
.navigation.pagination span,
|
|
.pagenav.ajax-pag a,
|
|
.pagenav.ajax-pag span {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-width: 34px;
|
|
min-height: 34px;
|
|
padding: 6px 10px;
|
|
font-size: 13px;
|
|
line-height: 1.4;
|
|
color: var(--muted-color, var(--color-ink-3));
|
|
background: var(--surface-4, var(--main-border-color, rgba(50, 50, 50, 0.06)));
|
|
border: 1px solid transparent;
|
|
border-radius: var(--radius-xs, 3px);
|
|
text-decoration: none;
|
|
transition: all 0.2s;
|
|
user-select: none;
|
|
}
|
|
|
|
.pagination a:hover,
|
|
.aksrt-pagination a:hover,
|
|
.navigation.pagination a:hover,
|
|
.pagenav.ajax-pag a:hover {
|
|
opacity: 1;
|
|
color: var(--color-primary);
|
|
background: var(--color-primary-soft);
|
|
}
|
|
|
|
.pagination .current,
|
|
.aksrt-pagination .current,
|
|
.navigation.pagination .current,
|
|
.pagenav.ajax-pag .current {
|
|
color: var(--color-on-primary, #fff);
|
|
background: var(--color-primary, #f04494);
|
|
border-color: var(--color-primary, #f04494);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.pagination .dots,
|
|
.aksrt-pagination .dots,
|
|
.navigation.pagination .dots,
|
|
.pagenav.ajax-pag .dots {
|
|
border: none;
|
|
background: none;
|
|
color: var(--color-ink-4, #999);
|
|
cursor: default;
|
|
min-width: auto;
|
|
padding-left: 4px;
|
|
padding-right: 4px;
|
|
}
|
|
|
|
.pagination .prev,
|
|
.pagination .next,
|
|
.aksrt-pagination .prev,
|
|
.aksrt-pagination .next,
|
|
.navigation.pagination .prev,
|
|
.navigation.pagination .next,
|
|
.pagenav.ajax-pag .prev,
|
|
.pagenav.ajax-pag .next {
|
|
font-size: 12px;
|
|
}
|
|
|
|
.pagination .prev i,
|
|
.pagination .next i,
|
|
.aksrt-pagination .prev i,
|
|
.aksrt-pagination .next i,
|
|
.navigation.pagination .prev i,
|
|
.navigation.pagination .next i,
|
|
.pagenav.ajax-pag .prev i,
|
|
.pagenav.ajax-pag .next i {
|
|
font-size: 11px;
|
|
}
|
|
|
|
.pagenav.ajax-pag .pag-jump,
|
|
.aksrt-pagination .pag-jump,
|
|
.navigation.pagination .pag-jump {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
margin-left: 6px;
|
|
}
|
|
|
|
.pagenav.ajax-pag .jump-input,
|
|
.aksrt-pagination .jump-input,
|
|
.navigation.pagination .jump-input {
|
|
width: 64px;
|
|
min-width: 64px;
|
|
padding: 6px 8px 5px;
|
|
font-size: 13px;
|
|
line-height: 1.4;
|
|
color: var(--muted-color, var(--color-ink-3));
|
|
background: var(--main-bg-color, #fff);
|
|
border: 1px solid var(--main-border-color, rgba(50, 50, 50, 0.06));
|
|
border-radius: 3px;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.pagenav.ajax-pag .jump-input:focus,
|
|
.aksrt-pagination .jump-input:focus,
|
|
.navigation.pagination .jump-input:focus {
|
|
outline: none;
|
|
border-color: var(--focus-color, var(--color-primary, #f04494));
|
|
}
|
|
|
|
.pagenav.ajax-pag .pag-jump .ajax-next,
|
|
.aksrt-pagination .pag-jump .ajax-next,
|
|
.navigation.pagination .pag-jump .ajax-next {
|
|
min-width: auto;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* 上一页/下一页 */
|
|
.pagination__nav {
|
|
display: flex;
|
|
gap: 8px;
|
|
justify-content: center;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.pagination__nav a {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
padding: 6px 14px;
|
|
font-size: 13px;
|
|
color: var(--color-ink-2, #4e5358);
|
|
background: var(--surface-1, #fff);
|
|
border: 1px solid var(--color-line, rgba(50, 50, 50, 0.06));
|
|
border-radius: 6px;
|
|
text-decoration: none;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.pagination__nav a:hover {
|
|
color: var(--color-primary, #f04494);
|
|
border-color: var(--color-primary, #f04494);
|
|
}
|
|
|
|
/* AJAX 加载更多 */
|
|
.load-more {
|
|
text-align: center;
|
|
padding: 20px 0;
|
|
}
|
|
|
|
.load-more__btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 10px 24px;
|
|
font-size: 13px;
|
|
color: var(--color-ink-2, #4e5358);
|
|
background: var(--surface-1, #fff);
|
|
border: 1px solid var(--color-line, rgba(50, 50, 50, 0.06));
|
|
border-radius: 20px;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.load-more__btn:hover {
|
|
color: var(--color-primary, #f04494);
|
|
border-color: var(--color-primary, #f04494);
|
|
}
|
|
|
|
.load-more__btn:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.load-more__spinner {
|
|
display: inline-block;
|
|
width: 16px;
|
|
height: 16px;
|
|
border: 2px solid var(--surface-3, #e8e8e8);
|
|
border-top-color: var(--color-primary, #f04494);
|
|
border-radius: 50%;
|
|
animation: spin 0.6s linear infinite;
|
|
}
|
|
|
|
@keyframes spin {
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
/* 移动端 */
|
|
@media (max-width: 767px) {
|
|
.pagination a,
|
|
.pagination span,
|
|
.aksrt-pagination a,
|
|
.aksrt-pagination span,
|
|
.navigation.pagination a,
|
|
.navigation.pagination span,
|
|
.pagenav.ajax-pag a,
|
|
.pagenav.ajax-pag span {
|
|
min-width: 28px;
|
|
font-size: 12px;
|
|
margin: 2px;
|
|
}
|
|
|
|
.pagenav.ajax-pag .pag-jump,
|
|
.aksrt-pagination .pag-jump,
|
|
.navigation.pagination .pag-jump {
|
|
width: 100%;
|
|
justify-content: center;
|
|
margin-left: 0;
|
|
margin-top: 6px;
|
|
}
|
|
|
|
.pagenav.ajax-pag .jump-input,
|
|
.aksrt-pagination .jump-input,
|
|
.navigation.pagination .jump-input {
|
|
width: 58px;
|
|
min-width: 58px;
|
|
font-size: 12px;
|
|
}
|
|
}
|