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

Breaking Change

Browse Source 
1. 不再支持hexo 4.0.0以下版本
2. 添加hexo fragment_cache,加快生成速度
3. 完善V5圖標顯示，不再需要同時加載V4和v5圖標
4. 去除cheerio依賴
5. 整合豆瓣配置，增加配置遊戲，圖書頁面top_img,可設置是否設置meta,解決部分瀏覽器無法顯示圖片問題
6. 友情鏈接除列表外可自定義內容
7. 可設置主頁標題距離頂部距離
8. 側邊欄可隱藏,可設置手機頁面是否隱藏
9. 增加disqusjs和utterances 兩個評論
10. 主頁文章增加tags和更新日期顯示，可以配置post_meta
11. 首頁subtitle可關閉打字效果，可設置打字效果顯示一次或loop
12. 增加valine和gitalk的配置
13. darkmode配置整理
14. 增加404頁面
15. post_beautify改為beautify，頁面美化不再只限於post頁，page頁也一樣
16. 可設置是否顯示cover，可設置各位置的cover顯示
17. 增加mermaid,可畫流程圖、狀態圖、時序圖、甘特圖等等
18. 增加pangu配置，中英文之間添加空格
19. 整合部分配置
20. post-copyright增加decode網址 (可以顯示中文)
21. 增加部分顏色配置
Feature
1. 適配IE
2. 增加一個Tag Plugins: 圖庫集
3. 增加一個Tag Plugins: tag-hide 功能 inline/block
4. 去除page頁開頭顯示與標題一樣的內容
5. aside 公告欄設置，支持html代碼
6. 手機界面sidebar顯示進度條和加深對應的標題
7. 主頁subtitle 的 hitokoto 顯示內容出處
9. footer 的hexo鏈接改為https
10. 修改手機下，menus和toc的打開效果
11. 手機頁面下，搜索界面全屏顯示
12. SEO優化，標題欄改為h1顯示
13. 閲讀模式優化，可根據light mode 和darkmode調整背景
14. 當屏蔽js時，header會出現（之前用js控制，會隱藏）
Fixed
1. 修復Tencent Analytics的script加載為https #105
2. 修復相關文章，日期顯示錯誤bug
3. 修復gitalk報錯問題
4. 修復當valine background 是絕對地址時無法顯示的bug
5. 修復medium-zoom 無法使用的bug
6. 修復在safari下，點擊或移動到首頁文章cover，圓角變成正方形的bug #114
7. 修復在部分瀏覽器下，aside,友情鏈接頭像轉動變形的bug
8. 修復在寬度限制下，表格內容溢出屏幕外而出現滾動條的bug \#138
9. 修復gitalk js 在一些沒有設置評論的page里加載的bug
10. 修復tag plugins 的gist 在不同主題下的背景顏色問題（黑色主題下，文字不易觀看）
11. 修復highlight figcaption 顯示不全的bug
12. 修復disqus評論數無法獲取的bug
13. 修復子目錄在觸摸屏下點擊,偶爾不出現的bug
14. 修復a標籤太長（連續英文字母）不會換行的bug
15. 修復toc滾動時，閲讀進度條也跟著滾動的bug
16. 修復aside的圖片，可點擊顯示大圖bug
17. 修復activate-power-mode設置參數無效bug
18. 修復語言上的錯誤 \#156
19. 修復主頁在safari桌面端，首頁滾動卡頓的bug
This commit is contained in:
Jerry
2020-03-17 21:28:27 +08:00
Unverified
parent 9c996d0a73
commit 321091befb
125 changed files with 3824 additions and 2684 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -5,11 +5,12 @@ html
body
position: relative
min-height: 100%
background: $white
background: $body-bg
color: $font-black
font-size: $font-size
font-family: $font-family
line-height: $text-line-height
-webkit-tap-highlight-color: rgba(0, 0, 0, 0)
if !hexo-config('copy.enable')
user-select: none
@@ -17,13 +18,6 @@ body
-webkit-user-select: none
-ms-user-select: none
#body-wrap
position: relative
display: flex
flex: 1 auto
flex-direction: column
transition: all .5s
*::-webkit-scrollbar
width: 8px
height: 8px
@@ -59,9 +53,6 @@ h6
code
font-size: inherit !important
#content-outer
flex: 1 auto
*
box-sizing: border-box
@@ -79,8 +70,7 @@ hr
position: relative
margin: 2rem auto
width: calc(100% - 4px)
border: 2px dashed $pale-blue
background: $white
border: 2px dashed lighten($theme-hr-color, 50%)
&:hover
&:before
@@ -91,54 +81,51 @@ hr
top: $hr-icon-top
left: 5%
z-index: 1
color: $light-blue
color: $theme-hr-color
content: $hr-icon
font: normal normal normal 14px / 1 FontAwesome
font-style: normal
font-variant: normal
font-size: 20px
line-height: 1
transition: all 1s ease-in-out
text-rendering: auto
-webkit-font-smoothing: antialiased
if hexo-config('fontawesome_v5') && hexo-config('fontawesome_v5.enable')
font-weight: 600
font-family: 'Font Awesome 5 Free'
else
font-weight: normal
font-family: FontAwesome
iframe
margin: 0 0 1rem
// collapse/expand beautify
details
padding: .3rem
border: 2px solid darken($light-grey, 10%)
summary
color: $theme-color
// set <caption> of <figure> to center-align
// use class="not-code" to avoid conflicts because code also use <figure> tag
.not-code
margin: .5em
padding: .5em
border: thin silver solid
text-align: center
table
display: block
overflow: auto
margin: 0 0 1rem
width: 100%
border-spacing: 0
border-collapse: collapse
empty-cells: show
thead
background: alpha($a-link-color, 10%)
background: alpha($table-thead-bg, 10%)
th,
td
padding: .3rem .6rem
border: 1px solid darken($light-grey, 10%)
vertical-align: top
vertical-align: middle
*::selection
background: $selection
color: $pale-grey
background: $theme-text-selection-color
color: #F7F7F7
// 字體
.full_page #site-title,
.full_page #site-sub-title,
// font
#nav #site_title,
#nav #site_subtitle,
#site-name,
#aside_content .author-info__name,
#aside_content .author-info__description
@@ -170,7 +157,7 @@ table
// button hover
.button--primary
color: $ruby
color: $theme-button-hover-color
.button--animated
transition-duration: 1s
@@ -183,7 +170,7 @@ table
bottom: 0
left: 0
z-index: -1
background: $ruby
background: $theme-button-hover-color
content: ''
transition-timing-function: ease-out
transition-duration: .5s
@@ -196,37 +183,10 @@ table
transition-timing-function: cubic-bezier(.45, 1.64, .47, .66)
transform: scaleX(1)
// third-party
.fireworks
position: fixed
z-index: -1
z-index: 99999
pointer-events: none
img[src=''],
img:not([src])
opacity: 0
.justified-gallery
margin: 1rem 0
img
opacity: 0
.fancybox
width: auto
text-align: inherit
.img-alt
display: none
.medium-zoom-image--opened
z-index: 99999 !important
margin: 0 !important
.medium-zoom-overlay
z-index: 99999 !important
// hexo tag video
.video-container
position: relative
@@ -243,16 +203,51 @@ img:not([src])
width: 100%
height: 100%
.layout_page,
.layout_post,
// 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
font-size: 20px
#content-inner,
#footer
animation: main 1s
#nav,
#top-container
animation: header 1s
#nav
animation: nav-effect 1s
#site-title
#page-header
animation: header-effect 1s
#site_title,
#site_subtitle
animation: titlescale 1s
canvas,
@@ -266,13 +261,33 @@ canvas,
.scroll-down-effects
animation: scroll-down-effect 1.5s infinite
if hexo-config('avatar_effect') == true
if hexo-config('avatar.effect') == true
.avatar-img
animation: avatar_turn_around 2s linear infinite
.reward-main
animation: donate_effcet .3s .1s ease both
.tocOpenPc
.sidebar-toc__title
animation: tocsidebarLtoR .5s
.sidebar-toc__progress
animation: tocsidebarLtoR .7s
.sidebar-toc__content
animation: tocsidebarLtoR .9s
.tocOpenMobile
.sidebar-toc__title
animation: tocsidebarRtoL .5s
.sidebar-toc__progress
animation: tocsidebarRtoL .5s
.sidebar-toc__content
animation: tocsidebarRtoL .7s
@keyframes scroll-down-effect
0%
top: 0
@@ -286,7 +301,7 @@ if hexo-config('avatar_effect') == true
top: 0
opacity: .4
@keyframes header
@keyframes nav-effect
0%
opacity: 0
transform: translateY(-50px)
@@ -295,6 +310,18 @@ if hexo-config('avatar_effect') == true
opacity: 1
transform: translateY(0)
@keyframes header-effect
0%
opacity: 0
50%
opacity: 0
transform: translateY(-50px)
100%
opacity: 1
transform: translateY(0)
@keyframes headerNoOpacity
0%
transform: translateY(-50px)
@@ -369,10 +396,23 @@ if hexo-config('avatar_effect') == true
50%
transform: scale(1.2)
@media screen and (max-width: $bg)
i#toggle-sidebar,
#sidebar
display: none
@keyframes sidebarItem
0%
transform: translateX(200px)
body
padding-left: 0 !important
100%
transform: translateX(0)
@keyframes tocsidebarRtoL
0%
transform: translateX(200px)
100%
transform: translateX(0)
@keyframes tocsidebarLtoR
0%
transform: translateX(-200px)
100%
transform: translateX(0)

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

@@ -10,7 +10,6 @@ $code-block
padding: 0
background: $highlight-background
color: $highlight-foreground
font-size: $code-font-size
line-height: $line-height-code-block
if wordWrap
@@ -28,7 +27,7 @@ blockquote
margin: 0 0 1rem
padding: .1rem .8rem
border-left: .2rem solid $blockquote-padding-color
background-color: lighten($blockquote-padding-color, 33)
background-color: $blockquote-background-color
color: $blockquote-color
a
@@ -46,7 +45,7 @@ blockquote
padding: 0 .3em
content: '—'
.article-container
#article-container
pre,
code
font-family: $code-font !important
@@ -56,7 +55,8 @@ blockquote
background: $code-background
color: $code-foreground
word-wrap: break-word
font-size: $code-font-size
word-break: break-word
overflow-wrap: break-word
pre
@extend $code-block
@@ -68,7 +68,7 @@ blockquote
color: $highlight-foreground
text-shadow: none
.highlight
figure.highlight
@extend $code-block
position: relative
border-radius: 1px
@@ -101,6 +101,7 @@ blockquote
table
position: relative
display: table
margin: 0
width: auto
border: none
@@ -111,23 +112,11 @@ blockquote
figcaption
clearfix()
position: absolute
z-index: 1
margin-bottom: 1em
padding: .2rem 0 .2rem .7rem
width: 100%
height: 1.4em
padding: .3rem 0 .1rem .7rem
color: $highlight-foreground
font-size: 1em
line-height: 1em
span
float: left
overflow: hidden
max-width: 100%
text-overflow: ellipsis
white-space: nowrap
a
float: right
padding-right: 10px
@@ -136,15 +125,6 @@ blockquote
&:hover
border-bottom-color: $highlight-foreground
&+table
margin-top: 1.1rem
&:before
margin-top: -2.1rem
&:after
top: -2.1rem
.gutter pre
padding-right: .5rem
padding-left: .5rem
@@ -285,14 +265,12 @@ blockquote
.highlight-tools
position: relative
overflow: hidden
width: 100%
height: 1.4rem
background: darken($highlight-background, 5)
color: $highlight-foreground
font-size: 14px
& + figure
margin: 0 !important
.highlight-close
height: 0 !important

44
source/css/_layout/404.styl Normal file
View File

@@ -0,0 +1,44 @@
if hexo-config('error_404.enable')
#nav.error-no-found
display: flex
flex-direction: column
justify-content: center
height: 100vh
&:before
width: 100%
height: 100%
background-color: alpha($dark-black, .5)
content: ''
#error_info
position: absolute
padding: 0 4rem
width: 100%
letter-spacing: 3px
line-height: 1
#error_title,
#error_subtitle
margin: 0
padding: 0
color: $light-grey
letter-spacing: 5px
font-family: $site-name-font
#error_title
font-size: 10rem
#error_subtitle
font-size: 2rem
@media screen and (max-width: $sm)
#nav.error-no-found
#error_info
padding: 0 2rem
#error_title
font-size: 7rem !important
#error_subtitle
font-size: 1rem !important

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

@@ -1,11 +1,13 @@
#aside_content
width: 25%
.card-widget:not(:first-child)
margin-top: 1rem
.card-widget
overflow: hidden
margin-top: 20px
border-radius: 8px
background: $white
background: $card-bg
box-shadow: 0 4px 8px 6px rgba(7, 17, 27, .06)
transition: all .3s
@@ -15,11 +17,9 @@
.card-info
img
display: inline-block
padding: 5px
width: 120px
height: 120px
width: 110px
height: 110px
border-radius: 70px
vertical-align: top
transition: all .3s
&:hover
@@ -34,21 +34,18 @@
margin-top: -.3rem
.card-info-data
display: flex
padding: .7rem 0
& > .card-info-data-item
flex: 1 1
min-width: 0
display: inline-block
width: 33.3%
a
text-decoration: none
.headline
display: block
overflow: hidden
color: $font-black
text-transform: uppercase
// text-transform: uppercase
text-overflow: ellipsis
white-space: nowrap
font-size: .7rem
@@ -77,8 +74,7 @@
z-index: 1
display: block
background-color: $light-blue
color: $white
text-decoration: none
color: $button-color
text-transform: uppercase
line-height: 1.6rem
@@ -96,7 +92,6 @@
.card-tag-cloud
a
text-decoration: none
word-break: keep-all
&:hover
@@ -111,7 +106,6 @@
& > a
color: $font-black
text-decoration: none
.aside-post-cover
float: left
@@ -134,7 +128,7 @@
.aside-post-title
.aside-post_meta
padding-left: 10px
color: $theme-link-color
color: $theme-meta-color
font-size: .6rem
.aside-post_title
@@ -149,6 +143,10 @@
&:hover
color: $light-blue !important
&.no-aside-cover
.aside-post_title
height: auto
.card-archives ul.archive-list,
.card-categories ul.aside-category-item
margin: 0
@@ -164,19 +162,23 @@
&:hover
padding: .2rem .85rem
background-color: $light-blue
color: #363636
a
display: flex
color: $font-black
text-decoration: none
span
display: inline-block
overflow: hidden
vertical-align: bottom
text-overflow: ellipsis
white-space: nowrap
&:first-child
flex: auto
overflow: hidden
text-overflow: ellipsis
white-space: nowrap
width: 80%
&:last-child
width: 20%
text-align: right
.card-categories
.aside-category-item
@@ -211,6 +213,10 @@
#aside_content
width: 100% !important
#aside_content
.card-widget:first-child
margin-top: 1rem
@media screen and (min-width: 900px)
#aside_content
.card-widget
@@ -219,7 +225,7 @@
else
margin-right: 15px
if hexo-config('aside_mobile') == false
if hexo-config('aside.mobile') == false
@media screen and (max-width: $sm)
#aside_content
display: none

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

@@ -27,7 +27,7 @@
top: 0
left: 0
background: $light-blue
color: $white
color: $card-bg
cursor: pointer
transition: all .3s ease-out
@@ -48,7 +48,7 @@
li
&:hover
&:before
border-color: $ruby
border-color: $theme-button-hover-color
&:before
$w = .3rem
@@ -58,6 +58,6 @@
height: h = w
border: .5 * w solid $light-blue
border-radius: w
background: $white
background: transparent
content: ''
line-height: h

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

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

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

@@ -1,11 +1,9 @@
.flink
.flink#article-container
.post-cards
margin: -10px 10px 0
.md-links
overflow: auto
margin: 0 auto
padding: 0
text-align: center
& > .md-links-item
@@ -13,11 +11,9 @@
float: left
overflow: hidden
margin: 20px 7px
padding: 0
width: calc(100% / 3 - 14px)
width: calc(100% / 3 - 15px)
height: 90px
border-radius: 8px
list-style: none
line-height: 17px
transform: perspective(1px) translateZ(0)
@@ -45,15 +41,14 @@
transform: scale(1)
a
color: #333
color: $font-color
text-decoration: none
img
float: left
margin: 11px 10px
padding: 4px
width: 70px
height: 70px
margin: 13px 0 0 10px
width: 65px
height: 65px
border-radius: 35px
transition: all .3s
@@ -74,18 +69,14 @@
white-space: nowrap
font-size: 13px
.comment-word
font-weight: bold
font-size: 1.7em
@media screen and (max-width: 1100px)
.flink
.md-links
.md-links-item
width: calc(50% - 14px) !important
width: calc(50% - 15px) !important
@media screen and (max-width: 600px)
.flink
.md-links
.md-links-item
width: calc(100% - 14px) !important
width: calc(100% - 15px) !important

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

@@ -1,6 +1,5 @@
#footer
position: relative
margin-top: 1rem
background: $light-blue
background-attachment: local
background-position: bottom
@@ -9,10 +8,8 @@
if hexo-config('footer_bg') != false
&:before
position: absolute
top: 0
right: 0
bottom: 0
left: 0
width: 100%
height: 100%
background-color: alpha($dark-black, .5)
content: ''
@@ -24,11 +21,11 @@
a
color: $light-grey
text-decoration: none
cursor: pointer
&:hover
color: $white
color: $theme-color
text-decoration: underline
.footer-separator
margin: 0 .2rem

109
source/css/_layout/gallery.styl Normal file
View File

@@ -0,0 +1,109 @@
figure.gallery-group
position: relative
float: left
overflow: hidden
margin: .3rem .2rem
width: calc(50% - .4rem)
height: 250px
border-radius: 8px
background: $dark-black
-webkit-transform: translate3d(0, 0, 0)
&:hover
img
opacity: .4
transform: translate3d(0, 0, 0)
.gallery-group-name::after
transform: translate3d(0, 0, 0)
p
opacity: 1
transform: translate3d(0, 0, 0)
img
position: relative
margin: 0 !important
max-width: none
width: calc(100% + 20px)
height: 250px
backface-visibility: hidden
opacity: .8
transition: opacity .35s, transform .35s
transform: translate3d(-10px, 0, 0)
object-fit: cover
figcaption
position: absolute
top: 0
left: 0
padding: 1.5rem
width: 100%
height: 100%
color: $gallery-color
text-transform: uppercase
backface-visibility: hidden
& > a
position: absolute
top: 0
right: 0
bottom: 0
left: 0
z-index: 1000
opacity: 0
p
display: -webkit-box
overflow: hidden
margin: 0
padding: .4rem 0 0
letter-spacing: 1px
font-size: .8rem
line-height: 1.5
opacity: 0
transition: opacity .35s, transform .35s
transform: translate3d(100%, 0, 0)
-webkit-line-clamp: 4
-webkit-box-orient: vertical
.gallery-group-name
position: relative
display: -webkit-box
overflow: hidden
margin: 0
padding: .4rem 0
font-weight: bold
font-size: 1.2rem
line-height: 1.5
-webkit-line-clamp: 2
-webkit-box-orient: vertical
&:after
position: absolute
bottom: 0
left: 0
width: 100%
height: 2px
background: $gallery-color
content: ''
transition: transform .35s
transform: translate3d(-100%, 0, 0)
.gallery-group-main
overflow: auto
padding: 0 0 .8rem
.justified-gallery
margin: 0 0 .8rem
img
opacity: 0
.fancybox
width: auto
text-align: inherit
@media screen and (max-width: 600px)
figure.gallery-group
width: calc(100% - .4rem)

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

@@ -1,21 +1,39 @@
#nav
position: relative
margin-bottom: 1rem
width: 100%
background-color: $light-blue
background-attachment: local
background-position: center
background-position: center center
background-size: cover
background-repeat: no-repeat
transition: all .5s
// index
&.full_page
display: flex
align-items: center
height: $index_top_img_height
&.not_index_bg
height: 20rem
#site-info
position: absolute
top: $index_site_info_top
padding: 0 .5rem
width: 100%
#site-social-icons
#site_title,
#site_subtitle,
#scroll_down .scroll-down-effects
color: $light-grey
text-align: center
text-shadow: .1rem .1rem .2rem rgba(0, 0, 0, .15)
line-height: 1.5
#site_title
margin: 0
font-size: 1.3rem
#site_subtitle
font-size: .8rem
#site_social_icons
display: none
margin: 0 auto
width: 15rem
@@ -28,47 +46,83 @@
font-size: .9rem
cursor: pointer
&:hover
color: $white
#site-info
position: absolute
width: 100%
#site-title,
#site-sub-title
color: $light-grey
text-align: center
text-shadow: .1rem .1rem .2rem rgba(0, 0, 0, .15)
line-height: 1.5
#site-title
font-weight: bold
font-size: 1.3rem
#site-sub-title
font-size: .8rem
#page_site-info
position: absolute
top: 10rem
width: 100%
.scroll-down
position: absolute
bottom: 0
width: 100%
height: 42px
text-align: center
font-size: 30px
cursor: pointer
.scroll-down-effects
#scroll_down
position: absolute
color: $white
bottom: 0
width: 100%
cursor: pointer
header
position: relative
.scroll-down-effects
position: relative
width: 100%
font-size: 30px
// page
&.not-index-bg
height: 20rem
#page_site-info
position: absolute
top: 10rem
padding: 0 .5rem
width: 100%
// post
&.post-bg
height: 20rem
&:before
position: absolute
top: 0
left: 0
display: block
width: 100%
height: 100%
background-color: alpha($dark-black, .5)
content: ''
#post-info
position: absolute
bottom: 1.5rem
padding: 0 8%
width: 100%
color: $light-grey
text-align: left
#post-title
margin-bottom: .4rem
font-size: 1.5rem
.posttitle
display: -webkit-box
overflow: hidden
line-height: 1.5
-webkit-line-clamp: 3
-webkit-box-orient: vertical
#post-meta
.word-count,
#busuanzi_value_page_pv,
.comment-count
padding-left: .2rem
.post-meta
&__separator
margin: 0 .3rem
&__icon
margin-right: .2rem
&-pv-cv
display: inline-block
a
color: $light-grey
transition: all .3s ease-out
&:hover
color: $light-blue
text-decoration: underline
#page-header
position: absolute
@@ -79,7 +133,6 @@ header
height: 58px
border: none
font-size: 18px
opacity: 0
transition: all .5s
.toggle-menu
@@ -95,7 +148,6 @@ header
a
color: $light-grey
text-decoration: none
&:hover
color: $white
@@ -109,13 +161,14 @@ header
transition: transform .2s ease-in-out, opacity .2s ease-in-out
&.open-sidebar
.site-page
visibility: hidden
.menus,
#search_button
display: none
a,
#site-name,
.toggle-menu
color: $light-black
color: $font-black
text-shadow: none
&:hover
@@ -129,7 +182,7 @@ header
background-color: $white !important
#site-name
text-shadow: .1rem .1rem .2rem rgba(0, 0, 0, .15)
text-shadow: .1rem .1rem .2rem rgba($dark-black, .15)
font-weight: bold
cursor: pointer
@@ -163,7 +216,7 @@ header
transition: all .3s ease-in-out
&:hover
&::after
&:after
width: 100%
.menus_item_child
@@ -174,7 +227,7 @@ header
padding: 0
width: max-content
background-color: alpha($white, .8)
box-shadow: 0 5px 20px -4px rgba(0, 0, 0, .5)
box-shadow: 0 5px 20px -4px rgba($dark-black, .5)
animation: sub_menus .3s .1s ease both
&:before
@@ -194,7 +247,7 @@ header
background: $theme-color
a
color: #3b3a3a
color: $font-black
text-shadow: none
#search_button
@@ -203,34 +256,50 @@ header
.site-page
position: relative
padding-bottom: .3rem
text-shadow: .05rem .05rem .1rem rgba(0, 0, 0, .3)
text-shadow: .05rem .05rem .1rem rgba($dark-black, .3)
font-size: .7rem
cursor: pointer
@media screen and (min-width: $sm)
#site-title
font-size: 2rem
#nav
#site_title
font-size: 2rem
#site-sub-title
font-size: 1.2rem
#site_subtitle
font-size: 1.2rem
@media screen and (max-width: $sm)
#page-header
padding: 10px .8rem
#nav
#site-social-icons
#site_social_icons
display: block
&.not_index_bg
&.not-index-bg
height: 14rem
#page_site-info
top: 7rem
@media screen and (max-width: $bg)
#page-header
&.fixed
&.open-sidebar
.site-page
visibility: visible
&.post-bg
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

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

@@ -7,23 +7,21 @@
left: 0
z-index: 102
display: none
background: alpha($dark-black, .7)
background: alpha($dark-black, .8)
#mobile-sidebar-menus,
#mobile-sidebar-toc
#mobile-sidebar-menus
position: fixed
top: 0
right: -254px
right: -250px
z-index: 103
display: block
overflow: hidden
overflow-y: scroll
width: 250px
height: 100%
background: $white
box-shadow: 0 0 4px alpha($dark-black, .27)
background: #f6f8fa
transition: all .5s
#mobile-sidebar-menus
& > .mobile_author_icon
padding: 1.3rem 1.5rem 0
text-align: center
@@ -31,33 +29,33 @@
img
display: inline-block
padding: 0
width: 120px
height: 120px
width: 110px
height: 110px
border-radius: 70px
vertical-align: top
transition: all .3s
.mobile_post_data
display: flex
justify-content: center
padding: .6rem .5rem 0
.mobile_data_item
flex: 1
display: inline-block
width: 33.3%
.mobile_data_link
a
text-decoration: none
.mobile_data_link
& > a > div
overflow: hidden
text-overflow: ellipsis
white-space: nowrap
.length_num
color: $dark-black
font-size: .9rem
.length_num
color: $dark-black
font-size: .9rem
.headline
display: block
color: $font-black
text-transform: uppercase
font-size: .7rem
.headline
display: block
color: $font-black
// text-transform: uppercase
font-size: .7rem
hr
margin: 1rem auto
@@ -74,7 +72,6 @@
margin: 0
padding: .3rem 1.5rem
color: $font-black
text-decoration: none
text-overflow: ellipsis
text-shadow: none
white-space: nowrap
@@ -106,25 +103,4 @@
.menus_item_child
margin: 0
list-style: none
#mobile-sidebar-toc
padding: 1rem .5rem 5rem .3rem
ol,
li
margin: 0
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
list-style: none

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

@@ -57,7 +57,12 @@
top: 13px
left: 15px
font-size: larger
font-family: 'FontAwesome'
if hexo-config('fontawesome_v5') && hexo-config('fontawesome_v5.enable')
font-weight: 600
font-family: 'Font Awesome 5 Free'
else
font-family: 'FontAwesome'
&.default
if ($note-style == 'flat')

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

@@ -2,22 +2,24 @@
display: flex
align-items: flex-start
margin: 0 auto
padding: 0 15px
padding: 2rem 15px
max-width: 1200px
// index
#recent-posts
width: 75%
& > .recent-post-item:not(:first-child)
margin-top: 1rem
& > .recent-post-item
display: flex
flex-direction: row
align-items: center
margin-top: 20px
padding: 0
height: 280px
border-radius: 8px
background: #fff
background: $card-bg
box-shadow: 0 4px 8px 6px rgba(7, 17, 27, .06)
transition: all .3s
@@ -27,20 +29,20 @@
img.post_bg
transform: scale(1.1)
if hexo-config('index_post_cover') == 'both'
if hexo-config('cover.position') == 'both'
.left_radius
border-radius: 8px 0 0 8px
.right_radius
order: 2
border-radius: 0 8px 8px 0
else if hexo-config('index_post_cover') == 'left'
else if hexo-config('cover.position') == 'left'
.left_radius
border-radius: 8px 0 0 8px
.right_radius
border-radius: 8px 0 0 8px
else if hexo-config('index_post_cover') == 'right'
else if hexo-config('cover.position') == 'right'
.left_radius
order: 2
border-radius: 0 8px 8px 0
@@ -53,6 +55,7 @@
overflow: hidden
width: 45%
height: 280px
-webkit-mask-image: -webkit-radial-gradient(white, black)
img.post_bg
display: block
@@ -73,12 +76,14 @@
padding: 0 40px
width: 55%
&.no-cover
width: 100%
& > .article-title
display: -webkit-box
overflow: hidden
margin-bottom: .3rem
color: $black
text-decoration: none
color: $font-black
text-overflow: ellipsis
word-wrap: break-word
font-size: 1.2rem
@@ -90,36 +95,41 @@
&:hover
color: $light-blue !important
& > time
color: $grey
& > .article-meta-wrap
font-size: 95%
& > .article-meta
color: $grey
& > time
color: $theme-meta-color
& > .article-meta
color: $theme-meta-color
.sticky
color: $theme-button-hover-color
color: $sticky-color
i
margin: 0 .2rem 0 .3rem
margin: 0 .2rem 0 0
.article-meta__separator
margin-left: .3rem
.article-meta__separator,
.article-meta__link
margin: 0 .3rem
.fa-angle-right
margin: 0 0 0 .3rem
margin: 0 .3rem
a.article-meta__categories
color: #858585
text-decoration: none
a.article-meta__categories,
a.article-meta__tags
color: $theme-meta-color
&:hover
color: #49b1f5 !important
color: $light-blue !important
text-decoration: underline
& > .content
display: -webkit-box
overflow: hidden
margin-top: .5rem
height: 90px
margin-top: .3rem
height: 85px
word-break: break-word
-webkit-line-clamp: 3
-webkit-box-orient: vertical
@@ -129,12 +139,11 @@
a
display: inline-block
padding: 0 .4rem
text-decoration: none
cursor: pointer
transition: all .3s
&:hover
color: $ruby !important
color: $theme-button-hover-color !important
transform: scale(1.1)
&__title
@@ -144,40 +153,29 @@
&-tags
text-align: center
#tag,
#category,
#archive
padding: 3rem
.tag-cloud,
#page,
.category-content,
.flink
padding: 40px 44px 44px
#page,
.category-content,
#archive,
.tag-cloud,
.flink,
#tag,
#category
margin-top: 20px
width: 75%
.layout_post > #post,
.layout_page > div:first-child:not(.recent-posts)
padding: 50px 40px
border-radius: 8px
background: $white
background: $card-bg
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)
.layout_page
& > div:first-child:not(.recent-posts)
width: 75%
.article-sort
margin-left: .5rem
padding-left: 1rem
border-left: 2px solid $pale-blue
border-left: 2px solid lighten($light-blue, 20)
&-title
position: relative
margin-left: .5rem
padding-bottom: 1.2rem
padding-left: 1rem
font-size: 1.2rem
@@ -185,7 +183,7 @@
&:hover
&:before
border-color: $ruby
border-color: $theme-button-hover-color
&:before
position: absolute
@@ -196,7 +194,7 @@
height: h = w
border: .5 * w solid $light-blue
border-radius: w
background: $white
background: $card-bg
content: ''
line-height: h
transition: all .2s ease-in-out
@@ -208,17 +206,19 @@
z-index: 0
width: .1rem
height: 1.3rem
background: $pale-blue
background: lighten($light-blue, 20)
content: ''
&-item
position: relative
margin: 0 0 1rem .5rem
width: 100%
height: 80px
transition: all .2s ease-in-out
&:hover
&:before
border-color: $ruby
border-color: $theme-button-hover-color
&:before
$w = .3rem
@@ -229,12 +229,22 @@
height: h = w
border: .5 * w solid $light-blue
border-radius: w
background: $white
background: $card-bg
content: ''
line-height: h
transition: all .2s ease-in-out
&.no-article-cover
display: flex
flex-direction: column
justify-content: center
.article-sort-post
padding: 0
width: 100%
&.year
height: auto
font-size: 1rem
&:hover
@@ -243,17 +253,15 @@
&:before
top: .7rem
border-color: $ruby
border-color: $theme-button-hover-color
&__time
padding-left: .4rem
color: $a-link-color
font-size: .7rem
&__title
display: -webkit-box
overflow: hidden
height: 60px
color: $font-black
font-size: .75rem
transition: all .3s
@@ -276,23 +284,21 @@
transform: scale(1.1)
&__post
text-decoration: none
cursor: pointer
color: $theme-meta-color
&:hover
color: $a-link-color
color: $theme-meta-color
&-img
display: inline-block
float: left
overflow: hidden
width: 80px
height: 80px
&-post
position: absolute
top: 0
display: inline-block
margin-left: 1rem
padding: 0 1rem
width: calc(100% - 80px)
.category-lists
padding: 1rem 0 1.5rem
@@ -304,12 +310,11 @@
.category-list
a
color: $font-black
text-decoration: none
cursor: pointer
.category-list-count
margin-left: .4rem
color: $a-link-color
color: $theme-meta-color
&:before
content: '('
@@ -317,19 +322,19 @@
&:after
content: ')'
// 隱藏aside
.hide-aside
max-width: 1000px
& > div
width: 100% !important
@media screen and (max-width: $sm)
.layout_page
padding: 0 5px !important
padding: 1rem 5px !important
#page,
.category-content,
#archive,
.tag-cloud,
.flink,
#tag,
#category
margin: 0
padding: 1.8rem 1.3rem
& > div:first-child:not(.recent-posts)
padding: 1.8rem .7rem
.category-lists
padding: 0
@@ -347,17 +352,17 @@
.recent-post-info
order: 2 !important
padding: 30px 25px 18px !important
padding: 1rem 1rem 1.5rem
width: 100%
&.no-cover
padding: 1.5rem 1rem
.article-title
font-size: 1rem
.article-meta.tags
display: none
&:first-child
margin: 0
.content
height: auto
@media screen and (min-width: 900px)
if hexo-config('aside.position') == 'left'
@@ -366,17 +371,11 @@
.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
.layout_page
& > div:first-child:not(.recent-posts)
width: 100% !important

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

@@ -6,9 +6,6 @@
.pagination
text-align: center
.space
color: $a-link-color
.page-number
display: inline-block
margin: 0 .2rem
@@ -19,71 +16,56 @@
cursor: pointer
&.current
background: $cyan
color: $white
background: $theme-paginator-color
color: $button-color
cursor: default
img.prev_cover,
img.next_cover
position: absolute
top: 0
left: 0
padding: 0
width: 100%
height: 100%
background-size: cover
opacity: .4
transition: all .6s
pointer-events: none
object-fit: cover
.pagination-info
position: absolute
top: 50%
padding: 1rem 2rem
width: 100%
transform: translate(0, -50%)
.prev_info,
.next_info
position: absolute
bottom: 50px
z-index: 100
display: block
overflow: hidden
width: 70%
color: $white
color: $button-color
text-overflow: ellipsis
white-space: nowrap
font-weight: 400
font-weight: 500
.next_info
right: 40px
text-align: right
.next-post
.pagination-info
text-align: right
.pull-full
width: 100% !important
.prev-post .label,
.next-post .label
position: absolute
top: 50px
z-index: 100
display: block
color: alpha($white, .9)
text-transform: uppercase
font-size: 90%
.next-post .label
right: 40px
.prev-post,
.next-post
float: left
width: 50%
a
position: relative
display: block
float: left
overflow: hidden
padding: 55px 40px
width: 100%
height: 150px
text-align: left
&:hover
img.prev_cover,

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

@@ -1,81 +1,18 @@
if hexo-config('post_beautify.enable')
headStyle(fontsize)
padding-left: unit(fontsize + .3, 'rem')
#article-container
if hexo-config('beautify.enable')
headStyle(fontsize)
padding-left: unit(fontsize + .4, 'rem')
code
font-size: unit(fontsize, 'rem')
code
font-size: unit(fontsize, 'rem')
&:before
top: calc(50% - unit(fontsize / 2 - .05, 'rem'))
font-size: unit(fontsize, 'rem')
&:before
margin-left: unit((-(fontsize + .2)), 'rem')
font-size: unit(fontsize, 'rem')
&:hover
padding-left: unit(fontsize + .2, 'rem')
&:hover
padding-left: unit(fontsize + .6, 'rem')
#top-container
position: relative
margin-bottom: 1rem
height: 19rem
background-color: $light-blue
background-attachment: local
background-position: center
background-size: cover
&:before
position: absolute
top: 0
left: 0
display: block
width: 100%
height: 100%
background-color: alpha($dark-black, .5)
content: ''
a
color: $light-grey
text-decoration: none
transition: all .3s ease-out
&:hover
text-decoration: underline
& > #post-info
position: absolute
bottom: 1.5rem
padding: 0 8%
width: 100%
color: $light-grey
text-align: left
#post-title
margin-bottom: .4rem
font-size: 1.5rem
.posttitle
display: -webkit-box
overflow: hidden
line-height: 1.5
-webkit-line-clamp: 3
-webkit-box-orient: vertical
#post-meta
.word-count,
#busuanzi_value_page_pv,
.comment-count
padding-left: .2rem
.post-meta
&__separator
margin: 0 .3rem
&__icon
margin-right: .2rem
&-pv-cv
display: inline-block
#post-content
if hexo-config('post_beautify.enable')
h1,
h2,
h3,
@@ -88,16 +25,23 @@ if hexo-config('post_beautify.enable')
&:before
position: absolute
top: calc(50% - .35rem)
left: 0
color: $title-prefix-icon-color
content: $title-prefix-icon
font: normal normal normal 14px / 1 FontAwesome
font-size: .8rem
font-style: normal
font-variant: normal
line-height: 1
transition: all .2s ease-out
text-rendering: auto
-webkit-font-smoothing: antialiased
if hexo-config('fontawesome_v5') && hexo-config('fontawesome_v5.enable')
font-weight: 600
font-family: 'Font Awesome 5 Free'
else
font-weight: normal
font-family: FontAwesome
&:hover
padding-left: 1.1rem
&:before
color: $light-blue
@@ -147,7 +91,7 @@ if hexo-config('post_beautify.enable')
top: 0
left: 0
background: $light-blue
color: $white
color: $card-bg
cursor: pointer
transition: all .3s ease-out
@@ -168,7 +112,7 @@ if hexo-config('post_beautify.enable')
> li
&:hover
&:before
border-color: $ruby
border-color: $theme-button-hover-color
&:before
$w = .3rem
@@ -178,7 +122,7 @@ if hexo-config('post_beautify.enable')
height: h = w
border: .5 * w solid $light-blue
border-radius: w
background: $white
background: transparent
content: ''
line-height: h
else
@@ -201,14 +145,13 @@ if hexo-config('post_beautify.enable')
a
color: $a-link-color
text-decoration: none
word-wrap: break-word
transition: all .2s
overflow-wrap: break-word
&:hover
color: $light-blue
text-decoration: none
&#site-name
text-decoration: none
a.fancybox
outline: none
@@ -219,7 +162,6 @@ a.fancybox
display: inline-block
width: 100%
text-align: center
text-decoration: none
p
margin: 0 0 .8rem
@@ -240,14 +182,14 @@ img
transition: all .3s
transform: rotate(0)
& + .code_lang
& + .code-lang
left: 30px
&.code-closed
transition: all .3s
transform: rotate(-90deg) !important
.code_lang
.code-lang
position: absolute
left: 15px
z-index: 1
@@ -279,10 +221,6 @@ img
&:hover
color: darken($highlight-aqua, 20%)
@media screen and (min-width: $md)
.layout_post
width: $content-large-width
.katex-wrap
overflow: auto
@@ -291,21 +229,14 @@ img
display: none
.layout_post
margin: 40px auto
padding: 50px
margin: 0 auto
padding: 2rem 15px
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)
img
display: block
& >.tag_share
.tag_share
.post-meta
&__tag-list
display: inline-block
@@ -317,16 +248,14 @@ img
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
color: $button-color
.post_share
display: inline-block
@@ -344,7 +273,7 @@ img
font-size: 15px
line-height: 25px
& > .post-copyright
.post-copyright
position: relative
margin: 2rem 0 .5rem
padding: .5rem .8rem
@@ -383,47 +312,29 @@ img
padding-left: .3rem
a
text-decoration: underline
word-break: break-word
#post
a
color: $light-blue
text-decoration: none
&:hover
text-decoration: none
&:hover
text-decoration: underline
#article-container
a
color: $theme-link-color
img
margin: .8rem auto
&:hover
text-decoration: underline
img
margin: 0 auto .8rem
@media screen and (max-width: 1024px)
.layout_post
margin: 0 15px
width: auto
@media screen and (max-width: $sm)
.layout_post
margin: 0 5px
padding: 1.8rem 1rem
padding: 1rem 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
& > #post
padding: 1.8rem .7rem

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

@@ -1,93 +0,0 @@
if hexo-config('readmode') && hexo-config('readmode.enable')
.read-mode
padding: 0 !important
background: $pale-yellow
#page-header
#site-name,
.site-page
color: $font-black
text-shadow: none
.menus_item_child
background-color: darken($pale-yellow, 3) !important
& > li
&:hover
background-color: darken($pale-yellow, 10) !important
#top-container
height: 14rem
background-color: $pale-yellow
background-image: none !important
a
color: $font-black
&:before
opacity: 0
& > #post-info
padding: 0
color: $font-black
text-align: center
#page-header
&.fixed
background: alpha(darken($pale-yellow, 5), .5)
box-shadow: none
&.open-sidebar
.site-page
visibility: visible
.layout_post
background: $pale-yellow
box-shadow: none
&:hover
box-shadow: none
.article-container
pre,
.highlight:not(.js-file-line-container)
background: darken($pale-yellow, 5)
.highlight
display: block !important
blockquote
border-left: .2rem solid #d6dbdf
background-color: rgba(102, 128, 153, .05)
#rightside
#darkmode
display: none
& > canvas
display: none !important
.code-area-wrap > .highlight-tools,
#sidebar,
#toggle-sidebar,
#footer,
.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, 10)
*::-webkit-scrollbar-thumb
background: darken($pale-yellow, 10)
#web_bg
background: none

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

@@ -1,74 +1,61 @@
.relatedPosts
margin: 0 auto
margin-top: 1rem
padding: 0
width: 100%
.relatedPosts_item
position: relative
float: left
overflow: hidden
margin: 5px
width: calc(100% / 3 - 10px)
height: 200px
background: $dark-black
.relatedPosts_headline
margin-bottom: 5px
font-weight: 700
font-size: 20px
&:hover
.relatedPosts_cover
opacity: .8
transform: scale(1.1)
a
text-decoration: none
.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
color: alpha($white, .9)
font-size: 90%
.relatedPosts_title
display: -webkit-box
.relatedPosts_item
position: relative
float: left
overflow: hidden
max-height: 60px
-webkit-line-clamp: 2
-webkit-box-orient: vertical
margin: 5px
width: calc(100% / 3 - 10px)
height: 200px
background: $dark-black
.relatedPosts_headline
margin-bottom: 5px
font-weight: 700
font-size: 20px
&:hover
.relatedPosts_cover
opacity: .8
transform: scale(1.1)
.clear_both
clear: both
.relatedPosts_cover
width: 100%
height: 100%
opacity: .4
transition: all .6s
object-fit: cover
.relatedPosts_main
position: absolute
top: 50%
padding: 0 1rem
width: 100%
color: $white
transform: translate(0, -50%)
.relatedPosts_date
color: $light-grey
font-size: 90%
.relatedPosts_title
display: -webkit-box
overflow: hidden
-webkit-line-clamp: 2
-webkit-box-orient: vertical
.clear_both
clear: both
@media screen and (max-width: 768px)
.relatedPosts_item
margin: 2px
width: calc(100% / 2 - 4px)
height: 150px
.relatedPosts
.relatedPosts_item
margin: 2px
width: calc(100% / 2 - 4px)
height: 150px
@media screen and (max-width: 480px)
.relatedPosts_item
width: calc(100% - 4px)
.relatedPosts
.relatedPosts_item
width: calc(100% - 4px)

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

@@ -9,7 +9,7 @@
display: inline-block
width: 100px
background: $light-blue
color: $white
color: $button-color
text-align: center
line-height: 36px
cursor: pointer
@@ -34,7 +34,7 @@
padding: 20px 10px 8px
width: 320px
border-radius: 4px
background: #f5f5f5
background: $reward-pop-up-bg
&:before
position: absolute
@@ -52,7 +52,7 @@
margin: 0 auto
width: 0
height: 0
border-top: 13px solid #f5f5f5
border-top: 13px solid $reward-pop-up-bg
border-right: 13px solid transparent
border-left: 13px solid transparent
content: ''
@@ -70,5 +70,5 @@
.post-qr-code__desc
margin: -5px 0
color: #858585
color: $reward-pop-up-color
text-align: center

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

@@ -24,15 +24,14 @@
width: 30px
height: 30px
background-color: $light-blue
color: $white
color: $button-color
text-align: center
text-decoration: none
font-size: 16px
line-height: 29px
cursor: pointer
&:hover
background-color: $ruby
background-color: $theme-button-hover-color
#rightside_config
i

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

@@ -1,16 +1,14 @@
#sidebar
position: fixed
top: 0
left: -300px
left: -($sidebar-width)
z-index: 10
overflow-y: auto
padding: 1rem 0 2rem .5rem
width: $sidebar-width
height: 100%
background: $sidebar-background
box-shadow: -.25rem 0 .25rem rgba(232, 237, 250, .6) inset
box-shadow: -.25rem 0 .25rem rgba($sidebar-background, .6) inset
opacity: .9
transition: ease-in-out .4s
.sidebar-toc
ol,
@@ -24,25 +22,29 @@
&__title
padding-right: .5rem
text-align: center
font-size: unit(.9 * $rem, 'px')
font-size: 1.3em
&__content
overflow-y: scroll
padding-bottom: 5rem
height: 90vh
.toc-link
display: block
padding-left: .2rem
border-right: 3px solid transparent
text-decoration: none
transition: all .2s ease-in-out
&.active
border-right-color: darken($cyan, 20%)
background: $cyan
color: $white
border-right-color: darken($theme-toc-color, 20%)
background: $theme-toc-color
color: $sidebar-active-color
&__progress
position: relative
margin-top: -.3rem
margin-bottom: .3rem
padding-left: .6rem
color: $cyan
color: $theme-toc-color
.progress-notice
margin-right: .4rem
@@ -54,4 +56,19 @@
&-bar
width: 0
height: 1px
background: $cyan
background: $theme-toc-color
@media screen and (max-width: $bg)
i#toggle-sidebar
display: none
#sidebar
right: -($mobile-sidebar-width)
left: auto
z-index: 103
width: $mobile-sidebar-width
opacity: 1
transition: all .4s
.toc-child
display: block !important

88
source/css/_layout/third-party.styl Normal file
View File

@@ -0,0 +1,88 @@
if hexo-config('valine.enable')
// valine
#vcomment
button
padding: .3rem 1rem
border-color: $button-color
background-color: $light-blue
color: $button-color
font-size: .7rem
&:hover
background-color: $theme-button-hover-color
textarea
if hexo-config('valine.bg')
background: url(hexo-config('valine.bg')) 100% 100% no-repeat
.info
display: none
.vimg
border: 0
&:hover
transform: rotate(540deg)
.vat
padding: 0 .8rem
border: 1px solid $light-blue
border-radius: 5px
color: $light-blue
font-size: .7125rem
&:hover
background-color: $light-blue
color: $button-color
if hexo-config('beautify.enable')
#article-container
.aplayer
ol,
ul
margin: 0
padding: 0
li
margin: 0
padding: 0 15px
&:before
content: none
// third-party
.fireworks
position: fixed
top: 0
left: 0
z-index: 999999
pointer-events: none
.medium-zoom-image--opened
z-index: 99999 !important
margin: 0 !important
.medium-zoom-overlay
z-index: 99999 !important
.mermaid
overflow: auto
margin: 0 0 1rem
background: $white
text-align: center
opacity: 0
transition: all .3s
&[data-processed]
opacity: 1
.utterances
max-width: 100%
#gitalk-container
.gt-meta
margin: 0 0 .8em
padding: .3rem 0 .8em
.has-jax
overflow: auto

82
source/css/_layout/z-darkmode.styl → source/css/_mode/darkmode.styl
View File

