Fix unit styles
This commit is contained in:
parent
8f124c0f9a
commit
c092566c03
6 changed files with 67 additions and 67 deletions
|
|
@ -1,4 +1,4 @@
|
|||
.CharacterUnit {
|
||||
.unit {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -8,7 +8,7 @@
|
|||
position: relative;
|
||||
margin-bottom: $unit * 4;
|
||||
|
||||
&.editable .CharacterImage:hover {
|
||||
&.editable .image:hover {
|
||||
border: $hover-stroke;
|
||||
box-shadow: $hover-shadow;
|
||||
cursor: pointer;
|
||||
|
|
@ -60,7 +60,7 @@
|
|||
z-index: 2;
|
||||
}
|
||||
|
||||
.CharacterImage {
|
||||
.image {
|
||||
aspect-ratio: 131 / 273;
|
||||
background: var(--card-bg);
|
||||
border: 1px solid rgba(0, 0, 0, 0);
|
||||
|
|
@ -92,7 +92,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.CharacterName {
|
||||
.name {
|
||||
@include breakpoint(phone) {
|
||||
font-size: $font-tiny;
|
||||
}
|
||||
|
|
@ -102,7 +102,7 @@
|
|||
opacity: 1;
|
||||
}
|
||||
|
||||
.Perpetuity {
|
||||
.perpetuity {
|
||||
position: absolute;
|
||||
background-image: url('/icons/perpetuity/filled.svg');
|
||||
background-size: $unit-4x $unit-4x;
|
||||
|
|
@ -118,7 +118,7 @@
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
&.Empty {
|
||||
&.empty {
|
||||
background-image: url('/icons/perpetuity/empty.svg');
|
||||
opacity: 0;
|
||||
|
||||
|
|
|
|||
|
|
@ -72,14 +72,14 @@ const CharacterUnit = ({
|
|||
|
||||
// Classes
|
||||
const classes = classNames({
|
||||
CharacterUnit: true,
|
||||
editable: editable,
|
||||
filled: gridCharacter !== undefined,
|
||||
[styles.unit]: true,
|
||||
[styles.editable]: editable,
|
||||
[styles.filled]: gridCharacter !== undefined,
|
||||
})
|
||||
|
||||
const buttonClasses = classNames({
|
||||
Options: true,
|
||||
Clicked: contextMenuOpen,
|
||||
options: true,
|
||||
clicked: contextMenuOpen,
|
||||
})
|
||||
|
||||
// Other
|
||||
|
|
@ -278,8 +278,8 @@ const CharacterUnit = ({
|
|||
const perpetuity = () => {
|
||||
if (gridCharacter) {
|
||||
const classes = classNames({
|
||||
Perpetuity: true,
|
||||
Empty: !gridCharacter.perpetuity,
|
||||
[styles.perpetuity]: true,
|
||||
[styles.empty]: !gridCharacter.perpetuity,
|
||||
})
|
||||
|
||||
return <i className={classes} onClick={handlePerpetuityClick} />
|
||||
|
|
@ -297,13 +297,13 @@ const CharacterUnit = ({
|
|||
|
||||
const content = (
|
||||
<div
|
||||
className="CharacterImage"
|
||||
className={styles.image}
|
||||
tabIndex={gridCharacter ? gridCharacter.position * 7 : 0}
|
||||
onClick={openSearchModal}
|
||||
>
|
||||
{image}
|
||||
{editable ? (
|
||||
<span className="icon">
|
||||
<span className={styles.icon}>
|
||||
<PlusIcon />
|
||||
</span>
|
||||
) : (
|
||||
|
|
@ -346,7 +346,7 @@ const CharacterUnit = ({
|
|||
) : (
|
||||
''
|
||||
)}
|
||||
<h3 className="CharacterName">{character?.name[locale]}</h3>
|
||||
<h3 className={styles.name}>{character?.name[locale]}</h3>
|
||||
</div>
|
||||
{searchModal()}
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
.SummonUnit {
|
||||
.unit {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
|
|
@ -26,7 +26,7 @@
|
|||
min-height: 15.9vw;
|
||||
}
|
||||
|
||||
.SummonImage {
|
||||
.image {
|
||||
list-style-type: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
|
@ -36,19 +36,19 @@
|
|||
margin-right: 0;
|
||||
}
|
||||
|
||||
&.main.editable .SummonImage:hover,
|
||||
&.friend.editable .SummonImage:hover {
|
||||
&.main.editable .image:hover,
|
||||
&.friend.editable .image:hover {
|
||||
transform: $scale-tall;
|
||||
}
|
||||
|
||||
&.editable .SummonImage:hover {
|
||||
&.editable .image:hover {
|
||||
border: $hover-stroke;
|
||||
box-shadow: $hover-shadow;
|
||||
cursor: pointer;
|
||||
transform: $scale-wide;
|
||||
}
|
||||
|
||||
.SummonImage {
|
||||
.image {
|
||||
background: var(--card-bg);
|
||||
border: 1px solid rgba(0, 0, 0, 0);
|
||||
border-radius: $unit;
|
||||
|
|
@ -75,7 +75,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.SummonName {
|
||||
.name {
|
||||
@include breakpoint(phone) {
|
||||
font-size: $font-tiny;
|
||||
}
|
||||
|
|
@ -113,11 +113,11 @@
|
|||
}
|
||||
}
|
||||
|
||||
&:hover .QuickSummon.Empty {
|
||||
&:hover .quickSummon.empty {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&.main .QuickSummon {
|
||||
&.main .quickSummon {
|
||||
$diameter: $unit-6x;
|
||||
background-size: $diameter $diameter;
|
||||
top: -2%;
|
||||
|
|
@ -126,11 +126,11 @@
|
|||
height: $diameter;
|
||||
}
|
||||
|
||||
&.friend .QuickSummon {
|
||||
&.friend .quickSummon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.grid .QuickSummon {
|
||||
&.grid .quickSummon {
|
||||
$diameter: $unit-5x;
|
||||
background-size: $diameter $diameter;
|
||||
top: -5%;
|
||||
|
|
@ -139,7 +139,7 @@
|
|||
height: $diameter;
|
||||
}
|
||||
|
||||
.QuickSummon {
|
||||
.quickSummon {
|
||||
position: absolute;
|
||||
background-image: url('/icons/quick_summon/filled.svg');
|
||||
z-index: 20;
|
||||
|
|
@ -150,7 +150,7 @@
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
&.Empty {
|
||||
&.empty {
|
||||
background-image: url('/icons/quick_summon/empty.svg');
|
||||
opacity: 0;
|
||||
|
||||
|
|
|
|||
|
|
@ -62,17 +62,17 @@ const SummonUnit = ({
|
|||
|
||||
// Classes
|
||||
const classes = classNames({
|
||||
SummonUnit: true,
|
||||
main: unitType == 0,
|
||||
grid: unitType == 1,
|
||||
friend: unitType == 2,
|
||||
editable: editable,
|
||||
filled: gridSummon !== undefined,
|
||||
[styles.unit]: true,
|
||||
[styles.main]: unitType == 0,
|
||||
[styles.grid]: unitType == 1,
|
||||
[styles.friend]: unitType == 2,
|
||||
[styles.editable]: editable,
|
||||
[styles.filled]: gridSummon !== undefined,
|
||||
})
|
||||
|
||||
const buttonClasses = classNames({
|
||||
Options: true,
|
||||
Clicked: contextMenuOpen,
|
||||
options: true,
|
||||
clicked: contextMenuOpen,
|
||||
})
|
||||
|
||||
// Other
|
||||
|
|
@ -273,8 +273,8 @@ const SummonUnit = ({
|
|||
const quickSummon = () => {
|
||||
if (gridSummon) {
|
||||
const classes = classNames({
|
||||
QuickSummon: true,
|
||||
Empty: !gridSummon.quick_summon,
|
||||
[styles.quickSummon]: true,
|
||||
[styles.empty]: !gridSummon.quick_summon,
|
||||
})
|
||||
|
||||
return <i className={classes} onClick={handleQuickSummonClick} />
|
||||
|
|
@ -294,10 +294,10 @@ const SummonUnit = ({
|
|||
)
|
||||
|
||||
const content = (
|
||||
<div className="SummonImage" onClick={openSearchModal}>
|
||||
<div className={styles.image} onClick={openSearchModal}>
|
||||
{image}
|
||||
{editable ? (
|
||||
<span className="icon">
|
||||
<span className={styles.icon}>
|
||||
<PlusIcon />
|
||||
</span>
|
||||
) : (
|
||||
|
|
@ -338,7 +338,7 @@ const SummonUnit = ({
|
|||
) : (
|
||||
''
|
||||
)}
|
||||
<h3 className="SummonName">{summon?.name[locale]}</h3>
|
||||
<h3 className={styles.name}>{summon?.name[locale]}</h3>
|
||||
</div>
|
||||
{searchModal()}
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
.WeaponUnit {
|
||||
.unit {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -65,20 +65,20 @@
|
|||
}
|
||||
}
|
||||
|
||||
&.grid {
|
||||
.WeaponImage {
|
||||
&.weapon {
|
||||
.image {
|
||||
list-style-type: none;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
|
||||
.Awakening {
|
||||
.awakening {
|
||||
width: 30%;
|
||||
height: auto;
|
||||
top: 14%;
|
||||
left: -3.5%;
|
||||
}
|
||||
|
||||
.Modifiers > .Skills {
|
||||
.modifiers > .skills {
|
||||
bottom: 12%;
|
||||
left: -3.5%;
|
||||
|
||||
|
|
@ -112,7 +112,7 @@
|
|||
text-align: center;
|
||||
}
|
||||
|
||||
.WeaponImage {
|
||||
.image {
|
||||
background: var(--card-bg);
|
||||
border: 1px solid rgba(0, 0, 0, 0);
|
||||
border-radius: $unit;
|
||||
|
|
@ -128,14 +128,14 @@
|
|||
fill: var(--icon-secondary-hover);
|
||||
}
|
||||
|
||||
.Awakening {
|
||||
.awakening {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.Modifiers {
|
||||
.modifiers {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
width: 100%;
|
||||
|
|
@ -143,7 +143,7 @@
|
|||
position: absolute;
|
||||
z-index: 3;
|
||||
|
||||
.Skills {
|
||||
.skills {
|
||||
display: flex;
|
||||
gap: $unit-fourth;
|
||||
justify-content: flex-end;
|
||||
|
|
|
|||
|
|
@ -60,12 +60,12 @@ const WeaponUnit = ({
|
|||
|
||||
// Classes
|
||||
const classes = classNames({
|
||||
WeaponUnit: true,
|
||||
mainhand: unitType == 0,
|
||||
grid: unitType == 1,
|
||||
editable: editable,
|
||||
filled: gridWeapon !== undefined,
|
||||
empty: gridWeapon == undefined,
|
||||
[styles.unit]: true,
|
||||
[styles.mainhand]: unitType == 0,
|
||||
[styles.weapon]: unitType == 1,
|
||||
[styles.editable]: editable,
|
||||
[styles.filled]: gridWeapon !== undefined,
|
||||
[styles.empty]: gridWeapon == undefined,
|
||||
})
|
||||
|
||||
const buttonClasses = classNames({
|
||||
|
|
@ -197,7 +197,7 @@ const WeaponUnit = ({
|
|||
return (
|
||||
<img
|
||||
alt={`${awakening.type.name[locale]} Lv${gridWeapon.awakening.level}`}
|
||||
className="Awakening"
|
||||
className={styles.awakening}
|
||||
src={`${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/awakening/${gridWeapon.awakening.type.slug}.png`}
|
||||
/>
|
||||
)
|
||||
|
|
@ -229,7 +229,7 @@ const WeaponUnit = ({
|
|||
<img
|
||||
alt={altText}
|
||||
key={altText}
|
||||
className="Skill"
|
||||
className={styles.skill}
|
||||
src={`${baseUrl}${filename}`}
|
||||
/>
|
||||
)
|
||||
|
|
@ -288,7 +288,7 @@ const WeaponUnit = ({
|
|||
<img
|
||||
alt={altText}
|
||||
key={altText}
|
||||
className="Skill"
|
||||
className={styles.skill}
|
||||
src={`${baseUrl}${filename}`}
|
||||
/>
|
||||
)
|
||||
|
|
@ -362,7 +362,7 @@ const WeaponUnit = ({
|
|||
<img
|
||||
alt={altText}
|
||||
key={altText}
|
||||
className="Skill"
|
||||
className={styles.skill}
|
||||
src={`${baseUrl}${filename}`}
|
||||
/>
|
||||
)
|
||||
|
|
@ -401,7 +401,7 @@ const WeaponUnit = ({
|
|||
<img
|
||||
alt={altText}
|
||||
key={altText}
|
||||
className="Skill"
|
||||
className={styles.skill}
|
||||
src={`${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/ax/${axSkill.slug}.png`}
|
||||
/>
|
||||
)
|
||||
|
|
@ -516,10 +516,10 @@ const WeaponUnit = ({
|
|||
)
|
||||
|
||||
const content = (
|
||||
<div className="WeaponImage" onClick={openSearchModal}>
|
||||
<div className="Modifiers">
|
||||
<div className={styles.image} onClick={openSearchModal}>
|
||||
<div className={styles.modifiers}>
|
||||
{awakeningImage()}
|
||||
<div className="Skills">
|
||||
<div className={styles.skills}>
|
||||
{axImages()}
|
||||
{telumaImages()}
|
||||
{opusImages()}
|
||||
|
|
@ -528,7 +528,7 @@ const WeaponUnit = ({
|
|||
</div>
|
||||
{image}
|
||||
{editable ? (
|
||||
<span className="icon">
|
||||
<span className={styles.icon}>
|
||||
<PlusIcon />
|
||||
</span>
|
||||
) : (
|
||||
|
|
@ -564,7 +564,7 @@ const WeaponUnit = ({
|
|||
) : (
|
||||
''
|
||||
)}
|
||||
<h3 className="WeaponName">{weapon?.name[locale]}</h3>
|
||||
<h3 className={styles.name}>{weapon?.name[locale]}</h3>
|
||||
</div>
|
||||
{searchModal()}
|
||||
</>
|
||||
|
|
|
|||
Loading…
Reference in a new issue