tyler/route-commerce
1
0
Fork 1
Code Issues Pull Requests 3 Actions Packages Projects Releases Wiki Activity
Files
4095c62011e454dadebe819e70ff9217f8ab8282
route-commerce/src/styles/admin-design-system.css
T
tyler 4095c62011 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
2026-06-02 14:55:42 +00:00

370 lines
8.9 KiB
CSS
Raw Blame History

/* Admin Design System - Design Tokens & Base Styles */
/* === Color Tokens === */
:root {
/* Background colors - Elegant warm palette */
--admin-bg: #f5f4ef; /* parchment - main background */
--admin-bg-subtle: #f7f6f2; /* parchment 600 */
--admin-card-bg: #ffffff; /* Pure white for cards */
--admin-card-bg-alt: #fafaf7; /* Slightly warm white */
/* Text colors */
--admin-text-primary: #3c3825; /* parchment 100 - dark warm */
--admin-text-secondary: #686763; /* dim_grey */
--admin-text-muted: #a5a4a1; /* dim_grey 700 */
/* Borders */
--admin-border: #d0cbb4; /* parchment 400 */
--admin-border-light: #e5e2d9; /* soft_linen */
/* Accent - Fresh Produce Green */
--admin-accent: #16a34a; /* green-600 - fresh produce brand */
--admin-accent-hover: #15803d; /* green-700 */
--admin-accent-light: #dcfce7; /* green-100 */
--admin-accent-text: #166534; /* green-800 */
/* Status Colors */
--admin-success: #16a34a; /* green-600 - fresh produce success */
--admin-success-accent: #15803d; /* green-700 */
--admin-warning: #aba278; /* parchment 300 */
--admin-warning-light: #f5f4ef; /* parchment */
--admin-danger: #dc2626; /* red-600 */
--admin-danger-hover: #b91c1c; /* red-700 */
--admin-danger-light: #fef2f2; /* red-50 */
--admin-info: #686763; /* dim_grey */
--admin-accent-dot: #22c55e; /* green-500 */
/* Sidebar - Dark elegant */
--admin-sidebar-bg: #3c3825; /* parchment 100 */
--admin-sidebar-text: #c3c3c1; /* dim_grey 800 */
--admin-sidebar-hover: #4c4945; /* dim_grey 200 */
--admin-sidebar-active: #5c584f; /* between */
/* Spacing */
--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 */
--admin-radius-md: 0.75rem; /* rounded-xl */
--admin-radius-lg: 1rem; /* rounded-2xl */
/* Shadows - subtle warm shadows */
--admin-shadow-sm: 0 1px 2px rgba(60, 56, 37, 0.04);
--admin-shadow-md: 0 4px 12px rgba(60, 56, 37, 0.08);
--admin-shadow-lg: 0 10px 15px -3px rgba(60, 56, 37, 0.08), 0 4px 6px -4px rgba(60, 56, 37, 0.04);
}
/* === Base Admin Layout === */
.admin-page {
min-height: 100vh;
background-color: var(--admin-bg);
padding: var(--admin-page-padding);
}
.admin-container {
max-width: 72rem; /* max-w-6xl */
margin: 0 auto;
}
/* === Admin Card === */
.admin-card {
background-color: var(--admin-card-bg);
border: 1px solid var(--admin-border);
border-radius: var(--admin-radius-lg);
box-shadow: var(--admin-shadow-sm);
}
.admin-card-header {
padding: var(--admin-card-padding);
border-bottom: 1px solid var(--admin-border-light);
}
.admin-card-body {
padding: var(--admin-card-padding);
}
/* === Admin Filter Bar === */
.admin-filter-bar {
display: flex;
flex-wrap: wrap;
gap: var(--admin-section-gap);
align-items: center;
padding: var(--admin-card-padding);
background-color: var(--admin-card-bg);
border: 1px solid var(--admin-border);
border-radius: var(--admin-radius-md);
box-shadow: var(--admin-shadow-sm);
}
/* === Admin Table === */
.admin-table {
width: 100%;
text-align: left;
font-size: 0.8125rem; /* 13px - reduced for density */
}
.admin-table thead {
background-color: var(--admin-bg);
border-bottom: 1px solid var(--admin-border);
}
.admin-table th {
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;
color: var(--admin-text-muted);
}
.admin-table tbody {
background-color: var(--admin-card-bg);
}
.admin-table tbody tr {
border-bottom: 1px solid var(--admin-border-light);
transition: background-color 150ms;
}
.admin-table tbody tr:hover {
background-color: rgba(253, 250, 246, 0.5); /* stone-50/40 */
}
.admin-table tbody tr:last-child {
border-bottom: none;
}
.admin-table td {
padding: 0.625rem 1rem; /* py-2.5 px-4 - reduced for density */
font-size: 0.8125rem; /* 13px - reduced */
}
/* === Admin Stats Bar === */
.admin-stats {
display: flex;
align-items: center;
gap: 1.5rem;
}
.admin-stat {
display: flex;
align-items: center;
gap: 0.5rem;
}
.admin-stat-label {
font-size: 0.875rem;
color: var(--admin-text-secondary);
}
.admin-stat-badge {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.125rem 0.625rem; /* py-0.5 px-2.5 */
border-radius: 9999px; /* rounded-full */
font-size: 0.875rem;
font-weight: 700;
}
.admin-stat-badge--active {
background-color: var(--admin-accent-light);
border: 1px solid var(--admin-accent);
color: var(--admin-accent-text);
}
.admin-stat-badge--inactive {
background-color: var(--admin-bg);
border: 1px solid var(--admin-border);
color: var(--admin-text-secondary);
}
/* === Admin Button === */
.admin-btn {
display: inline-flex;
align-items: center;
gap: 0.375rem;
padding: 0.375rem 0.75rem; /* reduced padding */
border-radius: var(--admin-radius-sm);
font-size: 0.6875rem; /* reduced from 0.75rem */
font-weight: 700;
transition: all 150ms;
}
.admin-btn--primary {
background-color: var(--admin-accent);
color: white;
}
.admin-btn--primary:hover {
background-color: var(--admin-accent-hover);
}
.admin-btn--secondary {
background-color: var(--admin-card-bg);
border: 1px solid var(--admin-border);
color: var(--admin-text-secondary);
}
.admin-btn--secondary:hover {
background-color: var(--admin-bg);
border-color: var(--admin-text-muted);
}
/* === Admin Input === */
.admin-input {
flex: 1;
min-width: 12rem;
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.8125rem; /* 13px - reduced */
color: var(--admin-text-primary);
outline: none;
transition: border-color 150ms;
}
.admin-input:focus {
border-color: var(--admin-accent);
}
.admin-input::placeholder {
color: var(--admin-text-muted);
}
/* === Admin Filter Tabs === */
.admin-filter-tabs {
display: flex;
gap: 0.25rem;
padding: 0.25rem;
background-color: var(--admin-bg);
border: 1px solid var(--admin-border);
border-radius: var(--admin-radius-sm);
}
.admin-filter-tab {
padding: 0.375rem 0.625rem; /* reduced padding */
border-radius: var(--admin-radius-sm);
font-size: 0.6875rem; /* reduced from 0.75rem */
font-weight: 600;
color: var(--admin-text-secondary);
transition: all 150ms;
}
.admin-filter-tab:hover {
color: var(--admin-text-primary);
background-color: rgba(255, 255, 255, 0.5);
}
.admin-filter-tab--active {
background-color: var(--admin-card-bg);
color: var(--admin-accent-text);
border: 1px solid var(--admin-accent);
box-shadow: var(--admin-shadow-sm);
}
/* === Admin Status Badge === */
.admin-status {
display: inline-flex;
align-items: center;
gap: 0.375rem;
padding: 0.125rem 0.625rem;
border-radius: 9999px;
font-size: 0.625rem;
font-weight: 700;
}
.admin-status::before {
content: "";
width: 0.375rem;
height: 0.375rem;
border-radius: 50%;
}
.admin-status--active {
background-color: var(--admin-accent-light);
color: var(--admin-accent-text);
}
.admin-status--active::before {
background-color: var(--admin-accent-dot);
}
.admin-status--inactive {
background-color: var(--admin-bg);
color: var(--admin-text-muted);
}
.admin-status--inactive::before {
background-color: var(--admin-text-muted);
}
/* === Admin View Toggle === */
.admin-view-toggle {
display: flex;
gap: 0.25rem;
padding: 0.25rem;
background-color: var(--admin-card-bg);
border: 1px solid var(--admin-border);
border-radius: var(--admin-radius-sm);
}
.admin-view-btn {
padding: 0.375rem;
border-radius: var(--admin-radius-sm);
color: var(--admin-text-secondary);
transition: all 150ms;
}
.admin-view-btn:hover {
color: var(--admin-text-primary);
background-color: var(--admin-bg);
}
.admin-view-btn--active {
background-color: var(--admin-accent-light);
color: var(--admin-accent-text);
border: 1px solid var(--admin-accent);
}
/* === Shimmer Animation === */
@keyframes shimmer {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
.shimmer {
animation: shimmer 1.5s ease-in-out infinite;
}
/* === Toast Animations === */
@keyframes slide-in-from-right {
from {
transform: translateX(100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
@keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.animate-in {
animation: slide-in-from-right 0.3s ease-out, fade-in 0.3s ease-out;
}
Reference in New Issue View Git Blame Copy Permalink