Ver código fonte

recode headbar erceter

調整了headbar,以及其他樣式跟著被牽動的區塊
panya-abhinanda 5 anos atrás
pai
commit
01d01e77f6

+ 3 - 1
.gitignore

@@ -1,2 +1,4 @@
 /tmp
-/.vscode
+/.vscode
+.DS_Store
+.vscode/settings.json

+ 4 - 3
.vscode/settings.json

@@ -2,11 +2,12 @@
 	"files.autoSave": "onFocusChange",
 	"workbench.iconTheme": "vscode-icons",
 	"workbench.colorTheme": "Visual Studio Dark",
-	"editor.formatOnSave": true,
-	"editor.fontFamily": "source code pro",
+	"editor.fontFamily": "SauceCodePro Nerd Font",
 	"editor.mouseWheelZoom": true,
 	"editor.codeActionsOnSave": {
 		"source.fixAll.eslint": true
 	},
-	"svg.preview.background": "transparent"
+	"svg.preview.background": "transparent",
+	"editor.fontSize": 15,
+	"editor.wordWrap": "on"
 }

+ 2 - 2
app/collect/index.php

@@ -120,7 +120,7 @@ require_once '../public/function.php';
 				</svg>
             </button>
         </div>
-        <div id="main_tag"  style="">
+        <div id="main_tag">
             <span tag="vinaya">sīla</span>
             <span tag="sutta">samadhi</span>
             <span tag="abhidhamma">paññā</span>
@@ -150,7 +150,7 @@ require_once '../public/function.php';
     </div>
 </div>
 
-<div id ="book_list" class='index_inner' style=''>
+<div id ="book_list" class='index_inner'>
 
 </div>
 <div id="page_bottom" style="height:10em;">

+ 3 - 3
app/course/index.php

@@ -25,15 +25,15 @@ include "../pcdl/html_head.php";
 		font-size: 16px;
 	}
 	.index_list_categories{
-		margin-bottom: 2em;
+		margin: 2em 0;
 	}
 	
 	.index_list_categories a:hover{
 		color: var(--tool-link-hover-color);
 	}
-	.index_list_categories a,a:link{
+	/*.index_list_categories a,a:link{
 		color: var(--main-color);
-	}
+	}*/
 	.index_list_categories button{
 		border: none;
 	}

+ 201 - 165
app/dict/index.php

@@ -1,77 +1,87 @@
 <?PHP
 require_once "../pcdl/html_head.php";
 ?>
+
 <body>
-<a name="toc_root"></a>
-<?php
+	<a name="toc_root"></a>
+	<?php
 	require_once("../pcdl/head_bar.php");
-?>
+	?>
 
-<style>
-		body{
+	<style>
+		body {
 			margin: unset;
 		}
-		.index_toolbar{
-			position:unset;
+
+		.index_toolbar {
+			position: unset;
 		}
 
-		.search_toolbar{
+		.search_toolbar {
 			height: initial;
 			padding: 0.6em 1em 0.1em 1em;
 			background-color: var(--tool-bg-color1);
 			border-bottom: none;
 		}
-		.search_fixed{
+
+		.search_fixed {
 			position: fixed;
-			top:-500px;
-			width:100%;
-			display:flex;
+			top: -500px;
+			width: 100%;
+			display: flex;
 			padding: 0.5em 1em;
-        }
-        #dict_search_result{
-            display:flex;
-        }
-        #dict_list{
-            flex:2;
-            text-align: right;
-            padding-right: 1em;
-            border-right: 1px solid var(--border-line-color);
-        }
-        #dict_ref{
-            flex:6;
-            padding:0.5em 1.5em;
-		}
-		
-        #dict_user{
-			flex:2;
-        }
-		.dict_word_card{
+		}
+
+		#dict_search_result {
+			display: flex;
+		}
+
+		#dict_list {
+			flex: 2;
+			text-align: right;
+			padding-right: 1em;
+			border-right: 1px solid var(--border-line-color);
+		}
+
+		#dict_ref {
+			flex: 6;
+			padding: 0.5em 1.5em;
+		}
+
+		#dict_user {
+			flex: 2;
+		}
+
+		.dict_word_card {
 			border-bottom: 1px solid var(--border-line-color);
-			padding: 5px 0;			
+			padding: 5px 0;
 			display: block;
 			border-radius: unset;
 			margin: 10px 0;
 			transition: unset;
 			box-shadow: unset;
 		}
-		.dict_word{
+
+		.dict_word {
 			border-left: none;
 			border-right: none;
 			border-top: none;
 			border-bottom: 1px solid var(--border-line-color);
-			padding: 5px 0;			
+			padding: 5px 0;
 			display: block;
 			border-radius: unset;
 			margin: 10px 0;
 			transition: unset;
 			box-shadow: unset;
 		}
+
 		.dict_word>.dict {
 			font-size: 110%;
 			color: var(--main-color);
 			border-bottom: unset;
-			padding-bottom:10px;
+			padding-bottom: 10px;
 		}
+
 		.dict_word>.mean {
 			font-size: unset;
 			margin: 2px 0;
@@ -81,35 +91,42 @@ require_once "../pcdl/html_head.php";
 		}
 
 		/*for word split part */
-		.dropdown_ctl{
-            display:inline-block;
+		.dropdown_ctl {
+			display: inline-block;
 			margin-right: 0.7em;
-        }
-        .dropdown_ctl>.content{
-            display:flex;
+		}
+
+		.dropdown_ctl>.content {
+			display: flex;
 			border: 1px solid var(--border-line-color);
-    		border-radius: 99px;
-        }
-        .dropdown_ctl>.menu{
-            position:absolute;
-			box-shadow: 0 0 10px rgba(0,0,0,0.15);
-            display:none;
-        }
-        .dropdown_ctl>.menu{
+			border-radius: 99px;
+		}
+
+		.dropdown_ctl>.menu {
+			position: absolute;
+			box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
+			display: none;
+		}
+
+		.dropdown_ctl>.menu {
 			background-color: white;
-        }
-        .dropdown_ctl>.content>.main_view>part{
-            margin:0 0.5em;
-            color:cornflowerblue;
-            cursor: pointer;
-        }
+		}
+
+		.dropdown_ctl>.content>.main_view>part {
+			margin: 0 0.5em;
+			color: cornflowerblue;
+			cursor: pointer;
+		}
+
 		.dropdown_ctl>.menu>.part_list {
 			padding: 5px;
 			cursor: pointer;
 		}
+
 		.dropdown_ctl>.menu>.part_list:hover {
-			background-color:azure;
+			background-color: azure;
 		}
+
 		.dropdown_ctl>.content>.more_button {
 			background-color: var(--btn-color);
 			min-width: 1.4em;
@@ -117,19 +134,38 @@ require_once "../pcdl/html_head.php";
 			border-radius: 99px;
 			cursor: pointer;
 		}
+
+
+		.pre_serach_block {
+			border-bottom: 1px solid var(--shadow-color);
+			padding: 5px 8px;
+		}
+
+		.pre_serach_block_title {
+			display: flex;
+			justify-content: space-between;
+		}
+
+		.pre_serach_content {
+			padding: 4px 4px 4px 15px;
+		}
+
 		#footer_nav {
 			display: none;
 		}
+
 		.right_tool_btn {
 			position: fixed;
 			right: 50px;
 			top: 5em;
 			background-color: unset;
 		}
+
 		.right_tool_btn .icon {
 			height: 2em;
 			width: 2em;
 		}
+
 		.right_tool_btn button:hover {
 			background-color: var(--link-hover-color);
 			border-color: var(--link-color);
@@ -138,6 +174,7 @@ require_once "../pcdl/html_head.php";
 			width: 3em;
 			padding: 0;
 		}
+
 		.right_tool_btn button {
 			background-color: var(--link-color);
 			border-color: var(--link-color);
@@ -146,7 +183,10 @@ require_once "../pcdl/html_head.php";
 			width: 3em;
 			padding: 0;
 		}
