Optimize post-reward style

next-theme · Jun 24, 2020 · 3535527 · 3535527
1 parent 7d25c16
commit 3535527
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 22 deletions.
diff --git 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
@@ -24,29 +24,40 @@
   }
 }
 
-#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;
     margin: .8em 2em 0 2em;
     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
@@ -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
@@ -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
@@ -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
@@ -90,8 +90,6 @@
 }
 
 .links-of-blogroll-item {
-  //padding: 0;
-
   if (hexo-config('links_settings.layout') == 'inline') {
     display: inline-block;
     sidebar-inline-links-item();