gandc/x-ui
1
0
Fork 0
mirror of https://github.com/alireza0/x-ui.git synced 2026-03-14 05:23:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

UI improvements (#708)

Browse Source 
* Improved login page

* Improved login page

* Update inbound_client_table.html

* Update external_proxy.html

* Update custom.css
This commit is contained in:
Tara Rostami
2023-12-06 13:57:20 +03:30
committed by GitHub
parent ed5db9390d
commit 5b20505515
4 changed files with 186 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

172
web/assets/css/custom.css
View File

@@ -741,9 +741,27 @@ style attribute {
border-right-color: #2C3950;
}
.has-warning .ant-input, .has-warning .ant-input:hover {
background-color: #fff6E6;
border-color: #ffd98c;
}
.has-warning .ant-input::placeholder {
color: #faad14;
}
.has-warning .ant-input:not([disabled]):hover {
border-color: #ffd98c;
}
.dark .has-warning .ant-input,
.dark .has-warning .ant-input:hover {
border-color: #faad14;
border-color: #784e1d;
background: rgb(49, 35, 19);
}
.dark .has-warning .ant-input::placeholder {
color:rgb(255 160 49 / 70%);
}
.dark .has-warning .anticon {
@@ -811,3 +829,155 @@ li.ant-select-dropdown-menu-item:empty:after {
font-weight:normal;
color:rgb(0 0 0 / 25%);
}
.dark li.ant-select-dropdown-menu-item:empty:after {
content: "None";
font-weight:normal;
color:rgb(255 255 255 / 30%);
}
.ant-select-dropdown.ant-select-dropdown--multiple .ant-select-dropdown-menu-item:hover .ant-select-selected-icon {
color: rgba(0,0,0,.87)
}
.dark.ant-select-dropdown.ant-select-dropdown--multiple .ant-select-dropdown-menu-item:hover .ant-select-selected-icon {
color: rgb(255, 255, 255)
}
.ant-select-dropdown.ant-select-dropdown--multiple .ant-select-dropdown-menu-item-selected .ant-select-selected-icon,.ant-select-dropdown.ant-select-dropdown--multiple .ant-select-dropdown-menu-item-selected:hover .ant-select-selected-icon {
color: #3c89e8
}
.ant-btn-primary-login {
color: #0e49b5;
background-color: #edf4fa;
border-color: #a9c5e7;
text-shadow: 0 -1px 0 rgba(0,0,0,.12);
box-shadow: none;
width: 100%;
}
.ant-btn-primary-login:focus,
.ant-btn-primary-login:hover {
color: #fff;
background-color: #0c3f9d;
border-color: #0e49b5;
background-image: linear-gradient(
270deg,
rgba(123, 199, 77, 0) 30%,
#2f67c2,
rgba(123, 199, 77, 0) 100%
);
background-repeat: no-repeat;
animation: ma-bg-move ease-in-out 5s infinite;
background-position-x: -500px;
width: 95%;
animation-delay: -.5s;
box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
}
.ant-btn-primary-login.active, .ant-btn-primary-login:active {
color: #fff;
background-color: #04308f;
border-color: #04308f;
}
@keyframes ma-bg-move {
0% {
background-position: -500px 0;
}
50% {
background-position: 1000px 0;
}
100% {
background-position: 1000px 0;
}
}
.wave-btn-bg {
position: relative;
border-radius: 25px;
width: 100%;
}
.dark .wave-btn-bg {
color: #ffffff;
position: relative;
background: #0e49b5;
border: 2px double transparent;
background-origin: border-box;
background-clip: padding-box, border-box;
background-size: 300%;
animation: wave-btn-tara 4s ease infinite;
transition: all 0.5s ease;
width: 100%;
}
.dark .wave-btn-bg-cl {
background-image: linear-gradient(rgb(13 14 33 / 0%), rgb(13 14 33 / 0%)), radial-gradient(circle at left top, #0e49b5, #387eff, #0e49b5) !important;
border-radius: 3em;
}
.dark .wave-btn-bg-cl:hover {
width:95%;
}
.dark .wave-btn-bg-cl:before {
position: absolute;
content: "";
top: -5px;
left: -5px;
bottom: -5px;
right: -5px;
z-index: -1;
background: inherit;
background-size: inherit;
border-radius: 4em;
opacity: 0;
transition: 0.5s;
}
.dark .wave-btn-bg-cl:hover::before {
opacity: 1;
filter: blur(20px);
animation: wave-btn-tara 8s linear infinite;
}
@keyframes wave-btn-tara {
to {
background-position: 300%;
}
}
.dark .ant-btn-primary-login {
font-size: 14px;
color: #ffffff;
text-align: center;
background-image: linear-gradient(rgb(13 14 33 / 45%), rgb(13 14 33 / 35%));
border-radius: 2rem;
border: none;
outline: none;
background-color: transparent;
height: 46px;
position: relative;
white-space: nowrap;
cursor: pointer;
touch-action: manipulation;
padding: 0 15px;
width: 100%;
animation:none;
background-position-x:0;
box-shadow: none;
}
.ant-input-number-focused, .ant-input-number:hover {
background-color: #edf4fa;
}
.ant-select-selection:hover {
background-color: #edf4fa;
}
.dark .ant-input-number-handler:active {
background: #0e49b5;
}

18
web/html/login.html
View File

@@ -102,12 +102,12 @@
<body>
<a-layout id="app" v-cloak :class="themeSwitcher.currentTheme">
<transition name="list" appear>
<a-layout-content class="under">
<a-layout-content class="under" style="min-height: 0;">
<div class='wave'></div>
<div class='wave wave2'></div>
<div class='wave wave3'></div>
<a-row type="flex" justify="center" align="middle" style="height: 100%;">
<a-col :xs="22" :sm="20" :md="14" :lg="10" :xl="6" id="login">
<a-row type="flex" justify="center" align="middle" style="height: 100%; overflow: auto;">
<a-col :xs="22" :sm="20" :md="14" :lg="10" :xl="8" :xxl="6" id="login" style="margin: 3rem 0;">
<a-row type="flex" justify="center">
<a-col>
<h1 class="title">{{ i18n "pages.login.title" }}</h1>
@@ -129,10 +129,12 @@
</a-form-item>
<a-form-item>
<a-row justify="center" class="centered">
<a-button type="primary" :loading="loading" @click="login" :icon="loading ? 'poweroff' : undefined"
:style="loading ? { width: '50px' } : { display: 'block', width: '100%' }">
[[ loading ? '' : '{{ i18n "login" }}' ]]
</a-button>
<div class="wave-btn-bg wave-btn-bg-cl">
<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" }}' ]]
</a-button>
</div>
</a-row>
</a-form-item>
<a-form-item>
@@ -201,4 +203,4 @@
});
</script>
</body>
</html>
</html>

4
web/html/xui/form/stream/external_proxy.html
View File

@@ -5,7 +5,7 @@
<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>
<table width="100%" class="ant-table-tbody" v-if="externalProxy">
<table width="100%" class="ant-table-tbody" v-if="externalProxy" style="margin-bottom:5px">
<tr style="line-height: 40px;">
<td width="100%">
<a-input-group style="margin: 0 5px;" compact v-for="(row, index) in inbound.stream.externalProxy">
@@ -29,4 +29,4 @@
</tr>
</table>
</a-form>
{{end}}
{{end}}

6
web/html/xui/inbound_client_table.html
View File

@@ -20,7 +20,7 @@
ok-text='{{ i18n "reset"}}'
cancel-text='{{ i18n "cancel"}}'>
<a-icon slot="icon" type="question-circle-o" style="color: blue"></a-icon>
<a-icon style="font-size: 24px;" class="normal-icon" type="retweet" v-if="client.email.length > 0"></a-icon>
<a-icon style="font-size: 24px; cursor: pointer;" class="normal-icon" type="retweet" v-if="client.email.length > 0"></a-icon>
</a-popconfirm>
</a-tooltip>
<a-tooltip>
@@ -32,7 +32,7 @@
ok-type="danger"
cancel-text='{{ i18n "cancel"}}'>
<a-icon slot="icon" type="question-circle-o" style="color: #e04141"></a-icon>
<a-icon style="font-size: 24px" class="delete-icon" type="delete" v-if="isRemovable(record.id)"></a-icon>
<a-icon style="font-size: 24px; cursor: pointer;" class="delete-icon" type="delete" v-if="isRemovable(record.id)"></a-icon>
</a-popconfirm>
</a-tooltip>
</template>
@@ -265,4 +265,4 @@
</a-badge>
</a-popover>
</template>
{{end}}
{{end}}