/** * e-RSA Global Pagination Component Styles * File: public/assets/css/components/pagination.css * Handles full circular/capsule pagination, 5px button gaps, 1rem 4-sided card footer padding, and responsive mobile pagination. */ /* ========================================================================== Modern General Pagination: Rounded Full (Circle & Capsule) Replaces boxy square buttons with sleek circular numbers & pill controls ========================================================================== */ .pagination, .pagination.pagination-sm, .pagination-sm, .pagination.mb-0, .pagination.pagination-sm.mb-0 { gap: 8px !important; align-items: center !important; } .pagination .page-item, .pagination-sm .page-item { margin: 0 !important; } .pagination .page-link, .pagination .page-item .page-link, .pagination .page-item:not(:first-child) .page-link, .pagination .page-item + .page-item .page-link, .pagination-sm .page-link, .pagination-sm .page-item .page-link, .pagination-sm .page-item:not(:first-child) .page-link, .pagination-sm .page-item + .page-item .page-link, .page-link, .page-link-ajax { margin: 0 !important; margin-left: 0 !important; margin-right: 0 !important; min-width: 36px !important; height: 38px !important; padding: 0 16px !important; border-radius: 50rem !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; font-size: 0.85rem !important; font-weight: 600 !important; border: none !important; outline: none !important; box-shadow: none !important; transform: none !important; transition: transform 0.12s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease !important; background-color: var(--bs-card-bg, #ffffff); color: var(--bs-body-color, #707070); } /* Number buttons: Perfect circle */ .pagination .page-item:not(:first-child):not(:last-child) .page-link { width: 38px !important; min-width: 38px !important; height: 38px !important; padding: 0 !important; border-radius: 50% !important; } /* Previous / Next buttons: Symmetrical Capsule Pill (Equal width & height) */ .pagination .page-item:first-child .page-link, .pagination .page-item:last-child .page-link { border-radius: 50rem !important; min-width: 6.25rem !important; height: 38px !important; padding: 0 18px !important; text-align: center !important; } .pagination .page-link:focus, .pagination .page-link:focus-visible, .pagination .page-item .page-link:focus, .pagination .page-item .page-link:focus-visible, .page-link:focus, .page-link:focus-visible { box-shadow: none !important; outline: none !important; } /* Active Click Press Effect (Tactile feedback like primary buttons) */ .pagination .page-item:not(.disabled) .page-link:active, .pagination .page-link:not([disabled]):not(.disabled):active, .page-link:not([disabled]):not(.disabled):active { transform: scale(0.96) !important; transition-duration: 0.08s !important; box-shadow: none !important; filter: none !important; } /* Active page: Signature RSA Orange (Clean, Elevated, Zero Glow / Shadow) */ .pagination .page-item.active .page-link, .pagination .page-item.active .page-link:hover, .pagination .page-item.active .page-link:focus, .pagination .page-item.active .page-link:active, .pagination li.active > a:not(.page-link), .pagination li.active > a:not(.page-link):hover, .pagination li.active > a:not(.page-link):focus, .pagination li.active > a:not(.page-link):active { background-color: var(--bs-primary, #ff5911) !important; color: #ffffff !important; border: none !important; box-shadow: none !important; -webkit-box-shadow: none !important; filter: none !important; transform: none !important; } /* Disabled state */ .pagination .page-item.disabled .page-link, .pagination .page-link.disabled, .page-link[disabled] { pointer-events: auto !important; cursor: not-allowed !important; transform: none !important; } /* ========================================================================== Light Theme: Identical Clean Flat Card White Background (No Border, No Shadow) ========================================================================== */ /* ========================================================================== Light Theme: High-Contrast Modern Pill/Circle Buttons ========================================================================== */ [data-bs-theme="light"] .pagination .page-link { background-color: var(--bs-input-filled-bg, rgba(0, 0, 0, 0.06)) !important; color: var(--bs-gray-700, #4d4d4d) !important; border: none !important; box-shadow: none !important; } @media (hover: hover) and (pointer: fine) { [data-bs-theme="light"] .pagination .page-link:hover:not(.disabled):not([disabled]) { background-color: rgba(var(--bs-primary-rgb, 255, 89, 17), 0.15) !important; border: none !important; color: var(--bs-primary, #ff5911) !important; box-shadow: none !important; } } [data-bs-theme="light"] .pagination .page-link:focus:not(:active):not(.active), [data-bs-theme="light"] .pagination .page-item:not(.active) .page-link:focus { background-color: var(--bs-input-filled-bg, rgba(0, 0, 0, 0.06)) !important; color: var(--bs-gray-700, #4d4d4d) !important; outline: none !important; box-shadow: none !important; } [data-bs-theme="light"] .pagination .page-item:not(.disabled) .page-link:active { background-color: var(--bs-primary, #ff5911) !important; color: #ffffff !important; opacity: 0.92 !important; } [data-bs-theme="light"] .pagination .page-item.active .page-link { background-color: var(--bs-primary, #ff5911) !important; color: #ffffff !important; box-shadow: none !important; } [data-bs-theme="light"] .pagination .page-item.disabled .page-link { background-color: rgba(0, 0, 0, 0.03) !important; color: var(--bs-gray-400, #999999) !important; border: none !important; box-shadow: none !important; opacity: 1 !important; } /* ========================================================================== Dark Theme: High-Contrast Modern Pill/Circle Buttons ========================================================================== */ [data-bs-theme="dark"] .pagination .page-link, .dark-style .pagination .page-link { background-color: var(--bs-input-filled-bg, rgba(255, 255, 255, 0.06)) !important; color: rgba(255, 255, 255, 0.65) !important; border: none !important; border-width: 0 !important; outline: none !important; box-shadow: none !important; } @media (hover: hover) and (pointer: fine) { [data-bs-theme="dark"] .pagination .page-item:not(.active) .page-link:hover:not(.disabled):not([disabled]), [data-bs-theme="dark"] .pagination .page-link:hover:not(.disabled):not([disabled]):not(.active), .dark-style .pagination .page-item:not(.active) .page-link:hover:not(.disabled):not([disabled]), .dark-style .pagination .page-link:hover:not(.disabled):not([disabled]):not(.active) { background-color: rgba(var(--bs-primary-rgb, 255, 89, 17), 0.25) !important; border: none !important; border-width: 0 !important; color: var(--bs-primary-light, #fb814e) !important; box-shadow: none !important; } } [data-bs-theme="dark"] .pagination .page-link:focus:not(:active):not(.active), [data-bs-theme="dark"] .pagination .page-item:not(.active) .page-link:focus, .dark-style .pagination .page-link:focus:not(:active):not(.active), .dark-style .pagination .page-item:not(.active) .page-link:focus { background-color: var(--bs-input-filled-bg, rgba(255, 255, 255, 0.08)) !important; color: #ffffff !important; border: none !important; border-width: 0 !important; outline: none !important; box-shadow: none !important; } [data-bs-theme="dark"] .pagination .page-item:not(.disabled) .page-link:active, .dark-style .pagination .page-item:not(.disabled) .page-link:active { background-color: var(--bs-primary, #ff5911) !important; color: #ffffff !important; border: none !important; border-width: 0 !important; opacity: 0.95 !important; } /* Active page: Radiant RSA Orange (Never Dims, Vibrant Contrast, Luminous Subtle Glow) */ [data-bs-theme="dark"] .pagination .page-item.active .page-link, [data-bs-theme="dark"] .pagination .page-item.active .page-link:hover, [data-bs-theme="dark"] .pagination .page-item.active .page-link:focus, [data-bs-theme="dark"] .pagination .page-item.active .page-link:active, [data-bs-theme="dark"] .pagination li.active > a, [data-bs-theme="dark"] .pagination li.active > a:hover, [data-bs-theme="dark"] .pagination li.active > a:focus, .dark-style .pagination .page-item.active .page-link, .dark-style .pagination .page-item.active .page-link:hover, .dark-style .pagination .page-item.active .page-link:focus, .dark-style .pagination .page-item.active .page-link:active, .dark-style .pagination li.active > a, .dark-style .pagination li.active > a:hover, .dark-style .pagination li.active > a:focus { background: linear-gradient(135deg, #ff6b26 0%, #ff5200 100%) !important; background-color: var(--bs-primary, #ff5911) !important; color: #ffffff !important; font-weight: 700 !important; border: none !important; border-width: 0 !important; opacity: 1 !important; box-shadow: none !important; transform: none !important; } /* Card Footer Specific High-Contrast Pagination in Dark Mode */ [data-bs-theme="dark"] .card-footer .pagination .page-item.active .page-link, [data-bs-theme="dark"] .card-footer .pagination .page-item.active .page-link:hover, [data-bs-theme="dark"] .card-footer .pagination .page-item.active .page-link:focus, [data-bs-theme="dark"] .card-footer .pagination .page-item.active .page-link:active, .dark-style .card-footer .pagination .page-item.active .page-link, .dark-style .card-footer .pagination .page-item.active .page-link:hover, .dark-style .card-footer .pagination .page-item.active .page-link:focus, .dark-style .card-footer .pagination .page-item.active .page-link:active { background: linear-gradient(135deg, #ff6b26 0%, #ff5200 100%) !important; background-color: var(--bs-primary, #ff5911) !important; color: #ffffff !important; font-weight: 700 !important; border: none !important; border-width: 0 !important; opacity: 1 !important; box-shadow: none !important; } [data-bs-theme="dark"] .card-footer .pagination .page-item:not(.active):not(.disabled) .page-link, .dark-style .card-footer .pagination .page-item:not(.active):not(.disabled) .page-link { background-color: rgba(255, 255, 255, 0.06) !important; color: rgba(255, 255, 255, 0.65) !important; border: none !important; border-width: 0 !important; } [data-bs-theme="dark"] .pagination .page-item.disabled .page-link, .dark-style .pagination .page-item.disabled .page-link { background-color: rgba(255, 255, 255, 0.03) !important; color: rgba(255, 255, 255, 0.3) !important; border: none !important; border-width: 0 !important; box-shadow: none !important; opacity: var(--app-disabled-opacity, 0.55) !important; } /* ========================================================================== Responsive Mobile Pagination ========================================================================== */ /* Global: Hide empty pagination UL only — scoped to avoid hiding nav menus */ ul.pagination:empty, ul.pagination:not(:has(.page-item)) { display: none !important; } nav[aria-label]:not(:has(.page-item)):not(:has(.nav-link)):not(:has(a)):not(:has(button)) { display: none !important; } /* Card Footer Pagination Containers: Equal 4-sided padding (atas = bawah = kiri = kanan = 1rem / 16px) */ .card-footer:has(.pagination), .card-footer:has(nav[aria-label]), .card-footer[id*="PaginationFooter"], .card-footer[id*="paginationFooter"] { padding: 1rem !important; } /* Responsive Desktop vs Mobile Pagination Enforcement */ /* ========================================================================== Desktop Pagination (>= 768px): Strict Horizontal Row & Standardized Spacing ========================================================================== */ @media (min-width: 768px) { /* Ensure all standalone mobile pagination footers are strictly hidden on desktop (>= 768px) */ #referralMobilePaginationFooter, #userMobilePaginationFooter, #attendanceMobilePaginationFooter, #rankingMobilePaginationFooter, #teamMobilePaginationFooter, #sessionsMobilePaginationFooter, #participantsMobilePaginationFooter, #activityMobilePagination, #faqMobilePagination, #registrationPaginationFooterMobile, #dropoutPaginationFooterMobile, #classesMobilePaginationFooter, #materialsMobilePaginationFooter, #emailLogsMobilePaginationFooter, #auditLogsMobilePaginationFooter, #bugReportsMobilePaginationFooter, #shortenerMobilePaginationFooter, #attendanceRepeatMobilePaginationFooter, .d-md-none[id*="Pagination"], .d-md-none[id*="pagination"], [id*="MobilePagination"], [id*="mobilePagination"], [id*="PaginationFooterMobile"], [id*="paginationFooterMobile"] { display: none !important; } /* All desktop pagination footers inside cards: Always horizontal row, items spaced between */ .card-footer:has(.pagination), .card-footer[id*="PaginationFooter"], .card-footer[id*="paginationFooter"] { display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding: 1rem !important; gap: 1rem !important; } /* Desktop indicator text ("Halaman X / Y"): Left aligned, automatic width, 0 margin */ .card-footer:has(.pagination) small, .card-footer:has(.pagination) .small, .card-footer:has(.pagination) .text-muted, [id*="PaginationFooter"] small, [id*="paginationFooter"] small, [id*="PaginationFooter"] .small, [id*="paginationFooter"] .small, [id*="PaginationFooter"] .text-muted, [id*="paginationFooter"] .text-muted, [id*="PaginationInfo"], [id*="paginationInfo"] { width: auto !important; text-align: left !important; display: inline-block !important; margin: 0 !important; padding: 0 !important; line-height: 1.5 !important; } /* Desktop nav: auto width, flex on the right */ .card-footer:has(.pagination) nav, [id*="PaginationFooter"] nav, [id*="paginationFooter"] nav { margin: 0 !important; padding: 0 !important; display: flex !important; align-items: center !important; } } /* ========================================================================== Mobile Pagination (< 768px): Unified Vertical Column & Standardized Gaps ========================================================================== */ @media (max-width: 767.98px) { /* 1. Ensure all desktop-only pagination footers inside cards are strictly hidden on mobile (< 768px) */ .card-footer.d-none.d-md-flex, .card-footer.d-md-flex, .card-footer[id*="PaginationFooter"]:not(.d-md-none):not(#repeatClassPaginationFooter), #referralPaginationFooter, #userPaginationFooter, #attendancePaginationFooter, #rankingPaginationFooter, #teamPaginationFooter, #sessionsPaginationFooter, #participantsPaginationFooter, #activityPaginationFooter, #faqPaginationFooter, #registrationPaginationFooter, #dropoutPaginationFooter, #classesPaginationFooter, #materialsPaginationFooter, #emailLogsPaginationFooter, #auditLogsPaginationFooter, #bugReportsPaginationFooter, #shortenerPaginationFooter, #attendanceRepeatPaginationFooter, #modalRepeatPaginationFooter, #addParticipantsPaginationFooter { display: none !important; padding: 0 !important; margin: 0 !important; height: 0 !important; border: none !important; overflow: hidden !important; } /* 2. Unified Mobile Pagination Container: Standard Global Gap & Layout (MOBILE ONLY) */ #userMobilePaginationFooter:not(.d-none):has(.page-item), #classesMobilePaginationFooter:not(.d-none):has(.page-item), #materialsMobilePaginationFooter:not(.d-none):has(.page-item), #attendanceMobilePaginationFooter:not(.d-none):has(.page-item), #rankingMobilePaginationFooter:not(.d-none):has(.page-item), #teamMobilePaginationFooter:not(.d-none):has(.page-item), #sessionsMobilePaginationFooter:not(.d-none):has(.page-item), #participantsMobilePaginationFooter:not(.d-none):has(.page-item), #accessMobilePaginationFooter:not(.d-none):has(.page-item), #notesMobilePaginationFooter:not(.d-none):has(.page-item), #emailLogsMobilePaginationFooter:not(.d-none):has(.page-item), #auditLogsMobilePaginationFooter:not(.d-none):has(.page-item), #bugReportsMobilePaginationFooter:not(.d-none):has(.page-item), #shortenerMobilePaginationFooter:not(.d-none):has(.page-item), #contentMobilePaginationFooter:not(.d-none):has(.page-item), #registrationPaginationFooterMobile:not(.d-none):has(.page-item), #dropoutPaginationFooterMobile:not(.d-none):has(.page-item), #activityMobilePagination:not(.d-none):has(.page-item), #faqMobilePagination:not(.d-none):has(.page-item), div[id*="MobilePaginationFooter"]:not(.d-none):has(.page-item), div[id*="mobilePaginationFooter"]:not(.d-none):has(.page-item), div[id*="MobilePagination"]:not([id*="Controls"]):not(ul):not(nav):not(.pagination):not(.d-none):has(.page-item), div[id*="mobilePagination"]:not([id*="Controls"]):not(ul):not(nav):not(.pagination):not(.d-none):has(.page-item), div[id*="PaginationFooterMobile"]:not(.d-none):has(.page-item), div[id*="paginationFooterMobile"]:not(.d-none):has(.page-item), .card-footer.d-md-none:not(.d-none):has(.page-item), #dashboardUserMobilePaginationContainer > div:not(.d-none):has(.page-item), #repeatClassPaginationFooter:not(.d-none):has(.page-item) { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 0.75rem !important; /* Standar global presisi: 12px antara teks Halaman dan tombol */ text-align: center !important; width: 100% !important; padding-top: 0 !important; padding-bottom: 0 !important; padding-left: 0 !important; padding-right: 0 !important; margin-top: 1.25rem !important; margin-bottom: 0.75rem !important; } /* Dashboard wrapper: single consistent outer margin without doubling */ #dashboardUserMobilePaginationContainer { margin-top: 1.25rem !important; margin-bottom: 0.75rem !important; padding: 0 !important; } #dashboardUserMobilePaginationContainer > div, #dashboardUserMobilePaginationContainer #registrationPaginationFooterMobile, #dashboardUserMobilePaginationContainer #dropoutPaginationFooterMobile { margin-top: 0 !important; margin-bottom: 0 !important; padding: 0 !important; } /* 3. Sembunyikan pagination mobile jika data belum limit / tidak ada tombol halaman */ #userMobilePaginationFooter:not(:has(.page-item)), #classesMobilePaginationFooter:not(:has(.page-item)), #materialsMobilePaginationFooter:not(:has(.page-item)), #attendanceMobilePaginationFooter:not(:has(.page-item)), #rankingMobilePaginationFooter:not(:has(.page-item)), #teamMobilePaginationFooter:not(:has(.page-item)), #sessionsMobilePaginationFooter:not(:has(.page-item)), #participantsMobilePaginationFooter:not(:has(.page-item)), #accessMobilePaginationFooter:not(:has(.page-item)), #notesMobilePaginationFooter:not(:has(.page-item)), #emailLogsMobilePaginationFooter:not(:has(.page-item)), #auditLogsMobilePaginationFooter:not(:has(.page-item)), #bugReportsMobilePaginationFooter:not(:has(.page-item)), #shortenerMobilePaginationFooter:not(:has(.page-item)), #contentMobilePaginationFooter:not(:has(.page-item)), #registrationPaginationFooterMobile:not(:has(.page-item)), #dropoutPaginationFooterMobile:not(:has(.page-item)), #dashboardUserMobilePaginationContainer:not(:has(.page-item)), #activityMobilePagination:not(:has(.page-item)), #faqMobilePagination:not(:has(.page-item)), div[id*="MobilePaginationFooter"]:not(:has(.page-item)), div[id*="mobilePaginationFooter"]:not(:has(.page-item)), div[id*="PaginationFooterMobile"]:not(:has(.page-item)), div[id*="paginationFooterMobile"]:not(:has(.page-item)), div[id*="MobilePagination"]:not([id*="Controls"]):not(ul):not(nav):not(.pagination):not(:has(.page-item)), div[id*="mobilePagination"]:not([id*="Controls"]):not(ul):not(nav):not(.pagination):not(:has(.page-item)), .pagination-container:not(:has(.page-item)) { display: none !important; padding: 0 !important; margin: 0 !important; height: 0 !important; } /* 4. Page Indicator Text ("Halaman X / Y"): Strict zero margins so gap is 100% controlled by parent flex gap */ [id*="MobilePagination"] small, [id*="mobilePagination"] small, [id*="MobilePagination"] .small, [id*="mobilePagination"] .small, [id*="MobilePagination"] .text-muted, [id*="mobilePagination"] .text-muted, [id*="PaginationFooter"] small, [id*="paginationFooter"] small, [id*="PaginationFooter"] .small, [id*="paginationFooter"] .small, [id*="PaginationFooter"] .text-muted, [id*="paginationFooter"] .text-muted, [id*="PaginationFooterMobile"] small, [id*="paginationFooterMobile"] small, [id*="PaginationFooterMobile"] .text-muted, [id*="paginationFooterMobile"] .text-muted, [id*="PaginationContainer"] small, [id*="paginationContainer"] small, [id*="PaginationContainer"] .small, [id*="paginationContainer"] .small, [id*="PaginationInfo"], [id*="paginationInfo"], .pagination-info, .card-footer:has(.pagination) small, .card-footer:has(.pagination) .small, .card-footer:has(.pagination) .text-muted { width: 100% !important; text-align: center !important; display: block !important; margin: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; margin-block: 0 !important; padding: 0 !important; font-size: 0.8125rem !important; line-height: 1.4 !important; } /* 5.