d0zingcat/NotionNext
1
0
Fork 0
mirror of https://github.com/d0zingcat/NotionNext.git synced 2026-05-14 07:26:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

悬浮按钮样式调整

Browse Source
This commit is contained in:
tangly1024
2021-11-11 10:55:52 +08:00
parent 3abdb3e5b3
commit 0e55d8e9d3
2 changed files with 7 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
components/JumpToTopButton.js
View File

@@ -22,7 +22,6 @@ const JumpToTopButton = ({ targetRef, showPercent = true }) => {
if (per > 100) per = 100
const shouldShow = scrollY > 100 && per > 0
if (shouldShow !== show) {
switchShow(shouldShow)
}
@@ -34,15 +33,15 @@ const JumpToTopButton = ({ targetRef, showPercent = true }) => {
}, [show])
return (
<div id='jump-to-top' className='right-0 fixed flex bottom-36 mr-4 duration-500 z-20'>
<div id='jump-to-top' className='right-0 fixed flex bottom-36 mr-4 duration-500 z-20 opacity-75'>
<div >
<div
onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
style={{ boxShadow: 'rgba(41, 50, 60, 0.5) 0px 2px 16px', borderRadius: '28px' }}
className={(show ? 'animate__fadeInUp' : 'animate__fadeOutUp') + ' bg-gray-700 px-1 py-1 cursor-pointer animate__animated animate__faster shadow-2xl'}>
className={(show ? 'animate__fadeInUp' : 'animate__fadeOutUp') + ' bg-white dark:bg-gray-700 px-1 py-1 cursor-pointer animate__animated animate__faster shadow-2xl'}>
<div className='text-center'>
<div className='w-10 text-xl text-gray-100 transform hover:scale-125 duration-200' title={locale.POST.TOP} ><i className='fa fa-arrow-up'/> </div>
{showPercent && (<div className='w-10 text-xs text-gray-100 dark:text-gray-200'>{percent} </div>)}
<div className='w-10 text-xl dark:text-gray-100 transform hover:scale-125 duration-200' title={locale.POST.TOP} ><i className='fa fa-arrow-up'/> </div>
{showPercent && (<div className='w-10 text-xs dark:text-gray-200'>{percent} </div>)}
</div>
</div>
</div>

6
components/TocDrawerButton.js
View File

@@ -10,11 +10,11 @@ import React from 'react'
*/
const TocDrawerButton = (props) => {
return (
<div id='jump-to-top' className='right-0 fixed flex bottom-52 mr-4 duration-500 z-30' onClick={props.onClick}>
<div id='toc-drawer-button' className='right-0 fixed flex top-2 mr-4 duration-500 z-10 opacity-75' onClick={props.onClick}>
<div className='transform hover:scale-105 duration-200 '>
<div style={{ boxShadow: 'rgba(41, 50, 60, 0.5) 0px 2px 16px', borderRadius: '28px' }}
className={'animate__fadeInUp bg-gray-700 px-1 py-1 cursor-pointer animate__animated animate__faster shadow-2xl'}>
<div className='text-center text-gray-100'>
className={'animate__fadeInUp bg-white dark:bg-gray-700 px-1 py-1 cursor-pointer animate__animated animate__faster shadow-xl'}>
<div className='text-center dark:text-gray-100'>
<div className='w-10 text-xl' title='目录' ><i className='fa fa-book'/> </div>
<div className='text-xs'>目录</div>
</div>