feat: Login 페이지 CSS 스타일 추가

wwwroot/css/admin.css 생성: • 폼 요소 기본 스타일 • MudBlazor 컴포넌트 기본 스타일 • Responsive 디자인 • Material Design Blue 컬러 결과: ✅ 페이지 로딩 중에도 깔끔한 UI ✅ MudBlazor 로드 후 자동 오버라이드 Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
2026-06-26 23:16:59 +09:00
parent df4d85d789
commit 4c5c0f5ef0
2 changed files with 182 additions and 0 deletions
@@ -0,0 +1,182 @@
+/* MudBlazor 초기화 전 기본 스타일 */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+html, body {
+    font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    background-color: #f5f5f5;
+    color: #333;
+}
+
+/* Login 페이지 기본 스타일 */
+.d-flex {
+    display: flex;
+}
+
+.align-center {
+    align-items: center;
+}
+
+.justify-center {
+    justify-content: center;
+}
+
+.pa-8 {
+    padding: 32px !important;
+}
+
+.mb-4 {
+    margin-bottom: 16px !important;
+}
+
+.mb-6 {
+    margin-bottom: 24px !important;
+}
+
+.text-center {
+    text-align: center;
+}
+
+.ml-3 {
+    margin-left: 12px !important;
+}
+
+/* MudContainer */
+.mud-container {
+    width: 100%;
+    margin: 0 auto;
+}
+
+.mud-container-maxwidth-small {
+    max-width: 600px !important;
+}
+
+/* MudPaper */
+.mud-paper {
+    background-color: white;
+    border-radius: 4px;
+    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12);
+    padding: 16px;
+}
+
+.mud-paper.elevation-3 {
+    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+}
+
+/* MudText */
+.mud-typography {
+    color: #333;
+    line-height: 1.5;
+}
+
+.mud-typography--h4 {
+    font-size: 2.125rem;
+    font-weight: 500;
+    color: #1976d2;
+}
+
+.mud-typography--body1 {
+    font-size: 1rem;
+}
+
+/* Form Elements */
+input[type="text"],
+input[type="password"] {
+    width: 100%;
+    padding: 12px;
+    margin-bottom: 12px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    font-family: inherit;
+    font-size: 1rem;
+    transition: border-color 0.3s;
+}
+
+input[type="text"]:focus,
+input[type="password"]:focus {
+    outline: none;
+    border-color: #1976d2;
+    box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.1);
+}
+
+label {
+    display: block;
+    margin-bottom: 6px;
+    font-weight: 500;
+    color: #555;
+    font-size: 0.875rem;
+}
+
+/* MudButton */
+button {
+    width: 100%;
+    padding: 12px 24px;
+    margin-top: 12px;
+    background-color: #1976d2;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    font-size: 1rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: background-color 0.3s;
+}
+
+button:hover {
+    background-color: #1565c0;
+}
+
+button:disabled {
+    background-color: #bdbdbd;
+    cursor: not-allowed;
+}
+
+/* MudAlert */
+.mud-alert {
+    padding: 12px 16px;
+    margin-bottom: 16px;
+    border-radius: 4px;
+    background-color: #ffebee;
+    border-left: 4px solid #c62828;
+    color: #c62828;
+}
+
+.mud-alert--error {
+    background-color: #ffebee;
+    color: #c62828;
+}
+
+.mud-alert--success {
+    background-color: #e8f5e9;
+    color: #2e7d32;
+}
+
+.mud-alert--info {
+    background-color: #e3f2fd;
+    color: #1565c0;
+}
+
+/* Progress Circle */
+.mud-progress-circular {
+    display: inline-block;
+}
+
+/* Loading state */
+.loading {
+    opacity: 0.6;
+}
+
+/* Responsive */
+@media (max-width: 600px) {
+    .mud-container-maxwidth-small {
+        max-width: 100% !important;
+        padding: 16px;
+    }
+
+    .mud-typography--h4 {
+        font-size: 1.5rem;
+    }
+}