mirror of
https://github.com/Sendouc/sendou.ink.git
synced 2026-11-13 23:56:00 -06:00
166 lines
2.7 KiB
CSS
166 lines
2.7 KiB
CSS
.label {
|
|
font-size: var(--font-2xs);
|
|
font-weight: var(--weight-semi);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
color: var(--color-text-high);
|
|
}
|
|
|
|
.heroResult {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: var(--s-2);
|
|
padding-top: var(--s-3);
|
|
border-top: 1px solid
|
|
color-mix(
|
|
in oklch,
|
|
var(--hero-tint, var(--color-accent)) 20%,
|
|
var(--color-border)
|
|
);
|
|
}
|
|
|
|
.heroScore {
|
|
font-size: var(--font-lg);
|
|
font-weight: var(--weight-extra);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.resultBand {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: var(--s-3);
|
|
padding: var(--s-2-5) var(--s-3);
|
|
border-radius: var(--radius-box);
|
|
}
|
|
|
|
.resultBandWin,
|
|
.resultBandLoss {
|
|
border: 1px solid
|
|
color-mix(in oklch, var(--band-tint) 25%, var(--color-border));
|
|
background: linear-gradient(
|
|
100deg,
|
|
color-mix(in oklch, var(--band-tint) 18%, var(--color-bg-high)),
|
|
var(--color-bg-high) 75%
|
|
);
|
|
}
|
|
|
|
.resultBandWin {
|
|
--band-tint: var(--color-success);
|
|
color: var(--color-success-high);
|
|
}
|
|
|
|
.resultBandLoss {
|
|
--band-tint: var(--color-error);
|
|
color: var(--color-error-high);
|
|
}
|
|
|
|
.verdict {
|
|
font-size: var(--font-md);
|
|
font-weight: var(--weight-bold);
|
|
}
|
|
|
|
.columns {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: var(--s-6);
|
|
|
|
@container (width < 400px) {
|
|
gap: var(--s-3);
|
|
}
|
|
}
|
|
|
|
.columnsStackNarrow {
|
|
@container (width < 400px) {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
gap: var(--s-4);
|
|
}
|
|
}
|
|
|
|
.promotionFrom {
|
|
@container (width < 400px) {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.column {
|
|
display: grid;
|
|
gap: var(--s-1-5);
|
|
align-content: start;
|
|
min-width: 0;
|
|
}
|
|
|
|
.plusDelta {
|
|
color: var(--color-success-high);
|
|
font-weight: var(--weight-bold);
|
|
}
|
|
|
|
.minusDelta {
|
|
color: var(--color-error-high);
|
|
font-weight: var(--weight-bold);
|
|
}
|
|
|
|
.stats {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
gap: var(--s-2);
|
|
}
|
|
|
|
@container (width < 480px) {
|
|
.stats {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
}
|
|
|
|
.stat {
|
|
display: grid;
|
|
gap: 2px;
|
|
align-content: start;
|
|
min-width: 0;
|
|
padding: var(--s-2-5);
|
|
background-color: var(--color-bg-high);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-box);
|
|
}
|
|
|
|
.statValue {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--s-1-5);
|
|
min-height: 28px;
|
|
font-size: var(--font-lg);
|
|
font-weight: var(--weight-bold);
|
|
font-variant-numeric: tabular-nums;
|
|
min-width: 0;
|
|
}
|
|
|
|
.statMap {
|
|
position: relative;
|
|
isolation: isolate;
|
|
overflow: hidden;
|
|
color: var(--color-text-on-dark);
|
|
|
|
& .label {
|
|
color: inherit;
|
|
opacity: 0.85;
|
|
}
|
|
}
|
|
|
|
.statMapImageContainer {
|
|
display: contents;
|
|
}
|
|
|
|
.statMapImage {
|
|
position: absolute;
|
|
inset: 0;
|
|
z-index: -1;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
filter: brightness(0.4);
|
|
}
|
|
|
|
.alignEnd {
|
|
text-align: right;
|
|
}
|