Adjust back2top style

next-theme · Nov 10, 2022 · 29cb5eb · 29cb5eb
1 parent 25eb0bc
commit 29cb5eb
Show file tree

Hide file tree

Showing 7 changed files with 31 additions and 21 deletions.
diff --git a/layout/_partials/widgets.njk b/layout/_partials/widgets.njk
@@ -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 %}

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