diff --git a/src/components/Configurator.vue b/src/components/Configurator.vue index 9817b287bf49208645e0fad8643013365a5e1e30..3e9d809afc4bfc71527a992a20aef8e9ee4faacf 100644 --- a/src/components/Configurator.vue +++ b/src/components/Configurator.vue @@ -32,7 +32,10 @@
@@ -210,8 +213,8 @@ function switchWidget(widgetType: WidgetType, widgetShape: WidgetShape) { .bg-color-list__item { position: relative; z-index: 1; - flex: 1; - padding: 0.6rem 0.5rem; + width: calc(100% / 7); + padding: 0.6rem 0; cursor: pointer; transition: transform 0.2s; @@ -220,9 +223,27 @@ function switchWidget(widgetType: WidgetType, widgetShape: WidgetShape) { box-sizing: content-box; width: 1.3em; height: 1.3em; + margin: 0 auto; font-size: 16px; border-radius: 50%; - box-shadow: 0 0 0.1em 0.15em $color-configurator; + box-shadow: 0 0 0.05em 0.2em $color-configurator; + + &.transparent { + background: #fff !important; + + &::after { + position: absolute; + top: 50%; + left: 50%; + z-index: 1; + color: #ff4757; + font-weight: bold; + font-size: 1.8rem; + transform: translate(-50%, -50%) scale(0.5); + opacity: 1; + content: '\\'; + } + } &::before { position: absolute; diff --git a/src/utils/constant.ts b/src/utils/constant.ts index db47f35c79148f71218371ce1c80002ac770cf87..edabb31bbea9d38f4f3e21df51580d1091fdd288 100644 --- a/src/utils/constant.ts +++ b/src/utils/constant.ts @@ -81,11 +81,15 @@ export const SETTINGS: Readonly = { '#FFEBA4', '#506AF4', '#F48150', + '#48A99A', + '#C09FFF', + '#FD6F5D', 'linear-gradient(45deg, #E3648C, #D97567)', 'linear-gradient(62deg, #8EC5FC, #E0C3FC)', 'linear-gradient(90deg, #ffecd2, #fcb69f)', 'linear-gradient(120deg, #a1c4fd, #c2e9fb)', 'linear-gradient(-135deg, #fccb90, #d57eeb)', + 'transparent', ], skinColor: ['#F9C9B6', '#AC6651'], clothesColor: ['#9287FF', '#6BD9E9', '#FC909F', '#F4D150', '#77311D'],