add

src/display/css_html_js.py

@@ -1,21 +1,21 @@
 custom_css = """
-.dataframe th {
-    position: relative;
-}
-.dataframe th::after {
-    content: "\\f0dc";  /* Font Awesome sort icon */
-    font-family: "Font Awesome 5 Free";
-    font-weight: 900;
-    position: absolute;
-    right: 10px;
-    top: 50%;
-    transform: translateY(-50%);
-}
-.dataframe th.sorted-asc::after {
-    content: "\\f0de";  /* Font Awesome sort-up icon */
-}
-.dataframe th.sorted-desc::after {
-    content: "\\f0dd";  /* Font Awesome sort-down icon */
+/* 修改排序按钮颜色、大小等 */
+.gr-datatable .sorting:before, 
+.gr-datatable .sorting:after {
+    color: #007bff !important; /* 修改排序图标颜色 */
+    font-size: 16px !important; /* 调整大小 */
+}
+
+/* 鼠标悬停时改变颜色 */
+.gr-datatable .sorting:hover:before, 
+.gr-datatable .sorting:hover:after {
+    color: #ff4500 !important; /* 悬停时变色 */
+}
+
+/* 激活的排序图标 */
+.gr-datatable .sorting_asc:before,
+.gr-datatable .sorting_desc:before {
+    color: #28a745 !important; /* 绿色代表当前排序状态 */
 }
 
 .markdown-text {