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

🏷️ 更新至3.0.0-RC-1 close #189, close #192, close #223, close #224, close #229, close 232, close #240

Browse Source
This commit is contained in:
Jerry
2020-06-16 18:37:22 +08:00
Unverified
parent 0ad2c01fc9
commit aa8c509b96
93 changed files with 2109 additions and 1648 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
source/css/_global/function.styl Normal file
View File

@@ -0,0 +1,18 @@
.limit-one-line
overflow: hidden
text-overflow: ellipsis
white-space: nowrap
.limit-more-line
display: -webkit-box
overflow: hidden
-webkit-box-orient: vertical
.fontawesomeIcon
display: inline-block
font-weight: 600
font-style: normal
font-variant: normal
font-family: 'Font Awesome 5 Free'
text-rendering: auto
-webkit-font-smoothing: antialiased

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

@@ -14,9 +14,6 @@ body
if !hexo-config('copy.enable')
user-select: none
-moz-user-select: none
-webkit-user-select: none
-ms-user-select: none
*::-webkit-scrollbar
width: 8px
@@ -62,49 +59,39 @@ h6
left: $sidebar-icon-left
z-index: 100
font-size: $sidebar-icon-size
// opacity: 0
cursor: pointer
transition: all .2s
hr
position: relative
margin: 2rem auto
width: calc(100% - 4px)
border: 2px dashed lighten($theme-hr-color, 50%)
&:hover
if hexo-config('hr_icon.enable')
width: calc(100% - 4px)
&:hover
&:before
left: calc(95% - 20px)
&:before
left: calc(95% - 20px)
position: absolute
top: $hr-icon-top
left: 5%
z-index: 1
color: lighten($theme-hr-color, 30%)
content: $hr-icon
font-size: 20px
line-height: 1
transition: all 1s ease-in-out
@extend .fontawesomeIcon
&:before
position: absolute
top: $hr-icon-top
left: 5%
z-index: 1
color: $theme-hr-color
content: $hr-icon
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
.table-wrap
overflow-x: scroll
margin: 0 0 1rem
table
display: block
overflow: auto
margin: 0 0 1rem
display: table
width: 100%
border-spacing: 0
border-collapse: collapse
@@ -123,18 +110,26 @@ table
background: $theme-text-selection-color
color: #F7F7F7
button
margin: 0
padding: 0
outline: 0
border: none
background: none
cursor: pointer
// font
#nav #site_title,
#nav #site_subtitle,
#page-header #site_title,
#page-header #site_subtitle,
#site-name,
#aside_content .author-info__name,
#aside_content .author-info__description
font-family: $site-name-font
.is_right
.is-right
text-align: right
.is_left
.is-left
text-align: left
.is-center
@@ -146,22 +141,21 @@ table
.is-visible-inline
display: inline-block !important
.is_invisible
.is-invisible
display: none !important
.is_hidden
.is-hidden
overflow: hidden
.pull_left
.copy-true
user-select: all
.pull-left
float: left
.pull_right
.pull-right
float: right
// button hover
.button--primary
color: $theme-button-hover-color
.button--animated
transition-duration: 1s
transition-property: color
@@ -197,22 +191,6 @@ img:not([src])
&:hover
text-decoration: none !important
// hexo tag video
.video-container
position: relative
overflow: hidden
margin-bottom: .8rem
padding-top: 56.25%
height: 0
iframe
position: absolute
top: 0
left: 0
margin-top: 0
width: 100%
height: 100%
.comment_headling
margin-bottom: 10px
font-weight: 700
@@ -225,12 +203,13 @@ img:not([src])
display: block !important
height: auto !important
// animation
#content-inner,
#footer
animation: main 1s
#nav
animation: nav-effect 1s
#page-header
animation: header-effect 1s
#site_title,
#site_subtitle
@@ -290,7 +269,7 @@ if hexo-config('avatar.effect') == true
top: 0
opacity: .4
@keyframes nav-effect
@keyframes header-effect
0%
opacity: 0
transform: translateY(-50px)

79
source/css/_highlight/diff.styl
View File

@@ -1,8 +1,73 @@
$highlight_theme = hexo-config('highlight_theme')
// For diff highlight
pre .deletion
color: $highlight-deletion
if $highlight_theme == 'light'
$highlight-deletion = #fdd
$highlight-addition = #dfd
else
$highlight-deletion = #008000
$highlight-addition = #800000
pre .addition
color: $highlight-addition
pre .meta
color: $highlight-purple
pre
.comment
color: $highlight-comment
.variable,
.attribute,
.regexp,
.ruby .constant,
.xml .tag .title,
.xml .pi,
.xml .doctype,
.html .doctype,
.css .id,
.tag .name,
.css .class,
.css .pseudo
color: $highlight-red
.tag
color: $highlight-aqua
.number,
.preprocessor,
.literal,
.params,
.constant,
.command
color: $highlight-orange
.built_in
color: $highlight-yellow
.ruby .class .title,
.css .rules .attribute,
.string,
.value,
.inheritance,
.header,
.ruby .symbol,
.xml .cdata,
.special,
.number,
.formula
color: $highlight-green
.keyword,
.title,
.css .hexcolor
color: $highlight-aqua
.function,
.python .decorator,
.python .title,
.ruby .function .title,
.ruby .title .keyword,
.perl .sub,
.javascript .title,
.coffeescript .title
color: $highlight-blue
.tag .attr,
.javascript .function
color: $highlight-purple

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