-		button, input[type="button"], input[type="submit"] {
+
+		button,
+		input[type="button"],
+		input[type="submit"] {
 			font-weight: 500;
 			font-size: 90%;
 			background-color: none;
@@ -173,148 +213,144 @@ require_once "../pcdl/html_head.php";
 		}
 	</style>
 	<!-- <link type="text/css" rel="stylesheet" href="css/style_mobile.css" media="screen and (max-width:800px)">-->
-	
+
 
 	<!-- tool bar begin-->
 	<div id='search_toolbar' class="search_toolbar">
-			<div style="display:flex;justify-content: space-between;">
-				<div style="flex:2;">
-					<div style="width: fit-content; margin-right: 0; margin-left: auto; margin-top: 1em; margin-bottom: 1em;">
-						<guide gid="dict_search_input"></guide>
-					</div>
+		<div style="display:flex;justify-content: space-between;">
+			<div style="flex:2;">
+				<div style="width: fit-content; margin-right: 0; margin-left: auto; margin-top: 1em; margin-bottom: 1em;">
+					<guide gid="dict_search_input"></guide>
 				</div>
-				<div style="flex:6;">
+			</div>
+			<div style="flex:6;">
+				<div>
 					<div>
-						<div>
-							<input id="dict_ref_search_input" type="input" placeholder="<?php echo $_local->gui->search;?>" onkeyup="dict_input_keyup(event,this)" style="    margin-left: 0.5em;width: 40em;max-width: 100%;font-size:140%;padding: 0.6em;color: var(--btn-hover-bg-color);background-color: var(--btn-color);" onfocus="dict_input_onfocus()" />
-						</div>
-						<div id="word_parts">
-							<div id="input_parts" style="font-size: 1.1em;padding: 2px 1em;"></div>
-						</div>
+						<input id="dict_ref_search_input" type="input" placeholder="<?php echo $_local->gui->search; ?>" onkeyup="dict_input_keyup(event,this)" style="    margin-left: 0.5em;width: 40em;max-width: 100%;font-size:140%;padding: 0.6em;color: var(--btn-hover-bg-color);background-color: var(--btn-color);" onfocus="dict_input_onfocus()" />
 					</div>
-					
-					<div id="pre_search_result" style="background-color: var(--btn-color);z-index: 50;">
-						<div id="pre_search_word"  class="pre_serach_block">
-							<div id="pre_search_word_title"   class="pre_serach_block_title">
-								<div id="pre_search_word_title_left"><?php echo $_local->gui->vocabulary_list;?></div>
-								<div id="pre_search_word_title_right"></div>						
-							</div>
-							<div id="pre_search_word_content"   class="pre_serach_content">
-							</div>
+					<div id="word_parts">
+						<div id="input_parts" style="font-size: 1.1em;padding: 2px 1em;"></div>
+					</div>
+				</div>
+
+				<div id="pre_search_result" style="background-color: var(--btn-color);z-index: 50;">
+					<div id="pre_search_word" class="pre_serach_block">
+						<div id="pre_search_word_title" class="pre_serach_block_title">
+							<div id="pre_search_word_title_left"><?php echo $_local->gui->vocabulary_list; ?></div>
+							<div id="pre_search_word_title_right"></div>
+						</div>
+						<div id="pre_search_word_content" class="pre_serach_content">
 						</div>
 					</div>
-                </div>
-				<span style="flex:2;">
+				</div>
+			</div>
+			<span style="flex:2;">
 				<button onclick="trubo_split()" style="height: fit-content;border: 1px solid var(--btn-border-color);background: var(--btn-color);border-radius: 4px;font-size: 1.2em;padding: 0.5em;">
-				<?php echo $_local->gui->turbo_split;//强力拆分?>
+					<?php echo $_local->gui->turbo_split; //强力拆分
+					?>
 				</button>
 				<guide gid="comp_split"></guide>
-				</span>
-                <div ></div>
-			</div>
-			<div style="display:block;z-index: 5;text-align:center;">
-            
-			</div>
-	</div>	
+			</span>
+			<div></div>
+		</div>
+		<div style="display:block;z-index: 5;text-align:center;">
+
+		</div>
+	</div>
 	<!--tool bar end -->
 
 	<!-- tool bar fixed begin-->
 	<div id='search_toolbar_1' class="search_toolbar search_fixed">
-			<div style="display:flex;">
-				<span >
-				<?php echo $_local->gui->dictionary;?>
-				</span>
+		<div style="display:flex;">
+			<span>
+				<?php echo $_local->gui->dictionary; ?>
+			</span>
+			<div>
 				<div>
-					<div>
-						<input id="dict_ref_search_input_1" type="input" placeholder="<?php echo $_local->gui->search;?>" onkeyup="dict_input_keyup(event,this)" style="margin-left: 0.5em;width: 40em;max-width: 80%;font-size:140%;padding: 0.3em;color: var(--btn-hover-bg-color);background-color: var(--btn-color);" onfocus="dict_input_onfocus()">
-					</div>
-					<div id="pre_search_result_1" style="position: absolute;max-width: 100%; width: 50em;background-color: var(--btn-color);z-index: 51;display: none;">
-						<div  class="pre_serach_block">
-							<div class="pre_serach_block_title">
-								<div id="pre_search_word_title_left_1"><?php echo $_local->gui->vocabulary_list;?></div>
-								<div id="pre_search_word_title_right_1"></div>						
-							</div>
-							<div id="pre_search_word_content_1" class="pre_serach_content">
-							</div>
+					<input id="dict_ref_search_input_1" type="input" placeholder="<?php echo $_local->gui->search; ?>" onkeyup="dict_input_keyup(event,this)" style="margin-left: 0.5em;width: 40em;max-width: 80%;font-size:140%;padding: 0.3em;color: var(--btn-hover-bg-color);background-color: var(--btn-color);" onfocus="dict_input_onfocus()">
+				</div>
+				<div id="pre_search_result_1" style="position: absolute;max-width: 100%; width: 50em;background-color: var(--btn-color);z-index: 51;display: none;">
+					<div class="pre_serach_block">
+						<div class="pre_serach_block_title">
+							<div id="pre_search_word_title_left_1"><?php echo $_local->gui->vocabulary_list; ?></div>
+							<div id="pre_search_word_title_right_1"></div>
+						</div>
+						<div id="pre_search_word_content_1" class="pre_serach_content">
 						</div>
 					</div>
 				</div>
 			</div>
-			<div style="display:block;z-index: 5;">
-			</div>
-	</div>	
+		</div>
+		<div style="display:block;z-index: 5;">
+		</div>
+	</div>
 	<!--tool bar fixed end -->
 	<div id="tool_btn" class="right_tool_btn" style="display: none;">
 		<button style="border: 2px solid var(--nocolor); background-color: unset;"><a href="#toc_root">
-			<svg t="1596888255722" class="icon" style="height: 3em; width: 3em;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4368" width="200" height="200">
-				<path d="M510.4 514.2m-449.2 0a449.2 449.2 0 1 0 898.4 0 449.2 449.2 0 1 0-898.4 0Z" fill="#8a8a8a" p-id="4369"></path>
-				<path d="M719.4 314.5h-416c-8.5 0-15.4-6.9-15.4-15.4v-4.8c0-8.5 6.9-15.4 15.4-15.4h416.1c8.5 0 15.4 6.9 15.4 15.4v4.8c-0.1 8.4-7 15.4-15.5 15.4z" fill="#ffffff" p-id="4370"></path>
-				<path d="M494.1 735.1v-416c0-8.5 6.9-15.4 15.4-15.4h4.8c8.5 0 15.4 6.9 15.4 15.4v416.1c0 8.5-6.9 15.4-15.4 15.4h-4.8c-8.4-0.1-15.4-7-15.4-15.5z" fill="#ffffff" p-id="4371"></path>
-				<path d="M672.5 503.1l-165-165c-6-6-6-15.8 0-21.7l3.4-3.4c6-6 15.8-6 21.7 0l165 165c6 6 6 15.8 0 21.7l-3.4 3.4c-6 6-15.7 6-21.7 0z" fill="#ffffff" p-id="4372"></path>
-				<path d="M325.2 478l165-165c6-6 15.8-6 21.7 0l3.4 3.4c6 6 6 15.8 0 21.7l-165 165c-6 6-15.8 6-21.7 0l-3.4-3.4c-5.9-6-5.9-15.7 0-21.7z" fill="#ffffff" p-id="4373"></path>
-			</svg>
-		</a>
+				<svg t="1596888255722" class="icon" style="height: 3em; width: 3em;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4368" width="200" height="200">
+					<path d="M510.4 514.2m-449.2 0a449.2 449.2 0 1 0 898.4 0 449.2 449.2 0 1 0-898.4 0Z" fill="#8a8a8a" p-id="4369"></path>
+					<path d="M719.4 314.5h-416c-8.5 0-15.4-6.9-15.4-15.4v-4.8c0-8.5 6.9-15.4 15.4-15.4h416.1c8.5 0 15.4 6.9 15.4 15.4v4.8c-0.1 8.4-7 15.4-15.5 15.4z" fill="#ffffff" p-id="4370"></path>
+					<path d="M494.1 735.1v-416c0-8.5 6.9-15.4 15.4-15.4h4.8c8.5 0 15.4 6.9 15.4 15.4v416.1c0 8.5-6.9 15.4-15.4 15.4h-4.8c-8.4-0.1-15.4-7-15.4-15.5z" fill="#ffffff" p-id="4371"></path>
+					<path d="M672.5 503.1l-165-165c-6-6-6-15.8 0-21.7l3.4-3.4c6-6 15.8-6 21.7 0l165 165c6 6 6 15.8 0 21.7l-3.4 3.4c-6 6-15.7 6-21.7 0z" fill="#ffffff" p-id="4372"></path>
+					<path d="M325.2 478l165-165c6-6 15.8-6 21.7 0l3.4 3.4c6 6 6 15.8 0 21.7l-165 165c-6 6-15.8 6-21.7 0l-3.4-3.4c-5.9-6-5.9-15.7 0-21.7z" fill="#ffffff" p-id="4373"></path>
+				</svg>
+			</a>
 		</button>
 	</div>
 	<script>
-	 window.addEventListener('scroll',winScroll);
-	function winScroll(e){ 
-		if(GetPageScroll().y>150){
-			$("#search_toolbar_1").css("top",0) ;
-		}
-		else{
-			$("#search_toolbar_1").css("top",GetPageScroll().y - 150) ;
-		}
-		if(GetPageScroll().y>$(window).height()*0.9){
-			$("#tool_btn").show();
+		window.addEventListener('scroll', winScroll);
+
+		function winScroll(e) {
+			if (GetPageScroll().y > 150) {
+				$("#search_toolbar_1").css("top", 0);
+			} else {
+				$("#search_toolbar_1").css("top", GetPageScroll().y - 150);
+			}
+			if (GetPageScroll().y > $(window).height() * 0.9) {
+				$("#tool_btn").show();
+			} else {
+				$("#tool_btn").hide();
+			}
+
 		}
-		else{
-			$("#tool_btn").hide();
+		//滚动条位置
+		function GetPageScroll() {
+			var pos = new Object();
+			var x, y;
+			if (window.pageYOffset) { // all except IE	
+				y = window.pageYOffset;
+				x = window.pageXOffset;
+			} else if (document.documentElement && document.documentElement.scrollTop) { // IE 6 Strict	
+				y = document.documentElement.scrollTop;
+				x = document.documentElement.scrollLeft;
+			} else if (document.body) { // all other IE	
+				y = document.body.scrollTop;
+				x = document.body.scrollLeft;
+			}
+			pos.x = x;
+			pos.y = y;
+			return (pos);
 		}
-		
-	}
- //滚动条位置
-function GetPageScroll() 
-{ 
-	var pos=new Object();
-	var x, y; 
-	if(window.pageYOffset) 
-	{	// all except IE	
-		y = window.pageYOffset;	
-		x = window.pageXOffset; 
-	} else if(document.documentElement && document.documentElement.scrollTop) 
-	{	// IE 6 Strict	
-		y = document.documentElement.scrollTop;	
-		x = document.documentElement.scrollLeft; 
-	} else if(document.body) {	// all other IE	
-		y = document.body.scrollTop;	
-		x = document.body.scrollLeft;   
-	} 
-	pos.x=x;
-	pos.y=y;
-	return(pos);
-}
 	</script>
-    <style>
-        #dt_title{
-            border-bottom: 2px solid var(--link-hover-color);
-        }
-    </style>
+	<style>
+		#dt_title {
+			border-bottom: 2px solid var(--link-hover-color);
+		}
+	</style>
 	<script language="javascript" src="./dict.js"></script>
 
 	<div id="dict_search_result" style="background-color:white;color:black;">
 	</div>
-	
-    <?php
-    if(!empty($_GET["key"])){
-        echo "<script>";
-        echo "dict_pre_word_click(\"{$_GET["key"]}\")";
-        echo "</script>";
-    }
+
+	<?php
+	if (!empty($_GET["key"])) {
+		echo "<script>";
+		echo "dict_pre_word_click(\"{$_GET["key"]}\")";
+		echo "</script>";
+	}
 	?>
-	
 
-<?php
-include "../pcdl/html_foot.php";
-?>
 
+	<?php
+	include "../pcdl/html_foot.php";
+	?>

+ 148 - 72
app/lang/lang.php

@@ -1,86 +1,162 @@
-	<!--显示模式-->
-	<script>
-		var g_language="en";
-		var g_currLink="";
-		function lang_init(strPage){
-			g_currLink = strPage;
-		}
-		function setLang(strLang){
-			g_language=strLang;
-			setCookie('language',g_language,365);
-			if(window.location.search==""){
-				window.location.assign(location.href+"?language="+g_language);
+<script>
+	var g_language = "en";
+	var g_currLink = "";
+
+	function lang_init(strPage) {
+		g_currLink = strPage;
+	}
+
+	function setLang(strLang) {
+		g_language = strLang;
+		setCookie('language', g_language, 365);
+		if (window.location.search == "") {
+			window.location.assign(location.href + "?language=" + g_language);
+		} else {
+			let org_parameter_str = window.location.search.substr(1);
+			let arr_parameter = org_parameter_str.split("&");
+			let new_parameter_str = ""
+			for (let i_arr = 0; i_arr < arr_parameter.length; i_arr++) {
+				if (arr_parameter[i_arr].split("=")[0] == "language") {
+					arr_parameter[i_arr] = "language=" + g_language;
+					new_parameter_str = arr_parameter[i_arr];
+				} else {}
 			}
-			else{
-				let org_parameter_str=window.location.search.substr(1);
-				let arr_parameter=org_parameter_str.split("&");
-				let new_parameter_str=""
-				for(let i_arr=0;i_arr<arr_parameter.length;i_arr++){
-					if(arr_parameter[i_arr].split("=")[0]=="language"){
-						arr_parameter[i_arr]="language="+g_language;
-						new_parameter_str=arr_parameter[i_arr];
-					}
-					else{}
-				}
-				if(new_parameter_str==""){
-					window.location.assign(location.href+"&language="+g_language);
-				}
-				else{
-					new_parameter_str="?"+arr_parameter.join("&");
-					window.location.assign(location.pathname+new_parameter_str);
-				}
+			if (new_parameter_str == "") {
+				window.location.assign(location.href + "&language=" + g_language);
+			} else {
+				new_parameter_str = "?" + arr_parameter.join("&");
+				window.location.assign(location.pathname + new_parameter_str);
 			}
 		}
-	</script>
-	<style>
-	#lang_list {
-		background-color: var(--tool-bg-color2);
 	}
-	#lang_list::after {
-	content: " ";
-    position: absolute;
-    bottom: 100%;
-    right: 0;
-    margin-right: 0.7em;
-    border-width: 5px;
-    border-style: solid;
-    border-color: transparent;
-    border-bottom-color: var(--tool-bg-color);
-	}
-	.dropdown-content a {
+</script>
+<style>
+
+.header-dropdown-content ul,
+.header-dropdown-content li{
+		list-style-type: none;
 		cursor: pointer;
-		background-color: var(--tool-bg-color);
 	}
+
+	.nav_link {
+		color: var(--new-tool-btn);
+		font-size: 14px;
+		opacity: 0;
+		transition: opacity 150ms ease-in-out;
+	}
+
+	.nav_link a:hover {
+		color: var(--tool-color);
+	}
+
+	.header-dropdown-content {
+		border-radius: 3px;
+		display: none;
+		position: absolute;
+		background-color: var(--new-tool-content-bg);
+		min-width: 60px;
+		z-index: 910;
+		top: calc(100% + 6px);
+	}
+
+	.header-dropdown-content::after {
+		content: " ";
+		position: absolute;
+		bottom: 100%;
+		border: 6px solid transparent;
+		border-bottom-color: var(--new-tool-content-bg);
+	}
+
+	.header-dropdown-content::before {
+		content: '';
+		position: absolute;
+		bottom: 100%;
+		width: 100%;
+		border: 6px solid transparent;
+	}
+
+	.header-dropdown-content li:hover {
+		background-color: var(--new-tool-list-hover-bg);
+		border-radius: 3px;
+	}
+
+	.header-dropdown-content li:hover .nav_link {
+		color: var(--tool-color);
+	}
+
+	.header-dropdown-content li:hover .disable {
+		color: var(--new-tool-content-disabled);
+	}
+
+	.right-content {
+		right: 0;
+		box-shadow: 0px 3px 10px 0px var(--shadow-color);
+	}
+
+	.right-content::after {
+		right: 12px;
+	}
+
+	.right-content li div {
+		padding: 0.7rem;
+		opacity: 1;
+	}
+
+	.disable {
+		color: var(--new-tool-content-disabled);
+		cursor: default;
+	}
+
+	/*
+	#lang_list::after {
+		content: " ";
+		position: absolute;
+		bottom: 100%;
+		right: 0;
+		margin-right: 0.7em;
+		border-width: 5px;
+		border-style: solid;
+		border-color: transparent;
+		border-bottom-color: var(--tool-bg-color);
+	}*/
+
 	.icon {
 		fill: var(--btn-color);
 	}
-	#lang_select{
-		margin: auto 0;
-	}
-	</style>
-		<div id="lang_select" class="dropdown" onmouseover="switchMenu(this,'lang_list')" onmouseout="hideMenu()">
-			<div style="">
-				<button class="dropbtn icon_btn" onClick="switchMenu(this,'lang_list')" id="lang_button">	
-					<svg class="icon" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 24 24" id="ic_language_24px" >
-						<path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zm6.93 6h-2.95a15.65 15.65 0 0 0-1.38-3.56A8.03 8.03 0 0 1 18.92 8zM12 4.04c.83 1.2 1.48 2.53 1.91 3.96h-3.82c.43-1.43 1.08-2.76 1.91-3.96zM4.26 14C4.1 13.36 4 12.69 4 12s.1-1.36.26-2h3.38c-.08.66-.14 1.32-.14 2 0 .68.06 1.34.14 2H4.26zm.82 2h2.95c.32 1.25.78 2.45 1.38 3.56A7.987 7.987 0 0 1 5.08 16zm2.95-8H5.08a7.987 7.987 0 0 1 4.33-3.56A15.65 15.65 0 0 0 8.03 8zM12 19.96c-.83-1.2-1.48-2.53-1.91-3.96h3.82c-.43 1.43-1.08 2.76-1.91 3.96zM14.34 14H9.66c-.09-.66-.16-1.32-.16-2 0-.68.07-1.35.16-2h4.68c.09.65.16 1.32.16 2 0 .68-.07 1.34-.16 2zm.25 5.56c.6-1.11 1.06-2.31 1.38-3.56h2.95a8.03 8.03 0 0 1-4.33 3.56zM16.36 14c.08-.66.14-1.32.14-2 0-.68-.06-1.34-.14-2h3.38c.16.64.26 1.31.26 2s-.1 1.36-.26 2h-3.38z"/>
-					</svg>
-				</button>
+</style>
+<div id="lang_select" class="dropdown" onmouseover="switchMenu(this,'lang_list')" onmouseout="hideMenu()">
+	<button class="dropbtn icon_btn" onClick="switchMenu(this,'lang_list')" id="lang_button">
+		<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="ic_language_24px">
+			<path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zm6.93 6h-2.95a15.65 15.65 0 0 0-1.38-3.56A8.03 8.03 0 0 1 18.92 8zM12 4.04c.83 1.2 1.48 2.53 1.91 3.96h-3.82c.43-1.43 1.08-2.76 1.91-3.96zM4.26 14C4.1 13.36 4 12.69 4 12s.1-1.36.26-2h3.38c-.08.66-.14 1.32-.14 2 0 .68.06 1.34.14 2H4.26zm.82 2h2.95c.32 1.25.78 2.45 1.38 3.56A7.987 7.987 0 0 1 5.08 16zm2.95-8H5.08a7.987 7.987 0 0 1 4.33-3.56A15.65 15.65 0 0 0 8.03 8zM12 19.96c-.83-1.2-1.48-2.53-1.91-3.96h3.82c-.43 1.43-1.08 2.76-1.91 3.96zM14.34 14H9.66c-.09-.66-.16-1.32-.16-2 0-.68.07-1.35.16-2h4.68c.09.65.16 1.32.16 2 0 .68-.07 1.34-.16 2zm.25 5.56c.6-1.11 1.06-2.31 1.38-3.56h2.95a8.03 8.03 0 0 1-4.33 3.56zM16.36 14c.08-.66.14-1.32.14-2 0-.68-.06-1.34-.14-2h3.38c.16.64.26 1.31.26 2s-.1 1.36-.26 2h-3.38z" />
+		</svg>
+	</button>
+	<ul class="header-dropdown-content right-content" id="lang_list">
+		<li>
+			<!--<a onclick="setLang('my')">-->
+			<div class="nav_link disable">
+				မြန်မာ
 			</div>
-			<div class="dropdown-content" id="lang_list">
-				<a onclick="setLang('my')">
-					မြန်မာ
-				</a>
-				<a onclick="setLang('si')">
+			<!--</a>-->
+		</li>
+		<li><a onclick="setLang('si')">
+				<div class="nav_link">
 					සිංහල
-				</a>
-				<a onclick="setLang('en')">
+				</div>
+			</a></li>
+		<li><a onclick="setLang('en')">
+				<div class="nav_link">
 					English
-				</a>
-				<a onclick="setLang('zh-cn')">
+				</div>
+			</a></li>
+		<li><a onclick="setLang('zh-cn')">
+				<div class="nav_link">
 					简体中文
-				</a>
-				<a onclick="setLang('zh-tw')">
+				</div>
+			</a></li>
+		<li><a onclick="setLang('zh-tw')">
+				<div class="nav_link">
 					繁體中文
-				</a>
-			</div>
-		</div>
+				</div>
+			</a></li>
+	</ul>
+</div>

+ 73 - 66
app/pcdl/css/basic_style.css

@@ -1,21 +1,23 @@
 body {
-	font-family: "Noto Sans", "Noto Sans SC", "Noto Sans TC", Arial, Verdana;
-	font-style: normal;
-	color: var(--main-color);
-	font-weight: 400;
-	font-size: 13px;
-	overflow-x: hidden;
-	margin: 0;
+    font-family: "Noto Sans", "Noto Sans SC", "Noto Sans TC", Arial, Verdana;
+    font-style: normal;
+    color: var(--main-color);
+    font-weight: 400;
+    font-size: 13px;
+    overflow-x: hidden;
+    margin: 0;
 }
+
 div {
-	-webkit-box-sizing: border-box;
-	-moz-box-sizing: border-box;
-	box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
 }
+
 hr {
-	margin: 14px 0;
-	border: 1px solid var(--tool-line-color);
-	transform: scaleY(0.4);
+    margin: 14px 0;
+    border: 1px solid var(--tool-line-color);
+    transform: scaleY(0.4);
 }
 
 input,
@@ -28,93 +30,98 @@ hr,
 h1,
 h2,
 h3 {
-	font-family: inherit;
-	font-size: inherit;
-	font-style: inherit;
-	font-weight: inherit;
-	color: inherit;
-	background-color: inherit;
-	-webkit-box-sizing: border-box;
-	-moz-box-sizing: border-box;
-	box-sizing: border-box;
+    font-family: inherit;
+    font-size: inherit;
+    font-style: inherit;
+    font-weight: inherit;
+    color: inherit;
+    background-color: inherit;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
 }
 
 input[type="text"],
 input[type="input"],
 textarea {
-	font-weight: 300;
-	width: 100%;
-	border: 1px solid var(--btn-border-line-color);
-	border-radius: 4px;
-	padding: 0.1em 0.3em;
-	font-size: 100%;
-	min-height: 1.2em;
-	margin: 2px 0;
+    font-weight: 300;
+    width: 100%;
+    border: 1px solid var(--btn-border-line-color);
+    border-radius: 4px;
+    padding: 0.1em 0.3em;
+    font-size: 100%;
+    min-height: 1.2em;
+    margin: 2px 0;
 }
+
 select {
-	font-weight: 400;
-	border: 1px solid #aaaaaa;
-	padding: 2px 4px;
-	min-height: 2em;
-	border-radius: 4px;
-	cursor: pointer;
-	margin: 3px 0;
+    font-weight: 400;
+    border: 1px solid #aaaaaa;
+    padding: 2px 4px;
+    min-height: 2em;
+    border-radius: 4px;
+    cursor: pointer;
+    margin: 3px 0;
 }
 
 ul,
 li {
-	white-space: normal;
-	color: inherit;
-	margin: 0px;
-	padding: 0px;
-	word-break: keep-all;
-	text-overflow: ellipsis;
-	list-style-type: none;
+    white-space: normal;
+    color: inherit;
+    margin: 0px;
+    padding: 0px;
+    word-break: keep-all;
+    text-overflow: ellipsis;
+    list-style-type: none;
 }
+
 a,
 a:link,
 a:visited {
-	color: var(--link-color);
-	text-decoration: none;
-	cursor: pointer;
+    color: var(--link-color);
+    text-decoration: none;
+    cursor: pointer;
 }
 
 a:focus {
-	outline: 1px dotted;
+    outline: 1px dotted;
 }
 
 a:hover,
 a:active {
-	color: var(--tool-link-hover-color);
-	outline: none;
+    color: var(--tool-link-hover-color);
+    outline: none;
 }
+
 .footer_navbar {
-	display: flex;
-	flex-wrap: wrap;
-	width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    width: 100%;
 }
 
 .icon {
-	height: 1.4em;
-	width: 1.4em;
-	fill: #555;
-	transition: all 0.2s ease;
+    height: 20px;
+    width: 20px;
+    fill: #555;
+    transition: all 0.2s ease;
 }
 
 .small_icon {
-	height: 1em;
-	width: 1em;
-	fill: #555;
-	-webkit-transition-duration: 0.2s;
-	transition-duration: 0.2s;
+    height: 1em;
+    width: 1em;
+    fill: #555;
+    -webkit-transition-duration: 0.2s;
+    transition-duration: 0.2s;
 }
 
 .broder-1 {
-	border: 1px solid var(--border-line-color);
+    border: 1px solid var(--border-line-color);
 }
+
 .broder-2 {
-	border: 2px solid var(--border-line-color);
+    border: 2px solid var(--border-line-color);
 }
+
 .broder-r {
-	border-radius: 5px;
-}
+    border-radius: 5px;
+}

+ 21 - 35
app/pcdl/css/color_day.css

@@ -3,54 +3,40 @@
     --main-color: #1E1E1E;
     --main-color1: #626262;
     --main-color1: #626262;
-
     --btn-color: #DFDFDF;
     --btn-bg-color: #DFDFDF;
     --btn-border-color: #7D7D7D;
     --btn-hover-color: #FFFFFF;
-    --btn-hover-bg-color:#494949;
-    --btn-border-line-color:#7D7D7D
- 
-    --input-bg-color:#424242;
-    --select-bg-color:#424242;
-    --drop-bg-color:#EBEBEB;
-
+    --btn-hover-bg-color: #494949;
+    --btn-border-line-color: #7D7D7D --input-bg-color: #424242;
+    --select-bg-color: #424242;
+    --drop-bg-color: #EBEBEB;
     --link-color: #6baaff;
-    --link-hover-color:#1F7DF5;
-
+    --link-hover-color: #1F7DF5;
     --border-line-color: #C5C7CB;
     --border: 1px solid var(--border-line-color);
     --border-shadow: #D2D2D2;
     --shadow-color: rgba(0, 0, 0, 0.28);
-
-    --mean-user-color:#F9468F;
- 
-
-    --tool-bg-color: #545454;
-    --tool-color:#FFFFFF;
-    --tool-bt-bg-color:#222222;
-    --tool-bt-color:#FFFFFF;
-    --tool-bt-bg-hover-color:#545454;
-    --tool-bt-hover-color:#FFFFFF;
+    --mean-user-color: #F9468F;
+    --tool-bg-color: #333333;
+    --tool-color: #FFFFFF;
+    --tool-bt-bg-color: #222222;
+    --tool-bt-color: #FFFFFF;
+    --tool-bt-bg-hover-color: #545454;
+    --tool-bt-hover-color: #FFFFFF;
     --tool-bt-border-line-color: #C5C7CB;
-
     --tool-bg-color1: #ebebeb;
-    --tool-color1:rgb(49, 49, 49);
-    --tool-bt-bg-color1:#222222;
-    --tool-bt-color1:#FFFFFF;
-    --tool-bt-bg-hover-color1:#545454;
-    --tool-bt-hover-color1:#FFFFFF;
+    --tool-color1: rgb(49, 49, 49);
+    --tool-bt-bg-color1: #222222;
+    --tool-bt-color1: #FFFFFF;
+    --tool-bt-bg-hover-color1: #545454;
+    --tool-bt-hover-color1: #FFFFFF;
     --tool-bt-border-line-color1: #C5C7CB;
-
-    --tool-title-color:#1B1C1C;
-    
+    --tool-title-color: #1B1C1C;
     --tool-line-color: #A4A4A4;
-    --tool-link-hover-color:#A1C9FF;   
-
+    --tool-link-hover-color: #A1C9FF;
     --nocolor: rgba(255, 255, 255, 0);
-    
-    --box-bg-color1:#545454;
-    --box-bg-color2:#545454;
-
+    --box-bg-color1: #545454;
+    --box-bg-color2: #545454;
     --info-bg-color: rgba(255, 255, 255, 0.8);
 }

+ 473 - 290
app/pcdl/head_bar.php

@@ -1,315 +1,498 @@
 <script>
-		
 
-	
+
+
 </script>
-	<style>
-.icon_btn{
-    color: var(--btn-color);
-    padding: 0.3em 0.3em;
-    border: 1px solid var(--nocolor);
-    border-radius: 3px;
-    margin: 0 2px;
-}
-
-.icon_btn:hover{
-    padding: 0.3em 0.3em;
-    background-color: var(--btn-hover-bg-color);
-    border: 1px solid var(--btn-border-color);
-    border-radius: 3px;
-    margin: 0 2px;
-}
-
-		/* 容器 <div> - 需要定位下拉内容 */
-.dropdown {
-    position: relative;
-    display: inline-flex;
-}
-
-.toolgroup1 {
-	display: flex;
-}
-
-/* 下拉内容 (默认隐藏) */
-.dropdown-content {
-    border-radius: 3px;
-    display: none;
-    position: absolute;
-    background-color: var(--tool-bg-color2);
-    min-width: 60px;
-    box-shadow: 0px 3px 16px 0px var(--shadow-color);
-    z-index: 6;
-    top: 100%;
-    right: 0;
-}
-
-
-
-
-/*使用一半宽度 (120/2 = 60) 来居中提示工具*/
-.dropdown-content::after {
-    content: " ";
-    position: absolute;
-    bottom: 100%;
-    right: 0;
-    margin-right: 20px;
-    border-width: 5px;
-    border-style: solid;
-    /*border-color: transparent;*/
-}
-
-
-
-/* 下拉菜单的链接 */
-.dropdown-content a {
-    padding: 6px 6px;
-    text-decoration: none;
-    display: block;
-    white-space: nowrap;
-	color: var(--tool-color);
-}
-
-
-
-/* 鼠标移上去后修改下拉菜单链接颜色 */
-.dropdown-content a:hover {
-    background-color: var(--btn-hover-bg-color);
-    color: var(--btn-hover-color);
-    border-radius: 3px;
-}
-
-
-/* 当下拉内容显示后修改下拉按钮的背景颜色 */
-.dropdown:hover .icon_btn {
-    background-color: var(--btn-hover-bg-color);
-    border-color: var(--btn-border-line-color);
-}
-
-.dropdown:hover .icon {
-    fill: var(--btn-hover-color);
-}
-
-.index_toolbar {
-    height: 3.5em;
-    width: 100%;
-    top: 0;
-    left: 0;
-    margin: 0;
-    /*text-align: center;*/
-    padding: 0 10px;
-    border-bottom: 1px solid var(--input-bg-color);
-    background-color: var(--tool-bg-color);
-    display: -webkit-flex;
-    display: -moz-flex;
-    display: flex;
-    -webkit-align-items: center;
-    -moz-align-items: center;
-    align-items: center;
-    -webkit-justify-content: space-between;
-    -moz-justify-content: space-between;
-    justify-content: space-between;
-    z-index: 2
-
-}
-	.head_nav{
+<style>
+	:root {
+		--new-tool-bg: #333333;
+		--new-tool-content-bg: #4D4D4D;
+		--new-tool-list-hover-bg: #7B7B7B;
+		--new-tool-btn-border: #7B7B7B;
+		--new-tool-btn: #CDCDCD;
+		--new-tool-content-disabled: #989898;
+	}
+
+	*,
+	*::before,
+	*::after {
+		box-sizing: border-box;
+	}
+
+    body{
+        padding-top: 50px;
+	}
+	
+	nav a,
+	nav a:link,
+	nav a:visited {
+		color: unset;
+	}
+
+	header ul,
+	header li {
+		white-space: nowrap;
+	}
+
+	header {
+		background: var(--new-tool-bg);
+		position: fixed;
+		text-align: center;
+		height: 50px;
+		z-index: 900;
+		width: 100%;
+		top:0;
+	}
+
+	header label {
+		cursor: pointer;
+	}
+
+	.head-logo {
+		height: 50px;
 		display: flex;
-		padding: 0 1em;
-		color: var(--btn-color);
-		font-size: 1.2em;
-		font-weight: 300;
-		text-transform: capitalize;
-	}	
-	.head_nav li{
-		display: inline-flex;
-		padding: 0 0.5em;
 		align-items: center;
+		justify-content: center;
 	}
 
-	.nav_link, .nav_link:link, .nav_link:visited {
-		color:var(--btn-color);
+	.head-logo svg {
+		height: 50px;
+		width: 100px;
+	}
+
+	.platform-toggle {
+		position: relative;
+		border-radius: 3px;
+		color: white;
 		white-space: nowrap;
+		font-weight: 200;
+		font-size: 17px;
+		transition: all ease 300ms;
+	}
+
+	.platform-toggle a {
+		color: white;
+		transition: color ease 300ms;
+	}
+
+	.goto-platform {
+		display: inline-flex;
+		color: white;
+		transform: scaleX(0);
+		opacity: 0;
+		transform-origin: top left;
+		transition: all ease 250ms;
+		margin: 0;
+		padding: 0;
+	}
+
+	.platform-toggle:hover .goto-platform {
+		cursor: pointer;
+		transform: scaleX(1);
+		opacity: 1;
+	}
+
+	.platform-toggle:hover a {
+		color: var(--new-tool-content-disabled);
+	}
+
+	.platform-toggle::after {
+		content: '';
+		background-image: linear-gradient(to right, var(--new-tool-bg), var(--new-tool-btn));
+		height: 1px;
+		position: absolute;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		transform: scaleX(0);
+		transform-origin: left;
+		transition: transform ease 300ms;
+	}
+
+	.platform-toggle:hover::after {
+		transform: scaleX(1);
+	}
+
+	nav {
+		position: absolute;
+		text-align: left;
+		top: 100%;
+		left: 0;
+		background: var(--new-tool-bg);
+		width: 100%;
+		transform: scale(1, 0);
+		transform-origin: top;
+		transition: transform 350ms ease-in-out;
+		border-top: 1px solid black;
+	}
+
+	nav ul {
+		margin: 0;
+		padding: 0;
+		list-style: none;
+	}
+
+	nav li {
+		margin: 1rem;
+	}
+
+	.icon_btn {
+		color: var(--new-tool-btn-border);
+		padding: 0.3em 0.3em;
+		border: 1px solid var(--nocolor);
+		border-radius: 3px;
+		margin: 0 2px;
+	}
+/*
+	.icon_btn:hover {
+		padding: 0.3em 0.3em;
+		background-color: var(--new-tool-list-hover-bg);
+		border: 1px solid var(--new-tool-btn-border);
+		border-radius: 3px;
+		margin: 0 2px;
+	}*/
+
+	.nav-toggle {
+		display: none;
+	}
+
+	.nav-toggle-label {
+		position: absolute;
+		top: 0;
+		left: 0;
+		margin-left: 1rem;
+		height: 100%;
+		display: flex;
+		align-items: center;
+	}
+
+	.nav-toggle-label span,
+	.nav-toggle-label span::before,
+	.nav-toggle-label span::after {
+		display: block;
+		background: var(--new-tool-btn);
+		height: 2px;
+		width: 20px;
+		position: relative;
+	}
+
+	.nav-toggle-label span::before,
+	.nav-toggle-label span::after {
+		content: '';
+		position: absolute;
+	}
+
+	.nav-toggle-label span::before {
+		bottom: 7px;
+	}
+
+	.nav-toggle-label span::after {
+		top: 7px;
+	}
+
+	.nav-toggle:checked~nav {
+		transform: scale(1, 1);
 	}
-	.nav_link:hover{
-    	color: var(--btn-border-color);
+
+	.nav-toggle:checked~.nav-toggle-label span,
+	.nav-toggle:checked~.nav-toggle-label span::before,
+	.nav-toggle:checked~.nav-toggle-label span::after {
+		background-color: white;
 	}
 
-	.head_nav_dropdown_content{
+
+	.nav-toggle:checked~nav .nav_link {
+		opacity: 1;
+		transition: opacity 250ms ease-in-out 250ms;
+	}
+
+	.nav_link {
+		color: var(--new-tool-btn);
+		font-size: 14px;
+		opacity: 0;
+		transition: opacity 150ms ease-in-out;
+
+	}
+
+	.nav_link a:hover {
+		color: var(--tool-color);
+	}
+
+	.nav-right {
+		position: absolute;
+		align-items: center;
+		top: 0;
+		right: 0;
+		margin-right: 1em;
+		height: 100%;
+		display: flex;
+		text-align: left;
+	}
+
+	.header-dropdown-content {
+		border-radius: 3px;
+		display: none;
 		position: absolute;
-		background-color: var(--tool-bg-color);
-		display:none;
-		margin-top:5em;
+		background-color: var(--new-tool-content-bg);
+		min-width: 60px;
+		z-index: 910;
+		top: calc(100% + 6px);
 	}
-	.head_nav_dropdown_content li{
-		display:block;
+
+	.header-dropdown-content::after {
+		content: " ";
+		position: absolute;
+		bottom: 100%;
+		border: 6px solid transparent;
+		border-bottom-color: var(--new-tool-content-bg);
 	}
-	.head_nav_dropdown:hover .head_nav_dropdown_content{
-		display:block;
+
+	.header-dropdown-content::before {
+		content: '';
+		position: absolute;
+		bottom: 100%;
+		width: 100%;
+		border: 6px solid transparent;
+	}
+
+	.header-dropdown-content li:hover {
+		background-color: var(--new-tool-list-hover-bg);
 		border-radius: 3px;
 	}
 
-	#pre_search_result {
-    position: absolute;
-    background-color: var(--btn-hover-bg-color);
-    border: 1px solid var(--btn-border-line-color);
-    border-radius: 5px;
-    max-width: 100%;
-    width: 50em;
-	display:none;
+	.header-dropdown-content li:hover .nav_link {
+		color: var(--tool-color);
+	}
+
+	.header-dropdown-content li:hover .disable {
+		color: var(--new-tool-content-disabled);
+	}
+
+	.right-content {
+		right: 0;
+		box-shadow: 0px 3px 10px 0px var(--shadow-color);
+	}
+
+	.right-content::after {
+		right: 12px;
+	}
+
+	.right-content li div {
+		padding: 0.7rem;
+		opacity: 1;
 	}
-	.pre_serach_block{
-		border-bottom: 1px solid var(--shadow-color);
-		padding: 5px 8px;
+
+	.left-content {
+		display: block;
+	}
+
+	/* 容器 <div> - 需要定位下拉内容 */
+	.header-dropdown {
+		position: relative;
+		display: inline-flex;
+	}
+
+	#more .dropdown-content {
+		right: unset;
+	}
+
+	#more .dropdown-content::after {
+		all: unset;
 	}
-	.pre_serach_block_title{
-		display:flex;
+
+	.nav-mobile {
+		display: block;
+	}
+
+	.more_btn {
+		display: none;
+	}
+
+	.icon{
+		fill:var(--new-tool-btn);
+	}
+
+	/* 当下拉内容显示后修改下拉按钮的背景颜色 */
+	.header-dropdown:hover .icon_btn {
+		background-color: var(--new-tool-list-hover-bg);
+		border-color: var(--new-tool-btn-border);
+	}
+
+	.index_toolbar {
+		height: 3.5em;
+		width: 100%;
+		top: 0;
+		left: 0;
+		margin: 0;
+		/*text-align: center;*/
+		padding: 0 10px;
+		border-bottom: 1px solid var(--input-bg-color);
+		background-color: var(--new-tool-bg);
+		display: -webkit-none;
+		display: -moz-none;
+		display: none;
+		-webkit-align-items: center;
+		-moz-align-items: center;
+		align-items: center;
+		-webkit-justify-content: space-between;
+		-moz-justify-content: space-between;
 		justify-content: space-between;
+		z-index: 2
 	}
-	.pre_serach_content{
-		padding: 4px 4px 4px 15px;
-	}
-
-	.lab_tab{
-		display:flex;
-	}
-	.lab_tab>li{
-		padding:5px;
-	}
-
-	.head_nav_dropdown:hover  {
-		color: var(--btn-border-color);
-	}
-	#user_info {
-			background-color: var(--bg-color);
-			color: var(--main-color);
-	}
-	.icon {
-		fill: var(--btn-color);
-	}
-	.head_nav_dropdown_content{
-		padding: 0.1em 0.5em 0.1em 0;
-	}
-	</style>
-	<style media="screen and (max-width:800px)">
-#right_pannal{
-	display:none;
-}
-.when_right_fixed{
-	padding-right:0;
-}
-.index_toolbar{
-	position:unset;
-}
-#pali_pedia{
-	font-size: 200%;
-	margin-top: auto;
-	margin-bottom: auto;
-	padding-left: 0.5em;
-}
-.index_inner{
-		display:block;
-	}
-	.card{
-	display: flex;
-    justify-content: space-between;
-    padding-right: 5em !important;
-}
-.card_info{
-	flex:5;
-}
-.article_title_link{
-	flex:5;
-}
-.content_inner{
-	width:95vw;
-}
-.content_inner>div{
-    width:100% !important;
-}
-.index_toolbar{
-	padding:0;
-
-}
-.head_nav{
-	padding:0;
-
-}
-.head_nav>li:not(:first-child){
-	display:none;
-}
-.toolgroup1>span{
-	display:none !important;
-}
-.title_bar{
-		width:95vw;
+
+	.disable {
+		color: var(--new-tool-content-disabled);
+		cursor: default;
 	}
-</style>
 
-		<!-- tool bar begin-->
-		<div class='index_toolbar'>
-			<div id="index_nav">
-
-				<ul class="head_nav">
-					<li>
-						<a href="../pcdl">
-						<svg class="icon" style="height: 2.7em;width: 6.8em;padding-top: 15px;">
-							<use xlink:href="../public/images/svg/wikipali_without_studio.svg#wikipali_without_studio"></use>
-						</svg>
-						</a>
-
-						<div class="head_nav_dropdown">
-						
-						<span style="padding: 0.1em 0 0.1em 0.5em;display: flex;">
-							<b><?php echo $_local->gui->library; ?></b>
-							<svg style="width:1em;height:1em;" xmlns="http://www.w3.org/2000/svg" t="1596126410137" class="icon" viewBox="0 0 1025 1024" version="1.1" p-id="3309">
-								<path d="M186.1116047 187.53647595l648.82527161 0L834.93687631 836.36174757 186.1116047 187.53647595z" p-id="3310"/>
-							</svg>
-						</span>
-							<ul class="head_nav_dropdown_content" style="margin-top:0;margin-left:0; ">
-								<!--<li><a class="nav_link" href="../pcdl"><?php echo $_local->gui->library; ?></a></li>-->
-								<li><a class="nav_link" href="../studio" target="_blank"><b><?php echo $_local->gui->studio; ?></b></a></li>
-							</ul>
-						</div>
-					</li>
-					<li><a class="nav_link" href="../palicanon"><?php echo $_local->gui->pali_canon; ?></a></li>
-					<li><a class="nav_link" href="../course"><?php echo $_local->gui->lesson; ?></a></li>
-					<li><a class="nav_link" href="../wiki"><?php echo $_local->gui->encyclopedia; ?></a></li>
-					<li><a class="nav_link" href="../dict"><?php echo $_local->gui->dictionary; ?></a></li>
-					<li><a class="nav_link" href="../collect"><?php echo $_local->gui->composition; ?></a></li>
-					<li class="nav_link head_nav_dropdown" >
-						<div><?php echo $_local->gui->more; ?></div>
-						<ul class="head_nav_dropdown_content" style="margin-top: 0em;top: 2em;margin-left:-0.5em;padding-bottom: 0.5em;z-index: 1;">
-							<li><a class="nav_link" href="../calendar"><?php echo $_local->gui->buddhist_calendar;?></a></li>
-							<li><a class="nav_link" href="../tools/unicode.html"><?php echo $_local->gui->code_convert;//巴利编码转换?></a></li>
-							<li><a class="nav_link" href="../statistics"><?php echo $_local->gui->corpus_statistics;?></a></li>
-						</ul>
-					</li>
-				</ul>			
-			</div>
+	@media screen and (min-width: 840px) {
+		.nav-toggle-label {
+			display: none;
+		}
+
+		header {
+			display: grid;
+			grid-template-columns: 1fr auto 1fr auto 1fr;
+			padding: 0 1rem;
+		}
+
+		.head-logo {
+			grid-column: 1;
+			justify-content: left;
+		}
+
+		nav {
+			all: unset;
+			grid-column: 3;
+			display: flex;
+			align-items: center;
+			height: 50px;
+			text-align: left;
+		}
+
+		nav ul {
+			display: flex;
+		}
+
+		nav li {
+			margin: 0 0.7rem;
+		}
+
+		nav .nav_link {
+			opacity: 1;
+			color: var(--new-tool-btn);
+		}
+
+		.header-dropdown-content li {
+			margin: 0;
+		}
+
+		.nav-mobile {
+			display: none;
+		}
+
+		.more_btn {
+			display: block;
+		}
+
+		.platform-content {
+			top: unset;
+			position: relative;
+			padding: 0 5px;
+		}
+
+		.platform-content::after {
+			bottom: 0.5em;
+			border-bottom-color: transparent;
+			right: 100%;
+			border-right-color: var(--new-tool-content-bg);
+			all: unset;
+		}
+
+		.left-content {
+			left: -20px;
+			box-shadow: 0px 3px 10px 0px var(--shadow-color);
+			padding: 0;
+		}
+
+		.left-content::after {
+			left: 30px;
+		}
+
+		.header-dropdown-content li div {
+			padding: 0.7rem;
+		}
+	}
+</style>
 
+<!-- new tool bar begin-->
+<header>
+	<div class="head-logo">
+		<svg>
+			<a href="../pcdl">
+				<use xlink:href="../public/images/svg/wikipali_logo.svg#wikipali_logo"></use>
+				<rect width="104" height="50" y="0" x="0" fill="rgba(0,0,0,0)" />
+			</a>
+		</svg>
+		<div class="platform-toggle">
+			<a href="../studio" target="_blank"><?php echo $_local->gui->library; ?>
+				<span class="goto-platform"> ▸ <?php echo $_local->gui->studio; ?></span></a>
+		</div>
+	</div>
+	<input type="checkbox" id="nav-toggle" class="nav-toggle">
+	<nav>
+		<ul>
+			<li class="nav_link"><a href="../palicanon"><?php echo $_local->gui->pali_canon; ?></a></li>
+			<li class="nav_link"><a href="../course"><?php echo $_local->gui->lesson; ?></a></li>
+			<li class="nav_link"><a href="../wiki"><?php echo $_local->gui->encyclopedia; ?></a></li>
+			<li class="nav_link"><a href="../dict"><?php echo $_local->gui->dictionary; ?></a></li>
+			<li class="nav_link"><a href="../collect"><?php echo $_local->gui->composition; ?></a></li>
+			<li class="nav_link more_btn">
+				<div id="more" class="dropdown" onmouseover="switchMenu(this,'nav-more')" onmouseout="hideMenu()">
+					<button class="dropbtn icon_btn" style="all:unset;" onClick="switchMenu(this,'nav-more')" id="more_button">
+						<?php echo $_local->gui->more; ?>
+					</button>
+					<ul class="header-dropdown-content left-content" style="display: none;" id="nav-more">
+						<li><a href="../calendar">
+								<div class="nav_link"><?php echo $_local->gui->buddhist_calendar; ?></div>
+							</a></li>
+						<li><a href="../tools/unicode.html">
+								<div class="nav_link"><?php echo $_local->gui->code_convert; ?></div>
+							</a></li>
+						<li><a href="../statistics">
+								<div class="nav_link"><?php echo $_local->gui->corpus_statistics; ?></div>
+							</a></li>
+					</ul>
+			</li>
+			<li class="nav_link nav-mobile"><a href="../calendar">
+					<?php echo $_local->gui->buddhist_calendar; ?>
+				</a></li>
+			<li class="nav_link nav-mobile"><a href="../tools/unicode.html">
+					<?php echo $_local->gui->code_convert; ?>
+				</a></li>
+			<li class="nav_link nav-mobile"><a href="../statistics">
+					<?php echo $_local->gui->corpus_statistics; ?>
+				</a></li>
 			<div>
-			</div>
-			<div class="toolgroup1">
-			<!--<input id="search_input" type="input" placeholder="搜索"  style="margin-left: 0.5em;padding:4px;width: 40em;max-width: 80%" >-->
-			<span style="display: inline-flex; padding-right: 10px;" title=<?php echo "wikipāli&nbsp;{$_local->gui->search_tools}";?>> 
-			<a href="../search" style="display: inline-flex;">
-					<svg t="1598273659942" class="icon" viewBox="0 0 5836 1024" style="fill: var(--btn-color); width: 150px; height: 25px;" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="18667" >
-						<path d="M5243.733333666665 1024H619.2172046666668C338.4430106666666 1024 107.21720466666665 792.774194 107.21720466666665 512S338.4430106666666 0 619.2172046666668 0h4624.516129c280.774194 0 512 231.225806 512 512s-231.225806 512-512 512zM140.24946266666666 512C140.24946266666666 776.258065 354.9591396666666 990.967742 619.2172046666668 990.967742h4624.516129c264.258065 0 478.967742-214.709677 478.967742-478.967742 0 264.258065-214.709677 478.967742-478.967742 478.967742H619.2172046666668C354.9591396666666 990.967742 140.24946266666666 776.258065 140.24946266666666 512zM619.2172046666668 66.064516C374.7784946666666 66.064516 173.28172066666667 267.56129 173.28172066666667 512S374.7784946666666 957.935484 619.2172046666668 957.935484h4624.516129c244.43871 0 445.935484-201.496774 445.935484-445.935484S5488.172042666665 66.064516 5243.733333666665 66.064516H619.2172046666668z m4624.516129-33.032258c264.258065 0 478.967742 214.709677 478.967742 475.664516C5722.701075666665 247.741935 5507.991397666665 33.032258 5243.733333666665 33.032258zM619.2172046666668 33.032258C354.9591396666666 33.032258 140.24946266666666 247.741935 140.24946266666666 508.696774 140.24946266666666 247.741935 354.9591396666666 33.032258 619.2172046666668 33.032258z" p-id="18668">
-						</path>
-					</svg>
-					<svg t="1598275338832" class="icon" viewBox="0 0 1024 1024" style="fill: var(--btn-color); width: 16px; height: 20px; margin-left: -26px; margin-top: 4px;" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="19379"><path d="M441.936842 824.751158c-229.052632 0-414.989474-182.810947-414.989474-408.629895C26.947368 190.356211 212.884211 7.545263 441.936842 7.545263s414.989474 182.864842 414.989474 408.629895c0 225.818947-185.936842 408.629895-414.989474 408.629895z m0-53.894737c199.518316 0 361.094737-158.881684 361.094737-354.735158 0-195.799579-161.576421-354.735158-361.094737-354.735158S80.842105 220.429474 80.842105 416.121263c0 195.853474 161.576421 354.735158 361.094737 354.735158z" p-id="19380"></path><path d="M713.889684 740.513684a26.947368 26.947368 0 1 1 38.157474-38.103579l264.569263 264.784842a26.947368 26.947368 0 0 1-38.157474 38.103579l-264.569263-264.784842z" p-id="19381">
-					</path></svg>
-					<!--<svg  style="height: 4em; fill: var(--btn-color);">
-						<use xlink:href="../pcdl/img/search_bar.svg#search_bar"></use>
-					</svg>-->
-				</a>
-			</span>
-
-			<?php 
-
-			include "../ucenter/user.php";
-			include "../lang/lang.php";			
-			?>			
-			</div>
-		</div>	
-		<!--tool bar end -->
-		
+		</ul>
+	</nav>
+	<div class="nav-right">
+		<button class="dropbtn icon_btn">
+			<a href="../search" style="height:20px;">
+				<svg t="1598275338832" class="icon" viewBox="0 0 1024 1024" style="width: 16px; height: 20px; margin:0 2px;" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="19379">
+					<path d="M441.936842 824.751158c-229.052632 0-414.989474-182.810947-414.989474-408.629895C26.947368 190.356211 212.884211 7.545263 441.936842 7.545263s414.989474 182.864842 414.989474 408.629895c0 225.818947-185.936842 408.629895-414.989474 408.629895z m0-53.894737c199.518316 0 361.094737-158.881684 361.094737-354.735158 0-195.799579-161.576421-354.735158-361.094737-354.735158S80.842105 220.429474 80.842105 416.121263c0 195.853474 161.576421 354.735158 361.094737 354.735158z" p-id="19380"></path>
+					<path d="M713.889684 740.513684a26.947368 26.947368 0 1 1 38.157474-38.103579l264.569263 264.784842a26.947368 26.947368 0 0 1-38.157474 38.103579l-264.569263-264.784842z" p-id="19381">
+					</path>
+				</svg>
+			</a>
+		</button>
+		<?php include "../ucenter/user.php"; ?>
+		<?php include "../lang/lang.php"; ?>
+	</div>
+
+	<label for="nav-toggle" class="nav-toggle-label">
+		<span></span>
+	</label>
+
+</header>
+<!--new tool bar end -->

+ 134 - 124
app/pcdl/index.php

@@ -1,150 +1,160 @@
 <?php
 require_once '../pcdl/html_head.php';
 ?>
-<body >	
-<script language="javascript" src="../pcdl/index.js"></script>
-
-<style>
-	.content_block{
-		flex: 0 0 auto;
-		width: 25%;
-		padding: 10px;
-	}
-
-	.index_inner{
-		width: 960px;
-		margin-left: auto;
-		margin-right: auto;
-	}
-	.content_inner{
-		display:flex;
-	}
-	.title_bar{
-		border-bottom: solid 1px var(--tool-bt-border-line-color);
-	    justify-content: space-between;
-	    display: flex;
-	}
-	.h3{
-		font-size: 16px;
-		font-weight: 700;
-	}
-	.index_list_categories{
-		margin-bottom: 2em;
-	}
-	
-	.index_list_categories a:hover{
-		color: var(--tool-link-hover-color);
-	}
-	.index_list_categories a,a:link{
-		color: var(--main-color);
-	}
-	.index_list_categories button{
-		border: none;
-	}
-	
-	.pd-10{
-		padding:10px;
-	}
-	#footer_nav{
-		display:none;
-	}
-	#article_new .card {
-    height: 20vh;
-    overflow-y: scroll;
-}
-#course_list_new .card {
-    height: 15em;
-    overflow-y: scroll;
-}
-#course_list_new .card .pd-10:first-child {
-    height: 12em;
-    overflow-y: scroll;
-	padding-bottom:2px;
-}
-#course_list_new .card .pd-10:last-child {
-padding-top:2px;
-}
 
