style(board-pagination): complete styling

This commit is contained in:
plebeius
2026-02-25 17:58:03 +08:00
parent 1dfc75998d
commit 2c31120a7d
2 changed files with 16 additions and 24 deletions
@@ -46,6 +46,8 @@
overflow: hidden; overflow: hidden;
list-style: none; list-style: none;
background-color: var(--pagelist-background-color); background-color: var(--pagelist-background-color);
border-right: 1px solid var(--pagelist-item-border-color);
border-bottom: 1px solid var(--pagelist-item-border-color);
} }
.footerPageItem { .footerPageItem {
@@ -97,7 +99,7 @@
background: transparent; background: transparent;
list-style: none; list-style: none;
overflow: hidden; overflow: hidden;
color: var(--boardsbar-desktop-link-text-color); color: var(--button-desktop-text-color);
} }
.footerPageLink { .footerPageLink {
@@ -108,15 +110,14 @@
padding: 0; padding: 0;
border: none; border: none;
background: transparent; background: transparent;
color: var(--boardsbar-desktop-link-text-color); color: var(--button-desktop-text-color);
text-transform: capitalize; text-transform: capitalize;
cursor: pointer; cursor: pointer;
text-decoration: var(--boardsbar-desktop-link-text-decoration); text-decoration: var(--button-text-decoration);
} }
.footerPageLink:hover { .footerPageLink:hover {
color: var(--boardsbar-desktop-link-text-color-hover); color: var(--button-desktop-text-color-hover);
text-decoration: var(--boardsbar-desktop-link-text-decoration-hover);
} }
.pagelistSeparatorLink { .pagelistSeparatorLink {
@@ -127,7 +128,6 @@
} }
.footerPageCurrent { .footerPageCurrent {
composes: footerPageLink;
font-weight: bold; font-weight: bold;
color: var(--boardsbar-desktop-link-text-color-hover);
text-decoration: var(--boardsbar-desktop-link-text-decoration);
} }
@@ -61,23 +61,15 @@ const BoardPagination = ({ basePath, currentPage, totalPages, footerStyle = fals
<span className={styles.footerPageBracket}>]</span> <span className={styles.footerPageBracket}>]</span>
</span> </span>
)} )}
{pageNumbers.map((page) => {pageNumbers.map((page) => (
page === currentPage ? ( <span key={page} className={styles.footerPageItem}>
<span key={page} className={styles.footerPageItem}> <span className={styles.footerPageBracket}>[</span>
<span className={styles.footerPageBracket}>[</span> <Link to={pageHref(page)} className={page === currentPage ? styles.footerPageCurrent : styles.footerPageLink}>
<span className={styles.footerPageCurrent}>{page}</span> {page}
<span className={styles.footerPageBracket}>]</span> </Link>
</span> <span className={styles.footerPageBracket}>]</span>
) : ( </span>
<span key={page} className={styles.footerPageItem}> ))}
<span className={styles.footerPageBracket}>[</span>
<Link to={pageHref(page)} className={styles.footerPageLink}>
{page}
</Link>
<span className={styles.footerPageBracket}>]</span>
</span>
),
)}
{currentPage < totalPages ? ( {currentPage < totalPages ? (
<button type='button' className={styles.pagelistNavButton} onClick={() => navigate(pageHref(currentPage + 1))}> <button type='button' className={styles.pagelistNavButton} onClick={() => navigate(pageHref(currentPage + 1))}>
{t('next')} {t('next')}