From 40d0aa1d1cf8ad6fe28fff5fb8d80d5a180abeeb Mon Sep 17 00:00:00 2001
From: XPoet <i@xpoet.cn>
Date: Fri, 15 Sep 2023 15:30:28 +0800
Subject: [PATCH] ui: optimize custom button tag style

---
 layout/_partial/post/reward-author.ejs  |  2 +-
 source/css/common/basic.styl            | 49 -------------------------
 source/css/common/tags/keep-button.styl | 47 ++++++++++++++++++++++++
 3 files changed, 48 insertions(+), 50 deletions(-)

diff --git a/layout/_partial/post/reward-author.ejs b/layout/_partial/post/reward-author.ejs
index c9b7b983..ef732b64 100644
--- a/layout/_partial/post/reward-author.ejs
+++ b/layout/_partial/post/reward-author.ejs
@@ -1,5 +1,5 @@
 <div class="reward-author-container border-box flex-center">
-    <button class="border-box tooltip-img"
+    <button class="keep-button border-box tooltip-img"
             data-tooltip-img-url="<%= theme?.post?.reward?.img_link %>"
             data-tooltip-img-trigger="hover"
             data-tooltip-img-style="top: -8px;"
diff --git a/source/css/common/basic.styl b/source/css/common/basic.styl
index 18e7249f..d067e4d0 100644
--- a/source/css/common/basic.styl
+++ b/source/css/common/basic.styl
@@ -187,55 +187,6 @@ img {
 }
 
 
-// ======================================================================
-// button
-// ======================================================================
-button {
-  position relative
-  box-sizing border-box
-  margin 0
-  padding 0.6rem 1rem
-  color var(--text-color-3)
-  font-size 1rem
-  background var(--background-color-1)
-  border none
-  border-radius 0.4rem
-  box-shadow 0.1rem 0.2rem 0.4rem var(--shadow-color)
-  cursor pointer
-
-  i {
-    color var(--text-color-3)
-  }
-
-
-  &:hover {
-    color var(--background-color-1)
-    background var(--primary-color)
-
-    i {
-      color var(--background-color-1)
-    }
-  }
-
-
-  &.size-small {
-    padding 0.5rem 0.8rem
-    font-size 0.8rem
-    border-radius 0.3rem
-    box-shadow 0.1rem 0.1rem 0.3rem var(--shadow-color)
-  }
-
-
-  &.size-large {
-    width 100%
-    padding 1rem
-    font-size 1.1rem
-    border-radius 0.5rem
-    box-shadow 0.1rem 0.2rem 0.5rem var(--shadow-color)
-  }
-}
-
-
 // ======================================================================
 // flex center
 // ======================================================================
diff --git a/source/css/common/tags/keep-button.styl b/source/css/common/tags/keep-button.styl
index 1ed1df66..a0445c03 100644
--- a/source/css/common/tags/keep-button.styl
+++ b/source/css/common/tags/keep-button.styl
@@ -1,4 +1,51 @@
 .keep-button {
+  position relative
+  box-sizing border-box
+  margin 0.3rem 0.6rem
+  padding 0.6rem 1rem
+  color var(--text-color-3)
+  font-size 1rem
+  background var(--background-color-1)
+  border none
+  border-radius 0.4rem
+  box-shadow 0.1rem 0.2rem 0.4rem var(--shadow-color)
+  cursor pointer
+
+
+  i {
+    color var(--text-color-3)
+  }
+
+
+  &:hover {
+    color var(--background-color-1)
+    background var(--primary-color)
+
+    i {
+      color var(--background-color-1)
+    }
+  }
+
+
+  &.size-small {
+    margin 0.2rem 0.4rem
+    padding 0.5rem 0.8rem
+    font-size 0.8rem
+    border-radius 0.3rem
+    box-shadow 0.1rem 0.1rem 0.3rem var(--shadow-color)
+  }
+
+
+  &.size-large {
+    width 100%
+    margin 0.6rem 0
+    padding 1rem
+    font-size 1.1rem
+    border-radius 0.5rem
+    box-shadow 0.1rem 0.2rem 0.5rem var(--shadow-color)
+  }
+
+
   &.color-primary {
     color var(--note-primary-color)
     background-color var(--note-primary-background-color)