+<body>
+	<script language="javascript" src="../pcdl/index.js"></script>
+
+	<style>
+		.content_block {
+			flex: 0 0 auto;
+			width: 25%;
+			padding: 10px;
+		}
+
+		.index_inner {
+			width: 960px;
+			margin-left: auto;
+			margin-right: auto;
+		}
+
+		.content_inner {
+			display: flex;
+		}
+
+		.title_bar {
+			border-bottom: solid 1px var(--tool-bt-border-line-color);
+			justify-content: space-between;
+			display: flex;
+		}
+
+		.h3 {
+			font-size: 16px;
+			font-weight: 700;
+		}
+
+		.index_list_categories {
+			margin: 2em 0;
+		}
+
+		.index_list_categories a:hover {
+			color: var(--tool-link-hover-color);
+		}
+
+		/*.index_list_categories a,a:link{
+		color: var(--main-color);
+	}*/
+		.index_list_categories button {
+			border: none;
+		}
+
+		.pd-10 {
+			padding: 10px;
+		}
+
+		#footer_nav {
+			display: none;
+		}
+
+		#article_new .card {
+			height: 20vh;
+			overflow-y: scroll;
+		}
+
+		#course_list_new .card {
+			height: 15em;
+			overflow-y: scroll;
+		}
+
+		#course_list_new .card .pd-10:first-child {
+			height: 12em;
+			overflow-y: scroll;
+			padding-bottom: 2px;
+		}
+
+		#course_list_new .card .pd-10:last-child {
+			padding-top: 2px;
+		}
 	</style>
 	<style media="screen and (max-width:800px)">
