mirror of
https://github.com/Sendouc/sendou.ink.git
synced 2026-09-24 12:18:21 -05:00
106 lines
1.7 KiB
CSS
106 lines
1.7 KiB
CSS
.container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--s-4);
|
|
}
|
|
|
|
.collapseToggle {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--s-2);
|
|
background-color: transparent;
|
|
border: none;
|
|
cursor: pointer;
|
|
font-weight: var(--weight-semi);
|
|
color: var(--color-text);
|
|
}
|
|
|
|
.collapseArrow {
|
|
transition: transform 0.2s;
|
|
}
|
|
|
|
.collapseArrowCollapsed {
|
|
transform: rotate(-90deg);
|
|
}
|
|
|
|
.categorizationToggle {
|
|
display: flex;
|
|
gap: var(--s-2);
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.weaponGrid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: var(--s-4);
|
|
}
|
|
|
|
@container (width < 640px) {
|
|
.weaponGrid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
}
|
|
|
|
@container (width < 560px) {
|
|
.weaponGrid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
.categorySection {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--s-2);
|
|
}
|
|
|
|
.categoryHeader {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--s-2);
|
|
padding-bottom: var(--s-1);
|
|
border-bottom: 3px solid var(--color-border);
|
|
}
|
|
|
|
.categoryName {
|
|
font-weight: var(--weight-semi);
|
|
font-size: var(--font-sm);
|
|
text-transform: capitalize;
|
|
}
|
|
|
|
.categoryWeapons {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--s-1);
|
|
}
|
|
|
|
.weaponButton {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: var(--s-1);
|
|
background-color: var(--color-bg-higher);
|
|
border: 2px solid transparent;
|
|
border-radius: var(--radius-box);
|
|
cursor: pointer;
|
|
transition: background-color 0.15s;
|
|
|
|
&:hover:not(:disabled),
|
|
&:focus-visible {
|
|
background-color: color-mix(
|
|
in oklch,
|
|
var(--color-bg-higher) 85%,
|
|
var(--color-text)
|
|
);
|
|
}
|
|
|
|
&:disabled {
|
|
opacity: 0.6;
|
|
cursor: not-allowed;
|
|
}
|
|
}
|
|
|
|
.weaponButtonSelected {
|
|
background-color: var(--color-bg-high);
|
|
border: 2px solid var(--color-border);
|
|
}
|