feat: add gradient bg-color

src/components/CodeModal.vue

@@ -96,10 +96,7 @@ onUnmounted(() => {
   padding: 2rem 0;
   overflow: hidden;
   transform: translate(-50%, 0);
-
-  @supports (backdrop-filter: blur(0.1rem)) {
   backdrop-filter: blur(0.1rem);
-  }
 }
 
 .code-box {

src/components/Configurator.vue

@@ -166,7 +166,6 @@ function switchWidget(widgetType: WidgetType, widgetShape: WidgetShape) {
   width: $layout-sider-width;
   height: 100%;
   background-color: $color-configurator;
-  backdrop-filter: blur(10px);
 }
 
 .configurator {
@@ -209,7 +208,10 @@ function switchWidget(widgetType: WidgetType, widgetShape: WidgetShape) {
     align-items: center;
 
     .bg-color-list__item {
-      padding: 0.4rem 0.5rem;
+      position: relative;
+      z-index: 1;
+      flex: 1;
+      padding: 0.6rem 0.5rem;
       cursor: pointer;
       transition: transform 0.2s;
 
@@ -229,7 +231,7 @@ function switchWidget(widgetType: WidgetType, widgetShape: WidgetShape) {
           z-index: -1;
           width: 100%;
           height: 100%;
-          background-color: inherit;
+          background: inherit;
           border-radius: 50%;
           transform: translate(-50%, -50%);
           opacity: 0.5;
@@ -241,6 +243,7 @@ function switchWidget(widgetType: WidgetType, widgetShape: WidgetShape) {
           position: absolute;
           top: 50%;
           left: 50%;
+          z-index: 1;
           color: $color-configurator;
           font-size: 1.5rem;
           transform: translate(-50%, -50%) scale(0.5);

src/components/DownloadModal.vue

@@ -49,9 +49,12 @@ const { t } = useI18n()
   height: 100%;
   padding: 2rem 0;
   overflow: hidden;
-  background-color: rgba($color-dark, 0.4);
   transform: translate(-50%, 0);
   backdrop-filter: blur(0.3rem);
+
+  @supports not (backdrop-filter: blur(0.3rem)) {
+    background-color: rgba($color-dark, 0.8);
+  }
 }
 
 .download-modal {

src/utils/constant.ts

@@ -72,8 +72,6 @@ export const SETTINGS: Readonly<AvatarSettings> = {
   clothesShape: Object.values(ClothesShape),
 
   backgroundColor: [
-    '#EEE',
-    '#9287FF',
     '#6BD9E9',
     '#FC909F',
     '#F4D150',
@@ -83,7 +81,11 @@ export const SETTINGS: Readonly<AvatarSettings> = {
     '#FFEBA4',
     '#506AF4',
     '#F48150',
-    '#74D153',
+    '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)',
   ],
   skinColor: ['#F9C9B6', '#AC6651'],
   clothesColor: ['#9287FF', '#6BD9E9', '#FC909F', '#F4D150', '#77311D'],

src/utils/index.ts

@@ -136,7 +136,7 @@ export function showConfetti() {
 
     const duration = performance.now() + 1 * 1000
 
-    const colors = SETTINGS.backgroundColor.slice(1, 4)
+    const colors = ['#6967fe', '#85e9f4', '#e16984']
 
     void (function frame() {
       myConfetti({