hexo-theme-stellar/source/css/_layout/sidebar/header.styl

113 lines
2.5 KiB
Stylus
Raw Normal View History

2022-11-27 20:42:30 +08:00
.l_left
nav.menu
margin-bottom: 0
2022-11-23 23:17:24 +08:00
nav.menu
margin: 1rem 0
background: var(--block)
2022-12-09 23:56:58 +08:00
border: 1px solid var(--block-border)
2022-11-23 23:17:24 +08:00
border-radius: 6px
display: flex
flex-wrap: wrap
&::-webkit-scrollbar
display: none
&::-webkit-scrollbar-track-piece
background: transparent
&::-webkit-scrollbar-thumb
display: none
a.nav-item
text-overflow: ellipsis
word-break: keep-all
margin: 1px
border-radius: 4px
font-size: $fs-14
font-weight: 500
overflow: hidden
padding: 0.375rem 0.5rem
color: var(--text-p3)
text-align: center
&.active, &:hover
color: var(--text-p1)
2022-12-15 22:09:01 +08:00
background: var(--card)
2022-11-23 23:17:24 +08:00
box-shadow: $boxshadow-button
.l_left .menu a.nav-item
flex-grow: 1
.logo-wrap
display: flex
align-items: center
overflow: hidden
a
color: inherit
display: flex
align-items: center
a.avatar
display: block
position: relative
width: 50px
height: 50px
flex-shrink: 0
border-radius: 50px
overflow: hidden
margin-right: 1rem
div.bg
width: 100%
height: 100%
background-size: cover
img.avatar
margin: 2px
object-fit: cover
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
font-size: 1.75rem
font-weight: 900
color: inherit
line-height: 1.2
display: block
position: relative
.main
color: var(--text-p0)
.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