I’ll build this as a strong, reusable pagination.css for RX Theme: variables-first, responsive, accessible, RTL-ready, dark-mode-ready, WordPress pagination compatible, and safe for future expansion.
Yes friend — place this full advanced CSS in:
assets/static/static-css/components/pagination.css
/*!
Theme Name: RX Theme
File: assets/static/static-css/components/pagination.css
Component: Pagination
Description: Advanced, responsive, accessible pagination styles for posts, archives, search, comments, WooCommerce-like loops, and custom RX Theme components.
Author: RX Theme
Version: 1.0.0
*/
/* ==========================================================================
RX THEME PAGINATION COMPONENT
========================================================================== */
/**
* Supports:
* - WordPress default pagination
* - the_posts_pagination()
* - paginate_links()
* - post navigation
* - comment pagination
* - numeric pagination
* - simple previous / next pagination
* - load more button style
* - AJAX pagination states
* - dark mode
* - RTL
* - reduced motion
* - high contrast mode
*/
/* ==========================================================================
1. ROOT TOKENS / CSS VARIABLES
========================================================================== */
:root {
/* Main color tokens */
--rx-pagination-color: var(--rx-color-text, #1f2937);
--rx-pagination-color-muted: var(--rx-color-muted, #6b7280);
--rx-pagination-color-soft: var(--rx-color-soft, #9ca3af);
--rx-pagination-bg: var(--rx-color-surface, #ffffff);
--rx-pagination-bg-soft: var(--rx-color-surface-soft, #f9fafb);
--rx-pagination-bg-muted: var(--rx-color-surface-muted, #f3f4f6);
--rx-pagination-primary: var(--rx-color-primary, #2563eb);
--rx-pagination-primary-hover: var(--rx-color-primary-hover, #1d4ed8);
--rx-pagination-primary-active: var(--rx-color-primary-active, #1e40af);
--rx-pagination-primary-text: var(--rx-color-on-primary, #ffffff);
--rx-pagination-border: var(--rx-color-border, #e5e7eb);
--rx-pagination-border-hover: var(--rx-color-border-hover, #cbd5e1);
--rx-pagination-border-active: var(--rx-pagination-primary, #2563eb);
--rx-pagination-danger: var(--rx-color-danger, #dc2626);
--rx-pagination-success: var(--rx-color-success, #16a34a);
/* Layout */
--rx-pagination-gap: 0.45rem;
--rx-pagination-gap-sm: 0.3rem;
--rx-pagination-gap-lg: 0.75rem;
--rx-pagination-margin-block: 2.5rem;
--rx-pagination-margin-inline: auto;
--rx-pagination-padding-y: 0.625rem;
--rx-pagination-padding-x: 0.9rem;
--rx-pagination-padding-y-sm: 0.45rem;
--rx-pagination-padding-x-sm: 0.7rem;
--rx-pagination-padding-y-lg: 0.75rem;
--rx-pagination-padding-x-lg: 1.1rem;
--rx-pagination-min-size: 2.5rem;
--rx-pagination-min-size-sm: 2.125rem;
--rx-pagination-min-size-lg: 3rem;
--rx-pagination-radius: var(--rx-radius-md, 0.625rem);
--rx-pagination-radius-sm: var(--rx-radius-sm, 0.375rem);
--rx-pagination-radius-lg: var(--rx-radius-lg, 0.875rem);
--rx-pagination-radius-pill: 999px;
/* Typography */
--rx-pagination-font-family: var(--rx-font-body, inherit);
--rx-pagination-font-size: 0.95rem;
--rx-pagination-font-size-sm: 0.875rem;
--rx-pagination-font-size-lg: 1rem;
--rx-pagination-font-weight: 600;
--rx-pagination-line-height: 1.2;
--rx-pagination-letter-spacing: 0.01em;
/* Effects */
--rx-pagination-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
--rx-pagination-shadow-hover: 0 8px 20px rgba(15, 23, 42, 0.1);
--rx-pagination-shadow-active: 0 8px 22px rgba(37, 99, 235, 0.22);
--rx-pagination-transition:
color 180ms ease,
background-color 180ms ease,
border-color 180ms ease,
box-shadow 180ms ease,
transform 180ms ease;
/* Focus */
--rx-pagination-focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.25);
--rx-pagination-focus-outline: 2px solid transparent;
--rx-pagination-focus-offset: 2px;
/* Disabled */
--rx-pagination-disabled-opacity: 0.48;
--rx-pagination-disabled-cursor: not-allowed;
/* Z-index */
--rx-pagination-z-index: 1;
}
/* ==========================================================================
2. DARK MODE TOKENS
========================================================================== */
@media (prefers-color-scheme: dark) {
:root {
--rx-pagination-color: var(--rx-color-text, #e5e7eb);
--rx-pagination-color-muted: var(--rx-color-muted, #9ca3af);
--rx-pagination-color-soft: var(--rx-color-soft, #6b7280);
--rx-pagination-bg: var(--rx-color-surface, #111827);
--rx-pagination-bg-soft: var(--rx-color-surface-soft, #1f2937);
--rx-pagination-bg-muted: var(--rx-color-surface-muted, #374151);
--rx-pagination-border: var(--rx-color-border, #374151);
--rx-pagination-border-hover: var(--rx-color-border-hover, #4b5563);
--rx-pagination-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
--rx-pagination-shadow-hover: 0 8px 20px rgba(0, 0, 0, 0.35);
}
}
[data-theme="dark"],
.rx-theme-dark,
.dark-mode {
--rx-pagination-color: var(--rx-color-text, #e5e7eb);
--rx-pagination-color-muted: var(--rx-color-muted, #9ca3af);
--rx-pagination-color-soft: var(--rx-color-soft, #6b7280);
--rx-pagination-bg: var(--rx-color-surface, #111827);
--rx-pagination-bg-soft: var(--rx-color-surface-soft, #1f2937);
--rx-pagination-bg-muted: var(--rx-color-surface-muted, #374151);
--rx-pagination-border: var(--rx-color-border, #374151);
--rx-pagination-border-hover: var(--rx-color-border-hover, #4b5563);
--rx-pagination-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
--rx-pagination-shadow-hover: 0 8px 20px rgba(0, 0, 0, 0.35);
}
/* ==========================================================================
3. BASE PAGINATION WRAPPERS
========================================================================== */
.pagination,
.navigation.pagination,
.posts-navigation,
.post-navigation,
.comment-navigation,
.comments-pagination,
.wp-pagenavi,
.rx-pagination,
.rx-posts-pagination,
.rx-archive-pagination,
.rx-search-pagination,
.rx-comments-pagination,
.rx-product-pagination {
width: 100%;
margin-block: var(--rx-pagination-margin-block);
margin-inline: var(--rx-pagination-margin-inline);
font-family: var(--rx-pagination-font-family);
font-size: var(--rx-pagination-font-size);
line-height: var(--rx-pagination-line-height);
color: var(--rx-pagination-color);
position: relative;
z-index: var(--rx-pagination-z-index);
}
/* Hide empty pagination safely */
.pagination:empty,
.navigation.pagination:empty,
.posts-navigation:empty,
.post-navigation:empty,
.comment-navigation:empty,
.comments-pagination:empty,
.wp-pagenavi:empty,
.rx-pagination:empty {
display: none;
}
/* ==========================================================================
4. SCREEN READER TEXT
========================================================================== */
.pagination .screen-reader-text,
.navigation.pagination .screen-reader-text,
.posts-navigation .screen-reader-text,
.post-navigation .screen-reader-text,
.comment-navigation .screen-reader-text,
.rx-pagination .screen-reader-text {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* ==========================================================================
5. WORDPRESS DEFAULT: .nav-links
========================================================================== */
.pagination .nav-links,
.navigation.pagination .nav-links,
.comments-pagination .nav-links,
.rx-pagination .nav-links,
.rx-posts-pagination .nav-links,
.rx-archive-pagination .nav-links,
.rx-search-pagination .nav-links,
.rx-comments-pagination .nav-links {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: var(--rx-pagination-gap);
width: 100%;
}
/* ==========================================================================
6. PAGINATION ITEMS: LINKS, SPANS, BUTTONS
========================================================================== */
.pagination .page-numbers,
.navigation.pagination .page-numbers,
.comments-pagination .page-numbers,
.wp-pagenavi a,
.wp-pagenavi span,
.rx-pagination a,
.rx-pagination span,
.rx-pagination button,
.rx-pagination .rx-page-link,
.rx-pagination .rx-page-number,
.rx-pagination .rx-pagination-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: var(--rx-pagination-min-size);
min-height: var(--rx-pagination-min-size);
padding: var(--rx-pagination-padding-y) var(--rx-pagination-padding-x);
border: 1px solid var(--rx-pagination-border);
border-radius: var(--rx-pagination-radius);
background-color: var(--rx-pagination-bg);
color: var(--rx-pagination-color);
font-size: var(--rx-pagination-font-size);
font-weight: var(--rx-pagination-font-weight);
line-height: var(--rx-pagination-line-height);
letter-spacing: var(--rx-pagination-letter-spacing);
text-decoration: none;
text-align: center;
box-shadow: var(--rx-pagination-shadow);
cursor: pointer;
user-select: none;
vertical-align: middle;
transition: var(--rx-pagination-transition);
-webkit-tap-highlight-color: transparent;
}
/* Better number alignment */
.pagination .page-numbers:not(.prev):not(.next),
.navigation.pagination .page-numbers:not(.prev):not(.next),
.comments-pagination .page-numbers:not(.prev):not(.next),
.rx-pagination .rx-page-number {
font-variant-numeric: tabular-nums;
}
/* ==========================================================================
7. HOVER STATES
========================================================================== */
.pagination a.page-numbers:hover,
.navigation.pagination a.page-numbers:hover,
.comments-pagination a.page-numbers:hover,
.wp-pagenavi a:hover,
.rx-pagination a:hover,
.rx-pagination button:hover,
.rx-pagination .rx-page-link:hover,
.rx-pagination .rx-pagination-button:hover {
color: var(--rx-pagination-primary);
border-color: var(--rx-pagination-border-hover);
background-color: var(--rx-pagination-bg-soft);
box-shadow: var(--rx-pagination-shadow-hover);
transform: translateY(-1px);
}
/* ==========================================================================
8. ACTIVE / CURRENT PAGE
========================================================================== */
.pagination .page-numbers.current,
.navigation.pagination .page-numbers.current,
.comments-pagination .page-numbers.current,
.wp-pagenavi span.current,
.rx-pagination .current,
.rx-pagination .active,
.rx-pagination [aria-current="page"],
.rx-pagination .rx-page-number.is-active,
.rx-pagination .rx-page-link.is-active {
color: var(--rx-pagination-primary-text);
border-color: var(--rx-pagination-border-active);
background-color: var(--rx-pagination-primary);
box-shadow: var(--rx-pagination-shadow-active);
cursor: default;
pointer-events: none;
}
/* Current page when anchor has aria-current */
.pagination a[aria-current="page"],
.navigation.pagination a[aria-current="page"],
.comments-pagination a[aria-current="page"] {
color: var(--rx-pagination-primary-text);
border-color: var(--rx-pagination-border-active);
background-color: var(--rx-pagination-primary);
box-shadow: var(--rx-pagination-shadow-active);
pointer-events: none;
}
/* ==========================================================================
9. FOCUS STATES
========================================================================== */
.pagination a.page-numbers:focus,
.pagination a.page-numbers:focus-visible,
.navigation.pagination a.page-numbers:focus,
.navigation.pagination a.page-numbers:focus-visible,
.comments-pagination a.page-numbers:focus,
.comments-pagination a.page-numbers:focus-visible,
.wp-pagenavi a:focus,
.wp-pagenavi a:focus-visible,
.rx-pagination a:focus,
.rx-pagination a:focus-visible,
.rx-pagination button:focus,
.rx-pagination button:focus-visible,
.rx-pagination .rx-page-link:focus,
.rx-pagination .rx-page-link:focus-visible,
.rx-pagination .rx-pagination-button:focus,
.rx-pagination .rx-pagination-button:focus-visible {
outline: var(--rx-pagination-focus-outline);
outline-offset: var(--rx-pagination-focus-offset);
box-shadow: var(--rx-pagination-shadow-hover), var(--rx-pagination-focus-ring);
}
/* Avoid double focus for mouse users */
.pagination a.page-numbers:focus:not(:focus-visible),
.navigation.pagination a.page-numbers:focus:not(:focus-visible),
.comments-pagination a.page-numbers:focus:not(:focus-visible),
.wp-pagenavi a:focus:not(:focus-visible),
.rx-pagination a:focus:not(:focus-visible),
.rx-pagination button:focus:not(:focus-visible) {
box-shadow: var(--rx-pagination-shadow);
}
/* ==========================================================================
10. PREVIOUS / NEXT LINKS
========================================================================== */
.pagination .page-numbers.prev,
.pagination .page-numbers.next,
.navigation.pagination .page-numbers.prev,
.navigation.pagination .page-numbers.next,
.comments-pagination .page-numbers.prev,
.comments-pagination .page-numbers.next,
.rx-pagination .prev,
.rx-pagination .next,
.rx-pagination .rx-prev,
.rx-pagination .rx-next,
.rx-pagination .rx-pagination-prev,
.rx-pagination .rx-pagination-next {
gap: 0.4rem;
padding-inline: 1rem;
white-space: nowrap;
}
/* Optional icon support */
.rx-pagination .rx-prev-icon,
.rx-pagination .rx-next-icon,
.pagination .prev svg,
.pagination .next svg,
.navigation.pagination .prev svg,
.navigation.pagination .next svg {
width: 1em;
height: 1em;
flex: 0 0 auto;
fill: currentColor;
stroke: currentColor;
}
/* ==========================================================================
11. DOTS / ELLIPSIS
========================================================================== */
.pagination .page-numbers.dots,
.navigation.pagination .page-numbers.dots,
.comments-pagination .page-numbers.dots,
.wp-pagenavi span.extend,
.rx-pagination .dots,
.rx-pagination .rx-pagination-dots {
color: var(--rx-pagination-color-muted);
background: transparent;
border-color: transparent;
box-shadow: none;
cursor: default;
pointer-events: none;
min-width: auto;
padding-inline: 0.35rem;
}
/* ==========================================================================
12. DISABLED STATES
========================================================================== */
.pagination .disabled,
.navigation.pagination .disabled,
.comments-pagination .disabled,
.rx-pagination .disabled,
.rx-pagination .is-disabled,
.rx-pagination [aria-disabled="true"],
.rx-pagination button:disabled,
.rx-pagination .rx-pagination-button:disabled {
opacity: var(--rx-pagination-disabled-opacity);
cursor: var(--rx-pagination-disabled-cursor);
pointer-events: none;
box-shadow: none;
}
/* ==========================================================================
13. SIMPLE POSTS NAVIGATION
========================================================================== */
.posts-navigation .nav-links,
.post-navigation .nav-links,
.comment-navigation .nav-links,
.rx-simple-pagination,
.rx-post-navigation {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--rx-pagination-gap-lg);
width: 100%;
}
.posts-navigation .nav-previous,
.post-navigation .nav-previous,
.comment-navigation .nav-previous,
.rx-post-navigation .nav-previous {
justify-self: start;
min-width: 0;
}
.posts-navigation .nav-next,
.post-navigation .nav-next,
.comment-navigation .nav-next,
.rx-post-navigation .nav-next {
justify-self: end;
min-width: 0;
text-align: end;
}
.posts-navigation .nav-previous a,
.posts-navigation .nav-next a,
.post-navigation .nav-previous a,
.post-navigation .nav-next a,
.comment-navigation .nav-previous a,
.comment-navigation .nav-next a,
.rx-post-navigation a,
.rx-simple-pagination a {
display: inline-flex;
align-items: center;
gap: 0.5rem;
max-width: 100%;
padding: 0.85rem 1rem;
border: 1px solid var(--rx-pagination-border);
border-radius: var(--rx-pagination-radius-lg);
background-color: var(--rx-pagination-bg);
color: var(--rx-pagination-color);
font-weight: var(--rx-pagination-font-weight);
text-decoration: none;
box-shadow: var(--rx-pagination-shadow);
transition: var(--rx-pagination-transition);
}
.posts-navigation .nav-previous a:hover,
.posts-navigation .nav-next a:hover,
.post-navigation .nav-previous a:hover,
.post-navigation .nav-next a:hover,
.comment-navigation .nav-previous a:hover,
.comment-navigation .nav-next a:hover,
.rx-post-navigation a:hover,
.rx-simple-pagination a:hover {
color: var(--rx-pagination-primary);
border-color: var(--rx-pagination-border-hover);
background-color: var(--rx-pagination-bg-soft);
box-shadow: var(--rx-pagination-shadow-hover);
transform: translateY(-1px);
}
/* ==========================================================================
14. POST NAVIGATION TITLE STYLE
========================================================================== */
.post-navigation .nav-subtitle,
.rx-post-navigation .nav-subtitle {
display: block;
margin-bottom: 0.25rem;
color: var(--rx-pagination-color-muted);
font-size: 0.8rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.post-navigation .nav-title,
.rx-post-navigation .nav-title {
display: block;
color: inherit;
font-size: 0.95rem;
font-weight: 700;
line-height: 1.35;
overflow-wrap: anywhere;
}
/* ==========================================================================
15. LOAD MORE PAGINATION
========================================================================== */
.rx-load-more-wrap,
.rx-pagination-load-more {
display: flex;
justify-content: center;
margin-block: var(--rx-pagination-margin-block);
}
.rx-load-more-button,
.rx-pagination-load-more button,
.rx-pagination .rx-load-more {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.55rem;
min-height: 2.875rem;
padding: 0.8rem 1.35rem;
border: 1px solid var(--rx-pagination-primary);
border-radius: var(--rx-pagination-radius-pill);
background-color: var(--rx-pagination-primary);
color: var(--rx-pagination-primary-text);
font-size: var(--rx-pagination-font-size);
font-weight: 700;
line-height: 1;
text-decoration: none;
cursor: pointer;
box-shadow: var(--rx-pagination-shadow-active);
transition: var(--rx-pagination-transition);
}
.rx-load-more-button:hover,
.rx-pagination-load-more button:hover,
.rx-pagination .rx-load-more:hover {
border-color: var(--rx-pagination-primary-hover);
background-color: var(--rx-pagination-primary-hover);
transform: translateY(-1px);
box-shadow: 0 10px 24px rgba(37, 99, 235, 0.28);
}
.rx-load-more-button:active,
.rx-pagination-load-more button:active,
.rx-pagination .rx-load-more:active {
border-color: var(--rx-pagination-primary-active);
background-color: var(--rx-pagination-primary-active);
transform: translateY(0);
}
/* Loading state */
.rx-load-more-button.is-loading,
.rx-pagination-load-more button.is-loading,
.rx-pagination .rx-load-more.is-loading,
.rx-pagination.is-loading .rx-load-more {
position: relative;
pointer-events: none;
opacity: 0.8;
}
.rx-load-more-button.is-loading::after,
.rx-pagination-load-more button.is-loading::after,
.rx-pagination .rx-load-more.is-loading::after,
.rx-pagination.is-loading .rx-load-more::after {
content: "";
width: 1em;
height: 1em;
border: 2px solid currentColor;
border-right-color: transparent;
border-radius: 50%;
animation: rx-pagination-spin 700ms linear infinite;
}
/* ==========================================================================
16. AJAX / INFINITE PAGINATION STATES
========================================================================== */
.rx-pagination.is-loading,
.rx-posts-pagination.is-loading,
.rx-archive-pagination.is-loading,
.rx-search-pagination.is-loading {
opacity: 0.75;
pointer-events: none;
}
.rx-pagination-status,
.rx-pagination-message,
.rx-pagination-error,
.rx-pagination-success {
width: 100%;
margin-block-start: 1rem;
text-align: center;
font-size: 0.925rem;
}
.rx-pagination-status,
.rx-pagination-message {
color: var(--rx-pagination-color-muted);
}
.rx-pagination-error {
color: var(--rx-pagination-danger);
}
.rx-pagination-success {
color: var(--rx-pagination-success);
}
/* ==========================================================================
17. COMPACT PAGINATION
========================================================================== */
.rx-pagination--compact .nav-links,
.rx-pagination.compact .nav-links,
.rx-compact-pagination .nav-links {
gap: var(--rx-pagination-gap-sm);
}
.rx-pagination--compact .page-numbers,
.rx-pagination.compact .page-numbers,
.rx-compact-pagination .page-numbers,
.rx-pagination--compact a,
.rx-pagination--compact span,
.rx-pagination--compact button {
min-width: var(--rx-pagination-min-size-sm);
min-height: var(--rx-pagination-min-size-sm);
padding: var(--rx-pagination-padding-y-sm) var(--rx-pagination-padding-x-sm);
border-radius: var(--rx-pagination-radius-sm);
font-size: var(--rx-pagination-font-size-sm);
}
/* ==========================================================================
18. LARGE PAGINATION
========================================================================== */
.rx-pagination--large .page-numbers,
.rx-pagination.large .page-numbers,
.rx-large-pagination .page-numbers,
.rx-pagination--large a,
.rx-pagination--large span,
.rx-pagination--large button {
min-width: var(--rx-pagination-min-size-lg);
min-height: var(--rx-pagination-min-size-lg);
padding: var(--rx-pagination-padding-y-lg) var(--rx-pagination-padding-x-lg);
border-radius: var(--rx-pagination-radius-lg);
font-size: var(--rx-pagination-font-size-lg);
}
/* ==========================================================================
19. PILL PAGINATION
========================================================================== */
.rx-pagination--pill .page-numbers,
.rx-pagination.pill .page-numbers,
.rx-pill-pagination .page-numbers,
.rx-pagination--pill a,
.rx-pagination--pill span,
.rx-pagination--pill button {
border-radius: var(--rx-pagination-radius-pill);
}
/* ==========================================================================
20. OUTLINED PAGINATION
========================================================================== */
.rx-pagination--outline .page-numbers,
.rx-pagination.outline .page-numbers,
.rx-outline-pagination .page-numbers {
background-color: transparent;
box-shadow: none;
}
.rx-pagination--outline .page-numbers:hover,
.rx-pagination.outline .page-numbers:hover,
.rx-outline-pagination .page-numbers:hover {
background-color: var(--rx-pagination-bg-soft);
}
/* ==========================================================================
21. FILLED SOFT PAGINATION
========================================================================== */
.rx-pagination--soft .page-numbers,
.rx-pagination.soft .page-numbers,
.rx-soft-pagination .page-numbers {
background-color: var(--rx-pagination-bg-soft);
border-color: transparent;
box-shadow: none;
}
.rx-pagination--soft .page-numbers:hover,
.rx-pagination.soft .page-numbers:hover,
.rx-soft-pagination .page-numbers:hover {
border-color: var(--rx-pagination-border-hover);
background-color: var(--rx-pagination-bg-muted);
}
/* ==========================================================================
22. MINIMAL PAGINATION
========================================================================== */
.rx-pagination--minimal .page-numbers,
.rx-pagination.minimal .page-numbers,
.rx-minimal-pagination .page-numbers {
min-width: auto;
min-height: auto;
padding: 0.35rem 0.55rem;
border-color: transparent;
background: transparent;
box-shadow: none;
}
.rx-pagination--minimal .page-numbers:hover,
.rx-pagination.minimal .page-numbers:hover,
.rx-minimal-pagination .page-numbers:hover {
color: var(--rx-pagination-primary);
background-color: transparent;
box-shadow: none;
transform: none;
}
.rx-pagination--minimal .page-numbers.current,
.rx-pagination.minimal .page-numbers.current,
.rx-minimal-pagination .page-numbers.current {
color: var(--rx-pagination-primary);
background: transparent;
border-color: transparent;
box-shadow: none;
}
/* ==========================================================================
23. CENTER / LEFT / RIGHT ALIGNMENT HELPERS
========================================================================== */
.rx-pagination--center .nav-links,
.rx-pagination.center .nav-links,
.rx-pagination-center .nav-links {
justify-content: center;
}
.rx-pagination--left .nav-links,
.rx-pagination.left .nav-links,
.rx-pagination-left .nav-links {
justify-content: flex-start;
}
.rx-pagination--right .nav-links,
.rx-pagination.right .nav-links,
.rx-pagination-right .nav-links {
justify-content: flex-end;
}
/* ==========================================================================
24. MOBILE PAGINATION BEHAVIOR
========================================================================== */
@media (max-width: 767px) {
.pagination,
.navigation.pagination,
.posts-navigation,
.post-navigation,
.comment-navigation,
.comments-pagination,
.wp-pagenavi,
.rx-pagination {
margin-block: 2rem;
font-size: var(--rx-pagination-font-size-sm);
}
.pagination .nav-links,
.navigation.pagination .nav-links,
.comments-pagination .nav-links,
.rx-pagination .nav-links {
gap: var(--rx-pagination-gap-sm);
}
.pagination .page-numbers,
.navigation.pagination .page-numbers,
.comments-pagination .page-numbers,
.wp-pagenavi a,
.wp-pagenavi span,
.rx-pagination a,
.rx-pagination span,
.rx-pagination button {
min-width: var(--rx-pagination-min-size-sm);
min-height: var(--rx-pagination-min-size-sm);
padding: var(--rx-pagination-padding-y-sm) var(--rx-pagination-padding-x-sm);
font-size: var(--rx-pagination-font-size-sm);
}
.pagination .page-numbers.prev,
.pagination .page-numbers.next,
.navigation.pagination .page-numbers.prev,
.navigation.pagination .page-numbers.next,
.comments-pagination .page-numbers.prev,
.comments-pagination .page-numbers.next {
padding-inline: 0.75rem;
}
.posts-navigation .nav-links,
.post-navigation .nav-links,
.comment-navigation .nav-links,
.rx-simple-pagination,
.rx-post-navigation {
grid-template-columns: 1fr;
}
.posts-navigation .nav-previous,
.posts-navigation .nav-next,
.post-navigation .nav-previous,
.post-navigation .nav-next,
.comment-navigation .nav-previous,
.comment-navigation .nav-next,
.rx-post-navigation .nav-previous,
.rx-post-navigation .nav-next {
justify-self: stretch;
text-align: start;
}
.posts-navigation .nav-previous a,
.posts-navigation .nav-next a,
.post-navigation .nav-previous a,
.post-navigation .nav-next a,
.comment-navigation .nav-previous a,
.comment-navigation .nav-next a,
.rx-post-navigation a {
width: 100%;
justify-content: center;
}
}
/* ==========================================================================
25. VERY SMALL MOBILE
========================================================================== */
@media (max-width: 420px) {
.pagination .page-numbers:not(.prev):not(.next):not(.current):not(.dots),
.navigation.pagination .page-numbers:not(.prev):not(.next):not(.current):not(.dots),
.comments-pagination .page-numbers:not(.prev):not(.next):not(.current):not(.dots) {
display: none;
}
.rx-pagination.rx-show-all-mobile .page-numbers,
.rx-pagination.show-all-mobile .page-numbers {
display: inline-flex !important;
}
.pagination .page-numbers.current,
.navigation.pagination .page-numbers.current,
.comments-pagination .page-numbers.current {
display: inline-flex;
}
.pagination .page-numbers.prev,
.pagination .page-numbers.next,
.navigation.pagination .page-numbers.prev,
.navigation.pagination .page-numbers.next,
.comments-pagination .page-numbers.prev,
.comments-pagination .page-numbers.next {
flex: 1 1 auto;
max-width: 45%;
}
}
/* ==========================================================================
26. RTL SUPPORT
========================================================================== */
[dir="rtl"] .posts-navigation .nav-next,
[dir="rtl"] .post-navigation .nav-next,
[dir="rtl"] .comment-navigation .nav-next,
.rtl .posts-navigation .nav-next,
.rtl .post-navigation .nav-next,
.rtl .comment-navigation .nav-next {
text-align: start;
}
[dir="rtl"] .posts-navigation .nav-previous,
[dir="rtl"] .post-navigation .nav-previous,
[dir="rtl"] .comment-navigation .nav-previous,
.rtl .posts-navigation .nav-previous,
.rtl .post-navigation .nav-previous,
.rtl .comment-navigation .nav-previous {
text-align: end;
}
[dir="rtl"] .pagination .prev svg,
[dir="rtl"] .pagination .next svg,
.rtl .pagination .prev svg,
.rtl .pagination .next svg,
[dir="rtl"] .rx-pagination .rx-prev-icon,
[dir="rtl"] .rx-pagination .rx-next-icon,
.rtl .rx-pagination .rx-prev-icon,
.rtl .rx-pagination .rx-next-icon {
transform: scaleX(-1);
}
/* ==========================================================================
27. REDUCED MOTION
========================================================================== */
@media (prefers-reduced-motion: reduce) {
.pagination .page-numbers,
.navigation.pagination .page-numbers,
.comments-pagination .page-numbers,
.wp-pagenavi a,
.wp-pagenavi span,
.rx-pagination a,
.rx-pagination span,
.rx-pagination button,
.posts-navigation a,
.post-navigation a,
.comment-navigation a,
.rx-load-more-button {
transition: none;
animation: none;
}
.pagination a.page-numbers:hover,
.navigation.pagination a.page-numbers:hover,
.comments-pagination a.page-numbers:hover,
.wp-pagenavi a:hover,
.rx-pagination a:hover,
.rx-pagination button:hover,
.posts-navigation a:hover,
.post-navigation a:hover,
.comment-navigation a:hover,
.rx-load-more-button:hover {
transform: none;
}
.rx-load-more-button.is-loading::after,
.rx-pagination-load-more button.is-loading::after,
.rx-pagination .rx-load-more.is-loading::after {
animation: none;
}
}
/* ==========================================================================
28. HIGH CONTRAST / FORCED COLORS
========================================================================== */
@media (forced-colors: active) {
.pagination .page-numbers,
.navigation.pagination .page-numbers,
.comments-pagination .page-numbers,
.wp-pagenavi a,
.wp-pagenavi span,
.rx-pagination a,
.rx-pagination span,
.rx-pagination button {
border: 1px solid ButtonBorder;
background: ButtonFace;
color: ButtonText;
box-shadow: none;
}
.pagination .page-numbers.current,
.navigation.pagination .page-numbers.current,
.comments-pagination .page-numbers.current,
.rx-pagination [aria-current="page"] {
border-color: Highlight;
background: Highlight;
color: HighlightText;
}
.pagination a.page-numbers:focus,
.navigation.pagination a.page-numbers:focus,
.comments-pagination a.page-numbers:focus,
.rx-pagination a:focus,
.rx-pagination button:focus {
outline: 2px solid Highlight;
box-shadow: none;
}
}
/* ==========================================================================
29. PRINT
========================================================================== */
@media print {
.pagination,
.navigation.pagination,
.posts-navigation,
.post-navigation,
.comment-navigation,
.comments-pagination,
.wp-pagenavi,
.rx-pagination,
.rx-load-more-wrap,
.rx-pagination-load-more {
display: none !important;
}
}
/* ==========================================================================
30. ANIMATIONS
========================================================================== */
@keyframes rx-pagination-spin {
to {
transform: rotate(360deg);
}
}
/* ==========================================================================
31. OPTIONAL BREADCRUMB-LIKE PAGE INFO
========================================================================== */
.rx-pagination-info,
.rx-page-info,
.rx-pagination-count {
margin-block-end: 1rem;
color: var(--rx-pagination-color-muted);
font-size: 0.925rem;
line-height: 1.5;
text-align: center;
}
.rx-pagination-info strong,
.rx-page-info strong,
.rx-pagination-count strong {
color: var(--rx-pagination-color);
font-weight: 700;
}
/* ==========================================================================
32. PAGINATION WITH RESULT COUNT LAYOUT
========================================================================== */
.rx-pagination-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-block: var(--rx-pagination-margin-block);
}
.rx-pagination-bar .rx-pagination,
.rx-pagination-bar .pagination,
.rx-pagination-bar .navigation.pagination {
margin-block: 0;
width: auto;
}
.rx-pagination-bar .rx-pagination-info {
margin-block-end: 0;
text-align: start;
}
@media (max-width: 767px) {
.rx-pagination-bar {
flex-direction: column;
align-items: stretch;
}
.rx-pagination-bar .rx-pagination,
.rx-pagination-bar .pagination,
.rx-pagination-bar .navigation.pagination {
width: 100%;
}
.rx-pagination-bar .rx-pagination-info {
text-align: center;
}
}
/* ==========================================================================
33. STICKY / FLOATING PAGINATION OPTIONAL
========================================================================== */
.rx-pagination--sticky,
.rx-sticky-pagination {
position: sticky;
bottom: 1rem;
z-index: 20;
max-width: max-content;
margin-inline: auto;
padding: 0.5rem;
border: 1px solid var(--rx-pagination-border);
border-radius: var(--rx-pagination-radius-pill);
background-color: color-mix(in srgb, var(--rx-pagination-bg) 88%, transparent);
backdrop-filter: blur(12px);
box-shadow: var(--rx-pagination-shadow-hover);
}
@supports not (background-color: color-mix(in srgb, white 50%, black)) {
.rx-pagination--sticky,
.rx-sticky-pagination {
background-color: var(--rx-pagination-bg);
}
}
/* ==========================================================================
34. PAGINATION INSIDE CARD / CONTENT AREAS
========================================================================== */
.rx-card .pagination,
.rx-card .navigation.pagination,
.rx-content-card .pagination,
.rx-content-card .navigation.pagination,
.entry-content .pagination,
.rx-entry-content .pagination {
margin-block: 1.75rem;
}
/* ==========================================================================
35. COMMENT PAGINATION SPECIAL
========================================================================== */
.comment-navigation,
.comments-pagination,
.rx-comments-pagination {
padding-block: 1rem;
border-block: 1px solid var(--rx-pagination-border);
}
.comments-pagination .nav-links {
justify-content: center;
}
/* ==========================================================================
36. WOO / PRODUCT STYLE COMPATIBILITY
========================================================================== */
.woocommerce nav.woocommerce-pagination,
.rx-product-pagination {
margin-block: var(--rx-pagination-margin-block);
text-align: center;
}
.woocommerce nav.woocommerce-pagination ul,
.rx-product-pagination ul {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: var(--rx-pagination-gap);
padding: 0;
margin: 0;
list-style: none;
border: 0;
}
.woocommerce nav.woocommerce-pagination ul li,
.rx-product-pagination li {
border: 0;
list-style: none;
}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span,
.rx-product-pagination a,
.rx-product-pagination span {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: var(--rx-pagination-min-size);
min-height: var(--rx-pagination-min-size);
padding: var(--rx-pagination-padding-y) var(--rx-pagination-padding-x);
border: 1px solid var(--rx-pagination-border);
border-radius: var(--rx-pagination-radius);
background-color: var(--rx-pagination-bg);
color: var(--rx-pagination-color);
font-weight: var(--rx-pagination-font-weight);
text-decoration: none;
box-shadow: var(--rx-pagination-shadow);
transition: var(--rx-pagination-transition);
}
.woocommerce nav.woocommerce-pagination ul li a:hover,
.rx-product-pagination a:hover {
color: var(--rx-pagination-primary);
border-color: var(--rx-pagination-border-hover);
background-color: var(--rx-pagination-bg-soft);
box-shadow: var(--rx-pagination-shadow-hover);
transform: translateY(-1px);
}
.woocommerce nav.woocommerce-pagination ul li span.current,
.rx-product-pagination span.current {
color: var(--rx-pagination-primary-text);
border-color: var(--rx-pagination-primary);
background-color: var(--rx-pagination-primary);
}
/* ==========================================================================
37. BLOCK EDITOR QUERY PAGINATION COMPATIBILITY
========================================================================== */
.wp-block-query-pagination,
.rx-block-query-pagination {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: var(--rx-pagination-gap);
margin-block: var(--rx-pagination-margin-block);
}
.wp-block-query-pagination a,
.wp-block-query-pagination .wp-block-query-pagination-numbers,
.wp-block-query-pagination .page-numbers,
.rx-block-query-pagination a,
.rx-block-query-pagination .page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
}
.wp-block-query-pagination .page-numbers,
.wp-block-query-pagination a,
.rx-block-query-pagination .page-numbers,
.rx-block-query-pagination a {
min-width: var(--rx-pagination-min-size);
min-height: var(--rx-pagination-min-size);
padding: var(--rx-pagination-padding-y) var(--rx-pagination-padding-x);
border: 1px solid var(--rx-pagination-border);
border-radius: var(--rx-pagination-radius);
background-color: var(--rx-pagination-bg);
color: var(--rx-pagination-color);
font-weight: var(--rx-pagination-font-weight);
text-decoration: none;
box-shadow: var(--rx-pagination-shadow);
transition: var(--rx-pagination-transition);
}
.wp-block-query-pagination .page-numbers.current,
.rx-block-query-pagination .page-numbers.current {
color: var(--rx-pagination-primary-text);
border-color: var(--rx-pagination-primary);
background-color: var(--rx-pagination-primary);
}
/* ==========================================================================
38. ACCESSIBLE TOUCH TARGET IMPROVEMENT
========================================================================== */
@media (pointer: coarse) {
.pagination .page-numbers,
.navigation.pagination .page-numbers,
.comments-pagination .page-numbers,
.wp-pagenavi a,
.wp-pagenavi span,
.rx-pagination a,
.rx-pagination span,
.rx-pagination button {
min-width: 2.75rem;
min-height: 2.75rem;
}
}
/* ==========================================================================
39. NO-JS FALLBACK
========================================================================== */
.no-js .rx-load-more-wrap,
html:not(.js) .rx-load-more-wrap {
display: none;
}
.no-js .pagination,
html:not(.js) .pagination {
display: block;
}
/* ==========================================================================
40. UTILITY CLASSES
========================================================================== */
.rx-pagination-hidden {
display: none !important;
}
.rx-pagination-visually-hidden {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.rx-pagination-no-shadow .page-numbers,
.rx-pagination-no-shadow a,
.rx-pagination-no-shadow span,
.rx-pagination-no-shadow button {
box-shadow: none !important;
}
.rx-pagination-full-width .nav-links,
.rx-pagination-full-width.rx-pagination,
.rx-pagination.full-width {
width: 100%;
}
.rx-pagination-full-width .page-numbers.prev,
.rx-pagination-full-width .page-numbers.next {
flex: 1 1 auto;
}
/* ==========================================================================
41. SAFE FALLBACK FOR OLD BROWSERS
========================================================================== */
@supports not (gap: 1rem) {
.pagination .nav-links > *,
.navigation.pagination .nav-links > *,
.comments-pagination .nav-links > *,
.rx-pagination .nav-links > * {
margin: 0.25rem;
}
.posts-navigation .nav-links > *,
.post-navigation .nav-links > *,
.comment-navigation .nav-links > * {
margin: 0.35rem;
}
}Use this file only for pagination component CSS. Later you can import it in your main CSS like:
@import url("./components/pagination.css");Best naming for RX Theme:
assets/static/static-css/components/pagination.cssThis file is safe for:
archive.php, index.php, search.php, category.php, tag.php, author.php, comments.php, WooCommerce-style loops, and custom RX Theme post grids.