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

✨ feat: 增加標籤外掛 tag-toggle

Browse Source 
✨ feat: 增加頁面加載動畫preloader close #193
✨ feat: 適配hexo-generator-indexed插件
✨ feat: aside subtitle可配置，優先顯示配置內容、沒有的顯示頁面subtitle close #191
✨ feat: aside card-tags可配置是否顯示顏色
✨ feat: algolia-search highligh文字加深
✨ feat: 增加頁面keywords設置 #191
✨ feat: darkmode和readmode配色微調
🐛 fix: 修復hide-block 配置顏色顯示出錯的bug
🐛 fix: 修正zh-TW部分用語
This commit is contained in:
Jerry
2020-04-17 19:48:07 +08:00
Unverified
parent d62ec1b866
commit b512eb761d
36 changed files with 541 additions and 255 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -209,34 +209,6 @@ img:not([src])
width: 100%
height: 100%
// tag-hide
.hide-inline,
.hide-block
& > .hide-button
position: relative
z-index: 1
display: inline-block
padding: 0 1rem
background: $tag-hide-bg
text-align: center
cursor: pointer
&:hover
text-decoration: none !important
& > .hide-content
display: none
.hide-inline
& > .hide-button
margin: 0 .3rem
& > .hide-content
margin: 0 .3rem
.hide-block
margin: 0 0 .8rem
.comment_headling
margin-bottom: 10px
font-weight: 700

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

@@ -271,6 +271,3 @@ blockquote
background: darken($highlight-background, 5)
color: $highlight-foreground
font-size: 14px
.highlight-close
height: 0 !important

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

@@ -91,7 +91,8 @@
.card-tag-cloud
a
word-break: keep-all
display: inline-block
padding: 0 .1rem
&:hover
color: $light-blue !important

94
source/css/_layout/loadding.styl Normal file
View File

@@ -0,0 +1,94 @@
if hexo-config('preloader')
loading-bg()
position: fixed
z-index: 1000
width: 50%
height: 100%
background-color: $preloader-bg
transition: all .5s
#loading-box
.loading-left-bg
loading-bg()
.loading-right-bg
loading-bg()
right: 0
.spinner-box
position: fixed
z-index: 1001
display: flex
justify-content: center
align-items: center
width: 100%
height: 100vh
.configure-border-1
position: absolute
padding: 3px
width: 115px
height: 115px
background: #ffab91
animation: configure-clockwise 3s ease-in-out 0s infinite alternate
.configure-border-2
left: -115px
padding: 3px
width: 115px
height: 115px
background: rgb(63, 249, 220)
transform: rotate(45deg)
animation: configure-xclockwise 3s ease-in-out 0s infinite alternate
.loading-word
position: absolute
color: $white
font-size: .8rem
.configure-core
width: 100%
height: 100%
background-color: $preloader-bg
&.loaded
.loading-left-bg
transform: translate(-100%, 0)
.loading-right-bg
transform: translate(100%, 0)
.spinner-box
display: none
@keyframes configure-clockwise
0%
transform: rotate(0)
25%
transform: rotate(90deg)
50%
transform: rotate(180deg)
75%
transform: rotate(270deg)
100%
transform: rotate(360deg)
@keyframes configure-xclockwise
0%
transform: rotate(45deg)
25%
transform: rotate(-45deg)
50%
transform: rotate(-135deg)
75%
transform: rotate(-225deg)
100%
transform: rotate(-315deg)

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

@@ -270,7 +270,7 @@
-webkit-box-orient: vertical
&:hover
color: $light-blue
color: $light-blue !important
transform: translateX(20px)
&__img
@@ -381,7 +381,7 @@
& > div:first-child:not(.recent-posts)
width: 100% !important
//ie10-ios11使用
// ie10-ios11使用
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active)
.recent-post-info
.content

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

