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
MHSanaei · Dec 19, 2023 · 69651ec · 69651ec
1 parent 78d3680
commit 69651ec
Show file tree

Hide file tree

Showing 23 changed files with 206 additions and 211 deletions.
diff --git a/web/assets/css/custom.css b/web/assets/css/custom.css
@@ -18,6 +18,7 @@ body {
 html {
     --antd-wave-shadow-color: #008771;
     line-height: 1.15;
+    text-size-adjust: 100%;
     -webkit-text-size-adjust: 100%;
     -ms-text-size-adjust: 100%;
     -ms-overflow-style: scrollbar;
@@ -850,13 +851,17 @@ style attribute {
 .ant-menu,
 .ant-radio-button-wrapper {
     user-select: none;
+    -webkit-user-select: none;
 }
 
 .ant-calendar-date,
 .ant-calendar-year-panel-year,
 .ant-calendar-decade-panel-decade,
-.ant-calendar-month-panel-month {
-    border-radius: 5px;
+.ant-calendar-month-panel-month,
+.ant-checkbox-inner,
+.ant-checkbox-checked:after,
+.ant-table-row-expand-icon {
+    border-radius: 6px;
 }
 
 .ant-calendar-date:hover {
@@ -1095,15 +1100,15 @@ li.ant-select-dropdown-menu-item:empty:after {
     background-color: #313f5a;
 }
 
+.ant-select-dropdown,
+.ant-popover-inner {
+    overflow-x: hidden;
+}
 .ant-popover-inner-content {
     max-height: 400px;
     overflow-y: auto;
 }
 
-.ant-table-row-expand-icon {
-    border-radius: 6px;
-}
-
 .qr-bg {
     background-color: #fff;
     display: flex;

diff --git a/web/html/xui/form/outbound.html b/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}}
diff --git a/web/html/xui/form/protocol/dokodemo.html b/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}}
diff --git a/web/html/xui/form/protocol/shadowsocks.html b/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}}
diff --git a/web/html/xui/form/protocol/socks.html b/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}}
diff --git a/web/html/xui/form/protocol/trojan.html b/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}}
diff --git a/web/html/xui/form/protocol/vless.html b/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}}
diff --git a/web/html/xui/form/sniffing.html b/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}}
diff --git a/web/html/xui/form/stream/external_proxy.html b/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">

diff --git a/web/html/xui/form/stream/stream_grpc.html b/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>

diff --git a/web/html/xui/form/stream/stream_kcp.html b/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}}
diff --git a/web/html/xui/form/stream/stream_quic.html b/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}}