From 62360619460d7975c8a28712dc29f1f55509948d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=8A=98=E5=BD=B1=E8=BD=BB=E6=A2=A6?= <776194970@qq.com>
Date: Sat, 8 Feb 2020 13:53:53 +0800
Subject: [PATCH] =?UTF-8?q?=E7=9B=AE=E5=BD=95=E5=8A=9F=E8=83=BD=E7=BE=8E?=
 =?UTF-8?q?=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 layout/post.ejs       | 10 +++---
 source/css/style.styl | 80 ++++++++++++++-----------------------------
 2 files changed, 31 insertions(+), 59 deletions(-)

diff --git a/layout/post.ejs b/layout/post.ejs
index 3f41af51a..b1d3a83c4 100644
--- a/layout/post.ejs
+++ b/layout/post.ejs
@@ -37,10 +37,12 @@
 
   <div class="nexmoe-post-right">
     <% if (page.toc || theme.function.globalToc){ %>
-      <div id="toc" class="toc-article">
-          <ul class="markdownIt-TOC">
-              <%- toc(page.content, {list_number: false}) %>
-          </ul>
+      <div class="nexmoe-fixed">
+        <div class="nexmoe-valign">
+            <div class="nexmoe-toc">
+                <%- toc(page.content, {list_number: true}) %>
+            </div>
+        </div>
       </div>
     <%} %>
   </div>
diff --git a/source/css/style.styl b/source/css/style.styl
index fbdaa4da9..2083b7707 100644
--- a/source/css/style.styl
+++ b/source/css/style.styl
@@ -941,78 +941,48 @@ font.douyin {
     text-align: right;
 }
 
-.toc-article a {
-    color: #fff
+.nexmoe-valign {
+    display: -webkit-box!important;
+    display: -webkit-flex!important;
+    display: -ms-flexbox!important;
+    display: flex!important;
+    -webkit-box-align: center!important;
+    -webkit-align-items: center!important;
+    -ms-flex-align: center!important;
+    align-items: center!important;
+    height: 100%;
 }
 
-.toc-article {
-    color: #fff;
-    background-color: #1f2022;
-    -webkit-transition: all 0.2s ease-in-out;
-    -moz-transition: all 0.2s ease-in-out;
-    -o-transition: all 0.2s ease-in-out;
-    -ms-transition: all 0.2s ease-in-out;
-    transition: all 0.2s ease-in-out;
-    display: inline;
-    list-style: none;
+.nexmoe-post-right .nexmoe-fixed {
     position: fixed;
     z-index: 1000;
     height: 100vh;
+    display: inline-block;
     top: 0;
-    width: 0;
-    text-align: left;
-     -webkit-transform: translateX(-100%);
-    -moz-transform: translateX(-100%);
-    -o-transform: translateX(-100%);
-    -ms-transform: translateX(-100%);
-    transform: translateX(-100%);
 }
 
-.toc-article:hover {
+.nexmoe-post-right .nexmoe-toc {
+    margin-left: 16px;
     width: 240px;
+    text-align: left;
 }
 
-.toc-article .markdownIt-TOC {
-    display: block;
-    overflow-y: auto;
-    overflow-x: hidden;
-    width: 240px;
-    padding: 10px;
+.nexmoe-post-right .nexmoe-toc a {
+    color: rgba(0,0,0,.6);
 }
 
-.toc-article .markdownIt-TOC {
-    opacity: 0;
-    a {
-        line-height: 52px;
-        width: 100%;
-        border-bottom: 1px solid hsla(0,0%,100%,.05);
-    }
-    li {
-        border-bottom: 1px solid hsla(0,0%,100%,.05);
-    }
+.nexmoe-post-right .nexmoe-toc ol {
+    padding-left: 1em;
 }
 
-.toc-article:hover .markdownIt-TOC {
-    opacity: 1;
+.nexmoe-post-right .nexmoe-toc li {
+    margin: 1em 0;
 }
 
-.toc-article::after {
-    background-color: #1f2022;
-    border-radius: 6px 6px 0 0;
-    content: 'TOC';
-    position: absolute;
-    width: 60px;
-    line-height: 30px;
-    top: 50%;
-    right: -16px;
-    text-align: center;
-    -webkit-transform: rotate(-90deg);
-    -moz-transform: rotate(-90deg);
-    -o-transform: rotate(-90deg);
-    -ms-transform: rotate(-90deg);
-    transform: rotate(-90deg);
+.nexmoe-post-right .nexmoe-toc > ol {
+    padding-left: 0;
 }
 
-.toc-article:hover::after {
-    opacity: 0;
+.nexmoe-toc * {
+    list-style: none;
 }
\ No newline at end of file