/* * Pagination */ /* Load More button and spinner */ .g-loadmore { display: none; text-align: center; position: relative; min-height: 2.5rem; /* height of g-preloader */ margin-top: calc(var(--gap, 0px) * 2); } .w-grid.filtering > .g-loadmore { height: 20rem; } .w-grid.preload_style_spinner.filtering > .g-loadmore, .w-grid.pagination_load_on_btn:not(.filtering) > .g-loadmore, .w-grid.pagination_load_on_scroll.loading_items:not(.filtering) > .g-loadmore { display: block; } .g-loadmore > .g-preloader { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); opacity: 0; } .w-grid.loading_items > .g-loadmore > .g-preloader { opacity: 1; } .g-loadmore > .w-btn { z-index: 1; } .g-loadmore.width_full > .w-btn { width: 100%; } .w-grid.loading_items > .g-loadmore > .w-btn { opacity: 0; transition: none; } /* Numbered AJAX pagination */ .w-grid.pagination_numbered_ajax.loading_items { opacity: .5; pointer-events: none; } /* WordPress numbered 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-width: var(--btn-border-width, 0px); 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; } .w-grid > .pagination { margin-top: 2rem; } .w-grid:not(.cols_1) > .pagination .nav-links { justify-content: center; } /* Add min-width to make correct circles or squares */ .pagination .nav-links[class*="us-nav-style_"] > * { min-width: var(--btn-height, 3em); } /* 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; } }