mirror of
https://github.com/Sendouc/sendou.ink.git
synced 2026-09-27 21:58:08 -05:00
226 lines
4.1 KiB
CSS
226 lines
4.1 KiB
CSS
.slot {
|
|
&[data-slot="0"] {
|
|
--slot-color: #f5d742;
|
|
}
|
|
|
|
&[data-slot="1"] {
|
|
--slot-color: #f5b8d0;
|
|
}
|
|
|
|
&[data-slot="2"] {
|
|
--slot-color: #90e8a8;
|
|
}
|
|
|
|
&[data-slot="3"] {
|
|
--slot-color: #8cd4f5;
|
|
}
|
|
}
|
|
|
|
.subtitle {
|
|
font-size: var(--font-xs);
|
|
font-weight: var(--weight-semi);
|
|
color: var(--graphic-text-dim);
|
|
}
|
|
|
|
.weaponsList {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--s-2);
|
|
}
|
|
|
|
.weaponRow {
|
|
position: relative;
|
|
display: grid;
|
|
grid-template-columns: auto 1fr auto;
|
|
align-items: center;
|
|
gap: var(--s-3);
|
|
padding: var(--s-2) var(--s-3) var(--s-2) var(--s-5);
|
|
background-color: var(--graphic-row-bg);
|
|
border: 1.5px solid var(--graphic-row-border);
|
|
border-radius: var(--radius-box);
|
|
|
|
/* a pill inside the box instead of a left border so the color is not cut by the rounded corners */
|
|
&::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset-block: var(--s-1-5);
|
|
left: var(--s-1-5);
|
|
width: 4px;
|
|
background-color: var(--slot-color);
|
|
border-radius: var(--radius-full);
|
|
}
|
|
}
|
|
|
|
.weaponBadge {
|
|
display: flex;
|
|
padding: var(--s-0-5);
|
|
background-color: oklch(0% 0 0 / 0.3);
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.weaponInfo {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.weaponName {
|
|
overflow: hidden;
|
|
font-size: var(--font-sm);
|
|
font-weight: var(--weight-extra);
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.weaponRoles {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--s-1-5);
|
|
margin-top: var(--s-0-5);
|
|
font-size: var(--font-xs);
|
|
font-weight: var(--weight-semi);
|
|
color: var(--graphic-text-dim);
|
|
}
|
|
|
|
.weaponRoleSeparator {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.kit {
|
|
display: flex;
|
|
gap: var(--s-1-5);
|
|
padding: var(--s-1-5);
|
|
background-color: oklch(0% 0 0 / 0.3);
|
|
border-radius: var(--radius-field);
|
|
}
|
|
|
|
.rangeChart {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--s-2);
|
|
}
|
|
|
|
.rangeRow {
|
|
display: grid;
|
|
grid-template-columns: auto 1fr 3rem;
|
|
align-items: center;
|
|
gap: var(--s-2);
|
|
}
|
|
|
|
.rangeTrack {
|
|
position: relative;
|
|
height: 14px;
|
|
overflow: hidden;
|
|
background-color: var(--graphic-row-bg);
|
|
border: 1.5px solid var(--graphic-row-border);
|
|
border-radius: var(--radius-full);
|
|
}
|
|
|
|
.rangeBar {
|
|
position: absolute;
|
|
inset-block: 0;
|
|
left: 0;
|
|
background-color: var(--slot-color);
|
|
border-radius: var(--radius-full);
|
|
|
|
/* the blast radius continues the bar, so its end stays square */
|
|
&.rangeBarWithBlast {
|
|
border-start-end-radius: 0;
|
|
border-end-end-radius: 0;
|
|
}
|
|
}
|
|
|
|
.rangeBlast {
|
|
position: absolute;
|
|
inset-block: 0;
|
|
background-color: color-mix(in oklch, var(--slot-color) 35%, transparent);
|
|
border-radius: 0 var(--radius-full) var(--radius-full) 0;
|
|
}
|
|
|
|
.rangeValue {
|
|
font-size: var(--font-sm);
|
|
font-weight: var(--weight-extra);
|
|
font-variant-numeric: tabular-nums;
|
|
text-align: right;
|
|
}
|
|
|
|
.combosList {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--s-2);
|
|
}
|
|
|
|
.comboRow {
|
|
display: grid;
|
|
grid-template-columns: 1fr auto;
|
|
align-items: center;
|
|
gap: var(--s-3);
|
|
}
|
|
|
|
.comboBar {
|
|
position: relative;
|
|
display: flex;
|
|
overflow: hidden;
|
|
background-color: var(--graphic-row-bg);
|
|
border: 1.5px solid var(--graphic-row-border);
|
|
border-radius: var(--radius-field);
|
|
}
|
|
|
|
.comboSegment {
|
|
display: flex;
|
|
flex-shrink: 0;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: var(--s-1);
|
|
/* the widths are damage shares, but a segment never gets narrower than its content */
|
|
min-width: fit-content;
|
|
height: 32px;
|
|
padding: 0 var(--s-2);
|
|
color: oklch(20% 0 0);
|
|
background-color: var(--slot-color);
|
|
}
|
|
|
|
.segmentDamage {
|
|
font-size: var(--font-xs);
|
|
font-weight: var(--weight-extra);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.segmentMultiplier {
|
|
margin-left: var(--s-0-5);
|
|
font-size: var(--font-2xs);
|
|
font-weight: var(--weight-semi);
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.lethalLine {
|
|
position: absolute;
|
|
inset-block: 0;
|
|
z-index: 1;
|
|
width: 0;
|
|
border-left: 2px dashed oklch(20% 0 0 / 0.6);
|
|
}
|
|
|
|
.comboTotal {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-end;
|
|
min-width: 3.5rem;
|
|
line-height: 1.15;
|
|
}
|
|
|
|
.comboDamage {
|
|
font-size: var(--font-md);
|
|
font-weight: var(--weight-extra);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.comboDamageLethal {
|
|
color: var(--graphic-win);
|
|
}
|
|
|
|
.comboHits {
|
|
font-size: var(--font-2xs);
|
|
font-weight: var(--weight-semi);
|
|
color: var(--graphic-text-dim);
|
|
}
|