new login page

assets/static/css/color.css

@@ -113,7 +113,17 @@ section.proxy-list .proxy-info .layui-row .layui-row > div:first-child {
     color: #99a9bf;
 }
 
+.login-title,
+.login-title a {
+    color: #333 !important;
+}
+
 @media (prefers-color-scheme: dark) {
+    .login-title,
+    .login-title a {
+        color: #99a9bf !important;
+    }
+
     .layui-bg-blue {
         background-color: #395c74 !important;
     }
@@ -154,6 +164,11 @@ section.proxy-list .proxy-info .layui-row .layui-row > div:first-child {
         border-color: #5f5f60;
     }
 
+    .layui-form-danger + .layui-form-select .layui-input,
+    .layui-form-danger:focus {
+        border-color: #ff5722 !important;
+    }
+
     .layui-form-checkbox[lay-skin=primary]:hover > i {
         border-color: #5f5f60;
     }

assets/static/css/index.css

@@ -47,6 +47,19 @@ section {
     height: 100%;
     padding: 0 15px;
     box-sizing: border-box;
+    display: flex;
+}
+
+.layui-title #title {
+    flex: 1;
+    display: inline-block;
+}
+
+.layui-title #logout{
+    display: inline-block;
+    font-size: 20px;
+    font-weight: bold;
+    cursor: pointer;
 }
 
 .layui-nav.layui-nav-tree {

assets/static/css/login.css

@@ -0,0 +1,30 @@
+html, body {
+    width: 100%;
+    height: 100%;
+}
+
+body {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+.login-title {
+    text-align: center;
+    margin-bottom: 50px;
+}
+
+.login-title .title-text {
+    font-size: 24px;
+    text-align: center;
+    font-weight: bold;
+}
+
+.login-title .title-version {
+    font-size: 12px;
+}
+
+.login-container {
+    width: 320px;
+    margin: 0 auto;
+}