From 543d9b24f03f51763674c4615980a6a89235b919 Mon Sep 17 00:00:00 2001
From: zombieFox <crudetoaster@gmail.com>
Date: Fri, 27 Aug 2021 13:06:58 +0100
Subject: [PATCH] improve theme accent cycle transition

---
 src/component/bookmark/index.css                | 10 ++++++++--
 src/component/menuContent/themeSetting/index.js |  1 +
 src/component/theme/index.js                    |  3 ++-
 3 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/component/bookmark/index.css b/src/component/bookmark/index.css
index 0afa1ca4..abfbfea9 100644
--- a/src/component/bookmark/index.css
+++ b/src/component/bookmark/index.css
@@ -609,7 +609,12 @@
 .is-bookmark-edit .bookmark-back {
   height: 100%;
   top: 0;
-  transition-delay: calc(var(--bookmark-transition-delay) * 0.03s);
+  transition-delay: calc(var(--bookmark-transition-delay) * 1s);
+}
+
+.is-theme-accent-cycle-active .bookmark-back {
+  transition: background-color var(--layout-transition-extra-fast), height var(--layout-transition-extra-fast), border-radius var(--layout-transition-extra-fast), top var(--layout-transition-extra-fast), clip-path var(--layout-transition-extra-fast);
+  transition-delay: none;
 }
 
 .is-bookmark-line-show .bookmark-back {
@@ -749,6 +754,7 @@
   overflow: hidden;
   pointer-events: none;
   transition: top var(--layout-transition-extra-fast), bottom var(--layout-transition-extra-fast);
+  transition-delay: calc(var(--bookmark-transition-delay) * 0.03s);
 }
 
 .is-bookmark-style-block .bookmark-control {
@@ -801,7 +807,7 @@
 
 .is-bookmark-edit.is-bookmark-orientation-top .bookmark-control {
   top: 0;
-  transition: top var(--layout-duration-04) var(--layout-timing-bounce);
+  transition: top var(--layout-duration-04) var(--layout-timing-bounce) var(--layout-duration-01);
   transition-delay: calc(var(--bookmark-transition-delay) * 0.03s);
 }
 
diff --git a/src/component/menuContent/themeSetting/index.js b/src/component/menuContent/themeSetting/index.js
index 06de3490..c0fb6551 100644
--- a/src/component/menuContent/themeSetting/index.js
+++ b/src/component/menuContent/themeSetting/index.js
@@ -626,6 +626,7 @@ themeSetting.accent = (parent) => {
       themeSetting.control.accent.cycle.collapse.update();
       theme.accent.cycle.bind();
       themeSetting.disable();
+      applyCSSState('theme.accent.cycle.active');
       data.save();
     }
   });
diff --git a/src/component/theme/index.js b/src/component/theme/index.js
index 9b6c436d..53ea601a 100644
--- a/src/component/theme/index.js
+++ b/src/component/theme/index.js
@@ -531,7 +531,8 @@ theme.init = () => {
     'theme.bookmark.color.by'
   ]);
   applyCSSState([
-    'theme.layout.divider.size'
+    'theme.layout.divider.size',
+    'theme.accent.cycle.active'
   ]);
 };