github/hexo-theme-next
1
0
Fork 0
mirror of https://github.com/next-theme/hexo-theme-next.git synced 2026-01-18 18:33:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

Adjust back2top style

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
layout/_partials/widgets.njk
View File

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

20
source/css/_common/components/back-to-top.styl
View File

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

8
source/css/_common/outline/sidebar/sidebar-toggle.styl
View File

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

6
source/css/_common/scaffolding/toggles.styl
View File

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

8
source/css/_mixins.styl
View File

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

2
source/css/_variables/Pisces.styl
View File

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

6
source/css/_variables/base.styl
View File

@ -265,13 +265,17 @@ $site-state-item-name-color = inherit;
$b2t-opacity = .8; $b2t-opacity = .8;
$b2t-opacity-hover = 1; $b2t-opacity-hover = 1;
$b2t-position-bottom = -100px; $b2t-position-bottom = -100px;
$b2t-position-bottom-on = 19px; $b2t-position-bottom-on = 30px;
$b2t-position-right = 30px; $b2t-position-right = 30px;
$b2t-position-right-mobile = 20px; $b2t-position-right-mobile = 20px;
$b2t-font-size = 12px; $b2t-font-size = 12px;
$b2t-color = white; $b2t-color = white;
$b2t-bg-color = $black-deep; $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 // .post-expand .post-eof
// In Muse scheme, margin above and below the post separator // In Muse scheme, margin above and below the post separator
$post-eof-margin-top = 80px; // or 160px for more white space; $post-eof-margin-top = 80px; // or 160px for more white space;