47db505228
* Minor improvements to pagination functions * Update pagination styles with enhanced UI/UX design - Implemented full-width layout with flexible page numbers - Added fixed-width arrow buttons for consistent navigation - Enhanced hover and active states for better user interaction - Improved responsive design with proper flex layout - Added comprehensive styling for disabled and ellipsis states * Simplify pagination logic and use SVG files to avoid repeated definition * Remove change to jsconfig.json * Remove comments and classes --------- Co-authored-by: delize <4028612+delize@users.noreply.github.com> Co-authored-by: Jimmy <jimmy@cai.im>
50 lines
1.2 KiB
SCSS
50 lines
1.2 KiB
SCSS
.pagination {
|
|
display: flex;
|
|
background-color: var(--card-background);
|
|
box-shadow: var(--shadow-l1);
|
|
border-radius: var(--card-border-radius);
|
|
overflow: hidden;
|
|
|
|
.page-link {
|
|
padding: 16px 0;
|
|
margin: 0;
|
|
border-radius: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex: 1 1 auto;
|
|
min-width: 48px;
|
|
color: var(--card-text-color-secondary);
|
|
text-decoration: none;
|
|
|
|
&:first-child,
|
|
&:last-child {
|
|
flex: 0 0 48px;
|
|
padding: 16px;
|
|
}
|
|
|
|
&:hover:not(.current):not(.disabled) {
|
|
background-color: var(--card-background-selected);
|
|
opacity: 0.8;
|
|
}
|
|
|
|
&.current {
|
|
background-color: var(--card-background-selected);
|
|
color: var(--card-text-color-main);
|
|
font-weight: bold;
|
|
cursor: default;
|
|
}
|
|
|
|
&.disabled {
|
|
opacity: 0.3;
|
|
cursor: not-allowed;
|
|
pointer-events: none;
|
|
color: var(--card-text-color-secondary);
|
|
}
|
|
|
|
svg {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
}
|
|
} |