hexo/node_modules/hexo-theme-butterfly/source/css/_global/function.styl

277 lines
4.4 KiB
Stylus

.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
// card hover
.cardHover
border-radius: 8px
background: var(--card-bg)
box-shadow: var(--card-box-shadow)
transition: all .3s
&: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: .8
transform: scale(1.1)
.cover
position: absolute
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
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}
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
animation: header-effect 1s
#site-title,
#site-subtitle
animation: titleScale 1s
#nav.show
animation: headerNoOpacity 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 / 5)s
.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%
top: 0
opacity: .4
50%
top: -16px
opacity: 1
100%
top: 0
opacity: .4
@keyframes header-effect
0%
opacity: 0
transform: translateY(-50px)
100%
opacity: 1
transform: translateY(0)
@keyframes headerNoOpacity
0%
transform: translateY(-50px)
100%
transform: translateY(0)
@keyframes bottom-top
0%
margin-top: 50px
opacity: 0
100%
margin-top: 0
opacity: 1
@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)