This commit is contained in:
dengtongyu committed 2020-11-23 19:01:28 +08:00
1 parent 522abb824b
commit 63389e016a
168 files changed
+11220

No files matched your search

@@ -0,0 +1,77 @@
if hexo-config('error_404.enable')
#error-wrap
position: absolute
top: 50%
right: 0
left: 0
margin: 0 auto
padding: 0 1rem
max-width: 1000px
transform: translate(0, -50%)
.error-content
display: flex
flex-direction: row
justify-content: center
align-items: center
margin: 0 1rem
height: 18rem
border-radius: 8px
background: var(--card-bg)
box-shadow: 0 4px 8px 6px rgba(7, 17, 27, .06)
+maxWidth768()
flex-direction: column
margin: 0
height: 25rem
.error-img
flex: 1
height: 100%
border-top-left-radius: 8px
border-bottom-left-radius: 8px
background-color: $theme-color
background-position: center
background-size: cover
+maxWidth768()
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
if $site-name-font
font-family: $site-name-font
+maxWidth768()
flex: 1.1
width: 100%
.error_title
margin-top: -4rem
font-size: 9em
+maxWidth768()
margin-top: -3rem
.error_subtitle
@extend .limit-more-line
margin-top: -3.5rem
word-break: break-word
font-size: 1.6em
-webkit-line-clamp: 2
a
display: inline-block
margin-top: .5rem
padding: .3rem 1.5rem
background: var(--btn-bg)
color: var(--btn-color)
i
padding-right: .3rem
@@ -0,0 +1,340 @@
#aside_content
width: 25%
+minWidth900()
if hexo-config('aside.position') == 'right'
padding-left: 15px
else
padding-right: 15px
+maxWidth900()
width: 100%
if hexo-config('aside.mobile') == false
+maxWidth768()
display: none
> .card-widget:first-child
margin-top: 0
+maxWidth900()
margin-top: 1rem
.card-widget
position: relative
overflow: hidden
margin-top: 1rem
border-radius: 8px
background: var(--card-bg)
box-shadow: 0 4px 8px 6px rgba(7, 17, 27, .06)
transition: all .3s
&:hover
box-shadow: 0 4px 12px 12px rgba(7, 17, 27, .15)
.card-info
img
width: 110px
height: 110px
border-radius: 70px
transition: all .5s
&:hover
transform: rotate(360deg)
.author-info
&__name
font-weight: 500
font-size: 1.57em
&__description
margin-top: -.3rem
.card-info-data
display: table
padding: .7rem 0
width: 100%
table-layout: fixed
& > .card-info-data-item
display: table-cell
a
.headline
@extend .limit-one-line
color: var(--font-color)
font-size: 1em
.length-num
margin-top: -.3rem
color: var(--text-highlight-color)
font-size: 1.4em
.card-info-social-icons
margin: .3rem 0 -.3rem
.social-icon
margin: 0 .5rem
color: var(--font-color)
font-size: 1.4em
cursor: pointer
i
transition: all .3s
&:hover
transform: rotate(540deg)
#card-info-btn
display: block
background-color: var(--btn-bg)
color: var(--btn-color)
text-align: center
line-height: 2.4
span
padding-left: .5rem
.card-content
padding: 1rem 1.2rem
.item-headline
padding-bottom: .3rem
font-size: 1.2em
span
margin-left: .5rem
.sticky_layout
+minWidth900()
position: sticky
position: -webkit-sticky
top: 20px
.card-tag-cloud
a
display: inline-block
padding: 0 .1rem
&:hover
color: $text-hover !important
.aside-list
& > span
display: block
margin-bottom: .5rem
text-align: center
& > .aside-list-item
display: flex
align-items: center
padding: .3rem 0
&:first-child
padding-top: 0
&:not(:last-child)
border-bottom: 1px dashed #f5f5f5
&:last-child
padding-bottom: 0
.thumbnail
overflow: hidden
width: w = 4.2em
height: w
& > img
width: 100%
height: 100%
transition: all .6s
object-fit: cover
&:hover
transform: scale(1.1)
.content
flex: 1
padding-left: 10px
word-break: break-all
& > .name
@extend .limit-more-line
-webkit-line-clamp: 1
& > time,
& > .name
display: block
color: $theme-meta-color
font-size: 85%
& > .title,
& > .comment
@extend .limit-more-line
color: var(--font-color)
font-size: 95%
line-height: 1.5
-webkit-line-clamp: 2
&:hover
color: $text-hover
&.no-cover
min-height: 4.4em
.card-archives ul.card-archive-list,
.card-categories ul.card-category-list
margin: 0
padding: 0
list-style: none
.card-archives ul.card-archive-list > .card-archive-list-item,
.card-categories ul.card-category-list > .card-category-list-item
a
display: inline-block
padding: .15rem .5rem
width: 100%
color: var(--font-color)
transition: all .4s
&:hover
padding: .15rem .85rem
background-color: var(--text-bg-hover)
span
@extend .limit-one-line
display: inline-block
vertical-align: bottom
&:first-child
width: 80%
&:last-child
width: 20%
text-align: right
&.more
span
padding-right: .3rem
width: auto !important
transition: .5s
&:hover
span
padding-right: .6rem
.card-categories
.card-category-list
&.child
padding: 0 0 0 .8rem
> .parent
.card-category-list
&-name
width: 70% !important
&-count
width: calc(100% - 70% - 20px)
text-align: right
i
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
.webinfo-item
display: flex
align-items: center
padding: .1rem .5rem 0
div
&:first-child
flex: 1
padding-right: 1rem
// toc
#card-toc
+maxWidth900()
position: fixed
right: 45px
bottom: 30px
z-index: 100
display: none
width: $toc-mobile-width
transform-origin: right bottom
animation: toc-open .3s
.toc-child
display: block !important
.toc-content
overflow-y: auto
max-height: calc(100vh - 120px)
ol,
li
list-style: none
> ol
padding: 0 !important
ol
margin: 0
padding-left: .4rem
.toc-link
display: block
padding-left: .3rem
border-left: 3px solid transparent
color: var(--toc-link-color)
transition: all .2s ease-in-out
&.active
border-left-color: darken($theme-toc-color, 20%)
background: $theme-toc-color
color: $toc-active-color
&:before
position: absolute
top: .6rem
right: 1.2rem
color: #a9a9a9
content: attr(progress-percentage)
font-style: italic
font-size: 1.2rem
@keyframes toc-open
0%
transform: scale(.7)
100%
transform: scale(1)
@keyframes toc-close
0%
transform: scale(1)
100%
transform: scale(.7)
+minWidth900()
html.hide-aside
.layout
justify-content: center
> .aside_content
display: none
> div:first-child
width: 80%
@@ -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
@@ -0,0 +1,64 @@
#post-comment
.comment-head
margin-bottom: 1rem
.comment-headline
display: inline-block
vertical-align: middle
font-weight: 700
font-size: 1.43em
#comment-switch
display: inline-block
if hexo-config('comments.text')
float: right
margin: .1rem auto 0
padding: .2rem .8rem
width: max-content
border-radius: 8px
background: $comments-switch-bg
else
vertical-align: middle
> span
display: none
.first-comment
color: $comments-switch-first-text
.second-comment
color: $comments-switch-second-text
.switch-btn
position: relative
display: inline-block
margin: -4px .4rem 0
width: 42px
height: 22px
border-radius: 34px
background-color: $comments-switch-first-text
vertical-align: middle
cursor: pointer
transition: .4s
&:before
position: absolute
bottom: 4px
left: 4px
width: 14px
height: 14px
border-radius: 50%
background-color: $comments-switch-round
content: ''
transition: .4s
&.move
background-color: $comments-switch-second-text
&:before
transform: translateX(20px)
.comment-wrap
> div:nth-child(2)
display: none
@@ -0,0 +1,33 @@
#footer
position: relative
background: $light-blue
background-attachment: local
background-position: bottom
background-size: cover
if hexo-config('footer_bg') != false
&:before
position: absolute
width: 100%
height: 100%
background-color: alpha($dark-black, .5)
content: ''
#footer-wrap
position: relative
padding: 2rem 1rem
color: var(--light-grey)
text-align: center
a
color: var(--light-grey)
&:hover
text-decoration: underline
.footer-separator
margin: 0 .2rem
.icp-icon
padding: 0 4px
vertical-align: text-bottom
@@ -0,0 +1,366 @@
#page-header
position: relative
width: 100%
background-color: $light-blue
background-position: center center
background-size: cover
background-repeat: no-repeat
transition: all .5s
// index
&.full_page
height: $index_top_img_height
background-attachment: fixed
#site-info
position: absolute
top: $index_site_info_top
padding: 0 .5rem
width: 100%
#site-title,
#site-subtitle,
#scroll-down .scroll-down-effects
text-align: center
text-shadow: .1rem .1rem .2rem rgba(0, 0, 0, .15)
line-height: 1.5
#site-title
margin: 0
color: var(--white)
font-size: 1.85em
+minWidth768()
font-size: 2.85em
#site-subtitle
color: var(--light-grey)
font-size: 1.15em
+minWidth768()
font-size: 1.72em
#site_social_icons
display: none
margin: 0 auto
width: 15rem
text-align: center
+maxWidth768()
display: block
.social-icon
margin: 0 .5rem
color: var(--light-grey)
text-shadow: .1rem .1rem .2rem rgba(0, 0, 0, .15)
font-size: 1.43em
cursor: pointer
#scroll-down
position: absolute
bottom: 0
width: 100%
cursor: pointer
.scroll-down-effects
position: relative
width: 100%
color: var(--light-grey)
font-size: 30px
// page
&.not-index-bg
height: 20rem
+maxWidth768()
height: 14rem
#page-site-info
position: absolute
top: 10rem
padding: 0 .5rem
width: 100%
+maxWidth768()
top: 7rem
// post
&.post-bg
height: 20rem
+maxWidth768()
height: 18rem
&:before
position: absolute
top: 0
left: 0
display: block
width: 100%
height: 100%
background-color: alpha($dark-black, .5)
content: ''
&.no-top-img
margin-bottom: .5rem
height: 60px
background: 0
#nav
background: rgba(255, 255, 255, .8)
box-shadow: 0 5px 6px -5px rgba(133, 133, 133, .6)
a
color: var(--font-color)
text-shadow: none
#post-info
position: absolute
bottom: 5rem
padding: 0 8%
width: 100%
text-align: center
+maxWidth900()
bottom: 1.5rem
text-align: left
+maxWidth768()
bottom: 1.1rem
padding: 0 1.1rem
#post-info
.post-title
@extend .limit-more-line
margin-bottom: .4rem
font-size: 2.5em
font-weight: normal
color: var(--white)
line-height: 1.5
-webkit-line-clamp: 3
+maxWidth768()
font-size: 1.72em
#post-meta
color: var(--light-grey)
font-size: 95%
+minWidth768()
> .meta-secondline
> span:first-child
display: none
+maxWidth768()
font-size: 90%
> .meta-firstline,
> .meta-secondline
display: inline
.post-meta
&-separator
margin: 0 .25rem
&-icon
margin-right: .2rem
&-label
if hexo-config('post_meta.post.label')
margin-right: .2rem
else
display: none
a
color: var(--light-grey)
transition: all .3s ease-out
&:hover
color: $text-hover
text-decoration: underline
if hexo-config('post_meta.post.date_format') == 'relative'
time
display: none
// for not top_img
#post
& > #post-info
margin-bottom: 1.5rem
.post-title
padding-bottom: .2rem
border-bottom: 1px solid var(--light-grey)
color: var(--text-highlight-color)
[data-theme='light']
#post
#post-info
#post-meta,
#post-meta a
color: #78818a
// 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: 90
display: flex
flex-wrap: wrap
align-items: center
padding: 0 36px
width: 100%
height: 60px
font-size: 1.3em
opacity: 0
transition: all .5s
+maxWidth768()
padding: 0 16px
&:not(.fixed)
#menus
padding-right: 0 !important
&.show
opacity: 1
#blog_name
flex: 1
#toggle-menu
display: none
padding: .1rem 0 0 .3rem
vertical-align: top
&:hover
color: var(--white)
a
color: var(--light-grey)
&:hover
color: var(--white)
&.fixed
position: fixed
top: -60px
z-index: 91
background: rgba(255, 255, 255, .8)
box-shadow: 0 5px 6px -5px alpha($grey, .6)
transition: transform .2s ease-in-out, opacity .2s ease-in-out
a,
#site-name,
#toggle-menu
color: var(--font-color)
text-shadow: none
&:hover
color: $light-blue
&.visible
transition: all .5s
transform: translate3d(0, 100%, 0)
#site-name
text-shadow: .1rem .1rem .2rem rgba($dark-black, .15)
font-weight: bold
cursor: pointer
.menus_items
display: inline
.menus_item
position: relative
display: inline-block
padding: 0 0 0 .7rem
&:hover
.menus_item_child
display: block
i.expand
transform: rotate(180deg) !important
i.expand
padding: 4px
transition: transform .3s
& > a
&:after
position: absolute
bottom: 0
left: 0
z-index: -1
width: 0
height: 3px
background-color: lighten($theme-color, 30%)
content: ''
transition: all .3s ease-in-out
&:hover
&:after
width: 100%
.menus_item_child
position: absolute
right: 0
display: none
margin-top: 8px
padding: 0
width: max-content
background-color: var(--sidebar-bg)
box-shadow: 0 5px 20px -4px rgba($dark-black, .5)
animation: sub_menus .3s .1s ease both
&:before
position: absolute
top: -8px
left: 0
width: 100%
height: 20px
content: ''
li
list-style: none
&:hover
background: var(--text-bg-hover)
a
display: inline-block
padding: .3rem .7rem
width: 100%
color: var(--font-color)
text-shadow: none
&.hide-menu
#toggle-menu
display: inline-block !important
.site-page
font-size: inherit
.menus_items
display: none !important
#search_button span
display: none !important
#search_button
display: inline
padding: 0 0 0 .7rem
.site-page
position: relative
padding-bottom: .3rem
text-shadow: .05rem .05rem .1rem rgba($dark-black, .3)
font-size: .78em
cursor: pointer
@@ -0,0 +1,95 @@
if hexo-config('preloader')
.loading-bg
position: fixed
z-index: 1000
width: 50%
height: 100%
background-color: var(--preloader-bg)
#loading-box
.loading-left-bg
@extend .loading-bg
.loading-right-bg
@extend .loading-bg
right: 0
.spinner-box
position: fixed
z-index: 1001
display: flex
justify-content: center
align-items: center
width: 100%
height: 100vh
.configure-border-1
position: absolute
padding: 3px
width: 115px
height: 115px
background: #ffab91
animation: configure-clockwise 3s ease-in-out 0s infinite alternate
.configure-border-2
left: -115px
padding: 3px
width: 115px
height: 115px
background: rgb(63, 249, 220)
transform: rotate(45deg)
animation: configure-xclockwise 3s ease-in-out 0s infinite alternate
.loading-word
position: absolute
color: var(--preloader-color)
font-size: .8rem
.configure-core
width: 100%
height: 100%
background-color: var(--preloader-bg)
&.loaded
.loading-left-bg
transition: all .5s
transform: translate(-100%, 0)
.loading-right-bg
transition: all .5s
transform: translate(100%, 0)
.spinner-box
display: none
@keyframes configure-clockwise
0%
transform: rotate(0)
25%
transform: rotate(90deg)
50%
transform: rotate(180deg)
75%
transform: rotate(270deg)
100%
transform: rotate(360deg)
@keyframes configure-xclockwise
0%
transform: rotate(45deg)
25%
transform: rotate(-45deg)
50%
transform: rotate(-135deg)
75%
transform: rotate(-225deg)
100%
transform: rotate(-315deg)
@@ -0,0 +1,79 @@
#pagination
overflow: hidden
margin-top: 1rem
width: 100%
.pagination
text-align: center
.page-number
display: inline-block
margin: 0 .2rem
min-width: w = 1.2rem
height: w
text-align: center
line-height: w
cursor: pointer
&.current
background: $theme-paginator-color
color: var(--white)
cursor: default
img.prev-cover,
img.next-cover
position: absolute
width: 100%
height: 100%
opacity: .4
transition: all .6s
object-fit: cover
.pagination-info
position: absolute
top: 50%
padding: 1rem 2rem
width: 100%
transform: translate(0, -50%)
.prev_info,
.next_info
@extend .limit-one-line
color: var(--white)
font-weight: 500
.next-post
.pagination-info
text-align: right
.pull-full
width: 100% !important
.prev-post .label,
.next-post .label
color: var(--light-grey)
text-transform: uppercase
font-size: 90%
.prev-post,
.next-post
width: 50%
+maxWidth768()
width: 100%
a
position: relative
display: block
overflow: hidden
height: 150px
&:hover
img.prev-cover,
img.next-cover
opacity: .8
transform: scale(1.1)
&.pagination-post
margin: 2rem 0 !important
background: $dark-black
@@ -0,0 +1,277 @@
beautify()
headStyle(fontsize)
padding-left: unit(fontsize + .4, 'rem')
code
font-size: unit(fontsize, 'rem')
&:before
margin-left: unit((-(fontsize + .2)), 'rem')
font-size: unit(fontsize, 'rem')
&:hover
padding-left: unit(fontsize + .6, 'rem')
h1,
h2,
h3,
h4,
h5,
h6
transition: all .2s ease-out
&:before
position: absolute
top: calc(50% - .35rem)
color: $title-prefix-icon-color
content: $title-prefix-icon
line-height: 1
transition: all .2s ease-out
@extend .fontawesomeIcon
&:hover
&:before
color: $light-blue
h1
headStyle(1)
h2
headStyle(.9)
h3
headStyle(.8)
h4
headStyle(.7)
h5
headStyle(.6)
h6
headStyle(.6)
ol,
ul
margin-top: .4rem
padding: 0 0 0 .8rem
list-style: none
counter-reset: li
+maxWidth768()
padding: 0 0 0 .4rem
p
margin: 0 0 .5rem
ol,
ul
padding-left: .6rem
+maxWidth768()
padding-left: .2rem
li
&:not(.tab)
position: relative
margin: .2rem 0
&:hover
&:before
transform: rotate(360deg)
&:before
position: absolute
top: 0
left: 0
background: $light-blue
color: $white
cursor: pointer
transition: all .3s ease-out
ol
> li
&:not(.tab)
padding: .2em .2em .2em 1.8em
&:before
margin-top: .65em
width: w = 1.45em
height: h = w
border-radius: .5 * w
content: counter(li)
counter-increment: li
text-align: center
font-size: .85em
line-height: h
ul
> li:not(.tab)
padding: .2em .2em .2em 1.4em
&:hover
&:before
border-color: $pseudo-hover
&:before
$w = .42em
top: .78em
width: w = $w
height: h = w
border: .5 * w solid $light-blue
border-radius: w
background: transparent
content: ''
line-height: h
no-beautify()
ol,
ul
margin-top: .4rem
p
margin: 0 0 .5rem
ol,
ul
padding-left: .5rem
li
position: relative
margin: .3rem 0
padding-left: .3rem
#article-container
word-wrap: break-word
overflow-wrap: break-word
a
color: $theme-link-color
&:hover
text-decoration: underline
img
margin: 0 auto .8rem
p
margin: 0 0 .8rem
iframe
margin: 0 0 1rem
if hexo-config('beautify.enable') && hexo-config('beautify.field') == 'site'
beautify()
else if hexo-config('beautify.enable') && hexo-config('beautify.field') == 'post'
no-beautify()
&.post-content
beautify()
else
no-beautify()
#post
img
display: block
.tag_share
.post-meta
&__tag-list
display: inline-block
&__tags
display: inline-block
margin: .4rem .4rem .4rem 0
padding: 0 .6rem
width: fit-content
border: 1px solid $light-blue
border-radius: .6rem
color: $light-blue
font-size: .85em
transition: all .2s ease-in-out
&:hover
background: $light-blue
color: var(--white)
.post_share
display: inline-block
float: right
margin: .4rem 0
width: fit-content
.social-share
font-size: .85em
.social-share-icon
margin: 0 4px
width: w = 1.85em
height: w
font-size: 1.2em
line-height: w
.post-copyright
position: relative
margin: 2rem 0 .5rem
padding: .5rem .8rem
border: 1px solid var(--light-grey)
transition: box-shadow .3s ease-in-out
&:before
position: absolute
top: t = .5rem
right: t
width: w = .8rem
height: w
border-radius: w
background: $light-blue
content: ''
&:after
position: absolute
top: t = .7rem
right: t
width: w = .4rem
height: w
border-radius: w
background: var(--card-bg)
content: ''
&:hover
box-shadow: 0 0 8px 0 rgba(232, 237, 250, .6), 0 2px 4px 0 rgba(232, 237, 250, .5)
.post-copyright
&-meta
color: $light-blue
font-weight: bold
&-info
padding-left: .3rem
a
text-decoration: underline
word-break: break-word
&:hover
text-decoration: none
.post-outdate-notice
position: relative
margin: 0 0 1rem
padding: .5em 1.2em
border-radius: 3px
background-color: $noticeOutdate-bg
color: $noticeOutdate-color
if hexo-config('noticeOutdate.style') == 'flat'
padding: .5em 1em .5em 2.6em
border-left: 5px solid $noticeOutdate-border
&:before
@extend .fontawesomeIcon
position: absolute
top: 50%
left: .9em
color: $noticeOutdate-border
content: '\f071'
transform: translateY(-50%)
@@ -0,0 +1,54 @@
.relatedPosts
margin-top: 1rem
& > .headline
margin-bottom: 5px
font-weight: 700
font-size: 1.43em
& > .relatedPosts-list
& > div
position: relative
display: inline-block
overflow: hidden
margin: 3px
width: calc(33.333% - 6px)
height: 200px
background: $dark-black
vertical-align: bottom
&:hover
.cover
opacity: .8
transform: scale(1.1)
+maxWidth768()
margin: 2px
width: calc(50% - 4px)
height: 150px
+maxWidth600()
width: calc(100% - 4px)
.cover
width: 100%
height: 100%
opacity: .4
transition: all .6s
object-fit: cover
.content
position: absolute
top: 50%
padding: 0 1rem
width: 100%
transform: translate(0, -50%)
.date
color: var(--light-grey)
font-size: 90%
.title
@extend .limit-more-line
color: var(--white)
-webkit-line-clamp: 2
@@ -0,0 +1,71 @@
.post-reward
position: relative
margin-top: 4rem
width: 100%
text-align: center
.reward-button
display: inline-block
padding: .2rem 1.2rem
background: var(--btn-bg)
color: var(--btn-color)
cursor: pointer
transition: all .4s
&:hover
box-shadow: inset 9em 0 0 0 var(--btn-hover-color)
.reward-main
display: block
.reward-main
position: absolute
bottom: 40px
left: 0
z-index: 100
display: none
padding: 0 0 15px
width: 100%
.reward-all
display: inline-block
margin: 0
padding: 1rem .5rem
border-radius: 4px
background: var(--reward-pop)
&:before
position: absolute
bottom: -10px
left: 0
width: 100%
height: 20px
content: ''
&:after
position: absolute
right: 0
bottom: 2px
left: 0
margin: 0 auto
width: 0
height: 0
border-top: 13px solid var(--reward-pop)
border-right: 13px solid transparent
border-left: 13px solid transparent
content: ''
.reward-item
display: inline-block
padding: 0 8px
list-style-type: none
vertical-align: top
img
width: 130px
height: 130px
.post-qr-code-desc
padding-top: .4rem
width: 130px
color: $reward-pop-up-color
@@ -0,0 +1,44 @@
#rightside
position: fixed
right: -38px
bottom: $rightside-bottom
z-index: 100
opacity: 0
transition: all .5s
#rightside-config-hide
transition: transform .4s
transform: translate(35px, 0)
&.show
transform: translate(0, 0) !important
& > div
& > button,
& > a
display: block
margin-bottom: 2px
width: 30px
height: 30px
background-color: var(--btn-bg)
color: var(--btn-color)
text-align: center
font-size: 16px
cursor: pointer
&:hover
background-color: var(--btn-hover-color)
#rightside_config
i
animation: avatar_turn_around 2s linear infinite
#mobile-toc-button
display: none
+maxWidth900()
display: block
+maxWidth900()
#hide-aside-btn
display: none
@@ -0,0 +1,97 @@
#sidebar
#menu-mask
position: fixed
z-index: 102
display: none
width: 100%
height: 100%
background: alpha($dark-black, .8)
#sidebar-menus
position: fixed
top: 0
right: -($sidebar-width)
z-index: 103
overflow-x: hidden
overflow-y: auto
width: $sidebar-width
height: 100%
background: var(--sidebar-bg)
transition: all .5s
&.open
transform: translate3d(-100%, 0, 0)
& > .author-avatar
padding: 1.3rem 1.5rem 0
text-align: center
img
width: 110px
height: 110px
border-radius: 70px
transition: all .5s
&:hover
transform: rotate(360deg)
.site-data
display: table
padding: .6rem .5rem 0
width: 100%
table-layout: fixed
.data-item
display: table-cell
.data-item-link
& > a > div
@extend .limit-one-line
.length-num
color: var(--text-highlight-color)
font-size: 1.28em
.headline
color: var(--font-color)
hr
margin: 1rem auto
.menus_items
padding: 0 .5rem 2rem
.site-page
@extend .limit-one-line
position: relative
display: block
padding: .3rem 1.5rem
color: var(--font-color)
font-size: 1.15em
cursor: pointer
i:first-child
width: 25%
text-align: left
span
width: 75%
&:hover
color: $light-blue
.expand
position: absolute
top: .78em
right: .4rem
transition: transform .3s
&.hide
transform: rotate(90deg) !important
.menus_item_child
margin: 0
list-style: none
if hexo-config('hide_sidebar_menu_child')
display: none
@@ -0,0 +1,99 @@
#vcomment
font-size: 1.1em
.vbtn
border: none
background: var(--btn-bg)
color: var(--btn-color)
&:hover
background: var(--btn-hover-color)
if hexo-config('valine.bg')
textarea
background: url(hexo-config('valine.bg')) 100% 100% no-repeat
&:focus
background-image: none
.vimg
transition: all .3s
&:hover
transform: rotate(360deg)
.vcards .vcard .vcontent.expand
&:before,
&:after
z-index: 22
.fireworks
position: fixed
top: 0
left: 0
z-index: $fireworks-zIndex
pointer-events: none
.medium-zoom-image--opened
z-index: 99999 !important
margin: 0 !important
.medium-zoom-overlay
z-index: 99999 !important
.mermaid
overflow: auto
margin: 0 0 1rem
background: $white
text-align: center
opacity: 0
transition: all .3s
&[data-processed]
opacity: 1
.utterances,
.fb-comments iframe
width: 100% !important
#gitalk-container
.gt-meta
margin: 0 0 .8em
padding: .3rem 0 .8em
.katex-wrap
overflow: auto
if hexo-config('katex') && hexo-config('katex.hide_scrollbar')
&::-webkit-scrollbar
display: none
// mathjax
.mathjax-overflow
overflow-x: auto
overflow-y: hidden
mjx-container[jax='CHTML'][display='true']
overflow-x: auto
overflow-y: hidden
padding-bottom: .3rem
.aplayer
color: $font-black
#article-container
.aplayer
margin: 0 0 1rem
if hexo-config('beautify.enable')
ol,
ul
margin: 0
padding: 0
li
margin: 0
padding: 0 15px
&:before
content: none