ui: optimize reward author button style

XPoet · Sep 25, 2023 · 5c6a041 · 5c6a041
1 parent 72157d9
commit 5c6a041
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 3 deletions.
diff --git a/layout/_partial/post/reward-author.ejs b/layout/_partial/post/reward-author.ejs
@@ -1,9 +1,10 @@
 <div class="reward-author-container border-box flex-center">
-    <button class="keep-button border-box tooltip-img"
+    <button class="keep-button border-box flex-center reward-btn tooltip tooltip-img"
+            data-tooltip-content="<%= theme?.post?.reward?.text ||  __('post.reward') %>"
             data-tooltip-img-url="<%= theme?.post?.reward?.img_link %>"
-            data-tooltip-img-trigger="hover"
+            data-tooltip-img-trigger="click"
             data-tooltip-img-style="top: -8px;"
     >
-        <i class="fa-solid fa-hand-holding-heart"></i>&nbsp;<%= theme?.post?.reward?.text ||  __('post.reward') %>
+        <i class="fa-solid fa-hand-holding-heart"></i>
     </button>
 </div>
diff --git a/source/css/layout/_partial/post/reward-author.styl b/source/css/layout/_partial/post/reward-author.styl
@@ -8,4 +8,15 @@
       }
     }
   }
+
+
+  .reward-btn {
+    width 2.6rem
+    height 2.6rem
+    border-radius 50%
+
+    i {
+      font-size 1rem
+    }
+  }
 }