mirror of
https://github.com/Sendouc/sendou.ink.git
synced 2026-10-28 05:27:01 -05:00
375 lines
6.9 KiB
CSS
375 lines
6.9 KiB
CSS
.card {
|
|
--card-padding: var(--s-4);
|
|
--card-weapon-size: var(--s-10);
|
|
--card-weapon-small-size: 22px;
|
|
--card-title-line-height: calc(var(--font-sm) * 1.25);
|
|
--card-patch-height: var(--selector-size);
|
|
--card-gear-size: var(--s-12);
|
|
--card-ability-main-size: var(--s-10);
|
|
--card-ability-sub-size: var(--s-8);
|
|
--card-ability-gap: var(--s-1);
|
|
--card-gear-gap: var(--s-2);
|
|
--card-action-size: var(--field-size-sm);
|
|
--card-mode-size: var(--selector-size);
|
|
--card-bar-height: var(--s-8);
|
|
--card-header-spacing: var(--s-1);
|
|
--card-divider-spacing: var(--s-3);
|
|
--card-actions-spacing: var(--s-2);
|
|
--card-bg: var(--color-bg-high);
|
|
|
|
/* in a grid of cards the header, gear and action rows are shared so the dividers line up */
|
|
display: grid;
|
|
overflow: clip;
|
|
position: relative;
|
|
padding: var(--card-padding);
|
|
padding-top: calc(
|
|
var(--card-bar-height) +
|
|
var(--card-padding) +
|
|
var(--s-0-5)
|
|
);
|
|
padding-bottom: var(--card-actions-spacing);
|
|
border: var(--border-style);
|
|
border-radius: var(--radius-box);
|
|
background-color: var(--card-bg);
|
|
grid-row: span 3;
|
|
grid-template-rows: subgrid;
|
|
grid-template-columns: minmax(0, 1fr);
|
|
min-width: 0;
|
|
row-gap: 0;
|
|
}
|
|
|
|
.weapons {
|
|
position: relative;
|
|
display: flex;
|
|
flex-shrink: 0;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: var(--s-1);
|
|
}
|
|
|
|
.patch {
|
|
padding: 0 var(--s-2);
|
|
border: var(--border-style);
|
|
border-radius: var(--radius-full);
|
|
background-color: var(--color-bg-high);
|
|
color: var(--color-text-high);
|
|
font-size: var(--font-3xs);
|
|
font-weight: var(--weight-bold);
|
|
height: var(--card-patch-height);
|
|
align-content: center;
|
|
text-box: trim-both cap alphabetic;
|
|
cursor: pointer;
|
|
font-family: inherit;
|
|
white-space: nowrap;
|
|
|
|
&:hover {
|
|
background-color: var(--color-bg);
|
|
}
|
|
|
|
&:focus-visible {
|
|
outline: var(--focus-ring);
|
|
outline-offset: 1px;
|
|
}
|
|
}
|
|
|
|
.smallWeapons {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
translate: -30% 30%;
|
|
display: flex;
|
|
gap: var(--s-0-5);
|
|
}
|
|
|
|
.otherWeapons {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
margin-top: var(--s-1-5);
|
|
gap: var(--s-1);
|
|
}
|
|
|
|
.moreWeapons {
|
|
display: grid;
|
|
width: var(--card-weapon-small-size);
|
|
height: var(--card-weapon-small-size);
|
|
padding: 0;
|
|
border: var(--border-style-high);
|
|
border-radius: 50%;
|
|
background-color: var(--color-bg);
|
|
color: var(--color-text);
|
|
cursor: pointer;
|
|
font-size: var(--font-3xs);
|
|
font-weight: var(--weight-bold);
|
|
place-items: center;
|
|
|
|
&:hover {
|
|
background-color: var(--color-bg-high);
|
|
}
|
|
|
|
&:focus-visible {
|
|
outline: var(--focus-ring);
|
|
outline-offset: 1px;
|
|
}
|
|
}
|
|
|
|
.allWeapons {
|
|
display: flex;
|
|
flex-direction: column;
|
|
white-space: normal;
|
|
}
|
|
|
|
.header {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: var(--s-3);
|
|
}
|
|
|
|
.titleBlock {
|
|
display: flex;
|
|
min-width: 0;
|
|
flex: 1;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.details {
|
|
display: flex;
|
|
min-width: 0;
|
|
flex-direction: column;
|
|
margin-top: var(--s-0-5);
|
|
gap: var(--s-0-5);
|
|
}
|
|
|
|
.title {
|
|
display: -webkit-box;
|
|
overflow: hidden;
|
|
font-size: var(--font-sm);
|
|
font-weight: var(--weight-bold);
|
|
line-height: var(--card-title-line-height);
|
|
overflow-wrap: anywhere;
|
|
text-box: trim-start cap alphabetic;
|
|
/* room above the trimmed cap height for glyphs reaching higher (e.g. Japanese), which the clamp would clip */
|
|
padding-top: 0.3em;
|
|
margin-top: -0.3em;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 2;
|
|
line-clamp: 2;
|
|
}
|
|
|
|
.titleText {
|
|
display: inline;
|
|
font-size: inherit;
|
|
}
|
|
|
|
.privateButton {
|
|
display: inline;
|
|
margin-inline-start: var(--s-1);
|
|
padding: 0;
|
|
border: none;
|
|
background: none;
|
|
color: var(--color-text-high);
|
|
cursor: pointer;
|
|
font: inherit;
|
|
|
|
&:hover {
|
|
color: var(--color-text);
|
|
}
|
|
|
|
&:focus-visible {
|
|
outline: var(--focus-ring);
|
|
outline-offset: 1px;
|
|
}
|
|
|
|
/* the title is trimmed to cap height and clips its overflow, so the icon must fit within its 0.3em top padding */
|
|
& svg {
|
|
width: 1.25cap;
|
|
height: 1.25cap;
|
|
vertical-align: baseline;
|
|
}
|
|
}
|
|
|
|
.owner {
|
|
display: flex;
|
|
min-width: 0;
|
|
align-items: center;
|
|
font-size: var(--font-2xs);
|
|
font-weight: var(--weight-semi);
|
|
gap: var(--s-1-5);
|
|
}
|
|
|
|
.ownerLink {
|
|
display: flex;
|
|
min-width: 0;
|
|
align-items: center;
|
|
gap: var(--s-1);
|
|
}
|
|
|
|
.plusTier {
|
|
display: flex;
|
|
flex-shrink: 0;
|
|
align-items: center;
|
|
color: var(--color-text-high);
|
|
font-size: var(--font-2xs);
|
|
gap: var(--s-0-5);
|
|
}
|
|
|
|
.bar {
|
|
position: absolute;
|
|
inset: 0 0 auto;
|
|
display: flex;
|
|
height: var(--card-bar-height);
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding-inline: var(--card-padding);
|
|
gap: var(--s-1);
|
|
background-color: var(--color-border);
|
|
}
|
|
|
|
.modes {
|
|
display: contents;
|
|
}
|
|
|
|
.mode {
|
|
display: grid;
|
|
width: var(--card-mode-size);
|
|
height: var(--card-mode-size);
|
|
border: var(--border-style);
|
|
border-radius: 50%;
|
|
background-color: var(--color-bg-high);
|
|
place-items: center;
|
|
}
|
|
|
|
.modeImage {
|
|
display: block;
|
|
width: 70%;
|
|
height: 70%;
|
|
}
|
|
|
|
.weapon {
|
|
position: relative;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.weaponLink {
|
|
border-radius: 50%;
|
|
|
|
&:focus-visible {
|
|
outline: var(--focus-ring);
|
|
outline-offset: 1px;
|
|
}
|
|
}
|
|
|
|
.weaponBackdrop {
|
|
--circle-backdrop-color: var(--color-bg);
|
|
--circle-backdrop-content-scale: 1.2;
|
|
|
|
& img {
|
|
width: var(--card-weapon-size);
|
|
height: var(--card-weapon-size);
|
|
}
|
|
|
|
.weaponSmall & img {
|
|
width: var(--card-weapon-small-size);
|
|
height: var(--card-weapon-small-size);
|
|
}
|
|
}
|
|
|
|
.top500 {
|
|
position: absolute;
|
|
z-index: 1;
|
|
top: 0;
|
|
left: 50%;
|
|
translate: -50% -60%;
|
|
}
|
|
|
|
.gearAbilities {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
margin-top: var(--card-header-spacing);
|
|
padding-top: var(--card-divider-spacing);
|
|
gap: var(--s-2);
|
|
}
|
|
|
|
.gearRow {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: var(--card-ability-gap);
|
|
}
|
|
|
|
.gearBackdrop {
|
|
--circle-backdrop-color: var(--color-bg);
|
|
--circle-backdrop-content-scale: 1.05;
|
|
|
|
margin-inline-end: calc(var(--card-gear-gap) - var(--card-ability-gap));
|
|
|
|
& img {
|
|
width: var(--card-gear-size);
|
|
height: var(--card-gear-size);
|
|
}
|
|
|
|
&::before {
|
|
border: var(--border-style);
|
|
}
|
|
}
|
|
|
|
.ability {
|
|
display: grid;
|
|
width: var(--card-ability-sub-size);
|
|
height: var(--card-ability-sub-size);
|
|
flex-shrink: 0;
|
|
border: var(--border-style);
|
|
border-radius: 50%;
|
|
background-color: var(--color-bg-ability);
|
|
place-items: center;
|
|
|
|
& > * {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.abilityMain {
|
|
width: var(--card-ability-main-size);
|
|
height: var(--card-ability-main-size);
|
|
}
|
|
|
|
.abilityImage {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.actions {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
margin-top: var(--card-divider-spacing);
|
|
margin-inline: calc(var(--card-padding) * -1);
|
|
padding-top: var(--card-actions-spacing);
|
|
padding-inline: var(--card-padding);
|
|
border-top: var(--border-style);
|
|
gap: var(--s-2);
|
|
}
|
|
|
|
.action {
|
|
width: var(--card-action-size);
|
|
height: var(--card-action-size);
|
|
border: var(--border-style);
|
|
background-color: var(--color-bg-high);
|
|
color: var(--color-text-high);
|
|
|
|
&:hover {
|
|
background-color: var(--color-bg-higher);
|
|
}
|
|
|
|
& svg {
|
|
min-width: var(--s-4);
|
|
max-width: var(--s-4);
|
|
}
|
|
}
|
|
|
|
.actionDestructive {
|
|
color: var(--color-error);
|
|
}
|