Flips text and uncap stars and makes the modal click target the image instead of the whole unit
88 lines
No EOL
1.4 KiB
SCSS
88 lines
No EOL
1.4 KiB
SCSS
.WeaponUnit {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
}
|
|
|
|
.WeaponUnit .WeaponImage {
|
|
background: white;
|
|
border: 1px solid rgba(0, 0, 0, 0);
|
|
border-radius: 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 2px;
|
|
overflow: hidden;
|
|
transition: all 0.18s ease-in-out;
|
|
}
|
|
|
|
.WeaponUnit.editable .WeaponImage:hover {
|
|
border: 1px solid rgba(0, 0, 0, 0.1);
|
|
box-shadow: rgba(0, 0, 0, 0.14) 0px 0px 14px;
|
|
cursor: pointer;
|
|
transform: scale(1.1, 1.1);
|
|
}
|
|
|
|
.WeaponUnit.filled h3 {
|
|
display: block;
|
|
}
|
|
|
|
.WeaponUnit.filled ul {
|
|
display: flex;
|
|
}
|
|
|
|
.WeaponUnit h3,
|
|
.WeaponUnit ul {
|
|
display: none;
|
|
}
|
|
|
|
.WeaponUnit h3 {
|
|
color: #333;
|
|
font-size: $font-regular;
|
|
font-weight: 500;
|
|
margin: 0;
|
|
text-align: center;
|
|
}
|
|
|
|
.WeaponUnit img {
|
|
position: relative;
|
|
width: 100%;
|
|
z-index: 2;
|
|
}
|
|
|
|
.WeaponImage .icon {
|
|
position: absolute;
|
|
height: 20px;
|
|
width: 20px;
|
|
z-index: 1;
|
|
|
|
svg {
|
|
fill: #c9c9c9;
|
|
}
|
|
}
|
|
|
|
.WeaponImage:hover .icon {
|
|
color: #555;
|
|
}
|
|
|
|
/* Mainhand */
|
|
.WeaponUnit.mainhand {
|
|
margin-right: 24px;
|
|
max-width: 200px;
|
|
}
|
|
|
|
.WeaponUnit.mainhand .WeaponImage {
|
|
height: 418px;
|
|
width: 200px;
|
|
}
|
|
|
|
/* Grid */
|
|
.WeaponUnit.grid {
|
|
max-width: 160px;
|
|
}
|
|
|
|
.WeaponUnit.grid .WeaponImage {
|
|
list-style-type: none;
|
|
height: 92px;
|
|
width: 160px;
|
|
} |