You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
356 lines
7.8 KiB
356 lines
7.8 KiB
#loading-bar-wrapper |
|
position: fixed |
|
top: 0 |
|
left: 0 |
|
height: 2px |
|
width: 100% |
|
z-index: 9999 |
|
|
|
#loading-bar |
|
position: fixed |
|
width: 0 |
|
height: 2px |
|
trans() |
|
background-color: $color-theme |
|
|
|
|
|
.l_header |
|
$iconW = 32px |
|
$iconMargin = 4px |
|
position: fixed |
|
z-index: 99 |
|
top: 0 |
|
width: 100% |
|
height: $navbar-height |
|
background: $color-card |
|
box-shadow: $boxshadow-card |
|
&.hide |
|
transform: translateY(100px) scale(0) |
|
&.show |
|
transform: translateY(0) scale(1) |
|
.container |
|
margin-left: $gap |
|
margin-right: $gap |
|
.wrapper |
|
height: 100% |
|
disable-user-select() |
|
.nav-main,.nav-sub |
|
display: flex |
|
flex-wrap: nowrap |
|
justify-content: space-between |
|
align-items: center |
|
|
|
.nav-main |
|
trans() |
|
transform: translateY(0 - $navbar-height) |
|
&.sub .nav-main |
|
transform: translateY(0 - 2 * $navbar-height) |
|
.nav-sub |
|
trans() |
|
opacity: 0 |
|
@media screen and (min-width: $device-2k) |
|
max-width: 55vw |
|
margin: auto |
|
&.sub .nav-sub |
|
opacity: 1 |
|
.title |
|
color: $color-text |
|
padding-left: $gap * 1.5 |
|
|
|
.nav-main .title |
|
txt-ellipsis() |
|
flex-shrink: 0 |
|
line-height: $navbar-height |
|
padding: 0 $gap*1.5 |
|
font-size: $fontsize-h3 |
|
font-family: $fontfamily-logo |
|
@media screen and (max-width: $device-mobile) |
|
padding: 0 |
|
img |
|
height: 100% |
|
padding: 4px 0 |
|
|
|
.nav-sub |
|
max-width: $layout-width |
|
margin: auto |
|
.title |
|
font-size: $fontsize-body |
|
font-family: $fontfamily |
|
line-height: 1.2 |
|
max-height: $navbar-height |
|
white-space: normal |
|
flex-shrink: 1 |
|
@media screen and (max-width: $device-mobile) |
|
overflow-y: scroll |
|
margin-top: 2px |
|
padding: 8px 0 |
|
|
|
|
|
|
|
.switcher |
|
display: none |
|
line-height: $navbar-height |
|
.s-toc |
|
display: none |
|
align-items: center |
|
@media screen and (max-width: $device-tablet) |
|
.s-toc |
|
display: flex |
|
>li |
|
height: $navbar-height - $gap |
|
trans() |
|
margin: 2px |
|
$height = $navbar-height - $gap |
|
@media screen and (max-width: $device-mobile) |
|
margin: 0 1px |
|
height: $height |
|
>a |
|
display: flex |
|
justify-content: center |
|
align-items: center |
|
width: $height |
|
height: $height |
|
padding: .85em 1.1em |
|
border-radius: 100px |
|
border: none |
|
trans() |
|
color: $color-theme |
|
&:hover |
|
border: none |
|
&.active,&:active |
|
border: none |
|
background: bgcolor($color-theme) |
|
@media screen and (max-width: $device-mobile) |
|
width: $iconW |
|
height: $height |
|
@media screen and (max-width: $device-mobile) |
|
display: flex |
|
margin-right: 0 - $gap * 0.5 |
|
.nav-sub .switcher |
|
display: flex |
|
.m_search |
|
position: relative |
|
display: flex |
|
height: $navbar-height |
|
width: $sidebar |
|
@media screen and (max-width: $device-laptop) |
|
width: 120px |
|
@media screen and (min-width: $device-mobile) |
|
min-width: 80px |
|
|
|
.form |
|
position: relative |
|
display: flex |
|
width: 100% |
|
margin: auto |
|
justify-content: flex-start |
|
align-items: center |
|
|
|
.icon,.input |
|
trans(.3s) |
|
|
|
.icon |
|
position: absolute |
|
width: $iconW |
|
left: $iconMargin + 1px |
|
color: alpha($color-text, 70%) |
|
@media screen and (max-width: $device-mobile) |
|
display: none |
|
.input |
|
display: block |
|
padding-top: $gap * 0.5 |
|
padding-bottom: $gap * 0.5 |
|
width: 100% |
|
color: $color-text |
|
background: darken($color-card, 5) |
|
box-shadow: none |
|
box-sizing: border-box |
|
padding-left: $iconW + $iconMargin |
|
font-size: $fontsize-meta |
|
border-radius: $border-searchbar |
|
border: 1px dashed transparent |
|
@media screen and (max-width: $device-mobile) |
|
padding-left: $gap * 0.5 |
|
border: none |
|
&:hover,&:focus |
|
border: none |
|
&:hover |
|
~.icon |
|
color: alpha($color-theme, 80%) |
|
&:focus |
|
~.icon |
|
color: $color-theme |
|
|
|
@media (max-width: $device-mobile) |
|
padding: 0 |
|
.m_search |
|
width:0 |
|
overflow: hidden |
|
position: absolute |
|
trans() |
|
&.z_search-open |
|
.m_search |
|
$offset = 1 * $gap + 2 * $iconW |
|
width: "calc(100% - %s)" % $offset |
|
|
|
ul.nav-list-h,ul.list-v |
|
li:hover |
|
>ul.list-v |
|
display: block |
|
|
|
ul.nav-list-h |
|
display: flex |
|
align-items: stretch |
|
height: $navbar-height |
|
&>li |
|
position: relative |
|
justify-content: center |
|
>a |
|
height: 100% |
|
line-height: $navbar-height - $border-line |
|
border-top: $border-line solid transparent |
|
border-bottom: $border-line solid transparent |
|
|
|
ul.list-v |
|
z-index: 1 |
|
display: none |
|
position: absolute |
|
background: $color-card |
|
box-shadow: $boxshadow-float |
|
margin-top: -2px - $border-card * 0.5 |
|
border-radius: $border-card * 0.5 |
|
border: 1px solid darken($color-codeblock, 6) |
|
padding: $gap * 0.5 0 |
|
>hr |
|
margin-top: $gap * 0.5 |
|
margin-bottom: $gap * 0.5 |
|
>li |
|
white-space: nowrap |
|
word-break: keep-all |
|
&.header |
|
font-size: $fontsize-footnote |
|
font-weight: bold |
|
line-height: 2em |
|
color: $color-meta |
|
margin: $gap * 0.5 $gap $gap * 0.25 |
|
ul |
|
margin-left: 0 |
|
display: none |
|
margin-top: 0 - 32px - $gap * 0.5 |
|
|
|
>li>a |
|
font-size: $fontsize-meta |
|
font-weight: bold |
|
line-height: 33px |
|
padding: 0 $gap |
|
height: 32px |
|
border-left: $border-line solid transparent |
|
border-right: $border-line solid transparent |
|
&:hover,&.active,&:active |
|
color: $color-theme |
|
border-left: $border-line solid $color-theme |
|
border-bottom: none |
|
>i |
|
margin-right: 4px |
|
|
|
.menu |
|
>ul>li>a |
|
padding: 0 8px |
|
.menu,.menu-phone |
|
position: relative |
|
trans() |
|
li |
|
position: relative |
|
@media screen and (max-width: $device-mobile) |
|
display:none |
|
|
|
.l_header ul>li>a |
|
trans() |
|
display: block |
|
color: alpha($color-text, 85%) |
|
i.music |
|
animation: rotate-effect 1.5s linear infinite |
|
@keyframes rotate-effect |
|
0% |
|
transform: rotate(0) |
|
25% |
|
transform: rotate(90deg) |
|
50% |
|
transform: rotate(180deg) |
|
75% |
|
transform: rotate(270deg) |
|
100% |
|
transform: rotate(360deg) |
|
&.current |
|
border-left-color: alpha($color-theme, 80%) |
|
border-bottom-color: alpha($color-theme, 80%) |
|
|
|
&:hover |
|
color: $color-theme |
|
border-left-color: $color-theme |
|
border-bottom-color: $color-theme |
|
background: bgcolor($color-theme) |
|
|
|
&:active,&.active |
|
color: $color-theme |
|
border-left-color: $color-theme |
|
border-bottom-color: $color-theme |
|
|
|
.menu-phone li ul.list-v |
|
right: "calc(100% - 0.5 * %s)" % $gap |
|
ul |
|
right: "calc(100% - 0.5 * %s)" % $gap |
|
|
|
.l_header .wrapper |
|
if hexo-config('style.navbar.width') == 'auto' |
|
max-width: $layout-width |
|
margin: auto |
|
@media screen and (min-width: $device-2k) |
|
max-width: 55vw |
|
.menu |
|
flex: 1 1 auto |
|
margin: 0 $gap 0 0 |
|
.list-v ul |
|
left: "calc(100% - 0.5 * %s)" % $gap |
|
else |
|
.m_search |
|
margin-left: auto |
|
margin-right: $gap |
|
.menu |
|
order: 1 |
|
.menu li ul.list-v |
|
right: 0 |
|
ul |
|
right: "calc(100% - 0.5 * %s)" % $gap |
|
|
|
|
|
.menu-phone |
|
display: none |
|
margin-top: $gap |
|
right: $gap * 0.5 |
|
ul |
|
right: "calc(100% - 0.5 * %s)" % $gap |
|
@media screen and (max-width: $device-mobile) |
|
display: block |
|
trans() |
|
|
|
|
|
.cover-wrapper |
|
.l_header |
|
trans(0.5s) |
|
transform: translateY(-2 * $navbar-height) |
|
&.show |
|
transform: translateY(0) |
|
|
|
|
|
.l_header |
|
@media screen and (min-width: $device-2k) |
|
max-width: 65vw |
|
left: "calc((100% - %s) * 0.5)" % @max-width |
|
border-bottom-left-radius: $border-card |
|
border-bottom-right-radius: $border-card |
|
@media screen and (max-width: $device-mobile) |
|
.wrapper.sub |
|
.title |
|
padding-left: 0 |
|
padding-right: 0
|
|
|