mirror of
https://github.com/jerryc127/hexo-theme-butterfly.git
synced 2025-09-15 12:58:48 +08:00
✨ feat: 增加頁面加載動畫preloader close #193 ✨ feat: 適配hexo-generator-indexed插件 ✨ feat: aside subtitle可配置,優先顯示配置內容、沒有的顯示頁面subtitle close #191 ✨ feat: aside card-tags可配置是否顯示顏色 ✨ feat: algolia-search highligh文字加深 ✨ feat: 增加頁面keywords設置 #191 ✨ feat: darkmode和readmode配色微調 🐛 fix: 修復hide-block 配置顏色顯示出錯的bug 🐛 fix: 修正zh-TW部分用語
95 lines
1.8 KiB
Stylus
95 lines
1.8 KiB
Stylus
if hexo-config('preloader')
|
|
loading-bg()
|
|
position: fixed
|
|
z-index: 1000
|
|
width: 50%
|
|
height: 100%
|
|
background-color: $preloader-bg
|
|
transition: all .5s
|
|
|
|
#loading-box
|
|
.loading-left-bg
|
|
loading-bg()
|
|
|
|
.loading-right-bg
|
|
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: $white
|
|
font-size: .8rem
|
|
|
|
.configure-core
|
|
width: 100%
|
|
height: 100%
|
|
background-color: $preloader-bg
|
|
|
|
&.loaded
|
|
.loading-left-bg
|
|
transform: translate(-100%, 0)
|
|
|
|
.loading-right-bg
|
|
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)
|