홈과 관리자 로그인 화면 테마 및 제목 정리
This commit is contained in:
+100
-115
@@ -221,126 +221,111 @@ textarea:focus-visible {
|
||||
Login Page Styles
|
||||
============================================================================ */
|
||||
|
||||
.admin-login-page.mud-container {
|
||||
.admin-login-page {
|
||||
min-height: 100vh;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
padding: 24px;
|
||||
background:
|
||||
radial-gradient(circle at top left, rgba(200, 157, 110, 0.18), transparent 36%),
|
||||
radial-gradient(circle at bottom right, rgba(46, 92, 78, 0.12), transparent 32%),
|
||||
linear-gradient(180deg, #f9f7f3 0%, #f3ede2 100%);
|
||||
}
|
||||
|
||||
html.admin-login-route body {
|
||||
background:
|
||||
radial-gradient(circle at top left, rgba(200, 157, 110, 0.18), transparent 36%),
|
||||
radial-gradient(circle at bottom right, rgba(46, 92, 78, 0.12), transparent 32%),
|
||||
linear-gradient(180deg, #f9f7f3 0%, #f3ede2 100%);
|
||||
}
|
||||
|
||||
.admin-login-card {
|
||||
width: min(440px, 100%);
|
||||
padding: 28px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.admin-login-brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.admin-brand-mark {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 16px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
|
||||
color: #fff;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 800;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.admin-brand-title {
|
||||
font-size: 1.15rem;
|
||||
font-weight: 800;
|
||||
color: var(--color-text);
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.admin-brand-subtitle {
|
||||
margin-top: 2px;
|
||||
color: var(--color-text-light);
|
||||
font-size: 0.92rem;
|
||||
}
|
||||
|
||||
.admin-login-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.admin-field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.admin-field-label {
|
||||
font-size: 0.92rem;
|
||||
font-weight: 700;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.admin-login-remember {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 0.95rem;
|
||||
color: var(--color-text-light);
|
||||
}
|
||||
|
||||
.admin-inline-alert {
|
||||
padding: 12px 14px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid rgba(198, 40, 40, 0.2);
|
||||
background: rgba(198, 40, 40, 0.08);
|
||||
color: var(--color-danger);
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.admin-login-submit {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.admin-login-page.mud-container-maxwidth-small {
|
||||
max-width: 480px !important;
|
||||
}
|
||||
|
||||
.admin-login-page .mud-paper {
|
||||
background-color: var(--bg-primary);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--shadow-md);
|
||||
padding: var(--space-8);
|
||||
}
|
||||
|
||||
.admin-login-page .mud-paper.elevation-3 {
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
.admin-login-page .mud-typography {
|
||||
color: var(--text-primary);
|
||||
line-height: var(--line-height-normal);
|
||||
}
|
||||
|
||||
.admin-login-page .mud-typography--h4 {
|
||||
font-size: var(--font-size-3xl);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
color: var(--primary-color);
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
|
||||
.admin-login-page .mud-typography--body1 {
|
||||
font-size: var(--font-size-base);
|
||||
}
|
||||
|
||||
.admin-login-page input[type="text"],
|
||||
.admin-login-page input[type="password"] {
|
||||
width: 100%;
|
||||
padding: var(--space-3) var(--space-4);
|
||||
margin-bottom: var(--space-4);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--radius-md);
|
||||
font-family: inherit;
|
||||
font-size: var(--font-size-base);
|
||||
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
|
||||
background-color: var(--bg-primary);
|
||||
color: var(--text-primary);
|
||||
min-height: 44px;
|
||||
}
|
||||
|
||||
.admin-login-page input[type="text"]:focus,
|
||||
.admin-login-page input[type="password"]:focus {
|
||||
outline: none;
|
||||
border-color: var(--primary-color);
|
||||
box-shadow: 0 0 0 3px var(--primary-light);
|
||||
}
|
||||
|
||||
.admin-login-page label {
|
||||
display: block;
|
||||
margin-bottom: var(--space-2);
|
||||
font-weight: var(--font-weight-medium);
|
||||
color: var(--text-primary);
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
|
||||
.admin-login-page button {
|
||||
width: 100%;
|
||||
padding: var(--space-3) var(--space-6);
|
||||
margin-top: var(--space-4);
|
||||
background-color: var(--primary-color);
|
||||
color: var(--primary-contrast);
|
||||
border: none;
|
||||
border-radius: var(--radius-md);
|
||||
font-size: var(--font-size-base);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
cursor: pointer;
|
||||
transition: background-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
|
||||
min-height: 44px;
|
||||
}
|
||||
|
||||
.admin-login-page button:hover {
|
||||
background-color: var(--primary-dark);
|
||||
box-shadow: var(--shadow-md);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.admin-login-page button:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.admin-login-page button:disabled {
|
||||
background-color: var(--text-disabled);
|
||||
.admin-login-submit:disabled {
|
||||
opacity: 0.7;
|
||||
cursor: not-allowed;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.admin-login-page .mud-alert {
|
||||
padding: var(--space-3) var(--space-4);
|
||||
margin-bottom: var(--space-4);
|
||||
border-radius: var(--radius-md);
|
||||
border-left: 4px solid transparent;
|
||||
}
|
||||
|
||||
.admin-login-page .mud-alert--error {
|
||||
background-color: var(--error-light);
|
||||
color: var(--error-dark);
|
||||
border-left-color: var(--error-color);
|
||||
}
|
||||
|
||||
.admin-login-page .mud-alert--success {
|
||||
background-color: var(--success-light);
|
||||
color: var(--success-dark);
|
||||
border-left-color: var(--success-color);
|
||||
}
|
||||
|
||||
.admin-login-page .mud-alert--info {
|
||||
background-color: var(--info-light);
|
||||
color: var(--info-dark);
|
||||
border-left-color: var(--info-color);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/* Reconnect Modal */
|
||||
|
||||
Reference in New Issue
Block a user