194 lines
3.9 KiB
Stylus
194 lines
3.9 KiB
Stylus
/*!
|
|
* 头部样式
|
|
*/
|
|
.header
|
|
width 100%
|
|
background-color c-fff
|
|
box-shadow 1px 1px 5px rgba(0, 0, 0, .1)
|
|
margin-bottom 10px
|
|
.header-main
|
|
position relative
|
|
height 68px
|
|
display flex
|
|
.logo
|
|
width 160px
|
|
.menu
|
|
margin 0
|
|
padding 10px
|
|
list-style-type none
|
|
#search-box
|
|
padding 10px
|
|
font-size 16px
|
|
flex-grow 1
|
|
line-height 48px
|
|
display flex
|
|
position relative
|
|
.input-box
|
|
box-sizing border-box
|
|
padding 0 3px
|
|
flex-grow 1
|
|
> #search-input
|
|
border none
|
|
border-bottom 1px solid #9e9e9e
|
|
background inherit
|
|
width 50%
|
|
transition width 0.3s ease-in
|
|
outline:none
|
|
&:focus
|
|
width 80%
|
|
> #search-result-box
|
|
position absolute
|
|
z-index 100
|
|
line-height 1.2
|
|
top 48px
|
|
width 300px
|
|
max-height 600px
|
|
overflow-y auto
|
|
background #eee
|
|
border 1px solid #333
|
|
border-radius 5px
|
|
word-break break-all
|
|
padding 7px
|
|
ul
|
|
list-style none
|
|
padding-left 0
|
|
margin-top 0
|
|
a.search-result-title
|
|
color #3272b5
|
|
font-size 20px
|
|
strong.search-keyword
|
|
color #ff776d
|
|
.logo
|
|
a
|
|
position relative
|
|
display block
|
|
height 68px
|
|
line-height @height
|
|
color c-fff
|
|
background-color #ff5e52
|
|
opacity .85
|
|
text-center()
|
|
overflow hidden
|
|
.cover
|
|
position absolute
|
|
display block
|
|
top 0
|
|
left 0
|
|
width 100%
|
|
transition top .5s
|
|
.name
|
|
height 100%
|
|
font-size 28px
|
|
font-family "HomizioNova", "Microsoft Yahei"
|
|
font-style italic
|
|
.description
|
|
line-height (@height/2)
|
|
height 100%
|
|
color c-fff
|
|
background-color #51cc87
|
|
opacity .85
|
|
&:hover .cover
|
|
top -100%
|
|
.menu
|
|
.item
|
|
float left
|
|
padding 0 20px
|
|
height 48px
|
|
line-height @height
|
|
font-size 16px
|
|
a
|
|
color c-666
|
|
&:hover
|
|
color #ff5e52
|
|
.current a
|
|
color #ff5e52
|
|
.profile
|
|
.avatar
|
|
width 50px
|
|
height 50px
|
|
margin 8px 0
|
|
border 1px solid c-ddd
|
|
border-radius 3px
|
|
> img
|
|
width 46px
|
|
height 46px
|
|
margin 2px
|
|
.feeds
|
|
height 68px
|
|
padding 0 10px
|
|
color c-666
|
|
font-size 12px
|
|
text-right()
|
|
.links
|
|
margin 5px 0 0
|
|
padding 10px 0 3px
|
|
.sns
|
|
margin 0 0 5px 0
|
|
padding 2px 0 10px
|
|
line-height 14px
|
|
a
|
|
margin-left 5px
|
|
.sinaweibo
|
|
b
|
|
color #ff5e52
|
|
font-size 14px
|
|
&:hover
|
|
color #ff5e52
|
|
.qqweibo
|
|
b
|
|
color #1faeff
|
|
font-size 14px
|
|
&:hover
|
|
color #1faeff
|
|
.wechat
|
|
position relative
|
|
b
|
|
color #4bc916
|
|
font-size 14px
|
|
.popover
|
|
position absolute
|
|
display none
|
|
top 28px
|
|
left 50%
|
|
width 120px
|
|
height @width
|
|
margin-left -60px
|
|
border 1px solid c-ddd
|
|
background-color c-fff
|
|
border-radius 5px
|
|
z-index 9
|
|
img
|
|
width 120px
|
|
height @width
|
|
border 0
|
|
border-radius 5px
|
|
.arrow
|
|
position absolute
|
|
display block
|
|
top -10px
|
|
left 50%
|
|
width 0
|
|
height 0
|
|
margin-left -10px
|
|
border-width 10px
|
|
border-color transparent
|
|
border-style solid
|
|
border-top-width 0
|
|
border-bottom-color c-ddd
|
|
&:after
|
|
position absolute
|
|
content " "
|
|
top 1px
|
|
left 50%
|
|
margin-left -9px
|
|
border-width 9px
|
|
border-color transparent
|
|
border-style solid
|
|
border-top-width 0
|
|
border-bottom-color c-fff
|
|
&:hover
|
|
color #4bc916
|
|
.popover
|
|
display block
|
|
.dropnav
|
|
display none |