-#right_pannal{
-	display:none;
-}
-.when_right_fixed{
-	padding-right:0;
-}
-.index_toolbar{
-	position:unset;
-}
-#pali_pedia{
-	font-size: 200%;
-	margin-top: auto;
-	margin-bottom: auto;
-	padding-left: 0.5em;
-}
-.content_inner{
-	display: block;
-}
-
-</style>
-	<a name="pagetop"></a>	
+		#right_pannal {
+			display: none;
+		}
+
+		.when_right_fixed {
+			padding-right: 0;
+		}
+
+		.index_toolbar {
+			position: unset;
+		}
+
+		#pali_pedia {
+			font-size: 200%;
+			margin-top: auto;
+			margin-bottom: auto;
+			padding-left: 0.5em;
+		}
+
+		.content_inner {
+			display: block;
+		}
+	</style>
+	<a name="pagetop"></a>
 	<!-- tool bar begin-->
-<?php
-    require_once("head_bar.php");
-?>
+	<?php
+	require_once("head_bar.php");
+	?>
 	<!--tool bar end -->
 
 
-<div class="index_inner" >
+	<div class="index_inner">
 
-<div class="index_list_categories">
-		<div class="title_bar">
-			<span class="title h3"><?php echo $_local->gui->composition; ?></span>	
-			<span class="title_more"><a href="../collect"><?php echo $_local->gui->more;?></a></span>
-		</div>
-		<div class="content">
-			<div id="article_new" class="content_inner">
+		<div class="index_list_categories">
+			<div class="title_bar">
+				<span class="title h3"><?php echo $_local->gui->composition; ?></span>
+				<span class="title_more"><a href="../collect"><?php echo $_local->gui->more; ?></a></span>
+			</div>
+			<div class="content">
+				<div id="article_new" class="content_inner">
+				</div>
 			</div>
 		</div>
