From 19e5ca50b996bc0aefa62afa899c7efbcf1441b8 Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Fri, 6 Oct 2023 20:08:11 +0800
Subject: [PATCH] style: adjust styles

---
 src/components/Settings/components/Appearance.vue | 14 ++++++++------
 src/styles/variables.scss                         |  2 +-
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/components/Settings/components/Appearance.vue b/src/components/Settings/components/Appearance.vue
index 9e83ad6d..0717bcbd 100644
--- a/src/components/Settings/components/Appearance.vue
+++ b/src/components/Settings/components/Appearance.vue
@@ -88,11 +88,12 @@ function changeWallpaper(url: string) {
         <div flex="~ gap-2 wrap" justify-end>
           <div
             v-for="color in themeColorOptions" :key="color"
-            w-20px h-20px rounded-8 cursor-pointer transition duration-300
+            w-20px h-20px rounded-8 cursor-pointer transition duration-300 box-border
             :style="{
               background: color,
-              transform: color === settings.themeColor ? 'scale(1.2)' : 'scale(1)',
-              border: color === settings.themeColor ? '2px solid var(--bew-text-1)' : 'none',
+              transform: color === settings.themeColor ? 'scale(1.3)' : 'scale(1)',
+              border: color === settings.themeColor ? '2px solid white' : '2px solid transparent',
+              boxShadow: color === settings.themeColor ? '0 0 0 1px var(--bew-border-color), var(--bew-shadow-1)' : 'none',
             }"
             @click="changeThemeColor(color)"
           />
@@ -100,11 +101,12 @@ function changeWallpaper(url: string) {
       </SettingsItem>
       <SettingsItem :title="$t('settings.follow_bilibili_evolved_color')" :desc="$t('settings.follow_bilibili_evolved_color_desc')">
         <div
-          w-20px h-20px rounded-8 cursor-pointer
+          w-20px h-20px rounded-8 cursor-pointer transition duration-300 box-border
           :style="{
             background: bilibiliEvolvedThemeColor,
-            transform: bilibiliEvolvedThemeColor === settings.themeColor ? 'scale(1.2)' : 'scale(1)',
-            border: bilibiliEvolvedThemeColor === settings.themeColor ? '2px solid var(--bew-text-1)' : 'none',
+            transform: bilibiliEvolvedThemeColor === settings.themeColor ? 'scale(1.3)' : 'scale(1)',
+            border: bilibiliEvolvedThemeColor === settings.themeColor ? '2px solid white' : '2px solid transparent',
+            boxShadow: bilibiliEvolvedThemeColor === settings.themeColor ? '0 0 0 1px var(--bew-border-color), var(--bew-shadow-1)' : 'none',
           }"
           @click="changeThemeColor(bilibiliEvolvedThemeColor)"
         />
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index cc71d0d3..63a7aa1a 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -6,7 +6,7 @@
   --bew-filter-glass: blur(20px) saturate(180%);
 
   // #region shadow
-  --bew-shadow-1: 0 4px 6px -1px rgb(0 0 0 / 0.1),
+  --bew-shadow-1: 0 4px 6px -1px rgb(0 0 0 / 0.15),
     0 2px 4px -2px rgb(0 0 0 / 0.1);
   --bew-shadow-2: 0 10px 15px -3px rgb(0 0 0 / 0.22),
     0 4px 6px -4px rgb(0 0 0 / 0.16);