/* ============================================================================ الهوية البصرية — جامعة حمص / كلية الهندسة المعلوماتية ============================================================================ البنية: 1) طبقة التوكنات : ألوان الهوية على شكل متغيرات نهارية وليلية (مبنية فوق سلسلة متغيرات Bootstrap 5.3 — بلا !important) 2) طبقة المكونات : قواعد واحدة تستخدم التوكنات — يعمل النهاري والليلي تلقائياً بتغيير data-bs-theme بلا أي تكرار 3) مكونات الموقع : الشريط العلوي، الخلفية الثنائية، زر الثيم... 4) مكتبات خارجية : ربط Choices.js بنفس التوكنات لوحة الألوان: Forest : #428177 / #054239 / #002623 (الأساسي) Golden Wheat : #edebe0 / #b9a779 / #988561 (الثانوي/التمييز) Deep Umber : #6b1f2a / #4a151e / #260f14 (التحذير/الخلفيات الحمراء) Charcoal : #ffffff / #3d3a3b / #161616 (المحايد/النصوص) ============================================================================ */ /* ============================================================================ 1) طبقة التوكنات — نظامان لونيان عبر متغيرات الهوية ============================================================================ */ :root { /* --- الهوية: القيم النهارية --- */ --brand-forest: #054239; /* أخضر غامق — العلامة الأساسية نهاراً */ --brand-forest-hover: #002623; /* أغمق للتفاعل (hover) */ --brand-gold: #988561; /* قمحي معتدل — التمييز نهاراً */ --brand-gold-soft: #b9a779; /* قمحي فاتح — الشريط العلوي */ --brand-gold-pale: #edebe0; /* قمحي شاحب — خلفيات لطيفة */ --brand-umber: #6b1f2a; /* خمري — التحذيرات والفشل */ --brand-umber-deep: #4a151e; /* أغمق للتفاعل */ --brand-ink: #161616; /* حبر النصوص والخلفيات الداكنة */ --brand-ink-soft: #3d3a3b; /* رمادي فحمي للنصوص الثانوية */ --brand-paper: #ffffff; /* أبيض الورق */ --brand-surface-dark: #161616; /* سطح غامق دائم: ترويسات/أزرار داكنة تظل غامقة بالوضعين */ /* --- ربط سلسلة Bootstrap بالهوية (نهاري) --- تغيير هذه المتغيرات يعيد تلوين كل مكونات المكتبة دفعة واحدة: أزرار primary وروابط وجداول وتركيز حقول... بلا !important وبلا تكرار قواعد */ --bs-primary: #054239; --bs-primary-rgb: 5, 66, 57; --bs-link-color: #054239; --bs-link-color-rgb: 5, 66, 57; --bs-link-hover-color: #002623; --bs-link-hover-color-rgb: 0, 38, 35; --bs-body-color: #161616; --bs-body-bg: #f8f9fa; --bs-emphasis-color: #002623; --bs-secondary-color: rgba(22, 22, 22, 0.65); --bs-border-color: rgba(61, 58, 59, 0.18); --bs-focus-ring-color: rgba(5, 66, 57, 0.25); /* توكنات مشتقة داخلياً (لا تُستخدم مباشرة خارج الملف) */ --top-bar-color: var(--brand-gold-soft); --logo-bg-color: #DCFFF8; /* تظليل شعار الكلية في الوضع الفاتح */ } /* --- الوضع الليلي: نفس التوكنات بقيم داكنة --- سطر واحد في JS يبدّل data-bs-theme على فتنقلب الهوية كاملة */ [data-bs-theme="dark"] { --brand-forest: #428177; /* أخضر أفتح ليُقرأ على الداكن */ --brand-forest-hover: #054239; --brand-gold: #b9a779; /* ذهبي أكثر إشراقاً ليلاً */ --brand-gold-soft: #988561; /* الشريط العلوي أعمق ليلاً */ --brand-umber: #6b1f2a; --brand-umber-deep: #260f14; --brand-ink: #e0e0e0; /* "الحبر" ليلاً = نص فاتح */ --brand-ink-soft: #adb5bd; --brand-paper: #161616; --brand-surface-dark: #212529; /* يظل غامقاً ليلاً — أفتح قليلاً من الخلفية لتمييز الترويسات */ --bs-primary: #428177; --bs-primary-rgb: 66, 129, 119; --bs-link-color: #428177; --bs-link-color-rgb: 66, 129, 119; --bs-link-hover-color: #054239; --bs-body-color: #e0e0e0; --bs-body-bg: #121212; --bs-emphasis-color: #ffffff; --bs-secondary-color: #adb5bd; --bs-border-color: rgba(224, 224, 224, 0.16); --bs-focus-ring-color: rgba(66, 129, 119, 0.35); --logo-bg-color: #00604D; /* ضروري ليلاً: يجعل bg-light يظهر داكناً تلقائياً (رؤوس البطاقات والتنبيهات) */ --bs-light-rgb: 33, 37, 41; } /* الأزرار الملونة القديمة (bg-success/bg-danger...) بقيت ألوان Bootstrap الافتراضية لأنها دلالات وظيفية (نجاح/خطر) لا هوية — وضبط الوضع الليلي لها موجود أدناه في طبقة المكونات بلمسة واحدة لكل لون */ /* ============================================================================ 2) طبقة المكونات — قاعدة واحدة لكل مكوّن، تعمل بالوضعين ============================================================================ */ body { font-family: "Tajawal", sans-serif; color: var(--bs-body-color); background-color: var(--bs-body-bg); transition: background-color 0.3s ease, color 0.3s ease; } /* --- ربط ألوان الهوية بمكونات Bootstrap عبر متغيراتها الرسمية --- */ .btn-primary { --bs-btn-bg: var(--brand-forest); --bs-btn-border-color: var(--brand-forest); --bs-btn-hover-bg: var(--brand-forest-hover); --bs-btn-hover-border-color: var(--brand-forest-hover); --bs-btn-active-bg: var(--brand-forest-hover); --bs-btn-active-border-color: var(--brand-forest-hover); --bs-btn-disabled-bg: var(--brand-forest); --bs-btn-disabled-border-color: var(--brand-forest); } .btn-outline-primary { --bs-btn-color: var(--brand-forest); --bs-btn-border-color: var(--brand-forest); --bs-btn-hover-bg: var(--brand-forest); --bs-btn-hover-border-color: var(--brand-forest); --bs-btn-active-bg: var(--brand-forest); --bs-btn-active-border-color: var(--brand-forest); } .btn-dark { --bs-btn-bg: var(--brand-surface-dark); --bs-btn-border-color: var(--brand-surface-dark); --bs-btn-color: #fff; --bs-btn-hover-bg: var(--brand-forest); --bs-btn-hover-border-color: var(--brand-forest); --bs-btn-hover-color: #fff; --bs-btn-active-bg: var(--brand-forest); --bs-btn-active-border-color: var(--brand-forest); --bs-btn-active-color: #fff; } /* تمييز الاسم الرئيسي (text-primary) يتبع الهوية */ .text-primary { color: var(--brand-forest) !important; } /* "الحبر الدائم": نص غامق دائماً مهما كان الوضع — للنص فوق شارات القمحي */ .text-always-dark { color: #1d1d1b !important; } /* --- الألوان الوظيفية بالتظليل المعتاد للموقع (نجاح/معلومات/حدود) --- دلالات Bootstrap محفوظة، بس بدرجات الموقع المعتادة بدل الافتراضي الصارخ */ .bg-success { background-color: #3b6e3b !important; } .bg-info { background-color: #5a6b8a !important; } .border-success { border-color: #3b6e3b !important; } .border-danger { border-color: #9e1b32 !important; } /* bg-primary يحمل نصاً أبيض دائماً (عناصر وشرائح خضراء دون text-white) */ .bg-primary { color: #ffffff !important; } /* رؤوس الجداول الداكنة: سطح غامق دائم بنص فاتح — مقروء بالوضعين */ .table-dark { --bs-table-bg: var(--brand-surface-dark); --bs-table-color: #fff; --bs-table-border-color: rgba(255, 255, 255, 0.08); color: #fff; } /* bg-dark: بطاقات وترويسات داكنة — تظل داكنة بنص فاتح مهما كان الوضع */ .bg-dark { background-color: var(--brand-surface-dark) !important; color: #fff !important; } .text-dark { color: #1d1d1b !important; } .text-light { color: #f8f9fa !important; } /* استثناء: نص داكن فوق خلفية تحذير صفراء يبقى داكناً نهاراً (الصفراء فاتحة والداكن يُقرأ)، وليلاً تعالجه قاعدة الوضع الغامق أعلاه */ /* خلفيات البيانات القديمة المكتوبة inline بلون القمحي — تظل تعمل عبر توكنها */ /* ============================================================================ 3) مكونات الموقع ============================================================================ */ /* الشريط الذهبي أعلى الصفحة */ .top-bar { width: 100%; height: 5px; background-color: var(--top-bar-color); } .navbar-brand { font-weight: 700; letter-spacing: 0.5px; } /* زر تبديل الوضعين — إطار قمحي رقيق يتفاعل بمرور المؤشر */ .theme-toggle { padding: 5px 10px; border: 1px solid var(--brand-gold); border-radius: 8px; color: var(--brand-gold); background: transparent; transition: all 0.3s; cursor: pointer; } .theme-toggle:hover { color: var(--brand-paper); background: var(--brand-gold); } /* خلفية الأرقام الثنائية (تأثير ماتريكس) — أخضر نهاراً وذهبي ليلاً */ .binary-bg { position: fixed; top: 0; left: 0; z-index: -1; overflow: hidden; width: 100%; height: 100%; pointer-events: none; display: flex; flex-direction: column; flex-wrap: wrap; gap: 20px; padding: 20px; -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 70%); mask-image: linear-gradient(to bottom, black 0%, transparent 70%); } .binary-bg span { font-family: "Consolas", monospace; font-size: 50px; font-weight: bold; color: var(--brand-forest); opacity: 0.04; text-shadow: 0 0 8px rgba(0, 38, 35, 0.3); transition: opacity 0.3s ease; } [data-bs-theme="dark"] .binary-bg span { color: var(--brand-gold); text-shadow: 0 0 10px rgba(194, 171, 120, 0.4); } /* منع سحب أو نسخ الشعار */ img[src*="icon-"] { pointer-events: none; -webkit-user-drag: none; } /* --- لمسات الوضع الليلي للألوان الوظيفية (تبقى دلالات Bootstrap) --- تعتيم خلفيات الشارات والجداول الثانوية ليليّاً فقط، بمقاعد متغيرات المكتبة */ [data-bs-theme="dark"] { .bg-primary { background-color: rgba(66, 129, 119, 0.55) !important; } .bg-success { background-color: rgba(59, 110, 59, 0.68) !important; } .btn-success { --bs-btn-bg: rgba(25, 135, 84, 0.55); } .bg-warning { background-color: rgba(255, 193, 7, 0.22) !important; border: 0.1px solid rgba(255, 215, 0, 0.34); } .btn-warning { --bs-btn-color: #ffffff; --bs-btn-bg: rgba(255, 193, 7, 0.28); --bs-btn-border-color: rgba(255, 193, 7, 0.41); --bs-btn-hover-color: #ffffff; --bs-btn-hover-bg: rgba(196, 161, 57, 0.73); } /* شارة warning ليلاً: خلفية صفراء شفافة لا تُقرأ مع نصها الغامق الافتراضي — نحوّل النص والحدود للعنبر الفاتح مع رقاقة أصفر داكنة يبقى التحذير مميزاً ومقروءاً */ .badge.bg-warning, .bg-warning.text-dark { color: #ffe9a8 !important; background-color: rgba(255, 193, 7, 0.16) !important; border: 1px solid rgba(255, 209, 102, 0.45); } .alert-warning { color: #ffe9a8 !important; } .btn-outline-dark { --bs-btn-color: var(--brand-ink-soft); --bs-btn-border-color: var(--brand-ink-soft); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--brand-ink-soft); --bs-btn-hover-border-color: var(--brand-ink-soft); --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--brand-ink-soft); --bs-btn-active-border-color: var(--brand-ink-soft); --bs-btn-disabled-color: rgba(173, 181, 189, 0.55); --bs-btn-disabled-border-color: rgba(173, 181, 189, 0.45); } /* شفافية لطيفة لخلفيات الشارات الملوّنة ليلاً */ .bg-secondary, .btn-secondary, .bg-warning, .btn-warning, .bg-success, .btn-success, .bg-danger, .btn-danger { --bs-bg-opacity: 0.5; } /* الجداول الثانوية تُقرأ ليليّاً */ .table-secondary { --bs-table-color: rgba(255, 255, 255, 0.46); --bs-table-bg: #212529; --bs-table-border-color: rgba(203, 204, 206, 0.28); --bs-table-striped-bg: #212529; --bs-table-striped-color: rgba(255, 255, 255, 0.46); --bs-table-active-bg: #212529; --bs-table-active-color: rgba(255, 255, 255, 0.46); --bs-table-hover-bg: #212529; --bs-table-hover-color: rgba(255, 255, 255, 0.46); } } /* ============================================================================ 4) مكتبة Choices.js — تُلقّم من توكنات الهوية نفسها ============================================================================ */ :root { --choices-primary-color: var(--brand-forest); --choices-bg-color: #ffffff; --choices-bg-color-dropdown: #ffffff; --choices-text-color: #1d1d1b; --choices-keyline-color: #dee2e6; --choices-highlighted-color: #4a7d77; } [data-bs-theme="dark"] { --choices-primary-color: #428177; --choices-bg-color: #1e1e1e; --choices-bg-color-dropdown: #1e1e1e; --choices-text-color: #e0e0e0; --choices-keyline-color: #2c2c2c; --choices-highlighted-color: #33625c; } /* إخفاء السهم الافتراضي تماماً */ .choices[data-type*="select-one"]::after, .choices[data-type*="select-one"] .choices__inner::after { content: none !important; display: none !important; background-image: none !important; } /* سهم مخصص (ذهبي) على اليسار — لونُه من توكن الهوية */ .choices[data-type*="select-one"] .choices__inner { padding-right: 1rem !important; padding-left: 2.5rem !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23988561' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-position: left 1rem center; background-size: 1rem; background-repeat: no-repeat; } .choices__inner { border-color: var(--choices-keyline-color) !important; border-radius: 8px !important; color: var(--choices-text-color) !important; background-color: var(--choices-bg-color) !important; } .choices__input { color: var(--choices-text-color) !important; background-color: transparent !important; } .choices__list--dropdown { z-index: 1050 !important; border-color: var(--choices-keyline-color) !important; color: var(--choices-text-color) !important; background-color: var(--choices-bg-color-dropdown) !important; } .choices__item--choice { border-bottom: 1px solid var(--choices-keyline-color) !important; color: var(--choices-text-color) !important; } .choices__item--choice.is-highlighted { color: #ffffff !important; background-color: var(--choices-highlighted-color) !important; } .choices__list--single .choices__item { color: var(--choices-text-color) !important; transition: color 0.3s ease; } .choices__list--dropdown .choices__input { color: var(--choices-text-color) !important; background-color: var(--choices-bg-color-dropdown) !important; } /* ============================================================================ 5) تفاصيل استخدامية ============================================================================ */ /* عرض مريح لاسم المقرر في كل الجداول */ .course-name-cell { min-width: 230px; word-break: break-word; } @media (max-width: 767.98px) { .course-name-cell { min-width: 200px; } } .form-switch .form-check-input { margin-inline-start: 0 !important; margin-inline-end: 0.5rem !important; }