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

v2.1.0

Browse Source 
1. 可設置隱藏文章
2. 適配 Hexo 的 Tag Plugins Code Block With marked lines 顯示
3. 可配置首頁cover顯示的位置
4. 更改深色模式下的配色
5. activate_power_mode 增加關閉顏色和抖動
6. 增加谷歌廣告，騰訊分析
7. 相關文章增加時間顯示，調整佈局，垂直居中
8. 文章頁面，top_img增加評論數顯示
9. 可以取消點擊圖片觀看大圖
10. mathjax和kathex可設置每頁都加載還是按需加載
11. 深色模式下，滾動條顔色的適配
12. 優化gitalk 在 dark mode下的顯示
13. 文章頁，文章標題過長時，只顯示三行內容
14. 深色模式下，背景圖片加上蒙板
15. 優化深色/閲讀模式下，canvas的顯示
16. 優化打賞的特效和移動到二維碼不會立刻消失
17. 優化sub-menu樣式
18. 修改aside 的tags顔色，在深色模式下不會出現觀看困難
19. 升級 normalize.css 到最新版
20. 優化手機上toc和menu的打開動畫
21. 優化代碼框打開關閉的特效
22. 精簡js,部分操作改為css控制
23. 優化主題的一些動畫，不會過於生硬

1. 修復當圖片被a標簽包圍時，點擊圖標沒有跳轉到對應網頁而是出現大圖觀看模式的bug
2. 修復當網址有subdirectory時，menu、打賞二維碼和lodding_bg 鏈接路徑錯誤的bug
3. 修復當網址有subdirectory時,
4. 修復katex 的 CSS無法讀取bug
5. 修復搜索按鈕在文章頁不顯示的bug
6. 修復gitalk css引用失敗的bug
7. 修復 點擊特效 煙花 無效的bug
8. 修復gitalk報path.startsWith is not a function的bug
9. 修復 閲讀模式下，背景沒有變純色的bug
10. 修復閲讀模式下，header 偶爾出現沒有靠攏頂部的bug
11. 修復Hexo Tag Plugins Block Quote 裏的鏈接顯示出外面的Bug
12. 修復aside歸檔日期過長導致錯位的bug
13. 修復toc為空時，toc按鈕仍存在的bug
14. 修復關閉懶加載後，頭像無法顯示的bug
15. 修復深色模式下，切換readmode偶爾會無效的bug
16. 修復在一些手機設備上，toc和menu的按鈕顯示不對齊的bug #72
This commit is contained in:
Jerry
2019-12-20 02:19:43 +08:00
Unverified
parent 90726f1a59
commit eae694806c
104 changed files with 3220 additions and 3956 deletions
Download Patch File Download Diff File Expand all files Collapse all files

593
source/css/_layout/z-darkmode.styl
View File

