hexo-theme-stellar/source/css/_components/sidebar/logo.styl

86 lines
1.9 KiB
Stylus
Raw Normal View History

2022-11-23 23:17:24 +08:00
.logo-wrap
display: flex
align-items: center
overflow: hidden
2024-01-17 14:07:30 +08:00
min-height: 48px
2024-02-06 23:39:51 +08:00
img.avatar
2024-01-17 00:27:48 +08:00
object-fit: cover
2024-02-06 23:39:51 +08:00
img.icon
object-fit: contain
2024-01-17 00:27:48 +08:00
.icon
width: 48px
height: 48px
margin-right: 1rem
border-radius: 4px
2024-01-22 13:00:00 +08:00
flex-shrink: 0
2022-11-23 23:17:24 +08:00
a
color: inherit
display: flex
align-items: center
a.avatar
display: block
position: relative
2024-01-17 00:27:48 +08:00
width: 48px
height: 48px
2022-11-23 23:17:24 +08:00
flex-shrink: 0
2024-01-17 00:27:48 +08:00
border-radius: 48px
2022-11-23 23:17:24 +08:00
overflow: hidden
margin-right: 1rem
div.bg
width: 100%
height: 100%
background-size: cover
img.avatar
margin: 2px
width: "calc(100% - 2 * %s)" % @margin
height: "calc(100% - 2 * %s)" % @margin
border-radius: @width
if hexo-config('style.animated_avatar.animate')
div.bg
trans1: opacity
position: absolute
opacity: 0 !important
z-index: -1
@keyframes spin
from
transform:rotate(0deg)
to
transform:rotate(360deg)
if hexo-config('style.animated_avatar.animate') == 'always'
div.bg
opacity: 1 !important
animation: spin infinite 4s
animation-timing-function: linear
if hexo-config('style.animated_avatar.animate') == 'auto'
&:hover
div.bg
opacity: 1 !important
animation: spin infinite 4s
animation-timing-function: linear
a.title
2024-01-22 13:00:00 +08:00
font-size: 1.5rem
2022-11-23 23:17:24 +08:00
font-weight: 900
color: inherit
line-height: 1.2
display: block
position: relative
.main
2024-01-31 22:45:07 +08:00
color: var(--text)
2022-11-23 23:17:24 +08:00
.sub
color: var(--text-p1)
trans2 opacity transform
white-space: nowrap
.hover
position: absolute
bottom: 0
transform: translateY(8px)
overflow: visible
&:hover
.normal
opacity: 0
transform: translateY(-8px)
.hover
transform: translateY(0)
opacity: 1 !important