侧栏样式

This commit is contained in:
spirit 2019-11-16 22:08:20 +08:00
parent f02fd4e6c1
commit b31953cecb
6 changed files with 64 additions and 36 deletions

View File

@ -38,17 +38,6 @@
</div> </div>
</div><!-- .site-info --> </div><!-- .site-info -->
</footer><!-- #colophon --> </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="openNav no-select">
<div class="iconflat no-select"> <div class="iconflat no-select">
<div class="icon"></div> <div class="icon"></div>
@ -150,16 +139,25 @@
</div> </div>
</div> </div>
<canvas id="night-mode-cover"></canvas> <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', '')): ?> <?php if (akina_option('playlist_id', '')): ?>
<div id="aplayer-float" style="z-index: 100;" <div id="aplayer-float" style="z-index: 100;"
class="aplayer" class="aplayer"
data-id="<?php echo akina_option('playlist_id', ''); ?>" data-id="<?php echo akina_option('playlist_id', ''); ?>"
data-server="netease" data-server="netease"
data-type="playlist" data-type="playlist"
data-fixed="true" data-fixed="true"
data-theme="orange"> data-theme="orange">
</div> </div>
<style>.skin-menu{left:auto;right:10px;}.changeSkin-gear{left:auto;right:5px;}</style> <style>.skin-menu{left:auto;right:10px;}.changeSkin-gear{left:auto;right:5px;}</style>
<?php endif; ?> <?php endif; ?>
</body> </body>
</html> </html>

View File

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

View File

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

View File

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

View File

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

View File

@ -8502,8 +8502,8 @@ h1[id*=toc-head]::before,h2[id*=toc-head]::before,h3[id*=toc-head]::before,h4[id
.widget-area { .widget-area {
position: fixed; position: fixed;
top: calc(100% - 132px); top: 100px;
bottom: 10%; bottom: 66px;
left: -400px; left: -400px;
z-index: 3; z-index: 3;
width: 400px; 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); box-shadow: 0 1px 20px -8px rgba(0,0,0,.5);
z-index: 50; z-index: 50;
} }
.widget-area.active{ .widget-area.active{
top: 100px;
bottom: 80px;
left: -1px !important; 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; border-color: #ddd;
} }
.widget-area .show_hide{ .widget-area .show-hide-wrap{
position: absolute; position: absolute;
right: -42px; background: #e6e6e6;
height: 30px; right: -18px;
background: #f5f5f5; width: 18px;
border-color: #ddd; 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; outline:none;
box-shadow: none; box-shadow: none;
border: 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{ .widget-area.active .show-hide{
font-size: 20px; -webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.widget-area .show-hide svg{
width: 100%;
height: 100%;
} }