/* * FotoGrids - Pagination shared base. * * Loaded by every pagination method module (load-more, page-buttons, * endless-scroll) via Pagination_Common::common_assets(). Holds: * * - .fg-pagination declares the shared CSS variables * (button look + font) so per-method * files can override by re-declaring * the same custom property on a * descendant scope (e.g. load-more's * roomier padding) * - .fg-pagination__btn base button look - load-more's button * and page-buttons' prev/next/number * buttons both carry this class * - .fg-pagination__btn:hover hover state - shared * - .fg-pagination__btn:disabled disabled state - shared * - .fg-pagination__btn.fg-is-loading "loading" state - shared (load-more * adds this during async fetch) * - .fg-pagination__status sr-only live region - used by all * three methods * * Per-method specifics (wrapper layout, alignment classes, the active-page * state, the .fg-pagination__icon SVG wrapper, full-width modifier, * endless-scroll loader, etc.) live in the sibling per-method CSS files. * * Theming hooks (CSS variables, declared on .fg-pagination): * --fg-pagination-btn-border-width 1px * --fg-pagination-btn-border-style solid * --fg-pagination-btn-border-color currentColor * --fg-pagination-btn-bg transparent * --fg-pagination-btn-color inherit * --fg-pagination-btn-padding 0.4em 0.8em (load-more overrides on its own scope) * --fg-pagination-btn-radius 4px * --fg-pagination-btn-hover-bg currentColor * --fg-pagination-btn-hover-color transparent * --fg-pagination-btn-gap 0.4em * --fg-pagination-btn-min-width 2.4em * --fg-pagination-btn-transition background-color 0.15s ease, color 0.15s ease * --fg-pagination-btn-disabled-opacity 0.4 * --fg-pagination-btn-loading-opacity 0.6 * --fg-pagination-font-family inherit * --fg-pagination-font-size inherit * --fg-pagination-font-style inherit * --fg-pagination-font-variant inherit * --fg-pagination-font-weight inherit * --fg-pagination-line-height inherit */ .fotogrids-collection.fotogrids-gallery .fg-pagination { --fg-pagination-base-size: 8px; /* * Theming hooks. Each --fg-pagination-btn-* var prefers a user-set * value from the Styling subtab in pagination.json (emitted by * Pagination_Common::common_style_vars() as --fg-pagination-button-*), * falling back to the previous literal default when nothing is set. * Both pagination methods that render visible buttons (Load More and * Page Buttons) read from this same .fg-pagination scope, so a single * Styling tab drives both. */ --fg-pagination-btn-border-width: var(--fg-pagination-button-border-width, 1px); --fg-pagination-btn-border-style: solid; --fg-pagination-btn-border-color: var(--fg-pagination-button-border-color, currentColor); --fg-pagination-btn-bg: var(--fg-pagination-button-bg, transparent); --fg-pagination-btn-color: var(--fg-pagination-button-color, inherit); --fg-pagination-btn-padding: var(--fg-pagination-button-padding, calc(var(--fg-pagination-base-size) * 1.5) calc(var(--fg-pagination-base-size) * 2)); --fg-pagination-btn-radius: var(--fg-pagination-button-radius, calc(var(--fg-pagination-base-size) / 2)); --fg-pagination-btn-box-shadow: var(--fg-pagination-button-box-shadow, none); --fg-pagination-btn-hover-bg: var(--fg-pagination-button-hover-bg, rgba(60, 70, 240, 0.05)); --fg-pagination-btn-hover-color: var(--fg-pagination-button-hover-color, var(--fg-colors-blue)); --fg-pagination-btn-hover-border-color: var(--fg-pagination-button-hover-border-color, var(--fg-pagination-btn-border-color)); --fg-pagination-btn-active-bg: var(--fg-pagination-button-active-bg, var(--fg-colors-blue)); --fg-pagination-btn-active-color: var(--fg-pagination-button-active-color, var(--fg-colors-white)); --fg-pagination-btn-active-border-color: var(--fg-pagination-button-active-border-color, var(--fg-colors-blue)); --fg-pagination-btn-focus-bg: var(--fg-pagination-button-focus-bg, var(--fg-pagination-btn-hover-bg)); --fg-pagination-btn-focus-color: var(--fg-pagination-button-focus-color, var(--fg-pagination-btn-hover-color)); --fg-pagination-btn-focus-border-color: var(--fg-pagination-button-focus-border-color, var(--fg-pagination-btn-hover-border-color)); --fg-pagination-btn-gap: var(--fg-pagination-base-size); --fg-pagination-btn-min-width: calc(var(--fg-pagination-base-size) * 3); --fg-pagination-btn-transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; --fg-pagination-btn-disabled-opacity: 0.4; --fg-pagination-btn-loading-opacity: 0.6; --fg-pagination-btn-font-family: var(--fg-pagination-button-font-family, inherit); --fg-pagination-btn-font-size: var(--fg-pagination-button-font-size, calc(var(--fg-pagination-base-size) * 1.75)); --fg-pagination-btn-font-style: var(--fg-pagination-button-font-style, normal); --fg-pagination-btn-font-variant: normal; --fg-pagination-btn-font-weight: var(--fg-pagination-button-font-weight, 500); --fg-pagination-btn-line-height: var(--fg-pagination-button-line-height, 1); --fg-pagination-btn-letter-spacing: var(--fg-pagination-button-letter-spacing, normal); --fg-pagination-btn-word-spacing: var(--fg-pagination-button-word-spacing, normal); --fg-pagination-btn-text-transform: none; /* * Distance From Items - margin above the pagination bar. Driven by * the `pagination_distance_from_items` responsive_range setting via * Pagination_Common::common_style_vars(), with the original 2x-base * fallback used when the variable is absent. */ margin-top: var(--fg-pagination-distance, calc(var(--fg-pagination-base-size) * 2)); } .fotogrids-collection.fotogrids-gallery .fg-pagination__btn { appearance: none; border-width: var( --fg-pagination-btn-border-width ); border-style: var( --fg-pagination-btn-border-style ); border-color: var( --fg-pagination-btn-border-color ); background: var( --fg-pagination-btn-bg ); color: var( --fg-pagination-btn-color ); padding: var( --fg-pagination-btn-padding ); border-radius: var( --fg-pagination-btn-radius ); box-shadow: var( --fg-pagination-btn-box-shadow ); font-family: var( --fg-pagination-btn-font-family ); font-size: var( --fg-pagination-btn-font-size ); font-style: var( --fg-pagination-btn-font-style ); font-variant: var( --fg-pagination-btn-font-variant ); font-weight: var( --fg-pagination-btn-font-weight ); line-height: var( --fg-pagination-btn-line-height ); letter-spacing: var( --fg-pagination-btn-letter-spacing ); word-spacing: var( --fg-pagination-btn-word-spacing ); text-transform: var( --fg-pagination-btn-text-transform ); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: var( --fg-pagination-btn-gap ); min-width: var( --fg-pagination-btn-min-width ); transition: var( --fg-pagination-btn-transition ); } .fotogrids-collection.fotogrids-gallery .fg-pagination__btn:hover:not( :disabled ):not( .fg-is-loading ):not( .fg-is-active ) { background: var( --fg-pagination-btn-hover-bg ); color: var( --fg-pagination-btn-hover-color ); border-color: var( --fg-pagination-btn-hover-border-color ); } .fotogrids-collection.fotogrids-gallery .fg-pagination__btn:focus-visible:not( :disabled ):not( .fg-is-loading ):not( .fg-is-active ) { background: var( --fg-pagination-btn-focus-bg ); color: var( --fg-pagination-btn-focus-color ); border-color: var( --fg-pagination-btn-focus-border-color ); } .fotogrids-collection.fotogrids-gallery .fg-pagination__btn:disabled { opacity: var( --fg-pagination-btn-disabled-opacity ); cursor: not-allowed; } .fotogrids-collection.fotogrids-gallery .fg-pagination__btn.fg-is-loading { opacity: var( --fg-pagination-btn-loading-opacity ); cursor: progress; } /* * Visually-hidden status region used by all three pagination methods for * screen-reader announcements (aria-live=polite). One ruleset, one source * of truth. */ .fotogrids-collection.fotogrids-gallery .fg-pagination__status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect( 0, 0, 0, 0 ); white-space: nowrap; }