22

✏️ Editing: grid-pagination.css

/*
 * Grid Pagination
 */

/* Load More button
   ========================================================================== */
.g-loadmore {
	text-align: center;
	position: relative;
	}
.g-loadmore.done {
	display: none;
	}
	.g-loadmore .w-btn {
		z-index: 1;
		}
	.g-loadmore .g-preloader {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		opacity: 0;
		transition: opacity 0.3s;
		}
	.g-loadmore.loading .w-btn {
		opacity: 0;
		}
	.g-loadmore.loading .g-preloader {
		opacity: 1;
		}
	.g-loadmore.width_full .w-btn {
		border-radius: 0;
		width: 100%;
		}

/* WordPress Listing pagination
   ========================================================================== */
.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -0.2rem;
	}
	.pagination .page-numbers {
		flex-shrink: 0;
		text-align: center;
		position: relative;
		margin: 0.2rem;
		}
		.pagination .page-numbers:before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			border-radius: inherit;
			border-style: solid;
			border-color: inherit;
			border-image: inherit;
			}
		.pagination .page-numbers span {
			vertical-align: top;
			position: relative;
			z-index: 1
			}
	.pagination > :not(.custom) .page-numbers {
		font-size: 1.4rem;
		line-height: 3.5rem;
		height: 3.5rem;
		width: 3.5rem;
		overflow: hidden;
		border-radius: 50%;
		transition: none;
		}
	.pagination > :not(.custom) a.page-numbers {
		color: inherit;
		}
	.pagination > :not(.custom) .page-numbers.current {
		background: var(--color-content-primary-grad);
		color: #fff !important;
		}
	.no-touch .pagination > :not(.custom) a.page-numbers:not(.current):hover {
		background: var(--color-content-bg-alt-grad);
		}
	.pagination .page-numbers.dots {
		background: none !important;
		border: none !important;
		box-shadow: none !important;
		color: inherit !important;
		}
		.pagination .page-numbers.dots:before,
		.pagination > :not(.custom) .page-numbers:before {
			display: none;
			}
	.pagination > :not(.custom) .page-numbers.prev,
	.pagination > :not(.custom) .page-numbers.next,
	.pagination .page-numbers.prev span,
	.pagination .page-numbers.next span {
		font-size: 0;
		}
		.pagination > :not(.custom) .page-numbers.prev:after,
		.pagination > :not(.custom) .page-numbers.next:after {
			font-size: 1.5rem;
			}
		.pagination .page-numbers.prev:after {
			content: '\f104';
			font-family: fontawesome;
			font-weight: 400;
			vertical-align: top;
			position: relative;
			padding-right: 0.1em;
			}
		.pagination .page-numbers.next:after {
			content: '\f105';
			font-family: fontawesome;
			font-weight: 400;
			vertical-align: top;
			position: relative;
			padding-left: 0.1em;
			}

/* Colors
   ========================================================================== */
.color_alternate .pagination > :not(.custom) .page-numbers.current {
	background: var(--color-alt-content-primary-grad);
	}
.no-touch .color_alternate .pagination > :not(.custom) a.page-numbers:not(.current):hover {
	background: var(--color-alt-content-bg-alt-grad);
	}

/* Responsive
   ========================================================================== */
@media screen and (max-width: 480px) {
.g-loadmore .w-btn {
	font-size: 1rem !important;
	}
.pagination .nav-links {
	justify-content: flex-start !important;
	}
}

MR SKB