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

54 lines
1.2 KiB
Stylus

.nav-area .menu
width: 100%
display: grid
margin: 8px 0
grid-template-columns: repeat(hexo-config('menubar.columns'), 1fr)
grid-gap: 8px
&::-webkit-scrollbar
display: none
&::-webkit-scrollbar-track-piece
background: transparent
&::-webkit-scrollbar-thumb
display: none
.nav-item
box-sizing: border-box
width: 100%
min-height: 40px
border-radius: $border-bar
font-size: $fs-15
font-weight: 500
color: var(--text-p3)
text-align: center
background: var(--alpha50)
trans1 background
position: relative
display: flex
flex-direction: column
align-items: center
justify-content: center
img,svg
height: 28px
object-fit: contain
filter: grayscale(100%) brightness(0.8) opacity(0.8)
trans1 all
span
text-overflow: ellipsis
word-break: keep-all
&.active, &:hover
color: var(--text-p1)
background: var(--alpha100)
img,svg
filter: unset
&.active:after
content: ''
position absolute
width: 16px
height: 2px
left: 50%
transform: translateX(-50%)
border-radius: 2px
bottom: 2px
background: currentColor