mirror of
https://github.com/Sendouc/sendou.ink.git
synced 2026-09-24 12:18:21 -05:00
100 lines
2.0 KiB
CSS
100 lines
2.0 KiB
CSS
.typeBadge {
|
|
font-size: var(--font-xs);
|
|
font-weight: var(--weight-extra);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
text-align: right;
|
|
color: var(--graphic-accent);
|
|
}
|
|
|
|
.details {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--s-3);
|
|
}
|
|
|
|
.weapons {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--s-1);
|
|
padding: var(--s-1-5);
|
|
background-color: oklch(0% 0 0 / 0.3);
|
|
border-radius: var(--radius-field);
|
|
}
|
|
|
|
.pills {
|
|
display: flex;
|
|
flex-shrink: 0;
|
|
gap: var(--s-1-5);
|
|
}
|
|
|
|
.pill {
|
|
padding: var(--s-1) var(--s-2);
|
|
font-size: var(--font-2xs);
|
|
font-weight: var(--weight-extra);
|
|
color: var(--graphic-text-dim);
|
|
background-color: var(--graphic-row-bg);
|
|
border: 1.5px solid var(--graphic-row-border);
|
|
border-radius: var(--radius-full);
|
|
}
|
|
|
|
.textBox {
|
|
padding: var(--s-3);
|
|
font-size: var(--font-sm);
|
|
font-weight: var(--weight-semi);
|
|
line-height: 1.5;
|
|
white-space: pre-wrap;
|
|
overflow-wrap: anywhere;
|
|
background-color: var(--graphic-row-bg);
|
|
border: 1.5px solid var(--graphic-row-border);
|
|
border-radius: var(--radius-box);
|
|
}
|
|
|
|
.members {
|
|
/* keep in sync with MEMBER_WEAPON_SIZE */
|
|
--member-weapon-size: 28px;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--s-1-5);
|
|
}
|
|
|
|
/* rows without weapons stay as tall as the ones with them */
|
|
.member {
|
|
display: grid;
|
|
grid-template-columns: auto 1fr auto;
|
|
grid-template-rows: minmax(
|
|
calc(var(--member-weapon-size) + 2 * var(--s-1)),
|
|
auto
|
|
);
|
|
align-items: center;
|
|
gap: var(--s-2);
|
|
padding: var(--s-1-5) var(--s-2);
|
|
background-color: var(--graphic-row-bg);
|
|
border: 1.5px solid var(--graphic-row-border);
|
|
border-radius: var(--radius-box);
|
|
|
|
& .weapons {
|
|
padding: var(--s-1);
|
|
}
|
|
}
|
|
|
|
.memberName {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--s-1-5);
|
|
min-width: 0;
|
|
font-size: var(--font-sm);
|
|
font-weight: var(--weight-extra);
|
|
line-height: 1.3;
|
|
}
|
|
|
|
/* claims the free space like the header title, so a name the raster measures wider still fits */
|
|
.memberUsername {
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|