侧栏样式
This commit is contained in:
spirit
parent
f02fd4e6c1
commit
b31953cecb
20
footer.php
20
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,6 +139,15 @@
|
|||
</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"
|
||||
|
|
|
|||
|
|
@ -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{
|
||||
|
|
|
|||
|
|
@ -130,7 +130,7 @@ msgstr ""
|
|||
msgid "Site"
|
||||
msgstr ""
|
||||
|
||||
#: footer.php:46
|
||||
#: footer.php:144
|
||||
msgid "Widgets"
|
||||
msgstr ""
|
||||
|
||||
|
|
|
|||
|
|
@ -130,7 +130,7 @@ msgstr ""
|
|||
msgid "Site"
|
||||
msgstr ""
|
||||
|
||||
#: footer.php:46
|
||||
#: footer.php:144
|
||||
msgid "Widgets"
|
||||
msgstr ""
|
||||
|
||||
|
|
|
|||
|
|
@ -130,7 +130,7 @@ msgstr "禁止小广告😀"
|
|||
msgid "Site"
|
||||
msgstr "网站"
|
||||
|
||||
#: footer.php:46
|
||||
#: footer.php:144
|
||||
msgid "Widgets"
|
||||
msgstr "小工具"
|
||||
|
||||
|
|
|
|||
52
style.css
52
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%;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue