iotcat
/
hexo-theme-volantis
mirror of https://github.com/IoTcat/hexo-theme-volantis.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

update navbar

Browse Source
i18n
xaoxuu 6 years ago
parent 272ed8d53c
commit 2f15cbe514
2 changed files with 181 additions and 181 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      source/less/_defines.less
  2. 360
      source/less/_header.less

2
source/less/_defines.less
Unescape View File

@ -108,7 +108,7 @@
// start: 导航栏 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> // start: 导航栏 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
// 导航栏高度 // 导航栏高度
@height_navbar: 54px; @height_navbar: 54px;
@fontsize_logo: 1.3em; @fontsize_logo: @fontsize_base * 1.2;
@fontsize_header_switcher: 1.3em; @fontsize_header_switcher: 1.3em;
@fontsize_header: 1em; @fontsize_header: 1em;
// end: 导航栏 <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< // end: 导航栏 <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<

360
source/less/_header.less
Unescape View File

@ -1,101 +1,101 @@
.l_header { .l_header {
position:fixed; position:fixed;
z-index: 9999; z-index: 9999;
top:0; top:0;
left:0; left:0;
width:100%; width:100%;
font-size: @fontsize_base; font-size: @fontsize_base;
line-height: @height_navbar; line-height: @height_navbar;
height: @height_navbar; height: @height_navbar;
overflow: hidden; overflow: hidden;
font-family: @fontfamily_base; font-family: @fontfamily_base;
.wrapper{ .wrapper{
padding: auto @gap; padding: auto @gap;
.enable-trans(); .enable-trans();
} }
.wrapper.sub{ .wrapper.sub{
transform: translateY(-@height_navbar); transform: translateY(-@height_navbar);
.logo{ .logo{
// padding-left: 0; // padding-left: 0;
@media(max-width: @on_phone){ @media(max-width: @on_phone){
padding-left: @gap; padding-left: @gap;
padding-right: @gap/2; padding-right: 0;
font-size: @fontsize_base; font-size: @fontsize_base;
} }
} }
} }
.nav--main,.nav-sub{ .nav--main,.nav-sub{
height: @height_navbar; height: @height_navbar;
} }
background: @theme_bg_navbar; background: @theme_bg_navbar;
&, a{ &, a{
.txt-ellipsis; .txt-ellipsis;
height: @height_navbar; height: @height_navbar;
line-height: @height_navbar; line-height: @height_navbar;
color: @theme_text_in_header; color: @theme_text_in_header;
} }
&:extend(.z-depth-nav); &:extend(.z-depth-nav);
.enable-trans(); .enable-trans();
&:hover { &:hover {
// &:extend(.z-depth-nav-raised); // &:extend(.z-depth-nav-raised);
} }
&:active { &:active {
} }
.logo { .logo {
padding: 0 @gap; padding: 0 @gap;
font-size: @fontsize_base * 1.2; font-size: @fontsize_logo;
font-family: @fontfamily_logo; font-family: @fontfamily_logo;
@media(max-width: @on_phone){ @media(max-width: @on_phone){
flex: auto; flex: auto;
} }
} }
.menu{ .menu{
position:relative; position:relative;
flex: 1 0 auto; flex: 1 0 auto;
height: @height_navbar; height: @height_navbar;
.enable-trans(); .enable-trans();
margin:0 @gap; margin:0 @gap;
ul > li > a{ ul > li > a{
.enable-trans(); .enable-trans();
display: block; display: block;
font-size: @fontsize_base * .95; font-size: @fontsize_base;
color: fade(@theme_text_in_header,60%); color: fade(@theme_text_in_header,60%);
padding: 0 8px; padding: 0 8px;
&:hover,&.active{ &:hover,&.active{
color: @theme_text_in_header; color: @theme_text_in_header;
} }
} }
@media(max-width: @on_phone){ @media(max-width: @on_phone){
display:none; display:none;
} }
.underline{ .underline{
.enable-trans(); .enable-trans();
position: absolute; position: absolute;
background: @theme_text_in_header; background: @theme_text_in_header;
left: 0; left: 0;
bottom: 0; bottom: 0;
width: 0; width: 0;
height: 4px; height: 4px;
border-radius: 4px; border-radius: 4px;
&:hover{ &:hover{
height: 8px; height: 8px;
} }
} }
} }
.switcher{ .switcher{
display: none; display: none;
font-size: @fontsize_base; font-size: @fontsize_base;
line-height: @height_navbar; line-height: @height_navbar;
& > li{ & > li{
height: @height_navbar - @gap; height: @height_navbar - @gap;
.enable-trans(); .enable-trans();
margin: 0; margin: 0;
@media(max-width: @on_phone){ @media(max-width: @on_phone){
width: @height_navbar - 1.5*@gap; width: @height_navbar - 1.5*@gap;
height: @height_navbar - 1.5*@gap; height: @height_navbar - 1.5*@gap;
} }
a{ a{
display: flex; display: flex;
@ -114,100 +114,100 @@
height: @height_navbar - 1.5*@gap; height: @height_navbar - 1.5*@gap;
} }
} }
} }
@media(max-width: @on_phone){ @media(max-width: @on_phone){
display: flex; display: flex;
padding-left: @gap/2;
padding-right: @gap; padding-right: @gap;
} }
} }
.nav-sub .switcher{ .nav-sub .switcher{
display: flex; display: flex;
} }
@media (max-width: @on_phone) { @media (max-width: @on_phone) {
.m_search{ .m_search{
width:0; width:0;
overflow: hidden; overflow: hidden;
position: absolute; position: absolute;
.enable-trans(); .enable-trans();
margin: 0 @gap/2; margin: 0 @gap/2;
} }
&.z_search-open{ &.z_search-open{
.logo{ .logo{
opacity:0; opacity:0;
} }
.m_search{ .m_search{
width: 100% - 1.5*@gap; width: 100% - 1.5*@gap;
} }
} }
} }
} }
.m_search { .m_search {
position: relative; position: relative;
height: @height_navbar - @gap; height: @height_navbar - @gap;
width: @width_sidebar; width: @width_sidebar;
line-height: @height_navbar - @gap; line-height: @height_navbar - @gap;
margin-top: @gap/2; margin-top: @gap/2;
margin-bottom: @gap/2; margin-bottom: @gap/2;
vertical-align: middle; vertical-align: middle;
.form { .form {
position: relative; position: relative;
display: block; display: block;
width: 100%; width: 100%;
} }
.icon,.input{ .icon,.input{
.enable-trans(.1s); .enable-trans(.1s);
} }
.icon { .icon {
position: absolute; position: absolute;
display:block; display:block;
height: @height_navbar - @gap; height: @height_navbar - @gap;
width: @height_navbar - @gap; width: @height_navbar - @gap;
line-height: @height_navbar - @gap; line-height: @height_navbar - @gap;
top: 0; top: 0;
left: @gap/2; left: @gap/2;
font-size: @fontsize_small; font-size: @fontsize_small;
}
} .input {
.input { display:block;
display:block; font-size: @fontsize_small;
font-size: @fontsize_small; line-height: @height_navbar - @gap;
line-height: @height_navbar - @gap; margin: 0;
margin: 0; width: 100%;
width: 100%; color: fade(@theme_text_in_header, 60%);
color: fade(@theme_text_in_header, 60%);
padding-left: @fontsize_base + @gap - 2px; padding-left: @fontsize_base + @gap - 2px;
@media(max-width: @on_phone){ @media(max-width: @on_phone){
padding-left: @fontsize_base + @gap - 2px; padding-left: @fontsize_base + @gap - 2px;
} }
height: @height_navbar - @gap; height: @height_navbar - @gap;
line-height: @height_navbar - @gap; line-height: @height_navbar - @gap;
font-family: @fontfamily_base; font-family: @fontfamily_base;
border: none; border: none;
border-radius: @border_radius; border-radius: @border_radius;
background: fade(@theme_text_in_header,15%); background: fade(@theme_text_in_header,15%);
box-sizing: border-box; box-sizing: border-box;
-webkit-appearance: none; -webkit-appearance: none;
box-shadow: none; box-shadow: none;
border: 1px dashed transparent; border: 1px dashed transparent;
.enable-trans(); .enable-trans();
~ .icon{ ~ .icon{
color: fade(@theme_text_in_header, 60%); color: fade(@theme_text_in_header, 60%);
} }
.set-placeholder({color: fade(@theme_text_in_header, 60%)}); .set-placeholder({color: fade(@theme_text_in_header, 60%)});
&:hover{ &:hover{
border: 1px dashed fade(@theme_text_in_header, 60%); border: 1px dashed fade(@theme_text_in_header, 60%);
} }
&:focus { &:focus {
color:@black; color:@black;
border: 1px solid fade(@theme_text_in_header, 60%); border: 1px solid fade(@theme_text_in_header, 60%);
.set-placeholder({color: @black}); .set-placeholder({color: @black});
} }
&:focus ~ .icon{ &:focus ~ .icon{
color: @black; color: @black;
} }
} }
} }
.menu-phone{ .menu-phone{
@ -221,39 +221,39 @@
padding: 8px @gap; padding: 8px @gap;
} }
width: @width_sidebar; width: @width_sidebar;
position: fixed; position: fixed;
top: @height_navbar + @gap; top: @height_navbar + @gap;
right: 0; right: 0;
width: @width_sidebar; width: @width_sidebar;
z-index:9999 + 1; z-index:9999 + 1;
line-height: 2 * @gap; line-height: 2 * @gap;
background: white; background: white;
border-right: 0; border-right: 0;
&:extend(.z-depth-main-raised); &:extend(.z-depth-main-raised);
border-radius: @border_radius; border-radius: @border_radius;
transform: translate3d(@width_sidebar, -0, 0); transform: translate3d(@width_sidebar, -0, 0);
.enable-trans(); .enable-trans();
&:hover { &:hover {
&:extend(.z-depth-main-raised); &:extend(.z-depth-main-raised);
} }
&:active { &:active {
box-shadow: @boxshadow_card_normal; box-shadow: @boxshadow_card_normal;
} }
nav { nav {
padding: @gap/2 0px; padding: @gap/2 0px;
.nav { .nav {
height: @height_cell; height: @height_cell;
line-height: @height_cell; line-height: @height_cell;
position: relative; position: relative;
display: block; display: block;
color: @black; color: @black;
font-size: 0.8125em; // font-size: 0.8125em;
padding: 2px 20px; padding: 2px 20px;
border-left: 2px solid transparent; border-left: 2px solid transparent;
&:hover{ &:hover{
border-left: 4px solid @theme_bg_quote; border-left: 4px solid @theme_bg_quote;
background: fade(@theme_bg_quote, 10%); background: fade(@theme_bg_quote, 10%);
} }
} }
} }
} }

Write Preview
Loading…
Cancel
Save