style: improve login form styling with proper text colors and transparency

- MudTextField input fields: white text on semi-transparent background
- Improve readability on dark gradient background
- MudTextField labels: light white text
- MudButton: improved blue primary styling
- Form validation: MudAlert error styling
- CSS enhancements for better contrast

Visual improvements:
 Input field text visibility (black → white)
 Background transparency (opaque → semi-transparent)
 Primary button styling (blue gradient)
 Label and checkbox colors (white text)

Testing:
 Playwright E2E: 1 passed
 API endpoint: 200 OK
 CSS loading: 200 OK (app.css, MudBlazor.min.css)

Screenshots:
- test-results/login-page-full.png (improved styling)
- test-results/login-card-closeup.png (closeup detail)

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
This commit is contained in:
2026-07-05 23:19:25 +09:00
parent c5a1e48313
commit b3c0194778
4 changed files with 207 additions and 0 deletions
@@ -295,3 +295,83 @@ body {
background: white;
}
}
/* =============================================
로그인 페이지 MudTextField 스타일 개선
============================================= */
/* MudTextField 입력 필드 */
.mud-input-slot {
color: #ffffff !important;
background-color: rgba(255, 255, 255, 0.08) !important;
}
.mud-input-slot::placeholder {
color: rgba(255, 255, 255, 0.5) !important;
}
.mud-input-slot:focus {
background-color: rgba(255, 255, 255, 0.12) !important;
border-color: rgba(63, 81, 181, 0.8) !important;
color: #ffffff !important;
}
/* MudTextField 라벨 */
.mud-input-label {
color: rgba(255, 255, 255, 0.8) !important;
}
/* MudTextField 아웃라인 */
.mud-input-outlined {
border-color: rgba(255, 255, 255, 0.3) !important;
}
.mud-input-outlined:hover {
border-color: rgba(255, 255, 255, 0.5) !important;
}
.mud-input-outlined:focus-within {
border-color: rgba(63, 81, 181, 0.8) !important;
}
/* MudCheckBox */
.mud-button-label {
color: rgba(255, 255, 255, 0.9) !important;
}
/* MudButton (로그인) */
.mud-button-filled-primary {
background-color: rgba(63, 81, 181, 0.9) !important;
}
.mud-button-filled-primary:hover {
background-color: rgba(63, 81, 181, 1) !important;
box-shadow: 0 8px 24px rgba(63, 81, 181, 0.4) !important;
}
/* MudAlert (에러) */
.mud-alert {
background-color: rgba(244, 67, 54, 0.15) !important;
color: #ff7675 !important;
}
/* HTML input 요소 */
input[type="text"].login-input,
input[type="password"].login-input {
background-color: rgba(255, 255, 255, 0.08) !important;
color: #ffffff !important;
border-color: rgba(255, 255, 255, 0.3) !important;
}
input[type="text"].login-input::placeholder,
input[type="password"].login-input::placeholder {
color: rgba(255, 255, 255, 0.5) !important;
}
input[type="text"].login-input:focus,
input[type="password"].login-input:focus {
background-color: rgba(255, 255, 255, 0.12) !important;
border-color: rgba(63, 81, 181, 0.8) !important;
color: #ffffff !important;
outline: none !important;
}