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;