@@ -39,25 +39,43 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
.article-title
color: alpha(#FFFFFF, .8) !important
#page-header
&.fixed
background: alpha(#121212, .8)
box-shadow: 0 5px 6px -5px rgba(133, 133, 133, 0)
// 頭部
#nav
&:before
position: absolute
top: 0
right: 0
bottom: 0
left: 0
background-color: alpha($dark-black, .7)
content: ''
.toggle-menu,
#site-name,
& > #page-header
a
color: alpha(#FFFFFF, .8)
color: alpha(#FFFFFF, .8) !important
.menus_item_child
background-color: lighten(#121212, 5) !important
li
&:hover
background: lighten(#121212, 20)
&.fixed
background: alpha(#121212, .8)
box-shadow: 0 5px 6px -5px rgba(133, 133, 133, 0)
.toggle-menu,
#site-name,
a
color: alpha(#FFFFFF, .6)
color: alpha(#FFFFFF, .8)
.menus_item_child
background-color: lighten(#121212, 5) !important
li
&:hover
background: lighten(#121212, 20) !important
a
color: alpha(#FFFFFF, .8)
#site_subtitle
& > span
color: alpha(#FFFFFF, .6)
// 代碼框
#article-container pre,
@@ -109,6 +127,9 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
.post-copyright-info
color: alpha(#FFFFFF, .6)
&:after
background: #121212
// 音樂播放器
.aplayer
filter: brightness(.7)
@@ -120,11 +141,11 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
& > i,
& > a,
& > div
background-color: lighten(#121212, 5) !important
color: alpha(#FFFFFF, .6) !important
background-color: lighten(#121212, 5)
color: alpha(#FFFFFF, .6)
&:hover
background: lighten(#121212, 20) !important
background: lighten(#121212, 20)
// 打賞按鈕
.post-reward
@@ -164,23 +185,8 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
color: alpha(#FFFFFF, .6) !important
.button--animated:before
background: lighten(#121212, 20) !important
background: lighten(#121212, 20)
// 頭部
#nav
&:before
position: absolute
top: 0
right: 0
bottom: 0
left: 0
background-color: alpha($dark-black, .7)
content: ''
#nav span,
#nav i,
#page-header a,
#page-header .toggle-menu,
#post-meta,
#post-meta a,
#footer-wrap,
@@ -217,11 +223,13 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
color: alpha(#FFFFFF, .8) !important
// 時間軸界面
.article-sort-item__title
color: alpha(#FFFFFF, .6)
.article-sort
&-item__title
color: alpha(#FFFFFF, .6)
&:hover
color: #49b1f5
&-item:before,
&-title:before
background: #121212
// 手機 MENU,TOC
#mobile-sidebar
@@ -247,6 +255,10 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
filter: brightness(.7)
color: #4c4948
// hide-tags
.hide-button
filter: brightness(.7)
// 第三方
// 插件 hexo-blog-encrypt
#hexo-blog-encrypt
@@ -257,6 +269,9 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
input
background-color: #121212
.mermaid
filter: brightness(.7)
if hexo-config('gitalk') && hexo-config('gitalk.enable')
#gitalk-container
.gt-header-textarea,
@@ -326,5 +341,12 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
blockquote
color: alpha(#FFFFFF, .6)
.mermaid
filter: brightness(.7)
if hexo-config('preloader')
#loading-box
.loading-left-bg,
.loading-right-bg,
.configure-core
background-color: darken(#121212, 2)
.loading-word
color: alpha(#FFFFFF, .6)

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

@@ -1,7 +1,9 @@
if hexo-config('readmode') && hexo-config('readmode.enable')
[data-theme='light']
$light-redmode-bg = #fff
.read-mode
background: #fff
background: $light-redmode-bg
#nav.post-bg
a
@@ -17,12 +19,12 @@ if hexo-config('readmode') && hexo-config('readmode.enable')
blockquote
border-left: .2rem solid #ddd
background-color: transparent
background-color: $light-redmode-bg
ol,
li
&:before
background: transparent
background: $light-redmode-bg
color: #4c4948
ul
@@ -32,27 +34,40 @@ if hexo-config('readmode') && hexo-config('readmode.enable')
hr
border: 2px dashed #d6dbdf
background: transparent
background: $light-redmode-bg
&:before
color: darken(#d6dbdf, 10)
.hide-toggle
border: 1px solid darken(#d6dbdf, 10) !important
.hide-button
background: darken(#d6dbdf, 10) !important
background: $light-redmode-bg !important
color: #4c4948 !important
.hide-inline,
.hide-block
& >.hide-button
border: 1px solid darken(#d6dbdf, 10)
& > .button--animated:before
background: $light-redmode-bg
.note
border: 2px solid #eee
background-color: transparent
background-color: $light-redmode-bg
#mobile-sidebar-menus,
#rightside i,
#rightside i:not(.fa-cog),
#rightside a,
#rightside #rightside_config
background: darken(#d6dbdf, 10) !important
background: darken(#d6dbdf, 20) !important
[data-theme='dark']
$dark-readmode-bg = #0d0d0d
.read-mode
background: #0d0d0d
background: $dark-readmode-bg
#article-container
code
@@ -60,12 +75,12 @@ if hexo-config('readmode') && hexo-config('readmode.enable')
blockquote
border-left: .2rem solid rgba(255, 255, 255, .6)
background-color: transparent
background-color: $dark-readmode-bg
ol,
li
&:before
background: transparent
background: $dark-readmode-bg
color: rgba(255, 255, 255, .6)
ul
@@ -73,15 +88,28 @@ if hexo-config('readmode') && hexo-config('readmode.enable')
&:before
border: .15rem solid rgba(255, 255, 255, .6)
.hide-toggle
border: 1px solid rgba(255, 255, 255, .6) !important
.hide-button
background: $dark-readmode-bg !important
filter: none
color: rgba(255, 255, 255, .6) !important
.hide-inline,
.hide-block
& >.hide-button
border: 1px solid rgba(255, 255, 255, .6)
& > .button--animated:before
background: $dark-readmode-bg !important
.note
border: 2px solid rgba(255, 255, 255, .6)
filter: none
background-color: transparent
background-color: $dark-readmode-bg
color: rgba(255, 255, 255, .6)
.hide-button
background: #1f1f1f !important
.read-mode
#body-wrap
padding-left: 0 !important

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

@@ -45,6 +45,10 @@
&:hover
color: $search-color
em
color: $search-keyword-highlight
font-weight: bold
.ais-pagination.pagination
margin: .8rem 0 0
padding: 0

9
source/css/_layout/gallery.styl → source/css/_tags/gallery.styl
View File

@@ -9,6 +9,9 @@ figure.gallery-group
background: $dark-black
-webkit-transform: translate3d(0, 0, 0)
@media screen and (max-width: 600px)
width: calc(100% - .4rem)
&:hover
img
opacity: .4
@@ -105,8 +108,4 @@ figure.gallery-group
.fancybox
width: auto
text-align: inherit
@media screen and (max-width: 600px)
figure.gallery-group
width: calc(100% - .4rem)
text-align: inherit

53
source/css/_tags/hide.styl Normal file
View File

@@ -0,0 +1,53 @@
// tag-hide
.hide-inline,
.hide-block
& > a.hide-button
position: relative
z-index: 1
display: inline-block
padding: 0 1rem
background: $tag-hide-bg
color: $white !important
text-align: center
cursor: pointer
&:hover
text-decoration: none !important
&.open
display: none
& > .hide-content
display: none
.hide-inline
& > .hide-button
margin: 0 .3rem
& > .hide-content
margin: 0 .3rem
.hide-block
margin: 0 0 .8rem
.hide-toggle
margin-bottom: 1rem
border: 1px solid $tag-hide-toggle-bg
& > .hide-button
padding: .3rem .5rem
background: $tag-hide-toggle-bg
color: $font-color
cursor: pointer
& > i
font-size: 1.2em
transition: all .3s
&.open
i
transform: rotate(90deg)
& > .hide-content
display: none
margin: 1.5rem 1.2rem

0
source/css/_layout/note.styl → source/css/_tags/note.styl
View File

1
source/css/index.styl
View File

@@ -5,6 +5,7 @@
@import '_global'
@import '_highlight/highlight'
@import '_layout/*'
@import '_tags/*'
@import '_mode/*'
// search

5
source/css/var.styl
View File

@@ -84,8 +84,9 @@ $search-keyword-highlight = #F47466
$gallery-color = #fff
// tag-hide
$tag-hide-bg = $theme-color
$tag-hide-toggle-bg = #f0f0f0
//preloader
$preloader-bg = #37474f
// Note colors
// --------------------------------------------------