/* |-------------------------------------------------------------------------- | Универсальная пагинация PEA-CMS |-------------------------------------------------------------------------- | Используется шаблоном app/Views/partials/pagination.php. | Цвета наследуются от текущей темы сайта. |-------------------------------------------------------------------------- */ .pagination { display: flex; align-items: center; justify-content: center; gap: 10px; max-width: 100%; margin: 34px 0 8px; } .pagination-pages { display: flex; align-items: center; gap: 6px; min-width: 0; } .pagination-button, .pagination-page { box-sizing: border-box; display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; min-width: 42px; min-height: 42px; padding: 0 10px; border: 1px solid var(--border, #d9e0ea); border-radius: 11px; background: var(--surface, #ffffff); color: var(--text-soft, #64748b); font-size: 0.91rem; font-weight: 700; line-height: 1; text-align: center; text-decoration: none; transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 160ms ease; } .pagination a.pagination-button:hover, .pagination a.pagination-page:hover { border-color: var(--primary, #2563eb); background: var(--bg-soft, #eff6ff); color: var(--primary, #2563eb); box-shadow: 0 5px 14px rgb(37 99 235 / 12%); transform: translateY(-1px); } .pagination a.pagination-button:focus-visible, .pagination a.pagination-page:focus-visible { border-color: var(--primary, #2563eb); outline: 2px solid var(--primary, #2563eb); outline-offset: 3px; } /* * В шаблоне текущая страница — , * поэтому hover и фокус ссылки к ней не применяются. */ .pagination-page.is-current { border-color: var(--primary, #2563eb); background: var(--primary, #2563eb); color: var(--primary-text, #ffffff); box-shadow: 0 5px 14px rgb(37 99 235 / 18%); } .pagination-arrow { font-size: 1.55rem; font-weight: 400; line-height: 0.85; } /* * Неактивная стрелка в шаблоне — , * а не ссылка: переход по ней невозможен. */ .pagination-button.is-disabled { border-color: var(--border, #d9e0ea); background: var(--bg-soft, #f1f5f9); color: var(--text-faint, #94a3b8); box-shadow: none; opacity: 0.7; } .pagination-dots { box-sizing: border-box; display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; min-width: 25px; min-height: 42px; color: var(--text-faint, #94a3b8); font-size: 1.15rem; font-weight: 700; line-height: 1; user-select: none; } /* * Внутренняя прокрутка сохраняет доступ ко всем * номерам страниц без горизонтального скролла сайта. */ @media (max-width: 620px) { .pagination { gap: 6px; } .pagination-pages { flex: 0 1 auto; max-width: 100%; overflow-x: auto; overflow-y: hidden; padding: 4px 2px 7px; scrollbar-width: thin; scrollbar-color: var(--border-strong, #b8c5d4) transparent; } .pagination-button, .pagination-page { min-width: 40px; min-height: 40px; padding: 0 8px; border-radius: 10px; } .pagination-dots { min-height: 40px; } } @media (max-width: 380px) { .pagination { gap: 4px; } .pagination-pages { gap: 4px; } .pagination-button, .pagination-page { min-width: 38px; min-height: 38px; padding: 0 6px; } .pagination-dots { min-width: 19px; min-height: 38px; } } /* * Тёмная тема определяется атрибутом layout: * . */ html[data-theme="dark"] .pagination a.pagination-button:hover, html[data-theme="dark"] .pagination a.pagination-page:hover { box-shadow: 0 5px 14px rgb(0 0 0 / 12%); } html[data-theme="dark"] .pagination-page.is-current { box-shadow: 0 5px 14px rgb(0 0 0 / 16%); } @media (prefers-reduced-motion: reduce) { .pagination-button, .pagination-page { transition: none; } .pagination a.pagination-button:hover, .pagination a.pagination-page:hover { transform: none; } }