优化颜色选择器

src/admin/css/login.min.css

@@ -1 +1 @@
-body{line-height:1.6;letter-spacing:.6px;font:14px Helvetica Neue,Helvetica,PingFang SC,Tahoma,Arial,sans-serif;color:#545b62;background:#f5f5f5}a{color:#545b62}a:hover{color:#ff8400;text-decoration:none}h2{line-height:1.6;font-size:24px;color:#393d49;font-weight:600}.btn,input,select{font-size:14px!important}.admin-head{padding:1rem 0;background:#fff}.admin-nav{height:36px;line-height:36px}.admin-nav-a{padding-right:30px}.dropdown-menu{min-width:8rem;font-size:14px}.dropdown-item{padding:0 1rem;height:30px;line-height:30px;font-size:14px;color:#545b62!important}.logo,.form-control{height:36px}.login-from{margin:0 auto;width:500px}.login-box{padding:1.25rem;background:#fff;border-radius:.5rem}.login-power{padding-top:1rem}.form-control,.btn-md,.alert,.rounded{border-radius:.5rem!important}.input-group:not(.has-validation)>.custom-file:not(:last-child) .custom-file-label,.input-group:not(.has-validation)>.custom-file:not(:last-child) .custom-file-label::after,.input-group:not(.has-validation)>.custom-select:not(:last-child),.input-group:not(.has-validation)>.form-control:not(:last-child){border-top-right-radius:0!important;border-bottom-right-radius:0!important}.input-group>.input-group-append>.btn,.input-group>.input-group-append>.input-group-text,.input-group>.input-group-prepend:first-child>.btn:not(:first-child),.input-group>.input-group-prepend:first-child>.input-group-text:not(:first-child),.input-group>.input-group-prepend:not(:first-child)>.btn,.input-group>.input-group-prepend:not(:first-child)>.input-group-text{border-top-left-radius:0!important;border-bottom-left-radius:0!important}#validateimg{border-radius:0 .5rem .5rem 0;cursor:pointer}#browsehappy{padding:20px 30px;font-size:14px;line-height:16px;color:#856404;background:#fff3cd;border-radius:.25rem;border:0}.browsehappy-close{float:right;cursor:pointer}@media (max-width:760px){.admin-head{padding:1rem 15px}.admin-nav-a{display:none!important}.login-from{width:100%}}
+body{line-height:1.6;letter-spacing:.6px;font:14px Helvetica Neue,Helvetica,PingFang SC,Tahoma,Arial,sans-serif;color:#545b62;background:#f5f5f5}a{color:#545b62}a:hover{color:#ff8400;text-decoration:none}h2{line-height:1.6;font-size:24px;color:#393d49;font-weight:600}.btn,input,select{font-size:14px!important}.admin-head{padding:1rem 0;background:#fff}.admin-nav{height:36px;line-height:36px}.admin-nav-a{padding-right:30px}.dropdown-menu{min-width:8rem;font-size:14px}.dropdown-item{padding:0 1rem;height:30px;line-height:30px;font-size:14px;color:#545b62!important}.logo,.form-control{height:36px}.login-from{margin:0 auto;width:500px}.login-box{padding:1.25rem;background:#fff}.login-power{padding-top:1rem}.login-box,.form-control,.btn-md,.alert,.rounded{border-radius:.5rem!important}.input-group:not(.has-validation)>.custom-file:not(:last-child) .custom-file-label,.input-group:not(.has-validation)>.custom-file:not(:last-child) .custom-file-label::after,.input-group:not(.has-validation)>.custom-select:not(:last-child),.input-group:not(.has-validation)>.form-control:not(:last-child){border-top-right-radius:0!important;border-bottom-right-radius:0!important}.input-group>.input-group-append>.btn,.input-group>.input-group-append>.input-group-text,.input-group>.input-group-prepend:first-child>.btn:not(:first-child),.input-group>.input-group-prepend:first-child>.input-group-text:not(:first-child),.input-group>.input-group-prepend:not(:first-child)>.btn,.input-group>.input-group-prepend:not(:first-child)>.input-group-text{border-top-left-radius:0!important;border-bottom-left-radius:0!important}#validateimg{border-radius:0 .5rem .5rem 0;cursor:pointer}#browsehappy{padding:20px 30px;font-size:14px;line-height:16px;color:#856404;background:#fff3cd;border-radius:.35rem;border:0}.browsehappy-close{float:right;cursor:pointer}@media (max-width:760px){.admin-head{padding:1rem 15px}.admin-nav-a{display:none!important}.login-from{width:100%}}

src/static/web/css/admin.css

@@ -429,7 +429,6 @@ body.hidemenu .body-right {
 .pubdlg {
 	background:#fff;
 	border:2px solid #1eb867;
-	border-radius:.5rem;
 	z-index:8888
 }
 .pubdlg .title {
@@ -601,7 +600,6 @@ body.hidemenu .body-right {
 	max-height:60px
 }
 .icon img {
-	margin-right:10px;
 	width:20px;
 	height:20px
 }
@@ -623,7 +621,7 @@ span.page-link {
 	color:#fff;
 	background:#1eb867
 }
-table,input,select,textarea,.search,.menu-body,.coolbg,.mysource,.mywriter,.pubdlg,.quickselItem .topcat,.web-info,.cke_chrome,.cke_inner,.pagination,.card,.form-control,.btn-sm,.alert,.rounded {
+table,input,select,textarea,.search,.menu-body,.coolbg,.mysource,.mywriter,.pubdlg,.colordlg,.quickselItem .topcat,.web-info,.cke_chrome,.cke_inner,.pagination,.card,.form-control,.btn-sm,.alert,.rounded {
 	border-radius:.5rem!important
 }
 .btn-xs {
@@ -646,13 +644,17 @@ table,input,select,textarea,.search,.menu-body,.coolbg,.mysource,.mywriter,.pubd
 #timerange {
 	width:230px
 }
+#selColor {
+	padding:0;
+	width:50px
+}
 #browsehappy {
 	padding:20px 30px;
 	font-size:14px;
 	line-height:16px;
 	color:#856404;
 	background:#fff3cd;
-	border-radius:.25rem;
+	border-radius:.35rem;
 	border:0
 }
 .browsehappy-close {

src/static/web/img/color.htm

@@ -1,45 +0,0 @@
-<html>
-<head>
-<meta charset="utf-8">
-<title>颜色选框</title>
-</head>
-<body bgcolor="#C4C4B4" leftmargin="0" topmargin="0">
-<script>
-	function ColorSel(col)
-	{
-		window.returnValue = col;
-    window.close();
-	}
-</script>
-<table width="100" border="0" cellspacing="1" cellpadding="1">
-  <tr> 
-    <td bgcolor="#FF0000" onClick="ColorSel('#FF0000');" width="20%">&nbsp;</td>
-    <td bgcolor="#0000FF" onClick="ColorSel('#0000FF');" width="20%">&nbsp;</td>
-    <td bgcolor="#006600" onClick="ColorSel('#006600');" width="20%">&nbsp;</td>
-    <td bgcolor="#333333" onClick="ColorSel('#333333');" width="20%">&nbsp;</td>
-    <td bgcolor="#FFFF00" onClick="ColorSel('#FFFF00');" width="20%">&nbsp;</td>
-  </tr>
-  <tr> 
-    <td bgcolor="#CC0000" onClick="ColorSel('#CC0000');">&nbsp;</td>
-    <td bgcolor="#0033CC" onClick="ColorSel('#0033CC');">&nbsp;</td>
-    <td bgcolor="#339900" onClick="ColorSel('#339900');">&nbsp;</td>
-    <td bgcolor="#D1DDAA" onClick="ColorSel('#D1DDAA');">&nbsp;</td>
-    <td bgcolor="#FFCC33" onClick="ColorSel('#FFCC33');">&nbsp;</td>
-  </tr>
-  <tr> 
-    <td bgcolor="#990000" onClick="ColorSel('#990000');">&nbsp;</td>
-    <td bgcolor="#000099" onClick="ColorSel('#000099');">&nbsp;</td>
-    <td bgcolor="#33CC00" onClick="ColorSel('#33CC00');">&nbsp;</td>
-    <td bgcolor="#999999" onClick="ColorSel('#999999');">&nbsp;</td>
-    <td bgcolor="#FF6633" onClick="ColorSel('#FF6633');">&nbsp;</td>
-  </tr>
-  <tr> 
-    <td bgcolor="#660000" onClick="ColorSel('#660000');">&nbsp;</td>
-    <td bgcolor="#330099" onClick="ColorSel('#330099');">&nbsp;</td>
-    <td bgcolor="#66FF00" onClick="ColorSel('#66FF00');">&nbsp;</td>
-    <td bgcolor="#CCCCCC" onClick="ColorSel('#CCCCCC');">&nbsp;</td>
-    <td bgcolor="#ffffff" onClick="ColorSel('');" align="center">无</td>
-  </tr>
-</table>
-</body>
-</html>

src/static/web/img/colornew.htm

@@ -1,33 +1,32 @@
 <table width="100" border="0" cellspacing="1" cellpadding="1">
-  <tr> 
-    <td bgcolor="#FF0000" onClick="ColorSel('#FF0000', 'color');" width="20%">&nbsp;</td>
-    <td bgcolor="#0000FF" onClick="ColorSel('#0000FF', 'color');" width="20%">&nbsp;</td>
-    <td bgcolor="#006600" onClick="ColorSel('#006600', 'color');" width="20%">&nbsp;</td>
-    <td bgcolor="#333333" onClick="ColorSel('#333333', 'color');" width="20%">&nbsp;</td>
-    <td bgcolor="#ffffff" onClick="ColorSel('', 'color');" align="center">X</td>
-  </tr>
-  <tr> 
-    <td bgcolor="#CC0000" onClick="ColorSel('#CC0000', 'color');">&nbsp;</td>
-    <td bgcolor="#0033CC" onClick="ColorSel('#0033CC', 'color');">&nbsp;</td>
-    <td bgcolor="#339900" onClick="ColorSel('#339900', 'color');">&nbsp;</td>
-    <td bgcolor="#D1DDAA" onClick="ColorSel('#D1DDAA', 'color');">&nbsp;</td>
-    <td bgcolor="#FFCC33" onClick="ColorSel('#FFCC33', 'color');">&nbsp;</td>
-  </tr>
-  <tr> 
-    <td bgcolor="#990000" onClick="ColorSel('#990000', 'color');">&nbsp;</td>
-    <td bgcolor="#000099" onClick="ColorSel('#000099', 'color');">&nbsp;</td>
-    <td bgcolor="#33CC00" onClick="ColorSel('#33CC00', 'color');">&nbsp;</td>
-    <td bgcolor="#999999" onClick="ColorSel('#999999', 'color');">&nbsp;</td>
-    <td bgcolor="#FF6633" onClick="ColorSel('#FF6633', 'color');">&nbsp;</td>
-  </tr>
-  <tr> 
-    <td bgcolor="#660000" onClick="ColorSel('#660000', 'color');">&nbsp;</td>
-    <td bgcolor="#330099" onClick="ColorSel('#330099', 'color');">&nbsp;</td>
-    <td bgcolor="#66FF00" onClick="ColorSel('#66FF00', 'color');">&nbsp;</td>
-    <td bgcolor="#CCCCCC" onClick="ColorSel('#CCCCCC', 'color');">&nbsp;</td>
-    <td bgcolor="#FFFF00" onClick="ColorSel('#FFFF00', 'color');" width="20%">&nbsp;</td>
-  </tr>
-  <tr> 
-    <td colspan="5">自定义：<input type="color" id="selColor" style="width: 50px;padding: 0;"> <button class="btn btn-sm btn-success" onclick="ColorSel(document.querySelector('#selColor').value, 'color')">确定</button></td>
-  </tr>
+	<tr> 
+		<td bgcolor="#FF0000" onClick="ColorSel('#FF0000', 'color');" width="20%">&nbsp;</td>
+		<td bgcolor="#0000FF" onClick="ColorSel('#0000FF', 'color');" width="20%">&nbsp;</td>
+		<td bgcolor="#006600" onClick="ColorSel('#006600', 'color');" width="20%">&nbsp;</td>
+		<td bgcolor="#333333" onClick="ColorSel('#333333', 'color');" width="20%">&nbsp;</td>
+		<td bgcolor="#ffffff" onClick="ColorSel('', 'color');" width="20%" align="center">X</td>
+	</tr>
+	<tr> 
+		<td bgcolor="#CC0000" onClick="ColorSel('#CC0000', 'color');">&nbsp;</td>
+		<td bgcolor="#0033CC" onClick="ColorSel('#0033CC', 'color');">&nbsp;</td>
+		<td bgcolor="#339900" onClick="ColorSel('#339900', 'color');">&nbsp;</td>
+		<td bgcolor="#D1DDAA" onClick="ColorSel('#D1DDAA', 'color');">&nbsp;</td>
+		<td bgcolor="#FFCC33" onClick="ColorSel('#FFCC33', 'color');">&nbsp;</td>
+	</tr>
+	<tr> 
+		<td bgcolor="#990000" onClick="ColorSel('#990000', 'color');">&nbsp;</td>
+		<td bgcolor="#000099" onClick="ColorSel('#000099', 'color');">&nbsp;</td>
+		<td bgcolor="#33CC00" onClick="ColorSel('#33CC00', 'color');">&nbsp;</td>
+		<td bgcolor="#999999" onClick="ColorSel('#999999', 'color');">&nbsp;</td>
+		<td bgcolor="#FF6633" onClick="ColorSel('#FF6633', 'color');">&nbsp;</td>
+	</tr>
+	<tr> 
+		<td bgcolor="#660000" onClick="ColorSel('#660000', 'color');">&nbsp;</td>
+		<td bgcolor="#330099" onClick="ColorSel('#330099', 'color');">&nbsp;</td>
+		<td bgcolor="#66FF00" onClick="ColorSel('#66FF00', 'color');">&nbsp;</td>
+		<td bgcolor="#CCCCCC" onClick="ColorSel('#CCCCCC', 'color');">&nbsp;</td>
+		<td bgcolor="#FFFF00" onClick="ColorSel('#FFFF00', 'color');">&nbsp;</td>
+	</tr>
 </table>
+<span class="d-block my-2">自定义：<input type="color" id="selColor"></span>
+<button class="btn btn-sm btn-success" onclick="ColorSel(document.querySelector('#selColor').value, 'color')">确定</button>