hamed
942634c98e
- Refactored PaymentsPage, RatingsPage, RepresentationDetailPage, RepresentationsPage, SecretariesPage, SettlementsPage, SmsPage, UserDetailPage, and UsersPage to use consistent class names for styling. - Updated button styles to use new utility classes for primary, secondary, and danger buttons. - Enhanced dark mode support across various components by adjusting text and background colors. - Introduced new utility classes for form inputs, labels, and info rows to standardize styling. - Implemented Zustand for persistent UI state management, including dark mode toggle functionality. - Updated CSS to include new styles for skeleton loading and animations. - Added optional dependencies for improved compatibility with different platforms.
153 lines
6.7 KiB
CSS
153 lines
6.7 KiB
CSS
@import "tailwindcss";
|
|
@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700;800&display=swap');
|
|
|
|
/* Class-based dark mode for Tailwind v4 */
|
|
@custom-variant dark (&:where(.dark, .dark *));
|
|
|
|
@theme {
|
|
--color-primary-50: #f5f3ff;
|
|
--color-primary-100: #ede9fe;
|
|
--color-primary-200: #ddd6fe;
|
|
--color-primary-300: #c4b5fd;
|
|
--color-primary-400: #a78bfa;
|
|
--color-primary-500: #8b5cf6;
|
|
--color-primary-600: #7c3aed;
|
|
--color-primary-700: #6d28d9;
|
|
--color-primary-800: #5b21b6;
|
|
--color-primary-900: #4c1d95;
|
|
|
|
--font-sans: "Vazirmatn", ui-sans-serif, system-ui, sans-serif;
|
|
}
|
|
|
|
*, *::before, *::after {
|
|
font-family: var(--font-sans);
|
|
}
|
|
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
body {
|
|
direction: rtl;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
/* ── Scrollbar ──────────────────────────────── */
|
|
::-webkit-scrollbar { width: 5px; height: 5px; }
|
|
::-webkit-scrollbar-track { background: transparent; }
|
|
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
|
|
.dark ::-webkit-scrollbar-thumb { background: #334155; }
|
|
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
|
|
.dark ::-webkit-scrollbar-thumb:hover { background: #475569; }
|
|
|
|
/* ── Animations ─────────────────────────────── */
|
|
@keyframes scale-in {
|
|
from { opacity: 0; transform: scale(0.96) translateY(-4px); }
|
|
to { opacity: 1; transform: scale(1) translateY(0); }
|
|
}
|
|
@keyframes slide-up {
|
|
from { opacity: 0; transform: translateY(10px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
@keyframes fade-in {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
@keyframes shimmer {
|
|
0% { background-position: -200% 0; }
|
|
100% { background-position: 200% 0; }
|
|
}
|
|
|
|
.animate-scale-in { animation: scale-in 200ms cubic-bezier(0.34, 1.2, 0.64, 1) both; }
|
|
.animate-slide-up { animation: slide-up 200ms ease both; }
|
|
.animate-fade-in { animation: fade-in 150ms ease both; }
|
|
|
|
/* ── Skeleton shimmer ───────────────────────── */
|
|
.skeleton {
|
|
background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
|
|
background-size: 200% 100%;
|
|
animation: shimmer 1.4s infinite;
|
|
}
|
|
.dark .skeleton {
|
|
background: linear-gradient(90deg, #1e293b 25%, #334155 50%, #1e293b 75%);
|
|
background-size: 200% 100%;
|
|
}
|
|
|
|
/* ── Utility classes ────────────────────────── */
|
|
.line-clamp-1 { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
|
|
.line-clamp-2 { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
|
|
.line-clamp-3 { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
|
|
|
|
/* ── Admin component tokens ─────────────────── */
|
|
@layer components {
|
|
/* Card / panel */
|
|
.cp-card {
|
|
@apply bg-white dark:bg-gray-900 rounded-2xl border border-slate-200/70 dark:border-gray-700/50 shadow-sm;
|
|
}
|
|
|
|
/* Form inputs */
|
|
.cp-input {
|
|
@apply w-full h-10 bg-white dark:bg-gray-800 border border-slate-300 dark:border-gray-600
|
|
rounded-xl px-3 text-sm text-slate-900 dark:text-slate-100
|
|
placeholder-slate-400 dark:placeholder-slate-500
|
|
focus:outline-none focus:ring-2 focus:ring-primary-500/50 focus:border-primary-500
|
|
transition-colors;
|
|
}
|
|
.cp-textarea {
|
|
@apply bg-white dark:bg-gray-800 border border-slate-300 dark:border-gray-600
|
|
rounded-xl px-3 py-2 text-sm text-slate-900 dark:text-slate-100
|
|
placeholder-slate-400 dark:placeholder-slate-500
|
|
focus:outline-none focus:ring-2 focus:ring-primary-500/50 focus:border-primary-500
|
|
transition-colors w-full;
|
|
}
|
|
.cp-select {
|
|
@apply w-full h-10 bg-white dark:bg-gray-800 border border-slate-300 dark:border-gray-600
|
|
rounded-xl px-3 text-sm text-slate-900 dark:text-slate-100
|
|
focus:outline-none focus:ring-2 focus:ring-primary-500/50 focus:border-primary-500
|
|
transition-colors;
|
|
}
|
|
.cp-label {
|
|
@apply block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5;
|
|
}
|
|
|
|
/* Buttons — base styles inlined to avoid @apply on component classes */
|
|
.cp-btn-primary {
|
|
@apply inline-flex items-center justify-center gap-2 px-4 py-2 rounded-xl text-sm font-semibold transition-all duration-150 disabled:opacity-50 disabled:cursor-not-allowed bg-primary-600 hover:bg-primary-700 active:bg-primary-800 text-white shadow-sm;
|
|
}
|
|
.cp-btn-secondary {
|
|
@apply inline-flex items-center justify-center gap-2 px-4 py-2 rounded-xl text-sm font-medium transition-all duration-150 disabled:opacity-50 disabled:cursor-not-allowed bg-slate-100 dark:bg-gray-700 hover:bg-slate-200 dark:hover:bg-gray-600 text-slate-700 dark:text-slate-200;
|
|
}
|
|
.cp-btn-danger {
|
|
@apply inline-flex items-center justify-center gap-2 px-4 py-2 rounded-xl text-sm font-semibold transition-all duration-150 disabled:opacity-50 disabled:cursor-not-allowed bg-red-600 hover:bg-red-700 active:bg-red-800 text-white shadow-sm;
|
|
}
|
|
.cp-btn-ghost {
|
|
@apply inline-flex items-center justify-center gap-2 px-4 py-2 rounded-xl text-sm font-medium transition-all duration-150 disabled:opacity-50 disabled:cursor-not-allowed hover:bg-slate-100 dark:hover:bg-gray-700 text-slate-600 dark:text-slate-300;
|
|
}
|
|
|
|
/* Table action buttons */
|
|
.cp-action-view { @apply p-1.5 rounded-lg text-slate-400 hover:text-blue-600 hover:bg-blue-50 dark:hover:bg-blue-500/10 dark:hover:text-blue-400 transition-colors; }
|
|
.cp-action-edit { @apply p-1.5 rounded-lg text-slate-400 hover:text-primary-600 hover:bg-primary-50 dark:hover:bg-primary-500/10 dark:hover:text-primary-400 transition-colors; }
|
|
.cp-action-delete { @apply p-1.5 rounded-lg text-slate-400 hover:text-red-600 hover:bg-red-50 dark:hover:bg-red-500/10 dark:hover:text-red-400 transition-colors; }
|
|
|
|
/* Stat card — cp-card inlined to avoid @apply on component class */
|
|
.cp-stat {
|
|
@apply bg-white dark:bg-gray-900 rounded-2xl border border-slate-200/70 dark:border-gray-700/50 shadow-sm p-5 flex items-start gap-4;
|
|
}
|
|
.cp-stat-icon {
|
|
@apply w-11 h-11 rounded-xl flex items-center justify-center shrink-0;
|
|
}
|
|
|
|
/* Section heading inside a card */
|
|
.cp-section-title {
|
|
@apply text-sm font-semibold text-slate-700 dark:text-slate-200 mb-4;
|
|
}
|
|
|
|
/* Info rows (label + value pairs) */
|
|
.cp-info-row {
|
|
@apply flex items-center justify-between py-2.5 border-b border-slate-100 dark:border-gray-700/50 last:border-0;
|
|
}
|
|
.cp-info-label { @apply text-xs text-slate-500 dark:text-slate-400; }
|
|
.cp-info-value { @apply text-sm font-medium text-slate-800 dark:text-slate-200; }
|
|
}
|