From 5537573cef375e3e3b5c24d00fe3625098f806ad Mon Sep 17 00:00:00 2001
From: nooldey <openzws@163.com>
Date: Fri, 29 Apr 2016 12:33:12 +0800
Subject: [PATCH 1/2] reward style
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

优化赞助按钮，将样式提取出来，结构和形式分离，便于后期优化和个性化样式。
---
 layout/_macro/reward.swig                     | 12 ++--
 .../_common/components/post/post-reward.styl  | 63 +++++++++++++++++++
 2 files changed, 69 insertions(+), 6 deletions(-)
 create mode 100644 source/css/_common/components/post/post-reward.styl

diff --git a/layout/_macro/reward.swig b/layout/_macro/reward.swig
index a007bc145..458f4c639 100644
--- a/layout/_macro/reward.swig
+++ b/layout/_macro/reward.swig
@@ -1,22 +1,22 @@
 {% if theme.alipay || theme.wechatpay %}
 <div style="padding: 10px 0; margin: 20px auto; width: 90%; text-align: center">
   <div>{{ theme.reward_comment }}</div>
-  <button id="rewardButton", disable="enable", onclick="var qr = document.getElementById('QR'); if (qr.style.display === 'none') {qr.style.display='block';} else {qr.style.display='none'}", style="cursor: pointer; border: 0; outline: 0; border-radius: 100%; padding: 0; margin: 0; letter-spacing: normal; text-transform: none; text-indent: 0px; text-shadow: none">
-    <span onmouseover="this.style.color='rgb(236,96,0)';this.style.background='rgb(204,204,204)'" onMouseOut="this.style.color='#fff';this.style.background='rgb(236,96,0)'" style="display: inline-block; width: 70px; height: 70px; border-radius: 100%; line-height: 81px; color: #fff; font: 400 35px/75px 'microsofty'; background: rgb(236,96,0)">赏</span>
+  <button id="rewardButton", disable="enable", onclick="var qr = document.getElementById('QR'); if (qr.style.display === 'none') {qr.style.display='block';} else {qr.style.display='none'}">
+    <span>赏</span>
   </button>
   <div id="QR" style="display: none;">
     {% if theme.wechatpay %}
       <div id="wechat" style="display: inline-block">
-        <img id="wechat_qr" src="{{ theme.wechatpay }}" alt="{{ theme.author }} WeChat Pay" style="width: 200px; max-width: 100%; display: inline-block"/>
+        <img id="wechat_qr" src="{{ theme.wechatpay }}" alt="{{ theme.author }} WeChat Pay"/>
         <p>微信打赏</p>
       </div>
     {% endif %}
     {% if theme.alipay %}
       <div id="alipay" style="display: inline-block">
-        <img id="alipay_qr" src="{{ theme.alipay }}" alt="{{ theme.author }} Alipay" style="width: 200px; max-width: 100%; display: inline-block"/>
+        <img id="alipay_qr" src="{{ theme.alipay }}" alt="{{ theme.author }} Alipay"/>
         <p>支付宝打赏</p>
       </div>
     {% endif %}
   </div>
-</div>
-{% endif %}
\ No newline at end of file
+<div>
+{% endif %}
diff --git a/source/css/_common/components/post/post-reward.styl b/source/css/_common/components/post/post-reward.styl
new file mode 100644
index 000000000..884666d2d
--- /dev/null
+++ b/source/css/_common/components/post/post-reward.styl
@@ -0,0 +1,63 @@
+#rewardButton {
+    cursor: pointer;
+    border: 0;
+    outline: 0;
+    border-radius: 100%;
+    padding: 0;
+    margin: 0;
+    letter-spacing: normal;
+    text-transform: none;
+    text-indent: 0px;
+    text-shadow: none;
+}
+#rewardButton span {
+    display: inline-block;
+    width: 80px;
+    height: 35px;
+    border-radius: 5px;
+    color: #fff;
+    font-weight: 400;
+    font-style: normal;
+    font-variant: normal;
+    font-stretch: normal;
+    font-size: 18px;
+    font-family: "Microsoft Yahei";
+    background: #F44336;
+}
+#rewardButton span:hover{
+    background: #F7877F;
+}
+#QR{
+    padding-top:20px;
+}
+#QR a{
+    border:0;
+}
+#QR img{
+    width: 180px;
+    max-width: 100%;
+    display: inline-block;
+    margin: 0.8em 2em 0 2em;
+}
+#wechat:hover p{
+    animation: roll 0.1s infinite linear;
+    -webkit-animation: roll 0.1s infinite linear;
+    -moz-animation: roll 0.1s infinite linear;
+}
+#alipay:hover p{
+    animation: roll 0.1s infinite linear;
+    -webkit-animation: roll 0.1s infinite linear;
+    -moz-animation: roll 0.1s infinite linear;
+}
+@keyframes roll{
+    from{-webkit-transform:rotateZ(30deg)}
+    to{-webkit-transform:rotateZ(-30deg)}
+}
+@-webkit-keyframes roll{
+    from{-webkit-transform:rotateZ(30deg)}
+    to{-webkit-transform:rotateZ(-30deg)}
+}
+@-moz-keyframes roll{
+    from{-webkit-transform:rotateZ(30deg)}
+    to{-webkit-transform:rotateZ(-30deg)}
+}

From 21c23c5ebbde9b29a80a60c463415ef29917d51d Mon Sep 17 00:00:00 2001
From: nooldey <openzws@163.com>
Date: Fri, 29 Apr 2016 12:34:47 +0800
Subject: [PATCH 2/2] reward

add reward style
---
 source/css/_common/components/post/post.styl | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/source/css/_common/components/post/post.styl b/source/css/_common/components/post/post.styl
index 4671983b3..32fab7bae 100644
--- a/source/css/_common/components/post/post.styl
+++ b/source/css/_common/components/post/post.styl
@@ -36,12 +36,11 @@
 @import "post-expand";
 @import "post-collapse";
 @import "post-type";
-
 @import "post-title";
 @import "post-meta";
 @import "post-more-link";
 @import "post-tags";
 @import "post-nav";
 @import "post-eof";
-
 @import "post-gallery";
+@import "post-reward";