-	</div>
-	
-	<div class="index_list_categories">
-		<div class="title_bar">
-			<span class="title h3"><?php echo $_local->gui->lesson; ?></span>	
-			<span class="title_more"><a href="../course"><?php echo $_local->gui->more;?></a></span>
-		</div>
-		<div class="content">
-			<div id="course_list_new" class="content_inner">
+
+		<div class="index_list_categories">
+			<div class="title_bar">
+				<span class="title h3"><?php echo $_local->gui->lesson; ?></span>
+				<span class="title_more"><a href="../course"><?php echo $_local->gui->more; ?></a></span>
+			</div>
+			<div class="content">
+				<div id="course_list_new" class="content_inner">
+				</div>
 			</div>
 		</div>
-	</div>
 
 
-    
-	<div class="index_list_categories">
-		<div class="title_bar">
-			<span class="title h3"><?php echo $_local->gui->encyclopedia; ?></span>	
-			<span class="title_more"><a href="../wiki"><?php echo $_local->gui->more;?></a></span>
-		</div>
-		<div class="content">
-			<div id="pali_pedia" class="content_inner">
+
+		<div class="index_list_categories">
+			<div class="title_bar">
+				<span class="title h3"><?php echo $_local->gui->encyclopedia; ?></span>
+				<span class="title_more"><a href="../wiki"><?php echo $_local->gui->more; ?></a></span>
+			</div>
+			<div class="content">
+				<div id="pali_pedia" class="content_inner">
+				</div>
 			</div>
 		</div>
