美化系统表格组件样式

joode · Nov 9, 2021 · 3b4ef54 · 3b4ef54
1 parent daf21e2
commit 3b4ef54
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 11 deletions.
diff --git a/datagear-web/src/main/resources/org/datagear/web/static/css/style.css b/datagear-web/src/main/resources/org/datagear/web/static/css/style.css
@@ -739,9 +739,28 @@ form.display-block .form-content .form-item .form-item-value label.error,
 }
 
 /*Datatables*/
-.dataTable th, .dataTable tr {   
+table.dataTable thead th,
+table.dataTable thead td{
+	padding: 8px 18px;
+}
+.dataTable th, .dataTable tr {
     white-space: nowrap !important;  
 }
+table.dataTable thead th.ui-state-default,
+table.dataTable tfoot th.ui-state-default{
+    border-width: 0;
+    text-align: left;
+    padding-left: 8px;
+    font-weight: bold;
+    border-bottom-width: 1px;
+}
+table.dataTable thead th div.DataTables_sort_wrapper span{
+	position: static;
+    top: 50%;
+    margin-top: -4px;
+    opacity: 0.6;
+    filter: Alpha(Opacity=60);
+}
 .dataTables_wrapper .ui-toolbar{
 	display: none;
 }
@@ -759,16 +778,26 @@ table.dataTable tfoot th{
 }
 table.dataTable thead .keyword-search-column{
 	font-weight: bold;
+	position: relative;
+	padding-right: 16px;
+}
+table.dataTable thead .keyword-search-column::after{
+	content: " ";
+	position: absolute;
+    top: 50%;
+    margin-top: -7px;
+    width: 16px;
+    height: 16px;
+    opacity: 0.6;
+    filter: Alpha(Opacity=60);
+    background-position: -160px -112px;
 }
 table.dataTable .column-check{
-	text-align: center;
-	padding-left: 0.8em;
-	padding-right: 0.8em;
+	position: relative;
 	-webkit-user-select:none;
 	-moz-user-select:none;
 	-ms-user-select:none;
 	user-select:none;
-	position: relative;
 }
 table.dataTable thead tr .column-check{
 	cursor: pointer;

diff --git a/datagear-web/src/main/resources/org/datagear/web/static/theme/dark/style.css b/datagear-web/src/main/resources/org/datagear/web/static/theme/dark/style.css
@@ -177,7 +177,8 @@ table.dataTable.hover tbody tr:hover.selected td.selected {
 	background-color: #FFB90F;
 	color: #333333;
 }
-table.dataTable tbody tr.selected .checkbox .ui-icon{
+table.dataTable tbody tr.selected .checkbox .ui-icon,
+table.dataTable thead .keyword-search-column::after{
 	background-image: url(jquery-ui-1.12.1/images/ui-icons_ffffff_256x240.png);
 }
 table.dataTable th,
@@ -303,5 +304,5 @@ table.dataTable th,
 
 /*LOGO*/
 .main-page-head .logo .logo-content{
-	background-image: url(../../img/logo/full-210x50/logo-red-white.png);
+	background-image: url(../../img/logo/full-210x50/logo-lightred-white.png);
 }
diff --git a/datagear-web/src/main/resources/org/datagear/web/static/theme/green/style.css b/datagear-web/src/main/resources/org/datagear/web/static/theme/green/style.css
@@ -177,7 +177,8 @@ table.dataTable.hover tbody tr:hover.selected td.selected {
 	background-color: #FFD700;
 	color: #333333;
 }
-table.dataTable tbody tr.selected .checkbox .ui-icon{
+table.dataTable tbody tr.selected .checkbox .ui-icon,
+table.dataTable thead .keyword-search-column::after{
 	background-image: url(jquery-ui-1.12.1/images/ui-icons_ffffff_256x240.png);
 }
 table.dataTable th,
@@ -303,5 +304,5 @@ table.dataTable th,
 
 /*LOGO*/
 .main-page-head .logo .logo-content{
-	background-image: url(../../img/logo/full-210x50/logo-red-white.png);
+	background-image: url(../../img/logo/full-210x50/logo-lightred-white.png);
 }
diff --git a/datagear-web/src/main/resources/org/datagear/web/static/theme/light/style.css b/datagear-web/src/main/resources/org/datagear/web/static/theme/light/style.css
@@ -177,7 +177,8 @@ table.dataTable.hover tbody tr:hover.selected td.selected {
 	background-color: #FFD700;
 	color: #333333;
 }
-table.dataTable tbody tr.selected .checkbox .ui-icon{
+table.dataTable tbody tr.selected .checkbox .ui-icon,
+table.dataTable thead .keyword-search-column::after{
 	background-image: url(jquery-ui-1.12.1/images/ui-icons_444444_256x240.png);
 }
 table.dataTable th,
@@ -303,5 +304,5 @@ table.dataTable th,
 
 /*LOGO*/
 .main-page-head .logo .logo-content{
-	background-image: url(../../img/logo/full-210x50/logo-red.png);
+	background-image: url(../../img/logo/full-210x50/logo-red-lightblack.png);
 }