From 3f843f010af20b0140d73a3567d04e7352eb629b Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Tue, 5 May 2020 04:57:40 +0800
Subject: [PATCH] Avoid color sparkles when switching modes.

- the search bar (desktop view)
- the site title.
---
 assets/css/_addon/main.scss              | 17 ++++++++---------
 assets/css/_addon/module.scss            |  4 ++--
 assets/css/_colors/dark-typography.scss  |  1 -
 assets/css/_colors/light-typography.scss |  4 ----
 4 files changed, 10 insertions(+), 16 deletions(-)

diff --git a/assets/css/_addon/main.scss b/assets/css/_addon/main.scss
index 5fd1481..13a077f 100644
--- a/assets/css/_addon/main.scss
+++ b/assets/css/_addon/main.scss
@@ -80,7 +80,7 @@ $sidebar-display: "sidebar-display";
   background: rgb(42, 30, 107);
   background: var(--sidebar-bg);
   a {
-    @include sidebar-icon;
+    @include sidebar-links;
   }
   .sidebar-bottom {
     .icon-border+a { // the icon behide mode-toggle
@@ -168,7 +168,7 @@ $sidebar-display: "sidebar-display";
 
     #mode-toggle-wrapper {
       i {
-        @include sidebar-icon;
+        @include sidebar-links;
         margin-right: 0;
         font-size: 1.05rem;
         text-align: center;
@@ -226,11 +226,10 @@ $sidebar-display: "sidebar-display";
   img {
     width: 100%;
     height: 100%;
-    background-size: cover;
-    background-repeat: no-repeat;
-    -webkit-transition: all .5s !important;
-    -moz-transition: all .5s !important;
-    transition: all .5s !important;
+    -webkit-transition: transform .5s;
+    -moz-transition: transform .5s;
+    transition: transform .5s;
+
     &:hover {
       -ms-transform: scale(1.2);
       -moz-transform: scale(1.2);
@@ -243,7 +242,7 @@ $sidebar-display: "sidebar-display";
 #site-title {
   text-align: center;
   a {
-    color: var(--site-title-color);
+    // color: var(--site-title-color);
     font-weight: 900;
     font-size: 1.5rem;
     letter-spacing: .5px;
@@ -323,7 +322,6 @@ $sidebar-display: "sidebar-display";
   border: 1px solid var(--search-wrapper-bg);
   background: var(--search-wrapper-bg);
   padding: 0 .5rem;
-  transition: background-color .15s ease-in-out,border-color .15s ease-in-out;
   i {
     z-index: 2;
     font-size: .9rem;
@@ -921,6 +919,7 @@ table {
   box-shadow: none;
   border-color: var(--input-focus-border-color) !important;
   background: center !important;
+  transition: background-color .15s ease-in-out,border-color .15s ease-in-out;
 }
 
 /*--- Responsive Design ---*/
diff --git a/assets/css/_addon/module.scss b/assets/css/_addon/module.scss
index 132fa17..f2108a2 100644
--- a/assets/css/_addon/module.scss
+++ b/assets/css/_addon/module.scss
@@ -62,8 +62,8 @@
   text-decoration: none;
 }
 
-@mixin sidebar-icon {
-  color: rgba(255, 255, 255, 0.5);
+@mixin sidebar-links($color: rgba(255, 255, 255, 0.5)) {
+  color: $color;
   transition: color 0.35s ease-in-out;
   user-select: none;
   margin: 0 .25rem;
diff --git a/assets/css/_colors/dark-typography.scss b/assets/css/_colors/dark-typography.scss
index 1879eb4..f0aacbe 100644
--- a/assets/css/_colors/dark-typography.scss
+++ b/assets/css/_colors/dark-typography.scss
@@ -37,7 +37,6 @@
   --label-color: rgb(108, 117, 125);
 
   /* Sidebar */
-  --site-title-color: rgba(255, 255, 255, 0.5);
   --nav-cursor-color: rgb(183, 182, 182);
   --sidebar-bg: radial-gradient(circle, #242424 0%, #1d1f27 100%);
 
diff --git a/assets/css/_colors/light-typography.scss b/assets/css/_colors/light-typography.scss
index f1abfbd..3e5ab11 100644
--- a/assets/css/_colors/light-typography.scss
+++ b/assets/css/_colors/light-typography.scss
@@ -44,8 +44,6 @@
 
   /* Sidebar */
 
-  --site-title-color: #b6b6b6;
-
   --sidebar-bg: radial-gradient(
     circle, rgba(42, 30, 107, 1) 0%, rgba(35, 37, 46, 1) 100%);
 
@@ -57,8 +55,6 @@
 
   --topbar-text-color: rgb(78, 78, 78);
 
-  --search-wrapper-bg: #fff;
-
   --search-wrapper-bg: #f5f5f5;
 
   --search-tag-bg: #f8f9fa;