Goondex/internal/web/static/css/gx/GX_Pagination.css
Stu Leak 16fb407a3c v0.1.0-dev4: Add web frontend with UI component library
- Implement full web interface with Go html/template server
- Add GX component library (buttons, dialogs, tables, forms, etc.)
- Create scene/performer/studio/movie detail and listing pages
- Add Adult Empire scraper for additional metadata sources
- Implement movie support with database schema
- Add import and sync services for data management
- Include comprehensive API and frontend documentation
- Add custom color scheme and responsive layout

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-17 10:47:30 -05:00

78 lines
1.4 KiB
CSS

/*
* GX PAGINATION
* Dark mode + Flamingo Pink medium glow
*/
.gx-pagination {
display: flex;
justify-content: center;
align-items: center;
gap: 0.4rem;
margin: 2.5rem 0;
padding: 0.5rem;
flex-wrap: wrap;
}
/* Page Button (core style) */
.gx-page-btn {
min-width: 38px;
height: 38px;
display: flex;
align-items: center;
justify-content: center;
padding: 0 0.75rem;
font-size: 0.95rem;
background: var(--color-bg-card);
color: var(--color-text-secondary);
border: 1px solid var(--color-border-soft);
border-radius: var(--radius);
cursor: pointer;
transition: all var(--transition-fast);
}
.gx-page-btn:hover {
color: var(--color-brand);
border-color: var(--color-brand);
box-shadow: var(--shadow-glow-pink-soft);
}
/* Active page */
.gx-page-btn.active {
color: var(--color-brand-hover);
background: rgba(255, 79, 163, 0.15);
border-color: var(--color-brand);
box-shadow: var(--shadow-glow-pink);
}
/* Disabled */
.gx-page-btn.disabled {
opacity: 0.35;
pointer-events: none;
}
/* Ellipsis */
.gx-ellipsis {
padding: 0 0.5rem;
opacity: 0.4;
}
/* Mobile responsiveness */
@media (max-width: 520px) {
.gx-page-btn {
min-width: 34px;
height: 34px;
font-size: 0.85rem;
}
.gx-page-btn.text-label {
display: none; /* hide 'Next' / 'Previous' text labels */
}
}