@@ -1,6 +1,10 @@
// https://github.com/equinusocio/vsc-material-theme
$highlight_theme = hexo-config('highlight_theme')
@require 'theme'
@require 'diff'
if $highlight_theme != false
@require 'diff'
wordWrap = !hexo-config('rootConfig.highlight.line_number') && hexo-config('code_word_wrap')
@@ -16,13 +20,6 @@ $code-block
counter-reset: line
white-space: pre-wrap
.code-area-wrap
position: relative
margin: 0 0 1rem
figure.highlight
position: relative
blockquote
margin: 0 0 1rem
padding: .1rem .8rem
@@ -71,10 +68,6 @@ blockquote
figure.highlight
@extend $code-block
position: relative
border-radius: 1px
if hexo-config('highlight_shrink') == true
display: none
pre
margin: 0
@@ -82,10 +75,6 @@ blockquote
border: none
.line
&::selection
background: $highlight-selection
color: $highlight-foreground
if wordWrap
&:before
display: inline-block
@@ -100,10 +89,8 @@ blockquote
background-color: $highlight-selection
table
position: relative
display: table
margin: 0
width: auto
display: block
overflow: auto
border: none
td
@@ -113,7 +100,6 @@ blockquote
figcaption
clearfix()
padding: .3rem 0 .1rem .7rem
color: $highlight-foreground
font-size: 1em
line-height: 1em
@@ -136,16 +122,59 @@ blockquote
padding-right: .5rem
padding-left: .5rem
width: 100%
background-color: $highlight-background
.line
height: 1rem
.highlight-tools
position: relative
overflow: hidden
width: 100%
height: 1.5rem
background: $highlight-tools.bg-color
color: $highlight-tools.color
font-size: 14px
.code-expand
position: absolute
padding: .4rem .7rem
cursor: pointer
transition: all .3s
transform: rotate(0)
& + .code-lang
left: 1.7rem
&.code-closed
transition: all .3s
transform: rotate(-90deg) !important
.code-lang
position: absolute
left: .7rem
text-transform: capitalize
font-weight: bold
font-size: .8rem
line-height: 1.5rem
.copy-notice
position: absolute
top: .25rem
right: 1.7rem
opacity: 0
.copy-button
position: absolute
top: .4rem
right: .7rem
cursor: pointer
transition: color .2s
&:hover
color: $theme-color
.gutter
user-select: none
-webkit-user-select: none
-moz-user-select: none
-ms-user-select: none
.gist table
width: auto
@@ -153,121 +182,43 @@ blockquote
td
border: none
// For diff highlight
pre .deletion
background: $highlight-deletion
if $highlight_theme == 'mac'
figure.highlight
margin: 0 0 1.2rem
border-radius: 7px
box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .4)
-webkit-transform: translateZ(0)
pre .addition
background: $highlight-addition
.highlight-tools
&:after
position: absolute
top: .45rem
left: .7rem
width: 12px
height: 12px
border-radius: 50%
background: #fc625d
box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b
content: ' '
pre .meta
color: $highlight-purple
.code-expand
right: 0
pre
.comment
color: $highlight-comment
&.code-closed
transition: all .3s
transform: rotate(90deg) !important
&::selection
background: $highlight-selection
color: $highlight-foreground
& ~ .copy-notice
right: 2.8rem
.variable,
.attribute,
.regexp,
.ruby .constant,
.xml .tag .title,
.xml .pi,
.xml .doctype,
.html .doctype,
.css .id,
.tag .name,
.css .class,
.css .pseudo
color: $highlight-red
& ~ .copy-button
right: 1.8rem
&::selection
background: $highlight-selection
color: $highlight-foreground
.code-lang
left: 3.8rem !important
.tag
color: $highlight-aqua
&::selection
background: $highlight-selection
color: $highlight-foreground
.number,
.preprocessor,
.literal,
.params,
.constant,
.command
color: $highlight-orange
&::selection
background: $highlight-selection
color: $highlight-foreground
.built_in
color: $highlight-yellow
&::selection
background: $highlight-selection
color: $highlight-foreground
.ruby .class .title,
.css .rules .attribute,
.string,
.value,
.inheritance,
.header,
.ruby .symbol,
.xml .cdata,
.special,
.number,
.formula
color: $highlight-green
&::selection
background: $highlight-selection
color: $highlight-foreground
.keyword,
.title,
.css .hexcolor
color: $highlight-aqua
&::selection
background: $highlight-selection
color: $highlight-foreground
.function,
.python .decorator,
.python .title,
.ruby .function .title,
.ruby .title .keyword,
.perl .sub,
.javascript .title,
.coffeescript .title
color: $highlight-blue
&::selection
background: $highlight-selection
color: $highlight-foreground
.tag .attr,
.javascript .function
color: $highlight-purple
&::selection
background: $highlight-selection
color: $highlight-foreground
.highlight-tools
position: relative
overflow: hidden
width: 100%
height: 1.4rem
background: darken($highlight-background, 5)
color: $highlight-foreground
font-size: 14px
// when the page.highlight_shrink set to true
#body-wrap.code-close
figure.highlight
& > :not(.highlight-tools)
display: none

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

@@ -13,17 +13,23 @@ if $highlight_theme == 'default'
$highlight-aqua = #89DDFF
$highlight-blue = #82AAFF
$highlight-purple = #C792EA
$highlight-deletion = #BF42BF
$highlight-addition = #105EDE
$highlight-gutter = {
color: #37474F,
color: alpha($highlight-foreground, .5),
bg-color: $highlight-background
}
$highlight-tools = {
color: alpha($highlight-foreground, .8),
bg-color: darken($highlight-background, 2)
}
if $highlight_theme == 'darker'
if $highlight_theme == 'darker' || ($highlight_theme == 'mac')
$highlight-background = #212121
$highlight-current-line = #282a2e
$highlight-selection = #61616150
$highlight-foreground = #EEFFFF
$highlight-comment = #4A4A4A
$highlight-comment = #969896
$highlight-red = #FF5370
$highlight-orange = #F78C6C
$highlight-yellow = #FFCB6B
@@ -31,10 +37,16 @@ if $highlight_theme == 'darker'
$highlight-aqua = #89DDFF
$highlight-blue = #82AAFF
$highlight-purple = #C792EA
$highlight-deletion = #BF42BF
$highlight-addition = #105EDE
$highlight-gutter = {
color: #424242,
color: alpha($highlight-foreground, .5),
bg-color: $highlight-background
}
$highlight-tools = {
color: alpha($highlight-foreground, .8),
bg-color: darken($highlight-background, 2)
}
if $highlight_theme == 'pale night'
$highlight-background = #292D3E
@@ -49,17 +61,23 @@ if $highlight_theme == 'pale night'
$highlight-aqua = #89DDFF
$highlight-blue = #82AAFF
$highlight-purple = #C792EA
$highlight-deletion = #BF42BF
$highlight-addition = #105EDE
$highlight-gutter = {
color: #3A3F58,
color: alpha($highlight-foreground, .5),
bg-color: $highlight-background
}
$highlight-tools = {
color: $highlight-foreground,
bg-color: darken($highlight-background, 2)
}
if $highlight_theme == 'ocean'
$highlight-background = #0F111A
$highlight-current-line = #000000
$highlight-selection = #717CB450
$highlight-foreground = #8F93A2
$highlight-comment = #464B5D
$highlight-comment = rgba(101, 115, 126, .8)
$highlight-red = #FF5370
$highlight-orange = #F78C6C
$highlight-yellow = #FFCB6B
@@ -67,17 +85,23 @@ if $highlight_theme == 'ocean'
$highlight-aqua = #89DDFF
$highlight-blue = #82AAFF
$highlight-purple = #C792EA
$highlight-deletion = #BF42BF
$highlight-addition = #105EDE
$highlight-gutter = {
color: #3B3F5180,
color: alpha($highlight-foreground, .5),
bg-color: $highlight-background
}
$highlight-tools = {
color: $highlight-foreground,
bg-color: darken($highlight-background, 2)
}
if $highlight_theme == 'light'
$highlight-background = #F6F8FA
$highlight-current-line = #00346e
$highlight-selection = #80CBC440
$highlight-foreground = #90A4AE
$highlight-comment = #90A4AE90
$highlight-comment = rgba(149, 165, 166, .8)
$highlight-red = #E53935
$highlight-orange = #F76D47
$highlight-yellow = #FFB62C
@@ -85,7 +109,26 @@ if $highlight_theme == 'light'
$highlight-aqua = #39ADB5
$highlight-blue = #6182B8
$highlight-purple = #7C4DFF
$highlight-deletion = #BF42BF
$highlight-addition = #105EDE
$highlight-gutter = {
color: #CFD8DC,
color: alpha($highlight-foreground, .5),
bg-color: $highlight-background
}
$highlight-tools = {
color: $highlight-foreground,
bg-color: darken($highlight-background, 5)
}
if $highlight_theme == false
$highlight-background = #F6F8FA
$highlight-foreground = #90A4AE
$highlight-selection = #80CBC440
$highlight-gutter = {
color: alpha($highlight-foreground, .5),
bg-color: $highlight-background
}
$highlight-tools = {
color: $highlight-foreground,
bg-color: darken($highlight-background, 5)
}

