From 1c77cadfd04d16f52997d2f23fecec2553051691 Mon Sep 17 00:00:00 2001
From: Peng Xiao <pengxiao@outlook.com>
Date: Wed, 30 Jun 2021 12:09:26 +0800
Subject: [PATCH] fix: add transition to threading

---
 custom.css | 25 +++++++++++++++++++------
 1 file changed, 19 insertions(+), 6 deletions(-)

diff --git a/custom.css b/custom.css
index d521006..718265c 100644
--- a/custom.css
+++ b/custom.css
@@ -268,6 +268,7 @@ a:hover > .bullet-container .bullet {
   transform: scale(1);
 }
 
+/* Editing block threading */
 .ls-block > div > div.items-center {
   position: relative;
 }
@@ -276,7 +277,7 @@ div.items-center::before,
 div.items-center::after,
 .ls-block::before,
 .ls-block::after {
-  transition: background-color 0.2s;
+  transition: all 0.1s;
 }
 
 .doc-mode div.items-center::before,
@@ -286,36 +287,48 @@ div.items-center::after,
   display: none;
 }
 
-.ls-block:not([level="1"]):focus-within > div > div.items-center::before {
+.ls-block:not([level="1"]) > div > div.items-center::before {
   content: "";
   height: 100%;
   left: -2px;
   right: 6px;
   top: -50%;
   position: absolute;
-  border-left: 2px solid var(--ct-page-reference-color);
-  border-bottom: 2px solid var(--ct-page-reference-color);
+  border-left: 2px solid transparent;
+  border-bottom: 2px solid transparent;
   border-bottom-left-radius: 6px;
 }
 
-.ls-block:not([level="1"]):focus-within > div > div.items-center::after {
+.ls-block:not([level="1"]):focus-within > div > div.items-center::before {
+  border-color: var(--ct-page-reference-color);
+}
+
+.ls-block:not([level="1"]) > div > div.items-center::after {
   content: "";
   height: calc(100% - 4px);
   width: 2px;
   top: -50%;
   left: -2px;
   position: absolute;
+  background-color: transparent;
+}
+
+.ls-block:not([level="1"]):focus-within > div > div.items-center::after {
   background-color: var(--ct-page-reference-color);
 }
 
 .block-children:focus-within > .ls-block::before {
+  background-color: var(--ct-page-reference-color);
+}
+
+.block-children > .ls-block::before {
   content: "";
   top: -10px;
   bottom: 0;
   width: 2px;
   left: -2px;
   position: absolute;
-  background-color: var(--ct-page-reference-color);
+  background-color: transparent;
 }
 
 .block-children:focus-within > .ls-block:focus-within::before {