kjh2064/taxbaik
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

fix: remove :deep() CSS selectors and strengthen admin dashboard styles
TaxBaik CI/CD / build-and-deploy (push) Successful in 54s
Details

Browse Source 
- Remove :deep() pseudo-selectors (not supported in external CSS files)
- Add !important to metric card, accent colors, and page hero styles to ensure MudBlazor components display correctly
- Improve CSS specificity for typography classes (.mud-typography--h3 and .mud-typography-h3)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
김재현
2026-06-28 09:58:40 +09:00
parent 541b04cf3d
commit ae7ca7e382
1 changed files with 51 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files
TaxBaik.Web/wwwroot/css/admin.css
+51 -46
View File
@@ -265,13 +265,13 @@ html, body {
padding: 16px 0; padding: 16px 0;
} }
.admin-nav :deep(.mud-nav-link), .admin-nav .mud-nav-link,
.admin-nav :deep(.mud-nav-group-header) { .admin-nav .mud-nav-group-header {
margin: 4px 8px; margin: 4px 8px;
border-radius: 8px; border-radius: 8px;
} }
.admin-nav :deep(.mud-nav-link.active) { .admin-nav .mud-nav-link.active {
background-color: #e3f2fd; background-color: #e3f2fd;
} }
@@ -296,36 +296,36 @@ html, body {
/* Page Header */ /* Page Header */
.admin-page-hero { .admin-page-hero {
display: flex; display: flex !important;
justify-content: space-between; justify-content: space-between !important;
align-items: flex-end; align-items: flex-end !important;
gap: 24px; gap: 24px !important;
margin-bottom: 32px; margin-bottom: 32px !important;
padding-bottom: 24px; padding-bottom: 24px !important;
border-bottom: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0 !important;
} }
.admin-eyebrow { .admin-eyebrow {
display: block; display: block !important;
color: #1976d2; color: #1976d2 !important;
font-weight: 600; font-weight: 600 !important;
text-transform: uppercase; text-transform: uppercase !important;
font-size: 0.75rem; font-size: 0.75rem !important;
letter-spacing: 0.5px; letter-spacing: 0.5px !important;
margin-bottom: 4px; margin-bottom: 4px !important;
} }
.admin-page-title { .admin-page-title {
display: block; display: block !important;
color: #1a1a1a; color: #1a1a1a !important;
font-weight: 600; font-weight: 600 !important;
margin-bottom: 8px; margin-bottom: 8px !important;
} }
.admin-page-subtitle { .admin-page-subtitle {
display: block; display: block !important;
color: #666; color: #666 !important;
font-size: 0.95rem; font-size: 0.95rem !important;
} }
/* Metrics Grid */ /* Metrics Grid */
@@ -334,18 +334,19 @@ html, body {
} }
.admin-metric-card { .admin-metric-card {
padding: 20px; padding: 20px !important;
border-radius: 8px; border-radius: 8px !important;
background-color: #fff; background-color: #fff !important;
border: 1px solid #e0e0e0; border: 1px solid #e0e0e0 !important;
transition: all 0.2s ease; transition: all 0.2s ease !important;
cursor: pointer; cursor: pointer !important;
display: block !important;
} }
.admin-metric-card:hover { .admin-metric-card:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
border-color: #d0d0d0; border-color: #d0d0d0 !important;
transform: translateY(-2px); transform: translateY(-2px) !important;
} }
.admin-metric-card .mud-typography-caption { .admin-metric-card .mud-typography-caption {
@@ -369,39 +370,43 @@ html, body {
} }
.accent-blue { .accent-blue {
background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%); background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%) !important;
border-color: #90caf9; border-color: #90caf9 !important;
} }
.accent-blue .mud-typography--h3,
.accent-blue .mud-typography-h3 { .accent-blue .mud-typography-h3 {
color: #1565c0; color: #1565c0 !important;
} }
.accent-amber { .accent-amber {
background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%); background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%) !important;
border-color: #ffcc80; border-color: #ffcc80 !important;
} }
.accent-amber .mud-typography--h3,
.accent-amber .mud-typography-h3 { .accent-amber .mud-typography-h3 {
color: #e65100; color: #e65100 !important;
} }
.accent-slate { .accent-slate {
background: linear-gradient(135deg, #eceff1 0%, #cfd8dc 100%); background: linear-gradient(135deg, #eceff1 0%, #cfd8dc 100%) !important;
border-color: #b0bec5; border-color: #b0bec5 !important;
} }
.accent-slate .mud-typography--h3,
.accent-slate .mud-typography-h3 { .accent-slate .mud-typography-h3 {
color: #455a64; color: #455a64 !important;
} }
.accent-green { .accent-green {
background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%); background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%) !important;
border-color: #81c784; border-color: #81c784 !important;
} }
.accent-green .mud-typography--h3,
.accent-green .mud-typography-h3 { .accent-green .mud-typography-h3 {
color: #2e7d32; color: #2e7d32 !important;
} }
/* Surfaces */ /* Surfaces */
@@ -482,7 +487,7 @@ html, body {
text-decoration: underline; text-decoration: underline;
} }
.admin-table :deep(.mud-chip-small) { .admin-table .mud-chip-small {
height: 24px; height: 24px;
font-size: 0.75rem; font-size: 0.75rem;
} }