3344/3x-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 99 Wiki Activity

Ultra Dark Theme for 3X-UI (#1871)

Browse Source
This commit is contained in:
Tara Rostami
2024-02-22 22:50:38 +03:30
committed by GitHub
parent fe7a5f1813
commit fc3ea2dd4b
9 changed files with 304 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
web/html/common/qrcode_modal.html
View File

@@ -11,7 +11,7 @@
<a-divider>{{ i18n "pages.settings.subSettings"}}</a-divider>
<canvas @click="copyToClipboard('qrCode-sub',genSubLink(qrModal.client.subId))"
id="qrCode-sub"
style="width: 100%; height: 100%; display: flex; border-radius: 1rem;">
class="qr-bg">
</canvas>
<a-divider>{{ i18n "pages.settings.subSettings"}} Json</a-divider>
<canvas @click="copyToClipboard('qrCode-subJson',genSubJsonLink(qrModal.client.subId))"
@@ -21,10 +21,10 @@
</template>
<a-divider>{{ i18n "pages.inbounds.client" }}</a-divider>
<template v-for="(row, index) in qrModal.qrcodes">
<a-tag color="blue" style="margin: 10px 0; display: block; text-align: center;">[[ row.remark ]]</a-tag>
<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%; display: flex; border-radius: 1rem;"></canvas>
class="qr-bg"></canvas>
</template>
</a-modal>
@@ -110,4 +110,4 @@
});
</script>
{{end}}
{{end}}

4
web/html/common/text_modal.html
View File

@@ -9,7 +9,7 @@
</a-button>
<a-button type="primary" id="copy-btn">{{ i18n "copy" }}</a-button>
</template>
<a-input type="textarea" v-model="txtModal.content"
<a-input style="overflow-y: auto;" type="textarea" v-model="txtModal.content"
:autosize="{ minRows: 10, maxRows: 20}"></a-input>
</a-modal>
@@ -53,4 +53,4 @@
});
</script>
{{end}}
{{end}}

179
web/html/login.html
View File

@@ -2,9 +2,14 @@
<html lang="en">
{{template "head" .}}
<style>
html * {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1 {
text-align: center;
margin: 20px 0 50px 0;
/* margin: 20px 0 50px 0;*/
height: 110px;
}
.ant-btn,
.ant-input {
@@ -31,7 +36,9 @@
}
.title {
font-size: 32px;
font-weight: 600;
}
.title b {
font-weight: bold !important;
}
#app {
overflow: hidden;
@@ -64,10 +71,10 @@
background-color: #0f2d32;
}
.dark #login {
background-color: #151f31;
background-color: #101113;
}
.dark h1 {
color: rgba(255, 255, 255, 0.85);
color: rgba(255, 255, 255);
}
.ant-form-item {
margin-bottom: 16px;
@@ -192,7 +199,7 @@
z-index: -1;
}
.dark .waves-header {
background-color: #101828;
background-color: #0a2227;
}
.waves-inner-header {
height: 50vh;
@@ -247,6 +254,123 @@
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);
}
}
</style>
<body>
<a-layout id="app" v-cloak :class="themeSwitcher.currentTheme">
@@ -269,8 +393,13 @@
<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>
<a-col style="width: 100%;">
<h1 class="title headline zoom">
<span class="words-wrapper">
<b class="is-visible">{{ i18n "pages.login.title" }}</b>
<b>3X-UI</b>
</span>
</h1>
</a-col>
</a-row>
<a-row type="flex" justify="center">
@@ -377,6 +506,42 @@
},
},
});
document.addEventListener("DOMContentLoaded", function() {
var animationDelay = 2000;
initHeadline();
function initHeadline() {
animateHeadline(document.querySelectorAll('.headline'));
}
function animateHeadline(headlines) {
var duration = animationDelay;
headlines.forEach(function(headline) {
setTimeout(function() {
hideWord(headline.querySelector('.is-visible'));
}, duration);
});
}
function hideWord(word) {
var nextWord = takeNext(word);
switchWord(word, nextWord);
setTimeout(function() {
hideWord(nextWord);
}, animationDelay);
}
function takeNext(word) {
return (word.nextElementSibling) ? word.nextElementSibling : word.parentElement.firstElementChild;
}
function switchWord(oldWord, newWord) {
oldWord.classList.remove('is-visible');
oldWord.classList.add('is-hidden');
newWord.classList.remove('is-hidden');
newWord.classList.add('is-visible');
}
});
</script>
</body>
</html>

2
web/html/xui/fakedns_modal.html
View File

@@ -7,7 +7,7 @@
<a-input v-model.trim="fakednsModal.fakeDns.ipPool"></a-input>
</a-form-item>
<a-form-item label='{{ i18n "pages.xray.fakedns.poolSize" }}'>
<a-input type="number" min="1" v-model.trim="fakednsModal.fakeDns.poolSize"></a-input>
<a-input-number style="width: 100%;" type="number" min="1" v-model.trim="fakednsModal.fakeDns.poolSize"></a-input-number>
</a-form-item>
</a-form>
</a-modal>

36
web/html/xui/index.html
View File

@@ -19,12 +19,14 @@
color: hsla(0, 0%, 100%, .65);
}
.ant-tag-df {
color: rgb(0 0 0 / 80%);
.dark .ant-card-hoverable:hover,
.dark .ant-space-item > .ant-tabs:hover {
transform: scale(0.987);
outline-color: #40434d;
}
.dark .ant-tag-df {
color: rgb(255 255 255 / 80%);
.dark .ant-card-bordered {
outline: 2px solid var(--dark-color-background);
}
</style>
@@ -102,8 +104,8 @@
<a-col :sm="24" :lg="12">
<a-card hoverable>
<b>{{ i18n "pages.index.operationHours" }}:</b>
<a-tag class="ant-tag-df">Xray [[ formatSecond(status.appStats.uptime) ]]</a-tag>
<a-tag class="ant-tag-df">OS [[ formatSecond(status.uptime) ]]</a-tag>
<a-tag color="green">Xray [[ formatSecond(status.appStats.uptime) ]]</a-tag>
<a-tag color="green">OS [[ formatSecond(status.uptime) ]]</a-tag>
</a-card>
</a-col>
<a-col :sm="24" :lg="12">
@@ -137,7 +139,7 @@
<a-col :sm="24" :lg="12">
<a-card hoverable>
<b>{{ i18n "pages.index.systemLoad" }}:</b>
<a-tag class="ant-tag-df">
<a-tag color="green">
<a-tooltip>
[[ status.loads[0] ]] | [[ status.loads[1] ]] | [[ status.loads[2] ]]
<template slot="title">
@@ -150,10 +152,10 @@
<a-col :sm="24" :lg="12">
<a-card hoverable>
<b>{{ i18n "usage"}}:</b>
<a-tag class="ant-tag-df">
<a-tag color="green">
RAM [[ sizeFormat(status.appStats.mem) ]]
</a-tag>
<a-tag class="ant-tag-df">
<a-tag color="green">
Threads [[ status.appStats.threads ]]
</a-tag>
</a-card>
@@ -162,7 +164,7 @@
<a-card hoverable>
<a-row>
<a-col :span="12">
<a-tag class="ant-tag-df">
<a-tag>
<a-tooltip>
<a-icon type="global"></a-icon> IPv4
<template slot="title">
@@ -172,7 +174,7 @@
</a-tag>
</a-col>
<a-col :span="12">
<a-tag class="ant-tag-df">
<a-tag>
<a-tooltip>
<a-icon type="global"></a-icon> IPv6
<template slot="title">
@@ -188,7 +190,7 @@
<a-card hoverable>
<a-row>
<a-col :span="12">
<a-tag class="ant-tag-df">
<a-tag>
<a-tooltip>
<a-icon type="swap"></a-icon> TCP: [[ status.tcpCount ]]
<template slot="title">
@@ -198,7 +200,7 @@
</a-tag>
</a-col>
<a-col :span="12">
<a-tag class="ant-tag-df">
<a-tag>
<a-tooltip>
<a-icon type="swap"></a-icon> UDP: [[ status.udpCount ]]
<template slot="title">
@@ -214,7 +216,7 @@
<a-card hoverable>
<a-row>
<a-col :span="12">
<a-tag class="ant-tag-df">
<a-tag>
<a-tooltip>
<a-icon type="arrow-up"></a-icon>
Up: [[ sizeFormat(status.netIO.up) ]]/s
@@ -225,7 +227,7 @@
</a-tag>
</a-col>
<a-col :span="12">
<a-tag class="ant-tag-df">
<a-tag>
<a-tooltip>
<a-icon type="arrow-down"></a-icon>
Down: [[ sizeFormat(status.netIO.down) ]]/s
@@ -242,7 +244,7 @@
<a-card hoverable>
<a-row>
<a-col :span="12">
<a-tag class="ant-tag-df">
<a-tag>
<a-tooltip>
<a-icon type="cloud-upload"></a-icon>
<template slot="title">
@@ -252,7 +254,7 @@
</a-tag>
</a-col>
<a-col :span="12">
<a-tag class="ant-tag-df">
<a-tag>
<a-tooltip>
<a-icon type="cloud-download"></a-icon>
<template slot="title">

8
web/html/xui/settings.html
View File

@@ -95,15 +95,15 @@
</a-alert>
</transition>
<a-space direction="vertical">
<a-card hoverable style="margin-bottom: .5rem;">
<a-row>
<a-col :xs="24" :sm="8" style="padding: 4px;">
<a-card hoverable style="margin-bottom: .5rem; overflow-x: hidden;">
<a-row style="display: flex; flex-wrap: wrap; align-items: center;">
<a-col :xs="24" :sm="10" style="padding: 4px;">
<a-space direction="horizontal">
<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-col>
<a-col :xs="24" :sm="16">
<a-col :xs="24" :sm="14">
<template>
<div>
<a-back-top :target="() => document.getElementById('content-layout')" visibility-height="200">