67 lines
1.1 KiB
Plaintext

const inventory-slot-size = 64px
.inventory
display grid
grid-gap 0.25rem
grid-template-columns repeat(auto-fill, inventory-slot-size)
grid-auto-rows inventory-slot-size
justify-content center
width 100%
max-width 450px
margin 0 auto
.inventory-slot
ui-element
position relative
display flex
align-items center
justify-content center
font-size 2.5rem
[draggable="true"]
:hover
cursor pointer
.shop-item-icon
animation hover-item 1s infinite ease-in-out
svg-icon
pointer-events none
// [data-item-id="pro-account-3"]
// .shop-item-icon
// opacity 0.7
// [data-item-id="pro-account-6"]
// .shop-item-icon
// opacity 0.8
// [data-item-id="pro-account-12"]
// .shop-item-icon
// opacity 0.9
// [data-item-id="pro-account-24"]
// .shop-item-icon
// opacity 1.0
animation hover-item
0%
transform rotateZ(0)
20%
transform rotateZ(5deg)
80%
transform rotateZ(-5deg)
100%
transform rotateZ(0)
.inventory-slot-quantity
position absolute
bottom 0.25rem
right 0.25rem
font-size 0.8rem
line-height 1em
opacity 0.5
pointer-events none
.drag-enter
border-style dashed