mirror of
https://github.com/jerryc127/hexo-theme-butterfly.git
synced 2025-09-15 12:58:48 +08:00
175 lines
3.3 KiB
Stylus
175 lines
3.3 KiB
Stylus
#mobile-sidebar
|
||
#menu_mask
|
||
position: fixed
|
||
top: 0
|
||
bottom: 0
|
||
width: 100%
|
||
height: 110vh
|
||
left: 0
|
||
right: 0
|
||
background: alpha($black,0.7)
|
||
z-index: 102
|
||
display: none
|
||
|
||
#mobile-sidebar-menus,#mobile-sidebar-toc
|
||
position: fixed
|
||
top: 0
|
||
right: -254px
|
||
width: 250px
|
||
height 101vh
|
||
background: $white
|
||
cursor: pointer
|
||
box-shadow: 0 0 4px alpha($dark-black,0.27)
|
||
z-index: 103
|
||
overflow-y: scroll
|
||
display: block
|
||
transition: transform .3s
|
||
opacity: 0
|
||
will-change: transform
|
||
|
||
#mobile-sidebar-menus
|
||
.mobile_author_icon
|
||
padding: 1.3rem 1.5rem 0
|
||
text-align: center
|
||
|
||
img
|
||
height: 120px
|
||
width: 120px
|
||
padding: 0
|
||
display: inline-block
|
||
vertical-align: top
|
||
border-radius: 70px
|
||
transition: all .3s
|
||
|
||
.mobile_post_data
|
||
display: flex
|
||
justify-content: center
|
||
padding: .6rem .5rem 0
|
||
|
||
.mobile_data_item
|
||
flex: 1
|
||
|
||
.mobile_data_link
|
||
a
|
||
text-decoration: none
|
||
|
||
.length_num
|
||
font-size: .9rem
|
||
color: $dark-black
|
||
|
||
.headline
|
||
display: block
|
||
font-size: 0.7rem
|
||
text-transform: uppercase
|
||
color:$font-black
|
||
|
||
hr
|
||
margin: 1rem auto
|
||
|
||
.menus_items
|
||
padding: 0 .5rem
|
||
margin-bottom: 5rem
|
||
|
||
a
|
||
display: block !important
|
||
opacity: 1 !important
|
||
margin: 0
|
||
padding: .3rem 1.5rem
|
||
color: $font-black
|
||
text-shadow: none
|
||
font-size: 0.8rem
|
||
z-index: 0
|
||
text-overflow: ellipsis
|
||
overflow: hidden
|
||
white-space: nowrap
|
||
|
||
i
|
||
width: 30%
|
||
text-align: left
|
||
|
||
span
|
||
width 70%
|
||
|
||
&:hover
|
||
color: $light-blue
|
||
|
||
.menus-expand
|
||
position: absolute
|
||
width: 30px !important
|
||
height: 30px
|
||
right: 0
|
||
padding: 6px
|
||
transform: rotate(0deg)
|
||
transition: all .3s
|
||
|
||
&.menus-closed
|
||
transform: rotate(180deg) !important
|
||
transition: all .3s
|
||
|
||
.menus_item_child
|
||
list-style: none
|
||
margin: 0
|
||
|
||
#mobile-sidebar-toc
|
||
padding: 1rem 0.5rem 5rem 0.3rem
|
||
|
||
ol,li
|
||
list-style: none
|
||
padding: 0 0 0 8px
|
||
margin: 0
|
||
|
||
|
||
.toc_mobile_headline
|
||
text-align: center
|
||
font-size: 18px
|
||
font-weight: bold
|
||
|
||
a
|
||
text-decoration: none
|
||
color: $light-black
|
||
|
||
&:hover
|
||
color: $light-blue
|
||
|
||
// 手機打開menus，toc特效
|
||
.open-mobile-menus,
|
||
.open-mobile-toc
|
||
overflow: hidden
|
||
#body-wrap
|
||
transform: translateX(-250px)
|
||
#page-header
|
||
transform: translateX(-250px)
|
||
&.fixed.visible
|
||
transform: translate3d(-250px, 100%, 0)
|
||
#rightside
|
||
transform: translate3d(-288px, 0, 0) !important
|
||
|
||
.open-mobile-menus
|
||
padding-left: 0 !important
|
||
|
||
#mobile-sidebar
|
||
#mobile-sidebar-menus
|
||
transform: translateX(-254px)
|
||
opacity: 1
|
||
|
||
// pc界面打開mobile-menus需關閉sidebar
|
||
#sidebar
|
||
left: -300px !important
|
||
|
||
.open-mobile-toc
|
||
#mobile-sidebar
|
||
#mobile-sidebar-toc
|
||
transform: translateX(-254px)
|
||
opacity: 1
|
||
|
||
@media screen and (max-width: $sm)
|
||
#mobile-sidebar-menus
|
||
display: block !important
|
||
|
||
@media screen and (max-width: $bg)
|
||
#mobile-sidebar-toc
|
||
display: block !important
|
||
|
||
|
||
|