/** * Glaxdu RTL (Right-to-Left) CSS File * تعريب قالب Glaxdu للغة العربية * Version: 1.0 * * تعليمات الاستخدام: * 1. أضف هذا الملف بعد ملف style.css في ملف HTML * 2. أضف dir="rtl" و lang="ar" في وسم * 3. غيّر اتجاه الخط إلى RTL في جميع العناصر */ /* ============================================ 1. اتجاه النص الأساسي (RTL) ============================================ */ html { direction: rtl; text-align: right; } body { direction: rtl; text-align: right; font-family: "Roboto", "Cairo", "Droid Arabic Kufi", sans-serif; } /* ============================================ 2. تصحيح الهوامش والحشوات (Margins & Padding) ============================================ */ /* تبديل margin-right و margin-left */ .mr-10 { margin-right: 0; margin-left: 10px; } .mr-12 { margin-right: 0; margin-left: 12px; } .mr-15 { margin-right: 0; margin-left: 15px; } .mr-20 { margin-right: 0; margin-left: 20px; } .mr-30 { margin-right: 0; margin-left: 30px; } .mr-35 { margin-right: 0; margin-left: 35px; } .mr-40 { margin-right: 0; margin-left: 40px; } .mr-50 { margin-right: 0; margin-left: 50px; } .mr-60 { margin-right: 0; margin-left: 60px; } .mr-70 { margin-right: 0; margin-left: 70px; } .mr-80 { margin-right: 0; margin-left: 80px; } .mr-90 { margin-right: 0; margin-left: 90px; } .mr-100 { margin-right: 0; margin-left: 100px; } .ml-10 { margin-left: 0; margin-right: 10px; } .ml-12 { margin-left: 0; margin-right: 12px; } .ml-15 { margin-left: 0; margin-right: 15px; } .ml-20 { margin-left: 0; margin-right: 20px; } .ml-30 { margin-left: 0; margin-right: 30px; } .ml-40 { margin-left: 0; margin-right: 40px; } .ml-50 { margin-left: 0; margin-right: 50px; } .ml-60 { margin-left: 0; margin-right: 60px; } .ml-70 { margin-left: 0; margin-right: 70px; } .ml-80 { margin-left: 0; margin-right: 80px; } /* تبديل padding-right و padding-left */ .pr-10 { padding-right: 0; padding-left: 10px; } .pr-15 { padding-right: 0; padding-left: 15px; } .pr-20 { padding-right: 0; padding-left: 20px; } .pr-30 { padding-right: 0; padding-left: 30px; } .pr-40 { padding-right: 0; padding-left: 40px; } .pr-50 { padding-right: 0; padding-left: 50px; } .pl-10 { padding-left: 0; padding-right: 10px; } .pl-15 { padding-left: 0; padding-right: 15px; } .pl-20 { padding-left: 0; padding-right: 20px; } .pl-30 { padding-left: 0; padding-right: 30px; } .pl-40 { padding-left: 0; padding-right: 40px; } .pl-50 { padding-left: 0; padding-right: 50px; } /* ============================================ 3. تصحيح الحدود (Borders) ============================================ */ .border-left { border-left: none; border-right: 1px solid #d5d5d5; } .border-right { border-right: none; border-left: 1px solid #d5d5d5; } /* ============================================ 4. تصحيح Float و Positioning ============================================ */ .float-left { float: right; } .float-right { float: left; } /* ============================================ 5. تصحيح الـ Navigation و Menu ============================================ */ .navbar-nav { flex-direction: row-reverse; } .navbar-nav .nav-link { padding-right: 1rem; padding-left: 0; text-align: right; } .dropdown-menu { right: 0; left: auto; text-align: right; } /* ============================================ 6. تصحيح الـ Text Alignment ============================================ */ .text-left { text-align: right; } .text-right { text-align: left; } .text-center { text-align: center; } /* ============================================ 7. تصحيح الـ Forms ============================================ */ .form-control, .form-select { text-align: right; direction: rtl; } .form-check { padding-left: 0; padding-right: 1.5rem; } .form-check-input { margin-left: 0; margin-right: -1.5rem; } /* ============================================ 8. تصحيح الـ Lists ============================================ */ ul, ol { padding-right: 2rem; padding-left: 0; } li { text-align: right; } /* ============================================ 9. تصحيح الـ Buttons و Links ============================================ */ .btn { text-align: center; } .btn-icon { margin-left: 0; margin-right: 0.5rem; } /* ============================================ 10. تصحيح الـ Cards و Containers ============================================ */ .card { text-align: right; } .card-body { text-align: right; } /* ============================================ 11. تصحيح الـ Tables ============================================ */ table { text-align: right; } th, td { text-align: right; } /* ============================================ 12. تصحيح الـ Modals ============================================ */ .modal-header { flex-direction: row-reverse; } .close { margin-left: 0; margin-right: auto; } /* ============================================ 13. تصحيح الـ Breadcrumb ============================================ */ .breadcrumb { flex-direction: row-reverse; } /* ============================================ 14. تصحيح الـ Pagination ============================================ */ .pagination { flex-direction: row-reverse; } /* ============================================ 15. تصحيح الـ Alerts ============================================ */ .alert { text-align: right; } .alert-icon { margin-left: 0; margin-right: 1rem; } /* ============================================ 16. تصحيح الـ Badges و Tags ============================================ */ .badge { text-align: center; } /* ============================================ 17. تصحيح الـ Progress Bars ============================================ */ .progress { direction: rtl; } /* ============================================ 18. تصحيح الـ Tooltips و Popovers ============================================ */ .tooltip-inner { text-align: right; } /* ============================================ 19. تصحيح الـ Carousel ============================================ */ .carousel-control-prev { left: auto; right: 0; } .carousel-control-next { right: auto; left: 0; } /* ============================================ 20. تصحيح الـ Sidebar ============================================ */ .sidebar { float: left; } .sidebar-item { text-align: right; } /* ============================================ 21. تصحيح الـ Footer ============================================ */ footer { text-align: right; } .footer-content { text-align: right; } /* ============================================ 22. تصحيح الـ Icons ============================================ */ .icon-left { margin-left: 0; margin-right: 0.5rem; } .icon-right { margin-right: 0; margin-left: 0.5rem; } /* ============================================ 23. تصحيح الـ Animations ============================================ */ @keyframes slideInFromLeft { from { transform: translateX(100%); } to { transform: translateX(0); } } @keyframes slideInFromRight { from { transform: translateX(-100%); } to { transform: translateX(0); } } /* ============================================ 24. تصحيح الـ Responsive Design ============================================ */ @media (max-width: 768px) { .navbar-nav { flex-direction: row-reverse; } .mobile-menu { right: 0; left: auto; } .offcanvas { right: 0; left: auto; } } /* ============================================ 25. تصحيح الـ Custom Classes ============================================ */ .text-indent { text-indent: -9999px; direction: rtl; } .clearfix::after { content: ""; display: table; clear: both; } /* ============================================ 26. تصحيح الـ Bootstrap Grid (إذا لزم الأمر) ============================================ */ /* تعطيل عكس الصف لتجنب كسر السلايدرات والتخطيط .row { flex-direction: row-reverse; } */ /* ============================================ 27. تصحيح الـ Utility Classes ============================================ */ /* تعطيل عكس d-flex لتجنب كسر الهيدر والسلايدرات .d-flex { flex-direction: row-reverse; } */ .justify-content-start { justify-content: flex-end; } .justify-content-end { justify-content: flex-start; } /* ============================================ 28. تصحيح الـ Special Elements ============================================ */ .quote-left { border-left: none; border-right: 4px solid #00a651; padding-left: 0; padding-right: 1rem; } .divider-left { border-left: none; border-right: 1px solid #d5d5d5; } /* ============================================ 29. تصحيح الـ Specific Components ============================================ */ .course-card { text-align: right; } .teacher-card { text-align: right; } .event-card { text-align: right; } .blog-card { text-align: right; } /* ============================================ 30. تصحيح الـ Header و Navigation ============================================ */ .header-top { flex-direction: row-reverse; } .header-contact { text-align: right; } .header-social { flex-direction: row-reverse; } /* ============================================ 31. تصحيح الـ Search Bar ============================================ */ .search-bar { flex-direction: row-reverse; } .search-input { text-align: right; direction: rtl; } /* ============================================ 32. تصحيح الـ Sliders ============================================ */ .slider-content { text-align: right; } .slider-button { text-align: center; } /* ============================================ 33. تصحيح الـ Testimonials ============================================ */ .testimonial { text-align: right; } .testimonial-author { text-align: right; } /* ============================================ 34. تصحيح الـ Counters ============================================ */ .counter-item { text-align: center; } /* ============================================ 35. تصحيح الـ CTA Sections ============================================ */ .cta-section { text-align: center; } .cta-content { text-align: right; } /* ============================================ 36. تصحيح الـ Misc Elements ============================================ */ .pull-left { float: right; } .pull-right { float: left; } .text-muted { color: #999; } .text-success { color: #00a651; } .text-danger { color: #dc3545; } .text-warning { color: #ffc107; } .text-info { color: #17a2b8; } /* ============================================ 37. تصحيح الـ Print Styles ============================================ */ @media print { body { direction: rtl; text-align: right; } } /* ============================================ 38. تصحيح الـ Accessibility ============================================ */ [dir="rtl"] { direction: rtl; text-align: right; } [dir="ltr"] { direction: ltr; text-align: left; } /* ============================================ 39. تصحيح الـ Scrollbar (اختياري) ============================================ */ ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background: #f1f1f1; } ::-webkit-scrollbar-thumb { background: #00a651; border-radius: 5px; } /* ============================================ 40. تصحيح الـ Focus States ============================================ */ *:focus { outline: 2px solid #00a651; outline-offset: 2px; } button:focus, a:focus { outline: 2px solid #00a651; outline-offset: 2px; }