@@ -1,4 +1,4 @@
if hexo-config('darkmode.enable') || hexo-config('autoChangeMode') == '1' || hexo-config('autoChangeMode') == '2'
if hexo-config('darkmode.enable')
[data-theme='dark']
body
background-color: darken(#121212, 2)
@@ -20,21 +20,16 @@ if hexo-config('darkmode.enable') || hexo-config('autoChangeMode') == '1' || hex
background-color: alpha($dark-black, .7)
content: ''
#archive,
.tag-cloud,
#tag,
.category-content,
#category,
#page,
.flink,
.layout_post
background: #121212
#nav,
.layout_post > #post,
.layout_page > div:first-child:not(.recent-posts)
background-color: #121212
#sidebar
background: #121212
box-shadow: -.25rem 0 .25rem #121212
.article-container code
#article-container code
background: #2c2c2c
.recent-posts
@@ -46,7 +41,7 @@ if hexo-config('darkmode.enable') || hexo-config('autoChangeMode') == '1' || hex
#page-header
&.fixed
background: #121212
background: alpha(#121212, .8)
box-shadow: 0 5px 6px -5px rgba(133, 133, 133, 0)
.toggle-menu,
@@ -65,14 +60,14 @@ if hexo-config('darkmode.enable') || hexo-config('autoChangeMode') == '1' || hex
color: alpha(#FFFFFF, .6)
// 代碼框
.article-container pre,
.article-container pre code
#article-container pre,
#article-container pre code
background-color: lighten(#121212, 2)
.highlight-tools
background: lighten(#121212, 3)
.article-container .highlight:not(.js-file-line-container)
#article-container .highlight:not(.js-file-line-container)
background-color: lighten(#121212, 2)
.code pre,
@@ -97,9 +92,8 @@ if hexo-config('darkmode.enable') || hexo-config('autoChangeMode') == '1' || hex
&:before
color: alpha(#FFFFFF, .6)
.layout_post >.tag_share .post-meta__tags
.layout_post .tag_share .post-meta__tags
border: 1px solid alpha(#FFFFFF, .6)
background: 0
color: alpha(#FFFFFF, .6)
&:hover
@@ -118,7 +112,7 @@ if hexo-config('darkmode.enable') || hexo-config('autoChangeMode') == '1' || hex
// 音樂播放器
.aplayer
filter: brightness(.7)
color: #000000
color: $dark-black
// 右下角按鈕
#rightside
@@ -150,7 +144,7 @@ if hexo-config('darkmode.enable') || hexo-config('autoChangeMode') == '1' || hex
background-color: lighten(#121212, 10) !important
img,
iframe,
iframe:not(.utterances-frame),
.gist
filter: brightness(.7)
@@ -171,9 +165,8 @@ if hexo-config('darkmode.enable') || hexo-config('autoChangeMode') == '1' || hex
background: lighten(#121212, 20) !important
// 頭部
#nav,
#top-container
&::before
#nav
&:before
position: absolute
top: 0
right: 0
@@ -186,11 +179,11 @@ if hexo-config('darkmode.enable') || hexo-config('autoChangeMode') == '1' || hex
#nav i,
#page-header a,
#page-header .toggle-menu,
#top-container #post-meta,
#top-container a,
#post-meta,
#post-meta a,
#footer-wrap,
#footer-wrap a
color: alpha(#FFFFFF, .6)
color: alpha(#FFFFFF, .6) !important
.posttitle,
h1,
@@ -203,7 +196,7 @@ if hexo-config('darkmode.enable') || hexo-config('autoChangeMode') == '1' || hex
.recent-posts .post-meta__date,
.recent-posts .article-meta,
.recent-posts .article-meta__categories,
.recent-posts a,
.post-reward .reward-button,
.fa-clipboard,
.gutter pre,
@@ -242,12 +235,6 @@ if hexo-config('darkmode.enable') || hexo-config('autoChangeMode') == '1' || hex
a
color: alpha(#FFFFFF, .6) !important
#mobile-sidebar-toc
background: #121212
a
color: alpha(#FFFFFF, .6) !important
// note
if hexo-config('note.style') == 'modern'
.note
@@ -301,11 +288,15 @@ if hexo-config('darkmode.enable') || hexo-config('autoChangeMode') == '1' || hex
.vsys
background: rgb(97, 106, 107) !important
.vbtn
.vbtn,
.vat
border: 1px solid alpha(#FFFFFF, .6)
background: rgb(45, 48, 53) !important
background: lighten(#121212, 5) !important
color: alpha(#FFFFFF, .6) !important
&:hover
background: lighten(#121212, 20) !important
.vwrap
border: 1px solid alpha(#FFFFFF, .6)
@@ -354,3 +345,26 @@ if hexo-config('darkmode.enable') || hexo-config('autoChangeMode') == '1' || hex
#algolia-search-results
.algolia-hit-item-link
color: alpha(#FFFFFF, .6)
if hexo-config('disqusjs.enable')
#disqus_thread
#dsqjs
.dsqjs-tab-active,
.dsqjs-no-comment
color: alpha(#FFFFFF, .6)
.dsqjs-order-label
background-color: lighten(#121212, 5)
.dsqjs-post-body
color: alpha(#FFFFFF, .6)
code,
pre
background: #2c2c2c
blockquote
color: alpha(#FFFFFF, .6)
.mermaid
filter: brightness(.7)

147
source/css/_mode/readmode.styl Normal file
View File

@@ -0,0 +1,147 @@
if hexo-config('readmode') && hexo-config('readmode.enable')
[data-theme='light']
.read-mode
background: #fff
#nav.post-bg
a
color: $font-black !important
#article-container
pre,
.highlight:not(.js-file-line-container)
background: #f7f7f7 !important
code
color: #4c4948
blockquote
border-left: .2rem solid #ddd
background-color: transparent
ol,
li
&:before
background: transparent
color: #4c4948
ul
>li
&:before
border: .2rem solid #90a4ae
hr
border: 2px dashed #d6dbdf
background: transparent
&:before
color: darken(#d6dbdf, 10)
.hide-button
background: darken(#d6dbdf, 10) !important
.note
border: 2px solid #eee
border-left-color: transparent
background-color: transparent
#mobile-sidebar-menus,
#rightside i,
#rightside a,
#rightside #rightside_config
background: darken(#d6dbdf, 10) !important
[data-theme='dark']
.read-mode
background: #0d0d0d
#article-container
code
color: rgba(255, 255, 255, .6)
blockquote
border-left: .2rem solid rgba(255, 255, 255, .6)
background-color: transparent
ol,
li
&:before
background: transparent
color: rgba(255, 255, 255, .6)
ul
>li
&:before
border: .15rem solid rgba(255, 255, 255, .6)
.note
border: 2px solid rgba(255, 255, 255, .6)
border-left-color: transparent
filter: none
background-color: transparent
color: rgba(255, 255, 255, .6)
.hide-button
background: #1f1f1f !important
.read-mode
#body-wrap
padding-left: 0 !important
#nav.post-bg
background-color: transparent
background-image: none !important
a
text-shadow: none !important
&:before
opacity: 0
& > #post-info
padding: 0
color: $font-black
text-align: center
.layout_post
> #post
background: transparent
box-shadow: none
&:hover
box-shadow: none
.highlight
display: block !important
#rightside
#darkmode
display: none
& > canvas
display: none !important
.code-area-wrap > .highlight-tools,
#footer,
#post > *:not(:first-child),
#to_comment,
#sidebar,
#toggle-sidebar,
#mobile-toc-button,
#page-header
display: none !important
#web_bg
background: none
#article-container
h1,
h2,
h3,
h4,
h5,
h6
padding: 0
&:before
content: ''

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

@@ -9,8 +9,9 @@
input
padding: .25rem .7rem
outline: none
border: 2px solid $light-blue
border: 2px solid $search-color
border-radius: 2rem
background: $search-bg
font-size: 14px
.ais-hits--item.algolia-hit-item
@@ -19,7 +20,7 @@
&:hover
&:before
border-color: $ruby
border-color: $theme-button-hover-color
&:before
$w = .3rem
@@ -28,9 +29,9 @@
left: 0
width: w = $w
height: h = w
border: .5 * w solid $light-blue
border: .5 * w solid $search-color
border-radius: w
background: $white
background: transparent
content: ''
line-height: h
transition: all .2s ease-in-out
@@ -38,12 +39,11 @@
a
display: block
color: $font-black
text-decoration: none
font-size: 14px
cursor: pointer
&:hover
color: $light-blue
color: $search-color
.ais-pagination.pagination
margin: .8rem 0 0
@@ -63,9 +63,8 @@
.ais-pagination--item.current
a
background: $cyan
color: $white
text-decoration: none
background: $theme-paginator-color
color: #eee
cursor: default
.algolia-logo

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

@@ -7,26 +7,27 @@
margin-left: -15rem
padding: 1rem
width: 30rem
background: $white
background: $search-bg
hr
margin: 1rem auto
span.search-close-button
position: absolute
top: .5rem
right: .5rem
top: .8rem
right: 1rem
color: $grey
font-size: 1rem
line-height: 1
cursor: pointer
transition: color .2s ease-in-out
&:hover
color: $light-blue
color: $search-color
&__title
padding: 0 0 .7rem
color: $light-blue
color: $search-color
font-size: 1rem
line-height: 1
@@ -38,9 +39,15 @@
left: 0
z-index: 1000
display: none
background: rgba(0, 0, 0, .6)
background: rgba($dark-black, .6)
@media screen and (max-width: $sm)
.search-dialog
margin-left: -45%
width: 90%
top: 0
left: 0
margin: 0
width: 100%
height: 100%
.search-result-list
max-height: 100% !important

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

@@ -10,9 +10,11 @@
padding: .25rem .7rem
width: 100%
outline: none
border: 2px solid $light-blue
border: 2px solid $search-color
border-radius: 2rem
background: $search-bg
font-size: 14px
-webkit-appearance: none
.local-search__hit-item
position: relative
@@ -20,7 +22,7 @@
&:hover
&:before
border-color: $ruby
border-color: $theme-button-hover-color
&:before
$w = .3rem
@@ -29,9 +31,9 @@
left: 0
width: w = $w
height: h = w
border: .5 * w solid $light-blue
border: .5 * w solid $search-color
border-radius: w
background: $white
background: transparent
content: ''
line-height: h
transition: all .2s ease-in-out
@@ -39,12 +41,11 @@
a
display: block
color: $font-black
text-decoration: none
font-size: 14px
cursor: pointer
&:hover
color: $light-blue
color: $search-color
.local-search-stats__hr
display: none !important

1
source/css/_third-party/jquery.fancybox.min.css vendored
View File

File diff suppressed because one or more lines are too long

1
source/css/index.styl
View File

@@ -5,6 +5,7 @@
@import '_global'
@import '_highlight/highlight'
@import '_layout/*'
@import '_mode/*'
// search
if hexo-config('algolia_search.enable')

276
source/css/var.styl
View File

@@ -1,184 +1,144 @@
// Theme Global Color
$theme-color = #49B1F5
$theme-paginator-color = #00c4b6
$theme-button-hover-color = #FF7242
$theme-text-selection-color = #00c4b6
$theme-meta-color = #858585
$theme-link-color = #99a9bf
$theme-hr-color = #A4D8FA
$theme-read-mode-bg-color = #FAF9DE
$inline-code-color = #F47466
$font-family= Lato, Helvetica Neue For Number, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, PingFang SC, Hiragino Sans GB, "Microsoft YaHei", Helvetica Neue, Helvetica, Arial, sans-serif
$code-font = consolas, Menlo, "PingFang SC", "Microsoft YaHei", monospace, Helvetica Neue For Number
$site-name-font = "Titillium Web", Lato,PingFang SC, Hiragino Sans GB, "Microsoft JhengHei", "Microsoft YaHei", Helvetica Neue, Helvetica, Arial, sans-serif
//hr icon
$hr-icon = '\f0c4'
$hr-icon-top = -10px
$title-prefix-icon = '\f0c1'
$title-prefix-icon-color = #F47466
// color
$bright-blue = #49B1F5
$strong-cyan = #00c4b6
$light-orange = #FF7242
$light-red = #F47466
if hexo-config("theme_color") && hexo-config("theme_color.enable")
$theme-color = convert(hexo-config("theme_color.main")) || #49B1F5
$theme-paginator-color = convert(hexo-config("theme_color.paginator")) || #00c4b6
$theme-button-hover-color = convert(hexo-config("theme_color.button_hover")) || #FF7242
$theme-text-selection-color = convert(hexo-config("theme_color.text_selection")) || #00c4b6
$theme-link-color = convert(hexo-config("theme_color.link_color")) || #99a9bf
$theme-meta-color = convert(hexo-config("theme_color.meta_color")) || #858585
$theme-hr-color = convert(hexo-config("theme_color.hr_color")) || #A4D8FA
$theme-read-mode-bg-color = convert(hexo-config("theme_color.read-mode-bg_color")) || #FAF9DE
$inline-code-color = convert(hexo-config("theme_color.inline-code-color")) || #F47466
$themeColorEnable = hexo-config('theme_color') && hexo-config('theme_color.enable')
$theme-color = $themeColorEnable ? convert(hexo-config('theme_color.main')) : $bright-blue
$theme-paginator-color = $themeColorEnable ? convert(hexo-config('theme_color.paginator')) : $strong-cyan
$theme-button-hover-color = $themeColorEnable ? convert(hexo-config('theme_color.button_hover')) : $light-orange
$theme-text-selection-color = $themeColorEnable ? convert(hexo-config('theme_color.text_selection')) : $strong-cyan
$theme-link-color = $themeColorEnable ? convert(hexo-config('theme_color.link_color')) : $bright-blue
$theme-hr-color = $themeColorEnable ? convert(hexo-config('theme_color.hr_color')) : $bright-blue
$code-foreground = $themeColorEnable ? convert(hexo-config('theme_color.code_foreground')) : $light-red
$code-background = $themeColorEnable ? convert(hexo-config('theme_color.code_background')) : rgba(27, 31, 35, .05)
$theme-toc-color = $themeColorEnable ? convert(hexo-config('theme_color.toc_color')) : $strong-cyan
if hexo-config("font") && hexo-config("font.enable")
$font-family = convert(hexo-config("font.font-family")) || 'Lato, Helvetica Neue For Number, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, PingFang SC, Hiragino Sans GB, "Microsoft YaHei", Helvetica Neue, Helvetica, Arial, sans-serif'
$code-font = convert(hexo-config("font.code-font")) || 'consolas, Menlo, "PingFang SC", "Microsoft YaHei", monospace, Helvetica Neue For Number'
// font
$fontEnable = hexo-config('font') && hexo-config('font.enable')
$font-family = $fontEnable ? convert(hexo-config('font.font-family')) : Lato, Helvetica Neue For Number, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, PingFang SC, Hiragino Sans GB, "Microsoft YaHei", Helvetica Neue, Helvetica, Arial, sans-serif
$code-font = $fontEnable ? convert(hexo-config('font.code-font')) : consolas, Menlo, "PingFang SC", "Microsoft YaHei", monospace, Helvetica Neue For Number
$site-name-font = convert(hexo-config('blog_title_font.font-family')) || '"Titillium Web",Lato,PingFang SC, Hiragino Sans GB, "Microsoft JhengHei", "Microsoft YaHei", Helvetica Neue, Helvetica, Arial, sans-serif'
if hexo-config("blog_title_font.font-family")
$site-name-font = convert(hexo-config("blog_title_font.font-family")) || '"Titillium Web",Lato,PingFang SC, Hiragino Sans GB, "Microsoft JhengHei", "Microsoft YaHei", Helvetica Neue, Helvetica, Arial, sans-serif'
if hexo-config("hr") && hexo-config("hr.enable")
$hr-icon = hexo-config("hr.icon") || '\f0c4'
$hr-icon-top = convert(hexo-config("hr.icon-top")) || -10px
if hexo-config("post_beautify.enable")
$title-prefix-icon = hexo-config("post_beautify.title-prefix-icon") || '\f0c1'
$title-prefix-icon-color= convert(hexo-config("post_beautify.title-prefix-icon-color")) || #F47466
//hr
$hrEnable = hexo-config('hr') && hexo-config('hr.enable')
$hr-icon = $hrEnable ? hexo-config('hr.icon') : '\f0c4'
$hr-icon-top = $hrEnable ? convert(hexo-config('hr.icon-top')) : -10px
//page beatutify
$beautifyEnable = hexo-config('beautify.enable')
$title-prefix-icon = $beautifyEnable ? hexo-config('beautify.title-prefix-icon') : '\f0c1'
$title-prefix-icon-color = $beautifyEnable ? convert(hexo-config('beautify.title-prefix-icon-color')) : $light-red
// Global Variables
$font-size = 14px
$font-color = #1F2D3D
$button-color = #fff
$rem = 20px
$font-family = $font-family
$code-font = $code-font
$site-name-font = $site-name-font
$text-line-height = 2
$sm = 768px
$bg = 1024px
$md = 1300px
$lg = 1450px
$web-bg = convert(hexo-config('background'))
$index_top_img_height = convert(hexo-config('index_top_img_height')) || 100vh
$index_site_info_top = convert(hexo-config('index_site_info_top')) || 43%
// Global color & SVG
$light-blue = $theme-color
$dark-black = #000000
$light-grey = #EEEEEE
$grey = #858585
$white = #FFFFFF
$whitesmoke = #f5f5f5
$font-black = #4C4948
$card-bg = $white
// code
$code-font-family = $font-family
$line-height-code-block = 20px
$blockquote-color = #6a737d
$blockquote-padding-color = $themeColorEnable ? convert(hexo-config('theme_color.blockquote_padding_color')) : #49B1F5
$blockquote-background-color = $themeColorEnable ? alpha(convert(hexo-config('theme_color.blockquote_background_color')),.1) : alpha($blockquote-padding-color,.1)
// page
$body-bg = #fff
$a-link-color = #99a9bf
$sticky-color = $light-orange
$theme-meta-color = $themeColorEnable ? convert(hexo-config('theme_color.meta_color')) : #858585
// sidebar
$sidebar-icon-top = 20px
$sidebar-icon-left = $sidebar-icon-top - 4px
$sidebar-icon-size = 16px
$web-bg = convert(hexo-config("background"))
$index_top_img_height = convert(hexo-config('index_top_img_height')) || 100vh
// Global color & SVG
$pale-blue = $theme-hr-color
$light-blue = $theme-color
$blue = #1B9EF3
$dark-blue = #0790E8
$orange = #F1BE48
$pale-green = #B4E1C1
$light-green = #69C282
$green = #44B363
$dark-green = #379F54
$pale-cyan = #D1F4F2
$light-cyan = #8CE4DE
$cyan = $theme-paginator-color
$pale-red = #F9b9b3
$light-red = #F47466
$red = #F15140
$dark-red = #E63E2C
$ruby = $theme-button-hover-color
$light-black = #3B3A3A
$black = #2E2E2E
$dark-black = #000000
$pale-grey = #F7F7F7
$light-grey = #EEEEEE
$grey = $theme-meta-color
$pale-yellow = $theme-read-mode-bg-color
$white = #FFFFFF
$whitesmoke = #f5f5f5;
$dark-white = #F9F9F9
$font-black = #4C4948
$selection = $theme-text-selection-color
// code
$code-font-size = $font-size
$code-font-family = $font-family
$code-foreground = $inline-code-color
$code-background = rgba(27, 31, 35, 0.05)
$line-height-code-block = 20px
$blockquote-color = #6a737d
$blockquote-padding-color = $theme-color
$blockquote-background-color = rgba(73, 177, 245,0.1)
// page
$content-width = 800px
$content-large-width = 1000px
$a-link-color = $theme-link-color
$a-hover-color = #82AAFF
$img-border-color = #eaeefb
// sidebar
$sidebar-width = 300px
$sidebar-background = #f6f8fa
$sidebar-active-color = #fff
$mobile-sidebar-width = 250px
// table
$table-thead-bg = #99a9bf
// reward
$reward-pop-up-bg = #f5f5f5
$reward-pop-up-color = #858585
// search
$search-bg = #f6f8fa
$search-color = $theme-color
//gallery
$gallery-color = #fff
// tag-hide
$tag-hide-bg = $theme-color
// Note colors
// --------------------------------------------------
hexo-config('note.light_bg_offset') is a 'unit' ? ($lbg = unit(hexo-config('note.light_bg_offset'),"%")) : ($lbg = 0);
hexo-config('note.light_bg_offset') is a 'unit' ? ($lbg = unit(hexo-config('note.light_bg_offset'), '%')) : ($lbg = 0)
// Default
$note-default-border = #777;
$note-default-bg = lighten(spin($note-default-border, 0), 94% + $lbg);
$note-default-text = $note-default-border;
$note-default-icon = "\f0a9";
$note-modern-default-border = #e1e1e1;
$note-modern-default-bg = lighten(spin($note-modern-default-border, 10), 60% + ($lbg * 4));
$note-modern-default-text = #666;
$note-modern-default-hover = darken(spin($note-modern-default-text, -10), 32%);
$note-default-border = #777
$note-default-bg = lighten(spin($note-default-border, 0), 94% + $lbg)
$note-default-text = $note-default-border
$note-default-icon = '\f0a9'
$note-modern-default-border = #e1e1e1
$note-modern-default-bg = lighten(spin($note-modern-default-border, 10), 60% + ($lbg * 4))
$note-modern-default-text = #666
$note-modern-default-hover = darken(spin($note-modern-default-text, -10), 32%)
// Primary
$note-primary-border = #6f42c1;
$note-primary-bg = lighten(spin($note-primary-border, 10), 92% + $lbg);
$note-primary-text = $note-primary-border;
$note-primary-icon = "\f055";
$note-modern-primary-border = #e1c2ff;
$note-modern-primary-bg = lighten(spin($note-modern-primary-border, 10), 40% + ($lbg * 4));
$note-modern-primary-text = #6f42c1;
$note-modern-primary-hover = darken(spin($note-modern-primary-text, -10), 22%);
$note-primary-border = #6f42c1
$note-primary-bg = lighten(spin($note-primary-border, 10), 92% + $lbg)
$note-primary-text = $note-primary-border
$note-primary-icon = '\f055'
$note-modern-primary-border = #e1c2ff
$note-modern-primary-bg = lighten(spin($note-modern-primary-border, 10), 40% + ($lbg * 4))
$note-modern-primary-text = #6f42c1
$note-modern-primary-hover = darken(spin($note-modern-primary-text, -10), 22%)
// Info
$note-info-border = #428bca;
$note-info-bg = lighten(spin($note-info-border, -10), 91% + $lbg);
$note-info-text = $note-info-border;
$note-info-icon = "\f05a";
$note-modern-info-border = #b3e5ef;
$note-modern-info-bg = lighten(spin($note-modern-info-border, 10), 50% + ($lbg * 4));
$note-modern-info-text = #31708f;
$note-modern-info-hover = darken(spin($note-modern-info-text, -10), 32%);
$note-info-border = #428bca
$note-info-bg = lighten(spin($note-info-border, -10), 91% + $lbg)
$note-info-text = $note-info-border
$note-info-icon = '\f05a'
$note-modern-info-border = #b3e5ef
$note-modern-info-bg = lighten(spin($note-modern-info-border, 10), 50% + ($lbg * 4))
$note-modern-info-text = #31708f
$note-modern-info-hover = darken(spin($note-modern-info-text, -10), 32%)
// Success
$note-success-border = #5cb85c;
$note-success-bg = lighten(spin($note-success-border, 10), 90% + $lbg);
$note-success-text = $note-success-border;
$note-success-icon = "\f058";
$note-modern-success-border = #d0e6be;
$note-modern-success-bg = lighten(spin($note-modern-success-border, 10), 40% + ($lbg * 4));
$note-modern-success-text = #3c763d;
$note-modern-success-hover = darken(spin($note-modern-success-text, -10), 27%);
$note-success-border = #5cb85c
$note-success-bg = lighten(spin($note-success-border, 10), 90% + $lbg)
$note-success-text = $note-success-border
$note-success-icon = '\f058'
$note-modern-success-border = #d0e6be
$note-modern-success-bg = lighten(spin($note-modern-success-border, 10), 40% + ($lbg * 4))
$note-modern-success-text = #3c763d
$note-modern-success-hover = darken(spin($note-modern-success-text, -10), 27%)
// Warning
$note-warning-border = #f0ad4e;
$note-warning-bg = lighten(spin($note-warning-border, 10), 88% + $lbg);
$note-warning-text = $note-warning-border;
$note-warning-icon = "\f06a";
$note-modern-warning-border = #fae4cd;
$note-modern-warning-bg = lighten(spin($note-modern-warning-border, 10), 43% + ($lbg * 4));
$note-modern-warning-text = #8a6d3b;
$note-modern-warning-hover = darken(spin($note-modern-warning-text, -10), 18%);
$note-warning-border = #f0ad4e
$note-warning-bg = lighten(spin($note-warning-border, 10), 88% + $lbg)
$note-warning-text = $note-warning-border
$note-warning-icon = '\f06a'
$note-modern-warning-border = #fae4cd
$note-modern-warning-bg = lighten(spin($note-modern-warning-border, 10), 43% + ($lbg * 4))
$note-modern-warning-text = #8a6d3b
$note-modern-warning-hover = darken(spin($note-modern-warning-text, -10), 18%)
// Danger
$note-danger-border = #d9534f;
$note-danger-bg = lighten(spin($note-danger-border, -10), 92% + $lbg);
$note-danger-text = $note-danger-border;
$note-danger-icon = "\f056";
$note-modern-danger-border = #ebcdd2;
$note-modern-danger-bg = lighten(spin($note-modern-danger-border, 10), 35% + ($lbg * 4));
$note-modern-danger-text = #a94442;
$note-modern-danger-hover = darken(spin($note-modern-danger-text, -10), 22%);
$note-danger-border = #d9534f
$note-danger-bg = lighten(spin($note-danger-border, -10), 92% + $lbg)
$note-danger-text = $note-danger-border
$note-danger-icon = '\f056'
$note-modern-danger-border = #ebcdd2
$note-modern-danger-bg = lighten(spin($note-modern-danger-border, 10), 35% + ($lbg * 4))
$note-modern-danger-text = #a94442
$note-modern-danger-hover = darken(spin($note-modern-danger-text, -10), 22%)