biss/hexo-theme-butterfly
1
0
Fork 0
mirror of https://github.com/jerryc127/hexo-theme-butterfly.git synced 2026-04-10 21:17:07 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: toc 間隔調整, 直接子元素增加豎線辨識 closed #723

Browse Source 
fix: 修復 toc 在小設備上顯示出屏幕外的 bug
fix: 修復在打賞按鈕周圍也會觸發打賞彈窗的 bug
fix: Waline 最近評論的時間只顯示 "剛剛" 的問題 (以docker的方式執行) #730
fix: 修復點擊右下角顯示按鈕時,按鈕沒有出現的 bug
remove: 移除 button 的 hover 效果
This commit is contained in:
Jerry
2021-12-22 22:39:27 +08:00
parent 36d85c4c23
commit 850c825fcf
17 changed files with 98 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
source/css/_global/index.styl
View File

@@ -21,6 +21,7 @@
--btn-bg: $button-bg
--text-bg-hover: rgba($text-bg-hover, .7)
--light-grey: $light-grey
--dark-grey: $dark-grey
--white: $white
--text-highlight-color: $text-highlight-color
--blockquote-color: $blockquote-color
@@ -33,6 +34,7 @@
--timeline-border-color: $timeline-border-color
--pseudo-hover: $pseudo-hover
--headline-presudo: #a0a0a0
--scrollbar-color: $scrollbar-color
body
position: relative
@@ -52,7 +54,7 @@ body
height: 8px
*::-webkit-scrollbar-thumb
background: var(--btn-bg)
background: var(--scrollbar-color)
*::-webkit-scrollbar-track
background-color: transparent
@@ -176,29 +178,6 @@ if $site-name-font
.pull-right
float: right
.button--animated
position: relative
z-index: 1
transition: color 1s
&:before
position: absolute
top: 0
right: 0
bottom: 0
left: 0
z-index: -1
background: var(--btn-hover-color)
content: ''
transition: transform .5s ease-out
transform: scaleX(0)
transform-origin: 0 50%
&:hover
&:before
transition-timing-function: cubic-bezier(.45, 1.64, .47, .66)
transform: scaleX(1)
img
&[src=''],
&:not([src])

27
source/css/_layout/aside.styl
View File

@@ -1,5 +1,5 @@
#aside-content
width: 25%
width: 26%
+minWidth900()
if hexo-config('aside.position') == 'right'
@@ -79,6 +79,9 @@
text-align: center
line-height: 2.4
&:hover
background-color: var(--btn-hover-color)
span
padding-left: 10px
@@ -243,6 +246,7 @@
right: -100%
bottom: 30px
z-index: 100
max-width: $toc-mobile-maxWidth
max-height: calc(100% - 60px)
width: $toc-mobile-width
opacity: 0
@@ -257,14 +261,22 @@
font-size: 140%
.toc-content
clear: both
overflow-y: scroll
overflow-y: overlay
margin: 0 -24px
max-height: calc(100vh - 120px)
+maxWidth900()
max-height: calc(100vh - 140px)
& > .toc
margin: 0 20px
& > .toc-item > .toc-child
margin-left: 10px
padding-left: 10px
border-left: 1px solid var(--dark-grey)
&:not(.is-expand)
.toc-child
display: none
@@ -286,18 +298,19 @@
ol
margin: 0
padding-left: 15px
padding-left: 18px
.toc-link
display: block
padding-right: 8px
padding-left: 6px
border-left: 3px solid transparent
margin: 4px 0
padding: 1px 6px
color: var(--toc-link-color)
transition: all .2s ease-in-out
&:hover
color: $theme-color
&.active
border-left-color: darken($theme-toc-color, 20%)
background: $theme-toc-color
color: $toc-active-color

7
source/css/_layout/head.styl
View File

@@ -304,6 +304,7 @@
background-color: var(--sidebar-bg)
box-shadow: 0 5px 20px -4px rgba($dark-black, .5)
animation: sub_menus .3s .1s ease both
border-radius: 5px
&:before
position: absolute
@@ -319,9 +320,13 @@
&:hover
background: var(--text-bg-hover)
&:first-child
border-radius: 5px 5px 0 0
&:last-child
border-radius: 0 0 5px 5px
a
display: inline-block
padding: 6px 14px
padding: 8px 16px
width: 100%
color: var(--font-color) !important
text-shadow: none !important

8
source/css/_layout/reward.styl
View File

