diff --git a/website/client/public/static/npc/normal/customizations_background.png b/website/client/public/static/npc/normal/customizations_background.png new file mode 100644 index 0000000000..847bd6d03e Binary files /dev/null and b/website/client/public/static/npc/normal/customizations_background.png differ diff --git a/website/client/public/static/npc/normal/customizations_npc.png b/website/client/public/static/npc/normal/customizations_npc.png new file mode 100644 index 0000000000..282915a0fb Binary files /dev/null and b/website/client/public/static/npc/normal/customizations_npc.png differ diff --git a/website/client/src/assets/scss/shops.scss b/website/client/src/assets/scss/shops.scss new file mode 100644 index 0000000000..243e51c045 --- /dev/null +++ b/website/client/src/assets/scss/shops.scss @@ -0,0 +1,90 @@ +.featured-label { + margin: 24px auto; +} + +.group { + display: inline-block; + width: 33%; + margin-bottom: 24px; + + .items { + border-radius: 2px; + background-color: #edecee; + display: inline-block; + padding: 8px; + } + + .item-wrapper { + margin-bottom: 0; + } + + .items > div:not(:last-of-type) { + margin-right: 16px; + } +} + +.timeTravelers { + .standard-page { + position: relative; + } + + .badge-pin:not(.pinned) { + display: none; + } + + .item:hover .badge-pin { + display: block; + } + + .avatar { + cursor: default; + margin: 0 auto; + } + + .featuredItems { + height: 216px; + + .background { + background-repeat: repeat-x; + + width: 100%; + position: absolute; + + top: 0; + left: 0; + + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + } + .background-open, .background-closed { + height: 216px; + } + + .content { + display: flex; + flex-direction: column; + } + + .npc { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 216px; + background-repeat: no-repeat; + + &.closed { + background-repeat: no-repeat; + } + + .featured-label { + position: absolute; + bottom: -14px; + margin: 0; + left: 78px; + } + } + } +} \ No newline at end of file diff --git a/website/client/src/assets/scss/typography.scss b/website/client/src/assets/scss/typography.scss index b80ce6da3b..970fd41737 100644 --- a/website/client/src/assets/scss/typography.scss +++ b/website/client/src/assets/scss/typography.scss @@ -60,9 +60,8 @@ h1 { h2 { font-size: 20px; - line-height: 28px; + line-height: 1.4; margin-bottom: 16px; - color: $purple-300; } h3, h4 { diff --git a/website/client/src/components/avatarModal/customize-options.vue b/website/client/src/components/avatarModal/customize-options.vue index d16a656a02..2df1895016 100644 --- a/website/client/src/components/avatarModal/customize-options.vue +++ b/website/client/src/components/avatarModal/customize-options.vue @@ -200,7 +200,7 @@ export default { margin-top: -5px; } } - &.color, &.bangs, &.beard, &.flower { + &.color, &.bangs, &.beard, &.flower, &.mustache { background-position-x: -6px; background-position-y: -12px; } diff --git a/website/client/src/components/creatorIntro.vue b/website/client/src/components/creatorIntro.vue index 5e717f13bf..cff5f47a8f 100644 --- a/website/client/src/components/creatorIntro.vue +++ b/website/client/src/components/creatorIntro.vue @@ -573,10 +573,14 @@ } #avatar-modal { + h2 { + color: $purple-300; + } + .avatar { cursor: auto; - &:not(.new-user) { + &:not(.new-user)[class*=background] { box-shadow: 0px 1px 3px 0px rgba(26, 24, 29, 0.12), 0px 1px 2px 0px rgba(26, 24, 29, 0.24); } diff --git a/website/client/src/components/inventory/items/index.vue b/website/client/src/components/inventory/items/index.vue index 5c278b176a..b64658a276 100644 --- a/website/client/src/components/inventory/items/index.vue +++ b/website/client/src/components/inventory/items/index.vue @@ -444,7 +444,7 @@ export default { const isSearched = !searchText || item.text() .toLowerCase() .indexOf(searchText) !== -1; - if (isSearched) { + if (isSearched && item) { itemsArray.push({ ...item, class: `${group.classPrefix}${item.key}`, diff --git a/website/client/src/components/shops/customizations/index.vue b/website/client/src/components/shops/customizations/index.vue index 5343fc4cc9..6d893ebe8a 100644 --- a/website/client/src/components/shops/customizations/index.vue +++ b/website/client/src/components/shops/customizations/index.vue @@ -33,6 +33,12 @@ class="npc" :style="{'background-image': imageURLs.npc}" > +