/* ============================================================================ Fancy Dark Mode — تحسينات بصرية على الوضع الليلي يُستخدم مع data-theme-mode على ============================================================================ */ /* يخبر المتصفح بالطلب النشط، فيلوّن أشرطة التمرير الأصلية ومنتقيات التاريخ ومربعات النموذج الأصلية */ html[data-theme-mode="light"] { color-scheme: light; } html[data-theme-mode="dark"] { color-scheme: dark; } /* ------------------------------------------------------------------ انتقال ناعم عند تبديل الوضع (باستثناء الأثاث الذي يجب أن يقفز فوراً) ------------------------------------------------------------------ */ html.theme-transitioning, html.theme-transitioning *, html.theme-transitioning *::before, html.theme-transitioning *::after { transition: background-color 320ms ease, border-color 320ms ease, color 320ms ease, fill 320ms ease, stroke 320ms ease, box-shadow 320ms ease !important; transition-delay: 0s !important; } /* استثناءات: عناصر لا نريد لها انتقالاً بطيئاً لأنها تُعطّل الإحساس بالسرعة */ html.theme-transitioning input[type="range"], html.theme-transitioning .progress-bar, html.theme-transitioning .spinner-border, html.theme-transitioning .spinner-grow, html.theme-transitioning canvas, html.theme-transitioning video, html.theme-transitioning iframe { transition: none !important; } /* ------------------------------------------------------------------ انتقال دائري (Circular Reveal) عبر View Transitions API يعمل في Chrome/Edge/Safari — يتجاهله Firefox بلطف ------------------------------------------------------------------ */ ::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; } ::view-transition-old(root) { z-index: 1; } ::view-transition-new(root) { z-index: 999; } html.theme-anim-dark::view-transition-new(root) { animation: fancy-reveal 520ms cubic-bezier(0.65, 0, 0.35, 1) forwards; } html.theme-anim-light::view-transition-old(root) { z-index: 999; } html.theme-anim-light::view-transition-old(root) { animation: fancy-hide 520ms cubic-bezier(0.65, 0, 0.35, 1) forwards; } @keyframes fancy-reveal { from { clip-path: circle(0% at var(--theme-anim-x, 50%) var(--theme-anim-y, 50%)); } to { clip-path: circle(150% at var(--theme-anim-x, 50%) var(--theme-anim-y, 50%)); } } @keyframes fancy-hide { from { clip-path: circle(150% at var(--theme-anim-x, 50%) var(--theme-anim-y, 50%)); } to { clip-path: circle(0% at var(--theme-anim-x, 50%) var(--theme-anim-y, 50%)); } } /* من يفضّل تقليل الحركة، نطفئ كل شيء */ @media (prefers-reduced-motion: reduce) { html.theme-transitioning, html.theme-transitioning *, html.theme-transitioning *::before, html.theme-transitioning *::after { transition: none !important; } ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; } } /* ------------------------------------------------------------------ أيقونة الشمس/القمر — Morph بدل الاستبدال الجاف يعتمد على أن العنصر يحوي .light-layout و .dark-layout كسابقاً ------------------------------------------------------------------ */ .header-theme-mode .layout-setting { position: relative; overflow: hidden; } .header-theme-mode .layout-setting .light-layout, .header-theme-mode .layout-setting .dark-layout { transition: opacity 260ms ease, transform 400ms cubic-bezier(0.68, -0.55, 0.27, 1.55); } html[data-theme-mode="light"] .header-theme-mode .layout-setting .light-layout { opacity: 1; transform: rotate(0deg) scale(1); } html[data-theme-mode="light"] .header-theme-mode .layout-setting .dark-layout { opacity: 0; transform: rotate(-90deg) scale(0.5); position: absolute; inset: 0; pointer-events: none; display: flex; align-items: center; justify-content: center; } html[data-theme-mode="dark"] .header-theme-mode .layout-setting .light-layout { opacity: 0; transform: rotate(90deg) scale(0.5); position: absolute; inset: 0; pointer-events: none; display: flex; align-items: center; justify-content: center; } html[data-theme-mode="dark"] .header-theme-mode .layout-setting .dark-layout { opacity: 1; transform: rotate(0deg) scale(1); } /* لمعة خفيفة تحيط بالأيقونة عند التمرير — إحساس "مرهف" */ .header-theme-mode .layout-setting:hover .header-link-icon { filter: drop-shadow(0 0 6px currentColor); } /* ------------------------------------------------------------------ شريط التمرير المخصص في الوضع الليلي (WebKit + Firefox) ------------------------------------------------------------------ */ html[data-theme-mode="dark"] { scrollbar-color: rgba(255,255,255,0.24) transparent; } html[data-theme-mode="dark"] ::-webkit-scrollbar { width: 10px; height: 10px; } html[data-theme-mode="dark"] ::-webkit-scrollbar-track { background: transparent; } html[data-theme-mode="dark"] ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.18); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; } html[data-theme-mode="dark"] ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.32); background-clip: padding-box; border: 2px solid transparent; } /* ------------------------------------------------------------------ تحسينات جانبية على مربعات نصية داكنة (تصحيح تباين النصوص الشبحية) ------------------------------------------------------------------ */ html[data-theme-mode="dark"] input::placeholder, html[data-theme-mode="dark"] textarea::placeholder { color: rgba(255,255,255,0.42) !important; opacity: 1; } /* اختيار النص في الوضع الليلي بلون أوضح */ html[data-theme-mode="dark"] ::selection { background: rgba(88, 101, 242, 0.45); color: #fff; } /* ------------------------------------------------------------------ قرص التحميل الأولي لا يومض عند تبديل الوضع ------------------------------------------------------------------ */ html[loader="enable"] #loader { transition: none !important; } /* ------------------------------------------------------------------ لوحة ألوان الشريط الجانبي القالب كان يثبّت لون البراند على .app-sidebar بلا أي شرط على الثيم، فكان الشريط يتجاهل data-menu-styles تماماً ويبقى ساطعاً ليلاً. المتغيّر أدناه يبقي لون البراند في الوضع الفاتح، ويحوّله إلى أسود في الوضع الليلي. ------------------------------------------------------------------ */ :root { --sidebar-bg: rgb(var(--primary-rgb)); --sidebar-border: rgba(243, 242, 249, 0.15); } html[data-theme-mode="dark"] { --sidebar-bg: #121214; --sidebar-border: rgba(255, 255, 255, 0.08); } /* القالب يهبط بنص القائمة إلى 50% أبيض ليلاً، وهي نسبة منخفضة التباين على خلفية سوداء؛ نرفعها قليلاً ليبقى النص مقروءاً */ html[data-theme-mode="dark"] .app-sidebar { --menu-prime-color: rgba(255, 255, 255, 0.68); } /* ------------------------------------------------------------------ ألوان الحدود: خلل في ترتيب القالب نفسه القالب يعرّف حدود الهيدر والقائمة الداكنة في الأسطر 8–30 من styles.css، أي قبل :root الذي يبدأ في السطر 99. وبما أن [data-...=...] و :root لهما نفس درجة الأولوية، يفوز الأخير في الترتيب دائماً وتبقى الحدود #f3f2f9 الفاتحة. هذه القواعد تعيد نفس قيم القالب لكن بعد :root فتسري فعلياً. ------------------------------------------------------------------ */ [data-menu-styles="color"], [data-menu-styles="dark"], [data-menu-styles="gradient"] { --menu-border-color: rgba(255, 255, 255, 0.1); } [data-header-styles="color"], [data-header-styles="dark"], [data-header-styles="gradient"] { --header-border-color: rgba(255, 255, 255, 0.1); --header-prime-color: rgba(255, 255, 255, 0.6); } /* ------------------------------------------------------------------ الهيدر: القالب يغطي [data-header-styles=dark][data-theme-mode=light] فقط، فتسقط عناصر .bg-body داخل الهيدر إلى أبيض بوتستراب الافتراضي عندما يكون الوضعان داكنين معاً ------------------------------------------------------------------ */ html[data-theme-mode="dark"] .app-header .bg-body { background-color: rgba(255, 255, 255, 0.06) !important; } /* ------------------------------------------------------------------ الفوتر: يأخذ سطح الثيم بدل الأبيض الثابت ------------------------------------------------------------------ */ .footer { background-color: var(--custom-white); } /* ------------------------------------------------------------------ أدوات بوتستراب التي لا تتبدّل تلقائياً: النسخة 5.3 تُبقي --bs-light-rgb ثابتاً في الثيم الداكن، كما أن القالب يفرض #fff/#000 على .table-light ------------------------------------------------------------------ */ /* بوتستراب 5.3 لا يبدّل --bs-light في الثيم الداكن، فيبقى #f8f9fa. ربطه بمتغيّر القالب يعالج .bg-light و .btn-light وكل قواعد `.card-hover:hover { background-color: var(--bs-light) }` في لوحات التحكم دفعةً واحدة، بدل تعديل كل صفحة على حدة. */ html[data-theme-mode="dark"] { --bs-light: rgb(var(--light-rgb)); --bs-light-rgb: var(--light-rgb); } html[data-theme-mode="dark"] .table-light, html[data-theme-mode="dark"] .table.table-light, html[data-theme-mode="dark"] .table thead.table-light, html[data-theme-mode="dark"] .table.table-light > :not(caption) > * > * { /* القالب يعلّم --bs-table-bg بـ !important على thead.table-light */ --bs-table-bg: rgb(var(--light-rgb)) !important; --bs-table-color: var(--default-text-color); --bs-table-border-color: var(--default-border); --bs-table-striped-bg: rgba(255, 255, 255, 0.04); --bs-table-striped-color: var(--default-text-color); --bs-table-active-bg: rgba(255, 255, 255, 0.06); --bs-table-active-color: var(--default-text-color); --bs-table-hover-bg: rgba(255, 255, 255, 0.06); --bs-table-hover-color: var(--default-text-color); background-color: rgb(var(--light-rgb)) !important; color: var(--default-text-color) !important; border-color: var(--default-border); } /* ------------------------------------------------------------------ ألوان ثابتة داخل كتل