104
source/css/_layout/404.styl
View File

@@ -1,44 +1,80 @@
if hexo-config('error_404.enable')
#nav.error-no-found
display: flex
flex-direction: column
justify-content: center
height: 100vh
#error-wrap
position: absolute
top: 50%
right: 0
left: 0
margin: 0 auto
padding: 0 1rem
max-width: 1000px
transform: translate(0, -50%)
&:before
width: 100%
height: 100%
background-color: alpha($dark-black, .5)
content: ''
.error-content
display: flex
flex-direction: row
justify-content: center
align-items: center
margin: 0 1rem
height: 18rem
border-radius: 8px
background: #fff
box-shadow: 0 4px 8px 6px rgba(7, 17, 27, .06)
#error_info
position: absolute
padding: 0 4rem
width: 100%
letter-spacing: 3px
line-height: 1
#error_title,
#error_subtitle
@media screen and (max-width: 768px)
flex-direction: column
margin: 0
padding: 0
color: $light-grey
letter-spacing: 5px
height: 25rem
.error-img
flex: 1
height: 100%
border-top-left-radius: 8px
border-bottom-left-radius: 8px
background-color: #49b1f5
background-position: center
background-size: cover
@media screen and (max-width: 768px)
flex: 1
width: 100%
border-top-right-radius: 8px
border-bottom-left-radius: 0
.error-info
flex: 1
padding: .5rem
text-align: center
font-size: 14px
font-family: $site-name-font
#error_title
font-size: 10rem
@media screen and (max-width: 768px)
flex: 1.1
width: 100%
#error_subtitle
font-size: 2rem
.error_title
margin-top: -4rem
color: $font-color
font-size: 9em
@media screen and (max-width: $sm)
#nav.error-no-found
#error_info
padding: 0 2rem
@media screen and (max-width: 768px)
margin-top: -3rem
#error_title
font-size: 7rem !important
.error_subtitle
@extend .limit-more-line
margin-top: -3.5rem
color: $font-color
word-break: break-word
font-size: 1.6em
-webkit-line-clamp: 2
#error_subtitle
font-size: 1rem !important
a
position: relative
z-index: 1
display: inline-block
margin-top: .5rem
padding: .3rem 1.5rem
background: $theme-color
color: white
i
padding-right: .3rem

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

@@ -43,10 +43,8 @@
a
.headline
overflow: hidden
@extend .limit-one-line
color: $font-black
text-overflow: ellipsis
white-space: nowrap
font-size: .7rem
.length_num
@@ -73,6 +71,7 @@
position: relative
z-index: 1
display: block
width: 100%
background-color: $light-blue
color: $button-color
line-height: 1.6rem
@@ -132,13 +131,11 @@
font-size: .6rem
.aside-post_title
display: -webkit-box
overflow: hidden
@extend .limit-more-line
padding-left: 10px
height: 40px
line-height: 1rem
-webkit-line-clamp: 2
-webkit-box-orient: vertical
&:hover
color: $light-blue !important
@@ -155,23 +152,20 @@
.card-archives ul.card-archive-list > .card-archive-list-item,
.card-categories ul.card-category-list > .card-category-list-item
padding: .15rem 1rem
cursor: pointer
transition: all .5s
&:hover
padding: .15rem .85rem
background-color: $light-blue
a
display: inline-block
padding: .15rem 1rem
width: 100%
color: $font-black
transition: all .4s
&:hover
padding: .15rem .85rem
background-color: $light-blue
span
display: inline-block
overflow: hidden
vertical-align: bottom
text-overflow: ellipsis
white-space: nowrap
&:first-child
width: 80%
@@ -193,7 +187,30 @@
.card-categories
.card-category-list
&.child
padding: 0 0 0 1.2rem
padding: 0 0 0 1rem
> .parent
.card-category-list
&-name
width: 70% !important
&-count
width: 18%
text-align: right
&-icon
float: right
margin-right: -.35rem
padding: .35rem
transition: transform .3s
transform: rotate(0)
&.expand
transform: rotate(-90deg)
if hexo-config('aside.card_categories.expand') == false
+ .child
display: none
.card-webinfo
.webinfo

8
source/css/_layout/chat.styl Normal file
View File

@@ -0,0 +1,8 @@
// chat
if hexo-config('chat_btn') == true && hexo-config('chatra.enable')
#chatra:not(.chatra--expanded)
visibility: hidden !important
width: 1px !important
height: 1px !important
opacity: 0 !important
pointer-events: none

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

