diff --git a/layout/_partials/widgets.njk b/layout/_partials/widgets.njk index 5af3a75..5544189 100644 --- a/layout/_partials/widgets.njk +++ b/layout/_partials/widgets.njk @@ -11,7 +11,7 @@ {%- if theme.back2top.enable and not theme.back2top.sidebar %}
- + 0%
{%- endif %} diff --git a/source/css/_common/components/back-to-top.styl b/source/css/_common/components/back-to-top.styl index d1c9152..8fa649e 100644 --- a/source/css/_common/components/back-to-top.styl +++ b/source/css/_common/components/back-to-top.styl @@ -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; } diff --git a/source/css/_common/outline/sidebar/sidebar-toggle.styl b/source/css/_common/outline/sidebar/sidebar-toggle.styl index 0d44434..0b19b89 100644 --- a/source/css/_common/outline/sidebar/sidebar-toggle.styl +++ b/source/css/_common/outline/sidebar/sidebar-toggle.styl @@ -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(); } diff --git a/source/css/_common/scaffolding/toggles.styl b/source/css/_common/scaffolding/toggles.styl index 3b9eea5..163bd9e 100644 --- a/source/css/_common/scaffolding/toggles.styl +++ b/source/css/_common/scaffolding/toggles.styl @@ -11,8 +11,12 @@ transition: all .4s; width: 100%; + &:first-child { + margin-top: 1px; + } + &:not(:first-child) { - margin-top: 3px; + margin-top: 4px; } } } diff --git a/source/css/_mixins.styl b/source/css/_mixins.styl index 1e365d0..f99e5d3 100644 --- a/source/css/_mixins.styl +++ b/source/css/_mixins.styl @@ -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); } } diff --git a/source/css/_variables/Pisces.styl b/source/css/_variables/Pisces.styl index fc2db1b..7442ea8 100644 --- a/source/css/_variables/Pisces.styl +++ b/source/css/_variables/Pisces.styl @@ -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; diff --git a/source/css/_variables/base.styl b/source/css/_variables/base.styl index ca8519a..b16b775 100644 --- a/source/css/_variables/base.styl +++ b/source/css/_variables/base.styl @@ -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;