/* ============================================================ dark-theme.css — تكامل مكوّنات الطرف الثالث مع الوضع الداكن ============================================================ الغالبية العظمى من واجهة النظام تتكيّف تلقائيًا مع الوضع الداكن فور تغيير رموز الألوان في colors.css (لأن كل ملفات الأنماط الأخرى تستهلك تلك الرموز بدل الألوان الثابتة). هذا الملف يعالج فقط ما لا يمكن لرموز الألوان الوصول إليه: مكتبات خارجية تحمل ألوانها الخاصة (Select2 / FullCalendar) وشريط التمرير. يُحمَّل بعد كل ملفات الأنماط الأخرى في كل التخطيطات. ============================================================ */ /* ============================================================ زر تبديل السمة — يظهر بنفس المظهر في الوضعين، فقط الأيقونة الظاهرة (قمر/شمس) تتبدّل حسب data-theme النشطة على ── */ .tmkn-theme-toggle { width: 38px; height: 38px; padding: 0; display: flex; align-items: center; justify-content: center; border: 1px solid var(--c-border-2); background: var(--c-surface); color: var(--c-text-muted); border-radius: 50%; font-size: .95rem; cursor: pointer; flex-shrink: 0; transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .15s ease; } .tmkn-theme-toggle:hover { background: var(--c-primary-soft-bg); color: var(--c-primary); border-color: var(--c-primary-soft-border); } .tmkn-theme-toggle:active { transform: scale(.92); } .tmkn-theme-toggle:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; } .tmkn-theme-icon-light { display: none; } [data-theme="dark"] .tmkn-theme-icon-dark { display: none; } [data-theme="dark"] .tmkn-theme-icon-light { display: inline-block; } /* موضع عائم للتخطيطات التي لا تملك شريط تنقّل (_PublicLayout) */ .tmkn-theme-toggle-floating { position: fixed; top: 18px; inset-inline-start: 18px; z-index: 1100; } .tmkn-theme-toggle-floating .tmkn-theme-toggle { box-shadow: var(--c-shadow-md); } /* موضع زاوية لصفحات الدخول المستقلة (Login/Lockout) */ .tmkn-theme-toggle-corner { position: absolute; top: 20px; inset-inline-end: 20px; z-index: 20; } /* ============================================================ شبكة أمان — كلاسات Bootstrap الدلالية الجاهزة (.bg-light, .bg-white) لا تتغيّر مع data-bs-theme="dark" افتراضيًا (Bootstrap لا يُعيد تعريف --bs-light/--bs-white في وضعه الداكن، بل الألوان المحايدة فقط). تُستخدم هذه الكلاسات مباشرة في بعض الواجهات (لوحة التحكم، نماذج الحذف...) لذا تُعالَج هنا مرة واحدة لكل النظام ── */ [data-theme="dark"] .bg-light { background-color: var(--c-surface-2) !important; } [data-theme="dark"] .bg-white { background-color: var(--c-surface) !important; } /* .btn-light مستخدم على نطاق واسع كزر "رجوع/إلغاء" ثانوي — نفس مشكلة .bg-light: Bootstrap لا يُغيّر --bs-light في وضعه الداكن */ [data-theme="dark"] .btn-light { --bs-btn-bg: var(--c-surface-2); --bs-btn-border-color: var(--c-border-2); --bs-btn-color: var(--c-text-body); --bs-btn-hover-bg: var(--c-border-2); --bs-btn-hover-border-color: var(--c-border-2); --bs-btn-hover-color: var(--c-text-heading); --bs-btn-active-bg: var(--c-border-2); --bs-btn-active-border-color: var(--c-border-2); --bs-btn-active-color: var(--c-text-heading); } /* .text-dark تبقى شبه سوداء دائمًا (Bootstrap لا يُغيّر --bs-dark في وضعه الداكن) — كانت لتصبح غير مقروءة تقريبًا فوق خلفية داكنة */ [data-theme="dark"] .text-dark { color: var(--c-text-heading) !important; } [data-theme="dark"] .table-light { --bs-table-bg: var(--c-surface-2); --bs-table-color: var(--c-text-body); } [data-theme="dark"] .border-white { border-color: var(--c-border-2) !important; } /* ============================================================ Select2 ============================================================ */ [data-theme="dark"] .select2-container--bootstrap-5 .select2-selection { background-color: var(--c-surface) !important; color: var(--c-text-heading); } [data-theme="dark"] .select2-container--bootstrap-5 .select2-selection__rendered { color: var(--c-text-heading) !important; } [data-theme="dark"] .select2-container--bootstrap-5 .select2-selection__arrow { color: var(--c-text-muted); } [data-theme="dark"] .select2-dropdown { background-color: var(--c-surface) !important; border-color: var(--c-border-2) !important; } [data-theme="dark"] .select2-results__option { color: var(--c-text-body) !important; } [data-theme="dark"] .select2-results__option--highlighted[aria-selected] { background-color: var(--c-primary) !important; color: var(--c-white) !important; } [data-theme="dark"] .select2-results__option[aria-selected="true"]:not(.select2-results__option--highlighted) { background-color: var(--c-green-50) !important; color: var(--c-text-heading) !important; } [data-theme="dark"] .select2-search--dropdown .select2-search__field { background-color: var(--c-surface) !important; border-color: var(--c-border-2) !important; color: var(--c-text-body) !important; } [data-theme="dark"] .select2-results__group { background-color: var(--c-surface-2) !important; color: var(--c-text-heading) !important; } [data-theme="dark"] .select2-container--bootstrap-5 .select2-selection__placeholder { color: var(--c-text-muted-light); } /* ============================================================ FullCalendar — يستخدم هذا النظام غلافًا مخصّصًا (.gov-calendar) مُعرَّفًا بالكامل عبر رموز colors.css في site.css ويتكيّف تلقائيًا؛ الشبكة الاحتياطية هنا فقط لأي عنصر FullCalendar عام غير مغطّى بذلك الغلاف (نوافذ "المزيد"، عرض القائمة...) ── */ [data-theme="dark"] .fc { color: var(--c-text-body); } [data-theme="dark"] .fc-theme-standard .fc-scrollgrid, [data-theme="dark"] .fc-theme-standard td, [data-theme="dark"] .fc-theme-standard th { border-color: var(--c-border-1); } [data-theme="dark"] .fc-more-popover, [data-theme="dark"] .fc-popover { background-color: var(--c-surface); border-color: var(--c-border-2); } [data-theme="dark"] .fc-popover-header { background-color: var(--c-surface-2); color: var(--c-text-heading); } /* ============================================================ شريط التمرير — على مستوى المستند بالكامل ============================================================ */ [data-theme="dark"] { scrollbar-color: var(--c-border-2) var(--c-bg-1); } [data-theme="dark"] ::-webkit-scrollbar { width: 10px; height: 10px; } [data-theme="dark"] ::-webkit-scrollbar-track { background: var(--c-bg-1); } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--c-border-2); border-radius: 6px; } [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: var(--c-text-muted-light); } /* ============================================================ الطباعة — تبقى دائمًا فاتحة بصرف النظر عن السمة النشطة على الشاشة؛ خلفية داكنة على الورق تهدر الحبر وتبدو غير رسمية ── */ @media print { :root[data-theme="dark"] { --c-bg-1: #FFFFFF; --c-bg-2: #F3F5F7; --c-surface: #FFFFFF; --c-surface-2: #F3F5F7; --c-border-1: #E9ECEF; --c-border-2: #D5D9DD; --c-text-heading: #1F2937; --c-text-body: #4B5563; --c-text-muted: #6B7280; --c-text-muted-light: #8B949E; } [data-theme="dark"] body { background: #FFFFFF !important; color: #1F2937 !important; } }