biss/hexo-theme-butterfly
1
0
Fork 0
mirror of https://github.com/jerryc127/hexo-theme-butterfly.git synced 2026-04-16 17: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

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

@@ -1,26 +1,25 @@
#aside_content
width: 25%
.card_widget
-webkit-box-shadow: 0 4px 8px 6px rgba(7,17,27,.06)
box-shadow: 0 4px 8px 6px rgba(7,17,27,.06)
border-radius: 8px
transition: all .3s
background: #fff
margin-top: 20px
.card-widget
overflow: hidden
margin-top: 20px
border-radius: 8px
background: $white
box-shadow: 0 4px 8px 6px rgba(7, 17, 27, .06)
transition: all .3s
&:hover
box-shadow: 0 4px 12px 12px rgba(7,17,27,0.15)
box-shadow: 0 4px 12px 12px rgba(7, 17, 27, .15)
.card-author
.card-info
img
height: 120px
width: 120px
padding: 0
display: inline-block
vertical-align: top
padding: 5px
width: 120px
height: 120px
border-radius: 70px
vertical-align: top
transition: all .3s
&:hover
@@ -28,254 +27,199 @@
.author-info
&__name
font-size: 1.1rem
display: block
margin: -0.1rem auto
font-weight: 500
font-size: 1.1rem
&__description
display: block
margin: -0.1rem auto
margin-top: -.3rem
.data_link
a
text-decoration: none
.card-info-data
display: flex
padding: .7rem 0
.length_num
font-size: 1rem
color: #000
& > .card-info-data-item
flex: 1 1
min-width: 0
.headline
display: block
font-size: 0.7rem
margin-bottom: -21px
text-transform: uppercase
color:$font-black
a
text-decoration: none
#aside-social-icons
margin: 0.5rem auto -0.7rem
width: 15rem
text-align: center
.headline
display: block
overflow: hidden
color: $font-black
text-transform: uppercase
text-overflow: ellipsis
white-space: nowrap
font-size: .7rem
.social-icon
margin: 0 0.5rem
.length_num
color: $dark-black
font-size: 1rem
.card-info-social-icons
margin: .3rem 0 -.3rem
.social-icon
margin: 0 .5rem
color: $font-black
font-size: 1rem
cursor: pointer
i
transition: all 0.3s
transition: all .3s
&:hover
transform: rotate(540deg)
#bookmark-it
margin-top: .2rem
height: 1.6rem
background-color: $light-blue
color: #fff
text-decoration: none
line-height: 1.6rem
position: relative
text-transform: uppercase
z-index: 1
display: block
background-color: $light-blue
color: $white
text-decoration: none
text-transform: uppercase
line-height: 1.6rem
span
padding-left: 10px
padding-left: .5rem
.bookmark--primary
color: $ruby
.bookmark--animated
transition-property: color
transition-duration: 1s
&:before
content: ""
position: absolute
top: 0
left: 0
right: 0
bottom: 0
background: $ruby
transform: scaleX(0)
transform-origin: 0 50%
transition-property: transform
transition-duration: 0.5s
transition-timing-function: ease-out
z-index: -1
&:hover
color: white
&:before
transform: scaleX(1)
transition-timing-function: cubic-bezier(0.45, 1.64, 0.47, 0.66)
.card-content
.card-content
padding: 1rem 1.2rem
.post_data
display: flex
.data-item
flex-grow: 1
align-items: center
flex-basis: auto
justify-content: center
.item-headline
font-size: .8rem
.item_headline
font-size: 0.8rem
span
margin-left: 10px
span
margin-left: .5rem
.card-tag-cloud
.card-tag-cloud
a
text-decoration: none
position: relative
padding-bottom: 0.3rem
word-break: keep-all
&:hover
color: $light-blue !important
// &::after
// width: 100%
.card-recent-post
.aside-recent-item
margin: 10px 0 -15px
.aside_recent_item
margin: 10px 0 -15px 0
.aside_recent_post
a
text-decoration: none
color: $font-black
& > .aside-recent-post
margin-bottom: 10px
.aside_recent_post
margin-bottom: 10px
width: 100%
& > a
color: $font-black
text-decoration: none
.aside_post_cover
height: 66px
width: 66px
float: left
overflow: hidden
.aside-post-cover
float: left
overflow: hidden
width: 66px
height: 66px
.aside_post_bg
object-fit: cover
width: 100%
height: 100%
max-width: 100%
padding: 0
transition: all .6s
.aside-post-bg
padding: 0
max-width: 100%
width: 100%
height: 100%
transition: all .6s
object-fit: cover
&:hover
box-shadow: none
transform: scale(1.1)
#aside_title
.aside_post_meta
font-size: 0.6rem
padding-left: 10px
color: #99a9bf
&:hover
box-shadow: none
transform: scale(1.1)
.aside_post_title
line-height: 1rem
display: -webkit-box
-webkit-line-clamp: 2
-webkit-box-orient: vertical
overflow: hidden
height: 40px
padding-left: 10px
.aside-post-title
.aside-post_meta
padding-left: 10px
color: $theme-link-color
font-size: .6rem
&:hover
color: $light-blue !important
.aside-post_title
display: -webkit-box
overflow: hidden
padding-left: 10px
height: 40px
line-height: 1rem
-webkit-line-clamp: 2
-webkit-box-orient: vertical
.aside_category_item,.archive-list
&:hover
color: $light-blue !important
.card-archives ul.archive-list,
.card-categories ul.aside-category-item
margin: 0
padding: .2rem 0 0
list-style: none
margin-bottom: -3px
margin-block-start: 0.2rem
.aside_category_item.child
margin-bottom: -3px
margin-block-start: 0rem
.aside_category_list
margin-left: -50px
.aside_category_list,.archive-list-item
margin-left: -40px
.card-archives ul.archive-list > .archive-list-item,
.card-categories ul.aside-category-item > .aside-category-list
padding: .2rem 1rem
cursor: pointer
transition: all .3s
&:hover
padding: .2rem .85rem
background-color: $light-blue
color: #363636
a
text-decoration: none
display: flex
color: $font-black
padding: 0.2rem 1rem
transition: .2s
text-decoration: none
&:hover
padding: 0.2rem 0.85rem
.aside_category_list_name,.archive-list-link
white-space: nowrap
overflow: hidden
text-overflow: ellipsis
flex: auto
span
&:first-child
flex: auto
overflow: hidden
text-overflow: ellipsis
white-space: nowrap
.card-categories
.aside-category-item
&.child
padding: 0 0 0 1.2rem
.aside_category_list_link,.archive-list-item
display: flex
.aside_category_list_length,.archive-list-count
float: right
.card-archives
margin-bottom: 20px
.archive-list-link-more
justify-content: center
.card-webinfo
.webinfo
padding: 0.2rem 1rem
padding: .2rem 1rem
.webinfo_item
.webinfo-item
display: block
padding: 4px 0 0
.webinfo_article_name,
.webinfo_runtime_name,
.webinfo_site_uv_name,
.webinfo_site_name
display: inline-block
.webinfo_article_count,
.webinfo_runtime_count,
.webinfo_site_uv_count,
.webinfo_site_pv_count
float: right
display: inline-block
div
&:first-child
display: inline-block
@media screen and (max-width: 900px)
&:last-child
display: inline-block
float: right
@media screen and (max-width: 900px)
.layout_page
flex-direction: column
#recent-posts,#aside_content
#recent-posts,
#aside_content
width: 100% !important
.card_widget
margin-left: 0
margin-right: 0
@media screen and (min-width: 900px)
#aside_content
.card_widget
if hexo-config("aside.position") == "right"
margin-left: 15px
else
margin-right: 15px
@media screen and (min-width: 900px)
#aside_content
.card-widget
if hexo-config('aside.position') == 'right'
margin-left: 15px
else
margin-right: 15px
if hexo-config('aside_mobile') == false
@media screen and (max-width: $sm)
#aside_content
display: none
display: none

26
source/css/_layout/category.styl
View File

@@ -1,8 +1,8 @@
.category-content
ol,
ul
margin-top: 0.4rem
padding: 0 0 0 0.8rem
margin-top: .4rem
padding: 0 0 0 .8rem
list-style: none
counter-reset: li
@@ -11,12 +11,12 @@
ol,
ul
padding-left: 0.5rem
padding-left: .5rem
li
position: relative
margin: 0.3rem 0
padding: 0.1rem 0.5rem 0.1rem 1.5rem !important
margin: .3rem 0
padding: .1rem .5rem .1rem 1.5rem !important
&:hover
&:before
@@ -29,19 +29,19 @@
background: $light-blue
color: $white
cursor: pointer
transition: all 0.3s ease-out
transition: all .3s ease-out
ol
li
&:before
margin-top: 0.2rem
margin-top: .2rem
width: w = 1.2rem
height: h = w
border-radius: 0.5 * w
border-radius: .5 * w
content: counter(li)
counter-increment: li
text-align: center
font-size: 0.6rem
font-size: .6rem
line-height: h
ul
@@ -51,13 +51,13 @@
border-color: $ruby
&:before
$w = 0.3rem
$w = .3rem
top: 10px
margin-left: 0.45rem
margin-left: .45rem
width: w = $w
height: h = w
border: 0.5 * w solid $light-blue
border: .5 * w solid $light-blue
border-radius: w
background: $white
content: ""
content: ''
line-height: h

56
source/css/_layout/comments.styl
View File

@@ -2,65 +2,67 @@
margin-top: 1rem
.comment_headling
font-size: 20px
font-weight: 700
margin-bottom: 10px
font-weight: 700
font-size: 20px
// valine
// valine
#vcomment
font-size: inherit
input
font-size: 0.65rem
button
font-size: .7rem
input
font-size: .65rem
button
padding: .3rem 1rem
border-color: #fff
background-color: $light-blue
color: #fff
border-color: #fff
font-size: .7rem
&:hover
background-color: darken($light-blue, 40)
textarea
font-size: 0.7rem
if hexo-config("valine.bg")
background: url(convert(hexo-config("valine.bg"))) 100% 100% no-repeat
textarea
font-size: .7rem
if hexo-config('valine.bg')
background: url(convert(hexo-config('valine.bg'))) 100% 100% no-repeat
.info
display: none
.vimg
border: 0
&:hover
transform: rotate(540deg)
.vcount
font-size: 0.775rem
.vnum
.vcount
font-size: .775rem
.vnum
font-size: 1.1rem
.vsys
font-size: 80%
.vtime
font-size: .65rem
.vcontent
font-size: 100%
.vat
font-size: .7125rem
color: $cyan
border: 1px solid $cyan
padding: 0 .8rem
border: 1px solid $cyan
border-radius: 5px
color: $cyan
font-size: .7125rem
&:hover
background-color: alpha($cyan,0.5)
code, pre
font-size: 98%
background-color: alpha($cyan, .5)
code,
pre
font-size: 98%

193
source/css/_layout/flink.styl
View File

@@ -1,122 +1,91 @@
.flink
.md-links
min-height: calc(100% - 120px - 5pc - 6em)
text-align: center
overflow: auto
padding: 0
margin: 0 auto
.post-cards
margin: -10px 10px 0
a
color: #333
text-decoration: none
li
width: calc(100%/3 - 14px)
float: left
list-style: none
.md-links-item
height: 90px
line-height: 17px
margin: 20px 7px
padding: 0px 0px
transition: box-shadow 0.25s
text-overflow: ellipsis
overflow: hidden
border-radius: 8px
transform: perspective(1px) translateZ(0)
box-shadow: 0 0 1px rgba(0, 0, 0, 0)
position: relative
transition-property: color
transition-duration: 0.3s
img
float: left
border-radius: 35px
margin: 11px 10px
width: 70px
height: 70px
border: 0px solid #eaeefb
transition: all .3s
&:hover
img
filter: unqoute("progid:DXImageTransform.Microsoft.BasicImage(rotation=3)")
transform: rotate(540deg)
&:before
content: ""
position: absolute
z-index: -1
top: 0
left: 0
right: 0
bottom: 0
background: $light-blue !important
transform: scale(0)
transition-property: transform
transition-duration: 0.3s
transition-timing-function: ease-out
.md-links
overflow: auto
margin: 0 auto
padding: 0
text-align: center
.md-links-item:hover,
.md-links-item:focus,
.md-links-item:active
color: white
& > .md-links-item
position: relative
float: left
overflow: hidden
margin: 20px 7px
padding: 0
width: calc(100% / 3 - 14px)
height: 90px
border-radius: 8px
list-style: none
line-height: 17px
transform: perspective(1px) translateZ(0)
.md-links-item:hover:before,
.md-links-item:focus:before,
.md-links-item:active:before
-webkit-transform: scale(1)
transform: scale(1)
.md-links-item a:hover
cursor: pointer
.md-links-title
padding-top: 16px
padding-right: 10px
font-size: 20px
font-weight: bold
height:40px
overflow: hidden
white-space: nowrap
text-overflow: ellipsis
&:hover
img
transform: rotate(540deg)
&:before
position: absolute
top: 0
right: 0
bottom: 0
left: 0
z-index: -1
background: $light-blue
content: ''
transition-timing-function: ease-out
transition-duration: .3s
transition-property: transform
transform: scale(0)
&:hover:before,
&:focus:before,
&:active:before
transform: scale(1)
a
color: #333
text-decoration: none
img
float: left
margin: 11px 10px
padding: 4px
width: 70px
height: 70px
border-radius: 35px
transition: all .3s
.md-links-title
overflow: hidden
padding: 16px 10px 0 0
height: 40px
text-overflow: ellipsis
white-space: nowrap
font-weight: bold
font-size: 20px
.md-links-des
overflow: hidden
padding: 16px 10px
height: 50px
text-overflow: ellipsis
white-space: nowrap
font-size: 13px
.post-cards
margin-top: 5px
min-height: 100px
padding: 0 15px
border-radius: 15px
.comment-word
font-weight:bold
font-size:1.7em
.md-links-des
padding: 16px 10px
font-size:13px
overflow: hidden
height:50px
white-space: nowrap
text-overflow: ellipsis
font-weight: bold
font-size: 1.7em
@media screen and (max-width:1100px)
@media screen and (max-width: 1100px)
.flink
.post-cards
position: relative
margin: -20px -16px 0
border-radius: 18px
padding: 16px
.md-links
li
width: calc(100%/2 - 14px)
.md-links
.md-links-item
width: calc(50% - 14px) !important
@media screen and (max-width:600px)
@media screen and (max-width: 600px)
.flink
.md-links
li
width: calc(100%/1 - 14px)
.md-links
.md-links-item
width: calc(100% - 14px) !important

15
source/css/_layout/footer.styl
View File

@@ -1,28 +1,26 @@
#footer
position: relative
margin-top: 1rem
background: $light-blue
background-attachment: local
background-position: bottom
background-size: cover
position: relative
if hexo-config('footer_bg') != false
&:before
position: absolute
top: 0
right: 0
bottom: 0
left: 0
display: block
background-color: alpha($dark-black, .5)
content: ''
width: 100%
height: 100%
background-color: alpha($dark-black,0.5)
#footer-wrap
position: relative
padding: 2rem 1rem
color: $light-grey
text-align: center
position: relative
a
color: $light-grey
@@ -33,9 +31,8 @@
color: $white
.footer-separator
margin: 0 0.2rem
margin: 0 .2rem
.icp-icon
padding: 0 4px
vertical-align: text-bottom

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

