Optimized Settings UI (#408)

* Update custom.css

* Update setting.html

* Update settings.html

* Update antd.min.css

* Update antd.min.css

* Update settings.html

* Update custom.css

* Update custom.css

* Update antd.min.css

* Update setting.html

* Update custom.css

web/assets/[email protected]/antd.min.css

@@ -1236,18 +1236,18 @@ span.ant-radio+*{padding-right:8px;padding-left:8px}
 .ant-radio-button-wrapper:first-child{border-left:1px solid #d9d9d9;border-radius:4px 0 0 4px}
 .ant-radio-button-wrapper:last-child{border-radius:0 4px 4px 0}
 .ant-radio-button-wrapper:first-child:last-child{border-radius:4px}
-.ant-radio-button-wrapper:hover{position:relative;color:#1890ff}
+.ant-radio-button-wrapper:hover{position:relative;color:#009670}
 .ant-radio-button-wrapper:focus-within{outline:3px solid rgba(24,144,255,.06)}
 .ant-radio-button-wrapper .ant-radio-inner,.ant-radio-button-wrapper input[type=checkbox],.ant-radio-button-wrapper input[type=radio]{width:0;height:0;opacity:0;pointer-events:none}
-.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled){z-index:1;color:#1890ff;background:#fff;border-color:#1890ff;box-shadow:-1px 0 0 0 #1890ff}
-.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):before{background-color:#1890ff!important;opacity:.1}
-.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):first-child{border-color:#1890ff;box-shadow:none!important}
-.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):hover{color:#40a9ff;border-color:#40a9ff;box-shadow:-1px 0 0 0 #40a9ff}
-.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):active{color:#096dd9;border-color:#096dd9;box-shadow:-1px 0 0 0 #096dd9}
+.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled){z-index:1;color:#009670;background:#fff;border-color:#009670;box-shadow:-1px 0 0 0 #009670}
+.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):before{background-color:#009670!important;opacity:.1}
+.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):first-child{border-color:#009670;box-shadow:none!important}
+.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):hover{color:#009670;border-color:#009670;box-shadow:-1px 0 0 0 #009670}
+.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):active{color:#076e54;border-color:#076e54;box-shadow:-1px 0 0 0 #076e54}
 .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):focus-within{outline:3px solid rgba(24,144,255,.06)}
-.ant-radio-group-solid .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled){color:#fff;background:#1890ff;border-color:#1890ff}
-.ant-radio-group-solid .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):hover{color:#fff;background:#40a9ff;border-color:#40a9ff}
-.ant-radio-group-solid .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):active{color:#fff;background:#096dd9;border-color:#096dd9}
+.ant-radio-group-solid .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled){color:#fff;background:#009670;border-color:#009670}
+.ant-radio-group-solid .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):hover{color:#fff;background:#009670;border-color:#009670}
+.ant-radio-group-solid .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):active{color:#fff;background:#076e54;border-color:#076e54}
 .ant-radio-group-solid .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):focus-within{outline:3px solid rgba(24,144,255,.06)}
 .ant-radio-button-wrapper-disabled{cursor:not-allowed}
 .ant-radio-button-wrapper-disabled,.ant-radio-button-wrapper-disabled:first-child,.ant-radio-button-wrapper-disabled:hover{color:rgba(0,0,0,.25);background-color:#f5f5f5;border-color:#d9d9d9}
@@ -1357,7 +1357,7 @@ to{transform:scale(1.6);opacity:0}
 .ant-tabs-vertical.ant-tabs-card.ant-tabs-right .ant-tabs-card-bar.ant-tabs-right-bar .ant-tabs-tab-active{margin-left:-1px;padding-left:18px}
 .ant-tabs .ant-tabs-card-bar.ant-tabs-bottom-bar .ant-tabs-tab{height:auto;border-top:0;border-bottom:1px solid #e8e8e8;border-radius:0 0 4px 4px}
 .ant-tabs .ant-tabs-card-bar.ant-tabs-bottom-bar .ant-tabs-tab-active{padding-top:1px;padding-bottom:0;color:#1890ff}
-.ant-tabs{box-sizing:border-box;margin:0;padding:0;color:rgba(0,0,0,.65);font-size:14px;font-variant:tabular-nums;line-height:1.5;list-style:none;font-feature-settings:"tnum";position:relative;overflow:hidden;zoom:1;border-radius:1.5rem;box-shadow:0 1px 7px -1px #0000005c;transition:all .3s;background-color: white}
+.ant-tabs{box-sizing:border-box;margin:0;padding:0;color:rgba(0,0,0,.65);font-size:14px;font-variant:tabular-nums;line-height:1.5;list-style:none;font-feature-settings:"tnum";position:relative;overflow:hidden;zoom:1;border-radius:1.5rem;/*box-shadow:0 1px 7px -1px #0000005c;*/transition:all .3s;background-color: white}
 .ant-tabs:hover{box-shadow:0 3px 12px -.8px #0000005c}
 .ant-tabs:after,.ant-tabs:before{display:table;content:""}
 .ant-tabs:after{clear:both}
@@ -2980,7 +2980,7 @@ textarea.ant-time-picker-input{max-width:100%;height:auto;min-height:32px;line-h
 .ant-divider,.ant-divider-vertical{position:relative;top:-.06em;display:inline-block;width:1px;height:.9em;margin:0 8px;vertical-align:middle}
 .ant-divider-horizontal{display:block;clear:both;width:100%;min-width:100%;height:1px;margin:24px 0}
 .ant-divider-horizontal.ant-divider-with-text-center,.ant-divider-horizontal.ant-divider-with-text-left,.ant-divider-horizontal.ant-divider-with-text-right{display:table;margin:0 0;color:rgba(0,0,0,.85);font-weight:500;font-size:16px;white-space:nowrap;text-align:center;background:0 0}
-.ant-divider-horizontal.ant-divider-with-text-center:after,.ant-divider-horizontal.ant-divider-with-text-center:before,.ant-divider-horizontal.ant-divider-with-text-left:after,.ant-divider-horizontal.ant-divider-with-text-left:before,.ant-divider-horizontal.ant-divider-with-text-right:after,.ant-divider-horizontal.ant-divider-with-text-right:before{position:relative;top:50%;display:table-cell;width:50%;border-top:1px solid rgb(0 150 112);transform:translateY(50%);content:""}
+.ant-divider-horizontal.ant-divider-with-text-center:after,.ant-divider-horizontal.ant-divider-with-text-center:before,.ant-divider-horizontal.ant-divider-with-text-left:after,.ant-divider-horizontal.ant-divider-with-text-left:before,.ant-divider-horizontal.ant-divider-with-text-right:after,.ant-divider-horizontal.ant-divider-with-text-right:before{position:relative;top:50%;display:table-cell;width:50%;border-top:1px solid rgb(0 150 112 / 50%);transform:translateY(50%);content:""}
 .ant-divider-horizontal.ant-divider-with-text-left .ant-divider-inner-text,.ant-divider-horizontal.ant-divider-with-text-right .ant-divider-inner-text{display:inline-block;padding:0 10px}
 .ant-divider-horizontal.ant-divider-with-text-left:before{top:50%;width:5%}
 .ant-divider-horizontal.ant-divider-with-text-left:after,.ant-divider-horizontal.ant-divider-with-text-right:before{top:50%;width:95%}

web/assets/css/custom.css

@@ -198,7 +198,29 @@ body {
 
 .ant-card-dark:hover {
     border-color: #e8e8e8;
-    box-shadow: 0 1px 10px -1px rgb(76, 88, 126);
+    box-shadow: 0 1px 10px -1px rgb(154 175 238 / 70%);
+}
+
+.ant-setting-textarea {
+    margin-top: 1.5rem;
+    min-height: 300px !important;
+    /*max-height: 800px !important;*/
+}
+
+.ant-card-dark-box-nohover{
+    padding: 0 20px 20px !important;
+    box-shadow: 0 1px 10px -1px rgb(154 175 238 / 0%) !important;
+}
+.ant-card-dark-box-nohover:hover{
+    box-shadow: 0 1px 10px -1px rgb(154 175 238 / 0%) !important;
+    /*background-color: rgb(36 44 58 / 50%);*/
+}
+
+.ant-card-dark-securitybox-nohover{
+    box-shadow: 0 1px 10px -1px rgb(154 175 238 / 0%) !important;
+}
+.ant-card-dark-securitybox-nohover:hover{
+    box-shadow: 0 1px 10px -1px rgb(154 175 238 / 0%) !important;
 }
 
 /* .ant-card-bordered:hover {
@@ -393,7 +415,7 @@ body {
 }
 
 .ant-card-dark .ant-radio-button-wrapper:hover {
-    color: #177ddc;
+    color: #009670;
 }
 
 .ant-card-dark .ant-btn-primary {

web/html/xui/component/setting.html

@@ -1,6 +1,13 @@
 {{define "component/settingListItem"}}
 <a-list-item style="padding: 20px">
-    <a-row>
+    <a-row v-if="type === 'textarea'">
+        <a-col>
+            <a-list-item-meta :title="title" :description="desc"/>
+            <a-textarea class="ant-setting-textarea" :value="value" @input="$emit('input', $event.target.value)" :auto-size="{ minRows: 10 }"></a-textarea>
+            <!--a-textarea :value="value" @input="$emit('input', $event.target.value)" :auto-size="{ minRows: 10, maxRows: 30 }"></a-textarea-->
+        </a-col>
+    </a-row>
+    <a-row v-else>
         <a-col :lg="24" :xl="12">
             <a-list-item-meta :title="title" :description="desc"/>
         </a-col>
@@ -11,9 +18,6 @@
             <template v-else-if="type === 'number'">
                 <a-input-number :value="value" @change="value => $emit('input', value)" :min="min" style="width: 100%;"></a-input-number>
             </template>
-            <template v-else-if="type === 'textarea'">
-                <a-textarea :value="value" @input="$emit('input', $event.target.value)" :auto-size="{ minRows: 10, maxRows: 10 }"></a-textarea>
-            </template>
             <template v-else-if="type === 'switch'">
                 <a-switch :checked="value" @change="value => $emit('input', value)"></a-switch>
             </template>
@@ -29,4 +33,4 @@
         template: `{{template "component/settingListItem"}}`,
     });
 </script>
-{{end}}
+{{end}}

web/html/xui/settings.html

@@ -36,7 +36,7 @@
                         <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-tabs default-active-key="1" :class="themeSwitcher.darkCardClass" >
+                    <a-tabs style="margin:1rem 0.5rem;" default-active-key="1" :class="themeSwitcher.darkCardClass" >
                         <a-tab-pane key="1" tab='{{ i18n "pages.settings.panelSettings"}}'>
                             <a-list item-layout="horizontal" :style="themeSwitcher.textStyle">
                                 <setting-list-item type="text" title='{{ i18n "pages.settings.panelListeningIP"}}' desc='{{ i18n "pages.settings.panelListeningIPDesc"}}' v-model="allSetting.webListen"></setting-list-item>
@@ -75,7 +75,7 @@
                         </a-tab-pane>
 
                         <a-tab-pane key="2" tab='{{ i18n "pages.settings.securitySettings"}}' style="padding: 20px;">
-                            <a-tabs default-active-key="sec-1" :class="themeSwitcher.darkCardClass">
+                            <a-tabs class="ant-card-dark-securitybox-nohover" default-active-key="sec-1" :class="themeSwitcher.darkCardClass">
                                 <a-tab-pane key="sec-1" tab='{{ i18n "pages.settings.security.admin"}}'>
                                     <a-form :style="'padding: 20px;' + themeSwitcher.textStyle">
                                         <a-form-item label='{{ i18n "pages.settings.oldUsername"}}'>
@@ -139,7 +139,7 @@
                                 </a-space>
                                 <a-divider style="padding: 20px;">{{ i18n "pages.settings.templates.title"}} </a-divider>
                                 
-                                <a-tabs default-active-key="tpl-1" :class="themeSwitcher.darkCardClass" style="padding: 20px 20px;">
+                                <a-tabs class="ant-card-dark-box-nohover" default-active-key="tpl-1" :class="themeSwitcher.darkCardClass" style="padding: 20px 20px;">
                                     <a-tab-pane key="tpl-1" tab='{{ i18n "pages.settings.templates.basicTemplate"}}' style="padding-top: 20px;">
                                         <a-collapse>
                                             <a-collapse-panel header='{{ i18n "pages.settings.templates.generalConfigs"}}'>