degmods.com/src/styles/pagination.css

107 lines
2.1 KiB
CSS
Raw Normal View History

2024-07-11 12:15:03 +00:00
.PaginationMain {
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.PaginationMainInside {
width: 100%;
max-width: 600px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
grid-gap: 10px;
height: 50px;
}
@media (max-width: 768px) {
.PaginationMainInside {
flex-direction: row;
height: unset;
max-width: unset;
}
}
.PaginationMainInsideBox {
transition: ease 0.4s;
text-decoration: unset;
color: unset;
padding: 10px 20px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
2024-08-06 10:46:38 +00:00
background: rgba(35, 35, 35, 0);
2024-07-11 12:15:03 +00:00
border-radius: 10px;
height: 100%;
2024-08-06 10:46:38 +00:00
box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0);
2024-07-11 12:15:03 +00:00
transform: scale(1);
2024-08-06 10:46:38 +00:00
border: solid 1px rgba(255, 255, 255, 0);
color: rgba(255, 255, 255, 0.1);
2024-07-11 12:15:03 +00:00
font-weight: bold;
}
.PaginationMainInsideBox.PaginationMainInsideBoxArrows {
}
2024-08-06 10:46:38 +00:00
.PaginationMainInsideBox.PaginationMainInsideBoxArrows:disabled {
cursor: not-allowed;
}
2024-07-11 12:15:03 +00:00
@media (max-width: 768px) {
.PaginationMainInsideBox.PaginationMainInsideBoxArrows {
order: 2;
flex-grow: 1;
}
}
.PaginationMainInsideBox:hover {
transition: ease 0.4s;
text-decoration: unset;
color: unset;
background: linear-gradient(to top right, #232323, #262626, #232323);
2024-08-06 10:46:38 +00:00
box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.1);
2024-07-11 12:15:03 +00:00
transform: scale(1.01);
2024-08-06 10:46:38 +00:00
border: solid 1px rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.85);
2024-07-11 12:15:03 +00:00
}
.PaginationMainInsideBox:active {
transition: ease 0.1s;
transform: scale(0.98);
}
.PaginationMainInsideBox.PMIBActive {
transition: ease 0.4s;
text-decoration: unset;
color: unset;
transform: scale(1.01);
2024-08-06 10:46:38 +00:00
border: solid 1px rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.75);
2024-07-11 12:15:03 +00:00
}
.PMIBDots {
border: unset;
background: unset;
box-shadow: unset;
}
.PaginationMainInsideBoxGroup {
display: flex;
flex-direction: row;
justify-content: center;
grid-gap: 10px;
}
@media (max-width: 768px) {
.PaginationMainInsideBoxGroup {
width: 100%;
order: 1;
justify-content: space-around;
}
}