@@ -1,31 +1,30 @@
#nav
position: relative
margin-bottom: 1rem
width: 100%
background-color: $light-blue
background-attachment: local
background-position: center
background-size: cover
&.full_page
display: flex
align-items: center
height: $index_top_img_height
.nav_bg
width: 100%
height: 100%
background-color: $light-blue
background-position: center
background-size: cover
background-attachment: local
&.not_index_bg
height: 20rem
#site-social-icons
display: none
margin: 0 auto
width: 15rem
text-align: center
display: none
.social-icon
margin: 0 0.5rem
margin: 0 .5rem
color: $light-grey
text-shadow: 0.1rem 0.1rem 0.2rem rgba(0, 0, 0, 0.15)
text-shadow: .1rem .1rem .2rem rgba(0, 0, 0, .15)
font-size: .9rem
cursor: pointer
@@ -35,13 +34,12 @@
#site-info
position: absolute
width: 100%
top: $index_site_info_top
#site-title,
#site-sub-title
color: $light-grey
text-align: center
text-shadow: 0.1rem 0.1rem 0.2rem rgba(0, 0, 0, 0.15)
text-shadow: .1rem .1rem .2rem rgba(0, 0, 0, .15)
line-height: 1.5
#site-title
@@ -49,7 +47,7 @@
font-size: 1.3rem
#site-sub-title
font-size: 0.8rem
font-size: .8rem
#page_site-info
position: absolute
@@ -60,16 +58,16 @@
position: absolute
bottom: 0
width: 100%
cursor: pointer
height: 42px
font-size: 30px
text-align: center
font-size: 30px
cursor: pointer
.scroll-down-effects
position: absolute
color: $white
#header
header
position: relative
#page-header
@@ -78,20 +76,23 @@
z-index: 99
padding: 10px 36px
width: 100%
height: 58px
border: none
font-size: 18px
transition: all .3s
opacity: 0
transition: all .5s
.toggle-menu
display: none
padding-top: 0.6rem
color: $light-grey
cursor: pointer
padding: .1rem 0 0 .3rem
&:hover
color: $white
&.is_visible
.site-page
font-size: inherit
a
color: $light-grey
text-decoration: none
@@ -103,9 +104,9 @@
position: fixed
top: -60px
z-index: 101
background: alpha($white, 0.8)
box-shadow: 0 5px 6px -5px alpha($grey, 0.6)
transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out
background: alpha($white, .8)
box-shadow: 0 5px 6px -5px alpha($grey, .6)
transition: transform .2s ease-in-out, opacity .2s ease-in-out
&.open-sidebar
.site-page
@@ -118,118 +119,106 @@
text-shadow: none
&:hover
color: $light-blue
color: $light-blue
&.visible
transition: all .5s
transform: translate3d(0, 100%, 0)
transition: all .3s
.menus_item_child
background-color: $white !important
&:before
border-color: transparent transparent $white !important
#site-name
text-shadow: 0.1rem 0.1rem 0.2rem rgba(0, 0, 0, 0.15)
text-shadow: .1rem .1rem .2rem rgba(0, 0, 0, .15)
font-weight: bold
cursor: pointer
.menus_item
position: relative
display: inline-block
padding: 0 0 0 0.7rem
padding: 0 0 0 .7rem
&:hover,&:focus
&:hover
.menus_item_child
display: block
.menus-expand
transform: rotate(180deg) !important
.menus-expand
padding: 4px
transform: rotate(0deg)
padding: 4px
transition: all .3s
transform: rotate(0)
& > a
&:after
position: absolute
bottom: 0
left: 0
z-index: -1
width: 0
height: 3px
background-color: lighten($theme-color, 30%)
content: ''
transition: all .3s ease-in-out
&:hover
&::after
width: 100%
.menus_item_child
position: absolute
background-color: alpha($white, 0.8)
border-radius: 5px
box-shadow: 0 5px 20px -4px rgba(0,0,0,.5)
right: 0
display: none
opacity: 1
animation: sub_menus .3s .1s ease both
margin-top: 8px
padding: 0
margin-top: 10px
width: max-content
background-color: alpha($white, .8)
box-shadow: 0 5px 20px -4px rgba(0, 0, 0, .5)
animation: sub_menus .3s .1s ease both
&:before
content: ""
position: absolute
top: -20px
left: 50%
margin-left: -10px
border-width: 10px
border-style: solid
border-color: transparent transparent alpha($white, 0.8)
top: -8px
left: 0
width: 100%
height: 20px
content: ''
li
padding: 1px 10px
list-style: none
text-align: center
padding: 0px 10px
&:first-child
padding: 6px 10px 0
&:last-child
padding: 0px 10px 6px
&:hover
a,i
color: $theme-color
background: $theme-color
a
color: #3b3a3a
text-shadow: none
#search_button
padding: 0 0 0 0.7rem
.site-page
position: relative
padding-bottom: 0.3rem
text-shadow: 0.05rem 0.05rem 0.1rem rgba(0, 0, 0, 0.3)
font-size: 0.7rem
cursor: pointer
#search_button
padding: 0 0 0 .7rem
#page-header .menus_item > .site-page
&::after
position: absolute
bottom: 0
left: 0
z-index: -1
width: 0
height: 3px
background-color: lighten($theme-color, 30%)
content: ""
transition: all 0.3s ease-in-out
.site-page
position: relative
padding-bottom: .3rem
text-shadow: .05rem .05rem .1rem rgba(0, 0, 0, .3)
font-size: .7rem
cursor: pointer
&:hover
&::after
width: 100%
@media screen and (min-width: $sm)
@media screen and (min-width: $sm)
#site-title
font-size: 2rem
#site-sub-title
font-size: 1.2rem
@media screen and (max-width: $sm)
#page-header
padding: 10px 0.8rem
#nav
padding: 10px .8rem
#nav
#site-social-icons
display: block
@@ -238,19 +227,7 @@
#page_site-info
top: 7rem
#top-container
height: 14rem
#post-info
bottom: 1rem
padding: 0 5%
.mobile_hidden
display: none
@media screen and (max-width: $bg)
#page-header
&.fixed

166
source/css/_layout/mobile-sidebar.styl
View File

@@ -2,43 +2,39 @@
#menu_mask
position: fixed
top: 0
bottom: 0
width: 100%
height: 110vh
left: 0
right: 0
background: alpha($black,0.7)
bottom: 0
left: 0
z-index: 102
display: none
background: alpha($dark-black, .7)
#mobile-sidebar-menus,#mobile-sidebar-toc
#mobile-sidebar-menus,
#mobile-sidebar-toc
position: fixed
top: 0
right: -254px
width: 250px
height 101vh
background: $white
cursor: pointer
box-shadow: 0 0 4px alpha($dark-black,0.27)
z-index: 103
overflow-y: scroll
display: block
transition: transform .3s
opacity: 0
will-change: transform
overflow-y: scroll
width: 250px
height: 100%
background: $white
box-shadow: 0 0 4px alpha($dark-black, .27)
transition: all .5s
#mobile-sidebar-menus
.mobile_author_icon
& > .mobile_author_icon
padding: 1.3rem 1.5rem 0
text-align: center
img
height: 120px
width: 120px
padding: 0
display: inline-block
vertical-align: top
padding: 0
width: 120px
height: 120px
border-radius: 70px
vertical-align: top
transition: all .3s
.mobile_post_data
@@ -49,126 +45,86 @@
.mobile_data_item
flex: 1
.mobile_data_link
.mobile_data_link
a
text-decoration: none
.length_num
font-size: .9rem
.length_num
color: $dark-black
font-size: .9rem
.headline
.headline
display: block
font-size: 0.7rem
color: $font-black
text-transform: uppercase
color:$font-black
hr
font-size: .7rem
hr
margin: 1rem auto
.menus_items
padding: 0 .5rem
margin-bottom: 5rem
padding: 0 .5rem
a
display: block !important
opacity: 1 !important
.site-page
position: relative
z-index: 0
display: block
overflow: hidden
margin: 0
padding: .3rem 1.5rem
color: $font-black
text-shadow: none
font-size: 0.8rem
z-index: 0
text-decoration: none
text-overflow: ellipsis
overflow: hidden
white-space: nowrap
text-shadow: none
white-space: nowrap
font-size: .8rem
cursor: pointer
i
width: 30%
text-align: left
text-align: left
span
width 70%
width: 70%
&:hover
color: $light-blue
.menus-expand
position: absolute
right: 0
padding: 6px
width: 30px !important
height: 30px
right: 0
padding: 6px
transform: rotate(0deg)
transition: all .3s
transform: rotate(0)
&.menus-closed
transform: rotate(180deg) !important
transition: all .3s
transform: rotate(180deg) !important
.menus_item_child
list-style: none
margin: 0
#mobile-sidebar-toc
padding: 1rem 0.5rem 5rem 0.3rem
list-style: none
ol,li
list-style: none
padding: 0 0 0 8px
#mobile-sidebar-toc
padding: 1rem .5rem 5rem .3rem
ol,
li
margin: 0
.toc_mobile_headline
text-align: center
font-size: 18px
font-weight: bold
a
text-decoration: none
color: $light-black
&:hover
color: $light-blue
// 手機打開menus，toc特效
.open-mobile-menus,
.open-mobile-toc
overflow: hidden
#body-wrap
transform: translateX(-250px)
#page-header
transform: translateX(-250px)
&.fixed.visible
transform: translate3d(-250px, 100%, 0)
#rightside
transform: translate3d(-288px, 0, 0) !important
.open-mobile-menus
padding-left: 0 !important
#mobile-sidebar
#mobile-sidebar-menus
transform: translateX(-254px)
opacity: 1
// pc界面打開mobile-menus需關閉sidebar
#sidebar
left: -300px !important
.open-mobile-toc
#mobile-sidebar
#mobile-sidebar-toc
transform: translateX(-254px)
opacity: 1
@media screen and (max-width: $sm)
#mobile-sidebar-menus
display: block !important
@media screen and (max-width: $bg)
#mobile-sidebar-toc
display: block !important
padding: 0 0 0 8px
list-style: none
.toc_mobile_headline
text-align: center
font-weight: bold
font-size: 18px
.toc_mobile_items-link
color: $font-color
text-decoration: none
&:hover
color: $light-blue

294
source/css/_layout/note.styl
View File