-	</div>
 
 
-    </div>
+	</div>
 
 	<script>
-	$(document).ready(function(){
-		index_onload();
-});
-
+		$(document).ready(function() {
+			index_onload();
+		});
+	</script>
 
-	</script>	
-	
 
-<?php
+	<?php
 	include "../pcdl/html_foot.php";
-?>
-
+	?>

+ 89 - 0
app/public/images/svg/wikipali_logo.svg

@@ -0,0 +1,89 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.0" id="wikipali_logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
+	 y="0px" viewBox="0 0 100 50" style="enable-background:new 0 0 100 50;" xml:space="preserve">
+<g id="圖層_1">
+	<g id="Group_12" transform="translate(-396 -320)">
+		<g id="Group_2" transform="translate(396 320)">
+			<g id="Group_1" transform="translate(39.472 12.369)">
+				<g id="Path_1">
+					<path style="fill:#FFFFFF;" d="M-5.9,19.5c-0.2,0-0.3-0.1-0.5-0.2c-0.1-0.1-0.2-0.2-0.3-0.4l-2.2-8.2v-0.1c0-0.1,0-0.2,0.1-0.3
+						c0.1-0.1,0.2-0.2,0.3-0.2h0.8c0.2,0,0.3,0.1,0.5,0.2c0.1,0.1,0.2,0.2,0.3,0.4l1.1,4.5c0,0,0.2,0.9,0.5,2.6l0,0l0,0l0,0l0,0
+						c0.4-1.7,0.6-2.6,0.6-2.6l1.2-4.5c0.1-0.3,0.4-0.6,0.7-0.6h0.6c0.3,0,0.6,0.2,0.7,0.6l1.2,4.5c0.1,0.3,0.2,0.7,0.3,1.3
+						c0.1,0.6,0.2,1,0.3,1.3l0,0l0,0c0,0,0,0,0.1,0c0-0.2,0.1-0.6,0.2-1.2c0.3-0.6,0.4-1,0.5-1.4l1.1-4.5c0.1-0.3,0.4-0.6,0.7-0.6
+						h0.7c0.1,0,0.3,0.1,0.3,0.2c0,0.1,0.1,0.2,0.1,0.3v0.1l-2.1,8.2c0,0.2-0.1,0.3-0.3,0.4c-0.1,0.1-0.3,0.2-0.5,0.2H0
+						c-0.2,0-0.3-0.1-0.5-0.2c-0.1-0.1-0.2-0.2-0.3-0.4l-1-4.1c-0.1-0.4-0.3-1.3-0.6-2.7c0,0,0,0-0.1,0c0,0,0,0-0.1,0
+						c-0.2,1.2-0.4,2.1-0.6,2.7l-1,4.1c0,0.2-0.1,0.3-0.3,0.4c-0.1,0.1-0.3,0.2-0.5,0.2H-5.9L-5.9,19.5z"/>
+				</g>
+				<g id="Path_2">
+					<path style="fill:#FFFFFF;" d="M8.1,8.1C7.8,8.3,7.5,8.4,7.2,8.4S6.6,8.3,6.3,8.1C6.1,7.9,5.9,7.6,5.9,7.3S6,6.7,6.2,6.5
+						c0.2-0.2,0.6-0.3,0.9-0.3c0.3,0,0.7,0.1,0.9,0.3C8.2,6.7,8.4,7,8.4,7.3C8.4,7.6,8.3,7.9,8.1,8.1z M6.8,19.5
+						c-0.3,0-0.6-0.3-0.6-0.6l0,0v-8.2c0-0.2,0.1-0.3,0.2-0.4c0.1-0.1,0.3-0.2,0.4-0.2h0.7c0.2,0,0.3,0.1,0.4,0.2
+						c0.1,0.1,0.2,0.3,0.2,0.4v8.2c0,0.3-0.3,0.6-0.6,0.6l0,0H6.8z"/>
+				</g>
+				<g id="Path_3">
+					<path style="fill:#FFFFFF;" d="M11.8,19.5c-0.3,0-0.6-0.3-0.6-0.6l0,0V6.5c0-0.2,0.1-0.3,0.2-0.4c0.1-0.1,0.3-0.2,0.4-0.2h0.7
+						c0.2,0,0.3,0.1,0.4,0.2c0.1,0.1,0.2,0.3,0.2,0.4v8.1l0,0l0,0l3.3-4.1c0.2-0.3,0.6-0.5,1-0.4h1c0.1,0,0.2,0.1,0.2,0.2
+						c0.1,0.1,0,0.2,0,0.3l-2.8,3.3V14l3.2,5c0,0,0,0.1,0.1,0.2c0,0.1,0,0.1-0.1,0.2s-0.2,0.2-0.3,0.2h-0.9c-0.4,0-0.7-0.2-0.9-0.5
+						l-2.2-3.7c0,0,0,0-0.1,0l-1.5,1.7c0,0,0,0.1-0.1,0.1v1.7c0,0.3-0.3,0.6-0.6,0.6l0,0L11.8,19.5z"/>
+				</g>
+				<g id="Path_4">
+					<path style="fill:#FFFFFF;" d="M23,8.1c-0.2,0.2-0.6,0.3-0.9,0.3s-0.6-0.1-0.9-0.3c-0.2-0.2-0.3-0.5-0.3-0.8s0.1-0.6,0.3-0.8
+						c0.2-0.2,0.6-0.3,0.9-0.3s0.7,0.1,0.9,0.3c0.2,0.2,0.4,0.5,0.4,0.8C23.4,7.6,23.3,7.9,23,8.1z M21.8,19.5
+						c-0.3,0-0.6-0.3-0.6-0.6l0,0v-8.2c0-0.2,0.1-0.3,0.2-0.4c0.1-0.1,0.3-0.2,0.4-0.2h0.7c0.2,0,0.3,0.1,0.4,0.2
+						c0.1,0.1,0.2,0.3,0.2,0.4v8.2c0,0.3-0.3,0.6-0.6,0.6l0,0H21.8z"/>
+				</g>
+				<g id="Path_5">
+					<path style="fill:#FFFFFF;" d="M26.8,23.3c-0.3,0-0.6-0.3-0.6-0.6l0,0v-12c0-0.3,0.3-0.6,0.6-0.6l0,0h0.4
+						c0.2,0,0.3,0.1,0.4,0.2c0.1,0.1,0.2,0.3,0.2,0.4v0.4l0,0l0,0c0.8-0.7,1.8-1.2,2.9-1.2c1.1,0,2.1,0.4,2.7,1.3c0.7,1,1,2.2,1,3.5
+						c0,0.7-0.1,1.4-0.3,2.1c-0.2,0.6-0.5,1.1-0.9,1.6c-0.4,0.4-0.8,0.7-1.3,1c-0.5,0.2-1,0.3-1.5,0.3c-0.9,0-1.8-0.4-2.4-1l0,0l0,0
+						l0,0v1.5v2.4c0,0.3-0.3,0.6-0.6,0.6l0,0L26.8,23.3L26.8,23.3z M30.2,18.2c0.7,0,1.3-0.3,1.7-0.9c0.5-0.7,0.7-1.6,0.7-2.5
+						c0-2.1-0.7-3.2-2.2-3.2c-0.8,0.1-1.6,0.5-2.2,1.1l-0.1,0.1v4.4c0,0,0,0.1,0.1,0.1C28.8,17.8,29.5,18.1,30.2,18.2L30.2,18.2z"/>
+				</g>
+				<g id="Path_6">
+					<path style="fill:#FFFFFF;" d="M39.1,19.7c-0.7,0-1.4-0.2-2-0.7c-1.1-1.1-1-2.8,0.1-3.9c0.1-0.1,0.3-0.3,0.5-0.4
+						c1.3-0.7,2.7-1.1,4.2-1.2c0,0,0.1,0,0.1-0.1c0-1.3-0.6-2-1.8-2c-0.8,0-1.5,0.2-2.2,0.6c-0.1,0.1-0.3,0.1-0.4,0.1
+						c-0.2,0-0.3-0.1-0.3-0.3L37,11.6c-0.1-0.1-0.1-0.3-0.1-0.5s0.1-0.3,0.3-0.4c1-0.6,2.1-0.9,3.3-0.9c1-0.1,1.9,0.3,2.6,1
+						c0.6,0.9,0.9,1.9,0.8,2.9v5c0,0.3-0.3,0.6-0.6,0.6l0,0h-0.4c-0.2,0-0.3-0.1-0.4-0.2c-0.1-0.1-0.2-0.3-0.2-0.4l-0.1-0.5l0,0l0,0
+						C41.3,19.2,40.2,19.7,39.1,19.7z M38.5,8.1c-0.3,0-0.6-0.3-0.6-0.6l0,0V7.3c0-0.3,0.3-0.6,0.6-0.6l0,0h4.1
+						c0.3,0,0.6,0.3,0.6,0.6l0,0v0.1c0,0.3-0.3,0.6-0.6,0.6l0,0h-4.1V8.1z M39.7,18.2c0.8-0.1,1.6-0.4,2.2-1c0,0,0.1-0.1,0-0.1V15
+						c0-0.1,0-0.1-0.1-0.1c-1,0.1-1.9,0.3-2.8,0.8c-0.5,0.3-0.8,0.8-0.8,1.3c0,0.4,0.1,0.7,0.4,1C38.9,18.1,39.3,18.2,39.7,18.2
+						L39.7,18.2z"/>
+				</g>
+				<g id="Path_7">
+					<path style="fill:#FFFFFF;" d="M48.8,19.7c-0.6,0.1-1.1-0.2-1.5-0.6c-0.3-0.5-0.5-1.2-0.5-1.8V6.5c0-0.2,0.1-0.3,0.2-0.4
+						c0.1-0.1,0.3-0.2,0.4-0.2h0.7c0.2,0,0.3,0.1,0.4,0.2c0.1,0.1,0.2,0.3,0.2,0.4v10.9c0,0.3,0.1,0.5,0.3,0.7c0,0,0.1,0,0.1,0.1
+						c0.1,0,0.1,0.1,0.2,0.1l0.1,0.1l0.1,0.1v0.1l0.1,0.4v0.1c0,0.1,0,0.2-0.1,0.3c-0.1,0.1-0.2,0.2-0.4,0.2
+						C49.1,19.7,48.9,19.7,48.8,19.7z"/>
+				</g>
+				<g id="Path_8">
+					<path style="fill:#FFFFFF;" d="M53.9,8.1c-0.2,0.2-0.6,0.3-0.9,0.3c-0.3,0-0.6-0.1-0.9-0.3c-0.2-0.2-0.4-0.5-0.3-0.8
+						c0-0.3,0.1-0.6,0.3-0.8c0.2-0.2,0.6-0.3,0.9-0.3c0.3,0,0.7,0.1,0.9,0.3c0.2,0.2,0.4,0.5,0.4,0.8C54.3,7.6,54.2,7.9,53.9,8.1z
+						 M52.7,19.5c-0.3,0-0.6-0.3-0.6-0.6l0,0v-8.2c0-0.2,0.1-0.3,0.2-0.4c0.1-0.1,0.3-0.2,0.4-0.2h0.7c0.2,0,0.3,0.1,0.4,0.2
+						c0.1,0.1,0.2,0.3,0.2,0.4v8.2c0,0.3-0.3,0.6-0.6,0.6l0,0H52.7z"/>
+				</g>
+			</g>
+			<g id="Path_9">
+				<path style="fill:#F1CA23;" d="M18.9,34.4c-0.5,0-1-0.4-1-1l0,0v-3.6c0-5.6,2.7-8.8,7.3-8.8c0.5,0,1,0.4,1,1c0,0.5-0.4,1-1,1
+					l0,0c-3.5,0-5.3,2.3-5.3,6.8v3.6C19.8,34,19.4,34.4,18.9,34.4L18.9,34.4z"/>
+			</g>
+			<g id="Path_10">
+				<path style="fill:#F1CA23;" d="M20.8,45.5c-0.5,0-1-0.4-1-1c0-0.5,0.4-1,1-1l0,0c1.9,0,3.3-2.6,3.3-6.3V26.6c0-0.5,0.4-1,1-1
+					c0.5,0,1,0.4,1,1v10.6C26.1,42.9,23.4,45.5,20.8,45.5z"/>
+			</g>
+			<g id="Path_11">
+				<path style="fill:#F1CA23;" d="M14.6,34.4c-0.5,0-1-0.4-1-1l0,0V11.3c0-0.5,0.4-1,1-1c0.5,0,1,0.4,1,1v22.1
+					C15.6,34,15.1,34.4,14.6,34.4L14.6,34.4z"/>
+			</g>
+			<g id="Path_12">
+				<path style="fill:#F1CA23;" d="M10.3,34.4c-0.5,0-1-0.4-1-1l0,0V11.3c0-0.5,0.4-1,1-1c0.5,0,1,0.4,1,1v22.1
+					C11.3,34,10.9,34.4,10.3,34.4L10.3,34.4z"/>
+			</g>
+			<g id="Path_13">
+				<path style="fill:#F1CA23;" d="M6.1,34.4c-0.5,0-1-0.4-1-1l0,0V11.3c0-0.5,0.4-1,1-1s1,0.4,1,1v22.1C7.1,34,6.6,34.4,6.1,34.4z"
+					/>
+			</g>
+		</g>
+	</g>
+</g>
+</svg>

