hexo-theme-stellar/source/css/_layout/partial/navbar.styl

60 lines
1.1 KiB
Stylus
Raw Normal View History

2021-02-20 13:09:41 +08:00
.nav-wrap
2021-02-19 23:33:19 +08:00
position: sticky
position: -webkit-sticky
margin-top: 1.75rem
top: -2px
background: var(--site-bg)
2021-07-08 22:23:55 +08:00
padding: 0 1rem
2021-07-10 12:57:48 +08:00
z-index: 8
2021-07-08 22:23:55 +08:00
margin-bottom: 1px
&:after
content: ''
width: 'calc(100% - 2 * %s)' % 1rem
height: 2px
border-radius: 2px
position: absolute
bottom: 0
left: 1rem
background: var(--block-hover)
2021-02-25 13:12:04 +08:00
2021-02-20 13:09:41 +08:00
nav.cap
display: flex
2021-07-08 22:23:55 +08:00
overflow: scroll visible
2021-02-19 23:33:19 +08:00
scrollbar(0, 0)
>p
margin: 0
a
2021-11-19 23:46:31 +08:00
padding: .25rem 1rem
2021-07-08 22:23:55 +08:00
margin: 10px 0 8px 0
line-height: 2
2021-02-19 23:33:19 +08:00
color: var(--text-p3)
border-radius: 4px
2021-03-05 21:37:28 +08:00
font-weight: 500
2021-02-19 23:33:19 +08:00
white-space: nowrap
2021-07-08 22:23:55 +08:00
position: relative
z-index: 1
&:after
height: 2px
position: absolute
bottom: -8px
2021-11-19 23:46:31 +08:00
left: 1rem
right: 1rem
2021-07-29 00:25:37 +08:00
background: $color-theme
border-radius: 2px
pointer-events: none
2021-07-08 22:23:55 +08:00
&:hover
2021-03-08 17:54:23 +08:00
background: var(--block-hover)
2021-07-08 22:23:55 +08:00
&.active, &:hover
2021-02-19 23:33:19 +08:00
color: var(--text-p1)
2021-07-09 21:18:14 +08:00
&.active
background: var(--card)
box-shadow: $boxshadow-button
2021-07-08 22:23:55 +08:00
&.active:after
2021-07-29 00:25:37 +08:00
content: ''
2021-07-09 21:18:14 +08:00
a+a
margin-left: 4px
2021-02-20 13:09:41 +08:00
@media screen and (max-width: $device-tablet)
.nav-wrap
2021-02-22 23:07:12 +08:00
margin-top: 0