@@ -1,256 +1,282 @@
.note
.note
$note-icons = hexo-config('note.icons')
$note-style = hexo-config('note.style')
margin: 10px 0
padding: 15px
position: relative
margin: 0 0 1rem
padding: 15px
if ($note-style == 'simple')
if ($note-style == 'simple')
border: 1px solid $light-grey
border-left-width: 5px
if ($note-style == 'modern')
background-color: $whitesmoke
if ($note-style == 'modern')
border: 1px solid transparent
background-color: $whitesmoke
if ($note-style == 'flat')
background-color: lighten($light-grey, 65%)
if ($note-style == 'flat')
border: initial
border-left: 5px solid $light-grey
background-color: lighten($light-grey, 65%)
if (hexo-config('note.border_radius') is a 'unit')
if hexo-config('note.border_radius') is a 'unit'
border-radius: unit(hexo-config('note.border_radius'), px)
h2, h3, h4, h5, h6
if ($note-icons)
h2,
h3,
h4,
h5,
h6
if $note-icons
margin-top: 3px
else
else
margin-top: 0
border-bottom: initial
margin-bottom: 0
padding-top: 0 !important
border-bottom: initial
p, ul, ol, table, pre, blockquote, img
&:first-child
p,
ul,
ol,
table,
pre,
blockquote,
img
&:first-child
margin-top: 0 !important
&:last-child
&:last-child
margin-bottom: 0 !important
if ($note-icons)
&:not(.no-icon)
if $note-icons
&:not(.no-icon)
padding-left: 45px
&::before
font-family: 'FontAwesome'
font-size: larger
left: 15px
&::before
position: absolute
top: 13px
&.default
if ($note-style == 'flat')
background-color: $note-default-bg
left: 15px
font-size: larger
font-family: 'FontAwesome'
if ($note-style == 'modern')
background-color: $note-modern-default-bg
&.default
if ($note-style == 'flat')
background-color: $note-default-bg
if ($note-style == 'modern')
border-color: $note-modern-default-border
background-color: $note-modern-default-bg
color: $note-modern-default-text
a, span.exturl
&:not(.btn)
a,
span.exturl
&:not(.btn)
border-bottom: 1px solid $note-modern-default-text
color: $note-modern-default-text
&:hover
&:hover
border-bottom: 1px solid $note-modern-default-hover
color: $note-modern-default-hover
if ($note-style != 'modern')
if ($note-style != 'modern')
border-left-color: $note-default-border
h2, h3, h4, h5, h6
h2,
h3,
h4,
h5,
h6
color: $note-default-text
if ($note-icons)
&:not(.no-icon)
&::before
if $note-icons
&:not(.no-icon)
&::before
content: $note-default-icon
if ($note-style != 'modern')
if ($note-style != 'modern')
color: $note-default-text
&.primary
if ($note-style == 'flat')
&.primary
if ($note-style == 'flat')
background-color: $note-primary-bg
if ($note-style == 'modern')
background-color: $note-modern-primary-bg
if ($note-style == 'modern')
border-color: $note-modern-primary-border
background-color: $note-modern-primary-bg
color: $note-modern-primary-text
a, span.exturl
&:not(.btn)
a,
span.exturl
&:not(.btn)
border-bottom: 1px solid $note-modern-primary-text
color: $note-modern-primary-text
&:hover
&:hover
border-bottom: 1px solid $note-modern-primary-hover
color: $note-modern-primary-hover
if ($note-style != 'modern')
if ($note-style != 'modern')
border-left-color: $note-primary-border
h2, h3, h4, h5, h6
h2,
h3,
h4,
h5,
h6
color: $note-primary-text
if ($note-icons)
&:not(.no-icon)
&::before
if $note-icons
&:not(.no-icon)
&::before
content: $note-primary-icon
if ($note-style != 'modern')
if ($note-style != 'modern')
color: $note-primary-text
&.info
if ($note-style == 'flat')
background-color: $note-info-bg
if ($note-style == 'modern')
background-color: $note-modern-info-bg
&.info
if ($note-style == 'flat')
background-color: $note-info-bg
if ($note-style == 'modern')
border-color: $note-modern-info-border
background-color: $note-modern-info-bg
color: $note-modern-info-text
a, span.exturl
&:not(.btn)
a,
span.exturl
&:not(.btn)
border-bottom: 1px solid $note-modern-info-text
color: $note-modern-info-text
&:hover
&:hover
border-bottom: 1px solid $note-modern-info-hover
color: $note-modern-info-hover
if ($note-style != 'modern')
if ($note-style != 'modern')
border-left-color: $note-info-border
h2, h3, h4, h5, h6
h2,
h3,
h4,
h5,
h6
color: $note-info-text
if ($note-icons)
&:not(.no-icon)
&::before
if $note-icons
&:not(.no-icon)
&::before
content: $note-info-icon
if ($note-style != 'modern')
if ($note-style != 'modern')
color: $note-info-text
&.success
if ($note-style == 'flat')
background-color: $note-success-bg
if ($note-style == 'modern')
background-color: $note-modern-success-bg
&.success
if ($note-style == 'flat')
background-color: $note-success-bg
if ($note-style == 'modern')
border-color: $note-modern-success-border
background-color: $note-modern-success-bg
color: $note-modern-success-text
a, span.exturl
&:not(.btn)
a,
span.exturl
&:not(.btn)
border-bottom: 1px solid $note-modern-success-text
color: $note-modern-success-text
&:hover
&:hover
border-bottom: 1px solid $note-modern-success-hover
color: $note-modern-success-hover
if ($note-style != 'modern')
if ($note-style != 'modern')
border-left-color: $note-success-border
h2, h3, h4, h5, h6
h2,
h3,
h4,
h5,
h6
color: $note-success-text
if ($note-icons)
&:not(.no-icon)
&::before
if $note-icons
&:not(.no-icon)
&::before
content: $note-success-icon
if ($note-style != 'modern')
if ($note-style != 'modern')
color: $note-success-text
&.warning
if ($note-style == 'flat')
background-color: $note-warning-bg
if ($note-style == 'modern')
background-color: $note-modern-warning-bg
&.warning
if ($note-style == 'flat')
background-color: $note-warning-bg
if ($note-style == 'modern')
border-color: $note-modern-warning-border
background-color: $note-modern-warning-bg
color: $note-modern-warning-text
a, span.exturl
&:not(.btn)
a,
span.exturl
&:not(.btn)
border-bottom: 1px solid $note-modern-warning-text
color: $note-modern-warning-text
&:hover
&:hover
border-bottom: 1px solid $note-modern-warning-hover
color: $note-modern-warning-hover
if ($note-style != 'modern')
if ($note-style != 'modern')
border-left-color: $note-warning-border
h2, h3, h4, h5, h6
h2,
h3,
h4,
h5,
h6
color: $note-warning-text
if ($note-icons)
&:not(.no-icon)
&::before
if $note-icons
&:not(.no-icon)
&::before
content: $note-warning-icon
if ($note-style != 'modern')
if ($note-style != 'modern')
color: $note-warning-text
&.danger
if ($note-style == 'flat')
background-color: $note-danger-bg
if ($note-style == 'modern')
background-color: $note-modern-danger-bg
&.danger
if ($note-style == 'flat')
background-color: $note-danger-bg
if ($note-style == 'modern')
border-color: $note-modern-danger-border
background-color: $note-modern-danger-bg
color: $note-modern-danger-text
a, span.exturl
&:not(.btn)
a,
span.exturl
&:not(.btn)
border-bottom: 1px solid $note-modern-danger-text
color: $note-modern-danger-text
&:hover
&:hover
border-bottom: 1px solid $note-modern-danger-hover
color: $note-modern-danger-hover
if ($note-style != 'modern')
if ($note-style != 'modern')
border-left-color: $note-danger-border
h2, h3, h4, h5, h6
h2,
h3,
h4,
h5,
h6
color: $note-danger-text
if ($note-icons)
&:not(.no-icon)
&::before
if $note-icons
&:not(.no-icon)
&::before
content: $note-danger-icon
if ($note-style != 'modern')
if ($note-style != 'modern')
color: $note-danger-text

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

