From d66ceded6e469e71830eafd2966e0c6ea8c70d72 Mon Sep 17 00:00:00 2001
From: qier222 <qier222@outlook.com>
Date: Wed, 9 Dec 2020 16:55:13 +0800
Subject: [PATCH] fix: update colors

---
 src/App.vue                    |  4 ++++
 src/components/ButtonIcon.vue  |  2 +-
 src/components/ContextMenu.vue |  6 +++++-
 src/components/Navbar.vue      | 17 ++++++++++++++---
 4 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 76e2897..cba9d2c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -72,6 +72,8 @@ export default {
   --color-secondary: #7a7a7b;
   --color-secondary-bg: #f5f5f7;
   --color-navbar-bg: rgba(255, 255, 255, 0.86);
+  --color-primary-bg-for-transparent: rgba(189, 207, 255, 0.28);
+  --color-secondary-bg-for-transparent: rgba(209, 209, 214, 0.28);
 }
 
 [data-theme="dark"] {
@@ -83,6 +85,8 @@ export default {
   --color-secondary-bg: #323232;
   --color-navbar-bg: #335eea;
   --color-navbar-bg: rgba(34, 34, 34, 0.86);
+  --color-primary-bg-for-transparent: rgba(255, 255, 255, 0.12);
+  --color-secondary-bg-for-transparent: rgba(255, 255, 255, 0.08);
 }
 
 #app {
diff --git a/src/components/ButtonIcon.vue b/src/components/ButtonIcon.vue
index 12d6af6..efa14d7 100644
--- a/src/components/ButtonIcon.vue
+++ b/src/components/ButtonIcon.vue
@@ -27,7 +27,7 @@ button {
     margin-left: 0;
   }
   &:hover {
-    background: var(--color-secondary-bg);
+    background: var(--color-secondary-bg-for-transparent);
   }
   &:active {
     transform: scale(0.92);
diff --git a/src/components/ContextMenu.vue b/src/components/ContextMenu.vue
index c79fa18..024f533 100644
--- a/src/components/ContextMenu.vue
+++ b/src/components/ContextMenu.vue
@@ -85,6 +85,9 @@ export default {
     backdrop-filter: blur(16px) contrast(120%);
     border: 1px solid rgba(255, 255, 255, 0.08);
   }
+  .menu .item:hover {
+    color: var(--color-text);
+  }
 }
 
 .menu .item {
@@ -95,7 +98,8 @@ export default {
   cursor: default;
   color: var(--color-text);
   &:hover {
-    background: var(--color-secondary-bg);
+    color: var(--color-primary);
+    background: var(--color-primary-bg-for-transparent);
   }
 }
 
diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
index 3d41f0a..5acc941 100644
--- a/src/components/Navbar.vue
+++ b/src/components/Navbar.vue
@@ -139,7 +139,7 @@ nav {
       left: 12px;
     }
     &:hover {
-      background: var(--color-secondary-bg);
+      background: var(--color-secondary-bg-for-transparent);
     }
     &:active {
       transform: scale(0.92);
@@ -167,7 +167,7 @@ nav {
     display: flex;
     align-items: center;
     height: 32px;
-    background: var(--color-secondary-bg);
+    background: var(--color-secondary-bg-for-transparent);
     border-radius: 8px;
     width: 200px;
   }
@@ -194,7 +194,7 @@ nav {
   }
 
   .active {
-    background: var(--color-primary-bg);
+    background: var(--color-primary-bg-for-transparent);
     input,
     .svg-icon {
       opacity: 1;
@@ -203,6 +203,17 @@ nav {
   }
 }
 
+[data-theme="dark"] {
+  .search-box {
+    .active {
+      input,
+      .svg-icon {
+        color: var(--color-text);
+      }
+    }
+  }
+}
+
 .right-part {
   flex: 1;
   display: flex;