pagindata-js/PaginDataJS.min.css

A lightweight and modern pagination library written in vanilla JavaScript with no external dependencies

.paginationjs{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;font-size:14px;line-height:1.5;color:#333;margin:20px 0;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px}.paginationjs-pages{display:flex;align-items:center}.paginationjs ul{list-style:none;padding:0;margin:0;display:flex;align-items:center;gap:4px;flex-wrap:wrap}.paginationjs li{display:inline-block;margin:0}.paginationjs a{display:inline-block;padding:8px 12px;text-decoration:none;border:1px solid #ddd;color:#333;background-color:#fff;border-radius:4px;transition:all .2s ease;text-align:center;font-weight:500}.paginationjs a:hover{background-color:#f8f9fa;border-color:#adb5bd;color:#495057;transform:translateY(-1px);box-shadow:0 2px 4px rgba(0,0,0,.1)}.paginationjs .active a{background-color:#007bff;color:#fff;border-color:#007bff;font-weight:600}.paginationjs .active a:hover{background-color:#0056b3;border-color:#0056b3;transform:none;box-shadow:none}.paginationjs .disabled a{color:#6c757d;background-color:#f8f9fa;border-color:#dee2e6;cursor:not-allowed;opacity:.6}.paginationjs .disabled a:hover{background-color:#f8f9fa;border-color:#dee2e6;transform:none;box-shadow:none}.paginationjs .paginationjs-next a,.paginationjs .paginationjs-prev a{font-weight:600;padding:8px 16px}.paginationjs .paginationjs-ellipsis a{background-color:transparent;border-color:transparent;color:#6c757d;cursor:default}.paginationjs .paginationjs-ellipsis a:hover{background-color:transparent;border-color:transparent;transform:none;box-shadow:none}.paginationjs-nav{color:#6c757d;font-size:13px;margin:0 15px;white-space:nowrap}.paginationjs-size-changer{margin:0 15px}.paginationjs-size-changer select{padding:6px 10px;border:1px solid #ddd;border-radius:4px;background-color:#fff;font-size:13px;color:#333;cursor:pointer}.paginationjs-size-changer select:focus{outline:0;border-color:#007bff;box-shadow:0 0 0 2px rgba(0,123,255,.25)}.paginationjs-go-input{margin:0 15px}.paginationjs-go-input input[type=text]{padding:6px 10px;border:1px solid #ddd;border-radius:4px;width:60px;text-align:center;font-size:13px}.paginationjs-go-input input[type=text]:focus{outline:0;border-color:#007bff;box-shadow:0 0 0 2px rgba(0,123,255,.25)}.paginationjs-go-button{margin:0 15px}.paginationjs-go-button input[type=button]{padding:6px 12px;border:1px solid #007bff;background-color:#007bff;color:#fff;border-radius:4px;cursor:pointer;font-size:13px;transition:all .2s ease}.paginationjs-go-button input[type=button]:hover{background-color:#0056b3;border-color:#0056b3}.paginationjs-go-button input[type=button]:active{transform:translateY(1px)}@media (max-width:768px){.paginationjs{flex-direction:column;gap:15px}.paginationjs ul{gap:2px}.paginationjs a{padding:6px 10px;min-width:32px;font-size:13px}.paginationjs-go-button,.paginationjs-go-input,.paginationjs-nav,.paginationjs-size-changer{margin:5px 0}.paginationjs-go-input input[type=text]{width:50px}}@media (max-width:480px){.paginationjs ul{gap:1px}.paginationjs a{padding:5px 8px;min-width:28px;font-size:12px}.paginationjs .paginationjs-next a,.paginationjs .paginationjs-prev a{padding:5px 10px}}.paginationjs a:focus{outline:2px solid #007bff;outline-offset:2px}.paginationjs a:focus:not(:focus-visible){outline:0}@media (prefers-contrast:high){.paginationjs a{border-width:2px}.paginationjs .active a{border-width:3px}}@media (prefers-reduced-motion:reduce){.paginationjs a{transition:none}.paginationjs a:hover{transform:none}}