## 문제 App.razor에 Bootstrap/MudBlazor CSS 링크 없음 → Admin 페이지가 완전히 스타일 없는 상태 ## 해결 1. App.razor에 필요한 CSS 링크 추가: - Bootstrap 5.3.0 CDN - Material UI 기본 스타일 - Material Icons - admin.css (커스텀 스타일) 2. admin.css 생성: - 색상 변수 정의 - MudBlazor 커스터마이징 - 한국어 폰트 (Noto Sans KR) - 반응형 디자인 Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,65 @@
|
||||
/* TaxBaik Admin - 기본 스타일 */
|
||||
|
||||
:root {
|
||||
--color-primary: #1B4F8A;
|
||||
--color-primary-dark: #133970;
|
||||
--color-accent: #C9A227;
|
||||
--color-cta: #E05A2B;
|
||||
--color-bg: #F7F9FC;
|
||||
--color-text: #1A1A2E;
|
||||
--color-text-muted: #5A6A7A;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Noto Sans KR', sans-serif;
|
||||
color: var(--color-text);
|
||||
background-color: var(--color-bg);
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-family: 'Noto Sans KR', sans-serif;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
/* MudBlazor 커스터마이징 */
|
||||
.mud-appbar {
|
||||
background-color: var(--color-primary) !important;
|
||||
}
|
||||
|
||||
.mud-appbar .mud-button-root {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.mud-button-contained-primary {
|
||||
background-color: var(--color-primary) !important;
|
||||
}
|
||||
|
||||
.mud-button-contained-primary:hover {
|
||||
background-color: var(--color-primary-dark) !important;
|
||||
}
|
||||
|
||||
.mud-button-outlined-primary {
|
||||
color: var(--color-primary) !important;
|
||||
border-color: var(--color-primary) !important;
|
||||
}
|
||||
|
||||
.mud-card {
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/* 테이블 스타일 */
|
||||
.mud-table {
|
||||
font-family: 'Noto Sans KR', sans-serif;
|
||||
}
|
||||
|
||||
/* 폼 요소 */
|
||||
.mud-input-control .mud-input-slot {
|
||||
font-family: 'Noto Sans KR', sans-serif;
|
||||
}
|
||||
|
||||
/* 반응형 */
|
||||
@media (max-width: 768px) {
|
||||
body {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user