diff --git a/src/components/dashboard/LeaderBoard/leaderboard.css b/src/components/dashboard/LeaderBoard/leaderboard.css index 00d88ff9..6fdb851c 100644 --- a/src/components/dashboard/LeaderBoard/leaderboard.css +++ b/src/components/dashboard/LeaderBoard/leaderboard.css @@ -750,15 +750,18 @@ } /* Pagination ellipsis */ -.pagination-ellipsis { +.contributors-container .pagination-ellipsis { display: flex; justify-content: center; - align-items: center; width: 40px; height: 40px; font-weight: bold; font-size: 18px; + -webkit-user-select: none; user-select: none; + letter-spacing: 2px; + background: none; + border: none; } .light .pagination-ellipsis { @@ -881,32 +884,62 @@ .points-cell { justify-self: center; } +} - /* Pagination mobile styles */ - .pagination { - flex-wrap: wrap; - gap: 6px; - padding: 16px 0; - } - - .page-numbers { - order: 2; - width: 100%; - justify-content: center; - margin-top: 8px; +/* Pagination responsive styles */ +@media (max-width: 768px) { + .contributors-container .pagination { + flex-direction: row; + gap: 0; } - .pagination-btn { - width: 36px; - height: 36px; + .contributors-container .page-numbers { + flex-wrap: nowrap; + gap: 0; + padding: 0; } - .page-btn, - .pagination-ellipsis { + .contributors-container .page-numbers .page-btn, + .contributors-container .pagination .pagination-btn, + .contributors-container .pagination-ellipsis { + min-width: 32px; width: 32px; height: 32px; + padding: 8px; font-size: 14px; } + + .contributors-container .pagination span { + min-width: 32px; + background: none; + border: none; + } +} + +@media (max-width: 475px) { + + .contributors-container .page-numbers .page-btn, + .contributors-container .pagination .pagination-btn, + .contributors-container .pagination-ellipsis { + min-width: 24px; + width: 24px; + height: 24px; + margin: 0 4px; + font-size: 12px; + } + + .contributors-container .pagination span { + min-width: 24px; + } +} + +@media (max-width: 320px) { + + .contributors-container .page-numbers .page-btn, + .contributors-container .pagination .pagination-btn, + .contributors-container .pagination-ellipsis { + margin: 0 2px; + } } /* Skeleton Loader Styles */