@@ -1,122 +1,134 @@
.layout_page
display: flex
margin: 0 auto
max-width: 1200px
display: flex
align-items: flex-start
margin: 0 auto
padding: 0 15px
max-width: 1200px
//index
// index
#recent-posts
width: 75%
.recent-post-item
padding: 0
box-shadow: 0 4px 8px 6px rgba(7,17,27,0.06)
border-radius: 8px
transition: all 0.3s
background: #fff
& > .recent-post-item
display: flex
flex-direction: row
align-items: center
margin-top: 20px
padding: 0
height: 280px
border-radius: 8px
background: #fff
box-shadow: 0 4px 8px 6px rgba(7, 17, 27, .06)
transition: all .3s
&:hover
-webkit-box-shadow: 0 4px 12px 12px rgba(7,17,27,0.15)
box-shadow: 0 4px 12px 12px rgba(7,17,27,0.15)
&:hover
box-shadow: 0 4px 12px 12px rgba(7, 17, 27, .15)
img.post_bg
transform:scale(1.1)
.left_radius
border-top-left-radius: 8px
border-bottom-left-radius: 8px
transform: scale(1.1)
.right_radius
border-top-right-radius: 8px
border-bottom-right-radius: 8px
if hexo-config('index_post_cover') == 'both'
.left_radius
border-radius: 8px 0 0 8px
.post_cover
width: 45%
height: 280px
overflow: hidden
.right_radius
order: 2
border-radius: 0 8px 8px 0
else if hexo-config('index_post_cover') == 'left'
.left_radius
border-radius: 8px 0 0 8px
.post_bg
border: 0
transition: all .6s
display: block
width: 100%
height: 100%
padding: 0
margin: 0
object-fit: cover
.right_radius
border-radius: 8px 0 0 8px
else if hexo-config('index_post_cover') == 'right'
.left_radius
order: 2
border-radius: 0 8px 8px 0
&:hover
transform:scale(1.1)
.recent-post-info
padding: 50px 40px
display: inline-block
width: 55%
overflow hidden
.right_radius
order: 2
border-radius: 0 8px 8px 0
.post_cover
overflow: hidden
width: 45%
height: 280px
a.article-meta__categories
text-decoration: none
color: #858585
img.post_bg
display: block
margin: 0
padding: 0
width: 100%
height: 100%
border: 0
transition: all .6s
object-fit: cover
&:hover
color: #49b1f5 !important
&:hover
transform: scale(1.1)
.content
display: -webkit-box
-webkit-line-clamp: 3
-webkit-box-orient: vertical
overflow: hidden
height: 90px
margin-top: 0.5rem
word-break: break-word
& >.recent-post-info
display: inline-block
overflow: hidden
padding: 0 40px
width: 55%
.article-meta
color: $grey
& > .article-title
display: -webkit-box
overflow: hidden
margin-bottom: .3rem
color: $black
text-decoration: none
text-overflow: ellipsis
word-wrap: break-word
font-size: 1.2rem
line-height: 1.4
transition: all .2s ease-in-out
-webkit-box-orient: vertical
-webkit-line-clamp: 2
.sticky
color: $theme-button-hover-color
&:hover
color: $light-blue !important
i
margin: 0 0.2rem 0 0.3rem
& > time
color: $grey
&__separator
margin-left: 0.3rem
& > .article-meta
color: $grey
.fa-angle-right,
&__link
margin: 0 0 0 0.3rem
.sticky
color: $theme-button-hover-color
time
color: $grey
i
margin: 0 .2rem 0 .3rem
.article-title
margin-bottom: 0.3rem
color: $black
text-decoration: none
font-size: 1.2rem
cursor: pointer
transition: all 0.2s ease-in-out
line-height: 1.4
text-overflow: ellipsis
display: -webkit-box
-webkit-box-orient: vertical
-webkit-line-clamp: 2
overflow: hidden
word-wrap: break-word
.article-meta__separator
margin-left: .3rem
&:hover
color: $light-blue !important
.fa-angle-right
margin: 0 0 0 .3rem
a.article-meta__categories
color: #858585
text-decoration: none
&:hover
color: #49b1f5 !important
& > .content
display: -webkit-box
overflow: hidden
margin-top: .5rem
height: 90px
word-break: break-word
-webkit-line-clamp: 3
-webkit-box-orient: vertical
// tags page
.tag-cloud
padding: 40px 44px 44px
a
display: inline-block
margin: 0 0.4rem
padding: 0 .4rem
text-decoration: none
cursor: pointer
transition: all .3s
@@ -126,8 +138,8 @@
transform: scale(1.1)
&__title
font-size: 1.8rem
text-align: center
font-size: 1.8rem
&-tags
text-align: center
@@ -135,14 +147,14 @@
#tag,
#category,
#archive
padding: 3rem 3rem 3rem
padding: 3rem
.tag-cloud,
#page,
.category-content,
.flink
padding: 40px 44px 44px
#page,
.category-content,
#archive,
@@ -150,16 +162,15 @@
.flink,
#tag,
#category
box-shadow: 0 4px 8px 6px rgba(7,17,27,.06)
border-radius: 8px
transition: all .3s
background: #fff
margin-top: 20px
width: 75%
border-radius: 8px
background: $white
box-shadow: 0 4px 8px 6px rgba(7, 17, 27, .06)
transition: all .3s
&:hover
box-shadow: 0 4px 12px 12px rgba(7,17,27,0.15)
box-shadow: 0 4px 12px 12px rgba(7, 17, 27, .15)
.article-sort
padding-left: 1rem
@@ -178,50 +189,50 @@
&:before
position: absolute
top: 0.25rem
left: calc(-0.5rem + 1px)
top: .25rem
left: calc(-.5rem + 1px)
z-index: 1
width: w = 0.5rem
width: w = .5rem
height: h = w
border: 0.5 * w solid $light-blue
border: .5 * w solid $light-blue
border-radius: w
background: $white
content: ""
content: ''
line-height: h
transition: all 0.2s ease-in-out
transition: all .2s ease-in-out
&:after
position: absolute
bottom: 0
left: 0
z-index: 0
width: 0.1rem
width: .1rem
height: 1.3rem
background: $pale-blue
content: ""
content: ''
&-item
position: relative
margin: 0 0 1rem 0.5rem
transition: all 0.2s ease-in-out
margin: 0 0 1rem .5rem
transition: all .2s ease-in-out
&:hover
&:before
border-color: $ruby
&:before
$w = 0.3rem
$w = .3rem
position: absolute
top: 1.8rem
left: calc(-1rem - 17px)
width: w = $w
height: h = w
border: 0.5 * w solid $light-blue
border: .5 * w solid $light-blue
border-radius: w
background: $white
content: ""
content: ''
line-height: h
transition: all 0.2s ease-in-out
transition: all .2s ease-in-out
&.year
font-size: 1rem
@@ -231,36 +242,36 @@
border-color: $light-blue
&:before
top: 0.7rem
top: .7rem
border-color: $ruby
&__time
padding-left: .4rem
color: $a-link-color
font-size: 0.7rem
padding-left: 0.4rem
font-size: .7rem
&__title
color: $font-black
font-size: 0.75rem
height: 60px
overflow: hidden
display: -webkit-box
overflow: hidden
height: 60px
color: $font-black
font-size: .75rem
transition: all .3s
-webkit-line-clamp: 2
-webkit-box-orient: vertical
transition: all .3s
&:hover
color: $light-blue
transform: translateX(20px)
&__img
img
height: 100%
width: 100%
object-fit: cover
padding: 0
width: 100%
height: 100%
transition: all .6s
object-fit: cover
&:hover
transform: scale(1.1)
@@ -272,17 +283,16 @@
color: $a-link-color
&-img
height: 80px
width: 80px
display: inline-block
overflow: hidden
&-post
display: inline-block
top: 0
position: absolute
margin-left: 1rem
width: 80px
height: 80px
&-post
position: absolute
top: 0
display: inline-block
margin-left: 1rem
.category-lists
padding: 1rem 0 1.5rem
@@ -298,19 +308,19 @@
cursor: pointer
.category-list-count
margin-left: 0.4rem
margin-left: .4rem
color: $a-link-color
&:before
content: "("
content: '('
&:after
content: ")"
content: ')'
@media screen and (max-width: $sm)
.layout_page
padding: 0 5px !important
#page,
.category-content,
#archive,
@@ -318,39 +328,55 @@
.flink,
#tag,
#category
padding: 1.8rem 1.3rem
margin: 0
padding: 1.8rem 1.3rem
.category-lists
padding: 0
#recent-posts
#recent-posts
.recent-post-item
flex-direction: column
height: auto !important
.post_cover
width: 100%
height: 230px
.post_cover
order: 1 !important
width: 100%
height: 230px
border-radius: 8px 8px 0 0
.recent-post-info
padding: 30px 25px 18px!important
.recent-post-info
order: 2 !important
padding: 30px 25px 18px !important
width: 100%
.article-title
font-size: 1rem
.article-meta.tags
display: none
&:first-child
margin: 0
@media screen and (min-width: 900px)
if hexo-config("aside.position") == "left"
#recent-posts,#page,.category-content,#archive,.tag-cloud,.flink,#tag,#category
@media screen and (min-width: 900px)
if hexo-config('aside.position') == 'left'
#recent-posts,
#page,
.category-content,
#archive,
.tag-cloud,
.flink,
#tag,
#category
order: 2
@media screen and (max-width: 900px)
#page,.category-content,#archive,.tag-cloud,.flink,#tag,#category
width: 100% !important
@media screen and (max-width: 900px)
#page,
.category-content,
#archive,
.tag-cloud,
.flink,
#tag,
#category
width: 100% !important

