diff options
Diffstat (limited to 'web/html')
| -rw-r--r-- | web/html/inbounds.html | 144 | ||||
| -rw-r--r-- | web/html/index.html | 137 | ||||
| -rw-r--r-- | web/html/login.html | 469 | ||||
| -rw-r--r-- | web/html/settings.html | 61 | ||||
| -rw-r--r-- | web/html/xray.html | 37 |
5 files changed, 46 insertions, 802 deletions
diff --git a/web/html/inbounds.html b/web/html/inbounds.html index 58a4e5a5..54535e46 100644 --- a/web/html/inbounds.html +++ b/web/html/inbounds.html @@ -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> diff --git a/web/html/index.html b/web/html/index.html index 5d5c3b1d..6f691876 100644 --- a/web/html/index.html +++ b/web/html/index.html @@ -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> diff --git a/web/html/login.html b/web/html/login.html index 968aa0bc..b561b732 100644 --- a/web/html/login.html +++ b/web/html/login.html @@ -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" }}' ]] diff --git a/web/html/settings.html b/web/html/settings.html index 3b6e81a1..0c88f518 100644 --- a/web/html/settings.html +++ b/web/html/settings.html @@ -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; - } -
|