show proxy detail

assets/static/css/index-color.css

@@ -1,6 +1,5 @@
-header {
-    background-color: #58b7ff;
-    color: #fff;
+.layui-bg-blue {
+    background-color: #58b7ff !important;
 }
 
 .layui-btn {
@@ -60,13 +59,29 @@ header {
     background-color: #d9ecff;
 }
 
-.layui-table-cell-c:hover{
+.layui-table-cell-c:hover {
     border-color: #79bbff;
 }
 
+.layui-nav-tree .layui-nav-child dd.layui-this,
+.layui-nav-tree .layui-nav-child dd.layui-this a,
+.layui-nav-tree .layui-this,
+.layui-nav-tree .layui-this > a,
+.layui-nav-tree .layui-this > a:hover {
+    background-color: #409eff;
+}
+
+.layui-nav-tree .layui-nav-bar {
+    background-color: #409eff;
+}
+
+.proxy-expand .layui-row .layui-row > div:first-child {
+    color: #99a9bf;
+}
+
 @media (prefers-color-scheme: dark) {
-    header {
-        background-color: #395c74;
+    .layui-bg-blue {
+        background-color: #395c74 !important;
     }
 
     .layui-btn {
@@ -122,7 +137,19 @@ header {
         background-color: rgba(255, 255, 255, .08);
     }
 
-    .layui-table-cell-c:hover{
+    .layui-table-cell-c:hover {
         border-color: #5f5f60;
     }
+
+    .layui-nav-tree .layui-nav-child dd.layui-this,
+    .layui-nav-tree .layui-nav-child dd.layui-this a,
+    .layui-nav-tree .layui-this,
+    .layui-nav-tree .layui-this > a,
+    .layui-nav-tree .layui-this > a:hover {
+        background-color: #4f80a1;
+    }
+
+    .layui-nav-tree .layui-nav-bar {
+        background-color: #4f80a1;
+    }
 }

assets/static/css/index.css

@@ -9,19 +9,31 @@ section {
     right: 0;
     top: 0;
     bottom: 0;
-    padding: 15px 15px 0 15px;
-    overflow: auto;
+    padding: 15px;
+    overflow: hidden;
     box-sizing: border-box;
 }
 
-.layui-header{
+.layui-header {
     line-height: 60px;
     font-size: 16px;
 }
 
-.layui-title{
+.layui-layout-admin .layui-side {
+    width: 225px !important;
+}
+
+.layui-side-scroll {
+    width: 245px !important;
+}
+
+.layui-logo {
+    width: 225px !important;
+}
+
+.layui-title {
     position: absolute;
-    left: 200px;
+    left: 225px !important;
     right: 0;
     top: 0;
     height: 100%;
@@ -30,6 +42,14 @@ section {
     box-sizing: border-box;
 }
 
+.layui-nav.layui-nav-tree {
+    width: 225px !important;
+}
+
+.layui-body {
+    left: 225px;
+}
+
 #searchForm input {
     height: 30px;
     line-height: 28px;
@@ -92,6 +112,10 @@ section.server-info .chart-info {
     flex: 1;
 }
 
+section.server-info .text-info{
+    padding: 0 20px;
+}
+
 section.server-info .text-row {
     display: flex;
     font-size: 14px;
@@ -125,4 +149,22 @@ section.server-info .chart-info #trafficChart,
 section.server-info .chart-info #countChart {
     width: 400px;
     height: 250px;
-}
+}
+
+.toggle-proxy-info-arrow{
+    display: inline-block;
+    transition-duration: 0.2s;
+}
+
+.toggle-proxy-info-arrow.open{
+    transform: rotate(90deg);
+}
+
+.proxy-info .layui-row {
+    font-size: 14px !important;
+    padding: 10px;
+}
+
+.proxy-info .layui-col-xs6 .layui-row{
+    padding: 0;
+}