95
source/css/_layout/pagination.styl
View File

@@ -5,12 +5,13 @@
.pagination
text-align: center
.space
color: $a-link-color
.page-number
display: inline-block
margin: 0 0.2rem
margin: 0 .2rem
min-width: w = 1.2rem
height: w
text-align: center
@@ -25,90 +26,76 @@
img.prev_cover,
img.next_cover
position: absolute
padding: 0
top: 0
left: 0
padding: 0
width: 100%
height: 100%
opacity: .4
background-size: cover
transition: all 0.6s;
object-fit: cover
opacity: .4
transition: all .6s
pointer-events: none
object-fit: cover
.prev_info
position: absolute
z-index: 100
font-weight: 400
width: 70%
color: #fff
overflow: hidden
white-space: nowrap
-o-text-overflow: ellipsis
text-overflow: ellipsis
display: block
bottom: 50px
.prev_info,
.next_info
position: absolute
z-index: 100
font-weight: 400
width: 70%
color: #fff
overflow: hidden
white-space: nowrap
-o-text-overflow: ellipsis
text-overflow: ellipsis
display: block
right: 40px
bottom: 50px
z-index: 100
display: block
overflow: hidden
width: 70%
color: $white
text-overflow: ellipsis
white-space: nowrap
font-weight: 400
.next_info
right: 40px
text-align: right
.pull-full
width: 100% !important
.prev-post .label
position: absolute
top: 50px
z-index: 100
font-size: 13px
display: block
text-transform: uppercase
color: rgba(255,255,255,.7)
.prev-post .label,
.next-post .label
position: absolute
top: 50px
right: 40px
z-index: 100
display: block
color: alpha($white, .9)
text-transform: uppercase
color: rgba(255,255,255,.7)
font-size: 90%
.prev-post, .next-post
width: 50%
.next-post .label
right: 40px
.prev-post,
.next-post
float: left
width: 50%
a
width: 100%
height: 150px
padding: 55px 40px
text-align: left
position: relative
display: block
float: left
overflow: hidden
padding: 55px 40px
width: 100%
height: 150px
text-align: left
&:hover
img.prev_cover, img.next_cover
img.prev_cover,
img.next_cover
opacity: .8
transform:scale(1.1)
transform: scale(1.1)
@media screen and (max-width:768px)
.prev-post, .next-post
width: 100% !important
.pagination_post
&.pagination_post
margin: 2rem 0 !important
background: #000
background: $dark-black
@media screen and (max-width: 768px)
.prev-post,
.next-post
width: 100% !important

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

