/** * Dark Mode Styles — un-elbadil * الإصلاح: CSS يستهدف html.dark-mode (وليس body.dark-mode) ليتوافق مع الـ class المضاف في * RTL Fix: inset-inline-start بدلاً من left * * @version 2.0 — Fixed FOUC + RTL toggle button */ /* ================================================ 1. CSS Variables على html.dark-mode body ================================================ */ html.dark-mode body { --body-bg: #121212; --content-bg: #1e1e1e; --text-color: #e0e0e0; --border-color: #333333; --heading-color: #ffffff; background-color: var(--body-bg) !important; color: var(--text-color); } /* ================================================ 2. عناصر المحتوى الرئيسية ================================================ */ html.dark-mode #site-main, html.dark-mode .widget-inner, html.dark-mode .post-content, html.dark-mode .entry-content, html.dark-mode .entry-body, html.dark-mode article, html.dark-mode .post, html.dark-mode .ticker-content, html.dark-mode #site-header .content-layout .content-layout-row:first-child, html.dark-mode .ticker-swipe { background-color: var(--content-bg) !important; color: var(--text-color); border-color: var(--border-color); } /* ================================================ 3. النصوص داخل المحتوى ================================================ */ html.dark-mode .post-content p, html.dark-mode .entry-content p, html.dark-mode .post-content span, html.dark-mode .entry-content span, html.dark-mode .post-content li, html.dark-mode .entry-content li { color: var(--text-color) !important; } /* ================================================ 4. العناوين والروابط ================================================ */ html.dark-mode h1, html.dark-mode h2, html.dark-mode h3, html.dark-mode h4, html.dark-mode h5, html.dark-mode h6 { color: var(--heading-color); } html.dark-mode a { color: #ff8c5a; } html.dark-mode a:hover { color: var(--site-color, #f45500) !important; } /* ================================================ 5. الهيدر والفوتر والـ Sidebar ================================================ */ html.dark-mode #site-header, html.dark-mode .site-header { background-color: #1a1a1a !important; border-color: var(--border-color); } html.dark-mode #site-footer, html.dark-mode .site-footer { background-color: #111111 !important; color: var(--text-color); } html.dark-mode #site-sidebar, html.dark-mode .sidebar, html.dark-mode .widget { background-color: var(--content-bg); border-color: var(--border-color); } /* ================================================ 6. البطاقات والبلوكات ================================================ */ html.dark-mode .card, html.dark-mode .post-card, html.dark-mode .news-block, html.dark-mode .widget-post-item { background-color: var(--content-bg) !important; border-color: var(--border-color); } /* ================================================ 7. الجداول ================================================ */ html.dark-mode table { background-color: var(--content-bg); color: var(--text-color); } html.dark-mode th { background-color: #2a2a2a; color: var(--heading-color); border-color: var(--border-color); } html.dark-mode td { border-color: var(--border-color); } html.dark-mode tr:nth-child(even) td { background-color: #252525; } /* ================================================ 8. نماذج الإدخال (Forms) ================================================ */ html.dark-mode input[type="text"], html.dark-mode input[type="email"], html.dark-mode input[type="search"], html.dark-mode input[type="url"], html.dark-mode textarea, html.dark-mode select { background-color: #2a2a2a !important; color: var(--text-color) !important; border-color: var(--border-color) !important; } html.dark-mode input::placeholder, html.dark-mode textarea::placeholder { color: #888888; } /* ================================================ 9. التعليقات ================================================ */ html.dark-mode .comment-body, html.dark-mode .comment-list li, html.dark-mode #respond { background-color: var(--content-bg); border-color: var(--border-color); color: var(--text-color); } html.dark-mode .comment-author .fn { color: var(--heading-color); } /* ================================================ 10. الإعلانات — منع تأثير Dark Mode عليها ================================================ */ html.dark-mode .adsbygoogle, html.dark-mode ins.adsbygoogle, html.dark-mode [id^="div-gpt-ad"] { filter: none !important; background-color: transparent !important; } /* ================================================ 11. شريط الأخبار + القوائم المنسدلة ================================================ */ html.dark-mode .breaking-news, html.dark-mode .news-ticker { background-color: #1a1a1a !important; border-color: var(--border-color); } html.dark-mode .dropdown-menu, html.dark-mode .mega-menu, html.dark-mode .nav-submenu { background-color: #1e1e1e !important; border-color: var(--border-color); box-shadow: 0 4px 20px rgba(0,0,0,0.5); } /* ================================================ 12. زر تبديل الوضع الليلي RTL Fix: inset-inline-start بدلاً من left يعمل صحيحاً في RTL (يمين) وLTR (يسار) تلقائياً ================================================ */ #dark-mode-toggle { position: fixed; bottom: 20px; inset-inline-start: 20px; /* ✅ RTL fix — بدلاً من left: 20px */ z-index: 9999; background-color: #333333; color: #ffffff; border: none; border-radius: 50%; width: 50px; height: 50px; font-size: 24px; cursor: pointer; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; } html.dark-mode #dark-mode-toggle { background-color: #ffffff; color: #333333; box-shadow: 0 4px 10px rgba(255, 255, 255, 0.2); } #dark-mode-toggle:hover { transform: scale(1.1); } /* ================================================ 13. Print Styles ================================================ */ @media print { #dark-mode-toggle { display: none !important; } html.dark-mode body { background: #ffffff !important; color: #000000 !important; } }