refactor: redesign admin.css to work with MudBlazor without conflicts
TaxBaik CI/CD / build-and-deploy (push) Successful in 48s
TaxBaik CI/CD / build-and-deploy (push) Successful in 48s
- 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 <noreply@anthropic.com>
This commit is contained in:
+121
-106
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user