top按钮和章节列表按钮调整

This commit is contained in:
结发受长生 2019-05-23 12:41:01 +08:00
parent d6c8ad854b
commit 5fe19de5cf
4 changed files with 30 additions and 58 deletions

View File

@ -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 %>

View File

@ -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;
} }

View File

@ -4,31 +4,34 @@
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 {
position: relative; position: relative;
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;

View File

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