/* * theme.css — تم شب/روز سراسری * با اضافه کردن کلاس "dark" روی (توسط assets/js/theme.js) فعال می‌شه. * چون پروژه با کلاس‌های یوتیلیتی Tailwind (نه dark: variant) نوشته شده، اینجا با override * مستقیم پرکاربردترین کلاس‌های رنگی، یک پوسته‌ی تاریک سراسری روی همه‌ی صفحات اعمال می‌کنیم. * * پالت: آبی-تیره (Navy) — هیچ‌جا از خاکستری خام (gray/#555/#888) یا * rgba(255,255,255,0.1) استفاده نشده؛ همه‌چیز بر پایه‌ی همین چند رنگ ساخته شده: * #0f1420 — پس‌زمینه‌ی صفحه / عمیق‌ترین لایه * #1a1f2e — پس‌زمینه‌ی کارت‌ها و بخش‌ها * #141a2b — لایه‌ی میانی (چیپ/برچسب ساده) * #202940 — لایه‌ی روشن‌تر (هاور/چیپ فعال) * #0d1526 — پس‌زمینه‌ی فیلدهای ورودی * #2a3a5c — border / outline یکدست همه‌جا * #8899bb — متن ثانویه */ html.dark { color-scheme: dark; } html.dark body { background-color: #0f1420; } /* پس‌زمینه‌های خاکستری/سفید روشن -> آبی‌تیره */ html.dark .bg-white { background-color: #1a1f2e !important; } html.dark .bg-slate-50 { background-color: #0f1420 !important; } html.dark .bg-slate-100 { background-color: #141a2b !important; } html.dark .bg-slate-200 { background-color: #202940 !important; } html.dark .bg-gray-50 { background-color: #0f1420 !important; } html.dark .bg-gray-100 { background-color: #141a2b !important; } html.dark .bg-gray-200 { background-color: #202940 !important; } html.dark .bg-slate-900 { background-color: #0a0e17 !important; } /* یوتیلیتی‌های bg-*/opacity (مثل bg-slate-50/50) کلاس CSS کاملاً جدا و مجزایی می‌سازن (Tailwind) که با override بالا گرفته نمی‌شدن و همون پس‌زمینه‌ی خاکستری‌روشن نیمه‌شفاف رو نگه می‌داشتن — همینا باعث می‌شدن کادر ورودی‌ها و هدر بخش‌ها در حالت شب "خاکستری" به‌نظر بیان. همه‌شون رو هم به نسخه‌ی آبی-تیره‌ی هم‌خانواده با #0d1526 / #2a3a5c تبدیل می‌کنیم. */ html.dark .bg-slate-50\/20 { background-color: rgba(13, 21, 38, 0.5) !important; } html.dark .bg-slate-50\/40 { background-color: rgba(13, 21, 38, 0.6) !important; } html.dark .bg-slate-50\/50 { background-color: rgba(13, 21, 38, 0.7) !important; } html.dark .bg-slate-50\/60 { background-color: rgba(13, 21, 38, 0.75) !important; } html.dark .bg-slate-50\/70 { background-color: rgba(13, 21, 38, 0.8) !important; } html.dark .bg-slate-50\/80 { background-color: rgba(13, 21, 38, 0.85) !important; } html.dark .bg-slate-200\/50 { background-color: rgba(42, 58, 92, 0.5) !important; } html.dark .bg-gray-50\/20, html.dark .bg-gray-50\/40, html.dark .bg-gray-50\/50, html.dark .bg-gray-50\/60, html.dark .bg-gray-50\/70, html.dark .bg-gray-50\/80 { background-color: rgba(13, 21, 38, 0.75) !important; } /* پس‌زمینه‌های رنگی روشن (بج/برچسب/هشدار) -> نسخه‌ی تاریک‌شون (همچنان بر پایه‌ی آبی، نه خاکستری) */ html.dark .bg-blue-50 { background-color: #15243f !important; } html.dark .bg-blue-100 { background-color: #1e3a5f !important; } html.dark .bg-emerald-50 { background-color: #0e2620 !important; } html.dark .bg-emerald-100 { background-color: #14342a !important; } html.dark .bg-rose-50 { background-color: #341520 !important; } html.dark .bg-rose-100 { background-color: #3f1d2b !important; } html.dark .bg-red-50 { background-color: #341515 !important; } html.dark .bg-amber-50 { background-color: #34270f !important; } html.dark .bg-yellow-50 { background-color: #34270f !important; } /* خطوط/حاشیه‌ها — یک‌دست #2a3a5c (آبی-تیره) به‌جای هر نوع خاکستری */ html.dark .border-slate-100, html.dark .border-slate-200, html.dark .border-slate-300, html.dark .border-gray-100, html.dark .border-gray-200 { border-color: #2a3a5c !important; } /* یوتیلیتی divide-* (خطوط بین ردیف‌های جدول) از سلکتور متفاوتی استفاده می‌کنه (Tailwind) */ html.dark .divide-slate-100 > :not([hidden]) ~ :not([hidden]), html.dark .divide-slate-200 > :not([hidden]) ~ :not([hidden]), html.dark .divide-gray-100 > :not([hidden]) ~ :not([hidden]), html.dark .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: #2a3a5c !important; } /* متن‌ها — اول‌ها (تیتر/متن اصلی) با تینت آبی روشن، آخری‌ها (کم‌رنگ‌ترین) دقیقاً متن ثانویه‌ی خواسته‌شده */ html.dark .text-slate-900, html.dark .text-gray-900 { color: #eaf0ff !important; } html.dark .text-slate-800, html.dark .text-gray-800 { color: #dbe4f7 !important; } html.dark .text-slate-700, html.dark .text-gray-700 { color: #c5d3ee !important; } html.dark .text-slate-600, html.dark .text-gray-600 { color: #aabbd6 !important; } html.dark .text-slate-500, html.dark .text-gray-500 { color: #a0b4ce !important; } html.dark .text-slate-400, html.dark .text-gray-400 { color: #8899bb !important; } /* در جاهایی که پس‌زمینه‌ی تیره‌ی slate-100/200 داریم (badge، chip، دکمه‌ی غیرفعال) رنگ متن باید به‌اندازه کافی روشن باشه تا خوانا بشه */ html.dark .bg-slate-100, html.dark .bg-gray-100 { color: #dbe4f7; } html.dark .bg-slate-200, html.dark .bg-gray-200 { color: #eaf0ff; } /* فرم‌ها */ html.dark input, html.dark select, html.dark textarea { background-color: #0d1526 !important; color: #dbe4f7 !important; border-color: #2a3a5c !important; outline-color: #2a3a5c !important; } html.dark input:focus, html.dark select:focus, html.dark textarea:focus { border-color: #3a5080 !important; outline-color: #3a5080 !important; } html.dark input::placeholder, html.dark textarea::placeholder { color: #5a6f9c !important; } /* سایه‌ها روی پس‌زمینه‌ی تاریک ملایم‌تر باشن (بر پایه‌ی سیاه، نه خاکستری) */ html.dark .shadow, html.dark .shadow-sm, html.dark .shadow-md, html.dark .shadow-lg, html.dark .shadow-xl { box-shadow: 0 1px 3px rgba(0, 0, 0, .6) !important; } /* اسکرول‌بار */ html.dark ::-webkit-scrollbar-track { background: #0f1420; } html.dark ::-webkit-scrollbar-thumb { background: #2a3a5c; } /* ===== HOVER STATE OVERRIDES ===== */ /* بدون این override‌ها، hover:bg-slate-50 در حالت تاریک همون رنگ روشن Tailwind رو اعمال می‌کنه که روی پس‌زمینه‌ی آبی‌تیره کاملاً ناخوانا و زشت به‌نظر می‌رسه */ html.dark .hover\:bg-slate-50:hover, html.dark .hover\:bg-gray-50:hover { background-color: #202940 !important; } html.dark .hover\:bg-slate-100:hover, html.dark .hover\:bg-gray-100:hover { background-color: #253050 !important; } html.dark .hover\:bg-slate-200:hover, html.dark .hover\:bg-gray-200:hover { background-color: #2a3a5c !important; } html.dark .hover\:bg-white:hover { background-color: #202940 !important; } html.dark .hover\:bg-blue-50:hover { background-color: #15243f !important; } html.dark .hover\:bg-blue-50\/30:hover { background-color: rgba(21, 36, 63, 0.5) !important; } html.dark .hover\:bg-blue-50\/40:hover { background-color: rgba(21, 36, 63, 0.6) !important; } html.dark .hover\:border-blue-200:hover { border-color: #3a5080 !important; } html.dark .hover\:ring-blue-300:hover { --tw-ring-color: #3a5080 !important; } /* رنگ متن هنگام hover — blue-600 در تاریکی کم‌نور می‌شه، blue-400 روشن‌تر است */ html.dark .hover\:text-blue-600:hover { color: #60a5fa !important; } html.dark .hover\:text-slate-900:hover, html.dark .hover\:text-gray-900:hover { color: #eaf0ff !important; } html.dark .hover\:text-slate-700:hover, html.dark .hover\:text-gray-700:hover { color: #dbe4f7 !important; } /* ===== SELECT