Optimize back-to-top style

This commit is contained in:
Mimi 2020-06-20 11:29:43 +08:00
parent 5d2f92e6b5
commit b8e2ce84cb
11 changed files with 31 additions and 40 deletions

View File

@ -18,7 +18,6 @@ hexo.extend.helper.register('next_config', function() {
exturl : theme.exturl, exturl : theme.exturl,
sidebar : theme.sidebar, sidebar : theme.sidebar,
copycode : theme.codeblock.copy_button.enable, copycode : theme.codeblock.copy_button.enable,
back2top : theme.back2top,
bookmark : theme.bookmark, bookmark : theme.bookmark,
fancybox : theme.fancybox, fancybox : theme.fancybox,
mediumzoom: theme.mediumzoom, mediumzoom: theme.mediumzoom,

View File

@ -3,12 +3,6 @@
opacity: 0; opacity: 0;
transition: opacity $transition-ease; transition: opacity $transition-ease;
if (!hexo-config('back2top.scrollpercent')) {
span {
display: none;
}
}
&.back-to-top-on { &.back-to-top-on {
cursor: pointer; cursor: pointer;
opacity: $b2t-opacity; opacity: $b2t-opacity;

View File

@ -1,24 +1,15 @@
.back-to-top { .back-to-top {
background: $b2t-bg-color;
bottom: $b2t-position-bottom; bottom: $b2t-position-bottom;
box-sizing: border-box; box-sizing: border-box;
color: $b2t-color; color: $b2t-color;
cursor: pointer;
opacity: $b2t-opacity;
padding: 0 6px; padding: 0 6px;
position: fixed;
transition: bottom $transition-ease; transition: bottom $transition-ease;
z-index: $zindex-3;
sidebar-toggle(); sidebar-toggle();
if (hexo-config('back2top.scrollpercent')) { if (hexo-config('back2top.scrollpercent')) {
width: initial; width: initial;
} else { } else {
width: 24px; width: 24px;
span {
display: none;
}
} }
&:hover { &:hover {
@ -28,8 +19,4 @@
&.back-to-top-on { &.back-to-top-on {
bottom: $b2t-position-bottom-on; bottom: $b2t-position-bottom-on;
} }
+tablet-mobile() {
opacity: $b2t-opacity-hover;
}
} }

View File

@ -1,6 +1,12 @@
if (hexo-config('back2top.enable')) { if (hexo-config('back2top.enable')) {
.back-to-top { .back-to-top {
font-size: $b2t-font-size; font-size: $b2t-font-size;
if (!hexo-config('back2top.scrollpercent')) {
span {
display: none;
}
}
} }
@import (hexo-config('back2top.sidebar') ? 'back-to-top-sidebar' : 'back-to-top'); @import (hexo-config('back2top.sidebar') ? 'back-to-top-sidebar' : 'back-to-top');

View File

@ -3,7 +3,7 @@
position: fixed; position: fixed;
top: -10px; top: -10px;
transition: top .3s; transition: top .3s;
sidebar-toggle(true); sidebar-toggle-position(true);
+tablet-mobile() { +tablet-mobile() {
display: none; display: none;

View File

@ -32,6 +32,7 @@
.sidebar-panel { .sidebar-panel {
display: none; display: none;
max-height: var(--sidebar-wrapper-height);
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
} }

View File

@ -1,17 +1,9 @@
.sidebar-toggle { .sidebar-toggle {
background: $black-deep;
bottom: 45px; bottom: 45px;
cursor: pointer;
height: 12px; height: 12px;
padding: 6px 5px; padding: 6px 5px;
position: fixed;
width: 14px; width: 14px;
z-index: $zindex-3;
sidebar-toggle(); sidebar-toggle();
+tablet-mobile() {
opacity: $b2t-opacity-hover;
}
} }
.sidebar-toggle:hover .toggle-line { .sidebar-toggle:hover .toggle-line {

View File

@ -1,7 +1,7 @@
.sidebar { .sidebar {
background: $black-deep; background: $black-deep;
bottom: 0; bottom: 0;
if (!hexo-config('back2top.sidebar')){ if (!hexo-config('back2top.sidebar')) {
box-shadow: inset 0 2px 6px black; box-shadow: inset 0 2px 6px black;
} }
position: fixed; position: fixed;

View File

@ -110,7 +110,7 @@ main-container() {
} }
} }
sidebar-toggle($reverse = false) { sidebar-toggle-position($reverse = false) {
$condition = hexo-config('sidebar.position') == 'right'; $condition = hexo-config('sidebar.position') == 'right';
if (($scheme == 'Muse') || ($scheme == 'Mist')) { if (($scheme == 'Muse') || ($scheme == 'Mist')) {
$condition = $condition == $reverse; $condition = $condition == $reverse;
@ -127,3 +127,20 @@ sidebar-toggle($reverse = false) {
} }
} }
} }
sidebar-toggle() {
background: $b2t-bg-color;
cursor: pointer;
opacity: $b2t-opacity;
position: fixed;
z-index: $zindex-3;
sidebar-toggle-position();
&:hover {
opacity: $b2t-opacity-hover;
}
+tablet-mobile() {
opacity: $b2t-opacity-hover;
}
}

View File

@ -2,10 +2,6 @@
+mobile() { +mobile() {
border-bottom: 1px solid $grey-lighter; border-bottom: 1px solid $grey-lighter;
border-top: 1px solid $grey-lighter; border-top: 1px solid $grey-lighter;
left: 0;
margin: 0;
padding: 0;
width: 100%;
} }
} }

View File

@ -317,15 +317,14 @@ NexT.utils = {
*/ */
initSidebarDimension: function() { initSidebarDimension: function() {
const sidebarNav = document.querySelector('.sidebar-nav'); const sidebarNav = document.querySelector('.sidebar-nav');
const sidebarNavHeight = sidebarNav.style.display !== 'none' ? sidebarNav.offsetHeight : 0; const sidebarb2t = document.querySelector('.sidebar-inner .back-to-top');
const sidebarb2tHeight = sidebarb2t ? sidebarb2t.offsetHeight : 0;
const sidebarOffset = CONFIG.sidebar.offset || 12; const sidebarOffset = CONFIG.sidebar.offset || 12;
const sidebarb2tHeight = CONFIG.back2top.enable && CONFIG.back2top.sidebar ? document.querySelector('.back-to-top').offsetHeight : 0; let sidebarSchemePadding = CONFIG.sidebar.padding * 2 + sidebarNav.offsetHeight + sidebarb2tHeight;
let sidebarSchemePadding = (CONFIG.sidebar.padding * 2) + sidebarNavHeight + sidebarb2tHeight;
if (CONFIG.scheme === 'Pisces' || CONFIG.scheme === 'Gemini') sidebarSchemePadding += sidebarOffset * 2; if (CONFIG.scheme === 'Pisces' || CONFIG.scheme === 'Gemini') sidebarSchemePadding += sidebarOffset * 2;
// Initialize Sidebar & TOC Height. // Initialize Sidebar & TOC Height.
const sidebarWrapperHeight = document.body.offsetHeight - sidebarSchemePadding + 'px'; const sidebarWrapperHeight = document.body.offsetHeight - sidebarSchemePadding + 'px';
document.querySelector('.site-overview-wrap').style.maxHeight = sidebarWrapperHeight; document.documentElement.style.setProperty('--sidebar-wrapper-height', sidebarWrapperHeight);
document.querySelector('.post-toc-wrap').style.maxHeight = sidebarWrapperHeight;
}, },
updateSidebarPosition: function() { updateSidebarPosition: function() {