top按钮和章节列表按钮调整
This commit is contained in:
parent
d6c8ad854b
commit
5fe19de5cf
@ -2,20 +2,15 @@
|
|||||||
<div class="mod-side-operation">
|
<div class="mod-side-operation">
|
||||||
<% if (theme.top){ %>
|
<% if (theme.top){ %>
|
||||||
<div class="jump-container" id="js-jump-container" style="display:none;">
|
<div class="jump-container" id="js-jump-container" style="display:none;">
|
||||||
<a href="javascript:void(0)" class="mod-side-operation__jump-to-top">
|
<a href="javascript:void(0)" >
|
||||||
<i class="icon icon-chevron-up"></i>
|
<i class="icon icon-chevron-up"></i>
|
||||||
</a>
|
</a>
|
||||||
<div id="js-jump-plan-container" class="jump-plan-container">
|
|
||||||
<i class="icon icon-chevron-up jump-plane"></i>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<% } %>
|
<% } %>
|
||||||
<% if (is_post() && ((theme.toc === 1 && post.toc) || theme.toc === 2)){ %>
|
<% if (is_post() && ((theme.toc === 1 && post.toc) || theme.toc === 2)){ %>
|
||||||
<div class="toc-container tooltip-left">
|
<div class="toc-container tooltip-left">
|
||||||
<i class="icon icon-list"></i>
|
<i class="icon icon-list"></i>
|
||||||
<div class="tooltip tooltip-east">
|
<div class="tooltip tooltip-east">
|
||||||
<span class="tooltip-item">
|
|
||||||
</span>
|
|
||||||
<span class="tooltip-content">
|
<span class="tooltip-content">
|
||||||
<div class="toc-article">
|
<div class="toc-article">
|
||||||
<%- toc(post.content) || theme.toc_empty_wording %>
|
<%- toc(post.content) || theme.toc_empty_wording %>
|
||||||
|
|||||||
@ -11,9 +11,6 @@
|
|||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
transition: color 0.3s;
|
transition: color 0.3s;
|
||||||
}
|
}
|
||||||
#article-nav .article-nav-link-wrap:hover i {
|
|
||||||
color: #4d4d4d;
|
|
||||||
}
|
|
||||||
#article-nav .article-nav-link-wrap:hover .article-nav-title {
|
#article-nav .article-nav-link-wrap:hover .article-nav-title {
|
||||||
color: #4d4d4d;
|
color: #4d4d4d;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -4,23 +4,25 @@
|
|||||||
bottom: 50px;
|
bottom: 50px;
|
||||||
z-index: 999;
|
z-index: 999;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
.icon-chevron-up {
|
.icon {
|
||||||
color: $colorF;
|
color: $colorF;
|
||||||
text-shadow: 1px 1px 1px #509eb7;
|
text-shadow: 1px 1px 1px #509eb7;
|
||||||
opacity: 0.7;
|
font-size: 24px;
|
||||||
font-size: 52px;
|
|
||||||
line-height: 40px;
|
line-height: 40px;
|
||||||
width: 40px;
|
width: 40px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
display: block;
|
display: block;
|
||||||
|
transition: 0.3s;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.mod-side-operation {
|
.mod-side-operation {
|
||||||
width: 40px;
|
width: 40px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
.jump-container:hover .icon-chevron-up {
|
.jump-container:hover, .toc-container:hover{
|
||||||
|
.icon {
|
||||||
background: rgba(36, 193, 246, 0.9);
|
background: rgba(36, 193, 246, 0.9);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.jump-container, .toc-container {
|
.jump-container, .toc-container {
|
||||||
@ -28,7 +30,8 @@
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
width: 40px;
|
width: 40px;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
opacity: .8;
|
background: #ccc;
|
||||||
|
opacity: .7;
|
||||||
}
|
}
|
||||||
.jump-plan-container {
|
.jump-plan-container {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@ -46,33 +49,10 @@
|
|||||||
left: -2px;
|
left: -2px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.mod-side-operation__jump-to-top .icon-chevron-up {
|
|
||||||
transition: 0.3s;
|
|
||||||
color: $colorF;
|
|
||||||
background: #ccc;
|
|
||||||
font-size: 32px;
|
|
||||||
line-height: 40px;
|
|
||||||
width: 40px;
|
|
||||||
text-align: center;
|
|
||||||
display: block;
|
|
||||||
&:hover {
|
|
||||||
background: #24c1f6;
|
|
||||||
color: #24c1f6;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.toc-container.tooltip-left{
|
.toc-container.tooltip-left{
|
||||||
background: $colorC;
|
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
transition: 0.3s;
|
transition: 0.3s;
|
||||||
&:hover {
|
|
||||||
background: rgba(36, 193, 246, 0.9);
|
|
||||||
}
|
|
||||||
.icon {
|
|
||||||
font-size: 22px;
|
|
||||||
line-height: 45px;
|
|
||||||
color: $colorF;
|
|
||||||
}
|
|
||||||
.tooltip {
|
.tooltip {
|
||||||
width: 40px;
|
width: 40px;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
|
|||||||
@ -51,7 +51,7 @@
|
|||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
background: rgba(0, 0, 0, .85);
|
background: rgba(0, 0, 0, .85);
|
||||||
z-index: 999;
|
z-index: 2;
|
||||||
}
|
}
|
||||||
.btnctn{
|
.btnctn{
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user