0.873

README.md

@@ -60,6 +60,10 @@ Argon 使用 [GPL V3.0](https://github.com/solstice23/argon-theme/blob/master/LI
 
 # 更新日志
 
+## 20200308 v0.873
++ 优化侧栏的搜索体验
++ 修复 Safari 上的渲染问题
+
 ## 20200306 v0.872
 + 修复 Safari 上的一系列显示问题
 + 修复点击导航栏时高度跳动的 BUG
@@ -69,7 +73,7 @@ Argon 使用 [GPL V3.0](https://github.com/solstice23/argon-theme/blob/master/LI
 + BUG 修复
 
 ## 20200306 v0.870
-+ 优化搜索体验，将搜索框嵌入导航栏中，同时搜索支持 Pjax
++ 优化顶栏搜索体验，将搜索框嵌入导航栏中，同时搜索支持 Pjax
 + 增加首页文章和说说同时显示的选项
 + 修复 Safari 上的一个性能问题
 + 增加评论禁用 Markdown 选项

argontheme.js

@@ -77,11 +77,36 @@ $(document).on("keydown" , "#navbar_search_input_container #navbar_search_input"
 	}
 	let word = $(this).val();
 	if (word == ""){
+		$("#navbar_search_input_container").blur();
 		return;
 	}
 	let scrolltop = $(document).scrollTop();
 	pjaxLoadUrl("/?s=" + encodeURI(word) , true , 0 , scrolltop);
 });
