mirror of
https://github.com/jerryc127/hexo-theme-butterfly.git
synced 2026-10-03 22:22:00 +08:00
update
This commit is contained in:
Jerry committed
1 parent
1f3ea55890
commit
f605e6dc89
210 files changed
+16126
-16118
No files matched your search
+280
-280
@@ -1,280 +1,280 @@
|
||||
.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-family: 'Font Awesome 6 Free'
|
||||
text-rendering: auto
|
||||
-webkit-font-smoothing: antialiased
|
||||
|
||||
addBorderRadius(x = 6, hide = false)
|
||||
if hexo-config('rounded_corners_ui')
|
||||
border-radius: unit(x, 'px')
|
||||
|
||||
if hide
|
||||
overflow: hidden
|
||||
|
||||
// card hover
|
||||
.cardHover
|
||||
background: var(--card-bg)
|
||||
box-shadow: var(--card-box-shadow)
|
||||
transition: all .3s
|
||||
addBorderRadius(8)
|
||||
|
||||
&:hover
|
||||
box-shadow: var(--card-hover-box-shadow)
|
||||
|
||||
.imgHover
|
||||
width: 100%
|
||||
height: 100%
|
||||
transition: filter 375ms ease-in .2s, transform .6s
|
||||
object-fit: cover
|
||||
|
||||
&:hover
|
||||
transform: scale(1.1)
|
||||
|
||||
.postImgHover
|
||||
&:hover
|
||||
.cover
|
||||
opacity: .5
|
||||
transform: scale(1.1)
|
||||
|
||||
.cover
|
||||
width: 100%
|
||||
height: 100%
|
||||
opacity: .4
|
||||
transition: all .6s, filter 375ms ease-in .2s
|
||||
object-fit: cover
|
||||
|
||||
.list-beauty
|
||||
list-style: none
|
||||
|
||||
li
|
||||
position: relative
|
||||
padding: .12em .4em .12em 1.4em
|
||||
|
||||
&:hover
|
||||
&:before
|
||||
border-color: var(--pseudo-hover)
|
||||
|
||||
&:before
|
||||
position: absolute
|
||||
top: .67em
|
||||
left: 0
|
||||
width: w = .43em
|
||||
height: h = w
|
||||
border: .5 * w solid $light-blue
|
||||
border-radius: w
|
||||
background: transparent
|
||||
content: ''
|
||||
cursor: pointer
|
||||
transition: all .3s ease-out
|
||||
|
||||
.custom-hr
|
||||
position: relative
|
||||
margin: 40px auto
|
||||
border: 2px dashed var(--hr-border)
|
||||
|
||||
if hexo-config('hr_icon.enable')
|
||||
width: calc(100% - 4px)
|
||||
|
||||
&:hover
|
||||
&:before
|
||||
left: calc(95% - 20px)
|
||||
|
||||
&:before
|
||||
position: absolute
|
||||
top: $hr-icon-top
|
||||
left: 5%
|
||||
z-index: 1
|
||||
color: var(--hr-before-color)
|
||||
content: $hr-icon
|
||||
font-size: 20px
|
||||
line-height: 1
|
||||
transition: all 1s ease-in-out
|
||||
@extend .fontawesomeIcon
|
||||
|
||||
.verticalCenter
|
||||
position: absolute
|
||||
top: 50%
|
||||
width: 100%
|
||||
transform: translate(0, -50%)
|
||||
|
||||
maxWidth600()
|
||||
@media screen and (max-width: 600px)
|
||||
{block}
|
||||
|
||||
maxWidth768()
|
||||
@media screen and (max-width: 768px)
|
||||
{block}
|
||||
|
||||
minWidth768()
|
||||
@media screen and (min-width: 768px)
|
||||
{block}
|
||||
|
||||
maxWidth1024()
|
||||
@media screen and (max-width: 1024px)
|
||||
{block}
|
||||
|
||||
minWidth1024()
|
||||
@media screen and (min-width: 1024px)
|
||||
{block}
|
||||
|
||||
maxWidth900()
|
||||
@media screen and (max-width: 900px)
|
||||
{block}
|
||||
|
||||
minWidth901()
|
||||
@media screen and (min-width: 901px)
|
||||
{block}
|
||||
|
||||
minWidth900()
|
||||
@media screen and (min-width: 900px)
|
||||
{block}
|
||||
|
||||
minWidth2000()
|
||||
@media screen and (min-width: 2000px)
|
||||
{block}
|
||||
|
||||
// animation
|
||||
if hexo-config('enter_transitions')
|
||||
#content-inner,
|
||||
#footer
|
||||
animation: bottom-top 1s
|
||||
|
||||
#page-header:not(.full_page),
|
||||
#nav.show
|
||||
animation: header-effect 1s
|
||||
|
||||
#site-title,
|
||||
#site-subtitle
|
||||
animation: titleScale 1s
|
||||
|
||||
canvas:not(#ribbon-canvas),
|
||||
#web_bg
|
||||
animation: to_show 4s
|
||||
|
||||
#ribbon-canvas
|
||||
animation: ribbon_to_show 4s
|
||||
|
||||
#sidebar-menus
|
||||
&.open
|
||||
for i in 1 2 3 4
|
||||
> :nth-child({i})
|
||||
animation: sidebarItem (i / 5s)
|
||||
|
||||
.scroll-down-effects
|
||||
animation: scroll-down-effect 1.5s infinite
|
||||
|
||||
if hexo-config('avatar.effect') == true
|
||||
.avatar-img
|
||||
animation: avatar_turn_around 2s linear infinite
|
||||
|
||||
.reward-main
|
||||
animation: donate_effcet .3s .1s ease both
|
||||
|
||||
@keyframes scroll-down-effect
|
||||
0%
|
||||
opacity: .4
|
||||
transform: translate(0, 0)
|
||||
|
||||
50%
|
||||
opacity: 1
|
||||
transform: translate(0, -16px)
|
||||
|
||||
100%
|
||||
opacity: .4
|
||||
transform: translate(0, 0)
|
||||
|
||||
@keyframes header-effect
|
||||
0%
|
||||
transform: translateY(-35px)
|
||||
|
||||
100%
|
||||
transform: translateY(0)
|
||||
|
||||
@keyframes bottom-top
|
||||
0%
|
||||
transform: translateY(35px)
|
||||
|
||||
100%
|
||||
transform: translateY(0)
|
||||
|
||||
@keyframes titleScale
|
||||
0%
|
||||
opacity: 0
|
||||
transform: scale(.7)
|
||||
|
||||
100%
|
||||
opacity: 1
|
||||
transform: scale(1)
|
||||
|
||||
@keyframes search_close
|
||||
0%
|
||||
opacity: 1
|
||||
transform: scale(1)
|
||||
|
||||
100%
|
||||
opacity: 0
|
||||
transform: scale(.7)
|
||||
|
||||
@keyframes to_show
|
||||
0%
|
||||
opacity: 0
|
||||
|
||||
100%
|
||||
opacity: 1
|
||||
|
||||
@keyframes to_hide
|
||||
0%
|
||||
opacity: 1
|
||||
|
||||
100%
|
||||
opacity: 0
|
||||
|
||||
@keyframes ribbon_to_show
|
||||
0%
|
||||
opacity: 0
|
||||
|
||||
100%
|
||||
opacity: hexo-config('canvas_ribbon.alpha')
|
||||
|
||||
@keyframes avatar_turn_around
|
||||
from
|
||||
transform: rotate(0)
|
||||
|
||||
to
|
||||
transform: rotate(360deg)
|
||||
|
||||
@keyframes sub_menus
|
||||
0%
|
||||
opacity: 0
|
||||
transform: translateY(10px)
|
||||
|
||||
100%
|
||||
opacity: 1
|
||||
transform: translateY(0)
|
||||
|
||||
@keyframes donate_effcet
|
||||
0%
|
||||
opacity: 0
|
||||
transform: translateY(-20px)
|
||||
|
||||
100%
|
||||
opacity: 1
|
||||
transform: translateY(0)
|
||||
|
||||
@keyframes sidebarItem
|
||||
0%
|
||||
transform: translateX(200px)
|
||||
|
||||
100%
|
||||
transform: translateX(0)
|
||||
.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-family: 'Font Awesome 6 Free'
|
||||
text-rendering: auto
|
||||
-webkit-font-smoothing: antialiased
|
||||
|
||||
addBorderRadius(x = 6, hide = false)
|
||||
if hexo-config('rounded_corners_ui')
|
||||
border-radius: unit(x, 'px')
|
||||
|
||||
if hide
|
||||
overflow: hidden
|
||||
|
||||
// card hover
|
||||
.cardHover
|
||||
background: var(--card-bg)
|
||||
box-shadow: var(--card-box-shadow)
|
||||
transition: all .3s
|
||||
addBorderRadius(8)
|
||||
|
||||
&:hover
|
||||
box-shadow: var(--card-hover-box-shadow)
|
||||
|
||||
.imgHover
|
||||
width: 100%
|
||||
height: 100%
|
||||
transition: filter 375ms ease-in .2s, transform .6s
|
||||
object-fit: cover
|
||||
|
||||
&:hover
|
||||
transform: scale(1.1)
|
||||
|
||||
.postImgHover
|
||||
&:hover
|
||||
.cover
|
||||
opacity: .5
|
||||
transform: scale(1.1)
|
||||
|
||||
.cover
|
||||
width: 100%
|
||||
height: 100%
|
||||
opacity: .4
|
||||
transition: all .6s, filter 375ms ease-in .2s
|
||||
object-fit: cover
|
||||
|
||||
.list-beauty
|
||||
list-style: none
|
||||
|
||||
li
|
||||
position: relative
|
||||
padding: .12em .4em .12em 1.4em
|
||||
|
||||
&:hover
|
||||
&:before
|
||||
border-color: var(--pseudo-hover)
|
||||
|
||||
&:before
|
||||
position: absolute
|
||||
top: .67em
|
||||
left: 0
|
||||
width: w = .43em
|
||||
height: h = w
|
||||
border: .5 * w solid $light-blue
|
||||
border-radius: w
|
||||
background: transparent
|
||||
content: ''
|
||||
cursor: pointer
|
||||
transition: all .3s ease-out
|
||||
|
||||
.custom-hr
|
||||
position: relative
|
||||
margin: 40px auto
|
||||
border: 2px dashed var(--hr-border)
|
||||
|
||||
if hexo-config('hr_icon.enable')
|
||||
width: calc(100% - 4px)
|
||||
|
||||
&:hover
|
||||
&:before
|
||||
left: calc(95% - 20px)
|
||||
|
||||
&:before
|
||||
position: absolute
|
||||
top: $hr-icon-top
|
||||
left: 5%
|
||||
z-index: 1
|
||||
color: var(--hr-before-color)
|
||||
content: $hr-icon
|
||||
font-size: 20px
|
||||
line-height: 1
|
||||
transition: all 1s ease-in-out
|
||||
@extend .fontawesomeIcon
|
||||
|
||||
.verticalCenter
|
||||
position: absolute
|
||||
top: 50%
|
||||
width: 100%
|
||||
transform: translate(0, -50%)
|
||||
|
||||
maxWidth600()
|
||||
@media screen and (max-width: 600px)
|
||||
{block}
|
||||
|
||||
maxWidth768()
|
||||
@media screen and (max-width: 768px)
|
||||
{block}
|
||||
|
||||
minWidth768()
|
||||
@media screen and (min-width: 768px)
|
||||
{block}
|
||||
|
||||
maxWidth1024()
|
||||
@media screen and (max-width: 1024px)
|
||||
{block}
|
||||
|
||||
minWidth1024()
|
||||
@media screen and (min-width: 1024px)
|
||||
{block}
|
||||
|
||||
maxWidth900()
|
||||
@media screen and (max-width: 900px)
|
||||
{block}
|
||||
|
||||
minWidth901()
|
||||
@media screen and (min-width: 901px)
|
||||
{block}
|
||||
|
||||
minWidth900()
|
||||
@media screen and (min-width: 900px)
|
||||
{block}
|
||||
|
||||
minWidth2000()
|
||||
@media screen and (min-width: 2000px)
|
||||
{block}
|
||||
|
||||
// animation
|
||||
if hexo-config('enter_transitions')
|
||||
#content-inner,
|
||||
#footer
|
||||
animation: bottom-top 1s
|
||||
|
||||
#page-header:not(.full_page),
|
||||
#nav.show
|
||||
animation: header-effect 1s
|
||||
|
||||
#site-title,
|
||||
#site-subtitle
|
||||
animation: titleScale 1s
|
||||
|
||||
canvas:not(#ribbon-canvas),
|
||||
#web_bg
|
||||
animation: to_show 4s
|
||||
|
||||
#ribbon-canvas
|
||||
animation: ribbon_to_show 4s
|
||||
|
||||
#sidebar-menus
|
||||
&.open
|
||||
for i in 1 2 3 4
|
||||
> :nth-child({i})
|
||||
animation: sidebarItem (i / 5s)
|
||||
|
||||
.scroll-down-effects
|
||||
animation: scroll-down-effect 1.5s infinite
|
||||
|
||||
if hexo-config('avatar.effect') == true
|
||||
.avatar-img
|
||||
animation: avatar_turn_around 2s linear infinite
|
||||
|
||||
.reward-main
|
||||
animation: donate_effcet .3s .1s ease both
|
||||
|
||||
@keyframes scroll-down-effect
|
||||
0%
|
||||
opacity: .4
|
||||
transform: translate(0, 0)
|
||||
|
||||
50%
|
||||
opacity: 1
|
||||
transform: translate(0, -16px)
|
||||
|
||||
100%
|
||||
opacity: .4
|
||||
transform: translate(0, 0)
|
||||
|
||||
@keyframes header-effect
|
||||
0%
|
||||
transform: translateY(-35px)
|
||||
|
||||
100%
|
||||
transform: translateY(0)
|
||||
|
||||
@keyframes bottom-top
|
||||
0%
|
||||
transform: translateY(35px)
|
||||
|
||||
100%
|
||||
transform: translateY(0)
|
||||
|
||||
@keyframes titleScale
|
||||
0%
|
||||
opacity: 0
|
||||
transform: scale(.7)
|
||||
|
||||
100%
|
||||
opacity: 1
|
||||
transform: scale(1)
|
||||
|
||||
@keyframes search_close
|
||||
0%
|
||||
opacity: 1
|
||||
transform: scale(1)
|
||||
|
||||
100%
|
||||
opacity: 0
|
||||
transform: scale(.7)
|
||||
|
||||
@keyframes to_show
|
||||
0%
|
||||
opacity: 0
|
||||
|
||||
100%
|
||||
opacity: 1
|
||||
|
||||
@keyframes to_hide
|
||||
0%
|
||||
opacity: 1
|
||||
|
||||
100%
|
||||
opacity: 0
|
||||
|
||||
@keyframes ribbon_to_show
|
||||
0%
|
||||
opacity: 0
|
||||
|
||||
100%
|
||||
opacity: hexo-config('canvas_ribbon.alpha')
|
||||
|
||||
@keyframes avatar_turn_around
|
||||
from
|
||||
transform: rotate(0)
|
||||
|
||||
to
|
||||
transform: rotate(360deg)
|
||||
|
||||
@keyframes sub_menus
|
||||
0%
|
||||
opacity: 0
|
||||
transform: translateY(10px)
|
||||
|
||||
100%
|
||||
opacity: 1
|
||||
transform: translateY(0)
|
||||
|
||||
@keyframes donate_effcet
|
||||
0%
|
||||
opacity: 0
|
||||
transform: translateY(-20px)
|
||||
|
||||
100%
|
||||
opacity: 1
|
||||
transform: translateY(0)
|
||||
|
||||
@keyframes sidebarItem
|
||||
0%
|
||||
transform: translateX(200px)
|
||||
|
||||
100%
|
||||
transform: translateX(0)
|
||||
+224
-224
@@ -1,224 +1,224 @@
|
||||
:root
|
||||
--global-font-size: $font-size
|
||||
--global-bg: $body-bg
|
||||
--font-color: $font-black
|
||||
--hr-border: lighten($theme-hr-color, 50%)
|
||||
--hr-before-color: lighten($theme-hr-color, 30%)
|
||||
--search-bg: $search-bg
|
||||
--search-input-color: $search-input-color
|
||||
--search-a-color: $search-a-color
|
||||
--preloader-bg: $preloader-bg
|
||||
--preloader-color: $preloader-word-color
|
||||
--tab-border-color: $tab-border-color
|
||||
--tab-botton-bg: $tab-botton-bg
|
||||
--tab-botton-color: $tab-botton-color
|
||||
--tab-button-hover-bg: $tab-button-hover-bg
|
||||
--tab-button-active-bg: $tab-button-active-bg
|
||||
--card-bg: $card-bg
|
||||
--card-meta: $theme-meta-color
|
||||
--sidebar-bg: $sidebar-background
|
||||
--sidebar-menu-bg: $white
|
||||
--btn-hover-color: $button-hover-color
|
||||
--btn-color: $button-color
|
||||
--btn-bg: $button-bg
|
||||
--text-bg-hover: rgba($text-bg-hover, .7)
|
||||
--light-grey: $light-grey
|
||||
--dark-grey: $dark-grey
|
||||
--white: $white
|
||||
--text-highlight-color: $text-highlight-color
|
||||
--blockquote-color: $blockquote-color
|
||||
--blockquote-bg: $blockquote-background-color
|
||||
--reward-pop: $reward-pop-up-bg
|
||||
--toc-link-color: $toc-link-color
|
||||
--card-box-shadow: 0 3px 8px 6px rgba(7, 17, 27, .05)
|
||||
--card-hover-box-shadow: 0 3px 8px 6px rgba(7, 17, 27, .09)
|
||||
--pseudo-hover: $pseudo-hover
|
||||
--headline-presudo: #a0a0a0
|
||||
--scrollbar-color: $scrollbar-color
|
||||
--default-bg-color: $theme-color
|
||||
--zoom-bg: #fff
|
||||
--mark-bg: alpha($dark-black, .3)
|
||||
|
||||
body
|
||||
position: relative
|
||||
overflow-y: scroll
|
||||
min-height: 100%
|
||||
background: var(--global-bg)
|
||||
color: var(--font-color)
|
||||
font-size: var(--global-font-size)
|
||||
font-family: $font-family
|
||||
line-height: $text-line-height
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0)
|
||||
scroll-behavior: smooth
|
||||
|
||||
if !hexo-config('copy.enable')
|
||||
user-select: none
|
||||
-webkit-user-select: none
|
||||
|
||||
// scrollbar - firefox
|
||||
@-moz-document url-prefix()
|
||||
*
|
||||
scrollbar-width: thin
|
||||
scrollbar-color: var(--scrollbar-color) transparent
|
||||
|
||||
// scrollbar - chrome/safari
|
||||
*::-webkit-scrollbar
|
||||
width: 5px
|
||||
height: 5px
|
||||
|
||||
*::-webkit-scrollbar-thumb
|
||||
background: var(--scrollbar-color)
|
||||
|
||||
*::-webkit-scrollbar-track
|
||||
background-color: transparent
|
||||
|
||||
input::placeholder
|
||||
color: var(--font-color)
|
||||
|
||||
if hexo-config('background')
|
||||
#web_bg
|
||||
position: fixed
|
||||
z-index: -999
|
||||
width: 100%
|
||||
height: 100%
|
||||
background-attachment: local
|
||||
background-position: center
|
||||
background-size: cover
|
||||
background-repeat: no-repeat
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6
|
||||
position: relative
|
||||
margin: 20px 0 14px
|
||||
color: var(--text-highlight-color)
|
||||
font-weight: bold
|
||||
|
||||
code
|
||||
font-size: inherit !important
|
||||
|
||||
*
|
||||
box-sizing: border-box
|
||||
|
||||
.table-wrap
|
||||
overflow-x: scroll
|
||||
margin: 0 0 20px
|
||||
|
||||
if hexo-config('rounded_corners_ui')
|
||||
$borderRadius = 5px
|
||||
border-radius: $borderRadius
|
||||
|
||||
table
|
||||
border-radius: $borderRadius
|
||||
|
||||
thead > tr:first-child
|
||||
th:first-child
|
||||
border-top-left-radius: $borderRadius
|
||||
|
||||
th:last-child
|
||||
border-top-right-radius: $borderRadius
|
||||
|
||||
tbody > tr:last-child
|
||||
td:first-child
|
||||
border-bottom-left-radius: $borderRadius
|
||||
|
||||
td:last-child
|
||||
border-bottom-right-radius: $borderRadius
|
||||
|
||||
table
|
||||
display: table
|
||||
width: 100%
|
||||
border-spacing: 0
|
||||
border-collapse: separate
|
||||
border-top: 1px solid var(--light-grey)
|
||||
border-left: 1px solid var(--light-grey)
|
||||
empty-cells: show
|
||||
|
||||
thead
|
||||
background: alpha($table-thead-bg, 10%)
|
||||
|
||||
th,
|
||||
td
|
||||
padding: 6px 12px
|
||||
border: 1px solid var(--light-grey)
|
||||
border-top: none
|
||||
border-left: none
|
||||
vertical-align: middle
|
||||
|
||||
*::selection
|
||||
background: $theme-text-selection-color
|
||||
color: #F7F7F7
|
||||
|
||||
button
|
||||
padding: 0
|
||||
outline: 0
|
||||
border: none
|
||||
background: none
|
||||
cursor: pointer
|
||||
touch-action: manipulation
|
||||
|
||||
a
|
||||
color: $a-link-color
|
||||
text-decoration: none
|
||||
word-wrap: break-word
|
||||
transition: all .2s
|
||||
overflow-wrap: break-word
|
||||
|
||||
&:hover
|
||||
color: $light-blue
|
||||
|
||||
// font
|
||||
if $site-name-font
|
||||
#site-title,
|
||||
#site-subtitle,
|
||||
.site-name,
|
||||
#aside-content .author-info-name,
|
||||
#aside-content .author-info-description
|
||||
font-family: $site-name-font
|
||||
|
||||
.text-center
|
||||
text-align: center
|
||||
|
||||
.text-right
|
||||
text-align: right
|
||||
|
||||
img
|
||||
&[src=''],
|
||||
&:not([src])
|
||||
opacity: 0
|
||||
|
||||
// lazyload blur
|
||||
if hexo-config('lazyload.enable') && hexo-config('lazyload.blur') && !hexo-config('lazyload.placeholder')
|
||||
img
|
||||
&[data-lazy-src]:not(.loaded)
|
||||
filter: blur(8px) brightness(1)
|
||||
|
||||
&[data-lazy-src].error
|
||||
filter: none
|
||||
|
||||
.img-alt
|
||||
margin: -10px 0 10px
|
||||
color: #858585
|
||||
|
||||
&:hover
|
||||
text-decoration: none !important
|
||||
|
||||
blockquote
|
||||
margin: 0 0 20px
|
||||
padding: 7px 15px
|
||||
border-left: 4px solid $blockquote-padding-color
|
||||
background-color: var(--blockquote-bg)
|
||||
color: var(--blockquote-color)
|
||||
addBorderRadius()
|
||||
|
||||
footer
|
||||
cite
|
||||
&:before
|
||||
padding: 0 5px
|
||||
content: '—'
|
||||
|
||||
& > :last-child
|
||||
margin-bottom: 0 !important
|
||||
:root
|
||||
--global-font-size: $font-size
|
||||
--global-bg: $body-bg
|
||||
--font-color: $font-black
|
||||
--hr-border: lighten($theme-hr-color, 50%)
|
||||
--hr-before-color: lighten($theme-hr-color, 30%)
|
||||
--search-bg: $search-bg
|
||||
--search-input-color: $search-input-color
|
||||
--search-a-color: $search-a-color
|
||||
--preloader-bg: $preloader-bg
|
||||
--preloader-color: $preloader-word-color
|
||||
--tab-border-color: $tab-border-color
|
||||
--tab-botton-bg: $tab-botton-bg
|
||||
--tab-botton-color: $tab-botton-color
|
||||
--tab-button-hover-bg: $tab-button-hover-bg
|
||||
--tab-button-active-bg: $tab-button-active-bg
|
||||
--card-bg: $card-bg
|
||||
--card-meta: $theme-meta-color
|
||||
--sidebar-bg: $sidebar-background
|
||||
--sidebar-menu-bg: $white
|
||||
--btn-hover-color: $button-hover-color
|
||||
--btn-color: $button-color
|
||||
--btn-bg: $button-bg
|
||||
--text-bg-hover: rgba($text-bg-hover, .7)
|
||||
--light-grey: $light-grey
|
||||
--dark-grey: $dark-grey
|
||||
--white: $white
|
||||
--text-highlight-color: $text-highlight-color
|
||||
--blockquote-color: $blockquote-color
|
||||
--blockquote-bg: $blockquote-background-color
|
||||
--reward-pop: $reward-pop-up-bg
|
||||
--toc-link-color: $toc-link-color
|
||||
--card-box-shadow: 0 3px 8px 6px rgba(7, 17, 27, .05)
|
||||
--card-hover-box-shadow: 0 3px 8px 6px rgba(7, 17, 27, .09)
|
||||
--pseudo-hover: $pseudo-hover
|
||||
--headline-presudo: #a0a0a0
|
||||
--scrollbar-color: $scrollbar-color
|
||||
--default-bg-color: $theme-color
|
||||
--zoom-bg: #fff
|
||||
--mark-bg: alpha($dark-black, .3)
|
||||
|
||||
body
|
||||
position: relative
|
||||
overflow-y: scroll
|
||||
min-height: 100%
|
||||
background: var(--global-bg)
|
||||
color: var(--font-color)
|
||||
font-size: var(--global-font-size)
|
||||
font-family: $font-family
|
||||
line-height: $text-line-height
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0)
|
||||
scroll-behavior: smooth
|
||||
|
||||
if !hexo-config('copy.enable')
|
||||
user-select: none
|
||||
-webkit-user-select: none
|
||||
|
||||
// scrollbar - firefox
|
||||
@-moz-document url-prefix()
|
||||
*
|
||||
scrollbar-width: thin
|
||||
scrollbar-color: var(--scrollbar-color) transparent
|
||||
|
||||
// scrollbar - chrome/safari
|
||||
*::-webkit-scrollbar
|
||||
width: 5px
|
||||
height: 5px
|
||||
|
||||
*::-webkit-scrollbar-thumb
|
||||
background: var(--scrollbar-color)
|
||||
|
||||
*::-webkit-scrollbar-track
|
||||
background-color: transparent
|
||||
|
||||
input::placeholder
|
||||
color: var(--font-color)
|
||||
|
||||
if hexo-config('background')
|
||||
#web_bg
|
||||
position: fixed
|
||||
z-index: -999
|
||||
width: 100%
|
||||
height: 100%
|
||||
background-attachment: local
|
||||
background-position: center
|
||||
background-size: cover
|
||||
background-repeat: no-repeat
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6
|
||||
position: relative
|
||||
margin: 20px 0 14px
|
||||
color: var(--text-highlight-color)
|
||||
font-weight: bold
|
||||
|
||||
code
|
||||
font-size: inherit !important
|
||||
|
||||
*
|
||||
box-sizing: border-box
|
||||
|
||||
.table-wrap
|
||||
overflow-x: scroll
|
||||
margin: 0 0 20px
|
||||
|
||||
if hexo-config('rounded_corners_ui')
|
||||
$borderRadius = 5px
|
||||
border-radius: $borderRadius
|
||||
|
||||
table
|
||||
border-radius: $borderRadius
|
||||
|
||||
thead > tr:first-child
|
||||
th:first-child
|
||||
border-top-left-radius: $borderRadius
|
||||
|
||||
th:last-child
|
||||
border-top-right-radius: $borderRadius
|
||||
|
||||
tbody > tr:last-child
|
||||
td:first-child
|
||||
border-bottom-left-radius: $borderRadius
|
||||
|
||||
td:last-child
|
||||
border-bottom-right-radius: $borderRadius
|
||||
|
||||
table
|
||||
display: table
|
||||
width: 100%
|
||||
border-spacing: 0
|
||||
border-collapse: separate
|
||||
border-top: 1px solid var(--light-grey)
|
||||
border-left: 1px solid var(--light-grey)
|
||||
empty-cells: show
|
||||
|
||||
thead
|
||||
background: alpha($table-thead-bg, 10%)
|
||||
|
||||
th,
|
||||
td
|
||||
padding: 6px 12px
|
||||
border: 1px solid var(--light-grey)
|
||||
border-top: none
|
||||
border-left: none
|
||||
vertical-align: middle
|
||||
|
||||
*::selection
|
||||
background: $theme-text-selection-color
|
||||
color: #F7F7F7
|
||||
|
||||
button
|
||||
padding: 0
|
||||
outline: 0
|
||||
border: none
|
||||
background: none
|
||||
cursor: pointer
|
||||
touch-action: manipulation
|
||||
|
||||
a
|
||||
color: $a-link-color
|
||||
text-decoration: none
|
||||
word-wrap: break-word
|
||||
transition: all .2s
|
||||
overflow-wrap: break-word
|
||||
|
||||
&:hover
|
||||
color: $light-blue
|
||||
|
||||
// font
|
||||
if $site-name-font
|
||||
#site-title,
|
||||
#site-subtitle,
|
||||
.site-name,
|
||||
#aside-content .author-info-name,
|
||||
#aside-content .author-info-description
|
||||
font-family: $site-name-font
|
||||
|
||||
.text-center
|
||||
text-align: center
|
||||
|
||||
.text-right
|
||||
text-align: right
|
||||
|
||||
img
|
||||
&[src=''],
|
||||
&:not([src])
|
||||
opacity: 0
|
||||
|
||||
// lazyload blur
|
||||
if hexo-config('lazyload.enable') && hexo-config('lazyload.blur') && !hexo-config('lazyload.placeholder')
|
||||
img
|
||||
&[data-lazy-src]:not(.loaded)
|
||||
filter: blur(8px) brightness(1)
|
||||
|
||||
&[data-lazy-src].error
|
||||
filter: none
|
||||
|
||||
.img-alt
|
||||
margin: -10px 0 10px
|
||||
color: #858585
|
||||
|
||||
&:hover
|
||||
text-decoration: none !important
|
||||
|
||||
blockquote
|
||||
margin: 0 0 20px
|
||||
padding: 7px 15px
|
||||
border-left: 4px solid $blockquote-padding-color
|
||||
background-color: var(--blockquote-bg)
|
||||
color: var(--blockquote-color)
|
||||
addBorderRadius()
|
||||
|
||||
footer
|
||||
cite
|
||||
&:before
|
||||
padding: 0 5px
|
||||
content: '—'
|
||||
|
||||
& > :last-child
|
||||
margin-bottom: 0 !important
|
||||
@@ -1,281 +1,281 @@
|
||||
$highlight_theme = hexo-config('code_blocks.theme')
|
||||
$highlight_macstyle = hexo-config('code_blocks.macStyle')
|
||||
wordWrap = $highlight_enable && !$highlight_line_number && hexo-config('code_blocks.word_wrap')
|
||||
|
||||
@require 'theme'
|
||||
|
||||
:root
|
||||
--hl-color: $highlight-foreground
|
||||
--hl-bg: $highlight-background
|
||||
--hltools-bg: $highlight-tools.bg-color
|
||||
--hltools-color: $highlight-tools.color
|
||||
--hlnumber-bg: $highlight-gutter.bg-color
|
||||
--hlnumber-color: $highlight-gutter.color
|
||||
--hlscrollbar-bg: $highlight-scrollbar
|
||||
--hlexpand-bg: linear-gradient(180deg, rgba($highlight-background, .6), rgba($highlight-background, .9))
|
||||
|
||||
[data-theme='dark']
|
||||
--hl-color: alpha(#FFFFFF, .7)
|
||||
--hl-bg: lighten(#121212, 2)
|
||||
--hltools-bg: lighten(#121212, 3)
|
||||
--hltools-color: #90a4ae
|
||||
--hlnumber-bg: lighten(#121212, 2)
|
||||
--hlnumber-color: alpha(#FFFFFF, .4)
|
||||
--hlscrollbar-bg: lighten(#121212, 5)
|
||||
--hlexpand-bg: linear-gradient(180deg, rgba(lighten(#121212, 2), .6), rgba(lighten(#121212, 2), .9))
|
||||
|
||||
if $highlight_enable
|
||||
@require 'highlight/index'
|
||||
|
||||
if $prismjs_enable
|
||||
@require 'prismjs/index'
|
||||
|
||||
$code-block
|
||||
overflow: auto
|
||||
margin: 0 0 20px
|
||||
padding: 0
|
||||
background: var(--hl-bg)
|
||||
color: var(--hl-color)
|
||||
line-height: $line-height-code-block
|
||||
|
||||
if wordWrap
|
||||
counter-reset: line
|
||||
white-space: pre-wrap
|
||||
|
||||
.container
|
||||
pre,
|
||||
code
|
||||
font-size: $code-font-size
|
||||
font-family: $code-font-family !important
|
||||
addBorderRadius()
|
||||
|
||||
code
|
||||
padding: 2px 5px
|
||||
background: $code-background
|
||||
color: $code-foreground
|
||||
|
||||
pre
|
||||
@extend $code-block
|
||||
padding: 10px 20px
|
||||
|
||||
code
|
||||
padding: 0
|
||||
background: none
|
||||
color: var(--hl-color)
|
||||
text-shadow: none
|
||||
|
||||
figure.highlight
|
||||
@extend $code-block
|
||||
position: relative
|
||||
addBorderRadius()
|
||||
|
||||
pre
|
||||
margin: 0
|
||||
padding: 8px 0
|
||||
border: none
|
||||
|
||||
figcaption,
|
||||
.caption
|
||||
padding: 6px 0 2px 14px
|
||||
font-size: $code-font-size
|
||||
line-height: 1em
|
||||
|
||||
a
|
||||
float: right
|
||||
padding-right: 10px
|
||||
color: var(--hl-color)
|
||||
|
||||
&:hover
|
||||
border-bottom-color: var(--hl-color)
|
||||
|
||||
&.copy-true
|
||||
user-select: all
|
||||
-webkit-user-select: all
|
||||
|
||||
& > table,
|
||||
& > pre
|
||||
display: block !important
|
||||
opacity: 0
|
||||
|
||||
.highlight-tools
|
||||
display: flex
|
||||
align-items: center
|
||||
padding: 0 8px
|
||||
min-height: 24px
|
||||
height: 2.15em
|
||||
background: var(--hltools-bg)
|
||||
color: var(--hltools-color)
|
||||
font-size: $code-font-size
|
||||
overflow: hidden
|
||||
|
||||
& > *
|
||||
padding: 5px
|
||||
|
||||
i
|
||||
cursor: pointer
|
||||
transition: all .3s
|
||||
|
||||
&:hover
|
||||
color: $theme-color
|
||||
|
||||
&.closed
|
||||
& ~ *
|
||||
display: none
|
||||
|
||||
.expand
|
||||
transform: rotate(-90deg)
|
||||
|
||||
if !$highlight_macstyle
|
||||
& > .macStyle
|
||||
padding: 0
|
||||
|
||||
.code-lang
|
||||
flex: 1
|
||||
text-transform: uppercase
|
||||
font-weight: bold
|
||||
font-size: 1.15em
|
||||
user-select: none
|
||||
-webkit-user-select: none
|
||||
padding 2px
|
||||
|
||||
.copy-notice
|
||||
padding-right: 2px
|
||||
opacity: 0
|
||||
transition: opacity .4s
|
||||
|
||||
if hexo-config('code_blocks.language')
|
||||
.code-lang
|
||||
flex: 1
|
||||
else if (!$highlight_macstyle && hexo-config('code_blocks.shrink') != 'none')
|
||||
& > div:nth-child(2)
|
||||
flex: 1
|
||||
else
|
||||
.macStyle
|
||||
flex: 1
|
||||
|
||||
.gutter
|
||||
user-select: none
|
||||
-webkit-user-select: none
|
||||
|
||||
.gist table
|
||||
width: auto
|
||||
|
||||
td
|
||||
border: none
|
||||
|
||||
if $highlight_macstyle
|
||||
.container
|
||||
figure.highlight
|
||||
margin: 0 0 24px
|
||||
border-radius: 7px
|
||||
box-shadow: 0 5px 10px 0 $highlight-mac-border
|
||||
-webkit-transform: translateZ(0)
|
||||
|
||||
.highlight-tools
|
||||
.macStyle
|
||||
display: flex
|
||||
|
||||
& > *
|
||||
margin-right: 8px
|
||||
width: 12px
|
||||
height: 12px
|
||||
border-radius: 50%
|
||||
|
||||
& > :last-child
|
||||
margin-right: 5px
|
||||
|
||||
.mac-close
|
||||
background: #fc625d
|
||||
|
||||
.mac-minimize
|
||||
background: #fdbc40
|
||||
|
||||
.mac-maximize
|
||||
background: #35cd4b
|
||||
|
||||
if hexo-config('code_blocks.shrink') != 'none'
|
||||
& > :nth-child(2)
|
||||
order: 8
|
||||
|
||||
&.closed
|
||||
.expand
|
||||
transform: rotate(90deg)
|
||||
|
||||
if hexo-config('code_blocks.height_limit')
|
||||
.container
|
||||
.code-expand-btn
|
||||
position: absolute
|
||||
bottom: 0
|
||||
z-index: 10
|
||||
width: 100%
|
||||
background: var(--hlexpand-bg)
|
||||
text-align: center
|
||||
font-size: $code-font-size
|
||||
cursor: pointer
|
||||
|
||||
i
|
||||
padding: 6px 0
|
||||
color: var(--hlnumber-color)
|
||||
animation: code-expand-key 1.2s infinite
|
||||
|
||||
&.expand-done
|
||||
& > i
|
||||
transform: rotate(180deg)
|
||||
|
||||
& + table,
|
||||
& + pre
|
||||
margin-bottom: 1.8em
|
||||
|
||||
&:not(.expand-done)
|
||||
& ~ table,
|
||||
& ~ pre
|
||||
overflow: hidden
|
||||
height: unit(hexo-config('code_blocks.height_limit'), px)
|
||||
|
||||
@keyframes code-expand-key
|
||||
0%
|
||||
opacity: .6
|
||||
|
||||
50%
|
||||
opacity: .1
|
||||
|
||||
100%
|
||||
opacity: .6
|
||||
|
||||
if hexo-config('code_blocks.fullpage')
|
||||
.container
|
||||
figure.highlight.code-fullpage
|
||||
position: fixed
|
||||
top: 0
|
||||
right: 0
|
||||
bottom: 0
|
||||
left: 0
|
||||
z-index: 9999
|
||||
margin: 0
|
||||
border-radius: 0
|
||||
animation: code-fullpage .3s
|
||||
|
||||
.code-expand-btn,
|
||||
.expand
|
||||
display: none
|
||||
|
||||
.highlight-tools
|
||||
& ~ pre,
|
||||
& ~ table
|
||||
display: block
|
||||
overflow: auto
|
||||
height: calc(100vh - 2.15em)
|
||||
margin-bottom: 0
|
||||
|
||||
@keyframes code-fullpage
|
||||
0%,
|
||||
100%
|
||||
transform: translateX(0)
|
||||
|
||||
20%,
|
||||
60%
|
||||
transform: translateX(-5px)
|
||||
|
||||
40%,
|
||||
80%
|
||||
$highlight_theme = hexo-config('code_blocks.theme')
|
||||
$highlight_macstyle = hexo-config('code_blocks.macStyle')
|
||||
wordWrap = $highlight_enable && !$highlight_line_number && hexo-config('code_blocks.word_wrap')
|
||||
|
||||
@require 'theme'
|
||||
|
||||
:root
|
||||
--hl-color: $highlight-foreground
|
||||
--hl-bg: $highlight-background
|
||||
--hltools-bg: $highlight-tools.bg-color
|
||||
--hltools-color: $highlight-tools.color
|
||||
--hlnumber-bg: $highlight-gutter.bg-color
|
||||
--hlnumber-color: $highlight-gutter.color
|
||||
--hlscrollbar-bg: $highlight-scrollbar
|
||||
--hlexpand-bg: linear-gradient(180deg, rgba($highlight-background, .6), rgba($highlight-background, .9))
|
||||
|
||||
[data-theme='dark']
|
||||
--hl-color: alpha(#FFFFFF, .7)
|
||||
--hl-bg: lighten(#121212, 2)
|
||||
--hltools-bg: lighten(#121212, 3)
|
||||
--hltools-color: #90a4ae
|
||||
--hlnumber-bg: lighten(#121212, 2)
|
||||
--hlnumber-color: alpha(#FFFFFF, .4)
|
||||
--hlscrollbar-bg: lighten(#121212, 5)
|
||||
--hlexpand-bg: linear-gradient(180deg, rgba(lighten(#121212, 2), .6), rgba(lighten(#121212, 2), .9))
|
||||
|
||||
if $highlight_enable
|
||||
@require 'highlight/index'
|
||||
|
||||
if $prismjs_enable
|
||||
@require 'prismjs/index'
|
||||
|
||||
$code-block
|
||||
overflow: auto
|
||||
margin: 0 0 20px
|
||||
padding: 0
|
||||
background: var(--hl-bg)
|
||||
color: var(--hl-color)
|
||||
line-height: $line-height-code-block
|
||||
|
||||
if wordWrap
|
||||
counter-reset: line
|
||||
white-space: pre-wrap
|
||||
|
||||
.container
|
||||
pre,
|
||||
code
|
||||
font-size: $code-font-size
|
||||
font-family: $code-font-family !important
|
||||
addBorderRadius()
|
||||
|
||||
code
|
||||
padding: 2px 5px
|
||||
background: $code-background
|
||||
color: $code-foreground
|
||||
|
||||
pre
|
||||
@extend $code-block
|
||||
padding: 10px 20px
|
||||
|
||||
code
|
||||
padding: 0
|
||||
background: none
|
||||
color: var(--hl-color)
|
||||
text-shadow: none
|
||||
|
||||
figure.highlight
|
||||
@extend $code-block
|
||||
position: relative
|
||||
addBorderRadius()
|
||||
|
||||
pre
|
||||
margin: 0
|
||||
padding: 8px 0
|
||||
border: none
|
||||
|
||||
figcaption,
|
||||
.caption
|
||||
padding: 6px 0 2px 14px
|
||||
font-size: $code-font-size
|
||||
line-height: 1em
|
||||
|
||||
a
|
||||
float: right
|
||||
padding-right: 10px
|
||||
color: var(--hl-color)
|
||||
|
||||
&:hover
|
||||
border-bottom-color: var(--hl-color)
|
||||
|
||||
&.copy-true
|
||||
user-select: all
|
||||
-webkit-user-select: all
|
||||
|
||||
& > table,
|
||||
& > pre
|
||||
display: block !important
|
||||
opacity: 0
|
||||
|
||||
.highlight-tools
|
||||
display: flex
|
||||
align-items: center
|
||||
padding: 0 8px
|
||||
min-height: 24px
|
||||
height: 2.15em
|
||||
background: var(--hltools-bg)
|
||||
color: var(--hltools-color)
|
||||
font-size: $code-font-size
|
||||
overflow: hidden
|
||||
|
||||
& > *
|
||||
padding: 5px
|
||||
|
||||
i
|
||||
cursor: pointer
|
||||
transition: all .3s
|
||||
|
||||
&:hover
|
||||
color: $theme-color
|
||||
|
||||
&.closed
|
||||
& ~ *
|
||||
display: none
|
||||
|
||||
.expand
|
||||
transform: rotate(-90deg)
|
||||
|
||||
if !$highlight_macstyle
|
||||
& > .macStyle
|
||||
padding: 0
|
||||
|
||||
.code-lang
|
||||
flex: 1
|
||||
text-transform: uppercase
|
||||
font-weight: bold
|
||||
font-size: 1.15em
|
||||
user-select: none
|
||||
-webkit-user-select: none
|
||||
padding 2px
|
||||
|
||||
.copy-notice
|
||||
padding-right: 2px
|
||||
opacity: 0
|
||||
transition: opacity .4s
|
||||
|
||||
if hexo-config('code_blocks.language')
|
||||
.code-lang
|
||||
flex: 1
|
||||
else if (!$highlight_macstyle && hexo-config('code_blocks.shrink') != 'none')
|
||||
& > div:nth-child(2)
|
||||
flex: 1
|
||||
else
|
||||
.macStyle
|
||||
flex: 1
|
||||
|
||||
.gutter
|
||||
user-select: none
|
||||
-webkit-user-select: none
|
||||
|
||||
.gist table
|
||||
width: auto
|
||||
|
||||
td
|
||||
border: none
|
||||
|
||||
if $highlight_macstyle
|
||||
.container
|
||||
figure.highlight
|
||||
margin: 0 0 24px
|
||||
border-radius: 7px
|
||||
box-shadow: 0 5px 10px 0 $highlight-mac-border
|
||||
-webkit-transform: translateZ(0)
|
||||
|
||||
.highlight-tools
|
||||
.macStyle
|
||||
display: flex
|
||||
|
||||
& > *
|
||||
margin-right: 8px
|
||||
width: 12px
|
||||
height: 12px
|
||||
border-radius: 50%
|
||||
|
||||
& > :last-child
|
||||
margin-right: 5px
|
||||
|
||||
.mac-close
|
||||
background: #fc625d
|
||||
|
||||
.mac-minimize
|
||||
background: #fdbc40
|
||||
|
||||
.mac-maximize
|
||||
background: #35cd4b
|
||||
|
||||
if hexo-config('code_blocks.shrink') != 'none'
|
||||
& > :nth-child(2)
|
||||
order: 8
|
||||
|
||||
&.closed
|
||||
.expand
|
||||
transform: rotate(90deg)
|
||||
|
||||
if hexo-config('code_blocks.height_limit')
|
||||
.container
|
||||
.code-expand-btn
|
||||
position: absolute
|
||||
bottom: 0
|
||||
z-index: 10
|
||||
width: 100%
|
||||
background: var(--hlexpand-bg)
|
||||
text-align: center
|
||||
font-size: $code-font-size
|
||||
cursor: pointer
|
||||
|
||||
i
|
||||
padding: 6px 0
|
||||
color: var(--hlnumber-color)
|
||||
animation: code-expand-key 1.2s infinite
|
||||
|
||||
&.expand-done
|
||||
& > i
|
||||
transform: rotate(180deg)
|
||||
|
||||
& + table,
|
||||
& + pre
|
||||
margin-bottom: 1.8em
|
||||
|
||||
&:not(.expand-done)
|
||||
& ~ table,
|
||||
& ~ pre
|
||||
overflow: hidden
|
||||
height: unit(hexo-config('code_blocks.height_limit'), px)
|
||||
|
||||
@keyframes code-expand-key
|
||||
0%
|
||||
opacity: .6
|
||||
|
||||
50%
|
||||
opacity: .1
|
||||
|
||||
100%
|
||||
opacity: .6
|
||||
|
||||
if hexo-config('code_blocks.fullpage')
|
||||
.container
|
||||
figure.highlight.code-fullpage
|
||||
position: fixed
|
||||
top: 0
|
||||
right: 0
|
||||
bottom: 0
|
||||
left: 0
|
||||
z-index: 9999
|
||||
margin: 0
|
||||
border-radius: 0
|
||||
animation: code-fullpage .3s
|
||||
|
||||
.code-expand-btn,
|
||||
.expand
|
||||
display: none
|
||||
|
||||
.highlight-tools
|
||||
& ~ pre,
|
||||
& ~ table
|
||||
display: block
|
||||
overflow: auto
|
||||
height: calc(100vh - 2.15em)
|
||||
margin-bottom: 0
|
||||
|
||||
@keyframes code-fullpage
|
||||
0%,
|
||||
100%
|
||||
transform: translateX(0)
|
||||
|
||||
20%,
|
||||
60%
|
||||
transform: translateX(-5px)
|
||||
|
||||
40%,
|
||||
80%
|
||||
transform: translateX(5px)
|
||||
Loaded 3 of 210 files, more files were not shown because too many files have changed in this diff.
Show more
Reference in new issue
Block a user