Minor improvements in UI (#1399)

web/assets/css/custom.css

@@ -680,7 +680,7 @@ style attribute {
 .dark .ant-table-row-expand-icon {
     color: #fff;
     background-color: #fff0;
-    border-color: #9ea2a8;
+    border-color: rgb(255 255 255 / 20%);
 }
 
 .dark .ant-table-row-expand-icon:hover {
@@ -1099,3 +1099,16 @@ li.ant-select-dropdown-menu-item:empty:after {
     max-height: 400px;
     overflow-y: auto;
 }
+
+.ant-table-row-expand-icon {
+    border-radius: 6px;
+}
+
+.qr-bg {
+    background-color: #fff;
+    display: flex;
+    justify-content: center;
+    align-content: center;
+    padding: 0.5rem;
+    border-radius: 1rem;
+}

web/html/common/qrcode_modal.html

@@ -9,12 +9,12 @@
     </a-tag>
     <template v-if="app.subSettings.enable && qrModal.subId">
         <a-divider>Subscription</a-divider>
-        <canvas @click="copyToClipboard('qrCode-sub',genSubLink(qrModal.client.subId))" id="qrCode-sub" style="width: 100%; height: 100%;"></canvas>
+        <div class="qr-bg"><canvas @click="copyToClipboard('qrCode-sub',genSubLink(qrModal.client.subId))" id="qrCode-sub" style="width: 100%; height: 100%;"></canvas></div>
     </template>
     <a-divider>{{ i18n "pages.inbounds.client" }}</a-divider>
     <template v-for="(row, index) in qrModal.qrcodes">
         <a-tag color="green" style="margin: 10px 0; display: block; text-align: center;">[[ row.remark ]]</a-tag>
-        <canvas @click="copyToClipboard('qrCode-'+index, row.link)" :id="'qrCode-'+index" style="width: 100%; height: 100%;"></canvas>
+        <div class="qr-bg"><canvas @click="copyToClipboard('qrCode-'+index, row.link)" :id="'qrCode-'+index" style="width: 100%; height: 100%;"></canvas></div>
     </template>
 </a-modal>
 

web/html/login.html

@@ -123,8 +123,9 @@
     background-origin: border-box;
     background-clip: padding-box, border-box;
     background-size: 300%;
-    transition: all 0.5s ease;
+    transition: all 0.3s cubic-bezier(.645,.045,.355,1);
     width: 100%;
+    z-index: 1;
   }
   .dark .wave-btn-bg:hover {animation: wave-btn-tara 4s ease infinite;}
   .dark .wave-btn-bg-cl {
@@ -289,7 +290,7 @@
                         </a-form-item>
                         <a-form-item>
                             <a-row justify="center" class="centered">
-                                <div class="wave-btn-bg wave-btn-bg-cl">
+                                <div class="wave-btn-bg wave-btn-bg-cl" :style="loading ? { width: '54px' } : { display: 'inline-block' }">
                                     <a-button class="ant-btn-primary-login" type="primary" :loading="loading" @click="login" :icon="loading ? 'poweroff' : undefined"
                                               :style="loading ? { width: '50px' } : { display: 'inline-block' }">
                                         [[ loading ? '' : '{{ i18n "login" }}' ]]

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

@@ -1,7 +1,7 @@
 {{define "form/streamGRPC"}}
 <a-form :colon="false" :label-col="{ md: {span:6} }" :wrapper-col="{ md: {span:14} }">
     <a-form-item label="Service Name">
-        <a-input v-model.trim="inbound.stream.grpc.serviceName" style="width: 250px;"></a-input>
+        <a-input v-model.trim="inbound.stream.grpc.serviceName"></a-input>
     </a-form-item>
     <a-form-item label="MultiMode">
         <a-switch v-model="inbound.stream.grpc.multiMode"></a-switch>

web/html/xui/form/tls_settings.html

@@ -74,10 +74,10 @@
             </a-form-item>
             <template v-if="cert.useFile">
                 <a-form-item label='{{ i18n "pages.inbounds.publicKeyPath" }}'>
-                    <a-input v-model.trim="cert.certFile" style="width:250px;"></a-input>
+                    <a-input v-model.trim="cert.certFile"></a-input>
                 </a-form-item>
                 <a-form-item label='{{ i18n "pages.inbounds.keyPath" }}'>
-                    <a-input v-model.trim="cert.keyFile" style="width:250px;"></a-input>
+                    <a-input v-model.trim="cert.keyFile"></a-input>
                 </a-form-item>
                 <a-form-item label=" ">
                     <a-button type="primary" icon="import" @click="setDefaultCertData(index)">{{ i18n
@@ -86,10 +86,10 @@
             </template>
             <template v-else>
                 <a-form-item label='{{ i18n "pages.inbounds.publicKeyContent" }}'>
-                    <a-input type="textarea" :rows="3" style="width:250px;" v-model="cert.cert"></a-input>
+                    <a-input type="textarea" :rows="3" v-model="cert.cert"></a-input>
                 </a-form-item>
                 <a-form-item label='{{ i18n "pages.inbounds.keyContent" }}'>
-                    <a-input type="textarea" :rows="3" style="width:250px;" v-model="cert.key"></a-input>
+                    <a-input type="textarea" :rows="3" v-model="cert.key"></a-input>
                 </a-form-item>
             </template>
             <a-form-item label='ocspStapling'>
@@ -125,10 +125,10 @@
             </a-form-item>
             <template v-if="cert.useFile">
                 <a-form-item label='{{ i18n "pages.inbounds.publicKeyPath" }}'>
-                    <a-input v-model.trim="cert.certFile" style="width:250px;"></a-input>
+                    <a-input v-model.trim="cert.certFile"></a-input>
                 </a-form-item>
                 <a-form-item label='{{ i18n "pages.inbounds.keyPath" }}'>
-                    <a-input v-model.trim="cert.keyFile" style="width:250px;"></a-input>
+                    <a-input v-model.trim="cert.keyFile"></a-input>
                 </a-form-item>
                 <a-form-item label=" ">
                     <a-button type="primary" icon="import" @click="setDefaultCertXtls(index)">{{ i18n
@@ -137,10 +137,10 @@
             </template>
             <template v-else>
                 <a-form-item label='{{ i18n "pages.inbounds.publicKeyContent" }}'>
-                    <a-input type="textarea" :rows="3" style="width:250px;" v-model="cert.cert"></a-input>
+                    <a-input type="textarea" :rows="3" v-model="cert.cert"></a-input>
                 </a-form-item>
                 <a-form-item label='{{ i18n "pages.inbounds.keyContent" }}'>
-                    <a-input type="textarea" :rows="3" style="width:250px;" v-model="cert.key"></a-input>
+                    <a-input type="textarea" :rows="3" v-model="cert.key"></a-input>
                 </a-form-item>
             </template>
         </template>
@@ -175,10 +175,10 @@
                     <a-icon @click="inbound.stream.reality.shortIds = RandomUtil.randomShortId()" type="sync"> </a-icon>
                     </a-icon>
             </template>
-            <a-input v-model.trim="inbound.stream.reality.shortIds" style="width:250px"></a-input>
+            <a-input v-model.trim="inbound.stream.reality.shortIds"></a-input>
         </a-form-item>
         <a-form-item label='SpiderX'>
-            <a-input v-model.trim="inbound.stream.reality.settings.spiderX" style="width:250px"></a-input>
+            <a-input v-model.trim="inbound.stream.reality.settings.spiderX"></a-input>
         </a-form-item>
         <a-form-item label='Private Key'>
             <a-input v-model.trim="inbound.stream.reality.privateKey"></a-input>

web/html/xui/inbounds.html

@@ -427,7 +427,7 @@
                                     :columns="isMobile ? innerMobileColumns : innerColumns"
                                     :data-source="getInboundClients(record)"
                                     :pagination=pagination(getInboundClients(record))
-                                    style="margin: -12px 2px -13px;">
+                                    :style="isMobile ? 'margin: -12px 2px -13px;' : 'margin: -12px 22px -13px;'">
                                     {{template "client_table"}}
                                 </a-table>
                             </template>