侧栏样式

footer.php

@@ -38,17 +38,6 @@
 			</div>
 		</div><!-- .site-info -->
 	</footer><!-- #colophon -->
-	<?php if (akina_option('sakura_widget')) : ?>
-	<aside id="secondary" class="widget-area" role="complementary" style="left: -400px;">
-    <button class="show_hide faa-parent animated-hover">
-        <i class="fa fa-magic faa-vertical" aria-hidden="true"></i>
-    </button>
-    <div class="heading"><?php _e('Widgets') /*小工具*/ ?></div>
-    <div class="sakura_widget">
-	<?php if (function_exists('dynamic_sidebar') && dynamic_sidebar('sakura_widget')) : endif; ?>
-	</div>
-    </aside>
-    <?php endif; ?>
 	<div class="openNav no-select">
 		<div class="iconflat no-select">	 
 			<div class="icon"></div>
@@ -150,16 +139,25 @@
     </div>
 </div>
 <canvas id="night-mode-cover"></canvas>
+<?php if (akina_option('sakura_widget')) : ?>
+	<aside id="secondary" class="widget-area" role="complementary" style="left: -400px;">
+    <div class="heading"><?php _e('Widgets') /*小工具*/ ?></div>
+    <div class="sakura_widget">
+	<?php if (function_exists('dynamic_sidebar') && dynamic_sidebar('sakura_widget')) : endif; ?>
+	</div>
+	<div class="show-hide-wrap"><button class="show-hide"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32"><path d="M22 16l-10.105-10.6-1.895 1.987 8.211 8.613-8.211 8.612 1.895 1.988 8.211-8.613z"></path></svg></button></div>
+    </aside>
+<?php endif; ?>
 <?php if (akina_option('playlist_id', '')): ?>
-<div id="aplayer-float" style="z-index: 100;"
-	class="aplayer"
-    data-id="<?php echo akina_option('playlist_id', ''); ?>"
-    data-server="netease"
-    data-type="playlist"
-    data-fixed="true"
-    data-theme="orange">
-</div>
-<style>.skin-menu{left:auto;right:10px;}.changeSkin-gear{left:auto;right:5px;}</style>
+    <div id="aplayer-float" style="z-index: 100;"
+	    class="aplayer"
+        data-id="<?php echo akina_option('playlist_id', ''); ?>"
+        data-server="netease"
+        data-type="playlist"
+        data-fixed="true"
+        data-theme="orange">
+    </div>
+    <style>.skin-menu{left:auto;right:10px;}.changeSkin-gear{left:auto;right:5px;}</style>
 <?php endif; ?>
 </body>
 </html>

js/sakura-app.js

@@ -798,12 +798,14 @@ if (mashiro_option.float_player_on) {
                                 maxHeight: '250px'
                             });
                             $(".aplayer.aplayer-fixed .aplayer-body").removeClass("ap-hover");
+                            $("#secondary").addClass("active");
                             apSwitchTag = 1;
                         } else {
                             aplayerlist.css({
                                 maxHeight: '0px'
                             });
                             $(".aplayer.aplayer-fixed .aplayer-body").addClass("ap-hover");
+                            $("#secondary").removeClass("active");
                             apSwitchTag = 0;
                         }
                     });
@@ -978,7 +980,7 @@ function mail_me() {
 
 function activate_widget(){
     if (document.body.clientWidth > 860) {
-        $('.show_hide').on('click', function() {
+        $('.show-hide').on('click', function() {
             $("#secondary").toggleClass("active")
         });
     }else{

languages/en_US.po

@@ -130,7 +130,7 @@ msgstr ""
 msgid "Site"
 msgstr ""
 
-#: footer.php:46
+#: footer.php:144
 msgid "Widgets"
 msgstr ""
 

languages/sakura.pot

@@ -130,7 +130,7 @@ msgstr ""
 msgid "Site"
 msgstr ""
 
-#: footer.php:46
+#: footer.php:144
 msgid "Widgets"
 msgstr ""
 

languages/zh_CN.po

@@ -130,7 +130,7 @@ msgstr "禁止小广告😀"
 msgid "Site"
 msgstr "网站"
 
-#: footer.php:46
+#: footer.php:144
 msgid "Widgets"
 msgstr "小工具"
 

style.css

@@ -8502,8 +8502,8 @@ h1[id*=toc-head]::before,h2[id*=toc-head]::before,h3[id*=toc-head]::before,h4[id
 
 .widget-area {
     position: fixed;
-    top: calc(100% - 132px);
-    bottom: 10%;
+    top: 100px;
+    bottom: 66px;
     left: -400px;
     z-index: 3;
     width: 400px;
@@ -8513,9 +8513,8 @@ h1[id*=toc-head]::before,h2[id*=toc-head]::before,h3[id*=toc-head]::before,h4[id
     box-shadow: 0 1px 20px -8px rgba(0,0,0,.5);
     z-index: 50;
 }
+
 .widget-area.active{
-    top: 100px;
-    bottom: 80px;
     left: -1px !important;
 }
 
@@ -8545,18 +8544,47 @@ h1[id*=toc-head]::before,h2[id*=toc-head]::before,h3[id*=toc-head]::before,h4[id
     border-color: #ddd;
 }
 
-.widget-area .show_hide{
+.widget-area .show-hide-wrap{
     position: absolute;
-    right: -42px;
-    height: 30px;
-    background: #f5f5f5;
-    border-color: #ddd;
+    background: #e6e6e6;
+    right: -18px;
+    width: 18px;
+    height: 66px;
+    border-radius: 0 6px 6px 0;
+    z-index: 50;
+}
+
+.active .show-hide-wrap {
+    width: 100%;
+    right: 0;
+    transition: all .3s ease;
+}
+
+.widget-area .show-hide{
+    display: inline-block;
+    width: 100%;
+    height: 100%;
+    font-size: 12px;
     outline:none;
     box-shadow: none;
     border: none;
-    border-left-width: 0;
+    opacity: .8;
+    vertical-align: middle;
+    padding: 0;
+    margin: 0;
+    -webkit-transform: rotateY(0);
+    transform: rotateY(0);
+    cursor: pointer;
+    border-radius: 0 6px 6px 0;
+    transition: all .3s ease;
 }
 
-.widget-area .show_hide .fa{
-    font-size: 20px;
+.widget-area.active .show-hide{
+    -webkit-transform: rotateY(180deg);
+    transform: rotateY(180deg);
+}
+
+.widget-area .show-hide svg{
+    width: 100%;
+    height: 100%;
 }