优化主题样式

volantis-x · Dec 17, 2018 · 77c1f78 · 77c1f78
1 parent d07c485
commit 77c1f78
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 18 deletions.
diff --git a/layout/_partial/header.ejs b/layout/_partial/header.ejs
@@ -21,7 +21,7 @@
 			<% if (theme.search.enable === true) { %>
 				<div class="m_search">
 					<form name="searchform" class="form u-search-form">
-						<input type="text" class="input u-search-input" placeholder="Search" />
+						<input type="text" class="input u-search-input" placeholder="搜索" />
 						<span class="icon"><i class="fas fa-search fa-fw"></i></span>
 					</form>
 				</div>

diff --git a/source/less/_base.less b/source/less/_base.less
@@ -291,7 +291,7 @@ ul.h-list {
 
 #loading-bar-wrapper {
     position: fixed;
-    top: @height_navbar - 4;
+    top: @height_navbar - @loading_height;
     // top: 0;
     left: 0;
     width: 100%;
@@ -302,7 +302,7 @@ ul.h-list {
 #loading-bar {
     position: fixed;
     width: 0;
-    height: 4px;
+    height: @loading_height;
     // height: @height_navbar;
     .enable-trans();
     background-color: fade(white, 50%);

diff --git a/source/less/_color.less b/source/less/_color.less
@@ -1,10 +1,13 @@
 // 如果你只想简单地换个风格，可以只改这里的几项：
 // 网页背景颜色
-@theme_background: #efefef;
+@theme_background: #efefef;   // 暗色主题示例：#454545;
 // 主题色
 @theme_main: #1BC3FB;
 // 卡片背景颜色
-@theme_cardbg: white;
+@theme_cardbg: white;         // 暗色主题示例：#555;
+
+// 正文文字颜色
+@color_text_main: @dark;     // 暗色主题示例：white;
 
 
 
@@ -29,5 +32,3 @@
 @color_text_highlight: @theme_main;
 // 在主题色中显示的文本（一般为白或深灰）
 @color_text_in_header: white;
-// 正文文字颜色
-@color_text_main: @dark;
diff --git a/source/less/_header.less b/source/less/_header.less
@@ -169,7 +169,7 @@
             line-height: @height_navbar - @gap;
             font-family: @fontfamily_base;
             border: none;
-            border-radius: @border_radius;
+            border-radius: @border_radius_searchbar;
             background: fade(@theme_cardbg, 15%);
             box-sizing: border-box;
             -webkit-appearance: none;
@@ -184,13 +184,13 @@
                 border: 1px dashed fade(@color_text_in_header, 60%);
             }
             &:focus {
-                // color:@black;
-                border: 1px solid fade(@color_text_in_header, 60%);
+              ~ .icon{
+                  color: @color_text_in_header;
+              }
+              color: @color_text_in_header;
+              border: 1px solid fade(@color_text_in_header, 60%);
                 // .set-placeholder({color: @black});
             }
-            &:focus ~ .icon{
-                // color: @black;
-            }
         }
     }
     &.pure{
@@ -204,16 +204,16 @@
               .enable-trans();
               color: fade(@theme_main, 70%);
               &.current{
-                border-bottom: 4px solid fade(@theme_main, 80%);
+                border-bottom: @loading_height solid fade(@theme_main, 80%);
               }
               &:hover{
                   color: @theme_main;
-                  border-bottom: 4px solid @theme_main;
+                  border-bottom: @loading_height solid @theme_main;
                   background: fade(@theme_main, 10%);
               }
               &:active,&.active{
                   color: @theme_main;
-                  border-bottom: 4px solid @theme_main;
+                  border-bottom: @loading_height solid @theme_main;
               }
           }
       }
@@ -229,7 +229,7 @@
       .m_search {
         .input {
             color: fade(@theme_main, 60%);
-            background: fade(@theme_main, 15%);
+            background: @theme_background;
             ~ .icon{
                 color: fade(@theme_main, 60%);
             }
@@ -238,7 +238,12 @@
                 border: 1px dashed fade(@theme_main, 60%);
             }
             &:focus {
-                border: 1px solid fade(@theme_main, 60%);
+              ~ .icon{
+                  color: @theme_main;
+              }
+              color: @theme_main;
+              background: fade(@theme_main, 15%);
+              border: 1px solid fade(@theme_main, 60%);
             }
         }
       }

diff --git a/source/less/_layout.less b/source/less/_layout.less
@@ -27,6 +27,8 @@
 @fontsize_logo: @fontsize_base * 1.2;
 @fontsize_header_switcher: 1.3em;
 @fontsize_header: 1em;
+// 定位条和页面加载的进度条的高度
+@loading_height: 4px;
 // end: 导航栏 <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
 
 
@@ -35,4 +37,6 @@
 @border_radius: 8px; // 圆角半径，可以根据心情随时调整风格
 @border_radius_line: 4px; // 线的宽度和滚动条的宽度
 @border_radius_code_block: 8px; // 引用、代码块的圆角
+
+@border_radius_searchbar: 4px; // 搜索框的圆角半径，可以根据心情随时调整风格
 // end: 圆角 <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<