mirror of
https://github.com/next-theme/hexo-theme-next.git
synced 2026-01-17 18:22:33 +00:00
Optimize back-to-top style
This commit is contained in:
parent
5d2f92e6b5
commit
b8e2ce84cb
@ -18,7 +18,6 @@ hexo.extend.helper.register('next_config', function() {
|
||||
exturl : theme.exturl,
|
||||
sidebar : theme.sidebar,
|
||||
copycode : theme.codeblock.copy_button.enable,
|
||||
back2top : theme.back2top,
|
||||
bookmark : theme.bookmark,
|
||||
fancybox : theme.fancybox,
|
||||
mediumzoom: theme.mediumzoom,
|
||||
|
||||
@ -3,12 +3,6 @@
|
||||
opacity: 0;
|
||||
transition: opacity $transition-ease;
|
||||
|
||||
if (!hexo-config('back2top.scrollpercent')) {
|
||||
span {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.back-to-top-on {
|
||||
cursor: pointer;
|
||||
opacity: $b2t-opacity;
|
||||
|
||||
@ -1,24 +1,15 @@
|
||||
.back-to-top {
|
||||
background: $b2t-bg-color;
|
||||
bottom: $b2t-position-bottom;
|
||||
box-sizing: border-box;
|
||||
color: $b2t-color;
|
||||
cursor: pointer;
|
||||
opacity: $b2t-opacity;
|
||||
padding: 0 6px;
|
||||
position: fixed;
|
||||
transition: bottom $transition-ease;
|
||||
z-index: $zindex-3;
|
||||
sidebar-toggle();
|
||||
|
||||
if (hexo-config('back2top.scrollpercent')) {
|
||||
width: initial;
|
||||
} else {
|
||||
width: 24px;
|
||||
|
||||
span {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@ -28,8 +19,4 @@
|
||||
&.back-to-top-on {
|
||||
bottom: $b2t-position-bottom-on;
|
||||
}
|
||||
|
||||
+tablet-mobile() {
|
||||
opacity: $b2t-opacity-hover;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,6 +1,12 @@
|
||||
if (hexo-config('back2top.enable')) {
|
||||
.back-to-top {
|
||||
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');
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
position: fixed;
|
||||
top: -10px;
|
||||
transition: top .3s;
|
||||
sidebar-toggle(true);
|
||||
sidebar-toggle-position(true);
|
||||
|
||||
+tablet-mobile() {
|
||||
display: none;
|
||||
|
||||
@ -32,6 +32,7 @@
|
||||
|
||||
.sidebar-panel {
|
||||
display: none;
|
||||
max-height: var(--sidebar-wrapper-height);
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
@ -1,17 +1,9 @@
|
||||
.sidebar-toggle {
|
||||
background: $black-deep;
|
||||
bottom: 45px;
|
||||
cursor: pointer;
|
||||
height: 12px;
|
||||
padding: 6px 5px;
|
||||
position: fixed;
|
||||
width: 14px;
|
||||
z-index: $zindex-3;
|
||||
sidebar-toggle();
|
||||
|
||||
+tablet-mobile() {
|
||||
opacity: $b2t-opacity-hover;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-toggle:hover .toggle-line {
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
.sidebar {
|
||||
background: $black-deep;
|
||||
bottom: 0;
|
||||
if (!hexo-config('back2top.sidebar')){
|
||||
if (!hexo-config('back2top.sidebar')) {
|
||||
box-shadow: inset 0 2px 6px black;
|
||||
}
|
||||
position: fixed;
|
||||
|
||||
@ -110,7 +110,7 @@ main-container() {
|
||||
}
|
||||
}
|
||||
|
||||
sidebar-toggle($reverse = false) {
|
||||
sidebar-toggle-position($reverse = false) {
|
||||
$condition = hexo-config('sidebar.position') == 'right';
|
||||
if (($scheme == 'Muse') || ($scheme == 'Mist')) {
|
||||
$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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,10 +2,6 @@
|
||||
+mobile() {
|
||||
border-bottom: 1px solid $grey-lighter;
|
||||
border-top: 1px solid $grey-lighter;
|
||||
left: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -317,15 +317,14 @@ NexT.utils = {
|
||||
*/
|
||||
initSidebarDimension: function() {
|
||||
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 sidebarb2tHeight = CONFIG.back2top.enable && CONFIG.back2top.sidebar ? document.querySelector('.back-to-top').offsetHeight : 0;
|
||||
let sidebarSchemePadding = (CONFIG.sidebar.padding * 2) + sidebarNavHeight + sidebarb2tHeight;
|
||||
let sidebarSchemePadding = CONFIG.sidebar.padding * 2 + sidebarNav.offsetHeight + sidebarb2tHeight;
|
||||
if (CONFIG.scheme === 'Pisces' || CONFIG.scheme === 'Gemini') sidebarSchemePadding += sidebarOffset * 2;
|
||||
// Initialize Sidebar & TOC Height.
|
||||
const sidebarWrapperHeight = document.body.offsetHeight - sidebarSchemePadding + 'px';
|
||||
document.querySelector('.site-overview-wrap').style.maxHeight = sidebarWrapperHeight;
|
||||
document.querySelector('.post-toc-wrap').style.maxHeight = sidebarWrapperHeight;
|
||||
document.documentElement.style.setProperty('--sidebar-wrapper-height', sidebarWrapperHeight);
|
||||
},
|
||||
|
||||
updateSidebarPosition: function() {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user