Ultra Dark Theme for 3X-UI (#1871)

3 files changed, 24 insertions, 22 deletions

diff --git a/web/html/xui/fakedns_modal.html b/web/html/xui/fakedns_modal.html
index c830f44d..c3abe5d5 100644
--- a/web/html/xui/fakedns_modal.html
+++ b/web/html/xui/fakedns_modal.html
@@ -7,7 +7,7 @@
             <a-input v-model.trim="fakednsModal.fakeDns.ipPool"></a-input>
         </a-form-item>
         <a-form-item label='{{ i18n "pages.xray.fakedns.poolSize" }}'>
-          <a-input type="number" min="1" v-model.trim="fakednsModal.fakeDns.poolSize"></a-input>
+          <a-input-number style="width: 100%;" type="number" min="1" v-model.trim="fakednsModal.fakeDns.poolSize"></a-input-number>
         </a-form-item>
     </a-form>
 </a-modal>
diff --git a/web/html/xui/index.html b/web/html/xui/index.html
index 86dbf6b8..1c3132d6 100644
--- a/web/html/xui/index.html
+++ b/web/html/xui/index.html
@@ -19,12 +19,14 @@
         color: hsla(0, 0%, 100%, .65);
     }
 
-    .ant-tag-df {
-        color: rgb(0 0 0 / 80%);
+    .dark .ant-card-hoverable:hover,
+    .dark .ant-space-item > .ant-tabs:hover {
+        transform: scale(0.987);
+        outline-color: #40434d;
     }
 
-    .dark .ant-tag-df {
-        color: rgb(255 255 255 / 80%);
+    .dark .ant-card-bordered {
+        outline: 2px solid var(--dark-color-background);
     }
 </style>
 
@@ -102,8 +104,8 @@
                     <a-col :sm="24" :lg="12">
                         <a-card hoverable>
                             <b>{{ i18n "pages.index.operationHours" }}:</b>
-                            <a-tag class="ant-tag-df">Xray [[ formatSecond(status.appStats.uptime) ]]</a-tag>
-                            <a-tag class="ant-tag-df">OS [[ formatSecond(status.uptime) ]]</a-tag>
+                            <a-tag color="green">Xray [[ formatSecond(status.appStats.uptime) ]]</a-tag>
+                            <a-tag color="green">OS [[ formatSecond(status.uptime) ]]</a-tag>
                         </a-card>
                     </a-col>
                     <a-col :sm="24" :lg="12">
@@ -137,7 +139,7 @@
                     <a-col :sm="24" :lg="12">
                         <a-card hoverable>
                             <b>{{ i18n "pages.index.systemLoad" }}:</b>
-                            <a-tag class="ant-tag-df">
+                            <a-tag color="green">
                             <a-tooltip>
                                 [[ status.loads[0] ]] | [[ status.loads[1] ]] | [[ status.loads[2] ]]
                                 <template slot="title">
@@ -150,10 +152,10 @@
                     <a-col :sm="24" :lg="12">
                         <a-card hoverable>
                             <b>{{ i18n "usage"}}:</b>
-                            <a-tag class="ant-tag-df">
+                            <a-tag color="green">
                             RAM [[ sizeFormat(status.appStats.mem) ]]
                             </a-tag>
-                            <a-tag class="ant-tag-df">
+                            <a-tag color="green">
                                 Threads [[ status.appStats.threads ]]
                             </a-tag>
                         </a-card>
@@ -162,7 +164,7 @@
                         <a-card hoverable>
                             <a-row>
                                 <a-col :span="12">
-                                    <a-tag class="ant-tag-df">
+                                    <a-tag>
                                     <a-tooltip>
                                     <a-icon type="global"></a-icon> IPv4
                                         <template slot="title">
@@ -172,7 +174,7 @@
                                 </a-tag>
                             </a-col>
                             <a-col :span="12">
-                                <a-tag class="ant-tag-df">
+                                <a-tag>
                                     <a-tooltip>
                                     <a-icon type="global"></a-icon> IPv6
                                         <template slot="title">
@@ -188,7 +190,7 @@
                         <a-card hoverable>
                             <a-row>
                                 <a-col :span="12">
-                                    <a-tag class="ant-tag-df">
+                                    <a-tag>
                                     <a-tooltip>
                                     <a-icon type="swap"></a-icon> TCP:  [[ status.tcpCount ]]
                                         <template slot="title">
@@ -198,7 +200,7 @@
                                     </a-tag>
                                 </a-col>
                                 <a-col :span="12">
-                                    <a-tag class="ant-tag-df">
+                                    <a-tag>
                                     <a-tooltip>
                                     <a-icon type="swap"></a-icon> UDP:  [[ status.udpCount ]]
                                         <template slot="title">
@@ -214,7 +216,7 @@
                         <a-card hoverable>
                             <a-row>
                                 <a-col :span="12">
-                                    <a-tag class="ant-tag-df">
+                                    <a-tag>
                                     <a-tooltip>
                                     <a-icon type="arrow-up"></a-icon>
                                     Up: [[ sizeFormat(status.netIO.up) ]]/s
@@ -225,7 +227,7 @@
                                     </a-tag>
                                 </a-col>
                                 <a-col :span="12">
-                                    <a-tag class="ant-tag-df">
+                                    <a-tag>
                                     <a-tooltip>
                                     <a-icon type="arrow-down"></a-icon>
                                     Down: [[ sizeFormat(status.netIO.down) ]]/s
@@ -242,7 +244,7 @@
                         <a-card hoverable>
                             <a-row>
                                 <a-col :span="12">
-                                    <a-tag class="ant-tag-df">
+                                    <a-tag>
                                     <a-tooltip>
                                         <a-icon type="cloud-upload"></a-icon>
                                         <template slot="title">
@@ -252,7 +254,7 @@
                                     </a-tag>
                                 </a-col>
                                 <a-col :span="12">
-                                    <a-tag class="ant-tag-df">
+                                    <a-tag>
                                     <a-tooltip>
                                         <a-icon type="cloud-download"></a-icon>
                                         <template slot="title">
diff --git a/web/html/xui/settings.html b/web/html/xui/settings.html
index 62c53379..adc199a9 100644
--- a/web/html/xui/settings.html
+++ b/web/html/xui/settings.html
@@ -95,15 +95,15 @@
                         </a-alert>
                     </transition>
                 <a-space direction="vertical">
-                    <a-card hoverable style="margin-bottom: .5rem;">
-                        <a-row>
-                            <a-col :xs="24" :sm="8" style="padding: 4px;">
+                    <a-card hoverable style="margin-bottom: .5rem; overflow-x: hidden;">
+                        <a-row style="display: flex; flex-wrap: wrap; align-items: center;">
+                            <a-col :xs="24" :sm="10" style="padding: 4px;">
                                 <a-space direction="horizontal">
                                     <a-button type="primary" :disabled="saveBtnDisable" @click="updateAllSetting">{{ i18n "pages.settings.save" }}</a-button>
                                     <a-button type="danger" :disabled="!saveBtnDisable" @click="restartPanel">{{ i18n "pages.settings.restartPanel" }}</a-button>
                                 </a-space>
                             </a-col>
-                            <a-col :xs="24" :sm="16">
+                            <a-col :xs="24" :sm="14">
                                 <template>
                                     <div>
                                         <a-back-top :target="() => document.getElementById('content-layout')" visibility-height="200">