degmods.com/src/styles/pagination.css

104 lines
2.0 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;
background: rgba(35,35,35,0);
border-radius: 10px;
height: 100%;
box-shadow: 0 0 8px 0 rgba(0,0,0,0);
transform: scale(1);
border: solid 1px rgba(255,255,255,0);
color: rgba(255,255,255,0.1);
font-weight: bold;
}
.PaginationMainInsideBox.PaginationMainInsideBoxArrows {
}
@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);
box-shadow: 0 0 16px 0 rgba(0,0,0,0.1);
transform: scale(1.01);
border: solid 1px rgba(255,255,255,0.1);
color: rgba(255,255,255,0.85);
}
.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);
border: solid 1px rgba(255,255,255,0.1);
color: rgba(255,255,255,0.75);
}
.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;
}
}