@charset "UTF-8"; /* ========================================================================== rtl-fixes.css — طبقة إصلاحات الاتجاه من اليمين إلى اليسار ========================================================================== هذا هو الملف الوحيد المكتوب يدويًا في منظومة الـ RTL. باقي ملفات *.rtl.css مولّدة آليًا عبر: python3 tools/rtl_build.py يعالج هنا فقط ما لا يستطيع القالب الآلي إصلاحه: 1. الخطوط العربية 2. الأيقونات ذات الاتجاه 3. الحقول التي يجب أن تبقى LTR (أرقام، بريد، روابط) 4. إضافات jQuery التي تحقن أنماطًا مضمّنة عبر JS 5. تفاصيل تخطيط متبقية يُحمَّل آخر ملف في ليتغلّب على ما قبله. ========================================================================== */ /* ========================================================================== 1. الخطوط ========================================================================== */ /* خطوط القالب الأصلية (OpenSans Regular) لا تحوي محارف عربية، فيُضاف احتياطي عربي بعدها بدل الاعتماد على خط النظام الافتراضي. */ html[dir="rtl"] body, html[dir="rtl"] input, html[dir="rtl"] select, html[dir="rtl"] textarea, html[dir="rtl"] button, html[dir="rtl"] .btn, html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] h4, html[dir="rtl"] h5, html[dir="rtl"] h6, html[dir="rtl"] .form-control, html[dir="rtl"] table { font-family: "OpenSans Regular", "Segoe UI", Tahoma, "Noto Naskh Arabic", "Noto Sans Arabic", "Dubai", "Cairo", "Amiri", Arial, sans-serif; } /* المسافة بين الأسطر في العربية تحتاج زيادة طفيفة */ html[dir="rtl"] body { line-height: 1.7; } /* ========================================================================== 2. الأيقونات ذات الاتجاه ========================================================================== الأيقونات التي تدلّ على اتجاه (سهم، زاوية، رجوع/تقدّم) يجب أن تنعكس. الأيقونات الرمزية (مستخدم، ملف، جرس ...) تبقى كما هي. */ html[dir="rtl"] .fa-angle-left, html[dir="rtl"] .fa-angle-right, html[dir="rtl"] .fa-angle-double-left, html[dir="rtl"] .fa-angle-double-right, html[dir="rtl"] .fa-arrow-left, html[dir="rtl"] .fa-arrow-right, html[dir="rtl"] .fa-arrow-circle-left, html[dir="rtl"] .fa-arrow-circle-right, html[dir="rtl"] .fa-arrow-circle-o-left, html[dir="rtl"] .fa-arrow-circle-o-right, html[dir="rtl"] .fa-caret-left, html[dir="rtl"] .fa-caret-right, html[dir="rtl"] .fa-chevron-left, html[dir="rtl"] .fa-chevron-right, html[dir="rtl"] .fa-chevron-circle-left, html[dir="rtl"] .fa-chevron-circle-right, html[dir="rtl"] .fa-long-arrow-left, html[dir="rtl"] .fa-long-arrow-right, html[dir="rtl"] .fa-hand-o-left, html[dir="rtl"] .fa-hand-o-right, html[dir="rtl"] .fa-mail-forward, html[dir="rtl"] .fa-mail-reply, html[dir="rtl"] .fa-mail-reply-all, html[dir="rtl"] .fa-reply, html[dir="rtl"] .fa-reply-all, html[dir="rtl"] .fa-share, html[dir="rtl"] .fa-rotate-left, html[dir="rtl"] .fa-rotate-right, html[dir="rtl"] .fa-indent, html[dir="rtl"] .fa-outdent, html[dir="rtl"] .fa-sign-in, html[dir="rtl"] .fa-sign-out, html[dir="rtl"] .fa-toggle-left, html[dir="rtl"] .fa-toggle-right { display: inline-block; transform: scaleX(-1); -webkit-transform: scaleX(-1); } /* استثناء: لا تعكس الأيقونة إن كانت داخل عنصر معلَّم صراحة بـ .no-flip */ html[dir="rtl"] .no-flip, html[dir="rtl"] .no-flip .fa { transform: none !important; -webkit-transform: none !important; } /* ========================================================================== 3. محتوى يجب أن يبقى بالاتجاه اللاتيني ========================================================================== الأرقام والبريد والروابط ورموز العملات تُعرض بشكل خاطئ إن ورثت RTL. */ html[dir="rtl"] input[type="email"], html[dir="rtl"] input[type="url"], html[dir="rtl"] input[type="tel"], html[dir="rtl"] input[type="number"], html[dir="rtl"] input[type="password"], html[dir="rtl"] input[type="time"], html[dir="rtl"] input.numeric, html[dir="rtl"] .ltr, html[dir="rtl"] code, html[dir="rtl"] pre, html[dir="rtl"] kbd, html[dir="rtl"] samp { direction: ltr; text-align: left; unicode-bidi: embed; } /* حقول التاريخ — الاتجاه لاتيني لكن المحاذاة تتبع الاتجاه العام */ html[dir="rtl"] input[type="date"], html[dir="rtl"] input[type="datetime-local"], html[dir="rtl"] .datepicker-input, html[dir="rtl"] .date { direction: ltr; text-align: right; } /* خلايا الأرقام والمبالغ في الجداول */ html[dir="rtl"] td.numeric, html[dir="rtl"] th.numeric, html[dir="rtl"] .amount, html[dir="rtl"] .currency { direction: ltr; unicode-bidi: embed; } /* ========================================================================== 4. الهيكل العام للوحة التحكم (AdminLTE) ========================================================================== */ /* الشريط الجانبي — يُثبَّت يمينًا */ html[dir="rtl"] .left-side { left: auto; right: 0; } html[dir="rtl"] .left-side.collapse-left { left: auto; right: -220px; } html[dir="rtl"] .right-side.strech { margin-right: 0; margin-left: 0; } @media screen and (max-width: 992px) { html[dir="rtl"] .left-side { right: -220px; } html[dir="rtl"] .row-offcanvas-left.active .left-side { right: 0; } } /* شعار الموقع في الشريط العلوي */ html[dir="rtl"] body > .header .logo { float: right; } html[dir="rtl"] body > .header .navbar { margin-right: 220px; margin-left: 0; } /* زر طيّ القائمة */ html[dir="rtl"] body > .header .navbar .sidebar-toggle { float: right; } /* قائمة المستخدم في الأعلى */ html[dir="rtl"] .navbar-right, html[dir="rtl"] .navbar-custom-menu { float: left !important; } html[dir="rtl"] .navbar-nav > li { float: right; } /* عناصر القائمة الجانبية */ html[dir="rtl"] .sidebar-menu > li > a > .fa, html[dir="rtl"] .sidebar-menu > li > a > .glyphicon, html[dir="rtl"] .sidebar-menu > li > a > .ion, html[dir="rtl"] .sidebar-menu > li > a > i { margin-left: 6px; margin-right: 0; } /* سهم القائمة المنسدلة في الشريط الجانبي */ html[dir="rtl"] .sidebar-menu li > a > .fa-angle-down, html[dir="rtl"] .sidebar-menu li > a > .pull-right-container { left: 10px; right: auto; } html[dir="rtl"] .sidebar-menu .treeview-menu { padding-right: 20px; padding-left: 0; } html[dir="rtl"] .sidebar-menu .treeview-menu > li > a { padding-right: 10px; padding-left: 5px; } /* لوحة معلومات المستخدم في أعلى الشريط الجانبي */ html[dir="rtl"] .user-panel > .image, html[dir="rtl"] .user-panel > .info { float: right; } html[dir="rtl"] .user-panel > .info { padding-right: 10px; padding-left: 0; } /* مسار التنقّل (breadcrumb) */ html[dir="rtl"] .right-side > .content-header > .breadcrumb { left: 10px; right: auto; } html[dir="rtl"] .breadcrumb > li + li:before { content: "\\"; padding: 0 5px; } /* ========================================================================== 5. Bootstrap 3 ========================================================================== */ html[dir="rtl"] .dropdown-menu { right: 0; left: auto; text-align: right; } html[dir="rtl"] .dropdown-menu-right, html[dir="rtl"] .navbar-right .dropdown-menu { right: auto; left: 0; } html[dir="rtl"] .input-group .form-control:first-child, html[dir="rtl"] .input-group-addon:first-child, html[dir="rtl"] .input-group-btn:first-child > .btn { border-radius: 0 4px 4px 0; } html[dir="rtl"] .input-group .form-control:last-child, html[dir="rtl"] .input-group-addon:last-child, html[dir="rtl"] .input-group-btn:last-child > .btn { border-radius: 4px 0 0 4px; } html[dir="rtl"] .checkbox input[type="checkbox"], html[dir="rtl"] .radio input[type="radio"] { margin-right: -20px; margin-left: 0; } html[dir="rtl"] .checkbox, html[dir="rtl"] .radio { padding-right: 20px; padding-left: 0; } html[dir="rtl"] .close { float: left; } html[dir="rtl"] .modal-header .close { margin: -2px auto -2px -2px; } html[dir="rtl"] .modal-footer { text-align: left; } html[dir="rtl"] .list-group, html[dir="rtl"] .nav-tabs > li, html[dir="rtl"] .nav-pills > li { float: right; } html[dir="rtl"] .nav-tabs, html[dir="rtl"] .nav-pills { padding-right: 0; } html[dir="rtl"] .progress-bar { float: right; } html[dir="rtl"] .alert-dismissable .close, html[dir="rtl"] .alert-dismissible .close { right: auto; left: -21px; } /* ========================================================================== 6. DataTables ========================================================================== */ html[dir="rtl"] .dataTables_wrapper .dataTables_filter { float: left; text-align: left; } html[dir="rtl"] .dataTables_wrapper .dataTables_length { float: right; } html[dir="rtl"] .dataTables_wrapper .dataTables_info { float: right; } html[dir="rtl"] .dataTables_wrapper .dataTables_paginate { float: left; text-align: left; } html[dir="rtl"] .dataTables_wrapper .dataTables_filter input { margin-right: 8px; margin-left: 0; } html[dir="rtl"] table.dataTable thead th, html[dir="rtl"] table.dataTable thead td, html[dir="rtl"] table.dataTable tbody th, html[dir="rtl"] table.dataTable tbody td { text-align: right; } /* أسهم الترتيب في رأس الجدول */ html[dir="rtl"] table.dataTable thead .sorting, html[dir="rtl"] table.dataTable thead .sorting_asc, html[dir="rtl"] table.dataTable thead .sorting_desc { background-position: center left; padding-right: 8px; padding-left: 30px; } html[dir="rtl"] .dt-buttons { float: right; } /* ========================================================================== 7. Select2 ========================================================================== Select2 يحقن أنماط موضع مضمّنة عبر JS، فتُصحَّح هنا. */ html[dir="rtl"] .select2-container, html[dir="rtl"] .select2-drop, html[dir="rtl"] .select2-results, html[dir="rtl"] .select2-search { direction: rtl; text-align: right; } html[dir="rtl"] .select2-container .select2-choice > .select2-chosen { margin-left: 26px; margin-right: 0; text-align: right; } html[dir="rtl"] .select2-container .select2-choice .select2-arrow { right: auto; left: 0; border-right: 1px solid #aaa; border-left: none; border-radius: 4px 0 0 4px; } html[dir="rtl"] .select2-search input { background-position: 1% 50% !important; padding-right: 5px; padding-left: 20px; } html[dir="rtl"] .select2-container-multi .select2-choices li, html[dir="rtl"] .select2-container-multi .select2-choices .select2-search-choice { float: right; margin: 3px 5px 3px 0; padding: 3px 18px 3px 5px; } html[dir="rtl"] .select2-container-multi .select2-choices .select2-search-choice .select2-search-choice-close { right: 3px; left: auto; } html[dir="rtl"] .select2-results .select2-result-label { text-align: right; } /* ========================================================================== 8. إضافات jQuery أخرى ========================================================================== */ /* toastr — تُعرض الإشعارات على اليسار */ html[dir="rtl"] #toast-container > div { direction: rtl; text-align: right; padding: 15px 50px 15px 15px; background-position: 98% center; } html[dir="rtl"] #toast-container > div .toast-close-button { float: left; } html[dir="rtl"] .toast-top-right, html[dir="rtl"] .toast-bottom-right { right: auto; left: 12px; } /* Summernote — محرّر النصوص */ html[dir="rtl"] .note-editor .note-editable, html[dir="rtl"] .note-editor .note-toolbar { direction: rtl; text-align: right; } html[dir="rtl"] .note-editor .note-toolbar .note-btn-group { float: right; margin-left: 8px; margin-right: 0; } /* Datepicker / Daterangepicker */ html[dir="rtl"] .datepicker, html[dir="rtl"] .daterangepicker { direction: ltr; } html[dir="rtl"] .daterangepicker .ranges { float: right; text-align: right; } /* jQuery UI */ html[dir="rtl"] .ui-dialog .ui-dialog-titlebar-close { right: auto; left: 0.3em; } html[dir="rtl"] .ui-datepicker .ui-datepicker-prev { right: 2px; left: auto; } html[dir="rtl"] .ui-datepicker .ui-datepicker-next { left: 2px; right: auto; } /* Tooltipster */ html[dir="rtl"] .tooltipster-base { direction: rtl; text-align: right; } /* iCheck */ html[dir="rtl"] .icheckbox_square-blue, html[dir="rtl"] .iradio_square-blue { margin-left: 5px; margin-right: 0; } /* FullCalendar */ html[dir="rtl"] .fc { direction: rtl; text-align: right; } /* شريط التمرير المخصّص */ html[dir="rtl"] .mCSB_inside > .mCSB_container { margin-right: 0; margin-left: 30px; } html[dir="rtl"] .mCSB_scrollTools { right: auto; left: 0; } /* ========================================================================== 9. النماذج والجداول العامة ========================================================================== */ html[dir="rtl"] .form-horizontal .control-label { text-align: left; } html[dir="rtl"] label { text-align: right; } html[dir="rtl"] .help-block, html[dir="rtl"] .text-danger, html[dir="rtl"] .validation-error { text-align: right; } html[dir="rtl"] table th, html[dir="rtl"] table td { text-align: right; } html[dir="rtl"] table th.text-center, html[dir="rtl"] table td.text-center, html[dir="rtl"] .text-center { text-align: center !important; } /* أعمدة الإجراءات تبقى في وسط الخلية */ html[dir="rtl"] td .btn-group, html[dir="rtl"] td .action { direction: rtl; } /* الحقول الإلزامية — النجمة على يسار التسمية */ html[dir="rtl"] .required:after, html[dir="rtl"] .text-red { margin-right: 3px; margin-left: 0; } /* ========================================================================== 10. الطباعة ========================================================================== */ @media print { html[dir="rtl"] body, html[dir="rtl"] .profileArea, html[dir="rtl"] .mainArea { direction: rtl; text-align: right; } }