@@ -1,119 +1,81 @@
if hexo-config("post_beautify.enable")
if hexo-config('post_beautify.enable')
headStyle(fontsize)
padding-left: unit(fontsize + 0.3, "rem")
code
font-size: unit(fontsize, "rem")
padding-left: unit(fontsize + .3, 'rem')
code
font-size: unit(fontsize, 'rem')
&:before
top: calc(50% - unit(fontsize / 2 - 0.05, "rem"))
font-size: unit(fontsize, "rem")
top: calc(50% - unit(fontsize / 2 - .05, 'rem'))
font-size: unit(fontsize, 'rem')
&:hover
padding-left: unit(fontsize + 0.2, "rem")
#post-title
font-size: 1.4rem
#post
overflow: hidden
&-meta
text-shadow: 0.1rem 0.1rem 0.2rem rgba(0, 0, 0, 0.15)
#post-meta
color: $grey
a
text-decoration: none
i.fa.fa-comment-o
margin-right: 0.2rem
padding-left: unit(fontsize + .2, 'rem')
#top-container
position: relative
margin-bottom: 1rem
height: 19rem
background-color: $light-blue
background-attachment: local
background-position: center
background-size: cover
height: 19rem
&:before
position: absolute
top: 0
left: 0
display: block
content: ''
width: 100%
height: 100%
background-color: alpha($dark-black,0.5)
background-color: alpha($dark-black, .5)
content: ''
a
color: $light-grey
text-decoration: none
transition: all 0.3s ease-out
transition: all .3s ease-out
&:hover
color: $white
text-decoration: underline
#top-img
padding: 0
border: none
#site-name
font-weight: bold
cursor: pointer
#post-info
& > #post-info
position: absolute
bottom: 1.5rem
padding: 0 8%
width: 100%
color: $light-grey
text-align: left
padding: 0 8%
position: absolute
bottom: 1.5rem
#post-title
text-shadow: 0.1rem 0.1rem 0.2rem rgba(0, 0, 0, 0.15)
font-size: 1.5rem
margin-bottom: 0.4rem
#post-title
margin-bottom: .4rem
font-size: 1.5rem
.posttitle
line-height: 1.5
.posttitle
display: -webkit-box
overflow: hidden
line-height: 1.5
-webkit-line-clamp: 3
-webkit-box-orient: vertical
i.fa.fa-angle-right
margin: 0 0.3rem 0 0.2rem
#post-meta
.word-count,
#busuanzi_value_page_pv,
.comment-count
padding-left: .2rem
.post-meta
&__separator
margin: 0 0.3rem
.post-meta
&__separator
margin: 0 .3rem
&__icon
margin-right: 0.2rem
&__tags
display: inline-block
width: fit-content
margin: 0.4rem 0.4rem 0.4rem 0
padding: 0rem 0.6rem
border: 1px solid $light-blue
border-radius: 0.6rem
background: $white
color: $light-blue
text-decoration: none
font-size: 12px
cursor: pointer
transition: all 0.2s ease-in-out
&:hover
background: $light-blue
color: $white
&__icon
margin-right: .2rem
&-pv-cv
display: inline-block
#post-content
if hexo-config("post_beautify.enable")
if hexo-config('post_beautify.enable')
h1,
h2,
h3,
@@ -121,17 +83,17 @@ if hexo-config("post_beautify.enable")
h5,
h6
cursor: pointer
transition: all 0.2s ease-out
transition: all .2s ease-out
&:before
position: absolute
top: calc(50% - 0.35rem)
top: calc(50% - .35rem)
left: 0
color: $title-prefix-icon-color
content: $title-prefix-icon
font: normal normal normal 14px / 1 FontAwesome
font-size: 0.8rem
transition: all 0.2s ease-out
font-size: .8rem
transition: all .2s ease-out
&:hover
padding-left: 1.1rem
@@ -143,38 +105,38 @@ if hexo-config("post_beautify.enable")
headStyle(1)
h2
headStyle(0.9)
headStyle(.9)
h3
headStyle(0.8)
headStyle(.8)
h4
headStyle(0.7)
headStyle(.7)
h5
headStyle(0.6)
headStyle(.6)
h6
headStyle(0.6)
headStyle(.6)
ol,
ul
margin-top: 0.4rem
padding: 0 0 0 0.8rem
margin-top: .4rem
padding: 0 0 0 .8rem
list-style: none
counter-reset: li
p
margin: 0
margin: 0 0 .5rem
ol,
ul
padding-left: 0.5rem
padding-left: .5rem
li
position: relative
margin: 0.2rem 0
padding: 0.1rem 0.5rem 0.1rem 1.5rem
margin: .2rem 0
padding: .1rem .5rem .1rem 1.5rem
&:hover
&:before
@@ -187,19 +149,19 @@ if hexo-config("post_beautify.enable")
background: $light-blue
color: $white
cursor: pointer
transition: all 0.3s ease-out
transition: all .3s ease-out
ol
> li
&:before
margin-top: 0.2rem
margin-top: .2rem
width: w = 1.2rem
height: h = w
border-radius: 0.5 * w
border-radius: .5 * w
content: counter(li)
counter-increment: li
text-align: center
font-size: 0.6rem
font-size: .6rem
line-height: h
ul
@@ -209,38 +171,37 @@ if hexo-config("post_beautify.enable")
border-color: $ruby
&:before
$w = 0.3rem
$w = .3rem
top: 10px
margin-left: 0.45rem
margin-left: .45rem
width: w = $w
height: h = w
border: 0.5 * w solid $light-blue
border: .5 * w solid $light-blue
border-radius: w
background: $white
content: ""
content: ''
line-height: h
else
ol,
ul
margin-top: 0.4rem
margin-top: .4rem
counter-reset: li
p
margin: 0
margin: 0 0 .5rem
ol,
ul
padding-left: 0.5rem
padding-left: .5rem
li
position: relative
margin: 0.3rem 0
padding-left: 0.3rem
margin: .3rem 0
padding-left: .3rem
a
color: $a-link-color
transition: all 0.2s
transition: all .2s
&:hover
color: $light-blue
@@ -260,206 +221,209 @@ a.fancybox
text-align: center
text-decoration: none
p
margin: 0 0 .8rem
img
padding: $img-border-padding
max-width: 100%
transition: all 0.2s
transition: all .2s
&:hover
box-shadow: 0 0 8px 0 rgba(232, 237, 250, 0.6), 0 2px 4px 0 rgba(232, 237, 250, 0.5)
.code-area-wrap
position: relative
.fa-clipboard
position: absolute
top: 0.4rem
right: 10px
z-index: 1
color: $highlight-aqua
cursor: pointer
transition: color 0.2s
&:hover
color: darken($highlight-aqua, 20%)
.code_lang
position: absolute
font-weight: bold;
font-size: 0.8rem;
line-height: 1.4rem;
color: $highlight-foreground
left: 30px
z-index: 1
cursor: pointer
.code-expand
position: absolute
top: 0
color: $highlight-foreground
padding: 7px 10px
z-index: 1
cursor: pointer
transition: all .3s
transform: rotate(0deg)
.code-closed
transform: rotate(-90deg) !important
transition: all .3s
.copy-notice
position: absolute
top: 0
right: 0
z-index: 1
background: darken($highlight-background, 5)
color: $highlight-aqua
opacity: 0
.post-copyright
position: relative
margin: 1rem 0 0.5rem 0
padding: 0.5rem 0.8rem
border: 1px solid $light-grey
transition: box-shadow 0.3s ease-in-out
&:before
// highlight
.highlight-tools
.code-expand
position: absolute
top: t = 0.5rem
right: t
width: w = 0.8rem
height: w
border-radius: w
background: $light-blue
content: ""
top: 0
z-index: 1
padding: 7px 10px
color: $highlight-foreground
cursor: pointer
transition: all .3s
transform: rotate(0)
&:after
& + .code_lang
left: 30px
&.code-closed
transition: all .3s
transform: rotate(-90deg) !important
.code_lang
position: absolute
top: t = 0.7rem
right: t
width: w = 0.4rem
height: w
border-radius: w
background: $white
content: ""
&:hover
box-shadow: 0 0 8px 0 rgba(232, 237, 250, 0.6), 0 2px 4px 0 rgba(232, 237, 250, 0.5)
&-meta
color: $light-blue
left: 15px
z-index: 1
color: $highlight-foreground
text-transform: capitalize
font-weight: bold
font-size: .8rem
line-height: 1.4rem
cursor: pointer
&-info
a
word-break: break-word
.copy-notice
position: absolute
top: 0
right: 0
z-index: 1
background: darken($highlight-background, 5)
color: $highlight-aqua
opacity: 0
.fa-clipboard
position: absolute
top: .4rem
right: 10px
z-index: 1
color: $highlight-aqua
cursor: pointer
transition: color .2s
@media screen and (max-width: $sm)
#top-container
#post-title
font-size: 1rem
#post-title
font-size: 1.1rem
&:hover
color: darken($highlight-aqua, 20%)
@media screen and (min-width: $md)
.layout_post
width: $content-large-width
.katex-wrap
overflow: auto
if hexo-config("katex") && hexo-config("katex.hide_scrollbar")
if hexo-config('katex') && hexo-config('katex.hide_scrollbar')
&::-webkit-scrollbar
display: none
// 文章字體
#post-content p
font-size: 1.1em
#post-content ol,
#post-content ul
font-size: 1em
.layout_post
padding: 50px
box-shadow: 0 4px 8px 6px rgba(7,17,27,0.06)
border-radius: 8px
transition: all 0.3s
background: #fff
.layout_post
margin: 40px auto
padding: 50px
max-width: 1000px
border-radius: 8px
background: #fff
box-shadow: 0 4px 8px 6px rgba(7, 17, 27, .06)
transition: all .3s
&:hover
box-shadow: 0 4px 12px 12px rgba(7, 17, 27, .15)
&:hover
box-shadow: 0 4px 12px 12px rgba(7,17,27,0.15)
img
display:block
.tag_share
display: block
.post-meta__tag-list
display: inline-block
& >.tag_share
.post-meta
&__tag-list
display: inline-block
&__tags
display: inline-block
margin: .4rem .4rem .4rem 0
padding: 0 .6rem
width: fit-content
border: 1px solid $light-blue
border-radius: .6rem
background: $white
color: $light-blue
text-decoration: none
font-size: 12px
cursor: pointer
transition: all .2s ease-in-out
&:hover
background: $light-blue
color: $white
.post_share
width: fit-content;
display: inline-block;
float: right;
margin: 0.4rem 0
display: inline-block
float: right
margin: .4rem 0
width: fit-content
.social-share
font-size: 12px
.social-share .social-share-icon
width: 26px;
height: 26px;
font-size: 15px;
line-height: 25px;
.social-share-icon
margin: 0 4px
width: 26px
height: 26px
font-size: 15px
line-height: 25px
.social-share a
margin: 0 4px;
& > .post-copyright
position: relative
margin: 2rem 0 .5rem
padding: .5rem .8rem
border: 1px solid $light-grey
transition: box-shadow .3s ease-in-out
&:before
position: absolute
top: t = .5rem
right: t
width: w = .8rem
height: w
border-radius: w
background: $light-blue
content: ''
&:after
position: absolute
top: t = .7rem
right: t
width: w = .4rem
height: w
border-radius: w
background: $white
content: ''
&:hover
box-shadow: 0 0 8px 0 rgba(232, 237, 250, .6), 0 2px 4px 0 rgba(232, 237, 250, .5)
.post-copyright
&-meta
color: $light-blue
font-weight: bold
&-info
padding-left: .3rem
a
word-break: break-word
#post
a
text-decoration: none
color: $light-blue
h1,
h2,
h3,
h4,
h5,
h6
margin: 1rem 0 0.8rem 0
text-decoration: none
&:hover
text-decoration: underline
img
margin: 0 auto 0.8rem
blockquote,
p
margin: 0 0 0.8rem 0
iframe,.note
margin: 0 0 0.8rem 0
.layout_post,
.layout_page
opacity: 1
margin: .8rem auto
@media screen and (max-width: 1024px)
.layout_post
margin: 0 15px
width: auto
@media screen and (max-width:768px)
@media screen and (max-width: $sm)
.layout_post
margin: 0 5px
padding: 1.8rem 1rem
margin: 0px 5px
#top-container
height: 18rem
& > #post-info
bottom: 1rem
padding: 0 5%
& > #post-title
font-size: 1.2rem
& > #post-meta
font-size: 90%
& > span
display: none
.post-meta-pv-cv
display: block
.post-meta__separator:first-child
display: none

124
source/css/_layout/readmode.styl
View File

