refactor(admin): compact UI styling for data-dense admin interface
- Reduce table cell padding (px-5 py-4 → px-3 py-2) across OrderTableBody, ProductTableBody, StopTableBody, AdminTable - Narrow sidebar (w-60 → w-56) with smaller nav items - Reduce page/card padding in admin-design-system.css - Smaller default buttons (md → sm) in AdminButton - Smaller page headers (text-2xl → text-xl, w-12 → w-10 icon) - Tighter cards and filter tabs Makes admin UI feel like professional B2B tool at 100% zoom
This commit is contained in:
@@ -41,9 +41,9 @@
|
||||
--admin-sidebar-active: #5c584f; /* between */
|
||||
|
||||
/* Spacing */
|
||||
--admin-page-padding: 1.5rem; /* px-6 */
|
||||
--admin-section-gap: 1rem; /* gap-4 */
|
||||
--admin-card-padding: 1.25rem; /* p-5 */
|
||||
--admin-page-padding: 1rem; /* px-4 - reduced for density */
|
||||
--admin-section-gap: 0.75rem; /* gap-3 - reduced */
|
||||
--admin-card-padding: 1rem; /* p-4 - reduced */
|
||||
|
||||
/* Border Radius */
|
||||
--admin-radius-sm: 0.5rem; /* rounded-lg */
|
||||
@@ -102,7 +102,7 @@
|
||||
.admin-table {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
font-size: 0.875rem; /* text-sm */
|
||||
font-size: 0.8125rem; /* 13px - reduced for density */
|
||||
}
|
||||
|
||||
.admin-table thead {
|
||||
@@ -111,8 +111,8 @@
|
||||
}
|
||||
|
||||
.admin-table th {
|
||||
padding: 0.875rem 1.25rem; /* py-3.5 px-5 */
|
||||
font-size: 0.625rem; /* text-[10px] */
|
||||
padding: 0.75rem 1rem; /* py-3 px-4 - reduced for density */
|
||||
font-size: 0.5625rem; /* text-9px - reduced */
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
@@ -137,7 +137,8 @@
|
||||
}
|
||||
|
||||
.admin-table td {
|
||||
padding: 0.875rem 1.25rem; /* py-3.5 px-5 */
|
||||
padding: 0.625rem 1rem; /* py-2.5 px-4 - reduced for density */
|
||||
font-size: 0.8125rem; /* 13px - reduced */
|
||||
}
|
||||
|
||||
/* === Admin Stats Bar === */
|
||||
@@ -184,10 +185,10 @@
|
||||
.admin-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.5rem 1rem;
|
||||
gap: 0.375rem;
|
||||
padding: 0.375rem 0.75rem; /* reduced padding */
|
||||
border-radius: var(--admin-radius-sm);
|
||||
font-size: 0.75rem;
|
||||
font-size: 0.6875rem; /* reduced from 0.75rem */
|
||||
font-weight: 700;
|
||||
transition: all 150ms;
|
||||
}
|
||||
@@ -216,11 +217,11 @@
|
||||
.admin-input {
|
||||
flex: 1;
|
||||
min-width: 12rem;
|
||||
padding: 0.625rem 0.75rem;
|
||||
padding: 0.5rem 0.625rem; /* reduced padding */
|
||||
background-color: var(--admin-card-bg);
|
||||
border: 1px solid var(--admin-border);
|
||||
border-radius: var(--admin-radius-sm);
|
||||
font-size: 0.875rem;
|
||||
font-size: 0.8125rem; /* 13px - reduced */
|
||||
color: var(--admin-text-primary);
|
||||
outline: none;
|
||||
transition: border-color 150ms;
|
||||
@@ -245,9 +246,9 @@
|
||||
}
|
||||
|
||||
.admin-filter-tab {
|
||||
padding: 0.5rem 0.75rem;
|
||||
padding: 0.375rem 0.625rem; /* reduced padding */
|
||||
border-radius: var(--admin-radius-sm);
|
||||
font-size: 0.75rem;
|
||||
font-size: 0.6875rem; /* reduced from 0.75rem */
|
||||
font-weight: 600;
|
||||
color: var(--admin-text-secondary);
|
||||
transition: all 150ms;
|
||||
|
||||
Reference in New Issue
Block a user