Files
hexo-theme-butterfly/source/css/_layout/mobile-sidebar.styl
Jerry a2551d2d29 fix: 修復本地搜索文章鏈接無法跳轉bugs
feat: 當點擊評論框時,valine背景圖片隱藏
feat: 網頁進入動畫效果可關閉
style: 部分css和js 調整
2020-09-19 23:46:53 +08:00

97 lines
1.8 KiB
Stylus

#mobile-sidebar
#menu_mask
position: fixed
z-index: 102
display: none
width: 100%
height: 100%
background: alpha($dark-black, .8)
#mobile-sidebar-menus
position: fixed
top: 0
right: -250px
z-index: 103
overflow-x: hidden
overflow-y: auto
width: 250px
height: 100%
background: var(--sidebar-bg)
transition: all .5s
&.open
transform: translate3d(-100%, 0, 0)
& > .mobile_author_icon
padding: 1.3rem 1.5rem 0
text-align: center
img
width: 110px
height: 110px
border-radius: 70px
transition: all .5s
&:hover
transform: rotate(360deg)
.mobile_post_data
display: table
padding: .6rem .5rem 0
width: 100%
table-layout: fixed
.mobile_data_item
display: table-cell
.mobile_data_link
& > a > div
@extend .limit-one-line
.length_num
color: var(--text-highlight-color)
font-size: 1.28em
.headline
color: var(--font-color)
hr
margin: 1rem auto
.menus_items
padding: 0 .5rem 2rem
.site-page
@extend .limit-one-line
position: relative
display: block
padding: .3rem 1.5rem
color: var(--font-color)
font-size: 1.15em
cursor: pointer
i:first-child
width: 30%
text-align: left
span
width: 70%
&:hover
color: $light-blue
.expand
position: absolute
top: .78em
right: .4rem
transition: transform .3s
&.hide
transform: rotate(90deg) !important
.menus_item_child
margin: 0
list-style: none
if hexo-config('hide_sidebar_menu_child')
display: none