kangwan/20260512-skg-tk
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

auto-save 2026-05-15 16:33 (~4)

Browse Source
This commit is contained in:
kang
2026-05-15 16:33:17 +08:00
parent ecc5894e52
commit 1336fc6ad2
4 changed files with 158 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

139
web/app/globals.css
View File

@@ -205,46 +205,104 @@
transform: translateX(-50%) scale(0.74);
transform-origin: bottom center;
}
.login-character-base {
position: absolute;
left: 28px;
right: 18px;
bottom: -12px;
height: 28px;
border-radius: 999px;
background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.48), rgba(0, 0, 0, 0) 72%);
filter: blur(1px);
}
.login-figure {
position: absolute;
bottom: 0;
transform-origin: bottom center;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.16);
transition:
transform 0.7s cubic-bezier(0.4, 0, 0.2, 1),
height 0.55s cubic-bezier(0.4, 0, 0.2, 1),
opacity 0.2s ease;
will-change: transform;
filter: drop-shadow(0 28px 34px rgba(0, 0, 0, 0.32));
filter: drop-shadow(0 28px 34px rgba(0, 0, 0, 0.34));
}
.login-figure::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(105deg, rgba(255, 255, 255, 0.16), transparent 34%, rgba(0, 0, 0, 0.12));
background:
linear-gradient(105deg, rgba(255, 255, 255, 0.2), transparent 30%, rgba(0, 0, 0, 0.15)),
linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 28%);
pointer-events: none;
}
.login-figure--purple {
left: 70px;
width: 180px;
height: 400px;
.login-figure__rim {
position: absolute;
inset: 8px;
z-index: 1;
background: #6c3ff5;
border-radius: 0;
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: inherit;
opacity: 0.85;
pointer-events: none;
}
.login-figure__shine {
position: absolute;
z-index: 1;
left: 18%;
top: 18%;
width: 42%;
height: 11%;
border-radius: 999px;
background: rgba(255, 255, 255, 0.22);
transform: rotate(-14deg);
pointer-events: none;
}
.login-figure__panel {
position: absolute;
z-index: 1;
border: 1px solid rgba(255, 255, 255, 0.13);
background: rgba(255, 255, 255, 0.1);
pointer-events: none;
}
.login-figure__signal {
position: absolute;
z-index: 2;
display: flex;
gap: 6px;
pointer-events: none;
}
.login-figure__signal span {
width: 7px;
height: 7px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.56);
box-shadow: 0 0 12px rgba(255, 255, 255, 0.24);
}
.login-figure--purple {
left: 72px;
width: 176px;
height: 392px;
z-index: 1;
background: linear-gradient(165deg, #9b7bff 0%, #6c3ff5 46%, #3e1eb8 100%);
border-radius: 22px 22px 8px 8px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.26);
}
.login-figure--black {
left: 240px;
width: 120px;
height: 310px;
z-index: 2;
background: #2d2d2d;
border-radius: 0;
background: linear-gradient(165deg, #34343a 0%, #202126 48%, #111217 100%);
border-radius: 18px 18px 6px 6px;
border-color: rgba(170, 160, 255, 0.18);
}
.login-figure--orange {
left: 0;
width: 240px;
height: 150px;
z-index: 3;
background: #ff9b6b;
background: linear-gradient(160deg, #ffb27f 0%, #ff8f61 56%, #dc6f48 100%);
border-radius: 120px 120px 0 0;
}
.login-figure--yellow {
@@ -252,9 +310,66 @@
width: 140px;
height: 230px;
z-index: 4;
background: #e8d754;
background: linear-gradient(160deg, #fff17a 0%, #e8d754 58%, #bfa73a 100%);
border-radius: 70px 70px 0 0;
}
.login-figure--purple .login-figure__panel {
left: 22px;
bottom: 88px;
width: 36px;
height: 152px;
border-radius: 999px;
}
.login-figure--purple .login-figure__signal {
left: 26px;
bottom: 46px;
}
.login-figure--black .login-figure__panel {
right: 16px;
bottom: 40px;
width: 12px;
height: 190px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.08);
}
.login-figure--black .login-figure__signal {
right: 18px;
top: 88px;
flex-direction: column;
}
.login-figure--orange .login-figure__panel {
left: 42px;
bottom: 24px;
width: 88px;
height: 18px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.16);
}
.login-figure--orange .login-figure__signal {
right: 54px;
bottom: 28px;
}
.login-figure--yellow .login-figure__panel {
left: 24px;
bottom: 44px;
width: 92px;
height: 24px;
border-radius: 999px;
background: rgba(45, 45, 45, 0.08);
border-color: rgba(45, 45, 45, 0.12);
}
.login-figure--yellow .login-figure__shine {
background: rgba(255, 255, 255, 0.3);
}
.login-figure--yellow .login-figure__signal {
left: 34px;
top: 124px;
}
.login-figure--yellow .login-figure__signal span,
.login-figure--orange .login-figure__signal span {
background: rgba(45, 45, 45, 0.36);
box-shadow: none;
}
.login-eyes {
position: absolute;
z-index: 2;