biss/hexo-theme-butterfly
1
0
Fork 0
mirror of https://github.com/jerryc127/hexo-theme-butterfly.git synced 2026-04-16 20:30:53 +08:00
Code Issues Packages Projects Releases Wiki Activity

breaking changes: algolia 升級至 v4

Browse Source 
feat:  本地搜索增加數據庫加載中和搜索中 loading 顯示
feat: 更改文章美化後,列表的顯示效果 closed #693 closed #686
improvement: UI 微調
This commit is contained in:
Jerry
2021-10-29 14:40:10 +08:00
Unverified
parent 632cb37bc5
commit f7c50586ce
36 changed files with 290 additions and 364 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
source/css/_global/function.styl
View File

@@ -50,6 +50,30 @@
transition: all .6s, filter 375ms ease-in .2s
object-fit: cover
.list-beauty
list-style: none
li
position: relative
padding 0.12em 0.4em 0.12em 1.4em
&:hover
&:before
border-color: var(--pseudo-hover)
&:before
position: absolute
top: .67em
left: 0
width: w = .43em
height: h = w
border: .5 * w solid $light-blue
border-radius: w
background: transparent
content: ''
cursor: pointer
transition: all .3s ease-out
maxWidth600()
@media screen and (max-width: 600px)
{block}

8
source/css/_highlight/highlight.styl
View File

@@ -1,7 +1,5 @@
$highlight_theme = hexo-config('highlight_theme')
$highlighEnable = hexo-config('highlight_settings') && hexo-config('highlight_settings.enable')
$prismjsEnable = hexo-config('prismjs_settings') && hexo-config('prismjs_settings.enable')
wordWrap = !hexo-config('highlight_settings.line_number') && hexo-config('code_word_wrap')
wordWrap = $highlight_enable && !$highlight_line_number && hexo-config('code_word_wrap')
@require 'theme'
@@ -15,10 +13,10 @@ wordWrap = !hexo-config('highlight_settings.line_number') && hexo-config('code_w
--hlscrollbar-bg: $highlight-scrollbar
--hlexpand-bg: linear-gradient(180deg, rgba($highlight-background, .6), rgba($highlight-background, .9))
if $highlighEnable
if $highlight_enable
@require 'highlight/index'
if $prismjsEnable
if $prismjs_enable
@require 'prismjs/index'
$code-block

2
source/css/_highlight/prismjs/index.styl
View File

@@ -1,4 +1,4 @@
if hexo-fonfig('prismjs_settings.line_number')
if $prismjs_line_number
@require 'line-number'
if $highlight_theme != false

8
source/css/_highlight/theme.styl
View File

@@ -13,7 +13,7 @@ if $highlight_theme == 'darker' || ($highlight_theme == 'mac')
}
$highlight-scrollbar = lighten($highlight-background, 8)
if $highlighEnable
if $highlight_enable
$highlight-comment = #969896
$highlight-red = #FF5370
$highlight-orange = #F78C6C
@@ -39,7 +39,7 @@ if $highlight_theme == 'pale night'
}
$highlight-scrollbar = lighten($highlight-background, 8)
if $highlighEnable
if $highlight_enable
$highlight-comment = #676E95
$highlight-red = #FF5370
$highlight-orange = #F78C6C
@@ -65,7 +65,7 @@ if $highlight_theme == 'ocean'
}
$highlight-scrollbar = lighten($highlight-background, 8)
if $highlighEnable
if $highlight_enable
$highlight-comment = rgba(101, 115, 126, .8)
$highlight-red = #FF5370
$highlight-orange = #F78C6C
@@ -92,7 +92,7 @@ if $highlight_theme == 'light' || ($highlight_theme == 'mac light')
}
$highlight-scrollbar = darken($highlight-background, 8)
if $highlighEnable
if $highlight_enable
$highlight-comment = rgba(149, 165, 166, .8)
$highlight-red = #E53935
$highlight-orange = #F76D47

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