@@ -1,85 +1,76 @@
.flink#article-container
.post-cards
margin: -10px 10px 0
.flink-desc
margin: .2rem 0 .5rem
.md-links
overflow: auto
text-align: center
.flink-list
overflow: auto
padding: 10px 10px 0
text-align: center
& > .md-links-item
position: relative
float: left
overflow: hidden
margin: 20px 7px
width: calc(100% / 3 - 15px)
height: 90px
border-radius: 8px
line-height: 17px
transform: perspective(1px) translateZ(0)
& > .flink-list-item
position: relative
float: left
overflow: hidden
margin: 20px 7px
width: calc(100% / 3 - 15px)
height: 90px
border-radius: 8px
line-height: 17px
transform: perspective(1px) translateZ(0)
&: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: $font-color
text-decoration: none
img
float: left
margin: 13px 0 0 10px
width: 65px
height: 65px
border-radius: 35px
transition: all .3s
.img-alt
display: none
.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
@media screen and (max-width: 1100px)
.flink
.md-links
.md-links-item
@media screen and (max-width: 1100px)
width: calc(50% - 15px) !important
@media screen and (max-width: 600px)
.flink
.md-links
.md-links-item
@media screen and (max-width: 600px)
width: calc(100% - 15px) !important
&:hover
img
transform: rotate(360deg)
&: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: $font-color
text-decoration: none
img
float: left
margin: 13px 0 0 10px
width: 65px
height: 65px
border-radius: 35px
transition: all .3s
.img-alt
display: none
.flink-item-name
@extend .limit-one-line
padding: 16px 10px 0 0
height: 40px
font-weight: bold
font-size: 20px
.flink-item-desc
@extend .limit-one-line
padding: 16px 10px
height: 50px
font-size: 13px

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

@@ -1,8 +1,8 @@
#nav
#page-header
position: relative
width: 100%
background-color: $light-blue
background-attachment: local
background-attachment: scroll
background-position: center center
background-size: cover
background-repeat: no-repeat
@@ -11,6 +11,7 @@
// index
&.full_page
height: $index_top_img_height
background-attachment: fixed
#site-info
position: absolute
@@ -94,11 +95,9 @@
font-size: 1.5rem
.posttitle
display: -webkit-box
overflow: hidden
@extend .limit-more-line
line-height: 1.5
-webkit-line-clamp: 3
-webkit-box-orient: vertical
#post-meta
font-size: 95%
@@ -127,10 +126,17 @@
color: $light-blue
text-decoration: underline
#page-header
// css hack
// all browser in ios and safari in all apple device
_::-webkit-full-page-media,
_:future,
:root #page-header.full_page
background-attachment: scroll !important
#nav
position: absolute
top: 0
z-index: 99
z-index: 90
padding: 10px 36px
width: 100%
height: 58px
@@ -164,7 +170,7 @@
&.fixed
position: fixed
top: -60px
z-index: 101
z-index: 91
background: alpha($white, .8)
box-shadow: 0 5px 6px -5px alpha($grey, .6)
transition: transform .2s ease-in-out, opacity .2s ease-in-out
@@ -270,7 +276,7 @@
cursor: pointer
@media screen and (min-width: $sm)
#nav
#page-header
#site_title
font-size: 2rem
@@ -278,10 +284,10 @@
font-size: 1.2rem
@media screen and (max-width: $sm)
#page-header
#nav
padding: 10px .8rem
#nav
#page-header
#site_social_icons
display: block

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

@@ -1,12 +1,10 @@
#mobile-sidebar
#menu_mask
position: fixed
top: 0
right: 0
bottom: 0
left: 0
z-index: 102
display: none
width: 100%
height: 100%
background: alpha($dark-black, .8)
#mobile-sidebar-menus
@@ -14,9 +12,7 @@
top: 0
right: -250px
z-index: 103
display: block
overflow: hidden
overflow-y: scroll
overflow: hidden scroll
width: 250px
height: 100%
background: #f6f8fa
@@ -46,9 +42,7 @@
.mobile_data_link
& > a > div
overflow: hidden
text-overflow: ellipsis
white-space: nowrap
@extend .limit-one-line
.length_num
color: $dark-black
@@ -66,41 +60,33 @@
padding: 0 .5rem 2rem
.site-page
@extend .limit-one-line
position: relative
z-index: 0
display: block
overflow: hidden
margin: 0
padding: .3rem 1.5rem
color: $font-black
text-overflow: ellipsis
text-shadow: none
white-space: nowrap
font-size: .8rem
cursor: pointer
i
width: 30%
text-align: left
i:first-child
width: 30%
text-align: left
span
width: 70%
span
width: 70%
&:hover
color: $light-blue
&:hover
color: $light-blue
.menus-expand
position: absolute
right: 0
padding: 6px
width: 30px !important
height: 30px
padding: .4rem
transition: all .3s
transform: rotate(0)
&.menus-closed
transition: all .3s
transform: rotate(180deg) !important
transform: rotate(90deg) !important
.menus_item_child
margin: 0

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

@@ -80,27 +80,23 @@
width: 100%
& > .article-title
display: -webkit-box
overflow: hidden
@extend .limit-more-line
margin-bottom: .3rem
color: $font-black
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
&:hover
color: $light-blue !important
& > .article-meta-wrap
font-size: 95%
font-size: 85%
& > time
color: $theme-meta-color
cursor: pointer
cursor: default
& > .article-meta
color: $theme-meta-color
@@ -111,12 +107,14 @@
i
margin: 0 .2rem 0 0
.article-meta__separator,
.article-meta__link
.article-meta__separator
margin: 0 .3rem
.article-meta__link
margin: 0 .2rem
.fa-angle-right
margin: 0 .3rem
margin: 0 .2rem
a.article-meta__categories,
a.article-meta__tags
@@ -127,13 +125,9 @@
text-decoration: underline
& > .content
display: -webkit-box
overflow: hidden
@extend .limit-more-line
margin-top: .3rem
// height: 85px
word-break: break-word
-webkit-line-clamp: 3
-webkit-box-orient: vertical
// tags page
.tag-cloud
@@ -261,13 +255,11 @@
font-size: .7rem
&__title
display: -webkit-box
overflow: hidden
@extend .limit-more-line
color: $font-black
font-size: .75rem
transition: all .3s
-webkit-line-clamp: 2
-webkit-box-orient: vertical
&:hover
color: $light-blue !important

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

