mirror of
https://github.com/Sendouc/sendou.ink.git
synced 2026-03-21 18:04:39 -05:00
63 lines
1.2 KiB
CSS
63 lines
1.2 KiB
CSS
.map-pool__info-square {
|
|
display: grid;
|
|
background-color: var(--bg-lighter);
|
|
background-image: url("/svg/background-pattern.svg");
|
|
border-radius: var(--rounded);
|
|
font-size: var(--fonts-xl);
|
|
font-weight: var(--semi-bold);
|
|
place-items: center;
|
|
}
|
|
|
|
.map-pool {
|
|
display: grid;
|
|
gap: 1rem;
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
|
|
.map-pool__info-square__text {
|
|
font-weight: var(--bold);
|
|
}
|
|
|
|
.map-pool__stage-images-container {
|
|
position: relative;
|
|
}
|
|
|
|
.map-pool__stage-image {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: var(--rounded);
|
|
}
|
|
|
|
.map-pool__mode-image {
|
|
width: 1.5rem;
|
|
height: 1.5rem;
|
|
}
|
|
|
|
.map-pool__stage-image-disabled {
|
|
filter: grayscale(100%);
|
|
}
|
|
|
|
.map-pool__mode-images-container {
|
|
position: absolute;
|
|
display: flex;
|
|
padding: var(--s-1);
|
|
backdrop-filter: blur(5px) grayscale(25%);
|
|
border-end-end-radius: var(--rounded);
|
|
border-start-start-radius: var(--rounded);
|
|
gap: var(--s-2);
|
|
inset-block-start: 0;
|
|
inset-inline-start: 0;
|
|
}
|
|
|
|
@media screen and (min-width: 480px) {
|
|
.map-pool {
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 640px) {
|
|
.map-pool {
|
|
grid-template-columns: repeat(4, minmax(1px, 200px));
|
|
}
|
|
}
|