From 640ea96ae7be1c0d1503c5a6731dbf19ab4778b5 Mon Sep 17 00:00:00 2001 From: kjh2064 Date: Sun, 28 Jun 2026 10:01:19 +0900 Subject: [PATCH] refactor: redesign admin.css to work with MudBlazor without conflicts - Convert .admin-metric-grid to CSS Grid (grid-template-columns: repeat(auto-fit)) - Add flexbox layout to .admin-metric-card for proper content distribution - Remove all MudBlazor component direct styling (MudGrid, MudItem, MudPaper) - Focus only on custom admin-* classes - Fix metric cards layout (4-column desktop, responsive mobile) - Improve typography and spacing hierarchy - Add proper !important only where necessary for class overrides Co-Authored-By: Claude Sonnet 4.6 --- TaxBaik.Web/wwwroot/css/admin.css | 227 ++++++++++++++++-------------- 1 file changed, 121 insertions(+), 106 deletions(-) diff --git a/TaxBaik.Web/wwwroot/css/admin.css b/TaxBaik.Web/wwwroot/css/admin.css index 08060bd..25d5b44 100644 --- a/TaxBaik.Web/wwwroot/css/admin.css +++ b/TaxBaik.Web/wwwroot/css/admin.css @@ -1,4 +1,10 @@ -/* MudBlazor 초기화 전 기본 스타일 */ +/* ============================================================================ + Admin Layout & Dashboard Styles + - Integrates with MudBlazor without overriding Mud components + - Focuses on custom admin-* and accent-* classes only + ============================================================================ */ + +/* Global Reset */ * { margin: 0; padding: 0; @@ -11,7 +17,7 @@ html, body { color: #333; } -/* Login 페이지 기본 스타일 */ +/* Utility Classes */ .d-flex { display: flex; } @@ -24,6 +30,10 @@ html, body { justify-content: center; } +.justify-space-between { + justify-content: space-between; +} + .pa-8 { padding: 32px !important; } @@ -36,6 +46,10 @@ html, body { margin-bottom: 24px !important; } +.mt-4 { + margin-top: 16px !important; +} + .text-center { text-align: center; } @@ -44,7 +58,18 @@ html, body { margin-left: 12px !important; } -/* Login page scoped fallback styles. Keep these scoped so they do not override MudBlazor globally. */ +.cursor-pointer { + cursor: pointer; +} + +.font-weight-bold { + font-weight: 600 !important; +} + +/* ============================================================================ + Login Page Styles + ============================================================================ */ + .admin-login-page.mud-container { width: 100%; margin: 0 auto; @@ -80,7 +105,6 @@ html, body { font-size: 1rem; } -/* Form Elements */ .admin-login-page input[type="text"], .admin-login-page input[type="password"] { width: 100%; @@ -108,7 +132,6 @@ html, body { font-size: 0.875rem; } -/* Login button fallback. Do not apply this to all admin buttons. */ .admin-login-page button { width: 100%; padding: 12px 24px; @@ -132,7 +155,6 @@ html, body { cursor: not-allowed; } -/* MudAlert */ .admin-login-page .mud-alert { padding: 12px 16px; margin-bottom: 16px; @@ -157,16 +179,15 @@ html, body { color: #1565c0; } -/* Progress Circle */ .admin-login-page .mud-progress-circular { display: inline-block; } -/* Loading state */ .loading { opacity: 0.6; } +/* Reconnect Modal */ .admin-reconnect-modal { display: none; } @@ -202,7 +223,10 @@ html, body { color: #64748b; } -/* Admin Shell & Layout */ +/* ============================================================================ + Admin Shell (Main Layout) + ============================================================================ */ + .admin-shell { display: flex; flex-direction: column; @@ -267,12 +291,12 @@ html, body { .admin-nav .mud-nav-link, .admin-nav .mud-nav-group-header { - margin: 4px 8px; - border-radius: 8px; + margin: 4px 8px !important; + border-radius: 8px !important; } .admin-nav .mud-nav-link.active { - background-color: #e3f2fd; + background-color: #e3f2fd !important; } .admin-drawer-footer { @@ -294,45 +318,58 @@ html, body { width: 100%; } +/* ============================================================================ + Dashboard Page Styles + ============================================================================ */ + /* Page Header */ .admin-page-hero { - display: flex !important; - justify-content: space-between !important; - align-items: flex-end !important; - gap: 24px !important; - margin-bottom: 32px !important; - padding-bottom: 24px !important; - border-bottom: 1px solid #e0e0e0 !important; + display: flex; + justify-content: space-between; + align-items: center; + gap: 24px; + margin-bottom: 32px; + padding-bottom: 24px; + border-bottom: 1px solid #e0e0e0; +} + +.admin-page-hero > div { + flex: 1; } .admin-eyebrow { - display: block !important; - color: #1976d2 !important; - font-weight: 600 !important; - text-transform: uppercase !important; - font-size: 0.75rem !important; - letter-spacing: 0.5px !important; - margin-bottom: 4px !important; + display: block; + color: #1976d2; + font-weight: 600; + text-transform: uppercase; + font-size: 0.75rem; + letter-spacing: 0.5px; + margin-bottom: 4px; } .admin-page-title { - display: block !important; - color: #1a1a1a !important; - font-weight: 600 !important; - margin-bottom: 8px !important; + display: block; + color: #1a1a1a; + font-weight: 600; + margin-bottom: 8px; + font-size: 1.75rem; } .admin-page-subtitle { - display: block !important; - color: #666 !important; - font-size: 0.95rem !important; + display: block; + color: #666; + font-size: 0.95rem; } -/* Metrics Grid */ +/* Metrics Grid - CSS Grid Layout */ .admin-metric-grid { - margin-bottom: 32px; + display: grid !important; + grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important; + gap: 16px !important; + margin-bottom: 32px !important; } +/* Metric Card - Customization for MudPaper */ .admin-metric-card { padding: 20px !important; border-radius: 8px !important; @@ -340,7 +377,10 @@ html, body { border: 1px solid #e0e0e0 !important; transition: all 0.2s ease !important; cursor: pointer !important; - display: block !important; + display: flex !important; + flex-direction: column !important; + justify-content: space-between !important; + min-height: 140px !important; } .admin-metric-card:hover { @@ -349,73 +389,34 @@ html, body { transform: translateY(-2px) !important; } -.admin-metric-card .mud-typography-caption { - display: block; - color: #999; - font-size: 0.75rem; - text-transform: uppercase; - letter-spacing: 0.5px; - margin-bottom: 12px; -} - -.admin-metric-card .mud-typography-h3 { - font-weight: 700; - color: #1a1a1a; - margin-bottom: 8px; -} - -.admin-metric-card .mud-typography-body2 { - color: #666; - font-size: 0.85rem; -} - +/* Metric Card Accent Colors */ .accent-blue { background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%) !important; border-color: #90caf9 !important; } -.accent-blue .mud-typography--h3, -.accent-blue .mud-typography-h3 { - color: #1565c0 !important; -} - .accent-amber { background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%) !important; border-color: #ffcc80 !important; } -.accent-amber .mud-typography--h3, -.accent-amber .mud-typography-h3 { - color: #e65100 !important; -} - .accent-slate { background: linear-gradient(135deg, #eceff1 0%, #cfd8dc 100%) !important; border-color: #b0bec5 !important; } -.accent-slate .mud-typography--h3, -.accent-slate .mud-typography-h3 { - color: #455a64 !important; -} - .accent-green { background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%) !important; border-color: #81c784 !important; } -.accent-green .mud-typography--h3, -.accent-green .mud-typography-h3 { - color: #2e7d32 !important; -} - -/* Surfaces */ +/* Surfaces & Containers */ .admin-surface { - padding: 24px; - border-radius: 8px; - background-color: #fff; - border: 1px solid #e0e0e0; - margin-bottom: 24px; + padding: 24px !important; + border-radius: 8px !important; + background-color: #fff !important; + border: 1px solid #e0e0e0 !important; + margin-bottom: 24px !important; } .admin-section-header { @@ -428,21 +429,10 @@ html, body { border-bottom: 1px solid #f0f0f0; } -.admin-section-header > div { +.admin-section-header > div:first-child { flex: 1; } -.admin-section-header .mud-typography-h6 { - color: #1a1a1a; - font-weight: 600; - margin-bottom: 4px; -} - -.admin-section-header .mud-typography-body2 { - color: #666; - font-size: 0.9rem; -} - /* Tables */ .admin-table { width: 100%; @@ -488,16 +478,14 @@ html, body { } .admin-table .mud-chip-small { - height: 24px; - font-size: 0.75rem; + height: 24px !important; + font-size: 0.75rem !important; } -/* Cursor utilities */ -.cursor-pointer { - cursor: pointer; -} +/* ============================================================================ + Responsive Design + ============================================================================ */ -/* Responsive */ @media (max-width: 960px) { .admin-drawer { width: 64px; @@ -515,6 +503,10 @@ html, body { .admin-section-header { flex-direction: column; } + + .admin-metric-grid { + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important; + } } @media (max-width: 600px) { @@ -531,15 +523,38 @@ html, body { padding: 16px; } - .admin-metric-card { - padding: 16px; + .admin-page-hero { + gap: 12px; + margin-bottom: 20px; + padding-bottom: 16px; + } + + .admin-page-title { + font-size: 1.25rem; + } + + .admin-metric-grid { + grid-template-columns: 1fr !important; + gap: 12px !important; } .admin-surface { - padding: 16px; + padding: 16px !important; } - .admin-section-header > div { - width: 100%; + .admin-section-header { + gap: 12px; + margin-bottom: 16px; + padding-bottom: 12px; + } + + .admin-table thead th { + padding: 8px 12px; + font-size: 0.75rem; + } + + .admin-table tbody td { + padding: 8px 12px; + font-size: 0.9rem; } }