ui: optimize custom button tag style

XPoet · Sep 19, 2023 · 40d0aa1 · 40d0aa1
1 parent a163a78
commit 40d0aa1
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 50 deletions.
diff --git 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
@@ -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
@@ -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)