feat: Add PWA support and consolidate CSS design system
- Add PWA manifest, icons (192x192, 512x512), and service worker - Register service worker in index.html with Apple mobile web app support - Consolidate CSS variables and design tokens documentation - Update PrimeVue overrides for consistent theming - Refactor data-entry components to use shared CSS patterns - Add frontend-style-auditor agent for style consistency checks - Minor OCR validation and job worker improvements - Update start-prod.sh configuration 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Claude Agent
@@ -107,8 +107,8 @@
|
||||
}
|
||||
|
||||
.btn-success:hover {
|
||||
background: #047857;
|
||||
border-color: #047857;
|
||||
background: var(--green-700);
|
||||
border-color: var(--green-700);
|
||||
}
|
||||
|
||||
.btn-warning {
|
||||
@@ -118,8 +118,8 @@
|
||||
}
|
||||
|
||||
.btn-warning:hover {
|
||||
background: #b45309;
|
||||
border-color: #b45309;
|
||||
background: var(--yellow-700);
|
||||
border-color: var(--yellow-700);
|
||||
}
|
||||
|
||||
.btn-error {
|
||||
@@ -129,8 +129,8 @@
|
||||
}
|
||||
|
||||
.btn-error:hover {
|
||||
background: #b91c1c;
|
||||
border-color: #b91c1c;
|
||||
background: var(--red-700);
|
||||
border-color: var(--red-700);
|
||||
}
|
||||
|
||||
/* Button Shapes */
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
/* Card Components - ROA2WEB */
|
||||
|
||||
/* Base Card Styles */
|
||||
/* Base Card Styles - Dark mode compatible */
|
||||
.card {
|
||||
background: var(--color-bg);
|
||||
border: 1px solid var(--color-border);
|
||||
background: var(--surface-card) !important;
|
||||
border: 1px solid var(--surface-border);
|
||||
border-radius: var(--card-radius);
|
||||
box-shadow: var(--shadow-sm);
|
||||
transition: all var(--transition-fast);
|
||||
@@ -17,8 +17,8 @@
|
||||
|
||||
.card-header {
|
||||
padding: var(--space-lg);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
background: var(--color-bg-secondary);
|
||||
border-bottom: 1px solid var(--surface-border);
|
||||
background: var(--surface-hover);
|
||||
}
|
||||
|
||||
.card-body {
|
||||
@@ -27,8 +27,8 @@
|
||||
|
||||
.card-footer {
|
||||
padding: var(--space-lg);
|
||||
border-top: 1px solid var(--color-border);
|
||||
background: var(--color-bg-secondary);
|
||||
border-top: 1px solid var(--surface-border);
|
||||
background: var(--surface-hover);
|
||||
}
|
||||
|
||||
/* Card Variants */
|
||||
@@ -57,10 +57,10 @@
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
/* Stats Cards */
|
||||
/* Stats Cards - Dark mode compatible */
|
||||
.stats-card {
|
||||
background: var(--color-bg);
|
||||
border: 1px solid var(--color-border);
|
||||
background: var(--surface-card) !important;
|
||||
border: 1px solid var(--surface-border);
|
||||
border-radius: var(--card-radius);
|
||||
padding: var(--space-lg);
|
||||
text-align: center;
|
||||
@@ -124,8 +124,8 @@
|
||||
|
||||
/* KPI Cards */
|
||||
.kpi-card {
|
||||
background: var(--color-bg);
|
||||
border: 1px solid var(--color-border);
|
||||
background: var(--surface-card);
|
||||
border: 1px solid var(--surface-border);
|
||||
border-radius: var(--card-radius);
|
||||
padding: var(--space-lg);
|
||||
display: flex;
|
||||
@@ -172,8 +172,8 @@
|
||||
|
||||
/* Action Cards */
|
||||
.action-card {
|
||||
background: var(--color-bg);
|
||||
border: 1px solid var(--color-border);
|
||||
background: var(--surface-card);
|
||||
border: 1px solid var(--surface-border);
|
||||
border-radius: var(--card-radius);
|
||||
padding: var(--space-lg);
|
||||
cursor: pointer;
|
||||
@@ -209,8 +209,8 @@
|
||||
|
||||
/* Status Cards */
|
||||
.status-card {
|
||||
background: var(--color-bg);
|
||||
border-left: 4px solid var(--color-border);
|
||||
background: var(--surface-card);
|
||||
border-left: 4px solid var(--surface-border);
|
||||
border-radius: var(--card-radius);
|
||||
padding: var(--space-md);
|
||||
box-shadow: var(--shadow-sm);
|
||||
@@ -218,22 +218,22 @@
|
||||
|
||||
.status-card.success {
|
||||
border-left-color: var(--color-success);
|
||||
background: #f0fdf4;
|
||||
background: var(--green-50);
|
||||
}
|
||||
|
||||
.status-card.warning {
|
||||
border-left-color: var(--color-warning);
|
||||
background: #fffbeb;
|
||||
background: var(--yellow-50);
|
||||
}
|
||||
|
||||
.status-card.error {
|
||||
border-left-color: var(--color-error);
|
||||
background: #fef2f2;
|
||||
background: var(--red-50);
|
||||
}
|
||||
|
||||
.status-card.info {
|
||||
border-left-color: var(--color-info);
|
||||
background: #f0f9ff;
|
||||
background: var(--blue-50);
|
||||
}
|
||||
|
||||
/* Company Banner Card */
|
||||
@@ -262,8 +262,8 @@
|
||||
|
||||
/* Dashboard V2 Mini Cards */
|
||||
.mini-card {
|
||||
background: var(--color-bg);
|
||||
border: 1px solid var(--color-border);
|
||||
background: var(--surface-card);
|
||||
border: 1px solid var(--surface-border);
|
||||
border-radius: var(--radius-sm);
|
||||
padding: var(--space-sm);
|
||||
text-align: center;
|
||||
@@ -298,17 +298,17 @@
|
||||
|
||||
/* Heatmap Colors for Mini Cards */
|
||||
.mini-card.heat-low {
|
||||
background: #f0fdf4;
|
||||
background: var(--green-50);
|
||||
border-color: var(--color-success);
|
||||
}
|
||||
|
||||
.mini-card.heat-medium {
|
||||
background: #fffbeb;
|
||||
background: var(--yellow-50);
|
||||
border-color: var(--color-warning);
|
||||
}
|
||||
|
||||
.mini-card.heat-high {
|
||||
background: #fef2f2;
|
||||
background: var(--red-50);
|
||||
border-color: var(--color-error);
|
||||
}
|
||||
|
||||
@@ -366,8 +366,8 @@
|
||||
/* ===== Dashboard Metric Cards ===== */
|
||||
|
||||
.metric-card {
|
||||
background: var(--color-bg);
|
||||
border: 1px solid var(--color-border);
|
||||
background: var(--surface-card);
|
||||
border: 1px solid var(--surface-border);
|
||||
border-radius: var(--card-radius);
|
||||
padding: var(--card-padding, 1.5rem);
|
||||
transition: all var(--transition-fast);
|
||||
|
||||
@@ -278,7 +278,7 @@
|
||||
|
||||
/* Heat Map Colors for Mini Cards */
|
||||
.mini-stat-card.heat-low {
|
||||
background: #f0fdf4;
|
||||
background: var(--green-50);
|
||||
border-color: var(--color-success);
|
||||
}
|
||||
|
||||
@@ -287,7 +287,7 @@
|
||||
}
|
||||
|
||||
.mini-stat-card.heat-medium {
|
||||
background: #fffbeb;
|
||||
background: var(--yellow-50);
|
||||
border-color: var(--color-warning);
|
||||
}
|
||||
|
||||
@@ -296,7 +296,7 @@
|
||||
}
|
||||
|
||||
.mini-stat-card.heat-high {
|
||||
background: #fef2f2;
|
||||
background: var(--red-50);
|
||||
border-color: var(--color-error);
|
||||
}
|
||||
|
||||
@@ -332,30 +332,30 @@
|
||||
|
||||
/* Stats Card Variants */
|
||||
.stats-card.clients {
|
||||
border-left-color: #3b82f6;
|
||||
border-left-color: var(--blue-500);
|
||||
}
|
||||
|
||||
.stats-card.clients .stats-card-header i {
|
||||
color: #3b82f6;
|
||||
background: #eff6ff;
|
||||
color: var(--blue-500);
|
||||
background: var(--blue-50);
|
||||
}
|
||||
|
||||
.stats-card.suppliers {
|
||||
border-left-color: #f59e0b;
|
||||
border-left-color: var(--yellow-500);
|
||||
}
|
||||
|
||||
.stats-card.suppliers .stats-card-header i {
|
||||
color: #f59e0b;
|
||||
background: #fffbeb;
|
||||
color: var(--yellow-600);
|
||||
background: var(--yellow-50);
|
||||
}
|
||||
|
||||
.stats-card.treasury {
|
||||
border-left-color: #10b981;
|
||||
border-left-color: var(--green-500);
|
||||
}
|
||||
|
||||
.stats-card.treasury .stats-card-header i {
|
||||
color: #10b981;
|
||||
background: #ecfdf5;
|
||||
color: var(--green-500);
|
||||
background: var(--green-50);
|
||||
}
|
||||
|
||||
/* Responsive Adjustments */
|
||||
|
||||
@@ -74,6 +74,74 @@
|
||||
--surface-900: #0f172a;
|
||||
--surface-950: #020617;
|
||||
|
||||
/* Semantic surface tokens (PrimeVue-style) - CRITICAL for dark mode */
|
||||
--surface-card: #ffffff;
|
||||
--surface-ground: #f8fafc;
|
||||
--surface-section: #ffffff;
|
||||
--surface-hover: #f1f5f9;
|
||||
--surface-border: #e2e8f0;
|
||||
--surface-overlay: #ffffff;
|
||||
|
||||
/* Primary color scale */
|
||||
--primary-50: #eff6ff;
|
||||
--primary-100: #dbeafe;
|
||||
--primary-200: #bfdbfe;
|
||||
--primary-300: #93c5fd;
|
||||
--primary-400: #60a5fa;
|
||||
--primary-500: #3b82f6;
|
||||
--primary-600: #2563eb;
|
||||
--primary-700: #1d4ed8;
|
||||
--primary-800: #1e40af;
|
||||
--primary-900: #1e3a8a;
|
||||
|
||||
/* Green color scale (success) */
|
||||
--green-50: #f0fdf4;
|
||||
--green-100: #dcfce7;
|
||||
--green-200: #bbf7d0;
|
||||
--green-300: #86efac;
|
||||
--green-400: #4ade80;
|
||||
--green-500: #22c55e;
|
||||
--green-600: #16a34a;
|
||||
--green-700: #15803d;
|
||||
--green-800: #166534;
|
||||
--green-900: #14532d;
|
||||
|
||||
/* Yellow color scale (warning) */
|
||||
--yellow-50: #fefce8;
|
||||
--yellow-100: #fef9c3;
|
||||
--yellow-200: #fef08a;
|
||||
--yellow-300: #fde047;
|
||||
--yellow-400: #facc15;
|
||||
--yellow-500: #eab308;
|
||||
--yellow-600: #ca8a04;
|
||||
--yellow-700: #a16207;
|
||||
--yellow-800: #854d0e;
|
||||
--yellow-900: #713f12;
|
||||
|
||||
/* Blue color scale (info) */
|
||||
--blue-50: #eff6ff;
|
||||
--blue-100: #dbeafe;
|
||||
--blue-200: #bfdbfe;
|
||||
--blue-300: #93c5fd;
|
||||
--blue-400: #60a5fa;
|
||||
--blue-500: #3b82f6;
|
||||
--blue-600: #2563eb;
|
||||
--blue-700: #1d4ed8;
|
||||
--blue-800: #1e40af;
|
||||
--blue-900: #1e3a8a;
|
||||
|
||||
/* Gray color scale */
|
||||
--gray-50: #f9fafb;
|
||||
--gray-100: #f3f4f6;
|
||||
--gray-200: #e5e7eb;
|
||||
--gray-300: #d1d5db;
|
||||
--gray-400: #9ca3af;
|
||||
--gray-500: #6b7280;
|
||||
--gray-600: #4b5563;
|
||||
--gray-700: #374151;
|
||||
--gray-800: #1f2937;
|
||||
--gray-900: #111827;
|
||||
|
||||
/* Red color palette for errors */
|
||||
--red-50: #fef2f2;
|
||||
--red-100: #fee2e2;
|
||||
@@ -152,33 +220,154 @@
|
||||
--breakpoint-wide: 1400px;
|
||||
}
|
||||
|
||||
/* Dark mode support (for future enhancement) */
|
||||
/* Manual dark theme via data-theme attribute (highest priority) */
|
||||
[data-theme="dark"] {
|
||||
/* Text colors - inverted for dark mode */
|
||||
--color-text: #f9fafb;
|
||||
--color-text-secondary: #d1d5db;
|
||||
--color-text-muted: #9ca3af;
|
||||
--text-color: #f9fafb;
|
||||
--text-color-secondary: #d1d5db;
|
||||
|
||||
/* Background colors */
|
||||
--color-bg: #111827;
|
||||
--color-bg-secondary: #1f2937;
|
||||
--color-bg-muted: #374151;
|
||||
|
||||
/* Border colors */
|
||||
--color-border: #374151;
|
||||
--color-border-light: #4b5563;
|
||||
--color-border-dark: #6b7280;
|
||||
|
||||
/* Surface numeric scale - inverted for dark mode */
|
||||
--surface-0: #0f172a;
|
||||
--surface-50: #1e293b;
|
||||
--surface-100: #334155;
|
||||
--surface-200: #475569;
|
||||
--surface-300: #64748b;
|
||||
--surface-400: #94a3b8;
|
||||
--surface-500: #cbd5e1;
|
||||
--surface-600: #e2e8f0;
|
||||
--surface-700: #f1f5f9;
|
||||
--surface-800: #f8fafc;
|
||||
--surface-900: #ffffff;
|
||||
--surface-950: #ffffff;
|
||||
|
||||
/* Semantic surface tokens - CRITICAL for dark mode components */
|
||||
--surface-card: #1e293b;
|
||||
--surface-ground: #0f172a;
|
||||
--surface-section: #1e293b;
|
||||
--surface-hover: #334155;
|
||||
--surface-border: #475569;
|
||||
--surface-overlay: #1e293b;
|
||||
|
||||
/* Gray scale - inverted for dark mode */
|
||||
--gray-50: #111827;
|
||||
--gray-100: #1f2937;
|
||||
--gray-200: #374151;
|
||||
--gray-300: #4b5563;
|
||||
--gray-400: #6b7280;
|
||||
--gray-500: #9ca3af;
|
||||
--gray-600: #d1d5db;
|
||||
--gray-700: #e5e7eb;
|
||||
--gray-800: #f3f4f6;
|
||||
--gray-900: #f9fafb;
|
||||
|
||||
/* Status colors - slightly adjusted for dark backgrounds */
|
||||
--green-50: #052e16;
|
||||
--green-100: #14532d;
|
||||
--green-800: #86efac;
|
||||
--green-900: #bbf7d0;
|
||||
|
||||
--yellow-50: #422006;
|
||||
--yellow-100: #713f12;
|
||||
--yellow-800: #fde047;
|
||||
--yellow-900: #fef08a;
|
||||
|
||||
--red-50: #450a0a;
|
||||
--red-100: #7f1d1d;
|
||||
--red-800: #fca5a5;
|
||||
--red-900: #fecaca;
|
||||
|
||||
--blue-50: #1e3a8a;
|
||||
--blue-100: #1e40af;
|
||||
--blue-800: #93c5fd;
|
||||
--blue-900: #bfdbfe;
|
||||
}
|
||||
|
||||
/* System preference dark mode (fallback when no manual theme set) */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
:root:not([data-theme]) {
|
||||
/* Text colors - inverted for dark mode */
|
||||
--color-text: #f9fafb;
|
||||
--color-text-secondary: #d1d5db;
|
||||
--color-text-muted: #9ca3af;
|
||||
--text-color: #f9fafb;
|
||||
--text-color-secondary: #d1d5db;
|
||||
|
||||
/* Background colors */
|
||||
--color-bg: #111827;
|
||||
--color-bg-secondary: #1f2937;
|
||||
--color-bg-muted: #374151;
|
||||
|
||||
/* Border colors */
|
||||
--color-border: #374151;
|
||||
--color-border-light: #4b5563;
|
||||
--color-border-dark: #6b7280;
|
||||
|
||||
/* Surface colors for dark mode */
|
||||
--surface-0: #ffffff;
|
||||
--surface-50: #020617;
|
||||
--surface-100: #0f172a;
|
||||
--surface-200: #1e293b;
|
||||
--surface-300: #334155;
|
||||
--surface-400: #475569;
|
||||
--surface-500: #64748b;
|
||||
--surface-600: #94a3b8;
|
||||
--surface-700: #cbd5e1;
|
||||
--surface-800: #e2e8f0;
|
||||
--surface-900: #f1f5f9;
|
||||
--surface-950: #f8fafc;
|
||||
/* Surface numeric scale - inverted for dark mode */
|
||||
--surface-0: #0f172a;
|
||||
--surface-50: #1e293b;
|
||||
--surface-100: #334155;
|
||||
--surface-200: #475569;
|
||||
--surface-300: #64748b;
|
||||
--surface-400: #94a3b8;
|
||||
--surface-500: #cbd5e1;
|
||||
--surface-600: #e2e8f0;
|
||||
--surface-700: #f1f5f9;
|
||||
--surface-800: #f8fafc;
|
||||
--surface-900: #ffffff;
|
||||
--surface-950: #ffffff;
|
||||
|
||||
/* Red colors remain the same in dark mode */
|
||||
/* Semantic surface tokens - CRITICAL for dark mode components */
|
||||
--surface-card: #1e293b;
|
||||
--surface-ground: #0f172a;
|
||||
--surface-section: #1e293b;
|
||||
--surface-hover: #334155;
|
||||
--surface-border: #475569;
|
||||
--surface-overlay: #1e293b;
|
||||
|
||||
/* Gray scale - inverted for dark mode */
|
||||
--gray-50: #111827;
|
||||
--gray-100: #1f2937;
|
||||
--gray-200: #374151;
|
||||
--gray-300: #4b5563;
|
||||
--gray-400: #6b7280;
|
||||
--gray-500: #9ca3af;
|
||||
--gray-600: #d1d5db;
|
||||
--gray-700: #e5e7eb;
|
||||
--gray-800: #f3f4f6;
|
||||
--gray-900: #f9fafb;
|
||||
|
||||
/* Status colors - slightly adjusted for dark backgrounds */
|
||||
--green-50: #052e16;
|
||||
--green-100: #14532d;
|
||||
--green-800: #86efac;
|
||||
--green-900: #bbf7d0;
|
||||
|
||||
--yellow-50: #422006;
|
||||
--yellow-100: #713f12;
|
||||
--yellow-800: #fde047;
|
||||
--yellow-900: #fef08a;
|
||||
|
||||
--red-50: #450a0a;
|
||||
--red-100: #7f1d1d;
|
||||
--red-800: #fca5a5;
|
||||
--red-900: #fecaca;
|
||||
|
||||
--blue-50: #1e3a8a;
|
||||
--blue-100: #1e40af;
|
||||
--blue-800: #93c5fd;
|
||||
--blue-900: #bfdbfe;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -4,59 +4,27 @@
|
||||
/* @import '../../../../../shared/frontend/styles/layout/header.css'; */
|
||||
/* @import '../../../../../shared/frontend/styles/layout/navigation.css'; */
|
||||
|
||||
/* Note: Color variables are defined in core/variables.css with dark mode support */
|
||||
/* This file only overrides layout-specific variables for data-entry module */
|
||||
|
||||
:root {
|
||||
/* Layout variables */
|
||||
/* Layout variables (data-entry specific) */
|
||||
--header-height: 60px;
|
||||
--sidebar-width: 280px;
|
||||
--z-header: 100;
|
||||
--z-modal: 1000;
|
||||
--z-modal-backdrop: 999;
|
||||
}
|
||||
|
||||
/* Shadows */
|
||||
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
|
||||
|
||||
/* Transitions */
|
||||
--transition-fast: 0.15s ease;
|
||||
--transition-normal: 0.3s ease;
|
||||
|
||||
/* Typography */
|
||||
--font-semibold: 600;
|
||||
--font-medium: 500;
|
||||
--text-xs: 12px;
|
||||
--text-sm: 14px;
|
||||
--text-base: 16px;
|
||||
--text-lg: 18px;
|
||||
|
||||
/* Radius */
|
||||
--radius-md: 6px;
|
||||
--radius-full: 9999px;
|
||||
|
||||
/* Spacing */
|
||||
--space-xs: 4px;
|
||||
--space-sm: 8px;
|
||||
--space-md: 12px;
|
||||
--space-lg: 24px;
|
||||
|
||||
/* Colors - Primary palette (matching reports-app) */
|
||||
--color-primary: #2563eb;
|
||||
--color-primary-dark: #1d4ed8;
|
||||
--color-primary-light: #3b82f6;
|
||||
|
||||
/* Compatibility aliases */
|
||||
--primary-color: var(--color-primary);
|
||||
--text-color: #111827;
|
||||
--text-color-secondary: #6b7280;
|
||||
|
||||
/* Surface colors for PrimeVue */
|
||||
--surface-0: #ffffff;
|
||||
--surface-50: #f8fafc;
|
||||
--surface-100: #f1f5f9;
|
||||
--surface-200: #e2e8f0;
|
||||
|
||||
/* Red color palette for errors */
|
||||
--red-50: #fef2f2;
|
||||
--red-200: #fecaca;
|
||||
--red-800: #991b1b;
|
||||
/* Dark mode overrides for Data Entry module */
|
||||
/* These must be here because data-entry.css is loaded before main.css */
|
||||
[data-theme="dark"] {
|
||||
--surface-card: #1e293b;
|
||||
--surface-ground: #0f172a;
|
||||
--surface-border: #475569;
|
||||
--surface-hover: #334155;
|
||||
--text-color: #f9fafb;
|
||||
--text-color-secondary: #94a3b8;
|
||||
}
|
||||
|
||||
* {
|
||||
@@ -70,13 +38,14 @@ body {
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
/* Card styles */
|
||||
/* Card styles - Dark mode compatible */
|
||||
.roa-card {
|
||||
background: white;
|
||||
background: var(--surface-card) !important;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
||||
padding: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
border: 1px solid var(--surface-border);
|
||||
}
|
||||
|
||||
.roa-card-header {
|
||||
@@ -85,13 +54,13 @@ body {
|
||||
align-items: center;
|
||||
margin-bottom: 1.5rem;
|
||||
padding-bottom: 1rem;
|
||||
border-bottom: 1px solid #eee;
|
||||
border-bottom: 1px solid var(--surface-border);
|
||||
}
|
||||
|
||||
.roa-card-title {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
color: var(--text-color);
|
||||
margin: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -113,7 +82,7 @@ body {
|
||||
|
||||
.form-field label {
|
||||
font-weight: 500;
|
||||
color: #555;
|
||||
color: var(--text-color-secondary);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
@@ -138,28 +107,28 @@ body {
|
||||
}
|
||||
|
||||
.status-draft {
|
||||
background-color: #e3f2fd;
|
||||
color: #1976d2;
|
||||
background-color: var(--blue-50);
|
||||
color: var(--blue-600);
|
||||
}
|
||||
|
||||
.status-pending {
|
||||
background-color: #fff3e0;
|
||||
color: #f57c00;
|
||||
background-color: var(--yellow-50);
|
||||
color: var(--yellow-700);
|
||||
}
|
||||
|
||||
.status-approved {
|
||||
background-color: #e8f5e9;
|
||||
color: #388e3c;
|
||||
background-color: var(--green-50);
|
||||
color: var(--green-600);
|
||||
}
|
||||
|
||||
.status-rejected {
|
||||
background-color: #ffebee;
|
||||
color: #d32f2f;
|
||||
background-color: var(--red-50);
|
||||
color: var(--red-600);
|
||||
}
|
||||
|
||||
.status-synced {
|
||||
background-color: #e0f2f1;
|
||||
color: #00796b;
|
||||
background-color: var(--green-50);
|
||||
color: var(--green-700);
|
||||
}
|
||||
|
||||
/* Table styles */
|
||||
@@ -174,8 +143,8 @@ body {
|
||||
}
|
||||
|
||||
.p-datatable .p-datatable-thead > tr > th {
|
||||
background: #f8f9fa;
|
||||
color: #495057;
|
||||
background: var(--surface-hover);
|
||||
color: var(--text-color);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@@ -188,7 +157,7 @@ body {
|
||||
|
||||
/* Upload area */
|
||||
.upload-area {
|
||||
border: 2px dashed #ddd;
|
||||
border: 2px dashed var(--surface-border);
|
||||
border-radius: 12px;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
@@ -197,13 +166,13 @@ body {
|
||||
}
|
||||
|
||||
.upload-area:hover {
|
||||
border-color: #667eea;
|
||||
background-color: #f8f9ff;
|
||||
border-color: var(--primary-500);
|
||||
background-color: var(--surface-hover);
|
||||
}
|
||||
|
||||
.upload-area.has-files {
|
||||
border-style: solid;
|
||||
border-color: #667eea;
|
||||
border-color: var(--primary-500);
|
||||
}
|
||||
|
||||
/* Image preview */
|
||||
@@ -244,21 +213,21 @@ body {
|
||||
.entries-table td {
|
||||
padding: 0.75rem;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid #eee;
|
||||
border-bottom: 1px solid var(--surface-border);
|
||||
}
|
||||
|
||||
.entries-table th {
|
||||
background: #f8f9fa;
|
||||
background: var(--surface-hover);
|
||||
font-weight: 600;
|
||||
color: #495057;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.entries-table .debit {
|
||||
color: #d32f2f;
|
||||
color: var(--red-600);
|
||||
}
|
||||
|
||||
.entries-table .credit {
|
||||
color: #388e3c;
|
||||
color: var(--green-600);
|
||||
}
|
||||
|
||||
/* Stats cards */
|
||||
@@ -270,7 +239,7 @@ body {
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
background: white;
|
||||
background: var(--surface-card);
|
||||
border-radius: 12px;
|
||||
padding: 1.25rem;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
||||
@@ -280,11 +249,11 @@ body {
|
||||
.stat-card .stat-value {
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
color: #333;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.stat-card .stat-label {
|
||||
color: #666;
|
||||
color: var(--text-color-secondary);
|
||||
font-size: 0.9rem;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
@@ -301,12 +270,12 @@ body {
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 3rem;
|
||||
color: #666;
|
||||
color: var(--text-color-secondary);
|
||||
}
|
||||
|
||||
.empty-state i {
|
||||
font-size: 4rem;
|
||||
color: #ddd;
|
||||
color: var(--surface-border);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
|
||||
115
src/assets/css/vendor/primevue-overrides.css
vendored
115
src/assets/css/vendor/primevue-overrides.css
vendored
@@ -80,17 +80,17 @@
|
||||
transition: background-color var(--transition-fast) !important;
|
||||
}
|
||||
|
||||
/* DataTable Striped Rows - Global Pattern */
|
||||
/* DataTable Striped Rows - Global Pattern (Dark Mode Compatible) */
|
||||
.p-datatable .p-datatable-tbody > tr:nth-child(odd) {
|
||||
background-color: #ffffff !important;
|
||||
background-color: var(--surface-card) !important;
|
||||
}
|
||||
|
||||
.p-datatable .p-datatable-tbody > tr:nth-child(even) {
|
||||
background-color: #f8f9fa !important;
|
||||
background-color: var(--surface-ground) !important;
|
||||
}
|
||||
|
||||
.p-datatable .p-datatable-tbody > tr:hover {
|
||||
background-color: #e3f2fd !important;
|
||||
background-color: var(--surface-hover) !important;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@@ -112,6 +112,7 @@
|
||||
|
||||
/* ===== Card ===== */
|
||||
.p-card {
|
||||
background: var(--surface-card) !important;
|
||||
box-shadow: var(--shadow-sm) !important;
|
||||
border: 1px solid var(--color-border) !important;
|
||||
border-radius: var(--card-radius, 8px) !important;
|
||||
@@ -125,6 +126,11 @@
|
||||
|
||||
.p-card .p-card-body {
|
||||
padding: var(--space-lg) !important;
|
||||
background: var(--surface-card) !important;
|
||||
}
|
||||
|
||||
.p-card .p-card-content {
|
||||
background: var(--surface-card) !important;
|
||||
}
|
||||
|
||||
/* ===== Mobile Optimizations ===== */
|
||||
@@ -136,3 +142,104 @@
|
||||
font-size: 16px !important; /* Prevent iOS zoom */
|
||||
}
|
||||
}
|
||||
|
||||
/* ===== Compact DataTable (ReceiptsListView) ===== */
|
||||
.compact-table .p-datatable-tbody > tr > td {
|
||||
padding: 0.5rem 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.compact-table .p-datatable-thead > tr > th {
|
||||
padding: 0.5rem 0.5rem;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.compact-table .p-paginator {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.compact-table .p-datatable-wrapper {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
/* ===== Receipt Form InputNumber (ReceiptCreateView) ===== */
|
||||
.value-item-total .p-inputnumber {
|
||||
width: 100% !important;
|
||||
max-width: 130px !important;
|
||||
}
|
||||
|
||||
.value-item-total .p-inputnumber-input {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.payment-method-item .p-inputnumber {
|
||||
width: 100% !important;
|
||||
max-width: 110px !important;
|
||||
}
|
||||
|
||||
.payment-method-item .p-inputnumber-input {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.dropdown-payment {
|
||||
width: 100% !important;
|
||||
max-width: 190px !important;
|
||||
}
|
||||
|
||||
.dropdown-payment .p-dropdown {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.input-tva {
|
||||
width: 110px !important;
|
||||
}
|
||||
|
||||
.input-tva .p-inputnumber-input {
|
||||
width: 110px !important;
|
||||
}
|
||||
|
||||
/* ===== Receipt Form Mobile (ReceiptCreateView) ===== */
|
||||
@media (max-width: 768px) {
|
||||
.form-field .p-dropdown,
|
||||
.form-field .p-autocomplete,
|
||||
.form-field .p-calendar {
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* ===== OCR Preview Mobile (OCRPreview) ===== */
|
||||
@media (max-width: 768px) {
|
||||
.preview-actions .p-button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* ===== OCR Engine Selector (OCRUploadZone) ===== */
|
||||
.engine-selector .p-dropdown-label {
|
||||
padding: 0.5rem 0.75rem !important;
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-color-secondary);
|
||||
}
|
||||
|
||||
.engine-selector .p-dropdown-trigger {
|
||||
width: 2rem !important;
|
||||
}
|
||||
|
||||
/* ===== Table Card Striped Rows (InvoicesView) ===== */
|
||||
/* Note: Uses design tokens for dark mode compatibility */
|
||||
.table-card .p-datatable .p-datatable-tbody > tr {
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
|
||||
.table-card .p-datatable .p-datatable-tbody > tr:nth-child(odd) {
|
||||
background-color: var(--surface-card, #ffffff);
|
||||
}
|
||||
|
||||
.table-card .p-datatable .p-datatable-tbody > tr:nth-child(even) {
|
||||
background-color: var(--surface-ground, #f8f9fa);
|
||||
}
|
||||
|
||||
.table-card .p-datatable .p-datatable-tbody > tr:hover {
|
||||
background-color: var(--surface-hover, #e3f2fd) !important;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user