diff --git a/src/components/asset-panel/selector.css b/src/components/asset-panel/selector.css index 535c38b0be684e8ac55d3cec8446cf758cd00833..ad24ed954cce064b6be9f20bac7c5e781d88bd97 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 ad7644c64b9ca89e8f50618bb9db650e89d0aee1..de7bc72d21276ceabbbdb691f07682f08dc75ecc 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 7a2c1f4cea61ece8df041a7ae9bb05502a8d4652..ee20c444c364a0deb6ab020077d0560e5a785e34 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 ef5b85f1932ff0906dd050e796e336ec1c72408f..3f9ba0494798f1526748202310c9aea25780a27e 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 => ( <div className={styles.number}>{props.number}</div> )} {props.costumeURL ? ( - <img - className={styles.spriteImage} - draggable={false} - src={props.costumeURL} - /> + <div className={styles.spriteImageOuter}> + <div className={styles.spriteImageInner}> + <img + className={styles.spriteImage} + draggable={false} + src={props.costumeURL} + /> + </div> + </div> ) : null} <div className={styles.spriteInfo}> <div className={styles.spriteName}>{props.name}</div>