@@ -258,7 +258,8 @@
.toc-content
clear: both
overflow-y: auto
overflow-y: scroll
overflow-y: overlay
max-height: calc(100vh - 120px)
+maxWidth900()
@@ -288,6 +289,7 @@
.toc-link
display: block
padding-right: 8px
padding-left: 6px
border-left: 3px solid transparent
color: var(--toc-link-color)

123
source/css/_layout/post.styl
View File

@@ -1,9 +1,9 @@
beautify()
headStyle(fontsize)
padding-left: unit(fontsize + .4, 'px')
padding-left: unit(fontsize + 12, 'px')
&:before
margin-left: unit((-(fontsize + 4)), 'px')
margin-left: unit((-(fontsize + 6)), 'px')
font-size: unit(fontsize, 'px')
&:hover
@@ -50,93 +50,21 @@ beautify()
ol,
ul
margin-top: 8px
padding: 0 0 0 16px
list-style: none
counter-reset: li
+maxWidth768()
padding: 0 0 0 8px
p
margin: 0 0 10px
margin: 0 0 8px
ol,
ul
padding-left: 12px
li
&::marker
color: $light-blue
font-weight: 600
font-size: 1.05em
+maxWidth768()
padding-left: 4px
&:hover
&::marker
color: var(--pseudo-hover)
li
&:not(.tab)
position: relative
margin: 4px 0
&:hover
&:before
transform: rotate(360deg)
&:before
position: absolute
top: 0
left: 0
background: $light-blue
color: $white
cursor: pointer
transition: all .3s ease-out
ol
> li
&:not(.tab)
padding: .2em .2em .2em 1.8em
&:before
margin-top: .65em
width: w = 1.45em
height: h = w
border-radius: .5 * w
content: counter(li)
counter-increment: li
text-align: center
font-size: .85em
line-height: h
ul
> li:not(.tab)
padding: .2em .2em .2em 1.4em
&:hover
&:before
border-color: var(--pseudo-hover)
&:before
$w = .42em
top: .78em
width: w = $w
height: h = w
border: .5 * w solid $light-blue
border-radius: w
background: transparent
content: ''
line-height: h
no-beautify()
ol,
ul
margin-top: 8px
p
margin: 0 0 10px
ol,
ul
padding-left: 10px
li
position: relative
margin: 6px 0
padding-left: 6px
ul > li
list-style-type: circle
#article-container
word-wrap: break-word
@@ -152,7 +80,7 @@ no-beautify()
display: block
margin: 0 auto 20px
max-width: 100%
transition: filter 375ms ease-in 0.2s
transition: filter 375ms ease-in .2s
p
margin: 0 0 16px
@@ -174,15 +102,24 @@ no-beautify()
font-family: Monaco, 'Ubuntu Mono', monospace
line-height: 1em
if hexo-config('beautify.enable') && hexo-config('beautify.field') == 'site'
beautify()
else if hexo-config('beautify.enable') && hexo-config('beautify.field') == 'post'
no-beautify()
ol,
ul
ol,
ul
padding-left: 20px
&.post-content
li
margin: 4px 0
p
margin: 0 0 8px
if hexo-config('beautify.enable')
if hexo-config('beautify.field') == 'site'
beautify()
else
no-beautify()
else if hexo-config('beautify.field') == 'post'
&.post-content
beautify()
> :last-child
margin-bottom: 0 !important

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

@@ -18,7 +18,7 @@
& > a
display: block
margin-bottom: 5px
width: w = 38px
width: w = 35px
height: w
border-radius: 5px
background-color: var(--btn-bg)
@@ -30,11 +30,6 @@
&:hover
background-color: var(--btn-hover-color)
+maxWidth768()
width: w = 34px
height: w
line-height: w
#mobile-toc-button
display: none

75
source/css/_page/categories.styl
View File

