mirror of
https://github.com/MHSanaei/3x-ui.git
synced 2025-09-19 00:13:03 +00:00
clean html files
Some checks failed
Release 3X-UI / build (386) (push) Has been cancelled
Release 3X-UI / build (amd64) (push) Has been cancelled
Release 3X-UI / build (arm64) (push) Has been cancelled
Release 3X-UI / build (armv5) (push) Has been cancelled
Release 3X-UI / build (armv6) (push) Has been cancelled
Release 3X-UI / build (armv7) (push) Has been cancelled
Release 3X-UI / build (s390x) (push) Has been cancelled
Release 3X-UI / Build for Windows (push) Has been cancelled
Some checks failed
Release 3X-UI / build (386) (push) Has been cancelled
Release 3X-UI / build (amd64) (push) Has been cancelled
Release 3X-UI / build (arm64) (push) Has been cancelled
Release 3X-UI / build (armv5) (push) Has been cancelled
Release 3X-UI / build (armv6) (push) Has been cancelled
Release 3X-UI / build (armv7) (push) Has been cancelled
Release 3X-UI / build (s390x) (push) Has been cancelled
Release 3X-UI / Build for Windows (push) Has been cancelled
move styles to css
This commit is contained in:
mhsanaei
parent
311d11a3c1
commit
5ee62b25ca
6 changed files with 47 additions and 803 deletions
2
web/assets/css/custom.min.css
vendored
2
web/assets/css/custom.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -1,150 +1,8 @@
|
|||
{{ template "page/head_start" .}}
|
||||
<style>
|
||||
.ant-table:not(.ant-table-expanded-row .ant-table) {
|
||||
outline: 1px solid #f0f0f0;
|
||||
outline-offset: -1px;
|
||||
border-radius: 1rem;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
.dark .ant-table:not(.ant-table-expanded-row .ant-table) {
|
||||
outline-color: var(--dark-color-table-ring);
|
||||
}
|
||||
.ant-table .ant-table-content .ant-table-scroll .ant-table-body {
|
||||
overflow-y: hidden;
|
||||
}
|
||||
.ant-table .ant-table-content .ant-table-tbody tr:last-child .ant-table-wrapper {
|
||||
margin:-10px 22px !important;
|
||||
}
|
||||
.ant-table .ant-table-content .ant-table-tbody tr:last-child .ant-table-wrapper .ant-table {
|
||||
border-bottom-left-radius: 1rem;
|
||||
border-bottom-right-radius: 1rem;
|
||||
}
|
||||
.ant-table .ant-table-content .ant-table-tbody tr:last-child tr:last-child td {
|
||||
border-bottom-color: transparent;
|
||||
}
|
||||
.ant-table .ant-table-tbody tr:last-child.ant-table-expanded-row .ant-table-wrapper .ant-table-tbody>tr:last-child>td:first-child {
|
||||
border-bottom-left-radius: 6px;
|
||||
}
|
||||
.ant-table .ant-table-tbody tr:last-child.ant-table-expanded-row .ant-table-wrapper .ant-table-tbody>tr:last-child>td:last-child {
|
||||
border-bottom-right-radius: 6px;
|
||||
}
|
||||
@media (min-width: 769px) {
|
||||
.ant-layout-content {
|
||||
margin: 24px 16px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.ant-card-body {
|
||||
padding: .5rem;
|
||||
}
|
||||
.ant-table .ant-table-content .ant-table-tbody tr:last-child .ant-table-wrapper {
|
||||
margin:-10px 2px !important;
|
||||
}
|
||||
}
|
||||
.dark .ant-switch-small:not(.ant-switch-checked) {
|
||||
background-color: var(--dark-color-surface-100) !important;
|
||||
}
|
||||
.ant-custom-popover-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin: 5px 0;
|
||||
}
|
||||
.ant-col-sm-24 {
|
||||
margin: 0.5rem -2rem 0.5rem 2rem;
|
||||
}
|
||||
tr.hideExpandIcon .ant-table-row-expand-icon {
|
||||
display: none;
|
||||
}
|
||||
.infinite-tag {
|
||||
padding: 0 5px;
|
||||
border-radius: 2rem;
|
||||
min-width: 50px;
|
||||
min-height: 22px;
|
||||
}
|
||||
.infinite-bar .ant-progress-inner .ant-progress-bg {
|
||||
background-color: #F2EAF1;
|
||||
border: #D5BED2 solid 1px;
|
||||
}
|
||||
.dark .infinite-bar .ant-progress-inner .ant-progress-bg {
|
||||
background-color: #7a316f !important;
|
||||
border: #7a316f solid 1px;
|
||||
}
|
||||
.ant-collapse {
|
||||
margin: 5px 0;
|
||||
}
|
||||
.info-large-tag {
|
||||
max-width: 200px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.client-comment {
|
||||
font-size: 12px;
|
||||
opacity: 0.75;
|
||||
cursor: help;
|
||||
}
|
||||
.client-email {
|
||||
font-weight: 500;
|
||||
}
|
||||
.client-popup-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
}
|
||||
.online-animation .ant-badge-status-dot {
|
||||
animation: onlineAnimation 1.2s linear infinite;
|
||||
}
|
||||
@keyframes onlineAnimation {
|
||||
0%,
|
||||
50%,
|
||||
100% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
10% {
|
||||
transform: scale(1.5);
|
||||
opacity: .2;
|
||||
}
|
||||
}
|
||||
.tr-table-box {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.tr-table-rt {
|
||||
flex-basis: 70px;
|
||||
min-width: 70px;
|
||||
text-align: end;
|
||||
}
|
||||
.tr-table-lt {
|
||||
flex-basis: 70px;
|
||||
min-width: 70px;
|
||||
text-align: start;
|
||||
}
|
||||
.tr-table-bar {
|
||||
flex-basis: 160px;
|
||||
min-width: 60px;
|
||||
}
|
||||
.tr-infinity-ch {
|
||||
font-size: 14pt;
|
||||
max-height: 24px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
.ant-table-expanded-row .ant-table .ant-table-body {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
.ant-table-expanded-row .ant-table-tbody>tr>td {
|
||||
padding: 10px 2px;
|
||||
}
|
||||
.ant-table-expanded-row .ant-table-thead>tr>th {
|
||||
padding: 12px 2px;
|
||||
}
|
||||
</style>
|
||||
{{ template "page/head_end" .}}
|
||||
|
||||
{{ template "page/body_start" .}}
|
||||
<a-layout id="app" v-cloak :class="themeSwitcher.currentTheme">
|
||||
<a-layout id="app" v-cloak :class="themeSwitcher.currentTheme + ' inbounds-page'">
|
||||
<a-sidebar></a-sidebar>
|
||||
<a-layout id="content-layout">
|
||||
<a-layout-content>
|
||||
|
|
|
|||
|
|
@ -1,73 +1,4 @@
|
|||
{{ template "page/head_start" .}}
|
||||
<style>
|
||||
@media (min-width: 769px) {
|
||||
.ant-layout-content {
|
||||
margin: 24px 16px;
|
||||
}
|
||||
}
|
||||
.ant-card-dark h2 {
|
||||
color: var(--dark-color-text-primary);
|
||||
}
|
||||
.ant-backup-list-item {
|
||||
gap: 10px;
|
||||
}
|
||||
.ant-version-list-item {
|
||||
--padding: 12px;
|
||||
padding: var(--padding) !important;
|
||||
gap: var(--padding);
|
||||
}
|
||||
.dark .ant-version-list-item svg{
|
||||
color: var(--dark-color-text-primary);
|
||||
}
|
||||
.dark .ant-backup-list-item svg,
|
||||
.dark .ant-badge-status-text,
|
||||
.dark .ant-card-extra {
|
||||
color: var(--dark-color-text-primary);
|
||||
}
|
||||
.dark .ant-card-actions>li {
|
||||
color: rgba(255, 255, 255, 0.55);
|
||||
}
|
||||
.dark .ant-radio-inner {
|
||||
background-color: var(--dark-color-surface-100);
|
||||
border-color: var(--dark-color-surface-600);
|
||||
}
|
||||
.dark .ant-radio-checked .ant-radio-inner {
|
||||
border-color: var(--color-primary-100);
|
||||
}
|
||||
.dark .ant-backup-list,
|
||||
.dark .ant-version-list,
|
||||
.dark .ant-card-actions,
|
||||
.dark .ant-card-actions>li:not(:last-child) {
|
||||
border-color: var(--dark-color-stroke);
|
||||
}
|
||||
.ant-card-actions {
|
||||
background: transparent;
|
||||
}
|
||||
.ip-hidden {
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
filter: blur(10px);
|
||||
}
|
||||
.running-animation .ant-badge-status-dot {
|
||||
animation: runningAnimation 1.2s linear infinite;
|
||||
}
|
||||
.running-animation .ant-badge-status-processing:after {
|
||||
border-color: var(--color-primary-100);
|
||||
}
|
||||
@keyframes runningAnimation {
|
||||
0%,
|
||||
50%,
|
||||
100% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
10% {
|
||||
transform: scale(1.5);
|
||||
opacity: .2;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
{{ template "page/head_end" .}}
|
||||
|
||||
{{ template "page/body_start" .}}
|
||||
|
|
@ -77,7 +8,7 @@
|
|||
<a-layout-content>
|
||||
<a-spin :spinning="loadingStates.spinning" :delay="200" :tip="loadingTip">
|
||||
<transition name="list" appear>
|
||||
<a-alert type="error" v-if="showAlert && loadingStates.fetched" :style="{ marginBottom: '10px' }"
|
||||
<a-alert type="error" v-if="showAlert && loadingStates.fetched" class="mb-10"
|
||||
message='{{ i18n "secAlertTitle" }}'
|
||||
color="red"
|
||||
description='{{ i18n "secAlertSsl" }}'
|
||||
|
|
@ -87,7 +18,7 @@
|
|||
<transition name="list" appear>
|
||||
<template>
|
||||
<a-row v-if="!loadingStates.fetched">
|
||||
<a-card :style="{ textAlign: 'center', padding: '30px 0', marginTop: '10px', background: 'transparent', border: 'none' }">
|
||||
<a-card class="card-placeholder text-center">
|
||||
<a-spin tip='{{ i18n "loading" }}'></a-spin>
|
||||
</a-card>
|
||||
</a-row>
|
||||
|
|
@ -97,7 +28,7 @@
|
|||
<a-row :gutter="[0, isMobile ? 16 : 0]">
|
||||
<a-col :sm="24" :md="12">
|
||||
<a-row>
|
||||
<a-col :span="12" :style="{ textAlign: 'center' }">
|
||||
<a-col :span="12" class="text-center">
|
||||
<a-progress type="dashboard" status="normal"
|
||||
:stroke-color="status.cpu.color"
|
||||
:percent="status.cpu.percent"></a-progress>
|
||||
|
|
@ -112,7 +43,7 @@
|
|||
</a-tooltip>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="12" :style="{ textAlign: 'center' }">
|
||||
<a-col :span="12" class="text-center">
|
||||
<a-progress type="dashboard" status="normal"
|
||||
:stroke-color="status.mem.color"
|
||||
:percent="status.mem.percent"></a-progress>
|
||||
|
|
@ -124,7 +55,7 @@
|
|||
</a-col>
|
||||
<a-col :sm="24" :md="12">
|
||||
<a-row>
|
||||
<a-col :span="12" :style="{ textAlign: 'center' }">
|
||||
<a-col :span="12" class="text-center">
|
||||
<a-progress type="dashboard" status="normal"
|
||||
:stroke-color="status.swap.color"
|
||||
:percent="status.swap.percent"></a-progress>
|
||||
|
|
@ -132,7 +63,7 @@
|
|||
<b>{{ i18n "pages.index.swap" }}:</b> [[ SizeFormatter.sizeFormat(status.swap.current) ]] / [[ SizeFormatter.sizeFormat(status.swap.total) ]]
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="12" :style="{ textAlign: 'center' }">
|
||||
<a-col :span="12" class="text-center">
|
||||
<a-progress type="dashboard" status="normal"
|
||||
:stroke-color="status.disk.color"
|
||||
:percent="status.disk.percent"></a-progress>
|
||||
|
|
@ -167,31 +98,31 @@
|
|||
<span>{{ i18n "pages.index.xrayErrorPopoverTitle" }}</span>
|
||||
</a-col>
|
||||
<a-col>
|
||||
<a-icon type="bars" :style="{ cursor: 'pointer', float: 'right' }" @click="openLogs()"></a-icon>
|
||||
<a-icon type="bars" class="cursor-pointer float-right" @click="openLogs()"></a-icon>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</span>
|
||||
<template slot="content">
|
||||
<span :style="{ maxWidth: '400px' }" v-for="line in status.xray.errorMsg.split('\n')">[[ line ]]</span>
|
||||
<span class="max-w-400" v-for="line in status.xray.errorMsg.split('\n')">[[ line ]]</span>
|
||||
</template>
|
||||
<a-badge :text="status.xray.stateMsg" :color="status.xray.color"/>
|
||||
</a-popover>
|
||||
</template>
|
||||
</template>
|
||||
<template #actions>
|
||||
<a-space v-if="app.ipLimitEnable" direction="horizontal" @click="openXrayLogs()" :style="{ justifyContent: 'center' }">
|
||||
<a-space v-if="app.ipLimitEnable" direction="horizontal" @click="openXrayLogs()" class="jc-center">
|
||||
<a-icon type="bars"></a-icon>
|
||||
<span v-if="!isMobile">{{ i18n "pages.index.logs" }}</span>
|
||||
</a-space>
|
||||
<a-space direction="horizontal" @click="stopXrayService" :style="{ justifyContent: 'center' }">
|
||||
<a-space direction="horizontal" @click="stopXrayService" class="jc-center">
|
||||
<a-icon type="poweroff"></a-icon>
|
||||
<span v-if="!isMobile">{{ i18n "pages.index.stopXray" }}</span>
|
||||
</a-space>
|
||||
<a-space direction="horizontal" @click="restartXrayService" :style="{ justifyContent: 'center' }">
|
||||
<a-space direction="horizontal" @click="restartXrayService" class="jc-center">
|
||||
<a-icon type="reload"></a-icon>
|
||||
<span v-if="!isMobile">{{ i18n "pages.index.restartXray" }}</span>
|
||||
</a-space>
|
||||
<a-space direction="horizontal" @click="openSelectV2rayVersion" :style="{ justifyContent: 'center' }">
|
||||
<a-space direction="horizontal" @click="openSelectV2rayVersion" class="jc-center">
|
||||
<a-icon type="tool"></a-icon>
|
||||
<span v-if="!isMobile">
|
||||
[[ status.xray.version != 'Unknown' ? `v${status.xray.version}` : '{{ i18n "pages.index.xraySwitch" }}' ]]
|
||||
|
|
@ -203,15 +134,15 @@
|
|||
<a-col :sm="24" :lg="12">
|
||||
<a-card title='{{ i18n "menu.link" }}' hoverable>
|
||||
<template #actions>
|
||||
<a-space direction="horizontal" @click="openLogs()" :style="{ justifyContent: 'center' }">
|
||||
<a-space direction="horizontal" @click="openLogs()" class="jc-center">
|
||||
<a-icon type="bars"></a-icon>
|
||||
<span v-if="!isMobile">{{ i18n "pages.index.logs" }}</span>
|
||||
</a-space>
|
||||
<a-space direction="horizontal" @click="openConfig" :style="{ justifyContent: 'center' }">
|
||||
<a-space direction="horizontal" @click="openConfig" class="jc-center">
|
||||
<a-icon type="control"></a-icon>
|
||||
<span v-if="!isMobile">{{ i18n "pages.index.config" }}</span>
|
||||
</a-space>
|
||||
<a-space direction="horizontal" @click="openBackup" :style="{ justifyContent: 'center' }">
|
||||
<a-space direction="horizontal" @click="openBackup" class="jc-center">
|
||||
<a-icon type="cloud-server"></a-icon>
|
||||
<span v-if="!isMobile">{{ i18n "pages.index.backup" }}</span>
|
||||
</a-space>
|
||||
|
|
@ -314,7 +245,7 @@
|
|||
<template #title>
|
||||
{{ i18n "pages.index.toggleIpVisibility" }}
|
||||
</template>
|
||||
<a-icon :type="showIp ? 'eye' : 'eye-invisible'" :style="{ fontSize: '1rem' }" @click="showIp = !showIp"></a-icon>
|
||||
<a-icon :type="showIp ? 'eye' : 'eye-invisible'" class="fs-1rem" @click="showIp = !showIp"></a-icon>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
<a-row :class="showIp ? 'ip-visible' : 'ip-hidden'" :gutter="isMobile ? [8,8] : 0">
|
||||
|
|
@ -365,8 +296,8 @@
|
|||
@ok="() => versionModal.visible = false" :class="themeSwitcher.currentTheme" footer="">
|
||||
<a-collapse default-active-key="1">
|
||||
<a-collapse-panel key="1" header='Xray'>
|
||||
<a-alert type="warning" :style="{ marginBottom: '12px', width: '100%' }" message='{{ i18n "pages.index.xraySwitchClickDesk" }}' show-icon></a-alert>
|
||||
<a-list class="ant-version-list" bordered :style="{ width: '100%' }">
|
||||
<a-alert type="warning" class="mb-12 w-100" message='{{ i18n "pages.index.xraySwitchClickDesk" }}' show-icon></a-alert>
|
||||
<a-list class="ant-version-list w-100" bordered>
|
||||
<a-list-item class="ant-version-list-item" v-for="version, index in versionModal.versions">
|
||||
<a-tag :color="index % 2 == 0 ? 'purple' : 'green'">[[ version ]]</a-tag>
|
||||
<a-radio :class="themeSwitcher.currentTheme" :checked="version === `v${status.xray.version}`" @click="switchV2rayVersion(version)"></a-radio>
|
||||
|
|
@ -374,15 +305,13 @@
|
|||
</a-list>
|
||||
</a-collapse-panel>
|
||||
<a-collapse-panel key="2" header='Geofiles'>
|
||||
<a-list class="ant-version-list" bordered :style="{ width: '100%' }">
|
||||
<a-list class="ant-version-list w-100" bordered>
|
||||
<a-list-item class="ant-version-list-item" v-for="file, index in ['geosite.dat', 'geoip.dat', 'geosite_IR.dat', 'geoip_IR.dat', 'geosite_RU.dat', 'geoip_RU.dat']">
|
||||
<a-tag :color="index % 2 == 0 ? 'purple' : 'green'">[[ file ]]</a-tag>
|
||||
<a-icon type="reload" @click="updateGeofile(file)" :style="{ marginRight: '8px' }"/>
|
||||
<a-icon type="reload" @click="updateGeofile(file)" class="mr-8"/>
|
||||
</a-list-item>
|
||||
</a-list>
|
||||
<div style="margin-top: 5px; display: flex; justify-content: flex-end;">
|
||||
<a-button @click="updateGeofile('')">{{ i18n "pages.index.geofilesUpdateAll" }}</a-button>
|
||||
</div>
|
||||
<div class="mt-5 d-flex justify-end"><a-button @click="updateGeofile('')">{{ i18n "pages.index.geofilesUpdateAll" }}</a-button></div>
|
||||
</a-collapse-panel>
|
||||
</a-collapse>
|
||||
</a-modal>
|
||||
|
|
@ -394,15 +323,15 @@
|
|||
{{ i18n "pages.index.logs" }}
|
||||
<a-icon :spin="logModal.loading"
|
||||
type="sync"
|
||||
:style="{ verticalAlign: 'middle', marginLeft: '10px' }"
|
||||
class="va-middle ml-10"
|
||||
:disabled="logModal.loading"
|
||||
@click="openLogs()">
|
||||
</a-icon>
|
||||
</template>
|
||||
<a-form layout="inline">
|
||||
<a-form-item :style="{ marginRight: '0.5rem' }">
|
||||
<a-form-item class="mr-05">
|
||||
<a-input-group compact>
|
||||
<a-select size="small" v-model="logModal.rows" :style="{ width: '70px' }"
|
||||
<a-select size="small" v-model="logModal.rows" class="w-70"
|
||||
@change="openLogs()" :dropdown-class-name="themeSwitcher.currentTheme">
|
||||
<a-select-option value="10">10</a-select-option>
|
||||
<a-select-option value="20">20</a-select-option>
|
||||
|
|
@ -410,7 +339,7 @@
|
|||
<a-select-option value="100">100</a-select-option>
|
||||
<a-select-option value="500">500</a-select-option>
|
||||
</a-select>
|
||||
<a-select size="small" v-model="logModal.level" :style="{ width: '95px' }"
|
||||
<a-select size="small" v-model="logModal.level" class="w-95"
|
||||
@change="openLogs()" :dropdown-class-name="themeSwitcher.currentTheme">
|
||||
<a-select-option value="debug">Debug</a-select-option>
|
||||
<a-select-option value="info">Info</a-select-option>
|
||||
|
|
@ -423,11 +352,11 @@
|
|||
<a-form-item>
|
||||
<a-checkbox v-model="logModal.syslog" @change="openLogs()">SysLog</a-checkbox>
|
||||
</a-form-item>
|
||||
<a-form-item :style="{ float: 'right' }">
|
||||
<a-form-item style="float: right;">
|
||||
<a-button type="primary" icon="download" @click="FileManager.downloadTextFile(logModal.logs?.join('\n'), 'x-ui.log')"></a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
<div class="ant-input" :style="{ height: 'auto', maxHeight: '500px', overflow: 'auto', marginTop: '0.5rem' }" v-html="logModal.formattedLogs"></div>
|
||||
<div class="ant-input log-container" v-html="logModal.formattedLogs"></div>
|
||||
</a-modal>
|
||||
<a-modal id="xraylog-modal"
|
||||
v-model="xraylogModal.visible"
|
||||
|
|
@ -439,15 +368,15 @@
|
|||
{{ i18n "pages.index.logs" }}
|
||||
<a-icon :spin="xraylogModal.loading"
|
||||
type="sync"
|
||||
:style="{ verticalAlign: 'middle', marginLeft: '10px' }"
|
||||
class="va-middle ml-10"
|
||||
:disabled="xraylogModal.loading"
|
||||
@click="openXrayLogs()">
|
||||
</a-icon>
|
||||
</template>
|
||||
<a-form layout="inline">
|
||||
<a-form-item :style="{ marginRight: '0.5rem' }">
|
||||
<a-form-item class="mr-05">
|
||||
<a-input-group compact>
|
||||
<a-select size="small" v-model="xraylogModal.rows" :style="{ width: '70px' }"
|
||||
<a-select size="small" v-model="xraylogModal.rows" class="w-70"
|
||||
@change="openXrayLogs()" :dropdown-class-name="themeSwitcher.currentTheme">
|
||||
<a-select-option value="10">10</a-select-option>
|
||||
<a-select-option value="20">20</a-select-option>
|
||||
|
|
@ -465,11 +394,11 @@
|
|||
<a-checkbox v-model="xraylogModal.showBlocked" @change="openXrayLogs()">Blocked</a-checkbox>
|
||||
<a-checkbox v-model="xraylogModal.showProxy" @change="openXrayLogs()">Proxy</a-checkbox>
|
||||
</a-form-item>
|
||||
<a-form-item :style="{ float: 'right' }">
|
||||
<a-form-item style="float: right;">
|
||||
<a-button type="primary" icon="download" @click="FileManager.downloadTextFile(xraylogModal.logs?.join('\n'), 'x-ui.log')"></a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
<div class="ant-input" :style="{ height: 'auto', maxHeight: '500px', overflow: 'auto', marginTop: '0.5rem' }" v-html="xraylogModal.formattedLogs"></div>
|
||||
<div class="ant-input log-container" v-html="xraylogModal.formattedLogs"></div>
|
||||
</a-modal>
|
||||
<a-modal id="backup-modal"
|
||||
v-model="backupModal.visible"
|
||||
|
|
@ -477,7 +406,7 @@
|
|||
:closable="true"
|
||||
footer=""
|
||||
:class="themeSwitcher.currentTheme">
|
||||
<a-list class="ant-backup-list" bordered :style="{ width: '100%' }">
|
||||
<a-list class="ant-backup-list w-100" bordered>
|
||||
<a-list-item class="ant-backup-list-item">
|
||||
<a-list-item-meta>
|
||||
<template #title>{{ i18n "pages.index.exportDatabase" }}</template>
|
||||
|
|
|
|||
|
|
@ -1,456 +1,10 @@
|
|||
{{ template "page/head_start" .}}
|
||||
<style>
|
||||
html * {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
/*margin: 20px 0 50px 0;*/
|
||||
height: 110px;
|
||||
}
|
||||
|
||||
.ant-form-item-children .ant-btn,
|
||||
.ant-input {
|
||||
height: 50px;
|
||||
border-radius: 30px;
|
||||
}
|
||||
|
||||
.ant-input-group-addon {
|
||||
border-radius: 0 30px 30px 0;
|
||||
width: 50px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.ant-input-affix-wrapper .ant-input-prefix {
|
||||
left: 23px;
|
||||
}
|
||||
|
||||
.ant-input-affix-wrapper .ant-input:not(:first-child) {
|
||||
padding-left: 50px;
|
||||
}
|
||||
|
||||
.centered {
|
||||
display: flex;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 2rem;
|
||||
margin-block-end: 2rem;
|
||||
}
|
||||
|
||||
.title b {
|
||||
font-weight: bold !important;
|
||||
}
|
||||
|
||||
#app {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#login {
|
||||
animation: charge 0.5s both;
|
||||
background-color: #fff;
|
||||
border-radius: 2rem;
|
||||
padding: 4rem 3rem;
|
||||
transition: all 0.3s;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
}
|
||||
|
||||
#login:hover {
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
|
||||
}
|
||||
|
||||
@keyframes charge {
|
||||
from {
|
||||
transform: translateY(5rem);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.under {
|
||||
background-color: #c7ebe2;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.dark .under {
|
||||
background-color: var(--dark-color-login-wave);
|
||||
}
|
||||
|
||||
.dark #login {
|
||||
background-color: var(--dark-color-surface-100);
|
||||
}
|
||||
|
||||
.dark h1 {
|
||||
color: rgba(255, 255, 255);
|
||||
}
|
||||
|
||||
.ant-btn-primary-login {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.ant-btn-primary-login:focus,
|
||||
.ant-btn-primary-login:hover {
|
||||
color: #fff;
|
||||
background-color: #006655;
|
||||
border-color: #006655;
|
||||
background-image: linear-gradient(270deg,
|
||||
rgba(123, 199, 77, 0) 30%,
|
||||
#009980,
|
||||
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: -0.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: #006655;
|
||||
border-color: #006655;
|
||||
}
|
||||
|
||||
@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%;
|
||||
transition: all 0.3s cubic-bezier(.645, .045, .355, 1);
|
||||
}
|
||||
|
||||
.dark .wave-btn-bg {
|
||||
color: #fff;
|
||||
position: relative;
|
||||
background-color: #0a7557;
|
||||
border: 2px double transparent;
|
||||
background-origin: border-box;
|
||||
background-clip: padding-box, border-box;
|
||||
background-size: 300%;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.dark .wave-btn-bg:hover {
|
||||
animation: wave-btn-tara 4s ease infinite;
|
||||
}
|
||||
|
||||
.dark .wave-btn-bg-cl {
|
||||
background-image: linear-gradient(rgba(13, 14, 33, 0), rgba(13, 14, 33, 0)),
|
||||
radial-gradient(circle at left top, #006655, #009980, #006655) !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: #fff;
|
||||
text-align: center;
|
||||
background-image: linear-gradient(rgba(13, 14, 33, 0.45),
|
||||
rgba(13, 14, 33, 0.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;
|
||||
}
|
||||
|
||||
.waves-header {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background-color: #dbf5ed;
|
||||
color: white;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.dark .waves-header {
|
||||
background-color: var(--dark-color-login-background);
|
||||
}
|
||||
|
||||
.waves-inner-header {
|
||||
height: 50vh;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.waves {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 15vh;
|
||||
margin-bottom: -8px;
|
||||
/*Fix for safari gap*/
|
||||
min-height: 100px;
|
||||
max-height: 150px;
|
||||
}
|
||||
|
||||
.parallax>use {
|
||||
animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
|
||||
}
|
||||
|
||||
.dark .parallax>use {
|
||||
fill: var(--dark-color-login-wave);
|
||||
}
|
||||
|
||||
.parallax>use:nth-child(1) {
|
||||
animation-delay: -2s;
|
||||
animation-duration: 4s;
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
.parallax>use:nth-child(2) {
|
||||
animation-delay: -3s;
|
||||
animation-duration: 7s;
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.parallax>use:nth-child(3) {
|
||||
animation-delay: -4s;
|
||||
animation-duration: 10s;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.parallax>use:nth-child(4) {
|
||||
animation-delay: -5s;
|
||||
animation-duration: 13s;
|
||||
}
|
||||
|
||||
@keyframes move-forever {
|
||||
0% {
|
||||
transform: translate3d(-90px, 0, 0);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translate3d(85px, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.waves {
|
||||
height: 40px;
|
||||
min-height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.words-wrapper {
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.words-wrapper b {
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.words-wrapper b.is-visible {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.headline.zoom .words-wrapper {
|
||||
-webkit-perspective: 300px;
|
||||
-moz-perspective: 300px;
|
||||
perspective: 300px;
|
||||
}
|
||||
|
||||
.headline {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.headline.zoom b {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.headline.zoom b.is-visible {
|
||||
opacity: 1;
|
||||
-webkit-animation: zoom-in 0.8s;
|
||||
-moz-animation: zoom-in 0.8s;
|
||||
animation: cubic-bezier(0.215, 0.610, 0.355, 1.000) zoom-in 0.8s;
|
||||
}
|
||||
|
||||
.headline.zoom b.is-hidden {
|
||||
-webkit-animation: zoom-out 0.8s;
|
||||
-moz-animation: zoom-out 0.8s;
|
||||
animation: cubic-bezier(0.215, 0.610, 0.355, 1.000) zoom-out 0.4s;
|
||||
}
|
||||
|
||||
@-webkit-keyframes zoom-in {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translateZ(100px);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
-webkit-transform: translateZ(0);
|
||||
}
|
||||
}
|
||||
|
||||
@-moz-keyframes zoom-in {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-moz-transform: translateZ(100px);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
-moz-transform: translateZ(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes zoom-in {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translateZ(100px);
|
||||
-moz-transform: translateZ(100px);
|
||||
-ms-transform: translateZ(100px);
|
||||
-o-transform: translateZ(100px);
|
||||
transform: translateZ(100px);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
-webkit-transform: translateZ(0);
|
||||
-moz-transform: translateZ(0);
|
||||
-ms-transform: translateZ(0);
|
||||
-o-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes zoom-out {
|
||||
0% {
|
||||
opacity: 1;
|
||||
-webkit-transform: translateZ(0);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translateZ(-100px);
|
||||
}
|
||||
}
|
||||
|
||||
@-moz-keyframes zoom-out {
|
||||
0% {
|
||||
opacity: 1;
|
||||
-moz-transform: translateZ(0);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
-moz-transform: translateZ(-100px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes zoom-out {
|
||||
0% {
|
||||
opacity: 1;
|
||||
-webkit-transform: translateZ(0);
|
||||
-moz-transform: translateZ(0);
|
||||
-ms-transform: translateZ(0);
|
||||
-o-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translateZ(-100px);
|
||||
-moz-transform: translateZ(-100px);
|
||||
-ms-transform: translateZ(-100px);
|
||||
-o-transform: translateZ(-100px);
|
||||
transform: translateZ(-100px);
|
||||
}
|
||||
}
|
||||
|
||||
.setting-section {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
padding: 22px;
|
||||
}
|
||||
|
||||
.ant-space-item .ant-switch {
|
||||
margin: 2px 0 4px;
|
||||
}
|
||||
</style>
|
||||
{{ template "page/head_end" .}}
|
||||
|
||||
{{ template "page/body_start" .}}
|
||||
<a-layout id="app" v-cloak :class="themeSwitcher.currentTheme">
|
||||
<a-layout id="app" v-cloak :class="themeSwitcher.currentTheme + ' login-app'">
|
||||
<transition name="list" appear>
|
||||
<a-layout-content class="under" :style="{ minHeight: '0' }">
|
||||
<a-layout-content class="under min-h-100vh">
|
||||
<div class="waves-header">
|
||||
<div class="waves-inner-header"></div>
|
||||
<svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
|
|
@ -466,11 +20,10 @@
|
|||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<a-row type="flex" justify="center" align="middle"
|
||||
:style="{ height: '100%', overflow: 'auto', overflowX: 'hidden' }">
|
||||
<a-col :xs="22" :sm="12" :md="10" :lg="8" :xl="6" :xxl="5" id="login" :style="{ margin: '3rem 0' }">
|
||||
<a-row type="flex" justify="center" align="middle" class="h-100 overflow-hidden-auto">
|
||||
<a-col :xs="22" :sm="12" :md="10" :lg="8" :xl="6" :xxl="5" id="login" class="my-3rem">
|
||||
<template v-if="!loadingStates.fetched">
|
||||
<div :style="{ textAlign: 'center' }">
|
||||
<div class="text-center">
|
||||
<a-spin size="large" />
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -482,7 +35,7 @@
|
|||
<a-space direction="vertical" :size="10">
|
||||
<a-theme-switch-login></a-theme-switch-login>
|
||||
<span>{{ i18n "pages.settings.language" }}</span>
|
||||
<a-select ref="selectLang" :style="{ width: '100%' }" v-model="lang"
|
||||
<a-select ref="selectLang" class="w-100" v-model="lang"
|
||||
@change="LanguageManager.setLanguage(lang)" :dropdown-class-name="themeSwitcher.currentTheme">
|
||||
<a-select-option :value="l.value" label="English" v-for="l in LanguageManager.supportedLanguages">
|
||||
<span role="img" aria-label="l.name" v-text="l.icon"></span>
|
||||
|
|
@ -511,26 +64,24 @@
|
|||
<a-form-item>
|
||||
<a-input autocomplete="username" name="username" v-model.trim="user.username"
|
||||
placeholder='{{ i18n "username" }}' autofocus required>
|
||||
<a-icon slot="prefix" type="user" :style="{ fontSize: '1rem' }"></a-icon>
|
||||
<a-icon slot="prefix" type="user" class="fs-1rem"></a-icon>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<a-input-password autocomplete="password" name="password" v-model.trim="user.password"
|
||||
placeholder='{{ i18n "password" }}' required>
|
||||
<a-icon slot="prefix" type="lock" :style="{ fontSize: '1rem' }"></a-icon>
|
||||
<a-icon slot="prefix" type="lock" class="fs-1rem"></a-icon>
|
||||
</a-input-password>
|
||||
</a-form-item>
|
||||
<a-form-item v-if="twoFactorEnable">
|
||||
<a-input autocomplete="one-time-code" name="twoFactorCode" v-model.trim="user.twoFactorCode"
|
||||
placeholder='{{ i18n "twoFactorCode" }}' required>
|
||||
<a-icon slot="prefix" type="key" :style="{ fontSize: '1rem' }"></a-icon>
|
||||
<a-icon slot="prefix" type="key" class="fs-1rem"></a-icon>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<a-row justify="center" class="centered">
|
||||
<div
|
||||
:style="{ height: '50px', marginTop: '1rem', ...loadingStates.spinning ? { width: '52px' } : { display: 'inline-block' } }"
|
||||
class="wave-btn-bg wave-btn-bg-cl">
|
||||
<div class="wave-btn-bg wave-btn-bg-cl h-50px mt-1rem" :style="loadingStates.spinning ? 'width: 52px' : 'display: inline-block'">
|
||||
<a-button class="ant-btn-primary-login" type="primary" :loading="loadingStates.spinning"
|
||||
:icon="loadingStates.spinning ? 'poweroff' : undefined" html-type="submit">
|
||||
[[ loadingStates.spinning ? '' : '{{ i18n "login" }}' ]]
|
||||
|
|
|
|||
|
|
@ -1,67 +1,8 @@
|
|||
{{ template "page/head_start" .}}
|
||||
<style>
|
||||
@media (min-width: 769px) {
|
||||
.ant-layout-content {
|
||||
margin: 24px 16px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.ant-tabs-nav .ant-tabs-tab {
|
||||
margin: 0;
|
||||
padding: 12px .5rem;
|
||||
}
|
||||
}
|
||||
.ant-tabs-bar {
|
||||
margin: 0;
|
||||
}
|
||||
.ant-list-item {
|
||||
display: block;
|
||||
}
|
||||
.alert-msg {
|
||||
color: rgb(194, 117, 18);
|
||||
font-weight: normal;
|
||||
font-size: 16px;
|
||||
padding: .5rem 1rem;
|
||||
text-align: center;
|
||||
background: rgb(255 145 0 / 15%);
|
||||
margin: 1.5rem 2.5rem 0rem;
|
||||
border-radius: .5rem;
|
||||
transition: all 0.5s;
|
||||
animation: signal 3s cubic-bezier(0.18, 0.89, 0.32, 1.28) infinite;
|
||||
}
|
||||
.alert-msg:hover {
|
||||
cursor: default;
|
||||
transition-duration: .3s;
|
||||
animation: signal 0.9s ease infinite;
|
||||
}
|
||||
@keyframes signal {
|
||||
0% {
|
||||
box-shadow: 0 0 0 0 rgba(194, 118, 18, 0.5);
|
||||
}
|
||||
|
||||
50% {
|
||||
box-shadow: 0 0 0 6px rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
100% {
|
||||
box-shadow: 0 0 0 6px rgba(0, 0, 0, 0);
|
||||
}
|
||||
}
|
||||
.alert-msg>i {
|
||||
color: inherit;
|
||||
font-size: 24px;
|
||||
}
|
||||
.dark .ant-input-password-icon {
|
||||
color: var(--dark-color-text-primary);
|
||||
}
|
||||
.ant-collapse-content-box .ant-alert {
|
||||
margin-block-end: 12px;
|
||||
}
|
||||
</style>
|
||||
{{ template "page/head_end" .}}
|
||||
|
||||
{{ template "page/body_start" .}}
|
||||
<a-layout id="app" v-cloak :class="themeSwitcher.currentTheme">
|
||||
<a-layout id="app" v-cloak :class="themeSwitcher.currentTheme + ' settings-page'">
|
||||
<a-sidebar></a-sidebar>
|
||||
<a-layout id="content-layout">
|
||||
<a-layout-content>
|
||||
|
|
|
|||
|
|
@ -3,45 +3,10 @@
|
|||
<link rel="stylesheet" href="{{ .base_path }}assets/codemirror/fold/foldgutter.css">
|
||||
<link rel="stylesheet" href="{{ .base_path }}assets/codemirror/xq.min.css?{{ .cur_ver }}">
|
||||
<link rel="stylesheet" href="{{ .base_path }}assets/codemirror/lint/lint.css">
|
||||
<style>
|
||||
@media (min-width: 769px) {
|
||||
.ant-layout-content {
|
||||
margin: 24px 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.ant-tabs-nav .ant-tabs-tab {
|
||||
margin: 0;
|
||||
padding: 12px .5rem;
|
||||
}
|
||||
|
||||
.ant-table-thead>tr>th,
|
||||
.ant-table-tbody>tr>td {
|
||||
padding: 10px 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-tabs-bar {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.ant-list-item {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.ant-list-item>li {
|
||||
padding: 10px 20px !important;
|
||||
}
|
||||
|
||||
.ant-collapse-content-box .ant-alert {
|
||||
margin-block-end: 12px;
|
||||
}
|
||||
</style>
|
||||
{{ template "page/head_end" .}}
|
||||
|
||||
{{ template "page/body_start" .}}
|
||||
<a-layout id="app" v-cloak :class="themeSwitcher.currentTheme">
|
||||
<a-layout id="app" v-cloak :class="themeSwitcher.currentTheme + ' xray-page'">
|
||||
<a-sidebar></a-sidebar>
|
||||
<a-layout id="content-layout">
|
||||
<a-layout-content>
|
||||
|
|
|
|||
Loading…
Reference in a new issue