+/*侧栏搜索*/
+$(document).on("click" , "#leftbar_search_container" , function(){
+	$(".leftbar-search-button").addClass("open");
+	$("#leftbar_search_input").removeAttr("readonly").focus();
+	$("#leftbar_search_input").focus();
+	return false;
+});
+$(document).on("blur" , "#leftbar_search_container" , function(){
+	$(".leftbar-search-button").removeClass("open");
+	$("#leftbar_search_input").attr("readonly", "readonly");
+});
+$(document).on("keydown" , "#leftbar_search_input" , function(e){
+	if (e.keyCode != 13){
+		return;
+	}
+	let word = $(this).val();
+	if (word == ""){
+		$("#leftbar_search_container").blur();
+		return;
+	}
+	$("html").removeClass("leftbar-opened");
+	let scrolltop = $(document).scrollTop();
+	pjaxLoadUrl("/?s=" + encodeURI(word) , true , 0 , scrolltop);
+});
 
 /*左侧栏随页面滚动浮动*/
 !function(){

header.php

@@ -234,7 +234,7 @@ public function end_el( &$output, $object, $depth = 0, $args = array(), $current
 									<div class="input-group-prepend">
 										<span class="input-group-text"><i class="fa fa-search"></i></span>
 									</div>
-									<input name="s" class="form-control" placeholder="搜索什么..." type="text" autocomplete="off" id="navbar_search_input">
+									<input id="navbar_search_input" class="form-control" placeholder="搜索什么..." type="text" autocomplete="off">
 								</div>
 							</div>
 						</li>

info.json

@@ -1,5 +1,5 @@
 {
-  "version" : "0.872",
+  "version" : "0.873",
   "details_url" : "https://github.com/solstice23/argon-theme/releases",
-  "download_url" : "https://github.com/solstice23/argon-theme/releases/download/v0.872/argon.zip"
+  "download_url" : "https://github.com/solstice23/argon-theme/releases/download/v0.873/argon.zip"
 }

sidebar.php

@@ -47,7 +47,10 @@ public function end_el( &$output, $object, $depth = 0, $args = array(), $current
 				echo "</ul>";
 			?>
 			<div class="card-body text-center leftbar-search-button">
-				<button class="btn btn-secondary btn-lg active btn-sm btn-block border-0" role="button" aria-pressed="true" data-toggle="modal" data-target="#argon_search_modal"><i class="menu-item-icon fa fa-search"></i> 搜索</button>
+				<button id="leftbar_search_container" class="btn btn-secondary btn-lg active btn-sm btn-block border-0" role="button">
+					<i class="menu-item-icon fa fa-search mr-0"></i> 搜索
+					<input id="leftbar_search_input" type="text" placeholder="搜索什么..." class="form-control form-control-alternative" autocomplete="off">
+				</button>
 			</div>
 		</div>
 		<div id="leftbar_part2" class="widget widget_search card bg-white shadow-sm border-0">

style.css

@@ -3,7 +3,7 @@ Theme Name: argon
 Author: solstice23
 Author URI: https://solstice23.top/
 Description: 轻盈、简洁、美观的 Wordpress 主题
-Version: 0.872
+Version: 0.873
 License: GNU General Public License v3.0
 License URI: https://www.gnu.org/licenses/gpl-3.0.html
 Tags: 简约, 两栏, 侧栏在左边, 浮动侧栏, 文章目录, 自适应, 夜间模式, 可自定义
@@ -17,6 +17,7 @@ Tags: 简约, 两栏, 侧栏在左边, 浮动侧栏, 文章目录, 自适应, 
 
 body{
 	background: #f4f5f7 !important;
+	font-family: 'Open Sans', -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", SimSun, sans-serif;
 }
 a{
 	transition: color .25s ease;
@@ -339,11 +340,11 @@ html.darkmode #navbar-main{
 	margin-right: 0px;
 }
 #navbar_search_input_container .input-group-text{
-	transition: all .5s ease;
+	transition: all .5s cubic-bezier(0.4, 0, 0, 1);
 }
 #navbar_search_input_container input.form-control {
 	width: 200px;
-	transition: all .5s ease;
+	transition: all .5s cubic-bezier(0.4, 0, 0, 1);
 }
 #navbar_search_btn_mobile{
 	display: none;
@@ -432,6 +433,39 @@ html.darkmode #navbar-main{
 
 .leftbar-search-button{
 	padding-top: 0;
+	transition: all .3s cubic-bezier(0.4, 0, 0, 1);
+}
+.leftbar-search-button.open{
+	padding: 0 15px 18px 15px;
+	margin-top: -9px;
+}
+#leftbar_search_container{
+	transition: width .3s cubic-bezier(0.4, 0, 0, 1), height .3s cubic-bezier(0.4, 0, 0, 1), box-shadow .15s ease, transform .15s ease;
+	height: 30px;
+	transform: unset !important;
+}
+.leftbar-search-button.open #leftbar_search_container{
+	height: 45px;
+}
+.leftbar-search-button:not(.open) #leftbar_search_container:focus-within{
+	box-shadow: 0 7px 14px rgba(50,50,93,.1), 0 3px 6px rgba(0,0,0,.08);
+}
+#leftbar_search_input{
+	position: absolute;
+	left: 0;
+	top: 0;
+	width: 100%;
+	height: 100%;
+	transition: all .3s cubic-bezier(0.4, 0, 0, 1);
+	opacity: 0;
+	cursor: pointer;
+	user-select: none;
+}
+.leftbar-search-button.open #leftbar_search_input{
+	opacity: 1;
+	cursor: text;
+	user-select: all;
+	box-shadow: 0 4px 6px rgba(50,50,93,.11), 0 1px 3px rgba(0,0,0,.08);
 }
 
 #leftbar_part2{
@@ -594,6 +628,7 @@ html.darkmode #navbar-main{
 	text-align: center;
 	padding: 25px 20px;
 	line-height: 1.8;
+	transition: none;
 }
 #footer a{
 	color: #fff;
@@ -754,8 +789,8 @@ html.darkmode #fabtn_toggle_darkmode i.fa-lightbulb-o{
 	opacity: 0;
 	width: max-content;
 	width: -moz-max-content;
-	min-width: 200px;
-	max-width: calc(100vh - 170px);
+	min-width: 350px;
+	max-width: calc(100vw - 170px);
 	max-height: calc(100vh - 70px);
 	pointer-events: none;
 	transform: translateX(10px);
@@ -2699,6 +2734,7 @@ html.darkmode .CtxtMenu_Menu {
 		width: 100vw;
 		padding: 10px 25px;
 		opacity: 0;
+		max-width: unset;
 		pointer-events: none;
 		transform: translateY(15px);
 		transition: all .3s ease;