@@ -1,303 +1,356 @@
[data-theme="dark"]
body
color: #99a9bf
background-color: #2d3032
if hexo-config('darkmode.enable') || hexo-config('autoChangeMode') == '1' || hexo-config('autoChangeMode') == '2'
[data-theme='dark']
body
background-color: darken(#121212, 2)
color: alpha(#FFFFFF, .6)
&::-webkit-scrollbar-thumb
background: lighten(#2d3035,5)
::-webkit-scrollbar-thumb
background: lighten(#121212, 5)
#sidebar
background: #2d3035
box-shadow: -0.25rem 0 0.25rem #2d3035
// 網站背景，footer背景
#web_bg[data-type=color],
#footer[data-type=color]
background: darken(#121212, 2)
&::-webkit-scrollbar-thumb
background: lighten(#2d3035,5)
if hexo-config("local_search") && hexo-config("local_search.enable")
#local-search
background: #2d3035
.local-search-box--input
background: #2d3035
color: #99a9bf
.search-result-title
color: #99a9bf
if hexo-config("algolia_search.enable")
#algolia-search
background: #2d3035
.ais-search-box--input
background: #2d3035
color: #99a9bf
#algolia-search-results
.algolia-hit-item-link
color: #99a9bf
.article-container code
background: #616a6b
color: #99a9bf
if hexo-config('valine') && hexo-config('valine.enable')
// 評論
#vcomment
p,a,textarea,.vemoji-btn,.vpreview-btn,input,path,.vcount,.vnum,.vtime,.vsys,.vsys,.vnick
color: #99a9bf !important
.vsys
background: rgb(97, 106, 107) !important
.vbtn
background: rgb(45, 48, 53) !important
color: #99a9bf !important
border: 1px solid #99a9bf
.vwrap
border: 1px solid #99a9bf
input
border-bottom: 1px dashed #616a6b
.vh
border-bottom: 1px dashed #616a6b
pre
background-color: #2d3035
border: 1px solid #99a9bf
.vcontent.expand:before
background: linear-gradient(180deg,hsla(0, 0%, 0%, 0),hsl(218, 8%, 19%))
.vcontent.expand:after
background: hsla(204, 5%, 22%, 1)
.recent-posts
.recent-post-item
background: #2d3032 !important
.article-title
color: #99a9bf !important
#page-header
&.fixed
background: #2d3035
box-shadow: 0 5px 6px -5px rgba(133,133,133,0)
a,
.toggle-menu,
#site-name
color: #99a9bf
blockquote
color: #99a9bf
background-color: lighten(#2d3035,10)
hr
background: 0
border: 2px dashed #616A6B
&:before
color: #99a9bf
.post-meta__tags
background: 0
border: 1px solid #99a9bf
color: #99a9bf
.post-copyright
border: 1px solid #99a9bf
*
color: #99a9bf
.article-container pre
background-color: lighten(#2d3035, 2)
.article-container .highlight:not(.js-file-line-container)
background-color: lighten(#2d3035, 2)
.code pre
background-color: lighten(#2d3035, 2)
.gutter pre
background: lighten(#2d3035, 3)
&:after
background: lighten(#2d3035, 3)
table
&:after,.copy-notice
background: lighten(#2d3035, 3)
&::-webkit-scrollbar-thumb
background: lighten(#2d3035, 8)
.copy-notice
background: lighten(#2d3035, 3)
.aplayer
color: #000000
filter: brightness(0.6)
.translate_chn_to_cht,
.darkmode,
#readmode,
#to_comment,
#font_plus,
#font_minus,
#rightside_config,
#go-up,
#mobile-toc-button
background-color: lighten(#2d3035,10) !important
color: #99a9bf !important
&:hover
background: lighten(#2d3035,20) !important
.md-links-item:before,
.aside_category_list:hover,
.archive-list-item:hover,
#bookmark-it,
.reward-button,
.reward-all,
.note
background-color: lighten(#2d3035,10) !important
img,iframe,.gist
filter: brightness(0.7)
#aside_content
.card_widget
background:#2d3035 !important
.headline,
.length_num,
.aside_post_title,
.aside_category_list_link,
.archive-list-link,
.social-icon
color: #99a9bf !important
#archive,
.tag-cloud,
#tag,
.category-content,
#category,
#page,
.flink,
.layout_post
background: #2d3035
#nav,
#top-container
&::before
content: ""
#web_bg[data-type=photo]:before,
#footer[data-type=photo]:before
position: absolute
top: 0
bottom: 0
left: 0
right: 0
background-color: alpha($dark-black,0.7)
width: 100%
height: 100%
background-color: alpha($dark-black, .7)
content: ''
#nav span,
#nav i,
#page-header a,
#page-header .toggle-menu,
#top-container #post-meta,
#top-container a,
.posttitle,
#footer-wrap,
#footer-wrap a
color: lighten(#99a9bf,10)
#archive,
.tag-cloud,
#tag,
.category-content,
#category,
#page,
.flink,
.layout_post
background: #121212
.recent-posts .post-meta__date,
.recent-posts .article-meta,
.recent-posts .article-meta__categories,
h1, h2, h3, h4, h5, h6,
.prev_info,
.next_info,
.post-reward .reward-button,
.fa-clipboard,
.gutter pre,
#bookmark-it,
.copy-notice,
.md-links-item a,
.category-list-link
color: #99a9bf !important
#sidebar
background: #121212
box-shadow: -.25rem 0 .25rem #121212
.article-sort-item__title
color: #99a9bf
&:hover
color: #49b1f5
.article-container code
background: #2c2c2c
//打賞 分享
.post-reward
.reward-all:after
border-top: 13px solid lighten(#2d3035,10) !important
.recent-posts
.recent-post-item
background: #121212 !important
#web_bg[data-type=color],
#footer[data-type=color]
background: #2d3032
.article-title
color: alpha(#FFFFFF, .8) !important
#web_bg[data-type=photo]:before,
#footer[data-type=photo]:before
background-color: alpha($dark-black,0.7)
#page-header
&.fixed
background: #121212
box-shadow: 0 5px 6px -5px rgba(133, 133, 133, 0)
#hexo-blog-encrypt
label,input
color: #99a9bf !important
input
background-color: #2d3035
.toggle-menu,
#site-name,
a
color: alpha(#FFFFFF, .8)
.menus_item_child
background-color: lighten(#121212, 5) !important
#mobile-sidebar
#mobile-sidebar-menus
background: #2d3035
li
&:hover
background: lighten(#121212, 20)
.headline
color: #99a9bf !important
.length_num
color: darken(#99a9bf,10) !important
a
color: #99a9bf !important
a
color: alpha(#FFFFFF, .6)
#mobile-sidebar-toc
background: #2d3035
a
color: #99a9bf !important
// 代碼框
.article-container pre,
.article-container pre code
background-color: lighten(#121212, 2)
#page-header
.menus_item_child
background-color: #2d3035 !important
.highlight-tools
background: lighten(#121212, 3)
.article-container .highlight:not(.js-file-line-container)
background-color: lighten(#121212, 2)
.code pre,
.gutter pre
background-color: lighten(#121212, 2)
table
.copy-notice
background: lighten(#121212, 3)
.copy-notice
background: lighten(#121212, 3)
blockquote
background-color: lighten(#121212, 10)
color: alpha(#FFFFFF, .6)
hr
border: 2px dashed alpha(#FFFFFF, .3)
background: 0
&:before
border-color: transparent transparent #2d3035 !important
color: alpha(#FFFFFF, .6)
.layout_post >.tag_share .post-meta__tags
border: 1px solid alpha(#FFFFFF, .6)
background: 0
color: alpha(#FFFFFF, .6)
&:hover
background: darken(#FFFFFF, 60)
// 文章版權
.post-copyright
border: 1px solid alpha(#FFFFFF, .6)
.post-copyright-meta
color: alpha(#FFFFFF, .8)
.post-copyright-info
color: alpha(#FFFFFF, .6)
// 音樂播放器
.aplayer
filter: brightness(.7)
color: #000000
// 右下角按鈕
#rightside
& > div
& > i,
& > a,
& > div
background-color: lighten(#121212, 5) !important
color: alpha(#FFFFFF, .6) !important
&:hover
background: lighten(#121212, 20) !important
// 打賞按鈕
.post-reward
.reward-button
background-color: lighten(#121212, 10) !important
.reward-all
background-color: lighten(#121212, 10) !important
&:after
border-top: 13px solid lighten(#121212, 10) !important
.md-links-item:before,
.aside-category-list:hover,
.archive-list-item:hover,
#bookmark-it
background-color: lighten(#121212, 10) !important
img,
iframe,
.gist
filter: brightness(.7)
// 側邊欄
#aside_content
.card-widget
background: #121212 !important
.headline,
.length_num,
.aside-post_title,
.aside-category-list_link,
.archive-list-link,
.social-icon
color: alpha(#FFFFFF, .6) !important
.button--animated:before
background: lighten(#121212, 20) !important
// 頭部
#nav,
#top-container
&::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,
#top-container #post-meta,
#top-container a,
#footer-wrap,
#footer-wrap a
color: alpha(#FFFFFF, .6)
.posttitle,
h1,
h2,
h3,
h4,
h5,
h6
color: alpha(#FFFFFF, .8)
.recent-posts .post-meta__date,
.recent-posts .article-meta,
.recent-posts .article-meta__categories,
.post-reward .reward-button,
.fa-clipboard,
.gutter pre,
#bookmark-it,
.copy-notice,
.md-links-item a,
.category-list-link,
.relatedPosts_date,
.prev-post .label,
.next-post .label
color: alpha(#FFFFFF, .6) !important
.prev_info,
.next_info,
.relatedPosts_title
color: alpha(#FFFFFF, .8) !important
// 時間軸界面
.article-sort-item__title
color: alpha(#FFFFFF, .6)
&:hover
color: #49b1f5
// 手機 MENU,TOC
#mobile-sidebar
#mobile-sidebar-menus
background: #121212
.headline
color: alpha(#FFFFFF, .6) !important
.length_num
color: alpha(#FFFFFF, .8) !important
li
a
color: #99a9bf
.bookmark--animated:before
background: lighten(#2d3035,20) !important
if hexo-config('gitalk') && hexo-config('gitalk.enable')
#gitalk-container
.gt-header-textarea
background-color: #2d3035 !important
color: #99a9bf
border: 1px solid #99a9bf
.gt-comment-content
filter: brightness(0.7)
color: alpha(#FFFFFF, .6) !important
#mobile-sidebar-toc
background: #121212
a
color: alpha(#FFFFFF, .6) !important
// note
if hexo-config('note.style') == 'modern'
.note
filter: brightness(.7)
if hexo-config('note.style') == 'flat'
.note
filter: brightness(.7)
color: #4c4948
// 第三方
// 插件 hexo-blog-encrypt
#hexo-blog-encrypt
label,
input
color: alpha(#FFFFFF, .6) !important
input
background-color: #121212
if hexo-config('gitalk') && hexo-config('gitalk.enable')
#gitalk-container
.gt-header-textarea,
.gt-header-preview,
.gt-comment-content,
button,
.gt-popup
filter: brightness(.7)
svg
fill: alpha(#FFFFFF, .6) !important
if hexo-config('valine') && hexo-config('valine.enable')
// 評論
#vcomment
p,
a,
textarea,
.vemoji-btn,
.vpreview-btn,
input,
path,
.vcount,
.vnum,
.vtime,
.vsys,
.vsys,
.vnick
color: alpha(#FFFFFF, .6) !important
.vsys
background: rgb(97, 106, 107) !important
.vbtn
border: 1px solid alpha(#FFFFFF, .6)
background: rgb(45, 48, 53) !important
color: alpha(#FFFFFF, .6) !important
.vwrap
border: 1px solid alpha(#FFFFFF, .6)
input
border-bottom: 1px dashed #616a6b
.vh
border-bottom: 1px dashed #616a6b
pre
border: 1px solid alpha(#FFFFFF, .6)
background-color: #121212
code
background: transparent
code
background-color: #2c2c2c
color: alpha(#FFFFFF, .6)
.vcontent.expand:before
background: linear-gradient(180deg, hsla(0, 0, 0, 0), hsl(218, 8%, 19%))
.vcontent.expand:after
background: hsla(204, 5%, 22%, 1)
if hexo-config('local_search') && hexo-config('local_search.enable')
#local-search
background: #121212
.local-search-box--input
background: #121212
color: alpha(#FFFFFF, .6)
.search-result-title
color: alpha(#FFFFFF, .6)
if hexo-config('algolia_search.enable')
#algolia-search
background: #121212
.ais-search-box--input
background: #121212
color: alpha(#FFFFFF, .6)
#algolia-search-results
.algolia-hit-item-link
color: alpha(#FFFFFF, .6)