From de927bd2a1f1686a088256959907e94af41c13aa Mon Sep 17 00:00:00 2001 From: Kazhnuz Date: Thu, 31 Dec 2020 19:57:19 +0100 Subject: [PATCH] fix: fix pagination Fixes #3 --- scss/_drawing.scss | 13 +++++++++++-- style.css | 41 ++++++++++++++++++++++++----------------- 2 files changed, 35 insertions(+), 19 deletions(-) diff --git a/scss/_drawing.scss b/scss/_drawing.scss index 3c4f08b..fd0bc37 100644 --- a/scss/_drawing.scss +++ b/scss/_drawing.scss @@ -40,9 +40,18 @@ a.article-nav-link-wrap { padding-bottom:1.5rem; } -#page-nav { +.screen-reader-text { + visibility: collapse; + font-size:0; +} + +nav.pagination { padding-bottom:1.5rem; - .page-number, .next, .prev { + .nav-links { + text-align: center; + width:100%; + } + .page-numbers, .next, .prev { @include button($button_small); padding-left: $button_small; padding-right: $button_small; diff --git a/style.css b/style.css index e7b9f9f..26648d7 100644 --- a/style.css +++ b/style.css @@ -2059,9 +2059,16 @@ a.article-nav-link-wrap { .pigimg, .mb { padding-bottom: 1.5rem; } -#page-nav { +.screen-reader-text { + visibility: collapse; + font-size: 0; } + +nav.pagination { padding-bottom: 1.5rem; } - #page-nav .page-number, #page-nav .next, #page-nav .prev { + nav.pagination .nav-links { + text-align: center; + width: 100%; } + nav.pagination .page-numbers, nav.pagination .next, nav.pagination .prev { padding: 0.375rem; padding-top: 0.125rem; padding-bottom: 0.125rem; @@ -2080,16 +2087,16 @@ a.article-nav-link-wrap { padding-left: 0.375rem; padding-right: 0.375rem; color: #002b36; } - #page-nav .page-number:hover, #page-nav .page-number:active, #page-nav .page-number:focus, a:hover > #page-nav .page-number, a:active > #page-nav .page-number, a:focus > #page-nav .page-number, #page-nav .next:hover, #page-nav .next:active, #page-nav .next:focus, a:hover > #page-nav .next, a:active > #page-nav .next, a:focus > #page-nav .next, #page-nav .prev:hover, #page-nav .prev:active, #page-nav .prev:focus, a:hover > #page-nav .prev, a:active > #page-nav .prev, a:focus > #page-nav .prev { + nav.pagination .page-numbers:hover, nav.pagination .page-numbers:active, nav.pagination .page-numbers:focus, a:hover > nav.pagination .page-numbers, a:active > nav.pagination .page-numbers, a:focus > nav.pagination .page-numbers, nav.pagination .next:hover, nav.pagination .next:active, nav.pagination .next:focus, a:hover > nav.pagination .next, a:active > nav.pagination .next, a:focus > nav.pagination .next, nav.pagination .prev:hover, nav.pagination .prev:active, nav.pagination .prev:focus, a:hover > nav.pagination .prev, a:active > nav.pagination .prev, a:focus > nav.pagination .prev { text-decoration: none; background-color: transparent; } - #page-nav .page-number:focus, #page-nav .next:focus, #page-nav .prev:focus { + nav.pagination .page-numbers:focus, nav.pagination .next:focus, nav.pagination .prev:focus { outline: none; box-shadow: 0px 2px 6px rgba(0, 0, 0, 0), inset 0px -2px 0px rgba(0, 0, 0, 0), 0px 0px 0px 2px rgba(0, 0, 0, 0); } - #page-nav .page-number:focus:before, #page-nav .next:focus:before, #page-nav .prev:focus:before { + nav.pagination .page-numbers:focus:before, nav.pagination .next:focus:before, nav.pagination .prev:focus:before { box-shadow: 0px 2px 6px rgba(0, 0, 0, 0), inset 0px -2px 0px rgba(0, 0, 0, 0), 0px 0px 0px 2px rgba(0, 0, 0, 0.3); outline: none; } - #page-nav .page-number:before, #page-nav .next:before, #page-nav .prev:before { + nav.pagination .page-numbers:before, nav.pagination .next:before, nav.pagination .prev:before { content: " "; position: absolute; top: 0; @@ -2099,27 +2106,27 @@ a.article-nav-link-wrap { z-index: -1; transform: skewX(-15deg); transition: background-color 0.3s; } - #page-nav .page-number:before, #page-nav .next:before, #page-nav .prev:before { + nav.pagination .page-numbers:before, nav.pagination .next:before, nav.pagination .prev:before { background-color: #eee8d5; } - #page-nav .page-number:visited, #page-nav .next:visited, #page-nav .prev:visited { + nav.pagination .page-numbers:visited, nav.pagination .next:visited, nav.pagination .prev:visited { color: #002b36; } - #page-nav .page-number:visited:before, #page-nav .next:visited:before, #page-nav .prev:visited:before { + nav.pagination .page-numbers:visited:before, nav.pagination .next:visited:before, nav.pagination .prev:visited:before { background-color: #eee8d5; } - #page-nav .page-number:hover, #page-nav .page-number:active, #page-nav .page-number:focus, a:hover > #page-nav .page-number, a:active > #page-nav .page-number, a:focus > #page-nav .page-number, #page-nav .page-number:visited:hover, #page-nav .page-number:visited:active, #page-nav .page-number:visited:focus, a:hover > #page-nav .page-number:visited, a:active > #page-nav .page-number:visited, a:focus > #page-nav .page-number:visited, #page-nav .page-number:not(.disabled):not(:disabled):hover, #page-nav .page-number:not(.disabled):not(:disabled):active, #page-nav .page-number:not(.disabled):not(:disabled):focus, a:hover > #page-nav .page-number:not(.disabled):not(:disabled), a:active > #page-nav .page-number:not(.disabled):not(:disabled), a:focus > #page-nav .page-number:not(.disabled):not(:disabled), #page-nav .next:hover, #page-nav .next:active, #page-nav .next:focus, a:hover > #page-nav .next, a:active > #page-nav .next, a:focus > #page-nav .next, #page-nav .next:visited:hover, #page-nav .next:visited:active, #page-nav .next:visited:focus, a:hover > #page-nav .next:visited, a:active > #page-nav .next:visited, a:focus > #page-nav .next:visited, #page-nav .next:not(.disabled):not(:disabled):hover, #page-nav .next:not(.disabled):not(:disabled):active, #page-nav .next:not(.disabled):not(:disabled):focus, a:hover > #page-nav .next:not(.disabled):not(:disabled), a:active > #page-nav .next:not(.disabled):not(:disabled), a:focus > #page-nav .next:not(.disabled):not(:disabled), #page-nav .prev:hover, #page-nav .prev:active, #page-nav .prev:focus, a:hover > #page-nav .prev, a:active > #page-nav .prev, a:focus > #page-nav .prev, #page-nav .prev:visited:hover, #page-nav .prev:visited:active, #page-nav .prev:visited:focus, a:hover > #page-nav .prev:visited, a:active > #page-nav .prev:visited, a:focus > #page-nav .prev:visited, #page-nav .prev:not(.disabled):not(:disabled):hover, #page-nav .prev:not(.disabled):not(:disabled):active, #page-nav .prev:not(.disabled):not(:disabled):focus, a:hover > #page-nav .prev:not(.disabled):not(:disabled), a:active > #page-nav .prev:not(.disabled):not(:disabled), a:focus > #page-nav .prev:not(.disabled):not(:disabled) { + nav.pagination .page-numbers:hover, nav.pagination .page-numbers:active, nav.pagination .page-numbers:focus, a:hover > nav.pagination .page-numbers, a:active > nav.pagination .page-numbers, a:focus > nav.pagination .page-numbers, nav.pagination .page-numbers:visited:hover, nav.pagination .page-numbers:visited:active, nav.pagination .page-numbers:visited:focus, a:hover > nav.pagination .page-numbers:visited, a:active > nav.pagination .page-numbers:visited, a:focus > nav.pagination .page-numbers:visited, nav.pagination .page-numbers:not(.disabled):not(:disabled):hover, nav.pagination .page-numbers:not(.disabled):not(:disabled):active, nav.pagination .page-numbers:not(.disabled):not(:disabled):focus, a:hover > nav.pagination .page-numbers:not(.disabled):not(:disabled), a:active > nav.pagination .page-numbers:not(.disabled):not(:disabled), a:focus > nav.pagination .page-numbers:not(.disabled):not(:disabled), nav.pagination .next:hover, nav.pagination .next:active, nav.pagination .next:focus, a:hover > nav.pagination .next, a:active > nav.pagination .next, a:focus > nav.pagination .next, nav.pagination .next:visited:hover, nav.pagination .next:visited:active, nav.pagination .next:visited:focus, a:hover > nav.pagination .next:visited, a:active > nav.pagination .next:visited, a:focus > nav.pagination .next:visited, nav.pagination .next:not(.disabled):not(:disabled):hover, nav.pagination .next:not(.disabled):not(:disabled):active, nav.pagination .next:not(.disabled):not(:disabled):focus, a:hover > nav.pagination .next:not(.disabled):not(:disabled), a:active > nav.pagination .next:not(.disabled):not(:disabled), a:focus > nav.pagination .next:not(.disabled):not(:disabled), nav.pagination .prev:hover, nav.pagination .prev:active, nav.pagination .prev:focus, a:hover > nav.pagination .prev, a:active > nav.pagination .prev, a:focus > nav.pagination .prev, nav.pagination .prev:visited:hover, nav.pagination .prev:visited:active, nav.pagination .prev:visited:focus, a:hover > nav.pagination .prev:visited, a:active > nav.pagination .prev:visited, a:focus > nav.pagination .prev:visited, nav.pagination .prev:not(.disabled):not(:disabled):hover, nav.pagination .prev:not(.disabled):not(:disabled):active, nav.pagination .prev:not(.disabled):not(:disabled):focus, a:hover > nav.pagination .prev:not(.disabled):not(:disabled), a:active > nav.pagination .prev:not(.disabled):not(:disabled), a:focus > nav.pagination .prev:not(.disabled):not(:disabled) { color: #003f50; } - #page-nav .page-number:hover:before, #page-nav .page-number:active:before, #page-nav .page-number:focus:before, a:hover > #page-nav .page-number:before, a:active > #page-nav .page-number:before, a:focus > #page-nav .page-number:before, #page-nav .page-number:visited:hover:before, #page-nav .page-number:visited:active:before, #page-nav .page-number:visited:focus:before, a:hover > #page-nav .page-number:visited:before, a:active > #page-nav .page-number:visited:before, a:focus > #page-nav .page-number:visited:before, #page-nav .page-number:not(.disabled):not(:disabled):hover:before, #page-nav .page-number:not(.disabled):not(:disabled):active:before, #page-nav .page-number:not(.disabled):not(:disabled):focus:before, a:hover > #page-nav .page-number:not(.disabled):not(:disabled):before, a:active > #page-nav .page-number:not(.disabled):not(:disabled):before, a:focus > #page-nav .page-number:not(.disabled):not(:disabled):before, #page-nav .next:hover:before, #page-nav .next:active:before, #page-nav .next:focus:before, a:hover > #page-nav .next:before, a:active > #page-nav .next:before, a:focus > #page-nav .next:before, #page-nav .next:visited:hover:before, #page-nav .next:visited:active:before, #page-nav .next:visited:focus:before, a:hover > #page-nav .next:visited:before, a:active > #page-nav .next:visited:before, a:focus > #page-nav .next:visited:before, #page-nav .next:not(.disabled):not(:disabled):hover:before, #page-nav .next:not(.disabled):not(:disabled):active:before, #page-nav .next:not(.disabled):not(:disabled):focus:before, a:hover > #page-nav .next:not(.disabled):not(:disabled):before, a:active > #page-nav .next:not(.disabled):not(:disabled):before, a:focus > #page-nav .next:not(.disabled):not(:disabled):before, #page-nav .prev:hover:before, #page-nav .prev:active:before, #page-nav .prev:focus:before, a:hover > #page-nav .prev:before, a:active > #page-nav .prev:before, a:focus > #page-nav .prev:before, #page-nav .prev:visited:hover:before, #page-nav .prev:visited:active:before, #page-nav .prev:visited:focus:before, a:hover > #page-nav .prev:visited:before, a:active > #page-nav .prev:visited:before, a:focus > #page-nav .prev:visited:before, #page-nav .prev:not(.disabled):not(:disabled):hover:before, #page-nav .prev:not(.disabled):not(:disabled):active:before, #page-nav .prev:not(.disabled):not(:disabled):focus:before, a:hover > #page-nav .prev:not(.disabled):not(:disabled):before, a:active > #page-nav .prev:not(.disabled):not(:disabled):before, a:focus > #page-nav .prev:not(.disabled):not(:disabled):before { + nav.pagination .page-numbers:hover:before, nav.pagination .page-numbers:active:before, nav.pagination .page-numbers:focus:before, a:hover > nav.pagination .page-numbers:before, a:active > nav.pagination .page-numbers:before, a:focus > nav.pagination .page-numbers:before, nav.pagination .page-numbers:visited:hover:before, nav.pagination .page-numbers:visited:active:before, nav.pagination .page-numbers:visited:focus:before, a:hover > nav.pagination .page-numbers:visited:before, a:active > nav.pagination .page-numbers:visited:before, a:focus > nav.pagination .page-numbers:visited:before, nav.pagination .page-numbers:not(.disabled):not(:disabled):hover:before, nav.pagination .page-numbers:not(.disabled):not(:disabled):active:before, nav.pagination .page-numbers:not(.disabled):not(:disabled):focus:before, a:hover > nav.pagination .page-numbers:not(.disabled):not(:disabled):before, a:active > nav.pagination .page-numbers:not(.disabled):not(:disabled):before, a:focus > nav.pagination .page-numbers:not(.disabled):not(:disabled):before, nav.pagination .next:hover:before, nav.pagination .next:active:before, nav.pagination .next:focus:before, a:hover > nav.pagination .next:before, a:active > nav.pagination .next:before, a:focus > nav.pagination .next:before, nav.pagination .next:visited:hover:before, nav.pagination .next:visited:active:before, nav.pagination .next:visited:focus:before, a:hover > nav.pagination .next:visited:before, a:active > nav.pagination .next:visited:before, a:focus > nav.pagination .next:visited:before, nav.pagination .next:not(.disabled):not(:disabled):hover:before, nav.pagination .next:not(.disabled):not(:disabled):active:before, nav.pagination .next:not(.disabled):not(:disabled):focus:before, a:hover > nav.pagination .next:not(.disabled):not(:disabled):before, a:active > nav.pagination .next:not(.disabled):not(:disabled):before, a:focus > nav.pagination .next:not(.disabled):not(:disabled):before, nav.pagination .prev:hover:before, nav.pagination .prev:active:before, nav.pagination .prev:focus:before, a:hover > nav.pagination .prev:before, a:active > nav.pagination .prev:before, a:focus > nav.pagination .prev:before, nav.pagination .prev:visited:hover:before, nav.pagination .prev:visited:active:before, nav.pagination .prev:visited:focus:before, a:hover > nav.pagination .prev:visited:before, a:active > nav.pagination .prev:visited:before, a:focus > nav.pagination .prev:visited:before, nav.pagination .prev:not(.disabled):not(:disabled):hover:before, nav.pagination .prev:not(.disabled):not(:disabled):active:before, nav.pagination .prev:not(.disabled):not(:disabled):focus:before, a:hover > nav.pagination .prev:not(.disabled):not(:disabled):before, a:active > nav.pagination .prev:not(.disabled):not(:disabled):before, a:focus > nav.pagination .prev:not(.disabled):not(:disabled):before { background-color: #e3d9ba; } - #page-nav .page-number.current, #page-nav .next.current, #page-nav .prev.current { + nav.pagination .page-numbers.current, nav.pagination .next.current, nav.pagination .prev.current { color: #fdf6e3; } - #page-nav .page-number.current:before, #page-nav .next.current:before, #page-nav .prev.current:before { + nav.pagination .page-numbers.current:before, nav.pagination .next.current:before, nav.pagination .prev.current:before { background-color: #2aa198; } - #page-nav .page-number.current:visited, #page-nav .next.current:visited, #page-nav .prev.current:visited { + nav.pagination .page-numbers.current:visited, nav.pagination .next.current:visited, nav.pagination .prev.current:visited { color: #fdf6e3; } - #page-nav .page-number.current:visited:before, #page-nav .next.current:visited:before, #page-nav .prev.current:visited:before { + nav.pagination .page-numbers.current:visited:before, nav.pagination .next.current:visited:before, nav.pagination .prev.current:visited:before { background-color: #2aa198; } - #page-nav .page-number.current:hover, #page-nav .page-number.current:active, #page-nav .page-number.current:focus, a:hover > #page-nav .page-number.current, a:active > #page-nav .page-number.current, a:focus > #page-nav .page-number.current, #page-nav .page-number.current:visited:hover, #page-nav .page-number.current:visited:active, #page-nav .page-number.current:visited:focus, a:hover > #page-nav .page-number.current:visited, a:active > #page-nav .page-number.current:visited, a:focus > #page-nav .page-number.current:visited, #page-nav .page-number.current:not(.disabled):not(:disabled):hover, #page-nav .page-number.current:not(.disabled):not(:disabled):active, #page-nav .page-number.current:not(.disabled):not(:disabled):focus, a:hover > #page-nav .page-number.current:not(.disabled):not(:disabled), a:active > #page-nav .page-number.current:not(.disabled):not(:disabled), a:focus > #page-nav .page-number.current:not(.disabled):not(:disabled), #page-nav .next.current:hover, #page-nav .next.current:active, #page-nav .next.current:focus, a:hover > #page-nav .next.current, a:active > #page-nav .next.current, a:focus > #page-nav .next.current, #page-nav .next.current:visited:hover, #page-nav .next.current:visited:active, #page-nav .next.current:visited:focus, a:hover > #page-nav .next.current:visited, a:active > #page-nav .next.current:visited, a:focus > #page-nav .next.current:visited, #page-nav .next.current:not(.disabled):not(:disabled):hover, #page-nav .next.current:not(.disabled):not(:disabled):active, #page-nav .next.current:not(.disabled):not(:disabled):focus, a:hover > #page-nav .next.current:not(.disabled):not(:disabled), a:active > #page-nav .next.current:not(.disabled):not(:disabled), a:focus > #page-nav .next.current:not(.disabled):not(:disabled), #page-nav .prev.current:hover, #page-nav .prev.current:active, #page-nav .prev.current:focus, a:hover > #page-nav .prev.current, a:active > #page-nav .prev.current, a:focus > #page-nav .prev.current, #page-nav .prev.current:visited:hover, #page-nav .prev.current:visited:active, #page-nav .prev.current:visited:focus, a:hover > #page-nav .prev.current:visited, a:active > #page-nav .prev.current:visited, a:focus > #page-nav .prev.current:visited, #page-nav .prev.current:not(.disabled):not(:disabled):hover, #page-nav .prev.current:not(.disabled):not(:disabled):active, #page-nav .prev.current:not(.disabled):not(:disabled):focus, a:hover > #page-nav .prev.current:not(.disabled):not(:disabled), a:active > #page-nav .prev.current:not(.disabled):not(:disabled), a:focus > #page-nav .prev.current:not(.disabled):not(:disabled) { + nav.pagination .page-numbers.current:hover, nav.pagination .page-numbers.current:active, nav.pagination .page-numbers.current:focus, a:hover > nav.pagination .page-numbers.current, a:active > nav.pagination .page-numbers.current, a:focus > nav.pagination .page-numbers.current, nav.pagination .page-numbers.current:visited:hover, nav.pagination .page-numbers.current:visited:active, nav.pagination .page-numbers.current:visited:focus, a:hover > nav.pagination .page-numbers.current:visited, a:active > nav.pagination .page-numbers.current:visited, a:focus > nav.pagination .page-numbers.current:visited, nav.pagination .page-numbers.current:not(.disabled):not(:disabled):hover, nav.pagination .page-numbers.current:not(.disabled):not(:disabled):active, nav.pagination .page-numbers.current:not(.disabled):not(:disabled):focus, a:hover > nav.pagination .page-numbers.current:not(.disabled):not(:disabled), a:active > nav.pagination .page-numbers.current:not(.disabled):not(:disabled), a:focus > nav.pagination .page-numbers.current:not(.disabled):not(:disabled), nav.pagination .next.current:hover, nav.pagination .next.current:active, nav.pagination .next.current:focus, a:hover > nav.pagination .next.current, a:active > nav.pagination .next.current, a:focus > nav.pagination .next.current, nav.pagination .next.current:visited:hover, nav.pagination .next.current:visited:active, nav.pagination .next.current:visited:focus, a:hover > nav.pagination .next.current:visited, a:active > nav.pagination .next.current:visited, a:focus > nav.pagination .next.current:visited, nav.pagination .next.current:not(.disabled):not(:disabled):hover, nav.pagination .next.current:not(.disabled):not(:disabled):active, nav.pagination .next.current:not(.disabled):not(:disabled):focus, a:hover > nav.pagination .next.current:not(.disabled):not(:disabled), a:active > nav.pagination .next.current:not(.disabled):not(:disabled), a:focus > nav.pagination .next.current:not(.disabled):not(:disabled), nav.pagination .prev.current:hover, nav.pagination .prev.current:active, nav.pagination .prev.current:focus, a:hover > nav.pagination .prev.current, a:active > nav.pagination .prev.current, a:focus > nav.pagination .prev.current, nav.pagination .prev.current:visited:hover, nav.pagination .prev.current:visited:active, nav.pagination .prev.current:visited:focus, a:hover > nav.pagination .prev.current:visited, a:active > nav.pagination .prev.current:visited, a:focus > nav.pagination .prev.current:visited, nav.pagination .prev.current:not(.disabled):not(:disabled):hover, nav.pagination .prev.current:not(.disabled):not(:disabled):active, nav.pagination .prev.current:not(.disabled):not(:disabled):focus, a:hover > nav.pagination .prev.current:not(.disabled):not(:disabled), a:active > nav.pagination .prev.current:not(.disabled):not(:disabled), a:focus > nav.pagination .prev.current:not(.disabled):not(:disabled) { color: #fffefb; } - #page-nav .page-number.current:hover:before, #page-nav .page-number.current:active:before, #page-nav .page-number.current:focus:before, a:hover > #page-nav .page-number.current:before, a:active > #page-nav .page-number.current:before, a:focus > #page-nav .page-number.current:before, #page-nav .page-number.current:visited:hover:before, #page-nav .page-number.current:visited:active:before, #page-nav .page-number.current:visited:focus:before, a:hover > #page-nav .page-number.current:visited:before, a:active > #page-nav .page-number.current:visited:before, a:focus > #page-nav .page-number.current:visited:before, #page-nav .page-number.current:not(.disabled):not(:disabled):hover:before, #page-nav .page-number.current:not(.disabled):not(:disabled):active:before, #page-nav .page-number.current:not(.disabled):not(:disabled):focus:before, a:hover > #page-nav .page-number.current:not(.disabled):not(:disabled):before, a:active > #page-nav .page-number.current:not(.disabled):not(:disabled):before, a:focus > #page-nav .page-number.current:not(.disabled):not(:disabled):before, #page-nav .next.current:hover:before, #page-nav .next.current:active:before, #page-nav .next.current:focus:before, a:hover > #page-nav .next.current:before, a:active > #page-nav .next.current:before, a:focus > #page-nav .next.current:before, #page-nav .next.current:visited:hover:before, #page-nav .next.current:visited:active:before, #page-nav .next.current:visited:focus:before, a:hover > #page-nav .next.current:visited:before, a:active > #page-nav .next.current:visited:before, a:focus > #page-nav .next.current:visited:before, #page-nav .next.current:not(.disabled):not(:disabled):hover:before, #page-nav .next.current:not(.disabled):not(:disabled):active:before, #page-nav .next.current:not(.disabled):not(:disabled):focus:before, a:hover > #page-nav .next.current:not(.disabled):not(:disabled):before, a:active > #page-nav .next.current:not(.disabled):not(:disabled):before, a:focus > #page-nav .next.current:not(.disabled):not(:disabled):before, #page-nav .prev.current:hover:before, #page-nav .prev.current:active:before, #page-nav .prev.current:focus:before, a:hover > #page-nav .prev.current:before, a:active > #page-nav .prev.current:before, a:focus > #page-nav .prev.current:before, #page-nav .prev.current:visited:hover:before, #page-nav .prev.current:visited:active:before, #page-nav .prev.current:visited:focus:before, a:hover > #page-nav .prev.current:visited:before, a:active > #page-nav .prev.current:visited:before, a:focus > #page-nav .prev.current:visited:before, #page-nav .prev.current:not(.disabled):not(:disabled):hover:before, #page-nav .prev.current:not(.disabled):not(:disabled):active:before, #page-nav .prev.current:not(.disabled):not(:disabled):focus:before, a:hover > #page-nav .prev.current:not(.disabled):not(:disabled):before, a:active > #page-nav .prev.current:not(.disabled):not(:disabled):before, a:focus > #page-nav .prev.current:not(.disabled):not(:disabled):before { + nav.pagination .page-numbers.current:hover:before, nav.pagination .page-numbers.current:active:before, nav.pagination .page-numbers.current:focus:before, a:hover > nav.pagination .page-numbers.current:before, a:active > nav.pagination .page-numbers.current:before, a:focus > nav.pagination .page-numbers.current:before, nav.pagination .page-numbers.current:visited:hover:before, nav.pagination .page-numbers.current:visited:active:before, nav.pagination .page-numbers.current:visited:focus:before, a:hover > nav.pagination .page-numbers.current:visited:before, a:active > nav.pagination .page-numbers.current:visited:before, a:focus > nav.pagination .page-numbers.current:visited:before, nav.pagination .page-numbers.current:not(.disabled):not(:disabled):hover:before, nav.pagination .page-numbers.current:not(.disabled):not(:disabled):active:before, nav.pagination .page-numbers.current:not(.disabled):not(:disabled):focus:before, a:hover > nav.pagination .page-numbers.current:not(.disabled):not(:disabled):before, a:active > nav.pagination .page-numbers.current:not(.disabled):not(:disabled):before, a:focus > nav.pagination .page-numbers.current:not(.disabled):not(:disabled):before, nav.pagination .next.current:hover:before, nav.pagination .next.current:active:before, nav.pagination .next.current:focus:before, a:hover > nav.pagination .next.current:before, a:active > nav.pagination .next.current:before, a:focus > nav.pagination .next.current:before, nav.pagination .next.current:visited:hover:before, nav.pagination .next.current:visited:active:before, nav.pagination .next.current:visited:focus:before, a:hover > nav.pagination .next.current:visited:before, a:active > nav.pagination .next.current:visited:before, a:focus > nav.pagination .next.current:visited:before, nav.pagination .next.current:not(.disabled):not(:disabled):hover:before, nav.pagination .next.current:not(.disabled):not(:disabled):active:before, nav.pagination .next.current:not(.disabled):not(:disabled):focus:before, a:hover > nav.pagination .next.current:not(.disabled):not(:disabled):before, a:active > nav.pagination .next.current:not(.disabled):not(:disabled):before, a:focus > nav.pagination .next.current:not(.disabled):not(:disabled):before, nav.pagination .prev.current:hover:before, nav.pagination .prev.current:active:before, nav.pagination .prev.current:focus:before, a:hover > nav.pagination .prev.current:before, a:active > nav.pagination .prev.current:before, a:focus > nav.pagination .prev.current:before, nav.pagination .prev.current:visited:hover:before, nav.pagination .prev.current:visited:active:before, nav.pagination .prev.current:visited:focus:before, a:hover > nav.pagination .prev.current:visited:before, a:active > nav.pagination .prev.current:visited:before, a:focus > nav.pagination .prev.current:visited:before, nav.pagination .prev.current:not(.disabled):not(:disabled):hover:before, nav.pagination .prev.current:not(.disabled):not(:disabled):active:before, nav.pagination .prev.current:not(.disabled):not(:disabled):focus:before, a:hover > nav.pagination .prev.current:not(.disabled):not(:disabled):before, a:active > nav.pagination .prev.current:not(.disabled):not(:disabled):before, a:focus > nav.pagination .prev.current:not(.disabled):not(:disabled):before { background-color: #22837b; } .card-select {