Leahnaya/sendou.ink
1
0
Fork 0
mirror of https://github.com/Sendouc/sendou.ink.git synced 2026-09-29 14:50:13 -05:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Rework MatchCard expanded styles

Browse Source
This commit is contained in:
Kalle
2026-09-25 07:20:35 +03:00
parent ac298a052e
commit d92debd8f9
2 changed files with 107 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
app/features/scanner/components/MatchCard.module.css
View File

@@ -342,14 +342,6 @@ button.expand {
border-radius: var(--radius-box);
background: color-mix(in oklab, var(--color-bg-high) 60%, transparent);
border: var(--border-width) solid var(--color-border);
&.teamWin {
border-color: var(--color-success-low);
}
&.teamLoss {
border-color: var(--color-error-low);
}
}
.teamHeading {
@@ -469,50 +461,48 @@ button.expand {
}
}
.builds {
.abilities {
display: flex;
flex-direction: column;
gap: var(--s-2);
align-items: center;
gap: 2px;
}
.abilitySlot {
width: 26px;
height: 26px;
}
.buildButton {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
margin-inline-start: var(--s-1);
padding: 0;
border: none;
border-radius: var(--radius-full);
background: var(--color-bg-higher);
cursor: pointer;
&:hover {
box-shadow: 0 0 0 2px var(--color-fg-accent);
}
&:focus-visible {
outline: var(--focus-ring);
}
}
.buildPopover {
padding: var(--s-3);
}
.buildGrid {
display: flex;
flex-wrap: wrap;
gap: var(--s-3) var(--s-4);
}
.build {
display: flex;
flex-direction: column;
gap: var(--s-1);
}
.buildHead {
display: flex;
align-items: center;
gap: var(--s-1-5);
font-size: var(--font-2xs);
font-weight: var(--weight-semi);
}
.buildName {
max-width: 9rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.buildRows {
display: flex;
flex-direction: column;
gap: 2px;
}
.buildRow {
display: flex;
align-items: center;
gap: 2px;
min-height: 22px;
display: grid;
grid-template-columns: repeat(4, max-content);
place-items: center;
gap: var(--s-2) var(--s-1);
}
@media (prefers-reduced-motion: reduce) {