biss/blog
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

source

Browse Source
This commit is contained in:
biss
2025-10-04 16:14:27 +08:00
parent f87eeaa2f5
commit b146025c6c
24 changed files with 1531 additions and 408 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
themes/butterfly/source/css/_layout/aside.styl
View File

@@ -60,6 +60,7 @@
text-align: center
line-height: 2.4
addBorderRadius(7)
@extend .btn-effects
&:hover
background-color: var(--btn-hover-color)
@@ -180,6 +181,11 @@
.card-category-list
&.child
padding: 0 0 0 16px
overflow: hidden
max-height: 0
opacity: 0
visibility: hidden
transition: max-height .3s ease, opacity .3s ease
> .parent
> a
@@ -188,7 +194,9 @@
transform: rotate(-90deg)
& + .child
display: block
max-height: 1000px
opacity: 1
visibility: visible
.card-category-list
&-name
@@ -207,7 +215,9 @@
if hexo-config('aside.card_categories.expand') == false
> .child
display: none
max-height: 0
opacity: 0
visibility: hidden
.card-webinfo
.webinfo

128
themes/butterfly/source/css/_layout/loading.styl
View File

@@ -1,45 +1,95 @@
if hexo-config('preloader')
if hexo-config('preloader.enable') && hexo-config('preloader.source') == 1
.loading-bg
display: flex;
width: 100%;
height: 100%;
position: fixed;
background: #f0f0f2;
z-index: 1001;
opacity: 1;
transition: .3s;
position: fixed
z-index: 1000
width: 50%
height: 100%
background-color: var(--preloader-bg)
#loading-box
.loading-img
width: 100px;
height: 100px;
border-radius: 50%;
margin: auto;
border: 4px solid #f0f0f2;
animation-duration: .3s;
animation-name: loadingAction;
animation-iteration-count: infinite;
animation-direction: alternate;
.loading-image-dot
width: 30px;
height: 30px;
background: #6bdf8f;
position: absolute;
border-radius: 50%;
border: 6px solid #fff;
top: 50%;
left: 50%;
transform: translate(18px, 24px);
.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: 16px
.configure-core
width: 100%
height: 100%
background-color: var(--preloader-bg)
&.loaded
.loading-bg
opacity: 0;
z-index: -1000;
.loading-left-bg
transition: all .5s
transform: translate(-100%, 0)
@keyframes loadingAction
0% {
opacity: 1;
}
.loading-right-bg
transition: all .5s
transform: translate(100%, 0)
100% {
opacity: .4;
}
.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)

5
themes/butterfly/source/css/_layout/reward.styl
View File

@@ -15,9 +15,12 @@
color: var(--btn-color)
cursor: pointer
addBorderRadius()
@extend .btn-effects
@extend .btn-effects-large
i
margin-right: 5px
vertical-align: baseline
&:hover
.reward-button
@@ -28,7 +31,7 @@
.reward-main
position: absolute
bottom: 40px
bottom: 50px
left: 0
z-index: 100
display: none

49
themes/butterfly/source/css/_layout/rightside.styl
View File

@@ -38,9 +38,13 @@
font-size: 16px
line-height: w
addBorderRadius(5)
@extend .btn-effects
&:hover
background-color: var(--btn-hover-color)
i
vertical-align: baseline
#mobile-toc-button
display: none
@@ -54,19 +58,52 @@
if hexo-config('rightside_scroll_percent')
#go-up
position: relative
.scroll-percent
position: absolute
top: 0
left: 0
display: none
width: 100%
height: 100%
opacity: 0
transition: all .4s cubic-bezier(.4, 0, .2, 1)
transform: scale(.8)
i
position: relative
z-index: 1
width: 100%
opacity: 1
transition: all .4s cubic-bezier(.4, 0, .2, 1)
transform: scale(1)
&.show-percent
.scroll-percent
display: block
opacity: 1
transform: scale(1)
animation: fadeInScale .4s ease-out
& + i
display: none
i
opacity: 0
transform: scale(.8)
&:hover
&:hover.show-percent
.scroll-percent
display: none
opacity: 0
transform: scale(.8)
& + i
display: block
i
opacity: 1 !important
transform: scale(1) !important
@keyframes fadeInScale
from
opacity: 0
transform: scale(.8)
to
opacity: 1
transform: scale(1)

53
themes/butterfly/source/css/_layout/sidebar.styl
View File

@@ -38,8 +38,7 @@
background: var(--sidebar-menu-bg)
box-shadow: 0 0 1px 1px rgba(7, 17, 27, .05)
addBorderRadius(10)
.menus_item
margin: 10px 0
.site-page
@extend .limit-one-line
position: relative
@@ -50,20 +49,17 @@
font-size: 1.15em
cursor: pointer
addBorderRadius(6)
border: var(--icat-style-border-always)
background: var(--icat-essay-card-bg)
font-size: 14px
border-radius: 12px
&:hover
background: var(--text-bg-hover)
box-shadow: 0 2px 8px rgba(0, 0, 0, .1)
color: var(--white)
transition: all .2s ease
transform: translateX(3px)
i:first-child
width: 15%
text-align: left
padding-left: 10px
&.group
& > i:last-child
@@ -77,34 +73,25 @@
transform: rotate(90deg)
& + .menus_item_child
display: none
overflow: hidden
max-height: 0
opacity: 0
transform: scaleY(0)
transform-origin: top
.menus_item_child
margin: 0
padding-left: 25px
max-height: 0
list-style: none
opacity: 0
transition: transform .3s ease, opacity .3s ease, max-height .3s ease
transform: scaleY(0)
transform-origin: top
will-change: transform, opacity, max-height
#sidebar
#sidebar-menus
.icat_menus_item
display: inline-block
width: 50%
.site-page
text-align: center
margin: 4px
display: flex
flex-direction: column
align-items: center
padding: 8px 0
border-radius: 12px
font-size: 14px
i:first-child
padding-left: 0
& > .icat-essay
font-weight: 500
span
margin-top: -8px
// 當父元素沒有 .hide 類時，顯示子目錄
.site-page.group:not(.hide) + .menus_item_child
max-height: 1000px
opacity: 1
transform: scaleY(1)