@@ -1,117 +1,93 @@
if hexo-config("readmode") && hexo-config("readmode.enable")
if hexo-config('readmode') && hexo-config('readmode.enable')
.read-mode
background: $pale-yellow
padding: 0 !important
#sidebar,
#toggle-sidebar
display: none
background: $pale-yellow
#page-header
#site-name,
.site-page,
.toggle-menu
text-shadow: none
.site-page
color: $font-black
.menus_item_child
background-color: darken($pale-yellow,5) !important
text-shadow: none
&:before
border-color: transparent transparent darken($pale-yellow,5) !important
.menus_item_child
background-color: darken($pale-yellow, 3) !important
& > li
&:hover
background-color: darken($pale-yellow, 10) !important
#top-container
background-image: none !important
height: 14rem
background-color: $pale-yellow
background-image: none !important
a
color: $font-black
&:before
opacity: 0
#post-info
text-align: center
& > #post-info
padding: 0
color: $font-black
#post-title,
#post-meta
text-shadow: none
text-align: center
#page-header
&.fixed
background: alpha(darken($pale-yellow,5),0.5)
background: alpha(darken($pale-yellow, 5), .5)
box-shadow: none
&.open-sidebar
.site-page
display: inline-block
opacity: 1
visibility: visible
.layout_post
box-shadow: none
background: $pale-yellow
box-shadow: none
&:hover
box-shadow: none
.article-container
.article-container
pre,
.highlight
background: darken($pale-yellow,5);
.highlight
&:after
background: darken($pale-yellow,10);
table
&:after
background: darken($pale-yellow,10);
.highlight:not(.js-file-line-container)
background: darken($pale-yellow, 5)
.highlight
display: block !important
blockquote
border-left: 0.2rem solid #d6dbdf
background-color: rgba(102,128,153,.05)
border-left: .2rem solid #d6dbdf
background-color: rgba(102, 128, 153, .05)
#rightside
#darkmode
display: none
canvas
& > canvas
display: none !important
.code-area-wrap > .highlight-tools,
#sidebar,
#toggle-sidebar,
#footer,
#post-comment,
hr,
.relatedPosts,
#pagination,
.post-reward,
.tag_share,
.post-copyright
.layout_post > div,
.layout_post > hr,
.layout_post > nav
display: none
hr
border: 2px dashed #d6dbdf
background: transparent
&:before
color: darken(#d6dbdf, 10)
&::-webkit-scrollbar-thumb
background: darken($pale-yellow,15)
background: darken($pale-yellow, 10)
*::-webkit-scrollbar-thumb
background: darken($pale-yellow,15)
.copy-notice
background: darken($pale-yellow,10)
background: darken($pale-yellow, 10)
#web_bg
background: none

111
source/css/_layout/relatedposts.styl
View File

@@ -1,75 +1,74 @@
.relatedPosts
margin: 0 auto
padding: 0
margin-top: 1rem
width: 100%
margin: 0 auto
margin-top: 1rem
padding: 0
width: 100%
.relatedPosts_item
width: calc(100%/3 - 10px)
height: 200px
overflow: hidden
float: left
position: relative
margin: 5px
background: #000
.relatedPosts_item
position: relative
float: left
overflow: hidden
margin: 5px
width: calc(100% / 3 - 10px)
height: 200px
background: $dark-black
&:hover
.relatedPosts_cover
opacity: .8
transform:scale(1.1)
&:hover
.relatedPosts_cover
opacity: .8
transform: scale(1.1)
a
text-decoration: none
.relatedPosts_cover
border: 0
transition: all 0.6s
.relatedPosts_cover
position: absolute
display: block
margin: 0
padding: 0
width: 100%
height: 100%
border: 0
opacity: .4
transition: all .6s
object-fit: cover
.relatedPosts_main
position: relative
display: flex
flex-direction: column
justify-content: center
margin: 0
padding: 0 1rem
height: 100%
color: $white
.relatedPosts_date
display: block
width: 100%
height: 100%
padding: 0
opacity: 0.4
margin: 0
object-fit: cover
color: alpha($white, .9)
font-size: 90%
.relatedPosts_title
color: #fff
position: absolute
left: 0
right: 0
top: 45%
height: 60px
padding: 0 30px
display: -webkit-box
overflow: hidden
max-height: 60px
-webkit-line-clamp: 2
-webkit-box-orient: vertical
overflow: hidden
max-width: 100%
width: 100%
margin: 0 auto
text-align: center
.relatedPosts_headline
font-size: 20px
font-weight: 700
margin-bottom: 5px
.relatedPosts_headline
margin-bottom: 5px
font-weight: 700
font-size: 20px
.clear_both
clear: both
.clear_both
clear: both
@media screen and (max-width:768px)
@media screen and (max-width: 768px)
.relatedPosts_item
width: calc(100%/2 - 4px)
height: 150px
margin: 2px
.relatedPosts_title
top: 40%
width: calc(100% / 2 - 4px)
height: 150px
@media screen and (max-width:480px)
@media screen and (max-width: 480px)
.relatedPosts_item
width: calc(100% - 4px)
height: 150px
margin: 2px
.relatedPosts_title
top: 40%

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

@@ -1,72 +1,74 @@
.post-reward
position: relative
width: 100%
margin: 75px auto 0
width: 100%
text-align: center
display: block
.reward-button
text-align: center
position: relative
z-index: 1
display: inline-block
cursor: pointer
color: #fff
line-height: 36px
width: 100px
background: $light-blue
width: 80px
color: $white
text-align: center
line-height: 36px
cursor: pointer
&:hover
background: darken($light-blue,30)
.reward-main
display: block
.reward-main
position: absolute
bottom: 40px
left: 0
display: none
margin: 0
padding: 0 0 15px
width: 100%
left: 0
transition: all 0.6s
display: none
opacity: 1
transition: all .6s
.reward-all
margin: 0 auto
padding: 20px 10px 8px
background: #f5f5f5
display: inline-block
margin: 0 0 0 -110px
padding: 20px 10px 8px
width: 320px
border-radius: 4px
cursor: auto
background: #f5f5f5
&:before
position: absolute
bottom: -10px
left: 0
width: 100%
height: 20px
content: ''
&:after
content: ""
width: 0
height: 0
border-left: 13px solid transparent
border-right: 13px solid transparent
border-top: 13px solid #f5f5f5
position: absolute
right: 0
bottom: 2px
left: 0
right: 0
margin: 0 auto
width: 0
height: 0
border-top: 13px solid #f5f5f5
border-right: 13px solid transparent
border-left: 13px solid transparent
content: ''
.reward-item
list-style-type: none
padding: 0 8px
display: inline-block
padding: 0 8px
list-style-type: none
img
width: 130px
max-width: 130px
border-radius: 3px
position: relative
max-width: 130px
width: 130px
border-radius: 3px
.post-qr-code__desc
text-align: center
margin: -10px 0
margin: -5px 0
color: #858585
text-align: center

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

@@ -1,63 +1,61 @@
#rightside
right: -38px
#rightside
position: fixed
right: -38px
bottom: 40px
transition: all .3s
opacity 0
opacity: 0
transition: all .5s
#rightside-config-hide
display none
transform: translate(35px, 0)
#readmode,
#font_plus,
#font_minus,
#to_comment,
.darkmode,
#mobile-toc-button,
#go-up,
#rightside_config
width: 30px
height: 30px
background-color: $light-blue
color: $white
text-align: center
line-height: 29px
font-size: 16px
display: block
margin-bottom: 2px
cursor: pointer
text-decoration: none
.rightside-in
transform: translate(0, 0) !important
animation: rightsideIn .3s
.rightside-out
animation: rightsideOut .3s
& > div
& > i,
& > a,
& > div
display: block
margin-bottom: 2px
width: 30px
height: 30px
background-color: $light-blue
color: $white
text-align: center
text-decoration: none
font-size: 16px
line-height: 29px
cursor: pointer
&:hover
background-color: $ruby
&:hover
background-color: $ruby
#rightside_config
i
animation: avatar_turn_around 2s linear infinite
.translate_chn_to_cht
width: 30px
height: 30px
background-color: $light-blue
color: $white
text-align: center
line-height: 29px
font-size: 16px
display: block
margin-bottom: 2px
cursor: pointer
text-decoration: none
&:hover
background-color: $ruby
#mobile-toc-button
display: none
@media screen and (max-width: $bg)
#rightside
#rightside
#mobile-toc-button
display: block
@keyframes rightsideIn
0%
transform: translate(30px, 0)
100%
transform: translate(0, 0)
@keyframes rightsideOut
0%
transform: translate(0, 0)
100%
transform: translate(30px, 0)

34
source/css/_layout/sidebar.styl
View File

@@ -4,35 +4,34 @@
left: -300px
z-index: 10
overflow-y: auto
padding: 1rem 0 2rem 0.5rem
padding: 1rem 0 2rem .5rem
width: $sidebar-width
height: 100%
background: $sidebar-background
box-shadow: -0.25rem 0 0.25rem rgba(232, 237, 250, 0.6) inset
opacity: 0.9
will-change: transform
transition: ease-in-out .2s
box-shadow: -.25rem 0 .25rem rgba(232, 237, 250, .6) inset
opacity: .9
transition: ease-in-out .4s
.sidebar-toc
ol,
li
list-style: none
ol
margin-top: 0.2rem
padding-left: 0.4rem
margin-top: .2rem
padding-left: .4rem
&__title
padding-right: 0.5rem
padding-right: .5rem
text-align: center
font-size: unit(0.9 * $rem, "px")
font-size: unit(.9 * $rem, 'px')
.toc-link
display: block
padding-left: 0.2rem
padding-left: .2rem
border-right: 3px solid transparent
text-decoration: none
transition: all 0.2s ease-in-out
transition: all .2s ease-in-out
&.active
border-right-color: darken($cyan, 20%)
@@ -41,21 +40,18 @@
&__progress
position: relative
margin-top: -0.3rem
padding-left: 0.6rem
margin-top: -.3rem
padding-left: .6rem
color: $cyan
.progress-notice
margin-right: 0.4rem
margin-right: .4rem
.progress-num
display: inline-block
min-width: 0.9rem
min-width: .9rem
&-bar
width: 0
height: 1px
background: $cyan

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)