mirror of
https://github.com/next-theme/hexo-theme-next.git
synced 2026-01-18 18:33:42 +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,
|
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,
|
||||||
|
|||||||
@ -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;
|
||||||
|
|||||||
@ -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;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|||||||
@ -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');
|
||||||
|
|||||||
@ -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;
|
||||||
|
|||||||
@ -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;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -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 {
|
||||||
|
|||||||
@ -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;
|
||||||
|
|||||||
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@ -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%;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -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() {
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user