/* Pagy pagination navigation * Brand-styled: square corners, keyline borders, brand-orange current page */ .pagy-pagination nav.pagy { display: inline-flex; align-items: center; } .pagy-pagination nav.pagy > a { display: inline-flex; align-items: center; justify-content: center; padding: 0.5rem 0.875rem; font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; border: 1px solid rgba(18, 18, 18, 0.2); margin-left: -1px; transition: background-color 0.15s ease; text-decoration: none; min-width: 2.5rem; } /* Linked pages */ .pagy-pagination nav.pagy > a[href] { color: #374151; background: #fff; } .pagy-pagination nav.pagy > a[href]:hover { background: #f9fafb; } /* Current page */ .pagy-pagination nav.pagy > a[aria-current="page"] { color: #121212; background: #FFC738; border-color: #FFC738; font-weight: 600; z-index: 1; } /* Disabled (prev/next at edges) */ .pagy-pagination nav.pagy > a[aria-disabled="true"]:not([aria-current], [role="separator"]) { color: #9ca3af; background: #f9fafb; cursor: not-allowed; } /* Gap */ .pagy-pagination nav.pagy > a[role="separator"] { color: #9ca3af; background: #fff; cursor: default; } /* Dark mode — gated on the .dark class added to by dark_mode_controller.js, * matching Tailwind's class-based dark-mode strategy used throughout the rest * of the app. Previously used @media (prefers-color-scheme: dark), which read * the OS preference instead of the app's theme toggle — so a user with a dark * OS but the app set to light still saw dark pagination. */ .dark .pagy-pagination nav.pagy > a { border-color: rgba(255, 255, 255, 0.1); } .dark .pagy-pagination nav.pagy > a[href] { color: #d1d5db; background: #111827; } .dark .pagy-pagination nav.pagy > a[href]:hover { background: #1f2937; } .dark .pagy-pagination nav.pagy > a[aria-current="page"] { color: #121212; background: #FFC738; border-color: #FFC738; } .dark .pagy-pagination nav.pagy > a[aria-disabled="true"]:not([aria-current], [role="separator"]) { color: #4b5563; background: rgba(31, 41, 55, 0.5); } .dark .pagy-pagination nav.pagy > a[role="separator"] { color: #6b7280; background: #111827; }