Merge pull request #855 from nooldey/master

reward style

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 %}
+<div>
+{% endif %}

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)}
+}

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";