create user pages crud also update pages ui build order and car ,driver first page interfase create model layer to componants
This commit is contained in:
m7amedez5511
@@ -1,72 +1,96 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');
|
||||
|
||||
:root {
|
||||
/* ── Brand palette ─────────────────────────────────── */
|
||||
--color-brand-50: #EBF3FF;
|
||||
--color-brand-100: #BFDBFE;
|
||||
--color-brand-600: #1A73E8;
|
||||
--color-brand-700: #1557B0;
|
||||
--color-brand-900: #0D47A1;
|
||||
/* ── Brand blue — مأخوذ من login مباشرة ── */
|
||||
--color-brand-50: #EFF6FF;
|
||||
--color-brand-100: #DBEAFE;
|
||||
--color-brand-200: #BFDBFE;
|
||||
--color-brand-300: #93C5FD;
|
||||
--color-brand-400: #60A5FA;
|
||||
--color-brand-500: #3B82F6;
|
||||
--color-brand-600: #2563EB;
|
||||
--color-brand-700: #1D4ED8;
|
||||
--color-brand-800: #1E3A8A;
|
||||
--color-brand-900: #172554;
|
||||
|
||||
/* ── Semantic / status ─────────────────────────────── */
|
||||
--color-success: #34A853;
|
||||
--color-success-light: #D1FAE5;
|
||||
--color-warning: #F59E0B;
|
||||
--color-warning-light: #FEF3C7;
|
||||
--color-danger: #E53935;
|
||||
--color-danger-light: #FEE2E2;
|
||||
--color-info: #1A73E8;
|
||||
--color-info-light: #EBF3FF;
|
||||
/* ── Sidebar gradient stops ── */
|
||||
--sidebar-grad-top: #1E3A8A;
|
||||
--sidebar-grad-mid: #1D4ED8;
|
||||
--sidebar-grad-bottom: #1565C0;
|
||||
|
||||
/* ── Surface (light mode) ──────────────────────────── */
|
||||
/* ── Slate — نفس login ── */
|
||||
--color-slate-50: #F8FAFC;
|
||||
--color-slate-100: #F1F5F9;
|
||||
--color-slate-200: #E2E8F0;
|
||||
--color-slate-300: #CBD5E1;
|
||||
--color-slate-400: #94A3B8;
|
||||
--color-slate-500: #64748B;
|
||||
--color-slate-600: #475569;
|
||||
--color-slate-700: #334155;
|
||||
--color-slate-800: #1E293B;
|
||||
--color-slate-900: #0F172A;
|
||||
|
||||
/* ── Status colors ── */
|
||||
--color-success: #16A34A;
|
||||
--color-success-light: #DCFCE7;
|
||||
--color-success-border:#BBF7D0;
|
||||
--color-warning: #D97706;
|
||||
--color-warning-light: #FFFBEB;
|
||||
--color-warning-border:#FDE68A;
|
||||
--color-danger: #DC2626;
|
||||
--color-danger-light: #FEF2F2;
|
||||
--color-danger-border: #FECACA;
|
||||
--color-info: #2563EB;
|
||||
--color-info-light: #EFF6FF;
|
||||
--color-info-border: #BFDBFE;
|
||||
|
||||
/* ── Surfaces — light كامل زي login ── */
|
||||
--color-surface: #FFFFFF;
|
||||
--color-surface-muted: #F9FAFB;
|
||||
--color-surface-sunken: #ECEEF2;
|
||||
--color-border: #E5E7EB;
|
||||
--color-border-strong: #D1D5DB;
|
||||
--color-surface-muted: var(--color-slate-50);
|
||||
--color-surface-sunken: var(--color-slate-100);
|
||||
--color-border: var(--color-slate-200);
|
||||
--color-border-strong: var(--color-slate-300);
|
||||
|
||||
/* ── Text (light mode) ─────────────────────────────── */
|
||||
--color-text-primary: #111827;
|
||||
--color-text-secondary:#374151;
|
||||
--color-text-muted: #6B7280;
|
||||
--color-text-hint: #9CA3AF;
|
||||
--color-text-inverse: #FFFFFF;
|
||||
/* ── Text ── */
|
||||
--color-text-primary: var(--color-slate-900);
|
||||
--color-text-secondary: var(--color-slate-600);
|
||||
--color-text-muted: var(--color-slate-500);
|
||||
--color-text-hint: var(--color-slate-400);
|
||||
--color-text-inverse: #FFFFFF;
|
||||
|
||||
/* ── Surface (dark — admin dashboard) ─────────────── */
|
||||
--color-surface-dark: #020617; /* slate-950 */
|
||||
--color-surface-dark-raised: #0F172A; /* slate-900 */
|
||||
--color-surface-dark-card: #1E293B; /* slate-800 */
|
||||
--color-border-dark: rgba(255, 255, 255, 0.10);
|
||||
--color-text-dark-primary: #F1F5F9; /* slate-100 */
|
||||
--color-text-dark-muted: #94A3B8; /* slate-400 */
|
||||
/* ── للـ dashboard pages — light بدل dark ── */
|
||||
--color-surface-dark: var(--color-slate-50);
|
||||
--color-surface-dark-raised: var(--color-surface);
|
||||
--color-surface-dark-card: var(--color-surface);
|
||||
--color-border-dark: var(--color-slate-200);
|
||||
--color-text-dark-primary: var(--color-slate-900);
|
||||
--color-text-dark-muted: var(--color-slate-500);
|
||||
|
||||
/* ── Typography ────────────────────────────────────── */
|
||||
/* ── Typography ── */
|
||||
--font-sans: 'Plus Jakarta Sans', sans-serif;
|
||||
--font-mono: 'IBM Plex Mono', monospace;
|
||||
|
||||
/* ── Radius ────────────────────────────────────────── */
|
||||
--radius-sm: 7px;
|
||||
--radius-md: 10px;
|
||||
--radius-lg: 14px;
|
||||
--radius-xl: 20px;
|
||||
--radius-2xl: 24px;
|
||||
/* ── Radius ── */
|
||||
--radius-sm: 6px;
|
||||
--radius-md: 8px;
|
||||
--radius-lg: 12px;
|
||||
--radius-xl: 16px;
|
||||
--radius-2xl: 20px;
|
||||
--radius-full: 9999px;
|
||||
|
||||
/* ── Spacing / layout ──────────────────────────────── */
|
||||
--sidebar-width: 280px;
|
||||
--topbar-height: 56px;
|
||||
--page-max-width: 1280px;
|
||||
--page-padding-x: 24px;
|
||||
/* ── Layout ── */
|
||||
--sidebar-width: 240px;
|
||||
--topbar-height: 56px;
|
||||
--page-padding-x: 24px;
|
||||
|
||||
/* ── Shadows ───────────────────────────────────────── */
|
||||
--shadow-card: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
|
||||
--shadow-overlay: 0 20px 60px rgba(0,0,0,.25);
|
||||
/* ── Shadows ── */
|
||||
--shadow-card: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
|
||||
--shadow-overlay: 0 10px 40px rgba(0,0,0,.1);
|
||||
|
||||
/* ── Transitions ───────────────────────────────────── */
|
||||
/* ── Transitions ── */
|
||||
--transition-base: 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
/* ── Reduced-motion: disable spinner animation ──────── */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.animate-spin {
|
||||
animation: none;
|
||||
}
|
||||
.animate-spin { animation: none; }
|
||||
}
|
||||
Reference in New Issue
Block a user