hyunho/MH-DashBoard-organization
1
0
Fork 0
Code Issues 10 Pull Requests Actions Packages Projects Releases Wiki Activity

로그인 박스 축소 조정

Browse Source
This commit is contained in:
hyunho
2026-03-25 10:59:44 +09:00
parent 3b7ed219df
commit eabadab301
2 changed files with 27 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/public/index.html
View File

@@ -14,7 +14,7 @@
<div class="login-backdrop"> <div class="login-backdrop">
<form id="login-form" class="login-card"> <form id="login-form" class="login-card">
<div class="login-brand"> <div class="login-brand">
<p class="eyebrow">MH Dash Board</p> <p class="eyebrow">GPD/TDC</p>
<h1>MH Dash Board</h1> <h1>MH Dash Board</h1>
</div> </div>

50
frontend/public/styles.css
View File

@@ -72,23 +72,23 @@ a {
} }
.login-card { .login-card {
width: min(1240px, 100%); width: min(640px, 100%);
min-height: 360px; min-height: 210px;
display: grid; display: grid;
grid-template-columns: 1.45fr 0.55fr; grid-template-columns: 1.3fr 0.7fr;
overflow: hidden; overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 28px; border-radius: 22px;
background: rgba(71, 85, 105, 0.34); background: rgba(71, 85, 105, 0.34);
box-shadow: 0 28px 80px rgba(15, 23, 42, 0.28); box-shadow: 0 24px 60px rgba(15, 23, 42, 0.24);
backdrop-filter: blur(18px); backdrop-filter: blur(14px);
} }
.login-brand { .login-brand {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
padding: 56px 52px; padding: 30px 30px;
border-right: 1px solid rgba(255, 255, 255, 0.08); border-right: 1px solid rgba(255, 255, 255, 0.08);
background: background:
linear-gradient(90deg, rgba(15, 23, 42, 0.08), rgba(255, 255, 255, 0.02)), linear-gradient(90deg, rgba(15, 23, 42, 0.08), rgba(255, 255, 255, 0.02)),
@@ -96,43 +96,44 @@ a {
} }
.login-brand .eyebrow { .login-brand .eyebrow {
margin-bottom: 14px; margin-bottom: 10px;
color: rgba(255, 255, 255, 0.72); color: rgba(255, 255, 255, 0.72);
letter-spacing: 0.22em; font-size: 10px;
letter-spacing: 0.18em;
} }
.login-brand h1 { .login-brand h1 {
font-size: clamp(2.4rem, 4.2vw, 3.9rem); font-size: clamp(1.7rem, 3.2vw, 2.5rem);
line-height: 0.95; line-height: 0.96;
letter-spacing: -0.05em; letter-spacing: -0.04em;
color: #f8fafc; color: #f8fafc;
} }
.login-form-wrap { .login-form-wrap {
padding: 46px 30px; padding: 24px 20px;
display: grid; display: grid;
align-content: center; align-content: center;
gap: 14px; gap: 10px;
background: rgba(15, 23, 42, 0.12); background: rgba(15, 23, 42, 0.12);
} }
.login-card label { .login-card label {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 6px; gap: 4px;
font-size: 13px; font-size: 11px;
font-weight: 800; font-weight: 800;
color: rgba(255, 255, 255, 0.9); color: rgba(255, 255, 255, 0.9);
} }
.login-card input { .login-card input {
min-height: 46px; min-height: 34px;
border: 1px solid rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 999px; border-radius: 999px;
padding: 11px 18px; padding: 8px 14px;
background: rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.1);
color: #f8fafc; color: #f8fafc;
font-size: 13px; font-size: 11px;
outline: none; outline: none;
} }
@@ -159,19 +160,20 @@ a {
} }
.login-card button { .login-card button {
margin-top: 4px; margin-top: 2px;
border: none; border: none;
color: #fff; color: #fff;
background: rgba(31, 41, 55, 0.82); background: rgba(31, 41, 55, 0.82);
box-shadow: 0 14px 30px rgba(15, 23, 42, 0.22); box-shadow: 0 14px 30px rgba(15, 23, 42, 0.22);
min-height: 42px; min-height: 34px;
font-size: 13px; border-radius: 999px;
font-size: 11px;
} }
.helper-text { .helper-text {
margin: 0; margin: 0;
min-height: 20px; min-height: 16px;
font-size: 12px; font-size: 10px;
color: rgba(248, 250, 252, 0.8); color: rgba(248, 250, 252, 0.8);
} }