From 35355277f8c786a1d95a6275018a9d3bd0af710a Mon Sep 17 00:00:00 2001
From: Mimi <1119186082@qq.com>
Date: Wed, 24 Jun 2020 18:13:47 +0800
Subject: [PATCH] Optimize post-reward style

---
 layout/_partials/post/post-reward.njk         |  6 +--
 .../_common/components/post/post-reward.styl  | 39 ++++++++++++-------
 .../components/third-party/related-posts.styl |  1 -
 .../_common/outline/sidebar/sidebar-toc.styl  |  1 -
 source/css/_schemes/Mist/_posts-expand.styl   |  1 -
 source/css/_schemes/Pisces/_sidebar.styl      |  2 -
 6 files changed, 28 insertions(+), 22 deletions(-)

diff --git a/layout/_partials/post/post-reward.njk b/layout/_partials/post/post-reward.njk
index 949f3db..c6e2f53 100644
--- a/layout/_partials/post/post-reward.njk
+++ b/layout/_partials/post/post-reward.njk
@@ -1,9 +1,9 @@
 <div class="reward-container">
   <div>{{ page.reward_settings.comment }}</div>
-  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+  <button onclick="document.getElementById('post-reward').classList.toggle('active');">
     {{ __('reward.donate') }}
   </button>
-  <div id="qr" style="display: none;">
+  <div id="post-reward">
 
     {%- for name, image in theme.reward %}
       {%- set builtin = ['wechatpay', 'alipay', 'paypal', 'bitcoin'] %}
@@ -12,7 +12,7 @@
       {% else %}
         {%- set translation = name %}
       {%- endif %}
-      <div style="display: inline-block;">
+      <div>
         <img src="{{ url_for(image) }}" alt="{{ author }} {{ translation }}">
         <p>{{ translation }}</p>
       </div>
diff --git a/source/css/_common/components/post/post-reward.styl b/source/css/_common/components/post/post-reward.styl
index 9a3d7c9..22e17d5 100644
--- a/source/css/_common/components/post/post-reward.styl
+++ b/source/css/_common/components/post/post-reward.styl
@@ -24,8 +24,25 @@
   }
 }
 
-#qr {
+#post-reward {
   padding-top: 20px;
+  display: none;
+
+  &.active {
+    display: block;
+  }
+
+  div {
+    display: inline-block;
+
+    if (hexo-config('reward_settings.animation')) {
+      &:hover p {
+        animation: roll .1s infinite linear;
+        // The animation may affect :hover of img in dark mode
+        pointer-events: none;
+      }
+    }
+  }
 
   img {
     display: inline-block;
@@ -33,20 +50,14 @@
     max-width: 100%;
     width: 180px;
   }
+}
 
-  if (hexo-config('reward_settings.animation')) {
-    div:hover p {
-      animation: roll .1s infinite linear;
-    }
+@keyframes roll {
+  from {
+    transform: rotateZ(30deg);
+  }
 
-    @keyframes roll {
-      from {
-        transform: rotateZ(30deg);
-      }
-
-      to {
-        transform: rotateZ(-30deg);
-      }
-    }
+  to {
+    transform: rotateZ(-30deg);
   }
 }
diff --git a/source/css/_common/components/third-party/related-posts.styl b/source/css/_common/components/third-party/related-posts.styl
index ca1dc53..007fa06 100644
--- a/source/css/_common/components/third-party/related-posts.styl
+++ b/source/css/_common/components/third-party/related-posts.styl
@@ -9,7 +9,6 @@
   padding: 0;
 
   .popular-posts-item {
-    // list-style: none;
     margin-left: 2em;
 
     .popular-posts-title {
diff --git a/source/css/_common/outline/sidebar/sidebar-toc.styl b/source/css/_common/outline/sidebar/sidebar-toc.styl
index 8b6a72d..d93e43e 100644
--- a/source/css/_common/outline/sidebar/sidebar-toc.styl
+++ b/source/css/_common/outline/sidebar/sidebar-toc.styl
@@ -20,7 +20,6 @@
     line-height: 1.8;
     overflow: hidden;
     text-overflow: ellipsis;
-    // text-align: justify;
 
     if (!hexo-config('toc.wrap')) {
       white-space: nowrap;
diff --git a/source/css/_schemes/Mist/_posts-expand.styl b/source/css/_schemes/Mist/_posts-expand.styl
index 21c2ced..9c42b72 100644
--- a/source/css/_schemes/Mist/_posts-expand.styl
+++ b/source/css/_schemes/Mist/_posts-expand.styl
@@ -51,7 +51,6 @@
   text-align: left;
 
   .btn {
-    // color: $grey-dim;
     background: none;
     border: 0;
     border-bottom: 2px solid var(--btn-default-border-color);
diff --git a/source/css/_schemes/Pisces/_sidebar.styl b/source/css/_schemes/Pisces/_sidebar.styl
index 0b487bf..c043ae6 100644
--- a/source/css/_schemes/Pisces/_sidebar.styl
+++ b/source/css/_schemes/Pisces/_sidebar.styl
@@ -90,8 +90,6 @@
 }
 
 .links-of-blogroll-item {
-  //padding: 0;
-
   if (hexo-config('links_settings.layout') == 'inline') {
     display: inline-block;
     sidebar-inline-links-item();