diff --git a/src/components/asset-panel/selector.css b/src/components/asset-panel/selector.css index 535c38b0b..ad24ed954 100644 --- a/src/components/asset-panel/selector.css +++ b/src/components/asset-panel/selector.css @@ -56,7 +56,7 @@ $fade-out-distance: 100px; .list-item { width: 5rem; - min-height: 5rem; + height: 5rem; margin: 0.5rem auto; } diff --git a/src/components/backpack/backpack.css b/src/components/backpack/backpack.css index ad7644c64..de7bc72d2 100644 --- a/src/components/backpack/backpack.css +++ b/src/components/backpack/backpack.css @@ -69,9 +69,17 @@ } .backpack-item { - min-width: 4rem; - max-width: 6rem; + width: 4rem; + height: 4.5rem; margin: 0 0.25rem; + + /* Need to hide overflow because of background setting below */ + overflow: hidden; +} + +.backpack-item > div { + /* Need to set the background to get blend-mode below to work */ + background: $ui-primary; } .backpack-item img { diff --git a/src/components/sprite-selector-item/sprite-selector-item.css b/src/components/sprite-selector-item/sprite-selector-item.css index 7a2c1f4ce..ee20c444c 100644 --- a/src/components/sprite-selector-item/sprite-selector-item.css +++ b/src/components/sprite-selector-item/sprite-selector-item.css @@ -39,8 +39,24 @@ filter: drop-shadow(0px 0px 2px $ui-black-transparent); } +/* Outer/Inner chicanery is to prevent layouts when sprite image changes */ +.sprite-image-outer { + position: relative; + width: 100%; + height: 100%; + transform: translateZ(0); +} + +.sprite-image-inner { + position: absolute; + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; +} + .sprite-image { - margin: auto; user-select: none; pointer-events: none; max-width: 32px; diff --git a/src/components/sprite-selector-item/sprite-selector-item.jsx b/src/components/sprite-selector-item/sprite-selector-item.jsx index ef5b85f19..3f9ba0494 100644 --- a/src/components/sprite-selector-item/sprite-selector-item.jsx +++ b/src/components/sprite-selector-item/sprite-selector-item.jsx @@ -37,11 +37,15 @@ const SpriteSelectorItem = props => (