add some i18n support

add text border for chart

assets/static/css/index-color.css

@@ -79,6 +79,35 @@
     color: #99a9bf;
 }
 
+section.server-info .text-row .text-col:first-child {
+    color: #99a9bf;
+}
+
+section.proxy-list .proxy-info .layui-row .layui-row > div:first-child {
+    color: #99a9bf;
+}
+
+.online,
+.offline {
+    border-radius: 4px;
+    padding: 2px 10px;
+    font-size: 12px;
+    border-width: 1px;
+    border-style: solid;
+}
+
+.online {
+    color: #67c23a;
+    background-color: #f0f9eb;
+    border-color: #e1f3d8;
+}
+
+.offline {
+    color: #f56c6c;
+    background-color: #fef0f0;
+    border-color: #fde2e2;
+}
+
 @media (prefers-color-scheme: dark) {
     .layui-bg-blue {
         background-color: #395c74 !important;
@@ -152,4 +181,16 @@
     .layui-nav-tree .layui-nav-bar {
         background-color: #4f80a1;
     }
+
+    .online {
+        color: #67c23a;
+        background-color: #1c2518;
+        border-color: #25371c;
+    }
+
+    .offline {
+        color: #f56c6c;
+        background-color: #2b1d1d;
+        border-color: #412626;
+    }
 }

assets/static/css/index.css

@@ -25,6 +25,10 @@ section {
 
 .layui-side-scroll {
     width: 245px !important;
+    position: absolute !important;
+    top: 0 !important;
+    bottom: 24px !important;
+    height: auto !important;
 }
 
 .layui-logo {
@@ -37,7 +41,6 @@ section {
     right: 0;
     top: 0;
     height: 100%;
-    color: #fff;
     padding: 0 15px;
     box-sizing: border-box;
 }
@@ -112,7 +115,7 @@ section.server-info .chart-info {
     flex: 1;
 }
 
-section.server-info .text-info{
+section.server-info .text-info {
     padding: 0 20px;
 }
 
@@ -126,10 +129,6 @@ section.server-info .text-row .text-col {
     flex: 1;
 }
 
-section.server-info .text-row .text-col:first-child {
-    color: #99a9bf;
-}
-
 section.server-info .chart-info {
     display: flex;
     flex-direction: column;
@@ -151,12 +150,12 @@ section.server-info .chart-info #countPieChart {
     height: 250px;
 }
 
-.toggle-proxy-info-arrow{
+.toggle-proxy-info-arrow {
     display: inline-block;
     transition-duration: 0.2s;
 }
 
-.toggle-proxy-info-arrow.open{
+.toggle-proxy-info-arrow.open {
     transform: rotate(90deg);
 }
 
@@ -165,10 +164,20 @@ section.server-info .chart-info #countPieChart {
     padding: 10px;
 }
 
-.proxy-info .layui-col-xs6 .layui-row{
+.proxy-info .layui-col-xs6 .layui-row {
     padding: 0;
 }
 
-#trafficBarChart{
+#trafficBarChart {
     height: 100%;
 }
+
+.version {
+    height: 24px;
+    line-height: 24px;
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    text-align: center;
+    font-size: 12px;
+}