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
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user