Minor UI fixes (#1405)

* Update translate.en_US.toml

* Update stream_kcp.html

* Update vless.html

* Update shadowsocks.html

* Update external_proxy.html

* Update stream_sockopt.html

* Update sniffing.html

* Update tls_settings.html

* Update dokodemo.html

* Update shadowsocks.html

* Update socks.html

* Update stream_ws.html

* Update tls_settings.html

* Update index.html

* Update translate.en_US.toml

* Update translate.fa_IR.toml

* Update translate.ru_RU.toml

* Update translate.vi_VN.toml

* Update translate.zh_Hans.toml

* Update outbound.html

* Update outbound.html

* Update trojan.html

* Update vless.html

* Update stream_kcp.html

* Update xray.html

* Update stream_grpc.html

* Update custom.css

* Update stream_quic.html

* Update custom.css

* Update custom.css

* Update custom.css

* Update inbounds.html

web/html/xui/form/outbound.html

@@ -160,25 +160,25 @@
         <a-form-item label='{{ i18n "password" }}'>
             <a-input v-model="outbound.stream.kcp.seed"></a-input>
         </a-form-item>
-        <a-form-item label='mtu'>
+        <a-form-item label='MTU'>
             <a-input-number v-model.number="outbound.stream.kcp.mtu"></a-input-number>
         </a-form-item>
-        <a-form-item label='tti (ms)'>
+        <a-form-item label='TTI (ms)'>
             <a-input-number v-model.number="outbound.stream.kcp.tti"></a-input-number>
         </a-form-item>
-        <a-form-item label='uplink capacity (MB/S)'>
+        <a-form-item label='Uplink Capacity (MB/s)'>
             <a-input-number v-model.number="outbound.stream.kcp.upCap"></a-input-number>
         </a-form-item> 
-        <a-form-item label='downlink capacity (MB/S)'>
+        <a-form-item label='Downlink Capacity (MB/s)'>
             <a-input-number v-model.number="outbound.stream.kcp.downCap"></a-input-number>
         </a-form-item>
-        <a-form-item label='congestion'>
+        <a-form-item label='Congestion'>
             <a-switch v-model="outbound.stream.kcp.congestion"></a-switch>
         </a-form-item>
-        <a-form-item label='read buffer size (MB)'>
+        <a-form-item label='Read Buffer Size (MB)'>
             <a-input-number v-model.number="outbound.stream.kcp.readBuffer"></a-input-number>
         </a-form-item>
-        <a-form-item label='write buffer size (MB)'>
+        <a-form-item label='Write Buffer Size (MB)'>
             <a-input-number v-model.number="outbound.stream.kcp.writeBuffer"></a-input-number>
         </a-form-item>
     </template>
@@ -217,22 +217,22 @@
         </a-form-item> 
         <a-form-item label='{{ i18n "camouflage" }}'>
             <a-select v-model="outbound.stream.quic.type" :dropdown-class-name="themeSwitcher.currentTheme">
-                <a-select-option value="none">none (not camouflage)</a-select-option>
-                <a-select-option value="srtp">srtp (video call)</a-select-option>
-                <a-select-option value="utp">utp (BT download)</a-select-option>
-                <a-select-option value="wechat-video">wechat-video (WeChat video)</a-select-option>
-                <a-select-option value="dtls">dtls (DTLS 1.2 packages)</a-select-option>
-                <a-select-option value="wireguard">wireguard (wireguard packages)</a-select-option>
+                <a-select-option value="none">none (No Obfuscation)</a-select-option>
+                <a-select-option value="srtp">SRTP (Video Call)</a-select-option>
+                <a-select-option value="utp">uTP (Bittorrent)</a-select-option>
+                <a-select-option value="wechat-video">WeChat Video</a-select-option>
+                <a-select-option value="dtls">DTLS (DTLS 1.2 packages)</a-select-option>
+                <a-select-option value="wireguard">WireGuard (WireGuard Packages)</a-select-option>
             </a-select>
         </a-form-item>
     </template>
     
     <!-- grpc -->
     <template v-if="outbound.stream.network === 'grpc'">
-        <a-form-item label='serviceName'>
+        <a-form-item label='Service Name'>
             <a-input v-model.trim="outbound.stream.grpc.serviceName"></a-input>
         </a-form-item>
-        <a-form-item label='MultiMode'>
+        <a-form-item label='Multi Mode'>
             <a-switch v-model="outbound.stream.grpc.multiMode"></a-switch>
         </a-form-item>
     </template>
@@ -267,7 +267,7 @@
                     <a-select-option v-for="alpn in ALPN_OPTION" :value="alpn">[[ alpn ]]</a-select-option>
                 </a-select>
             </a-form-item>
-            <a-form-item label="Allow insecure">
+            <a-form-item label="Allow Insecure">
                 <a-switch v-model="outbound.stream.tls.allowInsecure"></a-switch>
             </a-form-item>
         </template>
@@ -283,7 +283,7 @@
                         <a-select-option v-for="key in UTLS_FINGERPRINT" :value="key">[[ key ]]</a-select-option>
                     </a-select>
                 </a-form-item>
-                <a-form-item label="Short Id">
+                <a-form-item label="Short IDs">
                     <a-input v-model.trim="outbound.stream.reality.shortId" style="width:250px"></a-input>
                 </a-form-item>
                 <a-form-item label="SpiderX">
@@ -304,4 +304,4 @@
         <textarea style="position:absolute; left: -800px;" id="outboundJson"></textarea>
 </a-tab-pane>
 </a-tabs>
-{{end}}
+{{end}}

web/html/xui/form/protocol/dokodemo.html

@@ -8,13 +8,13 @@
     </a-form-item>
     <a-form-item label='{{ i18n "pages.inbounds.network"}}'>
         <a-select v-model="inbound.settings.network" :dropdown-class-name="themeSwitcher.currentTheme">
-            <a-select-option value="tcp,udp">TCP+UDP</a-select-option>
+            <a-select-option value="tcp,udp">TCP,UDP</a-select-option>
             <a-select-option value="tcp">TCP</a-select-option>
             <a-select-option value="udp">UDP</a-select-option>
         </a-select>
     </a-form-item>           
-    <a-form-item label='FollowRedirect'>
+    <a-form-item label='Follow Redirect'>
         <a-switch v-model="inbound.settings.followRedirect"></a-switch>
     </a-form-item>
 </a-form>
-{{end}}
+{{end}}

web/html/xui/form/protocol/shadowsocks.html

@@ -20,38 +20,28 @@
         </a-collapse-panel>
     </a-collapse>
 </template>
-<table width="100%" class="ant-table-tbody">
-    <tr>
-        <td>{{ i18n "encryption" }}</td>
-        <td>
-            <a-form-item>
-                <a-select v-model="inbound.settings.method" style="width: 250px;" @change="SSMethodChange" :dropdown-class-name="themeSwitcher.currentTheme">
-                    <a-select-option v-for="method in SSMethods" :value="method">[[ method ]]</a-select-option>
-                </a-select>
-            </a-form-item>
-        </td>
-    </tr>
-    <tr v-if="inbound.isSS2022">
-        <td>{{ i18n "password" }}
-            <a-icon @click="inbound.settings.password = RandomUtil.randomShadowsocksPassword()" type="sync"> </a-icon>
-        </td>
-        <td>
-            <a-form-item>
-                <a-input v-model.trim="inbound.settings.password" style="width: 250px"></a-input>
-            </a-form-item>
-        </td>
-    </tr>
-    <tr>
-        <td>{{ i18n "pages.inbounds.network" }}</td>
-        <td>
-            <a-form-item>
-                <a-select v-model="inbound.settings.network" style="width: 100px;" :dropdown-class-name="themeSwitcher.currentTheme">
-                    <a-select-option value="tcp,udp">tcp+udp</a-select-option>
-                    <a-select-option value="tcp">tcp</a-select-option>
-                    <a-select-option value="udp">udp</a-select-option>
-                </a-select>
-            </a-form-item>
-        </td>
-    </tr>
-</table>
-{{end}}
+<a-form :colon="false" :label-col="{ md: {span:6} }" :wrapper-col="{ md: {span:14} }">
+    <a-form-item label='{{ i18n "encryption" }}'>
+        <a-select v-model="inbound.settings.method" @change="SSMethodChange" :dropdown-class-name="themeSwitcher.currentTheme">
+            <a-select-option v-for="method in SSMethods" :value="method">[[ method ]]</a-select-option>
+        </a-select>
+    </a-form-item>
+    <a-form-item v-if="inbound.isSS2022">
+        <template slot="label">
+            <a-tooltip>
+                <template slot="title">
+                    <span>{{ i18n "password" }}</span>
+                </template> Password <a-icon @click="inbound.settings.password = RandomUtil.randomShadowsocksPassword()" type="sync"></a-icon>
+            </a-tooltip>
+        </template>
+        <a-input v-model.trim="inbound.settings.password"></a-input>
+    </a-form-item>
+    <a-form-item label='{{ i18n "pages.inbounds.network" }}'>
+        <a-select v-model="inbound.settings.network" style="width: 100px;" :dropdown-class-name="themeSwitcher.currentTheme">
+            <a-select-option value="tcp,udp">TCP,UDP</a-select-option>
+            <a-select-option value="tcp">TCP</a-select-option>
+            <a-select-option value="udp">UDP</a-select-option>
+        </a-select>
+    </a-form-item>
+</a-form>
+{{end}}

web/html/xui/form/protocol/socks.html

@@ -1,6 +1,6 @@
 {{define "form/socks"}}
 <a-form :colon="false" :label-col="{ md: {span:6} }" :wrapper-col="{ md: {span:14} }">
-    <a-form-item label='{{ i18n "pages.inbounds.enable" }} udp'>
+    <a-form-item label='{{ i18n "pages.inbounds.enable" }} UDP'>
         <a-switch v-model="inbound.settings.udp"></a-switch>
     </a-form-item>
     <a-form-item label="IP" v-if="inbound.settings.udp">
@@ -30,4 +30,4 @@
         </a-input-group>
     </template>
 </a-form>
-{{end}}
+{{end}}

web/html/xui/form/protocol/trojan.html

@@ -33,14 +33,14 @@
     <!-- trojan fallbacks -->
     <a-form v-for="(fallback, index) in inbound.settings.fallbacks" :colon="false" :label-col="{ md: {span:6} }" :wrapper-col="{ md: {span:14} }">
         <a-divider style="margin:0;">
-            Fallback[[ index + 1 ]]
+            Fallback [[ index + 1 ]]
             <a-icon type="delete" @click="() => inbound.settings.delFallback(index)"
                     style="color: rgb(255, 77, 79);cursor: pointer;"/>
         </a-divider>
         <a-form-item label='Name'>
             <a-input v-model="fallback.name"></a-input>
         </a-form-item>            
-        <a-form-item label='Alpn'>
+        <a-form-item label='ALPN'>
             <a-input v-model="fallback.alpn"></a-input>
         </a-form-item>
         <a-form-item label='Path'>
@@ -55,4 +55,4 @@
     </a-form>
     <a-divider style="margin:0;"></a-divider>
 </template>
-{{end}}
+{{end}}

web/html/xui/form/protocol/vless.html

@@ -35,14 +35,14 @@
     <!-- vless fallbacks -->
     <a-form v-for="(fallback, index) in inbound.settings.fallbacks" :colon="false" :label-col="{ md: {span:6} }" :wrapper-col="{ md: {span:14} }">
         <a-divider style="margin:0;">
-            Fallback[[ index + 1 ]]
+            Fallback [[ index + 1 ]]
             <a-icon type="delete" @click="() => inbound.settings.delFallback(index)"
                     style="color: rgb(255, 77, 79);cursor: pointer;"/>
         </a-divider>
         <a-form-item label='Name'>
             <a-input v-model="fallback.name"></a-input>
         </a-form-item>            
-        <a-form-item label='Alpn'>
+        <a-form-item label='ALPN'>
             <a-input v-model="fallback.alpn"></a-input>
         </a-form-item>
         <a-form-item label='Path'>
@@ -55,6 +55,6 @@
             <a-input-number v-model="fallback.xver" :min="0" :max="2"></a-input-number>
         </a-form-item>
     </a-form>
-    <a-divider style="margin:0;"></a-divider>
+    <a-divider style="margin:5px 0;"></a-divider>
 </template>
 {{end}}

web/html/xui/form/sniffing.html

@@ -1,5 +1,5 @@
 {{define "form/sniffing"}}
-<a-divider style="margin:0;"></a-divider>
+<a-divider style="margin:5px 0 0;"></a-divider>
 <a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
   <a-form-item>
     <span slot="label">
@@ -19,4 +19,4 @@
     </a-checkbox-group>
   </a-form-item>
 </a-form>
-{{end}}
+{{end}}

web/html/xui/form/stream/external_proxy.html

@@ -1,11 +1,11 @@
 {{define "form/externalProxy"}}
 <a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
-    <a-divider style="margin:0;"></a-divider>
+    <a-divider style="margin:5px 0 0;"></a-divider>
     <a-form-item label="External Proxy">
         <a-switch v-model="externalProxy"></a-switch>
         <a-button v-if="externalProxy" type="primary" style="margin-left: 10px" size="small" @click="inbound.stream.externalProxy.push({forceTls: 'same', dest: '', port: 443, remark: ''})">+</a-button>
     </a-form-item>
-    <a-input-group style="margin: 5px 0;" compact v-for="(row, index) in inbound.stream.externalProxy">
+    <a-input-group style="margin: 8px 0;" compact v-for="(row, index) in inbound.stream.externalProxy">
         <template>
             <a-tooltip title="Force TLS">
                 <a-select v-model="row.forceTls" style="width:20%; margin: 0px" :dropdown-class-name="themeSwitcher.currentTheme">

web/html/xui/form/stream/stream_grpc.html

@@ -3,7 +3,7 @@
     <a-form-item label="Service Name">
         <a-input v-model.trim="inbound.stream.grpc.serviceName"></a-input>
     </a-form-item>
-    <a-form-item label="MultiMode">
+    <a-form-item label="Multi Mode">
         <a-switch v-model="inbound.stream.grpc.multiMode"></a-switch>
     </a-form-item>
 </a-form>

web/html/xui/form/stream/stream_kcp.html

@@ -2,10 +2,10 @@
 <a-form :colon="false" :label-col="{ md: {span:6} }" :wrapper-col="{ md: {span:14} }">
     <a-form-item label='{{ i18n "camouflage" }}'>
         <a-select v-model="inbound.stream.kcp.type" :dropdown-class-name="themeSwitcher.currentTheme">
-            <a-select-option value="none">none (not camouflage)</a-select-option>
-            <a-select-option value="srtp">SRTP (video call)</a-select-option>
-            <a-select-option value="utp">UTP (BT DownloaD)</a-select-option>
-            <a-select-option value="wechat-video">wechat-video (WeChat video)</a-select-option>
+            <a-select-option value="none">none (No Obfuscation)</a-select-option>
+            <a-select-option value="srtp">SRTP (Video Call)</a-select-option>
+            <a-select-option value="utp">uTP (Bittorrent)</a-select-option>
+            <a-select-option value="wechat-video">WeChat Video</a-select-option>
             <a-select-option value="dtls">DTLS (DTLS 1.2 packages)</a-select-option>
             <a-select-option value="wireguard">WireGuard (WireGuard packages)</a-select-option>
         </a-select>
@@ -16,23 +16,23 @@
     <a-form-item label='MTU'>
         <a-input-number v-model.number="inbound.stream.kcp.mtu"></a-input-number>
     </a-form-item>
-    <a-form-item label='TTI(ms)'>
+    <a-form-item label='TTI (ms)'>
         <a-input-number v-model.number="inbound.stream.kcp.tti"></a-input-number>
     </a-form-item>
-    <a-form-item label='Uplink(Mb/s)'>
+    <a-form-item label='Uplink (MB/s)'>
         <a-input-number v-model.number="inbound.stream.kcp.upCap"></a-input-number>
     </a-form-item> 
-    <a-form-item label='Downlink(Mb/s)'>
+    <a-form-item label='Downlink (MB/s)'>
         <a-input-number v-model.number="inbound.stream.kcp.downCap"></a-input-number>
     </a-form-item>
     <a-form-item label='Congestion'>
         <a-switch v-model="inbound.stream.kcp.congestion"></a-switch>
     </a-form-item>
-    <a-form-item label='Read buffer(MB)'>
+    <a-form-item label='Read Buffer (MB)'>
         <a-input-number v-model.number="inbound.stream.kcp.readBuffer"></a-input-number>
     </a-form-item>
-    <a-form-item label='Write buffer(MB)'>
+    <a-form-item label='Write Buffer (MB)'>
         <a-input-number v-model.number="inbound.stream.kcp.writeBuffer"></a-input-number>
     </a-form-item>
 </a-form>
-{{end}}
+{{end}}

web/html/xui/form/stream/stream_quic.html

@@ -12,13 +12,13 @@
     </a-form-item> 
     <a-form-item label='{{ i18n "camouflage" }}'>
         <a-select v-model="inbound.stream.quic.type" :dropdown-class-name="themeSwitcher.currentTheme">
-            <a-select-option value="none">none (not camouflage)</a-select-option>
-            <a-select-option value="srtp">SRTP (video call)</a-select-option>
-            <a-select-option value="utp">UTP (BT Download)</a-select-option>
-            <a-select-option value="wechat-video">wechat-video (WeChat video)</a-select-option>
+            <a-select-option value="none">none (No Obfuscation)</a-select-option>
+            <a-select-option value="srtp">SRTP (Video Call)</a-select-option>
+            <a-select-option value="utp">uTP (Bittorrent)</a-select-option>
+            <a-select-option value="wechat-video">WeChat Video</a-select-option>
             <a-select-option value="dtls">DTLS (DTLS 1.2 packages)</a-select-option>
             <a-select-option value="wireguard">WireGuard (WireGuard Packages)</a-select-option>
         </a-select>
     </a-form-item>
 </a-form>
-{{end}}
+{{end}}

web/html/xui/form/stream/stream_sockopt.html

@@ -1,5 +1,5 @@
 {{define "form/streamSockopt"}}
-<a-divider style="margin:0;"></a-divider>
+<a-divider style="margin:5px 0 0;"></a-divider>
 <a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
     <a-form-item label="Transparent Proxy">
         <a-switch v-model="inbound.stream.sockoptSwitch"></a-switch>
@@ -23,4 +23,4 @@
         </a-form-item>
     </template>
 </a-form>
-{{end}}
+{{end}}

web/html/xui/form/stream/stream_ws.html

@@ -1,6 +1,6 @@
 {{define "form/streamWS"}}
 <a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
-    <a-form-item label="AcceptProxyProtocol">
+    <a-form-item label="Accept Proxy Protocol">
         <a-switch v-model="inbound.stream.ws.acceptProxyProtocol"></a-switch>
     </a-form-item>
     <a-form-item label='{{ i18n "path" }}'>
@@ -20,4 +20,4 @@
         </a-input-group>
     </a-form-item>
 </a-form>
-{{end}}
+{{end}}

web/html/xui/form/tls_settings.html

@@ -1,7 +1,7 @@
 {{define "form/tlsSettings"}}
 <!-- tls enable -->
 <a-form v-if="inbound.canEnableTls()" :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
-    <a-divider style="margin:0;"></a-divider>
+    <a-divider style="margin:3px 0;"></a-divider>
     <a-form-item label='{{ i18n "security" }}'>
         <a-radio-group v-model="inbound.stream.security" button-style="solid">
             <a-radio-button value="none">{{ i18n "none" }}</a-radio-button>
@@ -55,7 +55,7 @@
                 <a-select-option v-for="alpn in ALPN_OPTION" :value="alpn">[[ alpn ]]</a-select-option>
             </a-select>
         </a-form-item>
-        <a-form-item label="Allow insecure">
+        <a-form-item label="Allow Insecure">
             <a-switch v-model="inbound.stream.tls.settings.allowInsecure"></a-switch>
         </a-form-item>
         <a-form-item label="Reject Unknown SNI">
@@ -109,7 +109,7 @@
                 <a-select-option v-for="alpn in ALPN_OPTION" :value="alpn">[[ alpn ]]</a-select-option>
             </a-select>
         </a-form-item>
-        <a-form-item label="Allow insecure">
+        <a-form-item label="Allow Insecure">
             <a-switch v-model="inbound.stream.xtls.settings.allowInsecure"></a-switch>
         </a-form-item>
         <template v-for="cert,index in inbound.stream.xtls.certs">
@@ -171,7 +171,7 @@
                     <template slot="title">
                         <span>{{ i18n "pages.client.renew" }}</span>
                     </template>
-                    Short Ids
+                    Short IDs
                     <a-icon @click="inbound.stream.reality.shortIds = RandomUtil.randomShortId()" type="sync"> </a-icon>
                     </a-icon>
             </template>

web/html/xui/inbounds.html

@@ -161,9 +161,9 @@
                                 </a-col>
                             </a-row>
                         </div>
-                        <div style="display: flex; align-items: center; justify-content: flex-start;">
+                        <div :style="isMobile ? '' : 'display: flex; align-items: center; justify-content: flex-start;'">
                             <a-switch v-model="enableFilter"
-                                style="margin-right: .5rem;"
+                                :style="(isMobile ? 'margin' : 'margin-right') + ': .5rem;'"
                                 @change="toggleFilter">
                                 <a-icon slot="checkedChildren" type="search"></a-icon>
                                 <a-icon slot="unCheckedChildren" type="filter"></a-icon>

web/html/xui/index.html

@@ -132,7 +132,7 @@
                     <a-col :sm="24" :md="12">
                         <a-card hoverable>
                             {{ i18n "usage"}}:
-                            Memory [[ sizeFormat(status.appStats.mem) ]] -
+                            RAM [[ sizeFormat(status.appStats.mem) ]] -
                             Threads [[ status.appStats.threads ]]
                             </a-tooltip>
                         </a-card>
@@ -190,7 +190,7 @@
                             <a-row>
                                 <a-col :span="12">
                                     <a-icon type="arrow-up"></a-icon>
-                                    [[ sizeFormat(status.netIO.up) ]]/S
+                                    [[ sizeFormat(status.netIO.up) ]]/s
                                     <a-tooltip>
                                         <template slot="title">
                                             {{ i18n "pages.index.upSpeed" }}
@@ -200,7 +200,7 @@
                                 </a-col>
                                 <a-col :span="12">
                                     <a-icon type="arrow-down"></a-icon>
-                                    [[ sizeFormat(status.netIO.down) ]]/S
+                                    [[ sizeFormat(status.netIO.down) ]]/s
                                     <a-tooltip>
                                         <template slot="title">
                                             {{ i18n "pages.index.downSpeed" }}
@@ -650,4 +650,4 @@
 
 </script>
 </body>
-</html>
+</html>

web/html/xui/xray.html

@@ -438,7 +438,7 @@
             { title: 'Port', dataIndex: 'port', align: 'center', width: 10, ellipsis: true }]},
         { title: '{{ i18n "pages.xray.rules.inbound"}}', children: [
             { title: 'Inbound Tag', dataIndex: 'inboundTag', align: 'center', width: 20, ellipsis: true },
-            { title: 'User email', dataIndex: 'user', align: 'center', width: 20, ellipsis: true }]},
+            { title: 'Client Email', dataIndex: 'user', align: 'center', width: 20, ellipsis: true }]},
         { title: '{{ i18n "pages.xray.rules.outbound"}}', dataIndex: 'outboundTag', align: 'center', width: 20 },
     ];