+ 146 - 135
app/search/toobar.php

@@ -1,149 +1,160 @@
 <style>
-		body{
-			margin: unset;
-		}
-		.index_toolbar{
-			position:unset;
-		}
+	body {
+		margin: unset;
+	}
 
-		.search_toolbar{
-			
-			height: initial;
-			padding: 0.7em 1em 0 1em;;
-			background-color: var(--tool-bg-color1);
-			border-bottom: none;
-			color: var(--tool-color1);
-		}
-		.search_fixed{
-			position: fixed;
-			top:-500px;
-			width:100%;
-			display:flex;
-			padding: 0.5em 1em;
-		}
-		ul#dict_type li {
-			margin-right: 1em;
-		}
-		ul#dict_type a {
-			color: var(--main-color);
-		}
+	.index_toolbar {
+		position: unset;
+	}
 
-		ul#dict_type li:hover {
-			background-color: var(--link-color);
-			color: var(--btn-hover-color);
-		}
-		ul#dict_type li:hover a {
-			color: var(--btn-hover-color);
-		}
+	.lab_tab {
+		display: flex;
+	}
 
-		.dict_word {
-			display: block;
-			border:none;
-			border-bottom: 1px solid var(--tool-line-color);
-			border-radius: 0;
-			margin: 6px 0;
-			padding: 5px;
-		}
-		
-	</style>
-	<!-- tool bar begin-->
-	<div id='search_toolbar' class="search_toolbar">
-			<div style="display:flex;">
-				<span >
-				<svg class="small_icon" style=" width: 3em;height: 3em;">
+	.lab_tab>li {
+		padding: 5px;
+	}
+
+	.search_toolbar {
+
+		height: initial;
+		padding: 0.7em 1em 0 1em;
+		;
+		background-color: var(--tool-bg-color1);
+		border-bottom: none;
+		color: var(--tool-color1);
+	}
+
+	.search_fixed {
+		position: fixed;
+		top: -500px;
+		width: 100%;
+		display: flex;
+		padding: 0.5em 1em;
+	}
+
+	ul#dict_type li {
+		margin-right: 1em;
+	}
+
+	ul#dict_type a {
+		color: var(--main-color);
+	}
+
+	ul#dict_type li:hover {
+		background-color: var(--link-color);
+		color: var(--btn-hover-color);
+	}
+
+	ul#dict_type li:hover a {
+		color: var(--btn-hover-color);
+	}
+
+	.dict_word {
+		display: block;
+		border: none;
+		border-bottom: 1px solid var(--tool-line-color);
+		border-radius: 0;
+		margin: 6px 0;
+		padding: 5px;
+	}
+</style>
+<!-- tool bar begin-->
+<div id='search_toolbar' class="search_toolbar">
+	<div style="display:flex;">
+		<span>
+			<svg class="small_icon" style=" width: 3em;height: 3em;">
 				<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../studio/svg/icon.svg#ic_search"></use>
 			</svg>
 
-				</span>
-				<div class="case_dropdown">
-					<div>
-						<input id="dict_ref_search_input" type="input" placeholder="<?php echo $_local->gui->search;?>" onkeyup="search_input_keyup(event,this)" style="width: 40em;max-width: 80%;font-size:140%;padding: 0.6em;color: var(--btn-hover-bg-color);background-color: var(--btn-color);" onfocus="search_input_onfocus()">
-					</div>
-					<div id="pre_search_word_content" class="case_dropdown-content"></div>
-				</div>
+		</span>
+		<div class="case_dropdown">
+			<div>
+				<input id="dict_ref_search_input" type="input" placeholder="<?php echo $_local->gui->search; ?>" onkeyup="search_input_keyup(event,this)" style="width: 40em;max-width: 80%;font-size:140%;padding: 0.6em;color: var(--btn-hover-bg-color);background-color: var(--btn-color);" onfocus="search_input_onfocus()">
 			</div>
-			<div style="display:block;z-index: 5;">
-				<ul id="dict_type" class="lab_tab" style="color:black;">
-				<?php
-				if(isset($_GET["key"])){
-					$key = "?key=".$_GET["key"];
-				}
-				else{
-					$key = "";
-				}
-				?>
-					<li id="dt_all"  style="display:none;"><a href="../search/index.php<?php echo $key;?>"><span ><?php echo $_local->gui->all;//全部?></span><span id="search_all_num"></span></a></li>
-					<li id="dt_title" ><a href="../search/title.php<?php echo $key;?>"><span ><?php echo $_local->gui->title;//标题?></span><span id="search_title_num"></span></a></li>
-					<li id="dt_pali" ><a href="../search/paliword.php<?php echo $key;?>"><span ><?php echo $_local->gui->full_text;//巴利原文?></span><span id="search_palitext_num"></span></a></li>
-					<li id="dt_bold" ><a href="../search/bold.php<?php echo $key;?>"><span ><?php echo $_local->gui->vannana;?></span><span id="search_bold_num"></span></a></li>
-					<li id="dt_trans" style="display:none;"><a href="../search/trans.php<?php echo $key;?>"><span ><?php echo $_local->gui->translate;?></span><span id="search_trans_num"></span></a></li>
-				</ul>
-			</div>
-	</div>	
-	<!--tool bar end -->
+			<div id="pre_search_word_content" class="case_dropdown-content"></div>
+		</div>
+	</div>
+	<div style="display:block;z-index: 5;">
+		<ul id="dict_type" class="lab_tab" style="color:black;">
+			<?php
+			if (isset($_GET["key"])) {
+				$key = "?key=" . $_GET["key"];
+			} else {
+				$key = "";
+			}
+			?>
+			<li id="dt_all" style="display:none;"><a href="../search/index.php<?php echo $key; ?>"><span><?php echo $_local->gui->all; //全部
+																										?></span><span id="search_all_num"></span></a></li>
+			<li id="dt_title"><a href="../search/title.php<?php echo $key; ?>"><span><?php echo $_local->gui->title; //标题
+																					?></span><span id="search_title_num"></span></a></li>
+			<li id="dt_pali"><a href="../search/paliword.php<?php echo $key; ?>"><span><?php echo $_local->gui->full_text; //巴利原文
+																						?></span><span id="search_palitext_num"></span></a></li>
+			<li id="dt_bold"><a href="../search/bold.php<?php echo $key; ?>"><span><?php echo $_local->gui->vannana; ?></span><span id="search_bold_num"></span></a></li>
+			<li id="dt_trans" style="display:none;"><a href="../search/trans.php<?php echo $key; ?>"><span><?php echo $_local->gui->translate; ?></span><span id="search_trans_num"></span></a></li>
+		</ul>
+	</div>
+</div>
+<!--tool bar end -->
 
-	<!-- tool bar fixed begin-->
-	<div id='search_toolbar_1' class="search_toolbar search_fixed">
-			<div style="display:flex;">
-				<span >
-					<?php echo $_local->gui->search;?>
-				</span>
-				<div class="case_dropdown">
-					<div>
-						<input id="dict_ref_search_input_1" type="input" placeholder="<?php echo $_local->gui->search;?>" onkeyup="search_input_keyup(event,this)" style="margin-left: 0.5em;min-width: 40vw;max-width: 80%;font-size:120%;padding: 0.2em;color: var(--btn-hover-bg-color);background-color: var(--btn-color);" onfocus="search_input_onfocus()">
-					</div>
-					<div id="pre_search_word_content_1" class="case_dropdown-content"></div>
-				</div>
-			</div>
-			<div style="display:block;z-index: 5;">
-				<ul id="dict_type" class="lab_tab" style="color:black;">
-				<?php
-				if(isset($_GET["key"])){
-					$key = "?key=".$_GET["key"];
-				}
-				else{
-					$key = "";
-				}
-				?>
-					<li id="dt_all_1"   style="display:none;"><a href="../search/index.php<?php echo $key;?>"><span >全部</span><span id="search_all_num_1"></span></a></li>
-					<li id="dt_title_1" ><a href="../search/title.php<?php echo $key;?>"><span >标题</span><span id="search_title_num_1"></span></a></li>
-					<li id="dt_pali_1" ><a href="../search/paliword.php<?php echo $key;?>"><span >巴利原文</span><span id="search_palitext_num_1"></span></a></li>
-					<li id="dt_bold_1" ><a href="../search/bold.php<?php echo $key;?>"><span ><?php echo $_local->gui->vannana;?></span><span id="search_bold_num_1"></span></a></li>
-					<li id="dt_trans_1"   style="display:none;"><a href="../search/trans.php<?php echo $key;?>"><span ><?php echo $_local->gui->translate;?></span><span id="search_trans_num_1"></span></a></li>
-				</ul>
+<!-- tool bar fixed begin-->
+<div id='search_toolbar_1' class="search_toolbar search_fixed">
+	<div style="display:flex;">
+		<span>
+			<?php echo $_local->gui->search; ?>
+		</span>
+		<div class="case_dropdown">
+			<div>
+				<input id="dict_ref_search_input_1" type="input" placeholder="<?php echo $_local->gui->search; ?>" onkeyup="search_input_keyup(event,this)" style="margin-left: 0.5em;min-width: 40vw;max-width: 80%;font-size:120%;padding: 0.2em;color: var(--btn-hover-bg-color);background-color: var(--btn-color);" onfocus="search_input_onfocus()">
 			</div>
-	</div>	
-	<!--tool bar fixed end -->
+			<div id="pre_search_word_content_1" class="case_dropdown-content"></div>
+		</div>
+	</div>
+	<div style="display:block;z-index: 5;">
+		<ul id="dict_type" class="lab_tab" style="color:black;">
+			<?php
+			if (isset($_GET["key"])) {
+				$key = "?key=" . $_GET["key"];
+			} else {
+				$key = "";
+			}
+			?>
+			<li id="dt_all_1" style="display:none;"><a href="../search/index.php<?php echo $key; ?>"><span>全部</span><span id="search_all_num_1"></span></a></li>
+			<li id="dt_title_1"><a href="../search/title.php<?php echo $key; ?>"><span>标题</span><span id="search_title_num_1"></span></a></li>
+			<li id="dt_pali_1"><a href="../search/paliword.php<?php echo $key; ?>"><span>巴利原文</span><span id="search_palitext_num_1"></span></a></li>
+			<li id="dt_bold_1"><a href="../search/bold.php<?php echo $key; ?>"><span><?php echo $_local->gui->vannana; ?></span><span id="search_bold_num_1"></span></a></li>
+			<li id="dt_trans_1" style="display:none;"><a href="../search/trans.php<?php echo $key; ?>"><span><?php echo $_local->gui->translate; ?></span><span id="search_trans_num_1"></span></a></li>
+		</ul>
+	</div>
+</div>
+<!--tool bar fixed end -->
 