@@ -1,62 +1,37 @@
#page
.category-lists
padding: 20px 0 30px
.category-lists
.category-title
font-size: 2.57em
+maxWidth768()
padding: 0
font-size: 2em
.category-title
font-size: 2.57em
.category-list
margin-bottom: 0
+maxWidth768()
font-size: 2em
a
color: var(--font-color)
.category-list
a
color: var(--font-color)
&:hover
color: $text-hover
&:hover
color: $text-hover
.category-list-count
margin-left: 8px
color: $theme-meta-color
.category-list-count
margin-left: 8px
color: $theme-meta-color
&:before
content: '('
&:before
content: '('
&:after
content: ')'
&:after
content: ')'
ul
padding: 0 0 0 20px
@extend .list-beauty
ul
margin-top: 8px
padding: 0 0 0 20px
list-style: none
counter-reset: li
padding-left: 4px
ul
padding-left: 4px
li
position: relative
margin: 6px 0
padding: .12em .4em .12em 1.4em
&:before
position: absolute
left: 0
cursor: pointer
transition: all .3s ease-out
$w = .43em
top: .7em
width: w = $w
height: h = w
border: .5 * w solid $light-blue
border-radius: w
background: transparent
content: ''
// line-height: h
&:hover
&:before
border-color: var(--pseudo-hover)
li
position: relative
margin: 6px 0
padding: .12em .4em .12em 1.4em

4
source/css/_page/tags.styl
View File

@@ -17,3 +17,7 @@
+maxWidth768()
font-size: 2em
h1.page-title
& + .tag-cloud-list
text-align: left

47
source/css/_search/algolia.styl
View File

@@ -1,69 +1,52 @@
#algolia-search
.search-dialog
.ais-search-box
margin: 0 auto
max-width: 100%
width: 100%
.ais-SearchBox
input
padding: 5px 14px
width: 100%
outline: none
border: 2px solid $search-color
border-radius: 40px
background: var(--search-bg)
color: var(--search-input-color)
.ais-hits--item.algolia-hit-item
position: relative
.ais-Hits-list
padding-left: 24px
&:hover
&:before
border-color: var(--pseudo-hover)
&:before
$w = .5em
position: absolute
top: .53em
left: 0
width: w = $w
height: h = w
border: 3px solid $search-color
border-radius: w
background: transparent
content: ''
line-height: h
transition: all .2s ease-in-out
@extend .list-beauty
a
display: block
color: var(--search-result-title)
cursor: pointer
&:hover
color: $search-color
em
mark
background: transparent
color: $search-keyword-highlight
font-weight: bold
.ais-pagination.pagination
.ais-Pagination
margin: 16px 0 0
padding: 0
text-align: center
.ais-pagination--item
.ais-Pagination-list
padding: 0
list-style: none
.ais-Pagination-item
display: inline
margin: 0 4px
padding: 0
a
.ais-Pagination-link
display: inline-block
min-width: 24px
height: 24px
text-align: center
line-height: 24px
.ais-pagination--item.current
.ais-Pagination-item--selected
a
background: $theme-paginator-color
color: #eee

28
source/css/_search/index.styl
View File

@@ -22,25 +22,23 @@
hr
margin: 20px auto
span.search-close-button
position: absolute
top: 16px
right: 20px
color: $grey
font-size: 1.4em
line-height: 1
cursor: pointer
transition: color .2s ease-in-out
&:hover
color: $search-color
&__title
padding: 0 0 14px
.search-nav
margin: 0 0 14px
color: $search-color
font-size: 1.4em
line-height: 1
.search-dialog-title
margin-right: 10px
.search-close-button
float: right
color: $grey
transition: color .2s ease-in-out
&:hover
color: $search-color
#search-mask
position: fixed
top: 0

3
source/css/_search/local-search.styl
View File

@@ -15,6 +15,9 @@
color: var(--search-input-color)
-webkit-appearance: none
.search-wrap
display: none
.local-search__hit-item
position: relative
padding-left: 24px