mirror of
https://github.com/jerryc127/hexo-theme-butterfly.git
synced 2026-06-05 21:01:46 +08:00
This commit is contained in:
Jerry
@@ -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
|
||||
@@ -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)
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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)
|
||||
}
|
||||
|
||||
+70
-34
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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)
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -50,5 +50,5 @@
|
||||
height: 100%
|
||||
|
||||
.search-result-list
|
||||
max-height: 75vh !important
|
||||
padding-bottom: 2rem
|
||||
max-height: 75vh !important
|
||||
|
||||
@@ -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')
|
||||
@@ -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
|
||||
|
||||
@@ -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%
|
||||
@@ -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
|
||||
|
||||
+29
-219
@@ -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')
|
||||
|
||||
@@ -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,7 +2,7 @@
|
||||
@import '_third-party/normalize.min.css'
|
||||
// project
|
||||
@import 'var'
|
||||
@import '_global'
|
||||
@import '_global/*'
|
||||
@import '_highlight/highlight'
|
||||
@import '_layout/*'
|
||||
@import '_tags/*'
|
||||
|
||||
+35
-21
@@ -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
|
||||
+106
-95
@@ -1,6 +1,6 @@
|
||||
$(function () {
|
||||
const isSnackbar = GLOBAL_CONFIG.Snackbar !== undefined
|
||||
const $pageHead = $('#page-header')
|
||||
const $nav = $('#nav')
|
||||
const $rightside = $('#rightside')
|
||||
const $body = $('body')
|
||||
|
||||
@@ -16,9 +16,9 @@ $(function () {
|
||||
function isAdjust (n) {
|
||||
var t
|
||||
if (n === 1) {
|
||||
t = blogNameWidth + menusWidth > $pageHead.width() - sidebarWidth - 20
|
||||
t = blogNameWidth + menusWidth > $nav.width() - sidebarWidth - 20
|
||||
} else if (n === 2) {
|
||||
t = blogNameWidth + menusWidth > $pageHead.width() - 20
|
||||
t = blogNameWidth + menusWidth > $nav.width() - 20
|
||||
}
|
||||
|
||||
if (t) headerAdjust()
|
||||
@@ -26,15 +26,15 @@ $(function () {
|
||||
}
|
||||
|
||||
function headerAdjust () {
|
||||
$pageHead.find('.toggle-menu').addClass('is-visible-inline')
|
||||
$pageHead.find('.menus_items').addClass('is_invisible')
|
||||
$pageHead.find('#search_button span').addClass('is_invisible')
|
||||
$nav.find('.toggle-menu').addClass('is-visible-inline')
|
||||
$nav.find('.menus_items').addClass('is-invisible')
|
||||
$nav.find('#search_button span').addClass('is-invisible')
|
||||
}
|
||||
|
||||
function headerAdjustBack () {
|
||||
$pageHead.find('.toggle-menu').removeClass('is-visible-inline')
|
||||
$pageHead.find('.menus_items').removeClass('is_invisible')
|
||||
$pageHead.find('#search_button span').removeClass('is_invisible')
|
||||
$nav.find('.toggle-menu').removeClass('is-visible-inline')
|
||||
$nav.find('.menus_items').removeClass('is-invisible')
|
||||
$nav.find('#search_button span').removeClass('is-invisible')
|
||||
}
|
||||
|
||||
// 初始化header
|
||||
@@ -44,26 +44,16 @@ $(function () {
|
||||
}
|
||||
|
||||
initAjust()
|
||||
$('#page-header').css({ opacity: '1', animation: 'headerNoOpacity 1s' })
|
||||
$('#nav').css({ opacity: '1', animation: 'headerNoOpacity 1s' })
|
||||
|
||||
$(window).on('resize', function () {
|
||||
if ($('#sidebar').hasClass('tocOpenPc') && $pageHead.hasClass('fixed')) {
|
||||
if ($('#sidebar').hasClass('tocOpenPc') && $nav.hasClass('fixed')) {
|
||||
isAdjust(1)
|
||||
} else {
|
||||
initAjust()
|
||||
}
|
||||
})
|
||||
|
||||
/**
|
||||
* windows時 設置主頁top_img 為 fixed
|
||||
*/
|
||||
if (GLOBAL_CONFIG_SITE.isHome) {
|
||||
var isSafari = /Safari/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgent)
|
||||
if (!isSafari && isDesktop()) {
|
||||
$('#nav').css('background-attachment', 'fixed')
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 進入post頁sidebar處理
|
||||
*/
|
||||
@@ -117,7 +107,7 @@ $(function () {
|
||||
opacity: '1'
|
||||
})
|
||||
var isAdjustTimeCount = window.setInterval(function () {
|
||||
if ($pageHead.hasClass('fixed')) isAdjust(1)
|
||||
if ($nav.hasClass('fixed')) isAdjust(1)
|
||||
else isAdjust(2)
|
||||
}, 100)
|
||||
setTimeout(function () {
|
||||
@@ -221,7 +211,7 @@ $(function () {
|
||||
* 首頁top_img底下的箭頭
|
||||
*/
|
||||
$('#scroll_down').on('click', function () {
|
||||
scrollTo('#content-inner')
|
||||
scrollToDest('#content-inner')
|
||||
})
|
||||
|
||||
/**
|
||||
@@ -254,50 +244,51 @@ $(function () {
|
||||
if ($figureHighlight.length) {
|
||||
const isHighlightCopy = GLOBAL_CONFIG.highlightCopy
|
||||
const isHighlightLang = GLOBAL_CONFIG.highlightLang
|
||||
const isHighlightShrink = GLOBAL_CONFIG.highlightShrink
|
||||
const isHighlightShrink = GLOBAL_CONFIG_SITE.isHighlightShrink
|
||||
|
||||
if (isHighlightCopy || isHighlightLang || isHighlightShrink !== 'none') {
|
||||
$figureHighlight.wrap('<div class="code-area-wrap"></div>').before('<div class="highlight-tools"></div>')
|
||||
if (isHighlightCopy || isHighlightLang || isHighlightShrink !== undefined) {
|
||||
$figureHighlight.prepend('<div class="highlight-tools"></div>')
|
||||
}
|
||||
|
||||
/**
|
||||
* 代碼收縮
|
||||
*/
|
||||
const $highlightTools = $('.highlight-tools')
|
||||
if (isHighlightShrink === 'true') {
|
||||
$highlightTools.append('<i class="fa fa-angle-down code-expand code-closed" aria-hidden="true"></i>')
|
||||
} else if (isHighlightShrink === 'false') {
|
||||
$highlightTools.append('<i class="fa fa-angle-down code-expand" aria-hidden="true"></i>')
|
||||
if (isHighlightShrink === true) {
|
||||
$highlightTools.append('<i class="fas fa-angle-down code-expand code-closed"></i>')
|
||||
} else if (isHighlightShrink === false) {
|
||||
$highlightTools.append('<i class="fas fa-angle-down code-expand"></i>')
|
||||
}
|
||||
|
||||
$(document).on('click', '.highlight-tools >.code-expand', function () {
|
||||
var $table = $(this).parent().next()
|
||||
var $hideItem = $(this).parent().nextAll()
|
||||
if ($(this).hasClass('code-closed')) {
|
||||
$table.css('display', 'block')
|
||||
$hideItem.css('display', 'block')
|
||||
$(this).removeClass('code-closed')
|
||||
} else {
|
||||
$table.css('display', 'none')
|
||||
$hideItem.css('display', 'none')
|
||||
$(this).addClass('code-closed')
|
||||
}
|
||||
})
|
||||
|
||||
/**
|
||||
* 代碼語言
|
||||
*/
|
||||
*/
|
||||
if (isHighlightLang) {
|
||||
var langNameIndex, langName
|
||||
$figureHighlight.each(function () {
|
||||
langNameIndex = langName = $(this).attr('class').split(' ')[1]
|
||||
if (langNameIndex === 'plain') langName = 'Code'
|
||||
$(this).prev().append('<div class="code-lang">' + langName + '</div>')
|
||||
$(this).find('.highlight-tools').append('<div class="code-lang">' + langName + '</div>')
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 代碼copy
|
||||
* copy function
|
||||
*/
|
||||
* 代碼copy
|
||||
* copy function
|
||||
*/
|
||||
if (isHighlightCopy) {
|
||||
$highlightTools.append('<div class="copy-notice"></div><i class="fa fa-clipboard" aria-hidden="true"></i>')
|
||||
$highlightTools.append('<div class="copy-notice"></div><i class="fas fa-paste copy-button"></i>')
|
||||
var copy = function (text, ctx) {
|
||||
if (document.queryCommandSupported && document.queryCommandSupported('copy')) {
|
||||
try {
|
||||
@@ -308,13 +299,11 @@ $(function () {
|
||||
$(ctx).prev('.copy-notice')
|
||||
.text(GLOBAL_CONFIG.copy.success)
|
||||
.animate({
|
||||
opacity: 1,
|
||||
right: 30
|
||||
opacity: 1
|
||||
}, 450, function () {
|
||||
setTimeout(function () {
|
||||
$(ctx).prev('.copy-notice').animate({
|
||||
opacity: 0,
|
||||
right: 0
|
||||
opacity: 0
|
||||
}, 650)
|
||||
}, 400)
|
||||
})
|
||||
@@ -326,13 +315,11 @@ $(function () {
|
||||
$(ctx).prev('.copy-notice')
|
||||
.text(GLOBAL_CONFIG.copy.error)
|
||||
.animate({
|
||||
opacity: 1,
|
||||
right: 30
|
||||
opacity: 1
|
||||
}, 650, function () {
|
||||
setTimeout(function () {
|
||||
$(ctx).prev('.copy-notice').animate({
|
||||
opacity: 0,
|
||||
right: 0
|
||||
opacity: 0
|
||||
}, 650)
|
||||
}, 400)
|
||||
})
|
||||
@@ -349,15 +336,18 @@ $(function () {
|
||||
}
|
||||
|
||||
// click events
|
||||
$(document).on('click', '.highlight-tools>.fa-clipboard', function () {
|
||||
$(document).on('click', '.highlight-tools>.copy-button', function () {
|
||||
var $buttonParent = $(this).parents('figure.highlight')
|
||||
$buttonParent.addClass('copy-true')
|
||||
var selection = window.getSelection()
|
||||
var range = document.createRange()
|
||||
range.selectNodeContents($(this).parent().next().find('.code pre')[0])
|
||||
range.selectNodeContents($buttonParent.find('table .code pre')[0])
|
||||
selection.removeAllRanges()
|
||||
selection.addRange(range)
|
||||
var text = selection.toString()
|
||||
copy(text, this)
|
||||
selection.removeAllRanges()
|
||||
$buttonParent.removeClass('copy-true')
|
||||
})
|
||||
}
|
||||
}
|
||||
@@ -392,8 +382,8 @@ $(function () {
|
||||
$(o).wrap('<div></div>')
|
||||
})
|
||||
}
|
||||
$('head').append('<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/justifiedGallery/dist/css/justifiedGallery.min.css">')
|
||||
loadScript('https://cdn.jsdelivr.net/npm/justifiedGallery/dist/js/jquery.justifiedGallery.min.js', function () {
|
||||
$('head').append(`<link rel="stylesheet" type="text/css" href="${GLOBAL_CONFIG.justifiedGallery.css}">`)
|
||||
loadScript(`${GLOBAL_CONFIG.justifiedGallery.js}`, function () {
|
||||
initJustifiedGallery($justifiedGallery)
|
||||
})
|
||||
|
||||
@@ -419,13 +409,7 @@ $(function () {
|
||||
var images = $('#article-container img:not(.gallery-group-img)').not($('a>img'))
|
||||
images.each(function (i, o) {
|
||||
var lazyloadSrc = $(o).attr('data-src') ? $(o).attr('data-src') : $(o).attr('src')
|
||||
$(o).wrap(
|
||||
'<a href="' +
|
||||
lazyloadSrc +
|
||||
'" data-fancybox="group" data-caption="' +
|
||||
$(o).attr('alt') +
|
||||
'" class="fancybox"></a>'
|
||||
)
|
||||
$(o).wrap(`<a href="${lazyloadSrc}" data-fancybox="group" data-caption="${$(o).attr('alt')}" class="fancybox"></a>`)
|
||||
})
|
||||
|
||||
$().fancybox({
|
||||
@@ -445,37 +429,41 @@ $(function () {
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* lazyload
|
||||
*/
|
||||
if (GLOBAL_CONFIG.islazyload) {
|
||||
window.lozad('img').observe()
|
||||
}
|
||||
|
||||
/**
|
||||
* 滾動處理
|
||||
*/
|
||||
var initTop = 0
|
||||
$(window).scroll(function (event) {
|
||||
var isChatShow = true
|
||||
var isChatBtnHide = typeof chatBtnHide === 'function'
|
||||
var isChatBtnShow = typeof chatBtnShow === 'function'
|
||||
$(window).scroll(throttle(function (event) {
|
||||
var currentTop = $(this).scrollTop()
|
||||
var isUp = scrollDirection(currentTop)
|
||||
var isDown = scrollDirection(currentTop)
|
||||
if (currentTop > 56) {
|
||||
if (isUp) {
|
||||
if ($pageHead.hasClass('visible')) $pageHead.removeClass('visible')
|
||||
if (isDown) {
|
||||
if ($nav.hasClass('visible')) $nav.removeClass('visible')
|
||||
if (isChatBtnShow && isChatShow === true) {
|
||||
chatBtnHide()
|
||||
isChatShow = false
|
||||
}
|
||||
} else {
|
||||
if (!$pageHead.hasClass('visible')) $pageHead.addClass('visible')
|
||||
if (!$nav.hasClass('visible')) $nav.addClass('visible')
|
||||
if (isChatBtnHide && isChatShow === false) {
|
||||
window.chatBtnShow()
|
||||
isChatShow = true
|
||||
}
|
||||
}
|
||||
$pageHead.addClass('fixed')
|
||||
$nav.addClass('fixed')
|
||||
if ($rightside.css('opacity') === '0') {
|
||||
$rightside.css({ opacity: '1', transform: 'translateX(-38px)' })
|
||||
}
|
||||
} else {
|
||||
if (currentTop === 0) {
|
||||
$pageHead.removeClass('fixed').removeClass('visible')
|
||||
$nav.removeClass('fixed').removeClass('visible')
|
||||
}
|
||||
$rightside.css({ opacity: '', transform: '' })
|
||||
}
|
||||
})
|
||||
}, 200))
|
||||
|
||||
// find the scroll direction
|
||||
function scrollDirection (currentTop) {
|
||||
@@ -488,7 +476,7 @@ $(function () {
|
||||
* 點擊滾回頂部
|
||||
*/
|
||||
$('#go-up').on('click', function () {
|
||||
scrollTo('body')
|
||||
scrollToDest('body')
|
||||
})
|
||||
|
||||
/**
|
||||
@@ -512,7 +500,7 @@ $(function () {
|
||||
closeMobileSidebar('toc')
|
||||
} else {
|
||||
e.preventDefault()
|
||||
scrollTo($(this).attr('href'))
|
||||
scrollToDest($(this).attr('href'))
|
||||
}
|
||||
})
|
||||
|
||||
@@ -643,7 +631,7 @@ $(function () {
|
||||
})
|
||||
|
||||
$(window).on('touchmove', function (e) {
|
||||
var $menusChild = $('#page-header .menus_item_child')
|
||||
var $menusChild = $('#nav .menus_item_child')
|
||||
if ($menusChild.is(':visible')) {
|
||||
$menusChild.css('display', 'none')
|
||||
}
|
||||
@@ -689,31 +677,16 @@ $(function () {
|
||||
/**
|
||||
* Darkmode
|
||||
*/
|
||||
var isFontAwesomeV5 = GLOBAL_CONFIG.isFontAwesomeV5
|
||||
var $darkModeButtom = $('#darkmode')
|
||||
if (typeof autoChangeMode !== 'undefined') {
|
||||
document.documentElement.getAttribute('data-theme') === 'dark' ? changeLightIcon() : changeDarkIcon()
|
||||
}
|
||||
|
||||
function changeLightIcon () {
|
||||
isFontAwesomeV5 ? $darkModeButtom.removeClass('fa-moon').addClass('fa-sun') : $darkModeButtom.removeClass('fa-moon-o').addClass('fa-sun-o')
|
||||
}
|
||||
|
||||
function changeDarkIcon () {
|
||||
isFontAwesomeV5 ? $darkModeButtom.removeClass('fa-sun').addClass('fa-moon') : $darkModeButtom.removeClass('fa-sun-o').addClass('fa-moon-o')
|
||||
}
|
||||
|
||||
function switchReadMode () {
|
||||
var nowMode = document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light'
|
||||
if (nowMode === 'light') {
|
||||
changeLightIcon()
|
||||
activateDarkMode()
|
||||
Cookies.set('theme', 'dark', { expires: 2 })
|
||||
Cookies.set('theme', 'dark', 2)
|
||||
if (isSnackbar) snackbarShow(GLOBAL_CONFIG.Snackbar.day_to_night)
|
||||
} else {
|
||||
changeDarkIcon()
|
||||
activateLightMode()
|
||||
Cookies.set('theme', 'light', { expires: 2 })
|
||||
Cookies.set('theme', 'light', 2)
|
||||
if (isSnackbar) snackbarShow(GLOBAL_CONFIG.Snackbar.night_to_day)
|
||||
}
|
||||
}
|
||||
@@ -729,7 +702,7 @@ $(function () {
|
||||
if (GLOBAL_CONFIG.runtime) {
|
||||
// get user config
|
||||
var $runtimeCount = $('#webinfo-runtime-count')
|
||||
var startDate = $runtimeCount.attr('start_date')
|
||||
var startDate = $runtimeCount.attr('publish_date')
|
||||
var showDateTime = function () {
|
||||
var BirthDay = new Date(startDate)
|
||||
var today = new Date()
|
||||
@@ -743,6 +716,15 @@ $(function () {
|
||||
interval = setInterval(showDateTime, 10000)
|
||||
}
|
||||
|
||||
/**
|
||||
* table overflow
|
||||
*/
|
||||
|
||||
var $table = $('#article-container table').not($('figure.highlight > table'))
|
||||
$table.each(function () {
|
||||
$(this).wrap('<div class="table-wrap"></div>')
|
||||
})
|
||||
|
||||
/**
|
||||
* 百度推送
|
||||
*/
|
||||
@@ -766,7 +748,6 @@ $(function () {
|
||||
var $hideInline = $('.hide-button')
|
||||
if ($hideInline.length) {
|
||||
$hideInline.on('click', function (e) {
|
||||
e.preventDefault()
|
||||
var $this = $(this)
|
||||
var $hideContent = $(this).next('.hide-content')
|
||||
$this.toggleClass('open')
|
||||
@@ -778,4 +759,34 @@ $(function () {
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
var $tab = $('#article-container .tabs')
|
||||
$tab.find('.tab a').on('click', function (e) {
|
||||
e.preventDefault()
|
||||
var $this = $(this)
|
||||
var $tabItem = $this.parent()
|
||||
|
||||
if (!$tabItem.hasClass('active')) {
|
||||
var $tacbContent = $this.parents('.nav-tabs').next()
|
||||
$tabItem.siblings('.active').removeClass('active')
|
||||
$tabItem.addClass('active')
|
||||
var tabId = $this.attr('href')
|
||||
$tacbContent.find('> .tab-item-content').removeClass('active')
|
||||
$tacbContent.find(`> ${tabId}`).addClass('active')
|
||||
var $isTabJustifiedGallery = $tacbContent.find(tabId).find('.justified-gallery')
|
||||
if (isJustifiedGallery && $isTabJustifiedGallery.length > 0) {
|
||||
initJustifiedGallery($isTabJustifiedGallery)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
var $cardCategory = $('.card-category-list-item.parent a')
|
||||
$cardCategory.on('click', function (e) {
|
||||
if ($(event.target).hasClass('card-category-list-icon')) {
|
||||
var $this = $(this)
|
||||
$this.find('.card-category-list-icon').toggleClass('expand')
|
||||
$this.parent().next().toggle()
|
||||
return false
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
@@ -100,7 +100,7 @@ $(function () {
|
||||
return (
|
||||
'<hr>' +
|
||||
stats +
|
||||
'<span class="algolia-logo pull_right">' +
|
||||
'<span class="algolia-logo pull-right">' +
|
||||
' <img src="' + GLOBAL_CONFIG.root + 'img/algolia.svg" alt="Algolia" />' +
|
||||
'</span>'
|
||||
)
|
||||
@@ -115,10 +115,10 @@ $(function () {
|
||||
scrollTo: false,
|
||||
showFirstLast: false,
|
||||
labels: {
|
||||
first: '<i class="fa fa-angle-double-left"></i>',
|
||||
last: '<i class="fa fa-angle-double-right"></i>',
|
||||
previous: '<i class="fa fa-angle-left"></i>',
|
||||
next: '<i class="fa fa-angle-right"></i>'
|
||||
first: '<i class="fas fa-angle-double-left"></i>',
|
||||
last: '<i class="fas fa-angle-double-right"></i>',
|
||||
previous: '<i class="fas fa-angle-left"></i>',
|
||||
next: '<i class="fas fa-angle-right"></i>'
|
||||
},
|
||||
cssClasses: {
|
||||
root: 'pagination',
|
||||
|
||||
+67
-92
File diff suppressed because one or more lines are too long
+29
-2
@@ -76,10 +76,10 @@ function isDesktop () {
|
||||
return !this.isMobile()
|
||||
}
|
||||
|
||||
function scrollTo (name) {
|
||||
function scrollToDest (name, offset = 0) {
|
||||
var scrollOffset = $(name).offset()
|
||||
$('body,html').animate({
|
||||
scrollTop: scrollOffset.top
|
||||
scrollTop: scrollOffset.top - offset
|
||||
})
|
||||
};
|
||||
|
||||
@@ -117,6 +117,33 @@ function snackbarShow (text, showAction, duration) {
|
||||
})
|
||||
}
|
||||
|
||||
var Cookies = {
|
||||
get: function (name) {
|
||||
const value = `; ${document.cookie}`
|
||||
const parts = value.split(`; ${name}=`)
|
||||
if (parts.length === 2) return parts.pop().split(';').shift()
|
||||
},
|
||||
set: function (name, value, days) {
|
||||
var expires = ''
|
||||
if (days) {
|
||||
var date = new Date()
|
||||
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000))
|
||||
expires = '; expires=' + date.toUTCString()
|
||||
}
|
||||
document.cookie = name + '=' + (value || '') + expires + '; path=/'
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* lazyload
|
||||
*/
|
||||
if (GLOBAL_CONFIG.islazyload) {
|
||||
window.lazyLoadOptions = {
|
||||
elements_selector: 'img',
|
||||
threshold: 0
|
||||
}
|
||||
}
|
||||
|
||||
window.debounce = debounce
|
||||
|
||||
window.throttle = throttle
|
||||
|
||||
Reference in New Issue
Block a user