-	<script>
-	 window.addEventListener('scroll',winScroll);
-	function winScroll(e){ 
-		if(GetPageScroll().y>150){
-			$("#search_toolbar_1").css("top",0) ;
+<script>
+	window.addEventListener('scroll', winScroll);
+
+	function winScroll(e) {
+		if (GetPageScroll().y > 150) {
+			$("#search_toolbar_1").css("top", 0);
+		} else {
+			$("#search_toolbar_1").css("top", GetPageScroll().y - 150);
 		}
-		else{
-			$("#search_toolbar_1").css("top",GetPageScroll().y - 150) ;
+	}
+	//滚动条位置
+	function GetPageScroll() {
+		var pos = new Object();
+		var x, y;
+		if (window.pageYOffset) { // all except IE	
+			y = window.pageYOffset;
+			x = window.pageXOffset;
+		} else if (document.documentElement && document.documentElement.scrollTop) { // IE 6 Strict	
+			y = document.documentElement.scrollTop;
+			x = document.documentElement.scrollLeft;
+		} else if (document.body) { // all other IE	
+			y = document.body.scrollTop;
+			x = document.body.scrollLeft;
 		}
+		pos.x = x;
+		pos.y = y;
+		return (pos);
 	}
- //滚动条位置
-function GetPageScroll() 
-{ 
-	var pos=new Object();
-	var x, y; 
-	if(window.pageYOffset) 
-	{	// all except IE	
-		y = window.pageYOffset;	
-		x = window.pageXOffset; 
-	} else if(document.documentElement && document.documentElement.scrollTop) 
-	{	// IE 6 Strict	
-		y = document.documentElement.scrollTop;	
-		x = document.documentElement.scrollLeft; 
-	} else if(document.body) {	// all other IE	
-		y = document.body.scrollTop;	
-		x = document.body.scrollLeft;   
-	} 
-	pos.x=x;
-	pos.y=y;
-	return(pos);
-}
-	</script>
+</script>

+ 23 - 21
app/studio/css/color_day.css

@@ -1,39 +1,41 @@
 :root {
     --main-color: #1E1E1E;
     --detail-color: #626262;
-    --tool-title-color:#1B1C1C;
-    --tool-color:#FFFFFF;
-    --tool--hidden-color:#C7C7C7;
+    --tool-title-color: #1B1C1C;
+    --tool-color: #FFFFFF;
+    --tool--hidden-color: #C7C7C7;
     --btn-color: #DFDFDF;
     --btn-border-color: #7D7D7D;
     --btn-hover-color: #FFFFFF;
     --link-color: #6baaff;
-    --tool-link-hover-color:#A1C9FF;
-    --link-hover-color:#1F7DF5;
-    --mean-user-color:#F9468F;
-    
-
-
+    --tool-link-hover-color: #A1C9FF;
+    --link-hover-color: #1F7DF5;
+    --mean-user-color: #F9468F;
     --bg-color: #FFFFFF;
-    --tool-bg-color: #545454;
+    --tool-bg-color: #333333;
     --tool-bg-color1: #494A4B;
-	--tool-bg-color2: #636363;
+    --tool-bg-color2: #636363;
     --tool-bg-color3: #3E3E3E;
-    --btn-hover-bg-color:#494949;
-    --btn-border-line-color:#7D7D7D;
-    --input-bg-color:#424242;
-    --select-bg-color:#424242;
-    --drop-bg-color:#EBEBEB;
+    --btn-hover-bg-color: #494949;
+    --btn-border-line-color: #7D7D7D;
+    --input-bg-color: #424242;
+    --select-bg-color: #424242;
+    --drop-bg-color: #EBEBEB;
     --border-line-color: #C5C7CB;
     --tool-line-color: #A4A4A4;
     --border: 1px solid var(--border-line-color);
     --border-shadow: #D2D2D2;
     --shadow-color: rgba(0, 0, 0, 0.28);
     --nocolor: rgba(255, 255, 255, 0);
-    
-    --booka:#DDDDFF;
-    --bookx:#E4E4E4;
+    --booka: #DDDDFF;
+    --bookx: #E4E4E4;
     --info-bg-color: rgba(255, 255, 255, 0.8);
-	
-	--error-text:#ff4141;
+    --error-text: #ff4141;
+    /*new color*/
+    --new-tool-bg: #333333;
+    --new-tool-content-bg: #4D4D4D;
+    --new-tool-list-hover-bg: #7B7B7B;
+    --new-tool-btn-border: #7B7B7B;
+    --new-tool-btn: #CDCDCD;
+    --new-tool-content-disabled: #989898;
 }

Diferenças do arquivo suprimidas por serem muito extensas
+ 468 - 431
app/studio/css/style.css


+ 1 - 1
app/studio/index_tool_bar.php

@@ -178,8 +178,8 @@
 			<div class="toolgroup1">
 			
 			<?php 
-			include "../lang/lang.php";
 			include "../ucenter/user.php";
+			include "../lang/lang.php";
 			?>			
 			</div>
 		</div>	

+ 85 - 78
app/ucenter/user.php

@@ -1,92 +1,98 @@
-	<!--显示模式-->
-	<script>
-		var g_language="en";
-		var g_currLink="";
-		function user_init(strPage){
-			g_currLink = strPage;
-		}
+<script>
+	var g_language = "en";
+	var g_currLink = "";
 
-	</script>
-	<style>
-	#user_info {
-		background-color: var(--tool-bg-color2);
-	}
-	#user_info::after {
-	content: " ";
-    position: absolute;
-    bottom: 100%;
-    right: 0;
-    margin-right: 1em;
-    border-width: 5px;
-    border-style: solid;
-    border-color: transparent;
-    border-bottom-color: var(--bg-color);
-	}
-	.dropdown-content a {
-		cursor: pointer;
+	function user_init(strPage) {
+		g_currLink = strPage;
 	}
-	#user_info{
-		width:20em;
+</script>
+<style>
+	#user_info {
+		width: 20em;
 	}
 
-	#user_info_welcome{
+	#user_info_welcome {
+		color: var(--main-color);
 		border-bottom: 1px solid var(--tool-line-color);
 		padding: 10px;
 		background-color: var(--bg-color);
 	}
-	#user_info_name{
-		font-size:200%;
+
+	#user_info_name {
+		font-size: 200%;
 	}
-	#user_info_welcome2{
-		text-align:right;
+
+	#user_info_welcome2 {
+		text-align: right;
 	}
-	#user_bar{
-		border: 2px solid var(--btn-border-color);
-		border-radius: 99px;
+
+	#user_bar {
 		color: var(--btn-color);
-		padding: 2px 2px 2px 15px;
 		height: min-content;
 		display: flex;
 	}
-	.new_account{
+
+	.new_account {
 		border: 2px solid var(--btn-border-color);
 		border-radius: 99px;
 		color: var(--btn-color);
 		padding: 5px 10px;
 		height: min-content;
 	}
-	.new_account:hover{
+
+	.new_account:hover {
 		background: var(--btn-border-color);
+	}
+
+	.header-dropdown-content {
+		border-radius: 3px;
+		display: none;
+		position: absolute;
+		background-color: var(--new-tool-content-bg);
+		min-width: 60px;
+		z-index: 910;
+		top: calc(100% + 6px);
+	}
+
+	.header-dropdown-content::after {
+		content: " ";
+		position: absolute;
+		bottom: 100%;
+		border: 6px solid transparent;
+		border-bottom-color: var(--new-tool-content-bg);
+	}
 
+	.header-dropdown-content::before {
+		content: '';
+		position: absolute;
+		bottom: 100%;
+		width: 100%;
+		border: 6px solid transparent;
 	}
+</style>
+<div class="dropdown" onmouseover="switchMenu(this,'user_info')" onmouseout="hideMenu()">
 
-	</style>
-		<div style="margin:auto 0;" class="dropdown" onmouseover="switchMenu(this,'user_info')" onmouseout="hideMenu()">
-			
-				<?php
-				if(isset($_COOKIE["userid"])){
-				?>
-			<div id="user_bar" >
-				<span style="padding: 4px 0;white-space: nowrap;">
-					<?php echo $_COOKIE["nickname"]; ?>
-				</span>
-				<button class="dropbtn icon_btn" onClick="switchMenu(this,'user_info')" id="use_mode">	
-					<svg class="icon" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 32 32" id="ic_user_32px" style="fill: var(--tool-link-hover-color);">
-						<path d="M20,4A16,16,0,1,0,36,20,16,16,0,0,0,20,4Zm0,4.8a4.8,4.8,0,1,1-4.8,4.8A4.8,4.8,0,0,1,20,8.8Zm0,22.72a11.521,11.521,0,0,1-9.6-5.152c.04-3.176,6.408-4.928,9.6-4.928s9.552,1.752,9.6,4.928A11.521,11.521,0,0,1,20,31.52Z" transform="translate(-4 -4)"/></svg>
-				</button>
+	<?php
+	if (isset($_COOKIE["userid"])) {
+	?>
+		<button class="dropbtn icon_btn" onClick="switchMenu(this,'user_info')" id="use_mode">
+			<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" id="ic_user_32px">
+				<path d="M20,4A16,16,0,1,0,36,20,16,16,0,0,0,20,4Zm0,4.8a4.8,4.8,0,1,1-4.8,4.8A4.8,4.8,0,0,1,20,8.8Zm0,22.72a11.521,11.521,0,0,1-9.6-5.152c.04-3.176,6.408-4.928,9.6-4.928s9.552,1.752,9.6,4.928A11.521,11.521,0,0,1,20,31.52Z" transform="translate(-4 -4)" /></svg>
+		</button>
+		<div class="header-dropdown-content right-content" id="user_info">
+			<div id="user_info_welcome">
+				<div id="user_info_welcome1"><?php echo $_local->gui->welcome; ?></div>
+				<div id="user_info_name"><?php echo $_COOKIE["nickname"]; ?></div>
+				<div id="user_info_welcome2"><?php echo $_local->gui->to_the_dhamma; ?></div>
 			</div>
-			<div class="dropdown-content" id="user_info">
-				<div id="user_info_welcome">
-				<div id="user_info_welcome1"><?php echo $_local->gui->welcome;?></div>
-				<div id="user_info_name"><?php echo $_COOKIE["nickname"];?></div>
-				<div id="user_info_welcome2"><?php echo $_local->gui->to_the_dhamma;?></div>
-				</div>
+			<div style="padding:10px;">
 				<a href="../ucenter/setting.php" target="_blank">
 					<span>
-					<svg class="icon">
-						<use xlink:href="../studio/svg/icon.svg#ic_settings"></use>
-					</svg>
-						<?php echo $_local->gui->setting;//用户设置?>
+						<svg class="icon">
+							<use xlink:href="../studio/svg/icon.svg#ic_settings"></use>
+						</svg>
+						<?php echo $_local->gui->setting; //用户设置
+						?>
 					</span>
 				</a>
 				<a href="../sync" target="_blank">
@@ -94,34 +100,35 @@
 						<svg class="icon">
 							<use xlink:href="../studio/svg/icon.svg#ic_autorenew_24px"></use>
 						</svg>
-						<?php echo $_local->gui->sync;//同步数据?>
+						<?php echo $_local->gui->sync; //同步数据
+						?>
 					</span>
 				</a>
-				<a href='../uhome/index.php?userid=<?php echo $_COOKIE["userid"];?>'>
+				<a href='../uhome/index.php?userid=<?php echo $_COOKIE["userid"]; ?>'>
 					<svg class="icon">
 						<use xlink:href="../studio/svg/icon.svg#my_zone"></use>
 					</svg>
-					<?php echo $_local->gui->my_zone;?>
+					<?php echo $_local->gui->my_zone; ?>
 				</a>
 				<a href='../ucenter/index.php?op=logout'>
 					<svg class="icon">
 						<use xlink:href="../studio/svg/icon.svg#ic_exit_to_app_24px"></use>
 					</svg>
-					<?php echo $_local->gui->logout;?>
+					<?php echo $_local->gui->logout; ?>
 				</a>
 			</div>
+		</div>
 
-				<?php
-				}
-				else{
-					?>
-			<span style="display: flex;">
-				<div  style="padding: 7px; margin-right: 10px;"><a href='../ucenter/'><?php echo $_local->gui->login;?></a></div>
-				<div class="new_account"><a href='../ucenter/index.php?op=new'><?php echo $_local->gui->new_account;?></a></div>
-			</span>
-				<?php
-				}
-				?>
+	<?php
+	} else {
+	?>
+		<span style="display: flex;">
+			<div style="padding: 7px; margin-right: 10px;"><a href='../ucenter/'><?php echo $_local->gui->login; ?></a></div>
+			<div class="new_account"><a href='../ucenter/index.php?op=new'><?php echo $_local->gui->new_account; ?></a></div>
+		</span>
+	<?php
+	}
+	?>
 
 
-		</div>
+</div>

Alguns arquivos não foram mostrados porque muitos arquivos mudaram nesse diff