@@ -20,8 +20,8 @@
color: $button-color
cursor: default
img.prev_cover,
img.next_cover
img.prev-cover,
img.next-cover
position: absolute
width: 100%
height: 100%
@@ -38,10 +38,8 @@
.prev_info,
.next_info
overflow: hidden
@extend .limit-one-line
color: $button-color
text-overflow: ellipsis
white-space: nowrap
font-weight: 500
.next-post
@@ -68,12 +66,12 @@
height: 150px
&:hover
img.prev_cover,
img.next_cover
img.prev-cover,
img.next-cover
opacity: .8
transform: scale(1.1)
&.pagination_post
&.pagination-post
margin: 2rem 0 !important
background: $dark-black

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

@@ -26,19 +26,9 @@ beautify()
top: calc(50% - .35rem)
color: $title-prefix-icon-color
content: $title-prefix-icon
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
@extend .fontawesomeIcon
&:hover
&:before
@@ -77,9 +67,10 @@ beautify()
padding-left: .5rem
li
position: relative
margin: .2rem 0
padding: .1rem .5rem .1rem 1.5rem
&:not(.tab)
position: relative
margin: .2rem 0
padding: .1rem .5rem .1rem 1.5rem
&:hover
&:before
@@ -108,7 +99,7 @@ beautify()
line-height: h
ul
> li
> li:not(.tab)
&:hover
&:before
border-color: $theme-button-hover-color
@@ -177,57 +168,6 @@ img
max-width: 100%
transition: all .2s
// highlight
.highlight-tools
.code-expand
position: absolute
top: 0
z-index: 1
padding: 7px 10px
color: $highlight-foreground
cursor: pointer
transition: all .3s
transform: rotate(0)
& + .code-lang
left: 30px
&.code-closed
transition: all .3s
transform: rotate(-90deg) !important
.code-lang
position: absolute
left: 15px
z-index: 1
color: $highlight-foreground
text-transform: capitalize
font-weight: bold
font-size: .8rem
line-height: 1.4rem
cursor: pointer
.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
&:hover
color: darken($highlight-aqua, 20%)
.katex-wrap
overflow: auto
@@ -338,6 +278,9 @@ img
p
margin: 0 0 .8rem
iframe
margin: 0 0 1rem
@media screen and (max-width: 1024px)
.layout_post
width: auto

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

@@ -8,18 +8,27 @@
.relatedPosts_item
position: relative
float: left
display: inline-block
overflow: hidden
margin: 5px
width: calc(100% / 3 - 10px)
margin: 3px
width: calc(33.333% - 6px)
height: 200px
background: $dark-black
vertical-align: bottom
&:hover
.relatedPosts_cover
opacity: .8
transform: scale(1.1)
@media screen and (max-width: 768px)
margin: 2px
width: calc(50% - 4px)
height: 150px
@media screen and (max-width: 480px)
width: calc(100% - 4px)
.relatedPosts_cover
width: 100%
height: 100%
@@ -40,22 +49,5 @@
font-size: 90%
.relatedPosts_title
display: -webkit-box
overflow: hidden
@extend .limit-more-line
-webkit-line-clamp: 2
-webkit-box-orient: vertical
.clear_both
clear: both
@media screen and (max-width: 768px)
.relatedPosts
.relatedPosts_item
margin: 2px
width: calc(100% / 2 - 4px)
height: 150px
@media screen and (max-width: 480px)
.relatedPosts
.relatedPosts_item
width: calc(100% - 4px)

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

@@ -1,20 +1,18 @@
.post-reward
margin: 75px auto 0
position: relative
margin-top: 4rem
width: 100%
text-align: center
.reward-button
position: relative
z-index: 1
display: inline-block
width: 100px
padding: .5rem 1.2rem
background: $light-blue
color: $button-color
text-align: center
line-height: 36px
cursor: pointer
transition: all .4s
&:hover
box-shadow: inset 9em 0 0 0 $theme-button-hover-color
.reward-main
display: block
@@ -22,17 +20,15 @@
position: absolute
bottom: 40px
left: 0
z-index: 100
display: none
margin: 0
padding: 0 0 15px
width: 100%
transition: all .6s
.reward-all
display: inline-block
margin: 0 0 0 -110px
padding: 20px 10px 8px
width: 320px
margin: 0
padding: 1rem .5rem
border-radius: 4px
background: $reward-pop-up-bg
@@ -61,14 +57,15 @@
display: inline-block
padding: 0 8px
list-style-type: none
vertical-align: top
img
position: relative
max-width: 130px
width: 130px
border-radius: 3px
height: 130px
.post-qr-code__desc
margin: -5px 0
padding-top: .4rem
width: 130px
color: $reward-pop-up-color
text-align: center
word-break: break-all

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

@@ -1,7 +1,7 @@
#rightside
position: fixed
right: -38px
bottom: 40px
bottom: $rightside-bottom
opacity: 0
transition: all .5s
@@ -16,9 +16,8 @@
animation: rightsideOut .3s
& > div
& > i,
& > a,
& > div
& > button,
& > a
display: block
margin-bottom: 2px
width: 30px
@@ -27,7 +26,6 @@
color: $button-color
text-align: center
font-size: 16px
line-height: 29px
cursor: pointer
&:hover
@@ -40,9 +38,7 @@
#mobile-toc-button
display: none
@media screen and (max-width: $bg)
#rightside
#mobile-toc-button
@media screen and (max-width: $bg)
display: block
@keyframes rightsideIn

5
source/css/_layout/third-party.styl
View File

@@ -49,11 +49,12 @@ if hexo-config('beautify.enable')
content: none
// third-party
// fireworks
.fireworks
position: fixed
top: 0
left: 0
z-index: 999999
z-index: $fireworks-zIndex
pointer-events: none
.medium-zoom-image--opened
@@ -83,4 +84,4 @@ if hexo-config('beautify.enable')
padding: .3rem 0 .8em
.has-jax
overflow: auto
overflow: auto

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

