/* * Styles/dark.css - الأنماط الخاصة بالوضع الداكن (Dark Mode) * * هذا الملف يعمل فقط عندما يكون وسم يحتوي على الخاصية data-theme="dark" */ /* -------------------------------------- */ /* إعادة تعريف متغيرات الألوان للثيم الداكن */ /* -------------------------------------- */ html[data-theme="dark"] { /* تغيير الألوان الرئيسية */ --primary-color: #17a2b8; /* لون أساسي أفتح قليلاً */ --secondary-color: #6c757d; --text-color: #f8f9fa; /* نص فاتح */ --background-color: #1e222a; /* خلفية داكنة جداً */ --card-background: #2b303b; /* خلفية البطاقات (أغمق قليلاً من الخلفية) */ --border-color: #495057; /* خطوط فاصلة أغمق */ } /* -------------------------------------- */ /* تطبيق الأنماط على العناصر */ /* -------------------------------------- */ html[data-theme="dark"] body { background-color: var(--background-color); color: var(--text-color); } html[data-theme="dark"] a { color: var(--primary-color); } /* شريط التنقل والبطاقات */ html[data-theme="dark"] .navbar, html[data-theme="dark"] .news-card, html[data-theme="dark"] .card { background-color: var(--card-background); border-color: var(--border-color) !important; } /* حقول الإدخال */ html[data-theme="dark"] .form-control { background-color: #3e4451; /* خلفية أغمق لمدخلات النص */ color: var(--text-color); border-color: var(--border-color); } html[data-theme="dark"] .form-control:focus { background-color: #3e4451; color: var(--text-color); border-color: var(--primary-color); box-shadow: 0 0 0 0.25rem rgba(23, 162, 184, 0.25); } /* الجداول في لوحة التحكم */ html[data-theme="dark"] .table { color: var(--text-color); } html[data-theme="dark"] .table thead th { border-bottom-color: var(--border-color); } html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: #333842; /* لون للصفوف الفردية */ } /* ------------------------------------------------------------------- تنسيقات شريط الأخبار العاجلة المتحرك (News Ticker) ------------------------------------------------------------------- */ .ticker-wrap { overflow: hidden; white-space: nowrap; position: relative; } .ticker-move { display: inline-block; white-space: nowrap; position: relative; will-change: transform; } .ticker-item { display: inline-block; margin-inline-start: 50px; } /* العناصر داخل الشريط */ .ticker-item { display: inline-block; margin-inline-end: 3rem; /* يعمل في RTL/LTR */ } /* الحركة من اليمين إلى اليسار */ @keyframes ticker { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } }