shileiye/Y-Panel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI improvements (#1813)

Browse Source
This commit is contained in:
Tara Rostami
2024-02-17 19:52:23 +03:30
committed by GitHub
parent bb9d00a0b3
commit 73718a5dc5
18 changed files with 590 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/html/login.html
+13 -8
View File
@@ -31,7 +31,7 @@
}
.title {
font-size: 32px;
font-weight: bold;
font-weight: 600;
}
#app {
overflow: hidden;
@@ -204,7 +204,7 @@
position: relative;
width: 100%;
height: 15vh;
margin-bottom: -5px; /*Fix for safari gap*/
margin-bottom: -8px; /*Fix for safari gap*/
min-height: 100px;
max-height: 150px;
}
@@ -212,23 +212,27 @@
animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
}
.dark .parallax > use {
fill: rgb(10 117 87 / 20%);
fill: #0f2d32;
}
.parallax > use:nth-child(1) {
animation-delay: -2s;
animation-duration: 7s;
animation-duration: 4s;
opacity: 0.2;
}
.parallax > use:nth-child(2) {
animation-delay: -3s;
animation-duration: 10s;
animation-duration: 7s;
opacity: 0.4;
}
.parallax > use:nth-child(3) {
animation-delay: -4s;
animation-duration: 13s;
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);
@@ -255,9 +259,10 @@
<path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
</defs>
<g class="parallax">
<use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(0, 135, 113, 0.08)" />
<use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(0, 135, 113, 0.08)" />
<use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(0, 135, 113, 0.08)" />
<use xlink:href="#gentle-wave" x="48" y="7" fill="rgba(0, 135, 113, 0.08)" />
<use xlink:href="#gentle-wave" x="48" y="7" fill="#c7ebe2" />
</g>
</svg>
</div>
@@ -290,7 +295,7 @@
</a-form-item>
<a-form-item>
<a-row justify="center" class="centered">
<div class="wave-btn-bg wave-btn-bg-cl" :style="loading ? { width: '54px' } : { display: 'inline-block' }">
<div class="wave-btn-bg wave-btn-bg-cl" :style="loading ? { width: '52px' } : { display: 'inline-block' }">
<a-button class="ant-btn-primary-login" type="primary" :loading="loading" @click="login" :icon="loading ? 'poweroff' : undefined">
[[ loading ? '' : '{{ i18n "login" }}' ]]
</a-button>