@@ -3,6 +3,10 @@
margin-top: 80px
width: 100%
text-align: center
pointer-events: none
& > *
pointer-events: auto
.reward-button
display: inline-block
@@ -10,9 +14,11 @@
background: var(--btn-bg)
color: var(--btn-color)
cursor: pointer
transition: all .4s
&:hover
.reward-button
background: var(--btn-hover-color)
& > .reward-main
display: block

30
source/css/_layout/rightside.styl
View File

@@ -7,7 +7,19 @@
transition: all .5s
#rightside-config-hide
display: none
height: 0
opacity: 0
transition: transform .4s
transform: translate(45px, 0)
&.show
height: auto
opacity: 1
transform: translate(0, 0)
&.status
height: auto
opacity: 1
& > div
& > button,
@@ -35,19 +47,3 @@
+maxWidth900()
#hide-aside-btn
display: none
@keyframes rightside-item-in
0%
transform: translate(48px, 0)
100%
transform: translate(0, 0)
@keyframes rightside-item-out
0%
display: block
transform: translate(0, 0)
100%
display: none
transform: translate(48px, 0)

2
source/css/_mode/darkmode.styl
View File

@@ -21,6 +21,7 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
--btn-bg: lighten(#121212, 5)
--text-bg-hover: lighten(#121212, 15)
--light-grey: alpha(#FFFFFF, .7)
--dark-grey: alpha(#FFFFFF, .2)
--white: alpha(#FFFFFF, .9)
--text-highlight-color: alpha(#FFFFFF, .9)
--blockquote-color: alpha(#FFFFFF, .7)
@@ -36,6 +37,7 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
--hlscrollbar-bg: lighten(#121212, 5)
--hlexpand-bg: linear-gradient(180deg, rgba(lighten(#121212, 2), .6), rgba(lighten(#121212, 2), .9))
--timeline-bg: lighten(#121212, 5)
--scrollbar-color: lighten(#121212, 5)
#web_bg:before,
#footer:before,

3
source/css/_mode/readmode.styl
View File

@@ -187,9 +187,6 @@ if hexo-config('readmode')
background: var(--readmode-light-color) !important
color: var(--font-color) !important
.button--animated:before
background: var(--readmode-light-color) !important
.note
border: 2px solid var(--gray)
border-left-color: var(--gray) !important

2
source/css/_page/common.styl
View File

@@ -29,7 +29,7 @@
padding: 36px 14px
& > div:first-child
width: 75%
width: 74%
transition: all .3s
+maxWidth900()

15
source/css/_tags/button.styl
View File

@@ -11,6 +11,9 @@
color: $btn-color
line-height: 2
&:hover
background-color: var(--btn-hover-color)
i + span
margin-left: 6px
@@ -39,15 +42,17 @@
&.{$type}
background-color: lookup('$tagsP-' + $type + '-color')
&:hover
background-color: var(--btn-hover-color)
&.outline
border: 1px solid transparent
border-color: $btn-default-color
background-color: transparent
color: $btn-default-color
transition: all .3s
&.button--animated:before
background: $btn-default-color
&:hover
background-color: $btn-default-color
&:hover
color: white !important
@@ -57,5 +62,5 @@
border-color: lookup('$tagsP-' + $type + '-color')
color: lookup('$tagsP-' + $type + '-color')
&.button--animated:before
background: lookup('$tagsP-' + $type + '-color')
&:hover
background-color: lookup('$tagsP-' + $type + '-color')

3
source/css/_tags/hide.styl
View File

@@ -7,6 +7,9 @@
background: $tag-hide-bg
color: var(--white)
&:hover
background-color: var(--btn-hover-color)
&.open
display: none

10
source/css/var.styl
View File

@@ -24,8 +24,8 @@ $hr-icon = $hrEnable && hexo-config('hr_icon.icon') ? hexo-config('hr_icon.icon'
$hr-icon-top = $hrEnable && hexo-config('hr_icon.icon-top') ? convert(hexo-config('hr_icon.icon-top')) : -10px
// page beatutify
$beautifyEnable = hexo-config('beautify.enable')
$title-prefix-icon = $beautifyEnable ? hexo-config('beautify.title-prefix-icon') : '\f0c1'
$title-prefix-icon-color = $beautifyEnable ? convert(hexo-config('beautify.title-prefix-icon-color')) : $light-red
$title-prefix-icon = $beautifyEnable && hexo-config('beautify.title-prefix-icon') ? hexo-config('beautify.title-prefix-icon') : '\f0c1'
$title-prefix-icon-color = $beautifyEnable && hexo-config('beautify.title-prefix-icon-color') ? convert(hexo-config('beautify.title-prefix-icon-color')) : $light-red
// Global Variables
$font-size = hexo-config('font.global-font-size') ? convert(hexo-config('font.global-font-size')) : 14px
$code-font-size = hexo-config('font.code-font-size') ? convert(hexo-config('font.code-font-size')) : var(--global-font-size)
@@ -39,6 +39,7 @@ $light-blue = $theme-color
$dark-black = #000000
$light-grey = #EEEEEE
$grey = #858585
$dark-grey = #cacaca
$white = #FFFFFF
$whitesmoke = #f5f5f5
$font-black = #4C4948
@@ -61,13 +62,16 @@ $sidebar-background = #f6f8fa
$sidebar-width = 300px
// aside
$toc-link-color = #666261
$toc-mobile-width = 300px
$toc-mobile-width = calc(100% - 80px)
$toc-mobile-maxWidth = 380px
$toc-active-color = #fff
// Button
$button-color = #fff
$button-hover-color = $themeColorEnable && hexo-config('theme_color.button_hover') ? convert(hexo-config('theme_color.button_hover')) : $light-orange
$button-bg = $theme-color
$pseudo-hover = $button-hover-color
// scrollbar
$scrollbar-color= $themeColorEnable && hexo-config('theme_color.scrollbar_color') ? convert(hexo-config('theme_color.scrollbar_color')) : $theme-color
// table
$table-thead-bg = #99a9bf
// reward

30
source/js/main.js
View File

@@ -296,7 +296,7 @@ document.addEventListener('DOMContentLoaded', function () {
}
$header.classList.add('nav-fixed')
if (window.getComputedStyle($rightside).getPropertyValue('opacity') === '0') {
$rightside.style.cssText = 'opacity: 0.7; transform: translateX(-58px)'
$rightside.style.cssText = 'opacity: 0.8; transform: translateX(-58px)'
}
} else {
if (currentTop === 0) {
@@ -306,7 +306,7 @@ document.addEventListener('DOMContentLoaded', function () {
}
if (document.body.scrollHeight <= innerHeight) {
$rightside.style.cssText = 'opacity: 0.7; transform: translateX(-58px)'
$rightside.style.cssText = 'opacity: 0.8; transform: translateX(-58px)'
}
}, 200)()
}
@@ -478,15 +478,16 @@ document.addEventListener('DOMContentLoaded', function () {
window.DISQUS && document.getElementById('disqus_thread').children.length && setTimeout(() => window.disqusReset(), 200)
typeof runMermaid === 'function' && window.runMermaid()
},
showOrHideBtn: () => { // rightside 點擊設置 按鈕 展開
const target = document.getElementById('rightside-config-hide')
if (window.rightSideIn) {
window.rightSideIn = false
btf.animateOut(target, 'rightside-item-out 0.5s')
} else {
window.rightSideIn = true
btf.animateIn(target, 'rightside-item-in 0.5s')
showOrHideBtn: (e) => { // rightside 點擊設置 按鈕 展開
const rightsideHideClassList = document.getElementById('rightside-config-hide').classList
rightsideHideClassList.toggle('show')
if (e.classList.contains('show')) {
rightsideHideClassList.add('status')
setTimeout(() => {
rightsideHideClassList.remove('status')
}, 300)
}
e.classList.toggle('show')
},
scrollToTop: () => { // Back to top
btf.scrollToDest(0, 500)
@@ -506,13 +507,13 @@ document.addEventListener('DOMContentLoaded', function () {
}
document.getElementById('rightside').addEventListener('click', function (e) {
const $target = e.target.id || e.target.parentNode.id
switch ($target) {
const $target = e.target.id ? e.target : e.target.parentNode
switch ($target.id) {
case 'go-up':
rightSideFn.scrollToTop()
break
case 'rightside_config':
rightSideFn.showOrHideBtn()
rightSideFn.showOrHideBtn($target)
break
case 'mobile-toc-button':
rightSideFn.runMobileToc()
@@ -534,7 +535,6 @@ document.addEventListener('DOMContentLoaded', function () {
/**
* menu
* 側邊欄sub-menu 展開/收縮
* 解決menus在觸摸屏下，滑動屏幕menus_item_child不消失的問題（手機hover的bug)
*/
const clickFnOfSubMenu = () => {
document.querySelectorAll('#sidebar-menus .site-page.group').forEach(function (item) {
@@ -594,7 +594,7 @@ document.addEventListener('DOMContentLoaded', function () {
/**
* table overflow
*/
const addTableWrap = function () {
const addTableWrap = () => {
const $table = document.querySelectorAll('#article-container :not(.highlight) > table, #article-container > table')
if ($table.length) {
$table.forEach(item => {