revert: 로그인 페이지 게임 에셋 스타일 롤백
비주얼 오버홀에서 적용된 로그인 페이지의 배경 이미지, 카드 프레임, 구분선 이미지를 이전 스타일로 되돌림 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -3,36 +3,20 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
background:
|
background-color: #2E2C2F;
|
||||||
radial-gradient(ellipse at center, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.8) 100%),
|
background-image:
|
||||||
url('/images/bg_login.webp') center/cover no-repeat;
|
radial-gradient(ellipse at 20% 50%, rgba(186, 205, 176, 0.08) 0%, transparent 50%),
|
||||||
background-color: #1a1a1a;
|
radial-gradient(ellipse at 80% 50%, rgba(186, 205, 176, 0.05) 0%, transparent 50%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.login-panel {
|
.login-panel {
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 420px;
|
max-width: 400px;
|
||||||
padding: 48px 40px;
|
padding: 48px 40px;
|
||||||
background: rgba(0, 0, 0, 0.6);
|
background: rgba(255, 255, 255, 0.04);
|
||||||
|
border: 1px solid rgba(186, 205, 176, 0.15);
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
backdrop-filter: blur(12px);
|
backdrop-filter: blur(10px);
|
||||||
overflow: hidden;
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.login-panel::before {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
inset: -8px;
|
|
||||||
background: url('/images/card_frame.webp') center/100% 100% no-repeat;
|
|
||||||
pointer-events: none;
|
|
||||||
z-index: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.login-panel > * {
|
|
||||||
position: relative;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.login-header {
|
.login-header {
|
||||||
@@ -132,15 +116,21 @@
|
|||||||
.login-divider {
|
.login-divider {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
gap: 16px;
|
||||||
margin: 24px 0;
|
margin: 24px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.login-divider-img {
|
.login-divider::before,
|
||||||
width: 100%;
|
.login-divider::after {
|
||||||
max-width: 250px;
|
content: '';
|
||||||
height: 16px;
|
flex: 1;
|
||||||
background: url('/images/divider.webp') center/contain no-repeat;
|
height: 1px;
|
||||||
|
background: rgba(255, 255, 255, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-divider span {
|
||||||
|
font-size: 0.8rem;
|
||||||
|
color: rgba(255, 255, 255, 0.35);
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-ssafy {
|
.btn-ssafy {
|
||||||
@@ -222,11 +212,6 @@
|
|||||||
padding: 32px 20px;
|
padding: 32px 20px;
|
||||||
margin: 0 12px;
|
margin: 0 12px;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
border: 1px solid rgba(186, 205, 176, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.login-panel::before {
|
|
||||||
display: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.game-title {
|
.game-title {
|
||||||
|
|||||||
@@ -36,7 +36,6 @@ export default function LoginPage() {
|
|||||||
<div className="login-page">
|
<div className="login-page">
|
||||||
<div className="login-panel">
|
<div className="login-panel">
|
||||||
<div className="login-header">
|
<div className="login-header">
|
||||||
<img src="/images/logo.webp" alt="One of the Plans" style={{maxWidth: 120, height: 'auto', margin: '0 auto 16px', display: 'block'}} />
|
|
||||||
<h1 className="game-title">One of the plans</h1>
|
<h1 className="game-title">One of the plans</h1>
|
||||||
<p className="game-subtitle">MULTIPLAYER</p>
|
<p className="game-subtitle">MULTIPLAYER</p>
|
||||||
</div>
|
</div>
|
||||||
@@ -73,13 +72,13 @@ export default function LoginPage() {
|
|||||||
{justRegistered && <p className="login-success">회원가입이 완료되었습니다. 로그인해주세요.</p>}
|
{justRegistered && <p className="login-success">회원가입이 완료되었습니다. 로그인해주세요.</p>}
|
||||||
{error && <p id="login-error" className="login-error" role="alert">{error}</p>}
|
{error && <p id="login-error" className="login-error" role="alert">{error}</p>}
|
||||||
|
|
||||||
<button type="submit" className="btn-login btn-game" disabled={loading}>
|
<button type="submit" className="btn-login" disabled={loading}>
|
||||||
{loading ? '로그인 중...' : '로그인'}
|
{loading ? '로그인 중...' : '로그인'}
|
||||||
</button>
|
</button>
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
<div className="login-divider">
|
<div className="login-divider">
|
||||||
<div className="login-divider-img"></div>
|
<span>또는</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<button
|
<button
|
||||||
|
|||||||
Reference in New Issue
Block a user