Adjust back2top style

This commit is contained in:
Mimi 2022-11-10 16:00:15 +08:00
parent 25eb0bce33
commit 29cb5ebf39
7 changed files with 31 additions and 21 deletions

View File

@ -11,7 +11,7 @@
{%- if theme.back2top.enable and not theme.back2top.sidebar %}
<div class="back-to-top" role="button" aria-label="{{ __('accessibility.back_to_top') }}">
<i class="fa fa-arrow-up"></i>
<i class="fa fa-arrow-up fa-lg"></i>
<span>0%</span>
</div>
{%- endif %}

View File

@ -2,14 +2,21 @@ if (hexo-config('back2top.enable')) {
.back-to-top {
font-size: $b2t-font-size;
if (not hexo-config('back2top.scrollpercent')) {
span {
span {
margin-right: 8px;
if (not hexo-config('back2top.scrollpercent')) {
display: none;
}
}
.fa {
text-align: center;
width: $sidebar-toggle-size;
}
if (hexo-config('back2top.sidebar')) {
margin: 20px - $sidebar-offset -10px -20px;
// FIXME: opacity override by motion
opacity: 0;
transition: opacity $transition-ease;
@ -22,17 +29,14 @@ if (hexo-config('back2top.enable')) {
}
}
} else {
align-items: center;
bottom: $b2t-position-bottom;
box-sizing: border-box;
color: $b2t-color;
padding: 0 6px;
display: flex;
height: $sidebar-toggle-size;
transition: bottom $transition-ease;
sidebar-toggle();
if (not hexo-config('back2top.scrollpercent')) {
width: 24px;
}
&:hover {
color: $sidebar-highlight;
}

View File

@ -1,8 +1,8 @@
.sidebar-toggle {
bottom: 45px;
height: 12px;
padding: 6px 5px;
width: 14px;
bottom: $b2t-position-bottom-on + $sidebar-toggle-size + 5px;
height: $sidebar-toggle-inner-size;
padding: $sidebar-toggle-padding;
width: $sidebar-toggle-inner-size;
sidebar-toggle();
}

View File

@ -11,8 +11,12 @@
transition: all .4s;
width: 100%;
&:first-child {
margin-top: 1px;
}
&:not(:first-child) {
margin-top: 3px;
margin-top: 4px;
}
}
}

View File

@ -197,22 +197,22 @@ toggle-close($position) {
if ($position == 'right') {
.toggle-line:first-child {
top: 5px;
top: 6px;
transform: rotate(-45deg);
}
.toggle-line:last-child {
top: -5px;
top: -6px;
transform: rotate(45deg);
}
} else {
.toggle-line:first-child {
top: 5px;
top: 6px;
transform: rotate(45deg);
}
.toggle-line:last-child {
top: -5px;
top: -6px;
transform: rotate(-45deg);
}
}

View File

@ -64,5 +64,3 @@ $btn-default-hover-color = white;
// Back to top
$b2t-opacity = .6;
$b2t-opacity-hover = .8;
$b2t-position-bottom = -100px;
$b2t-position-bottom-on = 30px;

View File

@ -265,13 +265,17 @@ $site-state-item-name-color = inherit;
$b2t-opacity = .8;
$b2t-opacity-hover = 1;
$b2t-position-bottom = -100px;
$b2t-position-bottom-on = 19px;
$b2t-position-bottom-on = 30px;
$b2t-position-right = 30px;
$b2t-position-right-mobile = 20px;
$b2t-font-size = 12px;
$b2t-color = white;
$b2t-bg-color = $black-deep;
$sidebar-toggle-inner-size = 16px;
$sidebar-toggle-padding = 5px;
$sidebar-toggle-size = $sidebar-toggle-inner-size + $sidebar-toggle-padding * 2;
// .post-expand .post-eof
// In Muse scheme, margin above and below the post separator
$post-eof-margin-top = 80px; // or 160px for more white space;