@@ -20,7 +20,7 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
background-color: alpha($dark-black, .7)
content: ''
#nav,
#page-header,
.layout_post > #post,
.layout_page > div:first-child:not(.recent-posts)
background-color: #121212
@@ -40,7 +40,7 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
color: alpha(#FFFFFF, .8) !important
// 頭部
#nav
#page-header
&:before
position: absolute
top: 0
@@ -50,7 +50,7 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
background-color: alpha($dark-black, .7)
content: ''
& > #page-header
& > #nav
a
color: alpha(#FFFFFF, .8) !important
@@ -78,26 +78,25 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
color: alpha(#FFFFFF, .6)
// 代碼框
#article-container pre,
#article-container pre code
background-color: lighten(#121212, 2)
#article-container
pre,
.highlight:not(.js-file-line-container)
background-color: lighten(#121212, 2) !important
color: alpha(#FFFFFF, .6) !important
figure.highlight
.line:before
color: alpha(#FFFFFF, .6) !important
.gutter pre
background-color: lighten(#121212, 2) !important
.hljs
background-color: lighten(#121212, 2) !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)
background: lighten(#121212, 3) !important
color: #90a4ae !important
blockquote
background-color: lighten(#121212, 10)
@@ -138,9 +137,8 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
// 右下角按鈕
#rightside
& > div
& > i,
& > a,
& > div
& > button,
& > a
background-color: lighten(#121212, 5)
color: alpha(#FFFFFF, .6)
@@ -158,17 +156,19 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
&:after
border-top: 13px solid lighten(#121212, 10) !important
.md-links-item:before,
.card-category-list-item:hover,
.card-archive-list-item:hover,
.flink-list-item:before,
.card-category-list-item a:hover,
.card-archive-list-item a:hover,
#bookmark-it
background-color: lighten(#121212, 10) !important
img,
iframe:not(.utterances-frame),
.gist
filter: brightness(.7)
#article-container iframe
filter: brightness(.7)
// 側邊欄
#aside_content
.card-widget
@@ -207,11 +207,11 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
.recent-posts .article-meta,
.recent-posts a,
.post-reward .reward-button,
.fa-clipboard,
.copy-button,
.gutter pre,
#bookmark-it,
.copy-notice,
.md-links-item a,
.flink-list-item a,
.category-list-link,
.relatedPosts_date,
.prev-post .label,
@@ -246,6 +246,24 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
a
color: alpha(#FFFFFF, .6) !important
// error 404
#error-wrap
.error-content
background: #121212
.error-img
filter: brightness(.7)
.error-info
.error_title
color: alpha(#FFFFFF, .8)
.error_subtitle
color: alpha(#FFFFFF, .6)
a
background: #2c2c2c
// note
if hexo-config('note.style') == 'modern'
.note
@@ -257,8 +275,33 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
color: #4c4948
// hide-tags
.hide-button
filter: brightness(.7)
.hide-button,
.btn-beautify
filter: brightness(.8)
// tabs
#article-container
.tabs
border: 2px solid #2c2c2c
border-top: none
> .nav-tabs
background: #2c2c2c
a
border-top: 2px solid #2c2c2c
background: #2c2c2c
color: alpha(#FFFFFF, .6)
.tab:not(.active)
a
&:hover
border-top: 2px solid lighten(#121212, 20)
background: lighten(#121212, 20)
.active
a
background: #121212
// 第三方
// 插件 hexo-blog-encrypt

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

@@ -1,11 +1,11 @@
if hexo-config('readmode') && hexo-config('readmode.enable')
if hexo-config('readmode')
[data-theme='light']
$light-redmode-bg = #fff
.read-mode
background: $light-redmode-bg
#nav.post-bg
#page-header.post-bg
a
color: $font-black !important
@@ -14,6 +14,16 @@ if hexo-config('readmode') && hexo-config('readmode.enable')
.highlight:not(.js-file-line-container)
background: #f7f7f7 !important
*
color: $font-black !important
figure.highlight
.line:before
color: $font-black !important
.hljs
background: #f7f7f7 !important
code
color: #4c4948
@@ -42,10 +52,17 @@ if hexo-config('readmode') && hexo-config('readmode.enable')
.hide-toggle
border: 1px solid darken(#d6dbdf, 10) !important
.hide-button
.hide-button,
.btn-beautify
background: $light-redmode-bg !important
color: #4c4948 !important
.btn-beautify
border: 1px solid darken(#d6dbdf, 10)
&.button--animated:before
background: $light-redmode-bg
.hide-inline,
.hide-block
& >.hide-button
@@ -58,9 +75,10 @@ if hexo-config('readmode') && hexo-config('readmode.enable')
border: 2px solid #eee
background-color: $light-redmode-bg
#rightside i:not(.fa-cog),
#rightside a,
#rightside #rightside_config
.tabs
border: 1px solid darken(#d6dbdf, 10)
#rightside button
background: darken(#d6dbdf, 20) !important
[data-theme='dark']
@@ -70,6 +88,11 @@ if hexo-config('readmode') && hexo-config('readmode.enable')
background: $dark-readmode-bg
#article-container
pre,
.highlight:not(.js-file-line-container)
*
color: rgba(255, 255, 255, .6) !important
code
color: rgba(255, 255, 255, .6)
@@ -91,11 +114,18 @@ if hexo-config('readmode') && hexo-config('readmode.enable')
.hide-toggle
border: 1px solid rgba(255, 255, 255, .6) !important
.hide-button
.hide-button,
.btn-beautify
background: $dark-readmode-bg !important
filter: none
color: rgba(255, 255, 255, .6) !important
.btn-beautify
border: 1px solid rgba(255, 255, 255, .6)
&.button--animated:before
background: $dark-readmode-bg !important
.hide-inline,
.hide-block
& >.hide-button
@@ -110,11 +140,20 @@ if hexo-config('readmode') && hexo-config('readmode.enable')
background-color: $dark-readmode-bg
color: rgba(255, 255, 255, .6)
.tabs
border: 2px solid rgba(255, 255, 255, .6)
> .nav-tabs
filter: none
a
color: rgba(255, 255, 255, .6)
.read-mode
#body-wrap
padding-left: 0 !important
#nav.post-bg
#page-header.post-bg
background-color: transparent
background-image: none !important
@@ -137,25 +176,38 @@ if hexo-config('readmode') && hexo-config('readmode.enable')
&:hover
box-shadow: none
.highlight
display: block !important
figure.highlight
border-radius: 0 !important
box-shadow: none !important
& > :not(.highlight-tools)
display: block !important
& > canvas
display: none !important
.code-area-wrap > .highlight-tools,
.highlight-tools,
#footer,
#post > *:not(:first-child),
#to_comment,
#sidebar,
#toggle-sidebar,
#mobile-toc-button,
#page-header
#nav
display: none !important
#web_bg
background: none
if !hexo-config('chat_btn')
#chatra,
#tidio-chat-code,
#tidio-chat,
#daodream-container,
.gitter-chat-embed,
.gitter-open-chat-button
display: none !important
#article-container
h1,
h2,
@@ -167,3 +219,33 @@ if hexo-config('readmode') && hexo-config('readmode.enable')
&:before
content: ''
&:hover
padding: 0
ul,
li,
ol
&:hover:before
transform: none !important
.tabs
> .nav-tabs
background: transparent
> .tab
border-bottom: 0
a
border-top: none !important
background: transparent
&:hover
background: none !important
&.active
a
text-decoration: underline
> .tab-contents .tab-item-content.active
animation: none

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

@@ -50,5 +50,5 @@
height: 100%
.search-result-list
max-height: 75vh !important
padding-bottom: 2rem
max-height: 75vh !important

60
source/css/_tags/button.styl Normal file
View File

@@ -0,0 +1,60 @@
#article-container
.btn-center
margin: 0 0 1rem
text-align: center
.btn-beautify
position: relative
z-index: 1
display: inline-block
margin: 0 .2rem .3rem
padding: 0 1rem
background-color: $btn-default-color
color: $btn-color
line-height: 2
&:not(.block) + .btn-beautify:not(.block)
margin: 0 .2rem 1rem
&.block
display: block
margin: 0 0 1rem
width: fit-content
width: -moz-fit-content
&.center
margin: 0 auto 1rem
&.right
margin: 0 0 1rem auto
&.larger
padding: .3rem 1.3rem
&:hover
text-decoration: none
for $type in $btn-types
&.{$type}
background-color: lookup('$btn-' + $type + '-color')
&.outline
border: 1px solid transparent
border-color: $btn-default-color
background-color: transparent
color: $btn-default-color
transition: all .3s
&.button--animated:before
background: $btn-default-color
&:hover
color: white !important
for $type in $btn-types
&.{$type}
border-color: lookup('$btn-' + $type + '-color')
color: lookup('$btn-' + $type + '-color')
&.button--animated:before
background: lookup('$btn-' + $type + '-color')

8
source/css/_tags/gallery.styl
View File

@@ -57,8 +57,7 @@ figure.gallery-group
opacity: 0
p
display: -webkit-box
overflow: hidden
@extend .limit-more-line
margin: 0
padding: .4rem 0 0
letter-spacing: 1px
@@ -68,19 +67,16 @@ figure.gallery-group
transition: opacity .35s, transform .35s
transform: translate3d(100%, 0, 0)
-webkit-line-clamp: 4
-webkit-box-orient: vertical
.gallery-group-name
@extend .limit-more-line
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

30
source/css/_tags/hexo.styl Normal file
View File

@@ -0,0 +1,30 @@
// pullquote
blockquote
&.pullquote
position: relative
max-width: 45%
font-size: 110%
&.left
float: left
margin: 1em .5em 0 0
&.right
float: right
margin: 1em 0 0 .5rem
// hexo tag video
.video-container
position: relative
overflow: hidden
margin-bottom: .8rem
padding-top: 56.25%
height: 0
iframe
position: absolute
top: 0
left: 0
margin-top: 0
width: 100%
height: 100%

9
source/css/_tags/hide.styl
View File

@@ -1,18 +1,13 @@
// tag-hide
.hide-inline,
.hide-block
& > a.hide-button
& > .hide-button
position: relative
z-index: 1
display: inline-block
padding: 0 1rem
padding: .3rem 1rem
background: $tag-hide-bg
color: $white !important
text-align: center
cursor: pointer
&:hover
text-decoration: none !important
&.open
display: none

248
source/css/_tags/note.styl
View File

@@ -57,231 +57,41 @@
top: 13px
left: 15px
font-size: larger
@extend .fontawesomeIcon
if hexo-config('fontawesome_v5') && hexo-config('fontawesome_v5.enable')
font-weight: 600
font-family: 'Font Awesome 5 Free'
else
font-family: 'FontAwesome'
for $type in $note-types
&.{$type}
if ($note-style == 'flat')
background: lookup('$note-' + $type + '-bg')
&.default
if ($note-style == 'flat')
background-color: $note-default-bg
if ($note-style == 'modern')
border-color: lookup('$note-modern-' + $type + '-border')
background: lookup('$note-modern-' + $type + '-bg')
color: lookup('$note-modern-' + $type + '-text')
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)
border-bottom: 1px solid lookup('$note-modern-' + $type + '-text')
color: lookup('$note-modern-' + $type + '-text')
a,
span.exturl
&:not(.btn)
border-bottom: 1px solid $note-modern-default-text
color: $note-modern-default-text
&:hover
border-bottom: 1px solid lookup('$note-modern-' + $type + '-hover')
color: lookup('$note-modern-' + $type + '-hover')
&:hover
border-bottom: 1px solid $note-modern-default-hover
color: $note-modern-default-hover
if ($note-style != 'modern')
border-left-color: lookup('$note-' + $type + '-border')
if ($note-style != 'modern')
border-left-color: $note-default-border
h2,
h3,
h4,
h5,
h6
color: lookup('$note-' + $type + '-text')
h2,
h3,
h4,
h5,
h6
color: $note-default-text
if $note-icons
&:not(.no-icon)
&::before
content: $note-default-icon
if $note-icons
&:not(.no-icon)::before
content: lookup('$note-' + $type + '-icon')
if ($note-style != 'modern')
color: $note-default-text
&.primary
if ($note-style == 'flat')
background-color: $note-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)
border-bottom: 1px solid $note-modern-primary-text
color: $note-modern-primary-text
&:hover
border-bottom: 1px solid $note-modern-primary-hover
color: $note-modern-primary-hover
if ($note-style != 'modern')
border-left-color: $note-primary-border
h2,
h3,
h4,
h5,
h6
color: $note-primary-text
if $note-icons
&:not(.no-icon)
&::before
content: $note-primary-icon
if ($note-style != 'modern')
color: $note-primary-text
&.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)
border-bottom: 1px solid $note-modern-info-text
color: $note-modern-info-text
&:hover
border-bottom: 1px solid $note-modern-info-hover
color: $note-modern-info-hover
if ($note-style != 'modern')
border-left-color: $note-info-border
h2,
h3,
h4,
h5,
h6
color: $note-info-text
if $note-icons
&:not(.no-icon)
&::before
content: $note-info-icon
if ($note-style != 'modern')
color: $note-info-text
&.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)
border-bottom: 1px solid $note-modern-success-text
color: $note-modern-success-text
&:hover
border-bottom: 1px solid $note-modern-success-hover
color: $note-modern-success-hover
if ($note-style != 'modern')
border-left-color: $note-success-border
h2,
h3,
h4,
h5,
h6
color: $note-success-text
if $note-icons
&:not(.no-icon)
&::before
content: $note-success-icon
if ($note-style != 'modern')
color: $note-success-text
&.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)
border-bottom: 1px solid $note-modern-warning-text
color: $note-modern-warning-text
&:hover
border-bottom: 1px solid $note-modern-warning-hover
color: $note-modern-warning-hover
if ($note-style != 'modern')
border-left-color: $note-warning-border
h2,
h3,
h4,
h5,
h6
color: $note-warning-text
if $note-icons
&:not(.no-icon)
&::before
content: $note-warning-icon
if ($note-style != 'modern')
color: $note-warning-text
&.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)
border-bottom: 1px solid $note-modern-danger-text
color: $note-modern-danger-text
&:hover
border-bottom: 1px solid $note-modern-danger-hover
color: $note-modern-danger-hover
if ($note-style != 'modern')
border-left-color: $note-danger-border
h2,
h3,
h4,
h5,
h6
color: $note-danger-text
if $note-icons
&:not(.no-icon)
&::before
content: $note-danger-icon
if ($note-style != 'modern')
color: $note-danger-text
color: lookup('$note-' + $type + '-text')

71
source/css/_tags/tabs.styl Normal file
View File

@@ -0,0 +1,71 @@
#article-container
.tabs
position: relative
margin: 0 0 1rem
border: 1px solid $tab-border-color
border-top: none
> .nav-tabs
display: flex
flex-wrap: wrap
margin: 0
padding: 0
background: $tab-botton-bg
> .tab
margin: 0
padding: 0
list-style: none
@media screen and (max-width: 768px)
flex-grow: 1
a
display: block
padding: .5rem .8rem
outline: 0
border-top: 2px solid $tab-border-color
background: $tab-botton-bg
color: $font-color
text-align: center
transition: all .4s
&:hover
border-top: 2px solid $tab-button-hover-bg
background: $tab-button-hover-bg
text-decoration: none
i
width: 1.5em
&.active
a
border-top: 2px solid $tab-active-border-color
background: $card-bg
cursor: default
> .tab-contents
.tab-item-content
position: relative
display: none
padding: 1.8rem 1.2rem
@media screen and (max-width: 768px)
padding: 1.2rem .7rem
&.active
display: block
animation: tabshow .5s
.tab-to-top
position: relative
display: block
margin: 0 0 0 auto
color: $tab-to-top-color
@keyframes tabshow
0%
transform: translateY(15px)
100%
transform: translateY(0)

2
source/css/index.styl
View File

@@ -2,7 +2,7 @@
@import '_third-party/normalize.min.css'
// project
@import 'var'
@import '_global'
@import '_global/*'
@import '_highlight/highlight'
@import '_layout/*'
@import '_tags/*'

56
source/css/var.styl
View File

@@ -3,7 +3,6 @@ $bright-blue = #49B1F5
$strong-cyan = #00c4b6
$light-orange = #FF7242
$light-red = #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
@@ -14,23 +13,20 @@ $theme-hr-color = $themeColorEnable ? convert(hexo-config('theme_color.hr_color'
$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
// 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'
//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
$dafault-font-family = -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Lato, Roboto, 'PingFang SC', 'Microsoft YaHei', sans-serif
$dafault-code-font = consolas, Menlo, 'PingFang SC', 'Microsoft YaHei', sans-serif
$font-family = hexo-config('font.font-family') ? unquote(hexo-config('font.font-family')) : $dafault-font-family
$code-font = hexo-config('font.code-font') ? unquote(hexo-config('font.code-font')) : $dafault-code-font
$site-name-font = hexo-config('blog_title_font.font-family') ? unquote(hexo-config('blog_title_font.font-family')) : $font-family
// hr
$hrEnable = hexo-config('hr_icon') && hexo-config('hr_icon.enable')
$hr-icon = $hrEnable && hexo-config('hr_icon.icon') ? hexo-config('hr_icon.icon') : '\f0c4'
$hr-icon-top = $hrEnable && hexo-config('hr_icon.icon-top') ? convert(hexo-config('hr_icon.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
@@ -53,11 +49,10 @@ $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)
$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
@@ -80,17 +75,20 @@ $reward-pop-up-color = #858585
$search-bg = #f6f8fa
$search-color = $theme-color
$search-keyword-highlight = #F47466
//gallery
// gallery
$gallery-color = #fff
// tag-hide
$tag-hide-bg = $theme-color
$tag-hide-toggle-bg = #f0f0f0
//preloader
// preloader
$preloader-bg = #37474f
// Note colors
// --------------------------------------------------
// rightside
$rightside-bottom = hexo-config('rightside-bottom') is a 'unit' ? unit(hexo-config('rightside-bottom'), px) : 40px
// fireworks
$fireworks-zIndex = hexo-config('fireworks.zIndex') ? hexo-config('fireworks.zIndex') : 99999
// Tag Plugins - Note
hexo-config('note.light_bg_offset') is a 'unit' ? ($lbg = unit(hexo-config('note.light_bg_offset'), '%')) : ($lbg = 0)
$note-types = 'default' 'primary' 'info' 'success' 'warning' 'danger'
// Default
$note-default-border = #777
$note-default-bg = lighten(spin($note-default-border, 0), 94% + $lbg)
@@ -145,3 +143,19 @@ $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%)
// Tag Plugins - Button
$btn-types = 'blue' 'pink' 'red' 'purple' 'orange' 'green'
$btn-color = #fff
$btn-default-color = #777
$btn-blue-color = #428bca
$btn-pink-color = #FF69B4
$btn-red-color = #FF0000
$btn-orange-color = #FF8C00
$btn-purple-color = #6f42c1
$btn-green-color = #5cb85c
// Tag Plugins - Tab
$tab-border-color = #f0f0f0
$tab-botton-bg = #f0f0f0
$tab-button-hover-bg = darken($tab-border-color, 8)
$tab-active-border-color = $theme-color
$tab-to-top-color = #99a9bf