From 2134374039917e0626ba01d66e5d6cd8183f62f8 Mon Sep 17 00:00:00 2001 From: Leopoldadmin Date: Thu, 4 Jun 2026 00:06:29 +0000 Subject: [PATCH] Upload app/webui/css/app.css --- app/webui/css/app.css | 255 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 255 insertions(+) create mode 100644 app/webui/css/app.css diff --git a/app/webui/css/app.css b/app/webui/css/app.css new file mode 100644 index 0000000..8dc00ff --- /dev/null +++ b/app/webui/css/app.css @@ -0,0 +1,255 @@ +/* === CRM Frontend Custom Styles === */ +/* Tailwind-CDN provides utility classes; this file adds app-specific overrides. */ + +:root { + --crm-primary: #2563eb; /* blue-600 */ + --crm-primary-dark: #1d4ed8; + --crm-success: #16a34a; /* green-600 */ + --crm-danger: #dc2626; /* red-600 */ + --crm-warning: #d97706; /* amber-600 */ + --crm-bg: #f8fafc; /* slate-50 */ + --crm-card: #ffffff; + --crm-border: #e2e8f0; /* slate-200 */ + --crm-text: #0f172a; /* slate-900 */ + --crm-muted: #64748b; /* slate-500 */ +} + +/* === Body === */ +body { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, + "Helvetica Neue", Arial, sans-serif; + background: var(--crm-bg); + color: var(--crm-text); +} + +/* === Buttons (primary-color override) === */ +.btn-primary { + background-color: var(--crm-primary); + color: #fff; + padding: 0.5rem 1rem; + border-radius: 0.375rem; + font-weight: 500; + transition: background-color 0.15s ease; +} +.btn-primary:hover { background-color: var(--crm-primary-dark); } +.btn-primary:disabled { background-color: #94a3b8; cursor: not-allowed; } + +.btn-secondary { + background-color: #fff; + color: var(--crm-text); + padding: 0.5rem 1rem; + border: 1px solid var(--crm-border); + border-radius: 0.375rem; + font-weight: 500; +} +.btn-secondary:hover { background-color: #f1f5f9; } + +.btn-danger { + background-color: var(--crm-danger); + color: #fff; + padding: 0.5rem 1rem; + border-radius: 0.375rem; + font-weight: 500; +} +.btn-danger:hover { background-color: #b91c1c; } + +/* === Cards === */ +.crm-card { + background: var(--crm-card); + border: 1px solid var(--crm-border); + border-radius: 0.5rem; + padding: 1.25rem; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); +} + +/* === Form fields === */ +.crm-input { + width: 100%; + padding: 0.5rem 0.75rem; + border: 1px solid var(--crm-border); + border-radius: 0.375rem; + background: #fff; + font-size: 0.95rem; +} +.crm-input:focus { + outline: none; + border-color: var(--crm-primary); + box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); +} + +.crm-label { + display: block; + font-size: 0.875rem; + font-weight: 500; + color: var(--crm-text); + margin-bottom: 0.25rem; +} + +/* === Loading spinner (Alpine x-show) === */ +.crm-spinner { + display: inline-block; + width: 1.25rem; + height: 1.25rem; + border: 2px solid #cbd5e1; + border-top-color: var(--crm-primary); + border-radius: 50%; + animation: crm-spin 0.8s linear infinite; +} + +@keyframes crm-spin { + to { transform: rotate(360deg); } +} + +.crm-loading-overlay { + position: absolute; + inset: 0; + background: rgba(255, 255, 255, 0.7); + display: flex; + align-items: center; + justify-content: center; + z-index: 10; +} + +/* === Toast Notifications (top-right) === */ +.crm-toast-container { + position: fixed; + top: 1rem; + right: 1rem; + z-index: 9999; + display: flex; + flex-direction: column; + gap: 0.5rem; + max-width: 22rem; +} + +.crm-toast { + padding: 0.75rem 1rem; + border-radius: 0.375rem; + color: #fff; + font-size: 0.9rem; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); + animation: crm-toast-in 0.25s ease-out; +} + +.crm-toast.toast-success { background-color: var(--crm-success); } +.crm-toast.toast-error { background-color: var(--crm-danger); } +.crm-toast.toast-info { background-color: var(--crm-primary); } +.crm-toast.toast-warning { background-color: var(--crm-warning); } + +@keyframes crm-toast-in { + from { opacity: 0; transform: translateY(-8px); } + to { opacity: 1; transform: translateY(0); } +} + +/* === Tables === */ +.crm-table { + width: 100%; + border-collapse: collapse; + background: #fff; + border: 1px solid var(--crm-border); + border-radius: 0.5rem; + overflow: hidden; +} +.crm-table th { + text-align: left; + padding: 0.75rem 1rem; + background: #f1f5f9; + font-size: 0.8rem; + font-weight: 600; + color: var(--crm-muted); + text-transform: uppercase; + letter-spacing: 0.05em; + border-bottom: 1px solid var(--crm-border); +} +.crm-table td { + padding: 0.75rem 1rem; + border-bottom: 1px solid var(--crm-border); + font-size: 0.9rem; +} +.crm-table tr:last-child td { border-bottom: none; } +.crm-table tr:hover td { background: #f8fafc; } +.crm-table tr.row-overdue td { background: #fef2f2; } +.crm-table tr.row-overdue:hover td { background: #fee2e2; } + +/* === Badges === */ +.crm-badge { + display: inline-block; + padding: 0.125rem 0.5rem; + border-radius: 9999px; + font-size: 0.75rem; + font-weight: 500; +} +.badge-blue { background: #dbeafe; color: #1e40af; } +.badge-green { background: #dcfce7; color: #166534; } +.badge-red { background: #fee2e2; color: #991b1b; } +.badge-yellow { background: #fef3c7; color: #92400e; } +.badge-gray { background: #f1f5f9; color: #475569; } + +/* === Sidebar (app.html) === */ +.crm-sidebar { + width: 16rem; + background: #0f172a; + color: #cbd5e1; + min-height: 100vh; + padding: 1rem 0; +} +.crm-sidebar a { + display: block; + padding: 0.5rem 1.25rem; + color: #cbd5e1; + text-decoration: none; + font-size: 0.9rem; + border-left: 3px solid transparent; +} +.crm-sidebar a:hover { background: #1e293b; color: #fff; } +.crm-sidebar a.active { + background: #1e293b; + color: #fff; + border-left-color: var(--crm-primary); +} + +/* === Kanban (pipeline.html) === */ +.crm-kanban { + display: flex; + gap: 0.75rem; + overflow-x: auto; + padding-bottom: 1rem; +} +.crm-kanban-col { + flex: 0 0 16rem; + background: #f1f5f9; + border-radius: 0.5rem; + padding: 0.75rem; + min-height: 12rem; +} +.crm-kanban-col.drag-over { background: #e0e7ff; outline: 2px dashed var(--crm-primary); } +.crm-kanban-card { + background: #fff; + border: 1px solid var(--crm-border); + border-radius: 0.375rem; + padding: 0.5rem 0.75rem; + margin-bottom: 0.5rem; + cursor: grab; + font-size: 0.85rem; +} +.crm-kanban-card:active { cursor: grabbing; } + +/* === Modal (Alpine x-show) === */ +.crm-modal-backdrop { + position: fixed; inset: 0; + background: rgba(15, 23, 42, 0.5); + z-index: 100; + display: flex; align-items: center; justify-content: center; +} +.crm-modal { + background: #fff; + border-radius: 0.5rem; + max-width: 32rem; + width: 90%; + max-height: 90vh; + overflow-y: auto; + box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); +} + +/* === Utility === */ +[x-cloak] { display: none !important; }