mirror of
https://github.com/DRYTRIX/TimeTracker.git
synced 2026-01-26 22:48:35 -06:00
3c3faf13d4
Migrate frontend from custom CSS to Tailwind CSS framework with comprehensive template updates and improved component structure. Breaking Changes: - Remove legacy CSS files (base.css, calendar.css, ui.css, etc.) - Replace with Tailwind-based styling system New Features: - Add Tailwind CSS configuration with PostCSS pipeline - Create new template components for admin, clients, invoices, projects, reports - Add form-bridge.css for smooth transition between legacy and Tailwind styles - Add default avatar SVG asset - Implement Tailwind-based kanban board template - Add comprehensive UI quick wins documentation Infrastructure: - Add package.json with Tailwind dependencies - Configure PostCSS and Tailwind build pipeline - Update .gitignore for Node modules and build artifacts Testing: - Add template rendering tests (test_tasks_templates.py) - Add UI component tests (test_ui_quick_wins.py) Templates Added: - Admin: dashboard, settings, system info, user management - Clients: list and detail views - Invoices: full CRUD templates with payment recording - Projects: list, detail, and Tailwind kanban views - Reports: comprehensive reporting templates - Timer: manual entry interface This commit represents the first phase of the UI redesign initiative, maintaining backward compatibility where needed while establishing the foundation for modern, responsive interfaces.
130 lines
5.0 KiB
CSS
130 lines
5.0 KiB
CSS
/* Bridge styles to make legacy .form-control inputs match the new UI
|
|
Applies generous padding, border, and focus states. */
|
|
|
|
/* Base inputs */
|
|
.form-control,
|
|
input.form-control,
|
|
select.form-control,
|
|
textarea.form-control,
|
|
.form-select {
|
|
display: block;
|
|
width: 100%;
|
|
min-height: 2.5rem; /* consistent tap target */
|
|
padding: 0.625rem 0.875rem; /* py-2.5 px-3.5 */
|
|
border: 1px solid #E2E8F0; /* border-light */
|
|
border-radius: 0.5rem; /* rounded-lg */
|
|
background: #FFFFFF; /* card-light */
|
|
color: #2D3748; /* text-light */
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.form-control:focus,
|
|
.form-select:focus {
|
|
outline: none;
|
|
border-color: #4A90E2; /* primary */
|
|
box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.35); /* focus ring */
|
|
}
|
|
|
|
/* Placeholder colors */
|
|
.form-control::placeholder { color: #A0AEC0; }
|
|
.dark .form-control::placeholder { color: #718096; }
|
|
|
|
/* Textarea */
|
|
textarea.form-control { min-height: 6rem; resize: vertical; }
|
|
|
|
/* Sizes */
|
|
.form-control.form-control-sm { min-height: 2.25rem; padding: 0.5rem 0.75rem; }
|
|
.form-control.form-control-lg { min-height: 2.875rem; padding: 0.75rem 1rem; }
|
|
|
|
/* Dark mode */
|
|
.dark .form-control,
|
|
.dark .form-select,
|
|
.dark input.form-control,
|
|
.dark select.form-control,
|
|
.dark textarea.form-control {
|
|
background: #2D3748; /* card-dark */
|
|
color: #E2E8F0; /* text-dark */
|
|
border-color: #4A5568; /* border-dark */
|
|
}
|
|
|
|
.dark .form-control:focus,
|
|
.dark .form-select:focus {
|
|
border-color: #4A90E2;
|
|
box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.45);
|
|
}
|
|
|
|
/* Input groups often remove radii; keep padding generous */
|
|
.input-group .form-control { padding-top: 0.625rem; padding-bottom: 0.625rem; }
|
|
|
|
/* =============================
|
|
Minimal tokens (fallbacks)
|
|
============================= */
|
|
:root {
|
|
--color-primary: #3B82F6;
|
|
--color-primary-600: #2563EB;
|
|
--color-bg: #F7F9FB;
|
|
--color-card: #FFFFFF;
|
|
--color-border: #E2E8F0;
|
|
--color-text: #1F2937;
|
|
--radius-md: 0.5rem;
|
|
--shadow-md: 0 8px 24px rgba(0,0,0,0.08);
|
|
}
|
|
.dark {
|
|
--color-bg: #0F172A;
|
|
--color-card: #1F2937;
|
|
--color-border: #4A5568;
|
|
--color-text: #E2E8F0;
|
|
}
|
|
|
|
/* =============================
|
|
Buttons
|
|
============================= */
|
|
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.5rem 0.875rem; border-radius: var(--radius-md); border: 1px solid transparent; font-weight: 600; line-height: 1.25; cursor: pointer; }
|
|
.btn:focus { outline: none; box-shadow: 0 0 0 3px rgba(59,130,246,0.35); }
|
|
.btn-primary { color: #fff; background-color: var(--color-primary); border-color: var(--color-primary); }
|
|
.btn-primary:hover { background-color: var(--color-primary-600); border-color: var(--color-primary-600); }
|
|
.btn-secondary { color: var(--color-text); background-color: var(--color-card); border-color: var(--color-border); }
|
|
.btn-secondary:hover { background-color: #F3F4F6; }
|
|
.btn-ghost { color: var(--color-text); background-color: transparent; border-color: transparent; }
|
|
.btn-ghost:hover { background-color: rgba(148,163,184,0.15); }
|
|
.btn-sm { padding: 0.375rem 0.625rem; font-size: 0.875rem; }
|
|
.btn-lg { padding: 0.625rem 1rem; font-size: 1rem; }
|
|
.btn[disabled], .btn.disabled { opacity: .6; cursor: not-allowed; }
|
|
|
|
/* =============================
|
|
Focus ring utility
|
|
============================= */
|
|
.focus-ring { outline: none; box-shadow: 0 0 0 3px rgba(59,130,246,0.35); }
|
|
|
|
/* =============================
|
|
Table enhancements
|
|
============================= */
|
|
.table { width: 100%; border-collapse: separate; border-spacing: 0; }
|
|
.table thead th { position: sticky; top: 0; background: var(--color-card); z-index: 1; }
|
|
.table thead th, .table tbody td { padding: 1rem; border-bottom: 1px solid var(--color-border); }
|
|
.table-zebra tbody tr:nth-child(odd) { background-color: rgba(148,163,184,0.07); }
|
|
.dark .table-zebra tbody tr:nth-child(odd) { background-color: rgba(148,163,184,0.12); }
|
|
.table-compact thead th, .table-compact tbody td { padding: 0.625rem 0.75rem; }
|
|
.table-number { text-align: right; }
|
|
|
|
/* =============================
|
|
Badge chips
|
|
============================= */
|
|
.chip { display: inline-flex; align-items: center; padding: 0.125rem 0.5rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 600; line-height: 1; border: 1px solid transparent; }
|
|
.chip-neutral { background: #F1F5F9; color: #334155; }
|
|
.dark .chip-neutral { background: #1F2937; color: #E5E7EB; border-color: #374151; }
|
|
.chip-success { background: #DCFCE7; color: #166534; }
|
|
.dark .chip-success { background: rgba(16,185,129,0.15); color: #34D399; }
|
|
.chip-warning { background: #FEF3C7; color: #92400E; }
|
|
.dark .chip-warning { background: rgba(245,158,11,0.15); color: #F59E0B; }
|
|
.chip-danger { background: #FEE2E2; color: #991B1B; }
|
|
.dark .chip-danger { background: rgba(239,68,68,0.15); color: #F87171; }
|
|
|
|
/* =============================
|
|
Cards & helpers
|
|
============================= */
|
|
.card { background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); }
|
|
.page-bg { background: var(--color-bg); }
|
|
|
|
|