Justin Edmund
bad870a546
These reps act like the existing PartyRep except for Characters and Summons, as well as a new component just for Weapons. They only render the grid of objects and nothing else. Eventually PartyRep will use WeaponRep
75 lines
1.5 KiB
SCSS
75 lines
1.5 KiB
SCSS
.CharacterRep {
|
|
aspect-ratio: 2/0.99;
|
|
border-radius: $card-corner;
|
|
grid-gap: $unit-half; /* add a gap of 8px between grid items */
|
|
height: $rep-height;
|
|
|
|
.Character {
|
|
background: var(--card-bg);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.GridCharacters {
|
|
display: grid; /* make the right-images container a grid */
|
|
grid-template-columns: repeat(
|
|
4,
|
|
1fr
|
|
); /* create 3 columns, each taking up 1 fraction */
|
|
gap: $unit-half;
|
|
}
|
|
|
|
.Grid.Character {
|
|
aspect-ratio: 16 / 33;
|
|
box-sizing: border-box;
|
|
display: grid;
|
|
overflow: hidden;
|
|
|
|
&.MC {
|
|
border-color: transparent;
|
|
border-width: 1px;
|
|
border-style: solid;
|
|
aspect-ratio: 32 / 66;
|
|
|
|
img {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
&.fire {
|
|
background: var(--fire-hover-bg);
|
|
border-color: var(--fire-bg);
|
|
}
|
|
|
|
&.water {
|
|
background: var(--water-hover-bg);
|
|
border-color: var(--water-bg);
|
|
}
|
|
|
|
&.wind {
|
|
background: var(--wind-hover-bg);
|
|
border-color: var(--wind-bg);
|
|
}
|
|
|
|
&.earth {
|
|
background: var(--earth-hover-bg);
|
|
border-color: var(--earth-bg);
|
|
}
|
|
|
|
&.light {
|
|
background: var(--light-hover-bg);
|
|
border-color: var(--light-bg);
|
|
}
|
|
|
|
&.dark {
|
|
background: var(--dark-hover-bg);
|
|
border-color: var(--dark-bg);
|
|
}
|
|
}
|
|
}
|
|
|
|
.Grid.Character img[src*='jpg'] {
|
|
border-radius: 4px;
|
|
width: 100%;
|
|
}
|
|
}
|