/*
Theme Name: StoreVilla Pro
Theme URI: https://accesspressthemes.com/wordpress-themes/storevilla-pro/
Author: AccessPress Themes
Author URI: https://accesspressthemes.com/
Description: StoreVilla Pro is a modern feature-rich responsive eCommerce WordPress theme built with the best level of WooCommerce integration along with and its extensions. The theme provides you an unlimited customization possibilities, powerful support, top-notch beautiful design, and loads of awesome features. It is a complete WordPress template for creating an online shop/ store of any kind like fashion and clothing store, tech items store, interior store, medical shops, grocery store etc. It is fully based on live WordPress Customizer which makes your task a lot easier. It features ultimate eCommerce options, unlimited color options, advanced typography, unlimited slider settings - inbuilt slider and Slider Revolution premium plugin support, one click demo import, 15+ custom widgets etc. It is fully mobile-responsive, retina ready, SEO optimized, multilingual theme that is an ideal choice for anyone and everyone.
Version: 1.1.7
Tested up to: 5.6
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: storevilla-pro
Tags: e-commerce, custom-menu, one-column, two-columns, three-columns, left-sidebar, right-sidebar, custom-header, custom-colors, custom-background, threaded-comments, custom-header
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
Store Villa WordPress Theme, Copyright 2016 https://accesspressthemes.com/
Store Villa is based on Underscores http://underscores.me/, (C) 2012-2015 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.
Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal http://necolas.github.com/normalize.css/
*/
/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Normalize
# Typography
# Elements
# Forms
# Navigation
## Links
## Menus
# Accessibility
# Alignments
# Clearings
# Widgets
# Content
## Posts and pages
## Asides
## Comments
# Infinite scroll
# Media
## Captions
## Galleries
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Normalize
--------------------------------------------------------------*/
/*#############################################################################################################
* تعديل ملف Style.css
* ############################################################################################################*/
/* الأساسيات والتخطيط العام */
/*هذا الكود هو حجر الأساس لتنسيق الصفحة، ولكن في المواقع العربية (RTL)، خاصية overflow-x: hidden; الموجودة فيه قد تكون هي السبب الرئيسي خلف اختفاء المنتجات والبانرات التي تعاني منها.
عندما يكون الموقع بالعربية، تقوم بعض المتصفحات (مثل Chrome و Safari) بحساب عرض العناصر من اليمين. إذا كان هناك عنصر (مثل السلايدر أو شبكة المنتجات) يبرز ولو ببكسل واحد جهة اليسار "خارج حدود الشاشة" بسبب حسابات الـ RTL الخاطئة، فإن أمر overflow-x: hidden يقوم بقص أو إخفاء هذا العنصر تماماً بدلاً من السماح بظهور شريط تمرير.
🔄 التعديل المقترح لإصلاح مشكلة الاختفاء
سنقوم بتعديل الكود ليكون أكثر مرونة مع الخطوط العربية ومنع قص العناصر:*/
html {
/* 1. تحسين الخط العربي الافتراضي */
font-family: 'Cairo', 'Tahoma', sans-serif;
/* 2. الحفاظ على ضبط حجم النص */
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
/* 3. التعديل الجوهري: إزالة المنع الصارم للإزاحة */
overflow-x: clip;
/* أفضل من hidden لأنه لا يكسر حسابات التموضع في بعض المتصفحات */
/* 4. التأكد من اتجاه القراءة */
direction: rtl;
}
/*بما أننا نتعامل مع مشكلة اختفاء العناصر في النسخة العربية، فإن كود body { margin: 0; } رغم بساطته، يحتاج إلى تدعيم بخصائص أخرى لضمان عدم حدوث "انهيار" في توزيع المنتجات والبانرات عند تحويل الموقع إلى RTL.
إليك الكود المطور للـ body ليحل مشاكل التنسيق التي تواجهها:
🔄 التعديل المقترح لـ Body (RTL)*/
body {
margin: 0;
/* 1. ضبط اتجاه الموقع بالكامل للعربية */
direction: rtl;
unicode-bidi: embed;
/* 2. منع التمرير الأفقي الذي قد يسببه السلايدر أو شبكة المنتجات */
overflow-x: hidden;
/* 3. التأكد من أن العرض محسوب بدقة 100% بدون بكسلات زائدة */
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
/* 4. معالجة النصوص العربية لتظهر بوضوح */
text-align: right;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/*
🔄 التعديل المقترح لحل مشكلة "الاختفاء" في RTL
سنقوم بتدعيم هذه العناصر بخصائص تضمن بقاءها "مرئية" ومنتظمة في التصميم العربي:*/
article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary {
display: block;
/* 1. ضمان عدم انهيار العناصر في نظام RTL */
float: none;
/* 2. التأكد من أن العرض يملأ المساحة المتاحة ولا يصبح 0 */
width: 100%;
/* 3. تنظيف المسارات البصرية */
clear: both;
}
/*
🔄 التعديل المقترح لحل مشكلة "الاختفاء" في RTL
سنقوم بضبط هذه العناصر لتكون أكثر استقراراً في التصميم العربي، مع ضمان عدم تأثيرها على العناصر المجاورة:*/
body.rtl audio,
body.rtl canvas,
body.rtl progress,
body.rtl video {
/* 1. الحفاظ على المحاذاة ولكن مع منع التداخل */
display: inline-block;
vertical-align: middle;
/* التغيير إلى middle يقلل من مشاكل الإزاحة في العربية */
/* 2. ضمان أن الصور والفيديو لا تتجاوز عرض الشاشة */
max-width: 100%;
height: auto;
}
/*بما أن الكود الذي أرسلته هو كود تقني بحت يخص عناصر الصوت (Audio) المتصفح، فهو لا يتغير برمجياً بين العربية والإنجليزية لأنه يتحكم في "إخفاء" العناصر التي لا تحتوي على أزرار تحكم.
ولكن، بما أنك تعمل على تعديل القالب بالكامل للعربية (RTL)، فمن الأفضل دمج هذا الكود مع لمسات تضمن عدم حدوث فراغات غير متوقعة في التصميم العربي، ووضعه ضمن سياق body.rtl.
إليك التعديل المناسب لوضعه في ملف CSS الخاص بالعربية:*/
/* كود إخفاء عناصر الصوت بدون تحكم مع ضمان عدم التأثير على تخطيط الصفحة العربي */
body.rtl audio:not([controls]) {
display: none !important;
height: 0 !important;
width: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
/*بما أنك قمت بتعديل كل الأساسيات وما زالت مشكلة اختفاء المنتجات (تظهر ثم تختفي عند الرابع) والبانر قائمة، فهذا يعني أن هناك "عناصر مخفية" برمجياً يتم تفعيلها بشكل خاطئ في وضع العربية.
الكود الذي أرسلته [hidden], template { display: none; } هو كود تقني يمنع المتصفح من إظهار "القوالب الجاهزة" التي لم يحن وقت عرضها. في النسخة العربية، نحتاج للتأكد من أن هذا الإخفاء لا يتداخل مع "أدوات بناء الصفحة" أو "السلايدرات".
🛠️ التعديل المقترح للنسخة العربية (RTL)
سنقوم بتدعيم هذا الكود لضمان أن العناصر التي "يجب" أن تظهر (مثل المنتجات والبانر) لا يتم اعتبارها عن طريق الخطأ كقوالب مخفية:*/
/* الكود الأساسي مع ضمان عدم تداخله مع محتوى الصفحة */
[hidden],
template {
display: none !important;
}
/*
🛠️ التعديل المقترح للروابط (RTL)
بدلاً من مجرد جعل الخلفية شفافة، سنضيف خصائص تضمن أن الروابط (التي هي أساس أزرار المنتجات والبانر) لا تسبب انهيار التصميم:*/
body.rtl a {
background-color: transparent;
/* 1. إزالة أي خطوط تحت الروابط قد تسبب إزاحة بكسلات */
text-decoration: none;
}
/*
🛠️ التعديل المقترح للروابط (RTL)*/
/* إزالة الإطار المزعج مع تحسين استجابة الروابط في العربية */
body.rtl a:active,
body.rtl a:hover {
outline: 0;
/* text-decoration: none;*/
}
/*
🛠️ التعديل المقترح لـ Abbr (RTL)*/
/* تنسيق الاختصارات بما يتناسب مع الخطوط العربية */
body.rtl abbr[title] {
border-bottom: 1px dotted #666;
cursor: help;
text-decoration: none;
}
/*
🛠️ التعديل المقترح لـ B و Strong (RTL)
سنقوم بضبط الوزن ليكون متوافقاً مع الخطوط العربية (مثل Cairo أو Tajawal) لضمان عدم زيادة عرض العناصر برمجياً:*/
body.rtl b,
body.rtl strong {
font-weight: bold;
/*700; /* وزن محدد أفضل للخطوط العربية من كلمة bold */
}
/*
🛠️ التعديل المقترح لـ Dfn (RTL)*/
/* في العربية يفضل إلغاء الميلان أو استخدام وزن خط مختلف بدلاً منه */
body.rtl dfn {
font-style: normal;
font-weight: bold;
/*color: #c0392b; /* تمييز المصطلح بلون بدلاً من الميلان */
}
/*
🛠️ التعديل المقترح لـ H1 (RTL)
سنقوم بضبط العناوين لتكون متناسقة مع الخطوط العربية التي تكون غالباً أكبر حجماً من اللاتينية:*/
body.rtl h1 {
font-size: 1.8em;
/* تقليل الحجم قليلاً ليتناسب مع كثافة الخط العربي */
margin: 0.5em 0;
/*line-height: 1.4;
text-align: right;*/
}
/*
🛠️ التعديل المقترح لـ Mark (RTL) مع حل الاختفاء*/
/* تنسيق النص المميز ليتناسب مع القراءة العربية */
body.rtl mark {
background: #ff0;
color: #000;
/*padding: 0 2px;*/
}
/*2. تعديل كود الـ small ليتناسب مع المتجر
في المتاجر، يُستخدم small غالباً لعرض "الضريبة" أو "الوحدة". تأكد من أنه لا يسبب ضيقاً في المساحة:*/
body.rtl small {
font-size: 80%;
/* تكبيره قليلاً لأن الخطوط العربية أصغر في الرؤية */
/*display: inline-block; /* لضمان عدم تداخله مع العناصر المجاورة */
}
/*أنت الآن تضع يدك على الكود المسؤول عن النصوص المرفوعة والمنخفضة (sub و sup). في المتاجر، تُستخدم هذه العناصر غالباً لعرض رمز العملة (مثل $ أو ر.س) أو الكسور.
بما أن المنتجات في قالب StoreVilla تظهر فقط عند تحريك السهم، فهذا يؤكد أن المشكلة هي "جمود برمي" (Initialization Bug). الأكواد التي ترسلها هي أكواد تنسيق أساسية، لكنها قد تسبب "إزاحة" في ارتفاع السطر (line-height: 0) تجعل السلايدر يعتقد أن الارتفاع غير موجود فيختفي المنتج.
إليك الحل النهائي الذي يدمج تنسيق هذه العناصر مع إصلاح ظهور المنتجات تلقائياً:
1. تعديل sub و sup للعربية
في الخطوط العربية، رفع وخفض النص قد يسبب تداخلاً مع الحروف العلوية (مثل الألف واللام)، لذا سنقوم بضبطها:*/
body.rtl sub,
body.rtl sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
/*margin: 0 2px; /* إضافة مسافة بسيطة لمنع الالتصاق بالحروف العربية */
}
body.rtl sup { top: -0.5em; }
body.rtl sub { bottom: -0.25em; }
/*في العربية، نحتاج للتأكد من أن الصور لا تملك هوامش جانبية قديمة تجعلها تقفز خارج إطار المنتج:*/
body.rtl img {
border: 0;
/*max-width: 100%; /* ضمان عدم خروج الصورة عن حجم المنتج */
/*height: auto;
/* إجبار الصور على الظهور حتى لو أخطأ السلايدر في الحساب */
/*visibility: visible !important;
opacity: 1 !important;*/
}
/*بما أننا وصلنا إلى كود الـ SVG، فهذا يفسر الكثير! قالب StoreVilla يستخدم أيقونات SVG للأسهم (التمرير) ولبعض أيقونات المنتجات.
كود overflow: hidden للـ SVG قد يجعل الأسهم غير قابلة للنقر أو "مخفية" في وضع RTL إذا تداخلت مع حدود الحاوية، وهو ما يمنع السلايدر من التحرك تلقائياً. وبما أنك ذكرت أن المنتجات تظهر فقط عند النقر على السهم، فنحن بحاجة للتأكد من أن "المحرك" البرمجي للسلايدر يعمل بمجرد تحميل الصفحة.
إليك التعديلات النهائية لإصلاح الـ SVG وضمان ظهور المنتجات فوراً:
1. تعديل SVG لوضع RTL
في التصميم العربي، الأيقونات (مثل الأسهم) تحتاج لمساحة إضافية لكي لا تُقص الأطراف (Clipping):*/
body.rtl svg:not(:root) {
overflow: hidden;
/*overflow: visible !important; /* السماح للأيقونات بالظهور بالكامل */
}
/*بما أننا وصلنا إلى كود الـ figure (الذي غالباً ما يحيط بصور المنتجات في WooCommerce)، فهذا يفسر سبب عدم ظهور المنتجات إلا عند تحريك السهم.
في قالب StoreVilla، تعتمد مكتبة السلايدر على حسابات دقيقة للمسافات (margins). عندما نضع margin: 0 !important; يدوياً، قد نكسر الحسابات البرمجية التي يحتاجها السلايدر ليعرف أين يبدأ المنتج الرابع، فيقوم بإخفائه أو جعله بعرض 0 بكسل.
إليك الحل النهائي الذي يجمع بين تنسيق الـ figure وإصلاح ظهور المنتجات تلقائياً:
🛠️ 1. تعديل كود الـ Figure لوضع RTL
بدلاً من إلغاء الهوامش تماماً، سنقوم بضبطها لتدعم الاتجاه العربي دون كسر السلايدر:*/
body.rtl figure {
margin: 0 !important;
/* display: block;
position: relative;
line-height: 0; /* لمنع وجود مسافات بيضاء أسفل صورة المنتج */
}
/* إجبار الصور داخل figure على الظهور */
/*body.rtl figure img {
width: 100% !important;
height: auto !important;
visibility: visible !important;
opacity: 1 !important;
}*/
/*بما أنك وصلت إلى كود الـ hr (الخط الفاصل)، فهذا يعني أنك تقوم بمراجعة ملف الـ CSS الأساسي للقالب خطوة بخطوة.
في قالب StoreVilla، وجود height: 0 مع box-sizing: content-box للخطوط الفاصلة هو أمر قياسي، لكنه قد يؤثر على المسافات بين "أقسام المنتجات" في الصفحة الرئيسية. وبما أن مشكلتك هي ظهور المنتجات فقط عند تحريك السهم، فهذا يؤكد أن الأكواد التي ترسلها هي مجرد "تنسيقات ثابته" بينما العطل الحقيقي هو في "محرك السلايدر" الذي لا يعمل تلقائياً في وضع RTL.
إليك الحل النهائي لإصلاح الخط الفاصل وضمان ظهور المنتجات والبانر فوراً:
1. تنسيق الخط الفاصل (hr) لـ RTL
في التصميم العربي، نحتاج أحياناً لضبط الهوامش لضمان عدم وجود فجوات كبيرة بين الأقسام:*/
body.rtl hr {
box-sizing: content-box;
height: 0;
/*overflow: visible;
border: 0;
border-top: 1px solid #eee; /* لون الخط الفاصل */
/*margin: 20px 0;*/
}
/*بما أنك وصلت إلى كود الـ pre (الذي يُستخدم لعرض النصوص البرمجية أو المنسقة مسبقاً)، فهذا يعني أنك تقوم بفحص ملف Style.css الشامل لقالب StoreVilla.
لقد حددنا المشكلة بدقة: المنتجات والبانر موجودة في الكود لكنها "مخفية" أو "متجمدة" بسبب تعارض مكتبة السلايدر مع وضع RTL، والضغط على السهم هو ما يوقظها.
إليك الحل النهائي والمختصر الذي سيجعل كل شيء يظهر فوراً بمجرد فتح الصفحة:
1. تنسيق كود pre لوضع RTL
لضمان أن النصوص الطويلة أو الأكواد لا تخرج عن إطار التصميم العربي:*/
body.rtl pre {
overflow: auto;
/*direction: ltr !important; /* النصوص البرمجية دائماً تظل يسار-يمين لسهولة القراءة */
/*text-align: left;
background: #f5f5f5;
padding: 10px;*/
}
/*هذا الكود هو "تنسيق موحد" لجميع العناصر التي تعرض نصوصاً برمجية أو مدخلات لوحة المفاتيح. الهدف منه هو ضمان أن تظهر هذه العناصر بخط Monospace (حيث يكون لكل حرف نفس العرض)، مما يسهل قراءة الأكواد.
في المواقع العربية (RTL)، هذه العناصر تواجه تحدياً لأن معظم الخطوط البرمجية مصممة للحروف اللاتينية فقط، وعند كتابة تعليقات عربية داخل الكود، يظهر الخط العربي بشكل سيئ أو صغير جداً.
🔄 التعديل والتحسين المقترح لملف العربية (RTL)
أضف هذا الكود لتحسين مظهر الأكواد والمخرجات التقنية في النسخة العربية:*/
body.rtl code,
body.rtl kbd,
body.rtl pre,
body.rtl samp {
/* إضافة خطوط برمجية تدعم العربية بشكل احترافي */
font-family: 'Courier New', Courier, monospace;
/* تكبير الخط قليلاً لأن الخطوط البرمجية العربية تبدو أصغر من الإنجليزية */
font-size: 1em;
/* الحفاظ على اتجاه النص من اليسار لليمين للأكواد البرمجية */
/* direction: ltr;
unicode-bidi: embed;
/* إضافة لون خلفية لتمييزها عن النص العادي */
/*background-color: #f8f8f8;
padding: 2px 5px;
border-radius: 4px;*/
}
/*🛠️ 1. تعديل كود العناصر (RTL) لضمان عدم اختفاء الأزرار
في العربية، قد تختلف أحجام الخطوط، لذا نعدل الكود لضمان مرونة العرض:*/
body.rtl button,
body.rtl input,
body.rtl optgroup,
body.rtl select,
body.rtl textarea {
color: inherit;
font: inherit;
margin: 0;
/*text-align: right; /* ضمان اتجاه النص داخل الحقول */
}
/*🛠️ 1. تنسيق الأزرار لوضع RTL
في التصميم العربي، قد تتمدد النصوص داخل الأزرار، لذا نحتاج لضمان ظهور المحتوى بالكامل:*/
body.rtl button {
overflow: visible;
/*cursor: pointer;
text-align: center;*/
}
/*بما أننا وصلنا إلى كود text-transform: none للأزرار والقوائم، فهذا يؤكد أننا نتعامل مع خصائص CSS الأساسية للقالب. في اللغة العربية، خاصية text-transform (التي تحول الحروف لكبيرة أو صغيرة) لا تؤثر على النص العربي، لكنها مهمة لضمان عدم تشوه الرموز أو النصوص اللاتينية داخل الموقع.
ومع ذلك، تظل المشكلة الأساسية في قالب StoreVilla هي "خمول المنتجات" التي لا تظهر إلا عند تحريك السهم.
إليك الحل النهائي الذي يربط بين تنسيق الأزرار وحل مشكلة ظهور المنتجات:
1. تنسيق الأزرار والقوائم لوضع RTL
سنضمن أن الأزرار (بما فيها أسهم السلايدر) تعمل بشكل صحيح في الاتجاه العربي:*/
body.rtl button,
body.rtl select {
text-transform: none;
font-family: inherit; /* لضمان عدم تغير الخط العربي داخل الأزرار */
text-align: right;
}
/*أنت الآن في الأكواد الخاصة بخصائص أزرار التحكم. بما أنك أكدت أن المنتجات تظهر فقط عند "الضغط" على السهم (الذي هو برمجياً أحد هذه الأزرار)، فهذا يثبت أن المشكلة هي عدم تفعيل تلقائي (Auto-init Failure) للمكتبة البرمجية في وضع RTL.
في قالب StoreVilla، الأزرار التي أرسلت كودها هي المسؤولة عن تحريك السلايدر، وعند النقر عليها، يستيقظ السكريبت ويقوم بحساب العرض الصحيح للمنتجات.
إليك الحل النهائي لدمج هذه الأزرار مع إصلاح ظهور المنتجات تلقائياً:
1. تنسيق الأزرار لوضع RTL
سنضيف خاصية تضمن أن الأزرار تعمل بسلاسة في النسخة العربية ولا تتداخل مع النصوص:*/
body.rtl button,
body.rtl html input[type="button"],
body.rtl input[type="reset"],
body.rtl input[type="submit"] {
-webkit-appearance: button;
cursor: pointer;
font-family: inherit; /* لضمان ظهور الخط العربي بشكل صحيح */
}
/* إصلاح مكان أسهم التمرير في StoreVilla */
/*body.rtl .slick-prev,
body.rtl .slick-next {
z-index: 100 !important;
}*/
/*بما أنك تقوم بنسخ كود الـ CSS الأساسي لقالب StoreVilla، فإن تعديل هذا الجزء تحديداً للعربية بسيط جداً، حيث يركز على ضمان عدم وجود "تلميحات" أو هوامش تعيق شكل الزر المعطل في الواجهة العربية.
إليك الكود المعدل:*/
/* تنسيق الأزرار والحقول المعطلة لوضع RTL */
body.rtl button[disabled],
body.rtl html input[disabled] {
cursor: default;
opacity: 0.6; /* إضافة شفافية لتمييز الزر المعطل في الواجهة العربية */
background-color: #f5f5f5; /* لون خلفية محايد */
pointer-events: none; /* منع التفاعل تماماً */
}
/*بما أنك تقوم بتنظيف ملف الـ CSS لقالب StoreVilla، فإن هذا الكود خاص بمتصفح "فايرفوكس" لإزالة الحدود والمسافات الداخلية الزائدة التي تظهر حول الأزرار عند النقر عليها.
في النسخة العربية، لا يحتاج هذا الكود لتعديل في القيم (لأن الصفر لا يتغير)، ولكننا سنقوم بربطه بخصائص تضمن ثبات شكل الأزرار في اتجاه الـ RTL.
🛠️ الكود المعدل للعربية:*/
/* إزالة الحواف الداخلية في فايرفوكس لضمان تناسق الأزرار في RTL */
body.rtl button::-moz-focus-inner,
body.rtl input::-moz-focus-inner {
border: 0;
padding: 0;
}
/* إضافة تحسين للأزرار لضمان عدم اهتزاز النص العربي عند النقر */
body.rtl button:focus,
body.rtl input[type="button"]:focus {
outline: none; /* إزالة الإطار الافتراضي ليبقى التصميم نظيفاً */
}
/*بما أننا وصلنا لكود input { line-height: normal; } وهو المسؤول عن ارتفاع النص داخل حقول الإدخال، فهذا الجزء حساس جداً في اللغة العربية.
الخطوط العربية (مثل تجوال، كايرو، أو خطوط النظام) تحتاج عادةً لارتفاع سطر أكبر من الخطوط اللاتينية لأن الحروف تحتوي على نقاط وعلامات علوية وسفلية (مثل حرف "ي" أو "ط")، واستخدام normal قد يؤدي إلى "قص" الأجزاء العلوية أو السفلية من الحروف داخل الحقل.
🛠️ الكود المعدل للعربية (RTL):*/
body.rtl input {
line-height: 1.5 !important; /* لضمان ظهور الحروف العربية كاملة دون قص */
padding-top: 8px; /* موازنة المسافة العلوية */
padding-bottom: 8px; /* موازنة المسافة السفلية */
text-align: right; /* التأكد من أن الكتابة تبدأ من اليمين */
}
/*بما أننا وصلنا إلى خيارات الاختيار (checkbox و radio)، فهذه العناصر في قالب StoreVilla تُستخدم غالباً في صفحة "إتمام الطلب" (Checkout) لاختيار طريقة الدفع أو الشحن، وفي "تصفية المنتجات" (Sidebar Filters).
في النسخة العربية، المشكلة الشائعة هي أن هذه المربعات تلتصق بالنص الذي يليها أو تظهر بمحاذاة خاطئة.
🛠️ الكود المعدل للعربية (RTL):
سنقوم بضبط المسافات لضمان وجود فراغ كافٍ بين المربع والنص العربي:*/
body.rtl input[type="checkbox"],
body.rtl input[type="radio"] {
box-sizing: border-box;
padding: 0;
margin-left: 10px; /* إضافة مسافة جهة اليسار ليفصل عن النص الذي يليه */
margin-right: 0; /* إلغاء أي مسافة يمين قديمة */
cursor: pointer;
}
/* تحسين محاذاة النص مع المربع في العربية */
body.rtl .form-row label.checkbox,
body.rtl .form-row label.radio {
display: inline-flex;
align-items: center;
cursor: pointer;
}
/*بما أنك وصلت لكود أزرار زيادة ونقصان العدد (inner-spin-button) في حقول الأرقام، فهذا الجزء يظهر غالباً في صفحة السلة (Cart) عند تحديد كمية المنتج.
في النسخة العربية، تظهر هذه الأزرار الصغيرة غالباً في جهة اليسار (داخل الحقل) بدلاً من اليمين، وقد تتداخل مع الأرقام العربية إذا لم يتم ضبطها.
🛠️ الكود المعدل للعربية (RTL):
سنضمن أن الأزرار تأخذ الارتفاع الصحيح ولا تسبب تشوهاً في شكل حقل الكمية:*/
/* ضبط أزرار زيادة ونقصان الكمية في المتصفحات الحديثة (Chrome, Safari, Edge) */
body.rtl input[type="number"]::-webkit-inner-spin-button,
body.rtl input[type="number"]::-webkit-outer-spin-button {
height: auto;
/* في بعض الأحيان يفضل نقل الأزرار لليسار لترك مساحة للرقم في اليمين */
margin: 0;
-webkit-appearance: inner-spin-button !important;
}
/* تحسين شكل حقل الكمية في صفحة المنتج والسلة */
body.rtl input[type="number"] {
text-align: center; /* توسيط الرقم لضمان عدم تداخله مع الأزرار الجانبية */
padding-left: 5px;
padding-right: 5px;
}
/*هذا الكود يختص بـ حقل البحث، وتحديداً لإخفاء أيقونة "الإلغاء" (العلامة الصغيرة $\times$) وأي ديكورات إضافية يفرضها متصفح سفاري أو كروم. في المواقع العربية، يُفضل فعلاً التحكم في هذه العناصر يدوياً لأن مكانها الافتراضي قد يفسد شكل النص العربي داخل الحقل.🛠️ التعديل للعربية (RTL):بما أنك قمت بإخفاء الأيقونات الافتراضية، ستحتاج للتأكد من أن النص يبدأ من اليمين بوضوح:*/
/* إخفاء الأيقونات الافتراضية في حقول البحث */
body.rtl input[type="search"]::-webkit-search-cancel-button,
body.rtl input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/* تحسين شكل حقل البحث في قالب StoreVilla للعربية */
body.rtl input[type="search"] {
direction: rtl;
text-align: right;
padding-right: 15px; /* مساحة للنص من جهة اليمين */
padding-left: 35px; /* مساحة لأيقونة البحث (العدسة) إذا كانت في اليسار */
}
/*بما أننا وصلنا إلى كود الـ fieldset (وهو الإطار الذي يحيط بمجموعات الحقول مثل بيانات الشحن أو الفوترة)، فهذا الجزء مهم جداً لتنظيم شكل "صفحة الدفع" و"حسابي".
في وضع RTL، القيم الثابتة للهوامش (margin: 0 2px) قد تسبب عدم توازن في المحاذاة، حيث يميل الإطار لجهة دون الأخرى في التصميم العربي.
🛠️ الكود المعدل للعربية (RTL):
سنقوم بضبط المسافات لضمان توزيع الإطار بشكل متساوٍ، مع تعديل بسيط للحدود لتبدو أكثر عصرية وتناسب خطوط الويب العربية:*/
body.rtl fieldset {
border: 1px solid #e1e1e1; /* لون أرق وأوضح */
margin: 10px 0; /* موازنة الهوامش العلوية والسفلية */
padding: 15px; /* مساحة داخلية أوسع لراحة العين */
text-align: right; /* ضمان محاذاة النص لليمين */
}
/*أنت الآن في كود الـ legend (العنوان الذي يوضع فوق إطار الـ fieldset). في قالب StoreVilla، تظهر هذه العناصر غالباً في صفحات "إعدادات الحساب" أو في نماذج تقييم المنتجات.
في النسخة العربية، القيمة الافتراضية border: 0 و padding: 0 قد تجعل العنوان يلتصق بشدة بإطار الحاوية أو يظهر في أقصى اليسار بشكل غير متناسق.
🛠️ الكود المعدل للعربية (RTL):
سنقوم بضبط مكان العنوان ليكون في الجهة اليمنى (بداية الإطار) مع إضافة مسافات بسيطة لجعله مريحاً للعين:*/
body.rtl legend {
border: 0;
padding: 0 10px; /* إضافة مسافة يمين ويسار النص لكي لا يلمس الإطار */
text-align: right; /* ضمان المحاذاة لليمين */
float: right; /* إجبار العنوان على البدء من جهة اليمين في المتصفحات القديمة */
width: auto;
margin-bottom: 10px;
font-weight: 600; /* جعل العنوان بارزاً قليلاً */
}
/*بما أننا وصلنا إلى كود الـ textarea (صندوق النص الكبير)، فهذا العنصر حيوي جداً في صفحات "اتصل بنا" وفي "ملاحظات الطلب" بصفحة إتمام الشراء في StoreVilla.
في النسخة العربية، خاصية overflow: auto تضمن ظهور شريط التمرير فقط عند الحاجة، ولكن هناك لمسات إضافية يحتاجها النص العربي ليكون مريحاً للكتابة والقراءة.
🛠️ الكود المعدل للعربية (RTL):
سنقوم بضبط اتجاه الكتابة وتغيير حجم الصندوق ليتناسب مع الخطوط العربية التي تكون عادةً أعرض من الخطوط اللاتينية:*/
body.rtl textarea {
overflow: auto;
direction: rtl; /* ضمان بدء الكتابة من اليمين */
text-align: right; /* محاذاة النص لليمين */
line-height: 1.6; /* زيادة المسافة بين السطور لراحة العين في القراءة العربية */
padding: 10px 15px; /* مساحة داخلية مريحة */
font-family: inherit; /* لضمان استخدام نفس الخط العربي للموقع */
resize: vertical; /* السماح للمستخدم بتكبير الصندوق طولياً فقط للحفاظ على التصميم */
}
/*بما أننا وصلنا إلى كود الـ optgroup (وهو العنوان الذي يصنف الخيارات داخل القائمة المنسدلة select)، فهذا العنصر يظهر في متجرك غالباً في قائمة اختيار الدول عند الدفع، أو في فلتر المنتجات حسب التصنيفات.
في التصميم العربي، الخط العريض (bold) لبعض الخطوط قد يبدو "سميكاً" أكثر من اللازم ويؤدي لتداخل الحروف (مثل خط Cairo أو Tajawal)، لذا يفضل ضبطه ليكون متوازناً.
🛠️ الكود المعدل للعربية (RTL):
سنقوم بضبط الوزن الخطّي مع ضمان محاذاة النص لليمين لسهولة القراءة:*/
body.rtl optgroup {
font-weight: bold; /* وزن خط واضح دون مبالغة */
text-align: right; /* ضمان المحاذاة لليمين داخل القائمة */
font-style: normal; /* تجنب الإمالة التي قد تشوه الخط العربي */
padding: 5px 10px; /* إعطاء مساحة للعنوان داخل القائمة */
}
/* لضمان ظهور الخيارات التابعة له بشكل صحيح */
body.rtl optgroup option {
padding-right: 15px; /* إزاحة الخيارات للداخل قليلاً لتمييزها عن العنوان */
}
/*بما أنك وصلت إلى كود الجداول (table) في قالب StoreVilla، فأنت الآن تتعامل مع أحد أكثر الأجزاء أهمية في تجربة العميل، لأن الجداول هي المسؤول الأول عن عرض:
سلة المشتريات (Cart Page): حيث تظهر صور المنتجات، الأسعار، والكميات.
تفاصيل الطلب (Checkout): حيث يرى العميل ملخص فاتورته.
في النسخة العربية (RTL)، القيم border-spacing: 0 ممتازة، لكن الجداول غالباً ما تعاني من مشاكل في محاذاة النصوص داخل الخلايا (td و th) وفي اتجاه الحدود.
🛠️ الكود المعدل للعربية (RTL):
سنضيف لمسات تضمن أن الجدول يظهر بشكل منظم من اليمين لليسار مع مسافات مريحة للقراءة:*/
body.rtl table {
border-collapse: collapse;
border-spacing: 0;
width: 100%; /* ضمان تمدد الجدول ليملأ الحاوية العربية */
direction: rtl; /* اتجاه البيانات من اليمين لليسار */
text-align: right; /* محاذاة النصوص لليمين */
}
/* تحسين محاذاة رؤوس الجداول وخلايا البيانات */
body.rtl th,
body.rtl td {
text-align: right;
padding: 12px 15px; /* مساحات داخلية أفضل للخطوط العربية */
border: 1px solid #eee; /* حدود خفيفة لتمييز الصفوف */
}
/* في صفحة السلة: محاذاة المجموع الكلي ليكون في أقصى اليسار (برمجياً هو نهاية الجدول) */
body.rtl .cart-collaterals {
float: left; /* نقل ملخص السلة لليسار في الواجهة العربية */
}
/*بما أننا وصلنا إلى كود خلايا الجدول (td و th)، فهذا هو الجزء الذي يحدد كيف تظهر نصوص الأسعار، وأسماء المنتجات، وكمياتها داخل سلة المشتريات والفواتير.
في قالب StoreVilla، القيمة الافتراضية text-align: left هي العدو الأول للتنسيق العربي، فهي تجعل الأرقام والنصوص تبدأ من اليسار بينما الجدول يتجه لليمين، مما يسبب تشتتاً بصرياً كبيراً.
🛠️ الكود المعدل للعربية (RTL):
سنقوم بقلب المحاذاة لليمين وإضافة مسافات (Padding) كافية، لأن الخطوط العربية تحتاج مساحة تنفس أكبر من اللاتينية لكي لا تلتصق الحروف بالحدود.*/
body.rtl td,
body.rtl th {
padding: 12px 15px; /* مسافة داخلية مريحة للعين */
text-align: right; /* محاذاة النص لليمين ليتناسب مع اتجاه القراءة العربي */
vertical-align: middle; /* لضمان توسط النصوص والصور داخل الخلية */
}
/* تمييز عناوين الجدول (الرأس) */
body.rtl th {
font-weight: bold;
background-color: #f9f9f9; /* تمييز بسيط لخلفية العنوان */
}
/*بما أنك وصلت إلى كود td a (الروابط داخل الجداول)، فأنت الآن تقوم بتحديد شكل روابط أسماء المنتجات في صفحة السلة وفواتير العملاء.
في النسخة العربية، اللون #0091D5 (الأزرق السماوي) هو لون جيد، ولكن التصميم العربي يميل أحياناً إلى ألوان أكثر تبايناً لسهولة القراءة، كما أننا نحتاج لضبط شكل الرابط عند تمرير الماوس (Hover) لضمان تجربة مستخدم واضحة.
🛠️ الكود المعدل للعربية (RTL):
سنحافظ على اللون الذي اخترته ولكن مع إضافة تحسينات لضمان ظهور الروابط بشكل احترافي في الجداول العربية:*/
body.rtl td a {
color: #420537;/*لون اسم المنتج عند فتح سلة المشت */
text-decoration: none;
transition: all 0.3s ease; /* سلاسة عند تغيير اللون */
font-weight: 500; /* جعل اسم المنتج بارزاً قليلاً */
}
/* تأثير عند تمرير الماوس على الرابط في العربية */
body.rtl td a:hover {
color: #3b0431; /* درجة أغمق قليلاً عند التمرير لون اسم المنتج عند فتح سلة المشتريات*/
/*text-decoration: underline; /* إضافة خط أسفل النص لتنبيه المستخدم */
font-weight: bold;
}
/*--------------------------------------------------------------
# Typography
--------------------------------------------------------------*/
/*وصلنا الآن إلى أهم جزء في ملف الـ CSS، وهو الكود المسؤول عن هوية الموقع البصرية (الخطوط والألوان). بما أنك تعمل على تحويل قالب StoreVilla للعربية، فإن هذا الكود يحتاج إلى تغيير جذري لأن خط "Open Sans" لا يدعم العربية بشكل احترافي، مما يجعل الحروف تظهر بشكل صغير أو مشتت.
إليك التعديل المثالي لضمان ظهور الخطوط العربية بشكل أنيق وواضح:
🛠️ الكود المعدل للعربية (RTL):
يجب استبدال الخط بآخر يدعم العربية (مثل Cairo أو Tajawal) أو استخدام خطوط النظام الافتراضية لضمان السرعة والوضوح:*/
body,
button,
input,
select,
textarea {
color: #404040;
/* استخدام خطوط تدعم العربية بشكل أساسي */
font-family: 'Cairo', 'Tajawal', 'Segoe UI', Tahoma, Arial, sans-serif;
font-size: 16px;
font-size: 1rem;
line-height: 1.6; /* الخط العربي يحتاج مسافة أكبر قليلاً من 1.5 لكي لا تلتصق الحروف */
text-align: right; /* ضمان أن كل النصوص تبدأ من اليمين */
}
/*بما أنك وصلت إلى تنسيق العناوين (h1 إلى h6) في قالب StoreVilla، فهذا يعني أنك بدأت في ضبط الهيكل البصري للمحتوى.
في النسخة العربية، خاصية clear: both مهمة جداً لأنها تمنع العناوين من "الالتفاف" حول العناصر العائمة (مثل الصور المحاذية لليمين أو اليسار)، مما يضمن أن يبدأ العنوان دائماً في سطر جديد ونظيف.
🛠️ الكود المعدل للعربية (RTL):
سنضيف محاذاة النص لليمين ونقوم بضبط الهوامش (Margins) لتناسب الخطوط العربية، لأن العناوين العربية غالباً ما تحتاج مساحة علوية وسفلية أكبر لتجنب تداخل النقاط مع النصوص الأخرى:*/
body.rtl h1,
body.rtl h2,
body.rtl h3,
body.rtl h4,
body.rtl h5,
body.rtl h6 {
clear: both;
text-align: right; /* ضمان أن العناوين تبدأ من اليمين */
direction: rtl; /* اتجاه النص العربي */
margin-bottom: 0.5em; /* مسافة بسيطة أسفل العنوان */
margin-top: 1em; /* مسافة كافية أعلى العنوان */
line-height: 1.4; /* ارتفاع مناسب للعناوين العربية العريضة */
}
/*بما أننا وصلنا إلى وسم الفقرات (p)، فهذا هو الكود المسؤول عن توزيع المساحات بين النصوص في المقالات، وصفحات المنتجات، وأي محتوى نصي في قالب StoreVilla.
في النسخة العربية، المسافة 1.5em قد تبدو كبيرة جداً إذا كان الخط العربي المستخدم سميكاً، كما أننا نحتاج لضمان محاذاة النص لليمين بدلاً من اليسار (الافتراضي).
🛠️ الكود المعدل للعربية (RTL):
سنقوم بضبط اتجاه النص وتعديل المسافة السفلية لتبدو أكثر تناسقاً مع الخطوط العربية:*/
body.rtl p {
margin-bottom: 1.2em; /* تقليل المسافة قليلاً لتناسب تباعد الأسطر العربية */
text-align: right; /* ضمان بدء النص من اليمين */
direction: rtl; /* تحديد اتجاه الكتابة للعربية */
line-height: 1.7; /* زيادة ارتفاع السطر لراحة العين في القراءة العربية */
}
/* في حال وجود صور داخل الفقرة، نضمن عدم تداخلها */
body.rtl p img {
margin-left: 15px; /* مسافة يسار الصورة ليبتعد عنها النص العربي */
margin-right: 0;
float: right; /* محاذاة الصورة لليمين */
}
/*بما أنك وصلت إلى تنسيقات النصوص المائلة (italic) مثل em و i و cite و dfn في قالب StoreVilla، فهناك نقطة تقنية هامة جداً تتعلق باللغة العربية:
الخطوط العربية (مثل Cairo و Tajawal وغيرها) لا تدعم خاصية الإمالة (Italic) بشكل حقيقي. عندما تطلب من المتصفح جعل الخط العربي مائلاً، فإنه يقوم بـ "إمالة قسرية" (Skewing) تجعل الحروف تبدو مشوهة أو متداخلة وغير مريحة للعين.
🛠️ الكود المعدل للعربية (RTL):
يُفضل في التصميم العربي الاحترافي استبدال "الإمالة" بـ "تغيير الوزن" (Bold) أو تغيير بسيط في درجة اللون لتمييز النص دون تشويه الحروف:*/
body.rtl dfn,
body.rtl cite,
body.rtl em,
body.rtl i {
font-style: normal; /* إلغاء الإمالة المشوهة للخط العربي */
font-weight: 600; /* تمييز النص بجعله سميكاً قليلاً بدلاً من الإمالة */
color: #555; /* تغيير بسيط في اللون للتمييز البصري */
}
/* إذا كنت تستخدم أيقونات FontAwesome (التي تستخدم وسم i عادةً) */
body.rtl i.fa,
body.rtl i.fas,
body.rtl i.fab {
font-style: normal !important; /* لضمان عدم تأثر الأيقونات */
margin-left: 5px; /* مسافة يسار الأيقونة لتفصلها عن النص العربي */
margin-right: 0;
}
/*بما أنك وصلت إلى كود الاقتباسات (blockquote) في قالب StoreVilla، فهذا العنصر يُستخدم عادةً في صفحات "من نحن" أو في مقالات المدونة لإبراز آراء العملاء أو نصوص معينة.
في وضع RTL، القيمة margin: 0 1.5em ستقوم بعمل إزاحة من اليمين واليسار معاً، ولكن في التصميم العربي الاحترافي، نفضل عادةً تمييز الاقتباس بـ "حد جانبي" (Border) على جهة اليمين بدلاً من اليسار.
🛠️ الكود المعدل للعربية (RTL):
سنقوم بنقل الهامش ليكون من جهة اليمين فقط، مع إضافة حد ملون ليعطي شكلاً جمالياً يتماشى مع اتجاه القراءة العربي:*/
body.rtl blockquote {
margin: 1.5em 1.5em 1.5em 0; /* الهامش من اليمين بدلاً من اليسار */
padding: 10px 20px; /* مسافة داخلية للنص */
border-right: 5px solid #0091D5; /* الحد الملون جهة اليمين */
border-left: none; /* إلغاء الحد من الجهة اليسرى */
font-style: normal; /* تجنب الإمالة المشوهة للخط العربي */
text-align: right; /* محاذاة النص لليمين */
background-color: #f9f9f9; /* خلفية خفيفة لتمييز الاقتباس */
}
/*بما أننا وصلنا إلى وسم العنوان (address) في قالب StoreVilla، فهذا الكود مهم جداً لصفحات "اتصل بنا" وفي تذييل الموقع (Footer) حيث تضع عنوان المتجر الفعلي أو بيانات التواصل.
في النسخة العربية، القيمة الافتراضية للخط غالباً ما تكون مائلة (italic) وهو ما يشوه الحروف العربية كما ذكرنا سابقاً، لذا سنقوم بضبط الهوامش وإلغاء الإمالة لضمان الوضوح.
🛠️ الكود المعدل للعربية (RTL):*/
body.rtl address {
margin: 0 0 1.5em;
font-style: normal; /* إلغاء الإمالة لضمان وضوح الخط العربي */
line-height: 1.6; /* ارتفاع سطر مريح لقراءة العناوين */
text-align: right; /* محاذاة النص لليمين */
direction: rtl; /* تحديد اتجاه الكتابة */
}
/*بما أننا وصلنا إلى وسم pre (المسؤول عن عرض النصوص المنسقة مسبقاً أو الأكواد البرمجية)، فهذا العنصر يحتاج إلى تعامل خاص في القوالب العربية.
المشكلة الأساسية هنا أن محتوى الـ pre غالباً ما يكون تقنياً (أرقام أو أكواد إنجليزية)، لذا يجب أن نضمن بقاء النص داخله بوضوح مع ضبط الإزاحات لتناسب اتجاه الصفحة العربي (RTL) دون أن يختفي النص خلف شريط التمرير.
🛠️ الكود المعدل للعربية (RTL):
سنقوم بضبط اتجاه النص ليكون من اليسار لليمين (داخل الصندوق فقط) لأن الأكواد تُقرأ هكذا عالمياً، مع ضمان أن الصندوق نفسه والمساحات حوله تتبع تنسيق الموقع العربي:*/
body.rtl pre {
background: #eee; /* لون أخف وأكثر عصرية */
/* الحفاظ على الخطوط المونوسبيس للأكواد */
font-family: "Courier 10 Pitch", Courier, monospace;
font-size: 15px;
font-size: 0.9375rem;
line-height: 1.6;
margin-bottom: 1.6em;
max-width: 100%;
overflow: auto;
padding: 1.6em;
/* إضافات النسخة العربية */
direction: ltr; /* الأكواد تبقى من اليسار لليمين لسهولة القراءة */
text-align: left; /* محاذاة النص لليسار داخل الصندوق */
border-right: 4px solid #420537; /* حد جمالي جهة اليمين لتمييزه في التصميم العربي */
border-left: none;
}
/*بما أننا وصلنا إلى تنسيقات الأكواد المختصرة (code) وأزرار لوحة المفاتيح (kbd) وغيرها، فنحن الآن في اللمسات الأخيرة لملف الـ Normalize/Reset.
هذه العناصر، تماماً مثل pre الذي عدلناه سابقاً، غالباً ما تحتوي على نصوص تقنية أو إنجليزية. في القوالب العربية (RTL)، المشكلة الكبرى تكمن في أن الخطوط الافتراضية لهذه العناصر (monospace) قد تظهر بشكل أصغر بكثير من الخط العربي المحيط بها، مما يجعلها تبدو غير متناسقة.
🛠️ الكود المعدل للعربية (RTL):
سنحافظ على الخطوط التقنية لأنها ضرورية، ولكن سنقوم بضبط "ارتفاع السطر" و"الاتجاه" لضمان عدم تداخلها مع النص العربي المحيط:*/
/*code,
kbd,
tt,
var {
/*font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;*/
/* font-size: 15px;
font-size: 0.9375rem;
}*/
body.rtl code,
body.rtl kbd,
body.rtl tt,
body.rtl var {
/* الحفاظ على الخطوط التقنية مع إضافة خطوط نظام احتياطية */
font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
font-size: 0.9375rem;
direction: ltr; /* جعل الكود التقني يُقرأ من اليسار لليمين */
display: inline-block; /* لضمان عدم انكسار النص التقني بشكل خاطئ وسط الجملة العربية */
unicode-bidi: embed; /* معالجة النصوص المختلطة (عربي + إنجليزي) بذكاء */
background-color: #f0f0f0; /* خلفية خفيفة لتمييز الأكواد وسط النص العربي */
padding: 2px 4px; /* مساحة بسيطة حول الكود */
border-radius: 3px;
}
/*بما أننا وصلنا إلى تنسيقات الاختصارات (abbr و acronym) في قالب StoreVilla، فنحن الآن نضع اللمسات الأخيرة على ملف التنسيقات الأساسية. هذه العناصر تُستخدم عادةً لتوضيح مصطلحات معينة (مثل "د.إ" للدرهم الإماراتي أو "VAT" للضريبة)، حيث يظهر نص توضيحي عند تمرير الماوس.
في التصميم العربي، النقاط (dotted) قد تتداخل مع النقاط الموجودة في الحروف العربية (مثل ق، ي، ب) إذا كان الخط صغيراً، لذا سنقوم بضبط المسافات لضمان الوضوح.
🛠️ الكود المعدل للعربية (RTL):
سنقوم بزيادة المسافة السفلية قليلاً ليفصل "النقط التوضيحي" عن نقاط الحروف العربية، مع ضمان ظهور أيقونة المساعدة بشكل صحيح:*/
/*abbr,
acronym {
border-bottom: 1px dotted #666;
cursor: help;
}*/
body.rtl abbr,
body.rtl acronym {
border-bottom: 1px dotted #666;
cursor: help;
text-decoration: none; /* إلغاء أي خط افتراضي قديم */
padding-bottom: 1px; /* مساحة بسيطة لعدم ملامسة النقاط للحروف العربية */
}
/* تحسين شكل النص التوضيحي عند الوقوف بالماوس */
body.rtl abbr[title]:hover {
color: #0091D5; /* تغيير اللون عند التمرير لزيادة التفاعل */
}
/*بما أننا وصلنا إلى وسوم التمييز (mark و ins) في قالب StoreVilla، فهذه العناصر تُستخدم عادةً لتمييز كلمات معينة داخل النصوص (مثل نتائج البحث أو العروض الخاصة).
في النسخة العربية، نلاحظ أن الإعداد الافتراضي يلغي الخط السفلي (text-decoration: none) ولكن قد يفتقر التمييز للوضوح البصري الكافي لجذب عين القارئ العربي، خاصة أن الحروف العربية متصلة بطبيعتها.
🛠️ الكود المعدل للعربية (RTL):
سنقوم بإعادة تفعيل خلفية التمييز بلون هادئ ومريح للعين، مع إضافة "حواف مدورة" بسيطة لتناسب التصميم العصري للمتاجر الإلكترونية:*/
/*mark,
ins {
/* background: #fff9c0; */
/* text-decoration: none;
}*/
body.rtl mark,
body.rtl ins {
background-color: #fff9c0; /* لون تمييز أصفر فاتح جذاب */
color: #333; /* ضمان وضوح النص فوق الخلفية */
text-decoration: none;
padding: 2px 5px; /* مساحة حول الكلمة المميزة */
border-radius: 3px; /* لمسة عصرية للحواف */
display: inline-block; /* لضمان ثبات المساحة حول الكلمة */
line-height: 1;
}
/* في حال كان الوسم ins يُستخدم لإظهار السعر الجديد (المضاف) */
body.rtl ins {
background-color: #e7f9ec; /* لون أخضر فاتح للأسعار أو الإضافات الجديدة */
color: #28a745;
}
/*بما أننا وصلنا إلى وسم big (الذي يُستخدم لتكبير النص بنسبة معينة)، فهناك ملاحظة تقنية هامة جداً عند التعامل مع الخطوط العربية في قوالب مثل StoreVilla.
الخطوط العربية بطبيعتها تظهر "أصغر" بصرياً من الخطوط اللاتينية حتى لو كانت بنفس الحجم (Pixel). لذا، فإن نسبة 125% قد لا تكون كافية أحياناً لجعل النص العربي بارزاً، أو قد تجعله ضخماً بشكل يؤدي لتداخل الأسطر إذا لم يتم ضبط الارتفاع.
🛠️ الكود المعدل للعربية (RTL):
سنقوم بضبط الحجم مع التأكد من أن المسافة بين الأسطر (line-height) تسمح للنص العربي الضخم بالظهور دون أن تقطع الحروف العلوية أو السفلية (مثل أ، ي):*/
/*big {
font-size: 125%;
}*/
body.rtl big {
font-size: 135%; /* زيادة النسبة قليلاً لتناسب وضوح الخط العربي */
/*line-height: 1.4; /* إعطاء مساحة كافية للنقاط والهمزات */
/*display: inline-block; /* لضمان ثبات أبعاد النص داخل الفقرة */
}
/*--------------------------------------------------------------
# Elements
--------------------------------------------------------------*/
html {
/*box-sizing: border-box;*/
box-sizing: border-box !important;/* هذا السطر سيجعل المتصفح يحسب العرض شاملاً الحدود والمسافات، مما يمنع اختفاء الرابع */
}
*,
*:before,
*:after {
/* Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
box-sizing: inherit;
/* box-sizing: border-box !important;/* هذا السطر سيجعل المتصفح يحسب العرض شاملاً الحدود والمسافات، مما يمنع اختفاء الرابع */
}
body {
background: #fff;
/* Fallback for when there is no custom background color defined. */
}
/*بما أننا عدنا لتنسيق وسم الاقتباس (blockquote) مع هذه الخصائص المحددة، فهنا تظهر بوضوح مشكلة القوالب الغربية عند تحويلها للعربية.
لاحظ في الكود الخاص بك أن الـ padding موجود في جهة اليسار فقط (0 0 0 1.263...em)، وهذا يعني أنه في التصميم العربي سيظهر النص ملتصقاً بالحافة اليمنى تماماً مع فراغ كبير غير مبرر في جهة اليسار.
🛠️ الكود المعدل للعربية (RTL):
سنقوم بنقل المسافة (Padding) إلى جهة اليمين، وسنضيف حداً (Border) لتمييز الاقتباس بصرياً، لأن "الاقتباس بدون حدود" في النصوص العربية غالباً ما يختلط مع الفقرات العادية ويصعب تمييزه.*/
/*blockquote {
border: none;
color: #6a6a6a;
font-size: 16px;
line-height: 1.4736842105;
margin: 1em 0;
padding: 0 1.263157895em 0 0;
}*/
body.rtl blockquote {
border: none;
border-right: 4px solid #0091D5; /* إضافة حد يمين لتمييز الاقتباس العربي */
color: #6a6a6a;
font-size: 16px;
line-height: 1.6; /* زيادة طفيفة لتناسب الحروف العربية */
margin: 1em 0;
padding: 0 1.263157895em 0 0; /* عكس المسافة لتصبح من اليمين */
text-align: right;
direction: rtl;
}
/*💡 لمسة احترافية لقالب StoreVilla:
في صفحات "آراء العملاء" أو "عن المتجر"، يفضل غالباً إضافة خلفية باهتة جداً للاقتباس لجعله يبدو كـ "بطاقة" (Card) احترافية:*/
body.rtl blockquote {
background-color: #fcfcfc;
padding: 15px 20px 15px 15px; /* موازنة المسافات */
}
blockquote p {
font-size: 14px;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: "";
}
blockquote,
q {
quotes: "" "";
}
hr {
background-color: #ccc;
border: 0;
height: 1px;
margin-bottom: 1.5em;
}
ul,
ol {
margin: 0;
padding: 0;
}
ul li {
list-style: none;
}
ol {
list-style: none;
}
dt {
font-weight: bold;
}
dd {
margin: 0 1.5em 1.5em;
}
img {
height: auto;
/* Make sure images are scaled correctly. */
max-width: 100%;
/* Adhere to container width. */
vertical-align: middle;
}
table {
margin: 0 0 1.5em;
width: 100%;
}
/*--------------------------------------------------------------
# Forms
--------------------------------------------------------------*/
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
border: 1px solid;
border-color: #ccc #ccc #bbb;
border-radius: 3px;
background: #e6e6e6;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 15px 17px rgba(255, 255, 255, 0.5), inset 0 -5px 12px rgba(0, 0, 0, 0.05);
color: rgba(0, 0, 0, .8);
font-size: 12px;
font-size: 0.75rem;
line-height: 1;
padding: .6em 1em .4em;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
}
button:focus,
input[type="button"]:focus,
input[type="reset"]:focus,
input[type="submit"]:focus,
button:active,
input[type="button"]:active,
input[type="reset"]:active,
input[type="submit"]:active {
border-color: #aaa #bbb #bbb;
box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.5), inset 0 2px 5px rgba(0, 0, 0, 0.15);
}
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
color: #666;
border: 1px solid #ccc;
border-radius: 3px;
}
select {
border: 1px solid #ccc;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
color: #111;
}
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"] {
padding: 3px;
}
textarea {
padding-left:0;
padding-right: 3px;
width: 100%;
}
/*--------------------------------------------------------------
# Navigation
--------------------------------------------------------------*/
/*--------------------------------------------------------------
## Links
--------------------------------------------------------------*/
/*a {
color: royalblue;
}
a:visited {
color: purple;
}
a:hover,
a:focus,
a:active {
color: midnightblue;
}
a:focus {
outline: 0;
}
a:hover,
a:active {
outline: 0;
}*/
/*--------------------------------------------------------------
## Menus
--------------------------------------------------------------*/
/*هذا الكود هو حجر الأساس لقائمة التنقل الرئيسية. في النسخة الإنجليزية، يستخدم float: left ليبدأ ترتيب القائمة من اليسار.
عند تحويل الموقع للغة العربية (RTL)، يكمن الخطأ الشائع في ترك الـ float جهة اليسار، مما يجعل القائمة تبدأ من الجهة المعاكسة لعين القارئ العربي ويخلق فراغاً غير متناسق جهة اليمين.
🔄 التعديل البرمجي للنسخة العربية (RTL)
سنقوم بعكس اتجاه الطفو وضبط المحاذاة لتناسب القراءة من اليمين لليسار:*/
body.rtl .main-navigation {
/* 1. عكس الاتجاه لليمين */
/*float: right; */
/* 2. ضمان محاذاة العناصر بداخلها جهة اليمين */
text-align: right;
/* 3. الحفاظ على العرض الكامل */
width: 100% !important;
display: block;
clear: both;
left: 0 !important;
right: 0 !important;
max-width: 100% !important;
float: none !important; /* لإلغاء أي محاذاة جانبية قد تعيق العرض الكامل
/* 4. التأكد من اتجاه العناصر (خاصة في المتصفحات القديمة) */
direction: rtl;
}
/* إخفاء العناصر المكررة (clone) في النسخة العربية */
body.rtl .lSSlideWrapper li.clone {
display: none !important;
}
/*🎉 النتيجة بعد تطبيق الكود
سيعود الودجت لعرض 4 منتجات فقط
لن تظهر أي صورة ناقصة
لن يظهر المنتج الأول أو الأخير بنصف عرض
السلايدر سيعمل طبيعي بدون مشاكل*/
/*هذا الكود هو التنسيق الأساسي لقائمة الروابط، حيث يقوم بإخفائها افتراضيًا (ربما ليتم إظهارها عبر الجافا سكريبت أو عند تمرير الفأرة) وإزالة النقاط والهوامش.
في النسخة العربية (RTL)، المشكلة تكمن في padding-left: 0. في التصميم العربي، القوائم غالبًا ما تمتلك هوامش أو مسافات بادئة من جهة اليمين وليس اليسار.
🔄 التعديل البرمجي للنسخة العربية (RTL)
سنقوم بتصفير المسافات من الجهتين لضمان عدم وجود إزاحة غير مرغوبة، مع التأكد من أن القائمة تتبع اتجاه اليمين:*/
body.rtl .main-navigation ul {
/* تصفير المسافات من الجهتين لضمان التوسط أو المحاذاة الصحيحة */
padding-right: 0 !important;
padding-left: 0 !important;
margin: 0;
/* الحفاظ على الخصائص الأخرى */
list-style: none;
display: none; /* سيتم تغييرها إلى block عبر الـ Hover أو الجافا سكريبت */
/* التأكد من اتجاه العناصر بداخل القائمة */
text-align: right;
}
/*هذا الكود هو المسؤول عن ترتيب عناصر القائمة (مثل: الرئيسية، المتجر، من نحن) بجانب بعضها البعض. في النسخة الإنجليزية، يتم استخدام float: left لجعل الروابط تصطف من اليسار إلى اليمين.
في النسخة العربية (RTL)، إذا تركت الكود كما هو، ستظهر القائمة مقلوبة (مثلاً: ستجد زر "تسجيل الخروج" في أقصى اليمين و"الرئيسية" في أقصى اليسار)، وهذا يعاكس منطق تصفح المستخدم العربي.
🔄 التعديل البرمجي للنسخة العربية (RTL)
يجب عكس اتجاه الطفو ليكون جهة اليمين، مع الحفاظ على الوضع النسبي (position: relative) لضمان عمل القوائم المنسدلة بشكل صحيح:*/
body.rtl .main-navigation li {
/* عكس الاتجاه لليمين لترتيب العناصر بشكل صحيح */
float: right;
/* الحفاظ على الموضع النسبي للقوائم المنسدلة */
position: relative;
/* إلغاء أي هوامش يسارية موروثة وإضافتها لليمين */
margin-left: 0;
margin-right: 10px; /* مسافة بسيطة بين كل رابط والآخر */
}
/*🔍 لماذا نحتاج لهذا التعديل؟
منطق القراءة: المستخدم العربي يبدأ قراءة القائمة من اليمين. بتغيير float إلى right؛ نضمن أن أول عنصر في القائمة (عادة "الرئيسية") سيكون هو العنصر الأول جهة اليمين.
القوائم المنسدلة: خاصية position: relative ضرورية جداً هنا؛ لأن القوائم المنسدلة (Sub-menus) تعتمد عليها لتحديد مكان ظهورها. بدونها، ستظهر القائمة المنسدلة في مكان بعيد عن الزر الخاص بها.
تجنب الانهيار: عند استخدام float: right؛ تتجمع العناصر بجانب بعضها بسلاسة، ولكن تأكد دائماً أن الحاوية الأب (ul) لديها خاصية clearfix أو overflow: hidden لمنع اختفاء الخلفية.
💡 لمسة احترافية للقوائم المنسدلة:
بما أننا جعلنا العناصر تطفو لليمين، يجب أن نتأكد أن السهم الصغير (Arrow) الذي يشير لوجود قائمة فرعية يظهر في جهة اليسار من النص العربي:*/
/*body.rtl .main-navigation li.menu-item-has-children > a:after {
content: '\f107'; /* كود السهم */
/* font-family: FontAwesome;
margin-right: 8px; /* مسافة عن النص العربي */
/* float: left; /* وضع السهم في يسار الكلمة العربية */
/*}*/
/*هذا الكود يحدد الخصائص الأساسية للروابط داخل قائمة التنقل، حيث يجعل الرابط يأخذ مساحة "كتلة" (display: block) مما يسهل النقر عليه، ويزيل الخط السفلي الافتراضي (text-decoration: none).
في النسخة العربية (RTL)، هذه الخصائص تظل كما هي، لكننا نحتاج لإضافة لمسات تتعلق بـ نوع الخط، المسافات، والمحاذاة لضمان أن النص العربي يظهر بشكل مريح وسهل القراءة.
🔄 التعديل والتحسين المقترح لملف العربية (RTL)
سنقوم بتعريف الخط العربي وضمان توزيع المسافات بشكل متوازن حول الكلمات العربية:*/
body.rtl .main-navigation a {
display: block;
text-decoration: none;
/* 1. ضبط الخط العربي (القاهرة أو أي خط تفضله) */
font-family: 'Cairo', sans-serif;
font-weight: 400;
font-size: 15px;
/* 2. محاذاة النص لليمين */
text-align: right;
/* 3. إضافة مسافات كافية للنقر (Padding) */
/* نزيد المسافة الجانبية لتناسب انحناءات الحروف العربية */
padding: 10px 10px;
/* 4. لون النص والانتقال السلس */
color: #fff;
transition: all 0.3s ease;
}
/* تأثير عند تمرير الفأرة للنسخة العربية */
body.rtl .main-navigation a:hover {
color: #420537; /* اللون الأزرق الخاص بك */
background-color: rgba(0, 145, 213, 0.05); /* خلفيةخفيفة جدا ً عند لتمرير */
background-color:#fff;
}
/*هذا الكود هو المسؤول عن القائمة المنسدلة (Sub-menu). في النسخة العربية (RTL)، من الضروري جداً عكس منطق الإخفاء والإظهار الذي يعتمد عليه القالب (وهو عادةً تقنية الإزاحة بعيداً عن الشاشة).
التعديل الذي قمت به بإضافة right: -999em هو تعديل ذكي وصحيح تقنياً لإخفاء القائمة جهة اليمين بدلاً من اليسار.
🔄 التنسيق النهائي المحسن للنسخة العربية (RTL)
لضمان أن القائمة تفتح في المكان الصحيح (محاذية لليمين تحت العنصر الأب) ولا تسبب مشاكل في التمرير الأفقي، يفضل استخدام هذا التنسيق:*/
body.rtl .main-navigation ul ul {
/* 1. الظلال والموقع */
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
box-shadow: 0 3px 15px rgba(0, 0, 0, 0.1); /* ظل أنعم وأكثر عصرية */
position: absolute;
top: 100%; /* لتبدأ مباشرة بعد انتهاء ارتفاع القائمة الرئيسية */
z-index: 99999;
/* 2. منطق الإخفاء لنسخة RTL */
left: auto;
right: -999em; /* إزاحة لليمين بعيداً عن الشاشة */
/* 3. تنسيق الهيكل */
float: right;
background: #fff;
padding: 10px 0;
min-width: 200px; /*3b0431 ضمان عرض مناسب للنصوص ال420537عربية */
border-top: 2px solid #2f0227; /* لمسة جمالية بلون متجرك */
}
/* 4. منطق الإظهار عند تمرير الفأرة */
body.rtl .main-navigation ul li:hover > ul {
right: 0; /* تعود لتلتصق بحافة العنصر الأب من اليمين */
left: auto;
}
/*🔍 لماذا قمنا بهذه التعديلات؟
المحاذاة الفطرية: في القوائم العربية، يجب أن تفتح القائمة المنسدلة وتكون حافتها اليمنى متطابقة مع الحافة اليمنى للزر الذي تم النقر عليه. استخدام right: 0 عند الـ hover يحقق ذلك بدقة.
سلاسة العرض: بدلاً من استخدام 1.5em في الـ top (والتي قد تترك فراغاً يجعل القائمة تختفي قبل الوصول إليها)، استخدمنا 100% لضمان الالتصاق التام.
تجنب الـ Horizontal Scroll: إزاحة القائمة لليمين (right: -999em) بدلاً من اليسار في المواقع العربية يمنع المتصفحات أحياناً من إنشاء شريط تمرير أفقي وهمي.
⚠️ ملاحظة هامة للقوائم الفرعية العميقة:
إذا كان لديك مستوى ثالث من القوائم (قائمة تفتح من داخل قائمة)، ستحتاج لعكس اتجاه فتحها أيضاً:*/
body.rtl .main-navigation ul ul ul {
top: 0;
right: 100%; /* تفتح لجهة اليسار لكي لا تخرج عن شاشة اليمين */
}
.main-navigation ul ul ul {
left: -999em;
left: auto; /* أو left: 0; لإلغاء القيمة الأصلية */
right: -999em; /* تطبيق نفس القيمة السلبية على اليمين */
top: 0;
}
.main-navigation ul ul a {
width: 200px;
}
.main-navigation ul ul li {} .main-navigation li:hover > a,
.main-navigation li.focus > a {} .main-navigation ul ul:hover > a,
.main-navigation ul ul .focus > a {} .main-navigation ul ul a:hover,
.main-navigation ul ul a.focus {} .main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
right: auto;
}
.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
/*left: 100%;*/
left: auto; /* أو left: 0; لإلغاء القيمة الأصلية */
right: 100%; /* تطبيق نفس القيمة السلبية على اليمين */
}
.main-navigation .current_page_item > a,
.main-navigation .current-menu-item > a,
.main-navigation .current_page_ancestor > a,
.main-navigation .current-menu-ancestor > a {}
/* Small menu. */
.menu-toggle,
.main-navigation.toggled ul {
display: block;
}
@media screen and (min-width: 37.5em) {
.menu-toggle {
display: none;
}
.main-navigation ul {
display: block;
}
}
.site-main .comment-navigation,
.site-main .posts-navigation,
.site-main .post-navigation {
margin: 0 0 1.5em;
overflow: hidden;
}
.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
float: right;
width: 50%;
}
.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
float: left;
text-align: left;
width: 50%;
}
/*--------------------------------------------------------------
# Accessibility
--------------------------------------------------------------*/
/* Text meant only for screen readers. */
.screen-reader-text {
clip: rect(1px, 1px, 1px, 1px);
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
}
.screen-reader-text:focus {
background-color: #f1f1f1;
border-radius: 3px;
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
clip: auto !important;
color: #763962;
display: block;
font-size: 14px;
font-size: 0.875rem;
font-weight: bold;
height: auto;
/*left: 5px;*/
left: auto; /* أو left: 0; لإلغاء القيمة الأصلية */
right: 5px; /* تطبيق نفس القيمة السلبية على اليمين */
line-height: normal;
padding: 15px 23px 14px;
text-decoration: none;
top: 5px;
width: auto;
z-index: 100000;
/* Above WP toolbar. */
}
/* Do not show the outline on the skip link target. */
#content[tabindex="-1"]:focus {
outline: 0;
}
/*--------------------------------------------------------------
# Alignments
--------------------------------------------------------------*/
.alignleft {
display: inline;
float: right; /* عكس الاتجاه من left إلى right */
margin-left: 1.5em; /* عكس الهامش من margin-right إلى margin-left */
margin-right: 0; /* لإلغاء أي تأثير محتمل للهامش الأيمن القديم */
}
.alignright {
display: inline;
float: left;
margin-left: 0;
margin-right: 1.5em;
}
.aligncenter {
clear: both;
display: block;
margin-left: auto;
margin-right: auto;
}
/*--------------------------------------------------------------
# Clearings
--------------------------------------------------------------*/
.clearfix:before,
.clearfix:after,
.entry-content:before,
.entry-content:after,
.comment-content:before,
.comment-content:after,
.site-header:before,
.site-header:after,
.site-content:before,
.site-content:after,
.site-footer:before,
.site-footer:after {
content: "";
display: table;
table-layout: fixed;
}
.clearfix:after,
.entry-content:after,
.comment-content:after,
.site-header:after,
.site-content:after,
.site-footer:after {
clear: both;
}
/*--------------------------------------------------------------
# Widgets
--------------------------------------------------------------*/
/* .widget {
margin: 0 0 1.5em;
} */
/* Make sure select elements fit in widgets. */
.widget select {
max-width: 100%;
}
/*--------------------------------------------------------------
# Content
--------------------------------------------------------------*/
/*--------------------------------------------------------------
## Posts and pages
--------------------------------------------------------------*/
.sticky {
display: block;
}
.hentry {
margin: 0 0 40px;
}
.byline,
.updated:not(.published) {
display: none;
}
.single .byline,
.group-blog .byline {
display: inline;
}
.page-content,
.entry-content,
.entry-summary {
margin: 0em 0 0;
}
.page-links {
clear: both;
margin: 0 0 1.5em;
}
/*--------------------------------------------------------------
## Asides
--------------------------------------------------------------*/
.blog .format-aside .entry-title,
.archive .format-aside .entry-title {
display: none;
}
/*--------------------------------------------------------------
## Comments
--------------------------------------------------------------*/
.comment-content a {
word-wrap: break-word;
}
.bypostauthor {
display: block;
}
/*--------------------------------------------------------------
# Infinite scroll
--------------------------------------------------------------*/
/* Globally hidden elements when Infinite Scroll is supported and in use. */
.infinite-scroll .posts-navigation,
/* Older / Newer Posts Navigation (always hidden) */
.infinite-scroll.neverending .site-footer {
/* Theme Footer (when set to scrolling) */
display: none;
}
/* When Infinite Scroll has reached its end we need to re-display elements that were hidden (via .neverending) before. */
.infinity-end.neverending .site-footer {
display: block;
}
/*--------------------------------------------------------------
# Media
--------------------------------------------------------------*/
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
border: none;
margin-bottom: 0;
margin-top: 0;
padding: 0;
}
/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
max-width: 100%;
}
/*--------------------------------------------------------------
## Captions
--------------------------------------------------------------*/
.wp-caption {
margin-bottom: 1.5em;
max-width: 100%;
}
.wp-caption img[class*="wp-image-"] {
display: block;
margin-left: auto;
margin-right: auto;
}
.wp-caption .wp-caption-text {
margin: 0.8075em 0;
}
.wp-caption-text {
text-align: center;
}
/*--------------------------------------------------------------
## Galleries
--------------------------------------------------------------*/
.gallery {
margin-bottom: 1.5em;
}
.gallery-item {
display: inline-block;
text-align: center;
vertical-align: top;
width: 100%;
}
.gallery-columns-2 .gallery-item {
max-width: 50%;
}
.gallery-columns-3 .gallery-item {
max-width: 33.33%;
}
.gallery-columns-4 .gallery-item {
max-width: 25%;
}
.gallery-columns-5 .gallery-item {
max-width: 20%;
}
.gallery-columns-6 .gallery-item {
max-width: 16.66%;
}
.gallery-columns-7 .gallery-item {
max-width: 14.28%;
}
.gallery-columns-8 .gallery-item {
max-width: 12.5%;
}
.gallery-columns-9 .gallery-item {
max-width: 11.11%;
}
.gallery-caption {
display: block;
}
/*
======================================================================
***********************************************************
**********************all new css******************
***********************************************************
======================================================================
*/
.store-container {
max-width: 1170px;
margin: 0 auto;
}
article .entry-content ul {
margin:0;
padding: 0 20px 0 0;
}
article .entry-content ul li {
list-style: disc;
}
article .entry-content ul li ul {
padding-left: 0;
padding-right: 20px;
}
article .entry-content ol {
margin:0;
padding: 0 20px 0 0px;
}
article .entry-content ol li {
list-style: disc;
}
article .entry-content ol li ol {
padding-left: 0;
padding-right: 20px;
}
a {
text-decoration:none;
}
p {
margin: 0 0 10px;
}
h1, h2, h3, h4, h5, h6 {
margin: 0 0 15px;
line-height: 1.2;
/*font-family: Open Sans;*/
font-weight: 400;
}
h1 {
font-size: 36px;
}
h2 {
font-size: 30px;
}
h3 {
font-size: 26px;
}
h4 {
font-size: 20px;
}
h5 {
font-size: 18px;
}
h6 {
font-size: 16px;
}
body {
line-height: 1.5
}
/*
================
header css
================
*/
.site-header .top-header {
border-bottom: 1px solid #f7f7f7;
}
/*
================
header nav css
================
*/
.top-header .top-navigation {
float: right;
width:60%;
}/*هذا الكود هو التنسيق القياسي لعناصر القائمة العلوية في النسخة الإنجليزية. بما أنك قمت بتغيير float إلى left و margin-right إلى 15px؛ فقد قمنا الآن بتنظيم القائمة لتبدأ من اليسار.
ولكن، هذا التغيير قد يكون هو السبب الرئيسي لاختفاء رمز السلة أو تداخله مع القائمة.
🔍 لماذا اختفى رمز السلة بعد هذا الكود؟
عندما تستخدم float: left لجميع عناصر القائمة (li)، فإنها تندفع بقوة نحو اليسار. إذا كان رمز السلة موجوداً أيضاً في جهة اليسار أو كان داخل حاوية لا تملك مساحة كافية، سيحدث تداخل (Overlap):
الإزاحة (Pushing Out): القائمة قد تكون "دَفعت" حاوية السلة خارج حدود الشاشة.
تغطية العناصر: إذا كانت حاوية السلة تملك position: absolute أو relative بدون z-index مرتفع، فستقوم عناصر القائمة (التي تملك الآن position: relative) بتغطيتها بالكامل.
انهيار الحاوية (Height Collapse): استخدام float بدون عمل "Clearfix" للحاوية الأم (ul) يجعل ارتفاع الحاوية يصبح صفر، مما يؤدي لاختفاء كل ما بداخلها في بعض المتصفحات.
🔄 التعديل المقترح للنسخة العربية (RTL)
في ملف rtl.css الخاص بك، يجب عكس هذه القيم تماماً لضمان عدم اختفاء أي عنصر ولتنسيق القائمة لليمين:*/
body.rtl .top-header .top-navigation ul li {
float: right; /* عكس الاتجاه */
margin-right: 0;
margin-left: 15px; /* المسافة تصبح على اليسار في العربية */
font-family: 'Cairo', sans-serif; /* خط عربي مناسب */
text-transform: none; /* إلغاء الحروف الكبيرة */
}
/* حل مشكلة اختفاء العناصر بسبب الـ Float */
body.rtl .top-header .top-navigation ul::after {
content: "";
display: table;
clear: both;
}
.top-header .top-navigation ul li a {
color: #333;
display: block;
padding-left: 0;
padding-right: 15px;
position: relative;
}
.top-header .top-navigation ul ul li a {
padding-right: 0;
text-transform: capitalize;
}
.headerthree .top-header .top-navigation ul li > a {
color: #fff;
}
.headerthree .top-header .top-navigation ul li ul.product_list_widget li a {
color: #666;
}
.top-header .top-navigation ul li a:before {
border-right: 1px solid #333;
content: "";
height: 10px;
right: 0;
position: absolute;
top: 4px;
}
.top-header .top-navigation ul ul li a:before {
display: none;
}
.top-header .top-navigation ul li:first-child a:before {
border-right: 0
}
.top-header .top-navigation ul li a:hover {
color:#420537;
}
.top-header .top-navigation ul ul li:hover a {
color: #420537;
}
.headerthree .top-header .top-navigation ul ul {
background: #000;
}
.headertwo .top-header .top-navigation ul ul {
background: #fff;
border: 1px solid #ccc;
}
.top-header .top-navigation ul ul {
background: #fff none repeat scroll 0 0;
border: 1px solid #ccc;
opacity: 0;
overflow: hidden;
position: absolute;
top: 100%;
visibility: hidden;
width: 150px;
z-index: 999999;
}
.top-header .top-navigation ul ul ul {
/*left: 100% !important;*/
left: auto; /* أو left: 0; لإلغاء القيمة الأصلية */
right: 100% !important; /* تطبيق نفس القيمة السلبية على اليمين */
top: -1px;
}
.top-header .top-navigation ul li ul li {
padding: 7px 10px;
width: 100%;
}
.top-header .top-navigation ul li:hover > ul {
opacity: 1;
visibility: visible;
transition: all ease 0.3s;
-webkit-transition: all ease 0.3s;
-ms-transition: all ease 0.3s;
right: auto;
left: 0;
}
/*
================
quickinfo css
================
*/
.top-header ul.store-quickinfo {
float:right;
padding: 5px 0 10px;
width: 60%;
}
.top-header ul.store-quickinfo li {
margin-right:0;
margin-left: 5px;
font-size:11px;
font-family:Open Sans;
text-transform: uppercase;
}
.top-header ul.store-quickinfo li,
.top-header ul.store-quickinfo li a{
color: #333333;
display: inline-block;
text-transform: lowercase;
font-family: Open Sans;
font-size: 12px;
}
.headerthree .top-header ul.store-quickinfo li,
.headerthree .top-header ul.store-quickinfo li a {
color: #fff;
}
.top-header ul.store-quickinfo li a:hover {
color: #420537;
}
/*
================
top-header-regin css
================
*/
.top-header .top-header-regin {
float:left;
font-size:11px;
font-family:Open Sans;
text-transform: uppercase;
position: relative;
}
.top-header .top-header-regin ul > li {
float:right;
margin-left: 0;
margin-right: 10px;
}
.top-header .top-header-regin ul li a {
color: #333333;
float: right;
padding: 10px 0;
}
.headerthree .top-header .top-header-regin ul li a {
padding: 12px 0 8px;
}
.top-header .top-header-regin ul li a:hover,
.top-header-regin .count .fa.fa-shopping-basket:hover {
color:#420537;
}
.top-header .top-header-regin ul li a.quick-wishlist {
position: relative;
margin-left: 0; /* لإلغاء القيمة القديمة 17px */
margin-right: 17px; /* تطبيق الهامش على الجانب الآخر */
}
.top-header .top-header-regin ul li a.quick-wishlist:before {
position: absolute;
content:'\f08a';
font-family:FontAwesome;
font-size:11px;
/*left: -15px;*/
left: auto; /* أو left: 0; لإلغاء القيمة الأصلية */
right: -15px; /* تطبيق نفس القيمة السلبية على اليمين */
}
.top-header .top-header-regin a.sv_login {
position: relative;
}
.top-header .top-header-regin a.sv_login:before {
content: '\f007';
position: absolute;
font-family: FontAwesome;
/*left: -13px;*/
left: auto; /* أو left: 0; لإلغاء القيمة الأصلية */
right: -13px; /* تطبيق نفس القيمة السلبية على اليمين */
}
.top-header-regin ul li .widget_shopping_cart {
width: 300px;
background: #fff;
position: absolute;
opacity: 0;
right: auto;
left: 0;
top: 35px;
transition: all 0.2s ease-in-out 0s;
-webkit-transition: all 0.2s ease-in-out 0s;
overflow: hidden;
visibility: hidden;
}
.top-header-regin ul li:hover .widget_shopping_cart {
opacity: 1;
transition: all 0.2s ease-in-out 0s;
-webkit-transition: all 0.2s ease-in-out 0s;
z-index: 999999;
visibility: visible;
}
.top-header-regin .widget_shopping_cart_content {
padding-left: 0;
padding-right: 10px;
border: 1px solid #cbcbcb;
}
.top-header-regin .widget_shopping_cart_content li {
margin-right: 0 !important;
width: 100%;
display: block;
}
.top-header-regin .widget_shopping_cart_content li a {
padding: 0 !important;
float: none !important;
width: 92%;
}
.top-header-regin .widget_shopping_cart_content .mini_cart_item a.remove {
left: 0 !important;
margin-right: 0;
margin-left: 8px;
position: absolute !important;
text-align: left;
right: auto !important;
}
/*هذا الكود يحدد تنسيق أيقونة سلة التسوق في الشريط العلوي للموقع. في التصاميم العربية (RTL)، غالباً ما ينتقل مكان "أيقونة السلة" من اليمين إلى أقصى اليسار، كما أن الأيقونات الرمادية الباهتة قد تحتاج لزيادة الحجم أو التباين لتتناسق مع سماكة الخطوط العربية.
🔄 التعديل والتحسين المقترح لملف العربية (RTL)
أضف هذا الكود في ملف rtl.css لضمان تموضع الأيقونة بشكل صحيح:*/
body.rtl .top-header-regin .count .fa.fa-shopping-basket {
/* الخطوط العربية تبدو أكبر بَصرياً، لذا نرفع حجم الأيقونة لتتوازن معها */
font-size: 16px;
/* زيادة طفيفة في تباين اللون لسهولة الرؤية */
color: #888888;
/* في RTL، الأيقونة عادة تكون على يمين الرقم، لذا نعكس الهامش */
margin-left: 8px;
margin-right: 0;
/* تحسين المحاذاة العمودية مع النص العربي */
vertical-align: middle;
/* إضافة سلاسة عند تغيير اللون */
transition: color 0.3s ease;
}
/* إضافة تأثير عند تمرير الفأرة للربط مع هوية الموقع */
body.rtl .top-header-regin .count:hover .fa.fa-shopping-basket {
color: #420537;
}
/*🛠️ لماذا قمنا بهذه التحسينات؟
تبديل الهوامش (Margins): في النسخة الإنجليزية، قد تكون هناك مسافة على يمين الأيقونة لفصلها عن الرقم. في العربية، تنعكس الآية؛ نحتاج للمسافة على اليسار لأن الرقم سيظهر بعد الأيقونة (من اليمين لليسار).
حجم الأيقونة (16px): أيقونات السلة تحتوي على تفاصيل دقيقة (مثل يد السلة أو الفتحات). رفع الحجم درجتين يجعلها واضحة تماماً بجانب الكلمات العربية التي تكون عادة أكثر "كثافة" من الإنجليزية.
المحاذاة (vertical-align): النصوص العربية لها خط قاعدة (Baseline) مختلف. استخدام middle يضمن أن الأيقونة تتوسط السطر مع النص أو الرقم المجاور لها بدقة.
💡 لمسة احترافية لعداد السلة (The Counter):
عادة ما يوجد رقم بجانب هذه الأيقونة يوضح عدد المنتجات. يفضل تنسيقه في العربية ليكون داخل دائرة صغيرة:*/
body.rtl .top-header-regin .count .cart-contents-count {
background: #420537;
color: #fff;
font-family: Arial, sans-serif; /* استخدام خط لاتيني للأرقام يسهل قراءتها بسرعة */
padding: 2px 6px;
border-radius: 50%;
font-size: 11px;
margin-right: 5px; /* مسافة تفصل الرقم عن الأيقونة في جهة اليمين */
}
/*
==========
sv-offter-ticker-wrap css
==========
*/
.top-header .sv-offter-ticker-wrap {
float: right;
width: 58%;
margin: 5px 0 0;
}
.top-header .sv-offter-ticker-wrap .lSAction {
display: none !important;
}
.top-header .sv-offter-ticker-wrap .sp-offter-tag {
background: #0077b8 none repeat scroll 0 0;
float: right;
height: 30px;
margin-right: 0;
margin-left: 35px;
max-width: 100%;
/* عكس قيم اليمين واليسار */
padding: 2px 33px 2px 5px;
/* الترتيب الجديد: top | right: 33px | bottom | left: 5px */
position: relative;
}
.top-header .sv-offter-ticker-wrap .sp-offter-tag ul li p {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.top-header .sv-offter-ticker-wrap .sp-offter-tag:before {
border-color: transparent transparent transparent #0077b8;
border-style: solid;
/* عكس قيم اليمين واليسار */
border-width: 15px 20px 15px 0;
/* الترتيب الجديد: top | right: 20px | bottom | left: 0 */
content: "";
display: inline-block;
height: 0;
position: absolute;
/*right: -20px;*/
right: auto; /* أو right: 0; لإلغاء القيمة الأصلية */
left: -20px; /* تطبيق نفس القيمة السلبية على اليسار */
top: 0;
width: 0;
}
.top-header .sv-offter-ticker-wrap .sp-offter-tag span {
color: #fff;
font-size: 14px;
text-transform: uppercase;
font-family: Open Sans;
font-weight: 500;
position: relative;
}
.top-header .sv-offter-ticker-wrap .sp-offter-tag span:before {
content: '\f06b';
font-family: FontAwesome;
font-size: 20px;
/*left: -23px;*/
left: auto; /* أو left: 0; لإلغاء القيمة الأصلية */
right: -23px; /* تطبيق نفس القيمة السلبية على اليمين */
position: absolute;
top: -6px;
}
.top-header .sv-offter-ticker-wrap .lSSlideOuter.vertical .lSSlideWrapper {
height: 35px !important;
line-height: 3;
font-size: 11px;
text-transform: uppercase;
color: #333333;
}
/*
===end===
*/
/*cart count css*/
.top-header-regin .cart-contents .count {
position: relative;
}
.top-header-regin ul li span.cart-count {
background: #420537 none repeat scroll 0 0;
border-radius: 100%;
color: #fff;
font-size: 8px;
line-height: 14px;
padding: 0 3px 2px;
position: absolute;
text-align: center;
top: 0px;
/*right: -15px;*/
right: auto; /* أو right: 0; لإلغاء القيمة الأصلية */
left: -15px; /* تطبيق نفس القيمة السلبية على اليسار */
height: 15px;
width: 15px;
}
.top-header-regin ul li span.cart-count:hover {
background: #763962;
}
/*
================
end
================
*/
.header-wrap {
padding: 20px 0;
}
.header-wrap .site-branding {
float: right;
}
.site-branding img{
max-width: 300px;
}
.header-wrap .site-branding a,
.header-wrap .site-branding .sv-logo-wrap {
display: inline-block;
vertical-align: middle;
}
.header-wrap .site-branding .sv-logo-wrap {
color: #420537;
margin-left: 0;
margin-right: 10px;
text-align: right;
}
.site-branding h1 {
margin-bottom: 5px;
}
.site-branding h1.site-title a {
/* font-size: 36px; */
color: #420537;
text-transform: uppercase;
line-height: 30px;
display:block;
margin-bottom: 5px;
}
.header-wrap .site-branding p.site-description {
font-size: 14px;
}
.header-wrap .search-cart-wrap {
float: left;
}
.header-wrap .search-cart-wrap .advance-search {
border:1px solid #cbcbcb;
}
.headertwo .header-wrap .search-cart-wrap .advance-search {
border: none;
}
.header-wrap .search-cart-wrap .advance-search .sv_search_wrap,
.header-wrap .search-cart-wrap .advance-search .sv_search_form {
display: inline-block;
position: relative;
vertical-align: middle;
}
.headertwo .header-wrap .search-cart-wrap .advance-search .sv_search_form {
width: 70%;
}
.headertwo .header-wrap .search-cart-wrap .advance-search .sv_search_wrap {
width: 30%;
}
/*
==========
select option css
==========
*/
.header-wrap .search-cart-wrap .advance-search .sv_search_product {
/*for firefox*/
-moz-appearance: none;
/*for chrome*/
-webkit-appearance:none;
appearance: none;
border: none;
width: 120px;
height: 45px;
font-size: 13px;
font-family: Open Sans;
padding: 0 15px 0 2px;
color: #8e8e8e;
margin-right: 0;
margin-left: 3px;
cursor: pointer;
outline: none;
box-shadow: none;
background: url("images/arrow.png") no-repeat;
background-size: 10px;
background-position: 96% 53%;
}
.header-wrap .search-cart-wrap .advance-search .sv_search_product::-ms-expand {
display: none;
}
.header-wrap .search-cart-wrap .advance-search .sv_search_product .sv-advance-search {
border: none;
}
.header-wrap .search-cart-wrap .advance-search .sv_search_product .sv-advance-search option {
border: none;
box-shadow: none;
padding: 4px 10px;
width: 170px;
}
/*
==========
search field css
==========
*/
.header-wrap .search-cart-wrap .advance-search .sv_search_form,
.normal-search {
position: relative;
}
.header-wrap .search-cart-wrap .advance-search .sv_search_form:before {
border-right: 1px solid #cbcbcb;
content: '';
position: absolute;
left: auto;
right: 0;
height: 30px;
top: 7px;
}
.header-wrap .search-cart-wrap .advance-search .sv_search_form input[type=text],
.normal-search .search-form .search-field {
width: 313px;
height: 45px;
padding: 0 10px;
border-radius: 0;
border:none;
color: #8e8e8e;
font-style: normal;
font-size: 13px;
}
.headertwo .header-wrap .search-cart-wrap .advance-search .sv_search_form input[type=text] {
width: 100%;
}
.header-wrap .search-cart-wrap .advance-search .sv_search_form input::-moz-placeholder {
font-style: normal;
color: #8e8e8e;
}
.header-wrap .search-cart-wrap .advance-search .sv_search_form input::-webkit-input-placeholder {
color: #8e8e8e;
font-style: normal;
}
.header-wrap .search-cart-wrap .advance-search .sv_search_form #searchsubmit {
background: #420537;
border: medium none;
border-radius: 0;
box-shadow: none;
font-size: 14px;
height: 41px;
position: absolute;
/*right: 2px;*/
right: auto; /* أو right: 0; لإلغاء القيمة الأصلية */
left: 2px; /* تطبيق نفس القيمة السلبية على اليسار */
text-shadow: none;
top: 2px;
width: 46px;
transition: all 0.5s ease-in-out 0s;
-webkit-transition: all 0.5s ease-in-out 0s;
padding: 10px;
}
.normal-search .search-form .search-submit {
position: relative;
height: 46px;
width: auto;
background: #000;
color: #fff;
border-radius: 0;
box-shadow: none;
border: medium none;
text-shadow: none;
}
.header-wrap .search-cart-wrap .advance-search .sv_search_form #searchsubmit:hover,
.normal-search .search-form .search-submit:hover {
background: #763962;
transition: all 0.5s ease-in-out 0s;
-webkit-transition: all 0.5s ease-in-out 0s;
}
.header-wrap .search-cart-wrap .advance-search .sv_search_form #searchsubmit .fa {
color: #fff;
}
/*
========================
header-two layout
========================
*/
.headertwo .header-wrap .site-branding {
margin-right: 0;
margin-left: 43px;
width: 303px;
}
.headertwo .header-wrap .site-branding .sv-logo-wrap {
text-align: right;
}
.headertwo .header-wrap .search-cart-wrap {
float: right;
margin-top: 10px;
width: 54%;
border: 1px solid #cbcbcb;
}
.headertwo .header-wrap .sv-shopping-cart {
float: left;
margin-top: 10px;
}
.headertwo .header-wrap .sv-shopping-cart a {
display: block;
}
.headertwo .header-wrap .search-cart-wrap .advance-search .sv_search_form #searchsubmit {
top: 0;
/*right: -1px;*/
right: auto; /* أو right: 0; لإلغاء القيمة الأصلية */
left: -1px; /* تطبيق نفس القيمة السلبية على اليسار */
height: 45px;
width: 45px;
}
.headertwo .header-wrap .search-cart-wrap .advance-search .sv_search_product {
width: 100%;
color: #000;
}
.headertwo .header-wrap .search-cart-wrap .advance-search .sv_search_product {
background-position: 92% 53%;
}
.headertwo .header-wrap .search-cart-wrap .advance-search .sv_search_wrap {
margin: 0 0px 0 -5px !important;
}
.headertwo .header-wrap .search-cart-wrap .advance-search .sv_search_wrap {
background: #eeeeee;
}
.headertwo .header-wrap .search-cart-wrap .advance-search .sv_search_form:before {
top:0;
height: 100%;
}
.headertwo .header-wrap .cart-contentstwo .header-icon,
.headertwo .header-wrap .cart-contentstwo .text-holder {
display: inline-block;
vertical-align: middle;
margin: 0 -1px;
}
.headertwo .header-wrap .cart-contentstwo .header-icon {
background: #420537;
color: #fff;
width: 45px;
height: 45px;
text-align: center;
font-size: 24px;
padding: 1px 0;
margin-right: 0;
margin-left: 7px;
transition: all ease 0.5s;
-webkit-transition: all ease 0.5s;
border: 1px solid #420537;
}
.headertwo .header-wrap .cart-contentstwo:hover .header-icon {
color: #420537;
background: none;
}
.headertwo .header-wrap .cart-contentstwo .text-holder .name-text {
display: block;
font-family: Open Sans;
font-weight: 700;
font-size: 13px;
text-transform: uppercase;
color: #000;
transition: all ease 0.5s;
-webkit-transition: all ease 0.5s;
}
.headertwo .header-wrap .cart-contentstwo:hover .text-holder .name-text {
color: #420537;
transition: all ease 0.5s;
-webkit-transition: all ease 0.5s;
}
.headertwo .header-wrap .cart-contentstwo .text-holder .amount,
.headertwo .header-wrap .cart-contentstwo .text-holder .count {
display: inline-block;
vertical-align: middle;
font-size: 13px;
color: #999999;
font-family: Open Sans;
}
.headertwo .main-navigation .browse-category-wrap {
background: rgba(0, 0, 0, 0.2) none repeat scroll 0 0;
border-color: rgba(255, 255, 255, 0.5);
border-left: 1px solid rgba(255, 255, 255, 0.5);
color: #fff;
cursor: pointer;
float: right;
font-size: 15px;
font-weight: 500;
padding: 19px 20px 20px;
position: relative;
text-transform: uppercase;
width: 215px;
}
.headertwo .main-navigation .browse-category-wrap .categorylist {
position: absolute;
left: auto;
right: 0;
top: 100%;
width: 100%;
display: none;
background: #fff;
z-index: 999;
box-shadow: 0px 0px 1px #ccc;
-webkit-box-shadow: 0px 0px 1px #ccc;
}
.headertwo .main-navigation .browse-category-wrap .categorylist ul {
opacity: 1;
visibility: visible;
left: auto;
right: 0;
width: 100%;
}
.headertwo .main-navigation .browse-category-wrap .categorylist ul li,
.headertwo .main-navigation .browse-category-wrap .categorylist ul li a {
width: 100%;
}
.headertwo .main-navigation .browse-category-wrap .categorylist ul li a {
font-size: 13px;
padding: 10px;
color: #000;
text-transform: capitalize;
}
.headertwo .main-navigation .browse-category-wrap .categorylist ul li a:hover {
color: #fff;
}
/*
===========
end of css
===========
*/
/*
========================
header-three layout
========================
*/
.headerthree .top-header {
background: #000;
}
.headerthree .top-header .store-container {
position: relative;
}
.headerthree .top-header .lSSlideOuter .lightSlider > *,
.headerthree .top-header .lSSlideOuter .lSGallery li {
color: #fff;
}
.headerthree .top-header-regin .site-header-cart > li > a,
.headerthree .top-header-regin .site-header-cart > li a span.bigcounter {
color: #fff;
}
.headerthree .top-header-regin .site-header-cart > li a span.bigcounter:hover {
color: #420537;
}
.headerthree .top-header .top-header-regin ul li .top-wishlist.text-right{
margin-right: 0;
margin-left: 80px;
}
.headerthree .top-header .top-header-regin ul li:first-child {
margin-right: 0;
margin-left: 10px;
}
.logged-in .headerthree .top-header .top-header-regin ul li:first-child {
margin-left: 0;
}
.headerthree .top-header .top-header-regin ul li a span {
display: block;
}
.headerthree .top-header .top-header-regin ul li a:hover,
.site-header-cart .woocommerce a.button.wc-forward:hover:before {
color: #420735;
transition: all ease 0.3s;
-webkit-transition: all ease 0.3s;
-ms-transition: all ease 0.3s;
}
.site-header-cart .woocommerce a.button.wc-forward.checkout:hover:before,
.site-header-cart .woocommerce a.button.wc-forward.checkout:hover {
color: #763962;
transition: all ease 0.3s;
-webkit-transition: all ease 0.3s;
-ms-transition: all ease 0.3s;
}
.headerthree .top-header .top-header-regin ul li a.cart-contents:hover {
color: #fff;
transition: all ease 0.3s;
-webkit-transition: all ease 0.3s;
-ms-transition: all ease 0.3s;
}
.headerthree .top-header .top-header-regin a.cart-contents {
background: #420537;
padding-left: 12px;
padding-right: 12px;
padding-top: 15px;
text-align: center;
position: absolute;
left: auto;
right: 0;
padding-bottom: 5px;
}
.headerthree .top-header .top-header-regin a.cart-contents:before {
position: absolute;
content: '';
width: 0;
height: 0;
border-style: solid;
border-width: 15px 35px 0 36px;
border-color: #0077b8 transparent transparent transparent;
top: 100%;
right: 0px;
}
.headerthree .top-header .top-header-regin ul li .widget_shopping_cart {
top: 70px;
}
.headerthree .top-header .top-header-regin ul li span.cart-count {
/*right: 6px;*/
right: auto; /* أو right: 0; لإلغاء القيمة الأصلية */
left: 6px; /* تطبيق نفس القيمة السلبية على اليسار */
background: rgba(0,0,0,0.5);
top: -7px;
}
.headerthree .top-header-regin .count .fa.fa-shopping-basket {
color: #fff;
}
.headerthree .site-branding {
width: 300px;
margin: 25px auto 15px;
float: none;
}
.headerthree .main-navigation {
background: none;
text-align: center;
position: relative;
}
.headerthree .main-navigation:before {
content: '';
position: absolute;
height: 2px;
width: 645px;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
background: #ededed;
}
.headerthree .main-navigation ul.menu {
padding-top: 20px;
}
.headerthree .main-navigation ul > li {
display: inline-block;
vertical-align: middle;
float: none;
}
.headerthree .main-navigation li.menu-item-has-children > a:before {
color: #000;
line-height: 22px;
/*right: 34px;*/
right: auto; /* أو right: 0; لإلغاء القيمة الأصلية */
left: 34px; /* تطبيق نفس القيمة السلبية على اليسار */
}
.headerthree .main-navigation li.menu-item-has-children > a:hover:before {
color: #0077b8;
}
.headerthree .main-navigation .search-icon {
display: inline-block;
vertical-align: middle;
cursor: pointer;
margin-top: -24px;
}
.headerthree .main-navigation .search-icon i {
width: 10px;
}
.headerthree .main-navigation ul.menu > li > a {
color: #000;
text-transform: capitalize;
font-weight: 700;
/* عكس قيم اليمين واليسار */
padding: 0 0 20px 50px;
/* الترتيب الجديد: top | right: 0 | bottom: 20px | left: 50px */
background: none;
}
.headerthree .main-navigation ul li.current-menu-item > a,
.headerthree .main-navigation ul li a:hover {
background: none;
color: #0077b8;
}
.headerthree .main-navigation ul ul {
background: #fff;
top: 40px;
visibility: hidden;
opacity: 0;
left: auto;
right: 0;
border-top: 3px solid #0091d5;
border-radius: 0;
border-left: none;
border-right: none;
border-bottom: none;
}
.headerthree .main-navigation ul ul li a {
text-align: right;
font-size: 13px;
}
.headerthree .main-navigation ul ul li a:hover {
color: #0077b8;
}
.headerthree .main-navigation li.menu-item-has-children ul li.menu-item-has-children > a:before {
/*right: 20px;*/
right: auto; /* أو right: 0; لإلغاء القيمة الأصلية */
left: 20px; /* تطبيق نفس القيمة السلبية على اليسار */
font-size: 16px;
}
.headerthree .main-navigation ul ul:before {
position: absolute;
content: '';
width: 0;
height: 0;
border-style: solid;
border-width: 0 8px 12px 8px;
border-color: transparent transparent #420537 transparent;
/*left: 10px;*/
left: auto; /* أو left: 0; لإلغاء القيمة الأصلية */
right: 10px; /* تطبيق نفس القيمة السلبية على اليمين */
top: -12px;
}
.headerthree .main-navigation ul ul ul {
border-right: 3px solid #420537;
border-radius: 0;
border-top: none;
border-left: none;
border-bottom: none;
}
.headerthree .main-navigation ul ul ul:before {
width: 0;
height: 0;
border-style: solid;
border-width: 8px 0 8px 12px;
border-color: transparent #420537 transparent transparent;
position: absolute;
content: '';
top: 0;
/*left: -12px;*/
left: auto; /* أو left: 0; لإلغاء القيمة الأصلية */
right: -12px; /* تطبيق نفس القيمة السلبية على اليمين */
}
.headerthree .main-navigation ul li:hover > ul {
top: 100%;
opacity: 1;
visibility: visible;
}
.headerthree .main-navigation .search-icon .svilla-search {
position: absolute;
opacity: 0;
visibility: hidden;
}
.headerthree .main-navigation .search-icon .svilla-search.active {
position: fixed;
width: 100%;
height: 100%;
bottom: 0;
top: 0;
background: rgba(0,119,184,0.8);
left: 0;
right: 0;
z-index: 9999;
transition: all ease 0.5s;
-webkit-transition: all ease 0.5s;
opacity: 1;
visibility: visible;
cursor: initial;
}
.headerthree .main-navigation .search-icon .svilla-search.active .overlay-search {
top: 50%;
position: relative;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
width: 450px;
margin: 0 auto;
background: rgba(0,0,0,0.6);
border-radius: 10px;
padding: 50px;
}
.headerthree .main-navigation .search-icon .svilla-search.active .overlay-search select,
.headerthree .main-navigation .search-icon .svilla-search.active .overlay-search input[type=text] {
width: 100%;
font-size: 13px;
border: 1px solid rgba(0,119,184,0.8);
border-radius: 5px;
padding: 9px 10px;
margin-bottom: 15px;
}
.headerthree .main-navigation .search-icon .svilla-search.active .overlay-search input[type=text] {
margin-bottom: 0;
}
.headerthree .main-navigation .search-icon .svilla-search.active .overlay-search input::-webkit-input-placeholder,
.headerthree .main-navigation .search-icon .svilla-search.active .overlay-search input::-input-placeholder {
color: #000 !important;
}
.headerthree .main-navigation .search-icon .svilla-search.active .overlay-search .sv_search_form {
position: relative;
}
.headerthree .main-navigation .search-icon .svilla-search.active .overlay-search .sv_search_form button[type=submit] {
position: absolute;
top: 0;
height: 38px;
left: 0px;
color: #fff;
background: red;
box-shadow: none;
border: none;
/* عكس قيم الزاويتين الأولى والرابعة مع الثانية والثالثة */
border-radius: 5px 0 0 5px;
/* الترتيب الجديد: top-left: 5px | top-right: 0 | bottom-right: 0 | bottom-left: 5px */
}
.headerthree .main-navigation .search-icon .svilla-search.active .overlay-search .close {
position: absolute;
top: -12px;
/*left: -12px;*/
left: auto; /* أو left: 0; لإلغاء القيمة الأصلية */
right: -12px; /* تطبيق نفس القيمة السلبية على اليمين */
border: 2px solid #fff;
border-radius: 100%;
height: 30px;
width: 30px;
line-height: 25px;
color: #fff;
background: red;
transition: all ease 0.3s;
-webkit-transition: all ease 0.3s;
cursor: pointer;
}
.headerthree .main-navigation .search-icon .svilla-search.active .overlay-search .close:hover {
background: rgb(0,119,184);
transition: all ease 0.3s;
-webkit-transition: all ease 0.3s;
}
.headerthree .top-header ul.store-quickinfo li,
.headerthree .top-header ul.store-quickinfo li a,
{
color: #fff;
}
/*
===========
end of css
===========
*/
/*
==========
site-header-cart menu css
==========
*/
.header-wrap .site-header-cart.menu {
margin-left: 0;
margin-right: 3px;
}
.header-wrap .site-header-cart.menu li a.cart-contents {
background: #fbb203;
width: 120px;
height: 45px;
color: #fff;
text-align: left;
font-size: 12px;
font-family: Open Sans;
font-weight: 600;
text-transform: uppercase;
display: block;
padding: 5px 20px;
position: relative;
}
.header-wrap .site-header-cart.menu li a.cart-contents:hover {
background: #fcc646;
}
.header-wrap .site-header-cart.menu li a.cart-contents:before {
position: absolute;
content: '\f291';
font-family: FontAwesome;
/*left: 10px;*/
left: auto; /* أو left: 0; لإلغاء القيمة الأصلية */
right: 10px; /* تطبيق نفس القيمة السلبية على اليمين */
font-size: 31px;
top: -1px;
}
.header-wrap .site-header-cart.menu li a.cart-contents span {
display: block;
}
.header-wrap .site-header-cart.menu li a.cart-contents span:first-child {
margin-top: 0;
}
.header-wrap .site-header-cart.menu li {
position: relative;
}
.header-wrap .site-header-cart.menu li:hover .widget.woocommerce.widget_shopping_cart {
display: block;
}
.header-wrap .site-header-cart.menu li .widget.woocommerce.widget_shopping_cart {
display: none;
position: absolute;
background: #fff none repeat scroll 0 0;
/* يبقى الكود كما هو تماماً في ملف RTL */
box-shadow: 0 0 15px -7px #666;
right: auto;
left: 0;
min-width: 320px;
text-align: center;
color: #8e8e8e;
font-size: 14px;
z-index: 999;
}
.header-wrap .site-header-cart.menu li .widget.woocommerce.widget_shopping_cart .cart_list.product_list_widget li.empty {
padding: 60px 0 30px;
position: relative;
}
.header-wrap .site-header-cart.menu li .widget.woocommerce.widget_shopping_cart .cart_list.product_list_widget li.empty:before {
position: absolute;
content: '\f291';
/*font-family: FontAwesome;*/
font-size: 30px;
left: auto;
right: 0;
width: 100%;
top: 25px;
}
/*
===================
add to cart css (global)
===================
*/
.widget_shopping_cart_content {
padding: 10px 10px 10px 0px;
}
.widget_shopping_cart_content .mini_cart_item {
text-align: right;
}
.widget_shopping_cart_content .mini_cart_item a.remove {
float: left;
position: static !important;
text-align: left;
margin-right: 0;
margin-left: 8px;
}
.widget_shopping_cart .mini_cart_item .quantity {
color: #420537;
font-weight: 600;
}
.cart_list {
max-height: 300px;
overflow-y:auto;
}
.widget-area .widget_shopping_cart .cart_list {
max-height: 100%;
overflow:auto;
}
.widget-area .widget_shopping_cart .buttons a {
font-size: 12px;
}
.woocommerce .widget_shopping_cart .cart_list li,
.woocommerce.widget_shopping_cart .cart_list li {
padding-right:0;
}
.woocommerce ul.cart_list li img,
.woocommerce ul.product_list_widget li img {
box-shadow: none;
float: right;
height: 80px;
margin-right: 0;
margin-left: 10px;
width: 70px;
}
.woocommerce .widget_shopping_cart .total,
.woocommerce.widget_shopping_cart .total {
padding: 10px 0;
text-align: right;
border-top: none;
font-size: 16px;
color: #000;
}
.woocommerce a.remove {
color: #420537;
}
.woocommerce a.remove:hover {
background: none;
color: red !important;
}
.woocommerce p.buttons {
padding-right:0;
padding-left: 10px;
}
.site-header-cart .woocommerce a.button.wc-forward,
.site-header-cart .woocommerce a.button.checkout {
border-radius: 0;
width: 48%;
color: #fff;
padding: 13px 30px;
text-align: left;
position: relative;
font-weight: 600;
}
.site-header-cart .woocommerce a.button.wc-forward {
float: right;
background: #420537;
}
.site-header-cart .woocommerce a.button.wc-forward:before {
content: '\f291';
position: absolute;
font-family: FontAwesome;
color: #fff;
/*left: 23px;*/
left: auto; /* أو left: 0; لإلغاء القيمة الأصلية */
right: 23px; /* تطبيق نفس القيمة السلبية على اليمين */
font-weight: 400;
}
.site-header-cart .woocommerce a.button.checkout {
float: left;
background: #763962;
border-color: #763962;
}
.site-header-cart .woocommerce a.button.checkout:before {
content: '\f00c';
position: absolute;
font-family: FontAwesome;
color: #fff;
/*left: 28px;*/
left: auto; /* أو left: 0; لإلغاء القيمة الأصلية */
right: 28px; /* تطبيق نفس القيمة السلبية على اليمين */
font-weight: 400;
}
.woocommerce a.button.wc-forward:hover,
.woocommerce a.button.checkout:hover {
box-shadow: 0 0 15px -7px #666;
transition: all 300ms ease-in-out 0s;
-webkit-transition: all 300ms ease-in-out 0s;
}
.woocommerce .woocommerce-message {
border-color: #420537;
}
.woocommerce .woocommerce-message::before {
color: #420537;
}
.woocommerce div.product div.images .flex-control-thumbs{
margin-left: -3px;
margin-right: -3px;
margin-top: 3px;
}
.woocommerce div.product div.images .flex-control-thumbs li{
padding: 3px;
}
/*
=================
*****************
main nav css
*****************
=================
*/
.main-navigation {
background: #420537;
}
.main-navigation li {
float: right;
}
.main-navigation li.menu-item-has-children {
position: relative;
}
.main-navigation li.menu-item-has-children > a:before {
position: absolute;
content: '\f107';
font-family: FontAwesome;
margin-right: 8px; /* مسافة عن النص العربي */
float: left; /* وضع السهم في يسار الكلمة العربية
/*right: 11px;*/
right: auto; /* أو right: 0; لإلغاء القيمة الأصلية */
left: 1px; /* تطبيق نفس القيمة السلبية على اليسار */
color: #fff;
line-height: 21px;
}
.main-navigation li.menu-item-has-children ul li.menu-item-has-children > a:before {
color: #fff;
content: '\f104';/*رمز سهم يشير الى اليمين في القائمة الرئيسية*/
}
.headerthree .main-navigation li.menu-item-has-children ul li.menu-item-has-children > a:before {
color: #000;
}
.main-navigation li.menu-item-has-children ul li.menu-item-has-children > a:hover:before {
color: #420537;
}
.main-navigation li.menu-item-has-children ul li a:before {
color: #fff;
}
/*بما أنك قمت بجعل القائمة تمتد للنهاية اليسرى، فإن هذا الكود هو المسؤول عن مظهر الروابط داخل هذه المساحة الواسعة. في النسخة العربية (RTL)، الخط الافتراضي Open Sans لا يدعم الحروف العربية بشكل جيد، مما قد يجعل القائمة تبدو غير متناسقة.
🔄 التعديل والتحسين المقترح لملف العربية (RTL)
سنقوم بتغيير الخط إلى نوع يدعم العربية بوضوح، مع ضبط المسافات الجانبية لضمان توازن الروابط في المساحة الجديدة:*/
body.rtl .main-navigation ul li a {
/* 1. تغيير الخط لنوع عربي احترافي */
font-family: 'Cairo', 'Tajawal', sans-serif;
/* 2. تحسين الوزن والحجم (الخط العربي يحتاج وزنًا أكبر قليلًا ليظهر بوضوح) */
font-weight: 400;
font-size: 15px;
/* 3. الحفاظ على اللون الأبيض */
color: #fff;
/* 4. ضبط الحشوة (Padding) بما يناسب المساحة الممتدة */
padding: 20px 12px;
/* 5. ضبط اتجاه النص */
text-align: right;
display: block;
position: relative;
transition: all 0.3s ease;
}
/*
.main-navigation ul li a {
font-family: Open Sans;
font-weight: 400;
font-size: 14px;
color: #fff;
padding: 20px 25px;
position: relative;
}*/
.main-navigation ul li:first-child a {
margin-right: 0;
}
/*هذا الكود يضيف اللمسة التفاعلية النهائية للقائمة؛ فهو يمنح الرابط النشط (الصفحة التي يتواجد فيها العميل حالياً) والروابط التي يمر عليها الماوس خلفية داكنة خفيفة.
بما أنك قمت بجعل القائمة تمتد للنهاية اليسرى واستخدمت اللون الأبيض للنصوص، فإن الخلفية السوداء الشفافة rgba(0,0,0,0.1) تعطي طابعاً عصرياً وهادئاً.
🔄 التعديل والتحسين المقترح لملف العربية (RTL)
في النسخة العربية، وبما أننا نستخدم لون الهوية الأزرق #0091D5 في أجزاء أخرى من المتجر، يمكننا جعل التفاعل أكثر حيوية:*/
.main-navigation ul li.current-menu-item > a,
.main-navigation ul li:hover > a {
background: rgba(0,0,0,0.1);
transition: all 300ms ease-in-out 0s;
-webkit-transition: all 300ms ease-in-out 0s;
}
/* تنسيق الرابط النشط وعند تمرير الماوس في النسخة العربية */
body.rtl .main-navigation ul li.current-menu-item > a,
body.rtl .main-navigation ul li:hover > a {
/* 1. استخدام خلفية داكنة خفيفة أو زرقاء شفافة */
background-color: rgba(0, 0, 0, 0.25) !important;
background-image: none !important;
/* 2. تغيير لون النص لضمان التباين */
color: #ffffff !important;
/* 3. إضافة خط سفلي بسيط لتمييز الصفحة الحالية (اختياري) */
box-shadow: inset 0 -1px 0 #420537;
/* 4. تنعيم الحركة */
transition: all 300ms ease-in-out;
}
/* تحسين شكل الزوايا في القائمة الممتدة */
body.rtl .main-navigation ul li a {
border-radius: 4px; /* انحناء بسيط يجعل المظهر أكثر نعومة */
margin: 0 2px; /* مسافة بسيطة بين الروابط لتظهر الخلفية بشكل منفصل */
}
.main-navigation ul ul li.current-menu-item a,
.main-navigation ul ul li a:hover {
background: #fff;
color: #420537;
}
.main-navigation ul ul li a:hover:before {
color: #420537;
}
/*
======== drop down menu =======
*/
.main-navigation ul ul {
background: #420537 none repeat scroll 0 0;
top: 100%;
visibility: hidden;
opacity: 0;
/*left: 40px;*/
left: auto; /* أو left: 0; لإلغاء القيمة الأصلية */
right: 40px; /* تطبيق نفس القيمة السلبية على اليمين */
}
.main-navigation ul li:hover > ul {
opacity: 1;
visibility: visible;
top: 100%;
transition: all 300ms ease-in-out 0s;
-webkit-transition: all 300ms ease-in-out 0s;
left: auto;
right: 0;
}
.main-navigation ul ul ul {
top: 0 !important;
/*left:100%;*/
left: auto; /* أو left: 0; لإلغاء القيمة الأصلية */
right: 100%; /* تطبيق نفس القيمة السلبية على اليمين */
}
.main-navigation ul li ul li a {
margin-right: 0;
padding: 10px;
font-weight: 400;
color: #fff;
}
.main-navigation ul li ul li a:last-child {
border-bottom: none;
}
/*
===========
end of css
===========
*/
/*
=================
*****************
site content slider and ads
*****************
=================
*/
/*----*/
/*
=================
*****************
سلايدر الموقع والإعلانات (الكود الأصلي)
*****************
=================
*/
/*.site-content .store-villa-banner {
padding: 30px 0 0;
}
.site-content .slider-wrapper {
float: left;
width: 65%;
position: relative;
}
.site-content .full-width-banner .slider-wrapper {
width: 100%;
float: none;
margin-bottom: 29px;
}
.site-content .slider-wrapper .lSAction {
display: none !important;
}
.site-content .slider-wrapper ul.store-gallery li {
position: relative;
}
.site-content .slider-wrapper ul.store-gallery li:before {
bottom: 0;
content: "";
display: block;
height: 100%;
width: 100%;
position: absolute;
z-index: 1;
background: rgba(0,0,0,0.3);
}
.site-content .slider-wrapper ul.store-gallery li img {
vertical-align: top;
}
.site-content .slider-wrapper ul.store-gallery li .banner-slider-info {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 2;
color: #fff;
right: 50px;
font-size: 18px;
font-family: Open Sans;
text-transform: uppercase;
font-weight: 400;
max-width: 400px;
}
.site-content .slider-wrapper ul.store-gallery li .banner-slider-info h2.caption-title {
font-family: Open Sans;
font-weight: 700;
color: #fff;
text-transform: uppercase;
font-size: 36px;
}
.site-content .slider-wrapper ul.store-gallery li .banner-slider-info .caption-content {
margin-bottom: 15px;
}
.site-content .slider-wrapper ul.store-gallery li .banner-slider-info a.slider-button {
border: 2px solid #fff;
color: #fff;
text-transform: uppercase;
font-size: 14px;
padding: 13px 31px;
display: inline-block;
transform: translateZ(0);
-webkit-transform: translateZ(0);
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
transition-duration: 0.3s;
-webkit-transition-duration: 0.3s;
transition-property: transform;
transition-timing-function: ease-out;
background: none;
}
.site-content .slider-wrapper ul.store-gallery li .banner-slider-info a.slider-button:hover {
background: #fff;
color: #000;
transform: translateY(-8px);
-webkit-transform: translateY(-8px)
}
.site-content .slider-wrapper ul.store-gallery li .banner-slider-info h2.caption-title span {
color: #f85570;
}
/*
=================
*****************
إصلاح RTL — البانر + الودجات + سلايدر التصنيفات
*****************
=================
*/
/* إجبار السلايدر على العمل بـ LTR (ضروري لعدم الانهيار) */
.lSSlideWrapper,
.lSSlideWrapper .lSSlide,
.store-gallery,
.category-slider {
direction: ltr !important;
}
/* النصوص فقط RTL */
.banner-slider-info,
.banner-slider-info *,
.sv_category_count,
.sv_category_count * {
direction: rtl !important;
text-align: right !important;
}
/* إصلاح الصور داخل السلايدر */
.lSSlideWrapper img,
.category-slider img,
.store-gallery img {
width: 100% !important;
height: auto !important;
display: block !important;
}
/* إصلاح مشكلة الارتفاع */
.lSSlideWrapper ul,
.category-slider,
.store-gallery {
height: auto !important;
overflow: visible !important;
}
/* منع العناصر من الخروج بسبب margin */
.lSSlideWrapper li,
.category-slider li {
margin: 0 !important;
}
/*----*/
/*هذا الكود يتحكم في المسافات الداخلية (Padding) لبانر المتجر (Banner). بما أن التنسيق يعتمد على القيم العلوية والسفلية فقط (30px من الأعلى، و 0 من اليمين واليسار)، فهو يعمل بشكل سليم في كلا الاتجاهين (LTR و RTL).
ومع ذلك، في المواقع العربية، غالباً ما تحتوي هذه البانرات على نصوص أو أزرار بداخلها، وهنا تبرز الحاجة لتعديلات إضافية لضمان أن المحتوى لا يبدو "مهجراً" لجهة اليسار.*/
.site-content .store-villa-banner {
padding: 30px 0 0; /* نفس قيمتك الأصلية */
text-align: right; /* محاذاة النص لليمين */
direction: rtl; /* لضمان ترتيب العناصر من اليمين لليسار */
}
.widget-area img {
max-width: 100%;
height: auto;
display: block;
}
/* إذا كان البانر يحتوي على عنوان (Title) ووصف */
.site-content .store-villa-banner .banner-title,
.site-content .store-villa-banner .banner-content {
margin-right: 20px; /* مسافة أمان من جهة اليمين */
margin-left: 0;
}
/*هذا الكود هو المسؤول عن تحديد مكان وحجم السلايدر الرئيسي (Slider) في الصفحة. في التصميم الإنجليزي، يتم دفعه لليسار لترك مساحة للشريط الجانبي أو العناصر الأخرى على اليمين.
🔄 التعديل المقترح لملف العربية (RTL)
في النسخة العربية، يجب عكس أماكن العناصر؛ حيث يفضل أن يأخذ السلايدر جهة اليمين ليترك المساحة المتبقية لليسار.*/
.site-content .slider-wrapper {
/* دفع السلايدر لليمين بدلاً من اليسار */
float: right;
/* الحفاظ على العرض والموضعية */
width: 65%;
position: relative;
/* تصفير الهوامش اليسرى القديمة إذا وجدت وإضافة مسافة جهة اليسار للفصل */
margin-right: 0;
margin-left: 0;
}
/*هذا الكود مخصص لنمط "العرض الكامل" (Full Width) للسلايدر، حيث يلغي خاصية العوم (float: none) ويجعل السلايدر يأخذ عرض الشاشة بالكامل (100%).
بما أن العنصر يشغل العرض الكامل، فإن الكود بحد ذاته لا يحتاج لتغيير اتجاهي (RTL) من حيث التموضع، ولكن هناك لمسات فنية ضرورية لضمان توافقه مع المحتوى العربي.
🛠️ التحسينات المقترحة لملف العربية (RTL)
في حالة السلايدر كامل العرض، تكمن الأهمية في تنسيق العناصر الداخلية (مثل النصوص والأزرار التي تظهر فوق الصورة) لكي لا تظل عالقة في جهة اليسار.*/
.site-content .full-width-banner .slider-wrapper {
width: 100%;
float: none;
margin-bottom: 29px;
/* ضمان أن أي محتوى نصي داخل السلايدر يبدأ من اليمين */
direction: rtl;
text-align: right;
}
/* تنسيق إضافي للمحتوى النصي فوق السلايدر (Caption) */
.site-content .full-width-banner .slider-wrapper .caption {
right: 10%; /* إزاحة النصوص من اليمين بدلاً من اليسار */
left: auto;
text-align: right;
}
/*هذا الكود يقوم بـ إخفاء أزرار التنقل (السابق والتالي) تماماً من السلايدر الرئيسي. استخدام !important يعني أنك تريد فرض هذا الإخفاء ومنع أي كود آخر من إظهارها.
بما أن الكود يقوم بـ "إلغاء" العنصر وليس "تحريكه"، فهو يعمل بشكل صحيح في النسختين العربية والإنجليزية ولا يحتاج لأي تعديل خاص بملف RTL.
*/
body.rtl .site-content .slider-wrapper .lSAction {
display: none !important;
}
/*هذا الكود يحدد وضعية العناصر (Slides) داخل قائمة السلايدر لتكون relative. هذا التنسيق هو إعداد هيكلي أساسي (Structural) لضمان أن أي عناصر توضع داخل الشريحة (مثل النصوص أو الأزرار التي تستخدم position: absolute) يتم تحديد مكانها بناءً على حدود هذه الشريحة وليس الصفحة بالكامل.
بما أن الكود يتعلق بالهيكل وليس بالاتجاه، فهو يعمل بشكل صحيح تماماً في النسخة العربية ولا يحتاج لتعديل برمجياً، ولكن سأوضح لك كيف تستفيد منه في تنسيق المحتوى العربي.*/
.site-content .slider-wrapper ul.store-gallery li {
position: relative;
}
/*هذا الكود يقوم بإضافة طبقة تظليل شفافة (Overlay) فوق صور السلايدر. الهدف منها هو جعل النصوص البيضاء أو الفاتحة التي تظهر فوق الصور أكثر وضوحاً وقابلية للقراءة من خلال تقليل سطوع الصورة بنسبة $30\%$.بما أن هذه الطبقة تغطي كامل المساحة (width: 100% و height: 100%) بلون واحد موحد، فهي لا تحتاج إلى تعديل اتجاهي في ملف العربية (RTL).*/
.site-content .slider-wrapper ul.store-gallery li:before {
bottom: 0;
content: "";
display: block;
height: 100%;
width: 100%;
position: absolute;
z-index: 1;
background: rgba(0,0,0,0.3);
}
/*لمسة جمالية مقترحة لنسخة العربية (RTL)
في بعض التصاميم الحديثة، بدلاً من تظليل الصورة بالكامل، يفضل المصممون استخدام تدرج لوني (Gradient) يبدأ داكناً من جهة النص وينتهي شفافاً في الجهة الأخرى. بما أن النص في العربية يبدأ من اليمين، يمكنك تجربة هذا الكود في ملف RTL:*/
body.rtl .site-content .slider-wrapper ul.store-gallery li:before {
/* تدرج لوني يبدأ من اليمين (أسود شفاف) وينتهي بجهة اليسار (شفاف تماماً) */
background: linear-gradient(to left, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%);
/* لضمان أن التظليل لا يغطي النص نفسه بل يكون خلفه */
z-index: 1;
}
body.rtl .site-content .slider-wrapper ul.store-gallery li .caption-content {
/* جعل النص فوق طبقة التظليل */
z-index: 2;
position: relative;
}
/*هذا الكود هو تنسيق تقني بسيط يضمن عدم وجود مسافات فارغة صغيرة (Gaps) أسفل صور السلايدر، وهو أمر شائع في المتصفحات عند التعامل مع الصور كعناصر سطرية.
بما أن الخاصية vertical-align: top تتحكم في المحاذاة الرأسية (من الأعلى لأسفل) وليس الأفقية، فهي لا تتأثر بتحويل الموقع إلى العربية وتعمل بشكل صحيح في كلا الاتجاهين.*/
.site-content .slider-wrapper ul.store-gallery li img {
vertical-align: top;
}
/*بينما الكود الذي أرسلته سليم، إلا أن هناك مشكلة شائعة في المواقع العربية وهي "قلب الصور" (Mirroring).
إذا كانت صور السلايدر تحتوي على أشخاص ينظرون لجهة معينة أو منتجات موجهة، فقد ترغب في جعل الصورة تبدو متناسقة مع اتجاه القراءة العربي. يمكنك إضافة هذا التنسيق في ملف rtl.css فقط إذا كنت تريد عكس الصورة برمجياً:*/
body.rtl .site-content .slider-wrapper ul.store-gallery li img {
/* لعكس الصورة أفقياً لتناسب اتجاه العين العربية */
/* تحذير: لا تستخدم هذا الكود إذا كانت الصور تحتوي على نصوص بداخلها */
transform: scaleX(-1);
/* لضمان بقاء المحاذاة الرأسية كما هي */
vertical-align: top;
}
/*هذا الكود هو المسؤول عن وضعية وتنسيق النصوص والمعلومات (العنوان، الوصف، أو السعر) التي تظهر فوق صورة السلايدر. في التصميم الأصلي، النصوص متموضعة في جهة اليمين (right: 50px).
🔄 التعديل المقترح لملف العربية (RTL)
في النسخة الإنجليزية لهذا القالب، غالباً ما تكون النصوص على اليسار، ولكن الكود الذي أرسلته يضعها على اليمين بالفعل. إذا كنت تريد اتباع النمط العربي التقليدي (حيث يبدأ النص من اليمين)، فالكود الحالي قد يبدو مناسباً، لكننا نحتاج لضبط محاذاة النص واتجاه القراءة لضمان مظهر احترافي.*/
.site-content .slider-wrapper ul.store-gallery li .banner-slider-info {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 2;
color: #fff;
/* تثبيت الموضع على اليمين */
right: 50px;
left: auto;
/* ضبط محاذاة النص للجهة اليمنى */
text-align: right;
direction: rtl;
/* تغيير الخط لخط يدعم العربية بشكل أفضل إذا لزم الأمر */
font-family: 'Cairo', sans-serif; /* مثال لخط عربي احترافي */
/* إلغاء تحويل الحروف لكبيرة لأنها لا تنطبق على العربية */
text-transform: none;
max-width: 400px;
}
.site-content .slider-wrapper ul.store-gallery li .banner-slider-info h2.caption-title {
/* font-family: Open Sans;
font-weight: 700;
color: #fff;
text-transform: uppercase;
font-size: 36px;*/
}
.site-content .slider-wrapper ul.store-gallery li .banner-slider-info .caption-content {
margin-bottom: 15px;
}
.site-content .slider-wrapper ul.store-gallery li .banner-slider-info a.slider-button {
/*border: 2px solid #fff;
/*color: #fff;
/*text-transform: uppercase;
/*font-size: 14px;
/*padding: 13px 31px;
/*display: inline-block;
/*transform: translateZ(0);
/*-webkit-transform: translateZ(0);
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
transition-duration: 0.3s;
-webkit-transition-duration: 0.3s;
transition-property: transform;
transition-timing-function: ease-out;
background: none; */
}
.site-content .slider-wrapper ul.store-gallery li .banner-slider-info a.slider-button:hover {
/* background: #fff;
color: #000;
transform: translateY(-8px);
-webkit-transform: translateY(-8px)*/
}
.site-content .slider-wrapper ul.store-gallery li .banner-slider-info h2.caption-title span {
color: #f85570;
}
/***
pagination-css
***/
.site-content .slider-wrapper .lSPager {
position: absolute;
bottom: 10px;
display: inline-block;
width: 100%;
}
.site-content .slider-wrapper .lSPager.lSpg li a,
.widget_storevilla_testimonial_widget_area .lSPager.lSpg li a {
background-color: #fff;
width: 10px;
height: 10px;
}
.site-content .slider-wrapper .lSPager.lSpg li:hover a,
.site-content .slider-wrapper .lSPager.lSpg li.active a {
background-color: #420537;
}
/*banner-header-promo-css*/
.site-content .banner-header-promo .store-promo-wrap {
overflow: hidden;
margin-bottom: 29px;
}
.site-content .banner-header-promo {
width: 32%;
float: left;
}
.site-content .full-width-banner .banner-header-promo {
width: 100%;
float: none;
}
.site-content .full-width-banner .banner-header-promo .store-promo-wrap {
float: right;
width: 32%;
margin-left: 0;
margin-right: 2%;
}
.site-content .full-width-banner .banner-header-promo .store-promo-wrap:first-child {
margin-right: 0;
}
.site-content .banner-header-promo a {
display: block;
}
.site-content .banner-header-promo a .sv-promo-area {
display: inline-block;
width: 100%;
height: 240px;
position: relative;
backface-visibility: hidden;
transform: translateZ(0px);
-webkit-transform: translateZ(0px);
transition-duration: 0.3s;
-webkit-transition-duration: 0.3s;
transition-property: transform;
vertical-align: middle;
background-size: cover;
position: relative;
}
.site-content .banner-header-promo a:hover .sv-promo-area {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
.site-content .banner-header-promo a .sv-promo-area.promo-one {
margin-top: 0;
}
.site-content .banner-header-promo .sv-promo-area .promo-wrapper {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: auto;
right: 20px;
}
.site-content .banner-header-promo .sv-promo-area .promo-wrapper {
color: #fff;
text-transform: uppercase;
}
.site-content .banner-header-promo .sv-promo-area .promo-wrapper h2 {
color: #fff;
font-size: 24px;
font-family: Lato;
text-transform: capitalize;
margin-bottom: 5px;
}
.site-content .banner-header-promo .sv-promo-area .promo-wrapper h2 span {
display: block;
color: #ff4069;
}
/*
===============================
full-width-banner css
===============================
*/
.site-content .full-width-banner .slider-wrapper ul.store-gallery li {
text-align: center;
}
.site-content .full-width-banner .slider-wrapper ul.store-gallery li .banner-slider-info {
text-align: right;
}
/*
==========
end of ccs
==========
*/
/**************************************************************
+++++++++++++++
widget slider css
+++++++++++++
*************************************************************************/
/*
widget title css
*/
.main-widget-wrap .no-bg-image .block-title span,
.main-widget-wrap .no-bg-image .block-title h2 {
color: #fff;
margin-bottom: 0;
}
.main-widget-wrap .block-title span,
.block-title span {
font-family: Open Sans;
font-size: 14px;
color: #420537;
text-transform: uppercase;
font-weight: 400;
margin-bottom: 10px;
}
.main-widget-wrap .block-title h2,
.block-title h2,
h1.page-title,
.woocommerce div.product .product_title,
.page h3.entry-title {
color: #6a6a6a;
text-transform: uppercase;
font-size: 26px;
font-family: Open Sans;
font-weight: 400;
margin-bottom: 0;
}
.woocommerce div.product .product_title {
margin-bottom: 3px;
}
h1.page-title {
margin: 0 0 10px;
}
.main-widget-wrap section {
padding: 10px 0 20px;
}
/*
====================
category section widget css
====================
*/
.widget_storevilla_cat_widget_area .category-area {
padding: 40px 0 50px;
}
.block-title {
padding-bottom: 30px;
float: right;
}
/*
=====================
prev and next pointer
=====================
*/
.StoreVillaAction {
float: left;
padding-bottom: 30px;
margin-top: 24px;
}
.StoreVillaAction .villa-lSPrev,
.StoreVillaAction .villa-lSNext {
border: 1px solid #000;
width: 23px;
height: 23px;
cursor: pointer;
display: inline-block;
position: relative;
vertical-align: middle;
text-align: center;
font-size: 16px;
line-height: 20px;
}
.StoreVillaAction .villa-lSPrev:before {
content:'\f105';
position: absolute;
font-family: FontAwesome;
color: #000;
left: auto;
right: 6px;
}
.StoreVillaAction .villa-lSNext:before {
content:'\f104';
position: absolute;
font-family: FontAwesome;
color: #000;
right: auto;
left: 7px;
}
.no-bg-image .StoreVillaAction .villa-lSPrev,
.no-bg-image .StoreVillaAction .villa-lSNext{
border-color: #fff;
}
.no-bg-image .StoreVillaAction .villa-lSPrev:before,
.no-bg-image .StoreVillaAction .villa-lSNext:before{
color: #fff;
}
/*
end of pointer css
*/
/*
==========================================================
widget_storevilla_cat_widget_area css
==========================================================
*/
.widget_storevilla_cat_widget_area .category-slider {
background: rgb(255,255,255);
}
.widget_storevilla_cat_widget_area .category-slider li {
float: right;
border-right: 1px solid #eeeeee;
padding: 44px 24px;
}
.widget_storevilla_cat_widget_area .category-slider li.lslide.active {
border-right: none;
border-left: initial; /* أو border-right: value; إذا كان هناك قيمة افتراضية سابقة */
}
.widget_storevilla_cat_widget_area .category-slider li .item-img {
text-align: center;
position: relative;
margin-left: 0;
margin-right: 10px;
}
.widget_storevilla_cat_widget_area .category-slider li .item-img a {
display: block;
}
.widget_storevilla_cat_widget_area .category-slider li .item-img a img {
vertical-align: top;
}
.widget_storevilla_cat_widget_area .category-slider li .item-img .sv_category_count {
background: rgba(255, 255, 255, 0.8) none repeat scroll 0 0;
bottom: 17%;
color: #000;
display: block;
right: auto;
left: 0;
padding: 13px 5px;
position: absolute;
left: auto;
right: 0;
text-align: center;
transition: all 0.2s ease-in-out 0s;
-webkit-transition: all 0.2s ease-in-out 0s;
width: 100%;
}
.widget_storevilla_cat_widget_area .category-slider li .item-img a:hover .sv_category_count {
background-color: #420537;
}
.widget_storevilla_cat_widget_area .category-slider li .item-img a:hover .sv_category_count h3.sv-header-title,
.widget_storevilla_cat_widget_area .category-slider li .item-img a:hover .sv_category_count p {
color: #fff;
}
.widget_storevilla_cat_widget_area .category-slider li .item-img .sv_category_count h3.sv-header-title {
font-family: Lato;
font-weight: 400;
font-size: 26px;
color: #000;
margin: 0 0 5px;
}
.widget_storevilla_cat_widget_area .category-slider li .item-img .sv_category_count .sv-count {
font-size: 12px;
font-family: Lato;
}
/*
==========================================================
widget_storevilla_cat_widget_area css end
==========================================================
*/
/*
==========================================================
widget_storevilla_cat_widget_area css
==========================================================
*/
.widget_storevilla_latest_product_cat_widget_area .lSSlideOuter,
.widget_storevilla_product_widget_area .lSSlideOuter {
border-top: 1px solid #eeeeee;
border-right: 1px solid #eeeeee;
border-bottom: 1px solid #eeeeee;
border-left: 1px solid #eeeeee;
}
.widget_storevilla_latest_product_cat_widget_area .latest-product-slider li,
.widget_storevilla_product_widget_area .store-product li {
float: right;
border-right: 1px solid #eeeeee;
padding: 44px 24px 5px 14px;
margin-left: 0;
margin-right: -1px;
}
.widget_storevilla_latest_product_cat_widget_area li.lslide.active,
.widget_storevilla_product_widget_area li.lslide.active {
border-right: none;
}
.widget_storevilla_latest_product_cat_widget_area .latest-product-slider li .item-img a,
.widget_storevilla_product_widget_area .store-product li .item-img a {
display: block;
}
.widget_storevilla_latest_product_cat_widget_area .latest-product-slider li .item-img a.product-image,
.widget_storevilla_product_widget_area .store-product li .item-img a.product-image {
margin: 0 0 20px;
}
.widget_storevilla_latest_product_cat_widget_area .latest-product-slider li .block-item-title,
.widget_storevilla_product_widget_area .store-product li .block-item-title,
.widget_storevilla_cat_with_product_widget_area .cat-with-product li .block-item-title {
text-align: center;
margin: 0 0 15px;
}
.woocommerce ul.products li.product .block-item-title {
margin-bottom: 10px;
}
.widget_storevilla_latest_product_cat_widget_area .latest-product-slider li .block-item-title span a,
.widget_storevilla_product_widget_area .store-product li .block-item-title span a,
.widget_storevilla_cat_with_product_widget_area .cat-with-product li .block-item-title span a {
font-family: Lato;
text-transform: uppercase;
color: #9e9e9e;
font-size: 10px;
display: block;
margin-bottom: 5px;
-webkit-font-smoothing: subpixel-antialiased;
}
.widget_storevilla_latest_product_cat_widget_area .latest-product-slider li .block-item-title span a:hover,
.widget_storevilla_product_widget_area .store-product li .block-item-title span a:hover,
.widget_storevilla_cat_with_product_widget_area .cat-with-product li .block-item-title span a:hover {
color: #420537;
}
.widget_storevilla_latest_product_cat_widget_area .latest-product-slider li .block-item-title h3 a,
.widget_storevilla_product_widget_area .store-product li .block-item-title h3 a,
.widget_storevilla_cat_with_product_widget_area .cat-with-product li .block-item-title h3 a,
.woocommerce ul.products li.product .block-item-title h3 a {
font-family: Open Sans;
font-weight: 500;
text-transform: capitalize;
color: #000;
font-size: 18px;
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.widget_storevilla_latest_product_cat_widget_area .latest-product-slider li .block-item-title h3 a:hover,
.widget_storevilla_product_widget_area .store-product li .block-item-title h3 a:hover,
.widget_storevilla_cat_with_product_widget_area .cat-with-product li .block-item-title h3 a:hover,
.woocommerce ul.products li.product .block-item-title h3 a:hover {
color: #420537;
transition: all 0.5s ease-in-out 0s;
-webkit-transition: all 0.5s ease-in-out 0s;
}
.widget_storevilla_latest_product_cat_widget_area .latest-product-slider li .product-price-wrap,
.widget_storevilla_product_widget_area .store-product li .product-price-wrap,
.widget_storevilla_cat_with_product_widget_area .cat-with-product li .product-price-wrap,
.woocommerce ul.products li .product-price-wrap {
border-top: 1px solid #eeeeee;
text-align: center;
}
.widget_storevilla_latest_product_cat_widget_area .latest-product-slider li ul li,
.widget_storevilla_product_widget_area .store-product li ul li {
border-right: none;
padding: 0;
position: relative;
}
.product-price-wrap .price {
padding: 5px 0;
display: block;
}
.woocommerce ul.products li.product .price {
margin-bottom: 0;
}
/*
img animation css
*/
.widget_storevilla_latest_product_cat_widget_area .latest-product-slider li .item-img a.product-image,
.widget_storevilla_product_widget_area .store-product li .item-img a.product-image {
overflow: hidden;
}
.widget_storevilla_latest_product_cat_widget_area .latest-product-slider li .item-img a.product-image img,
.widget_storevilla_product_widget_area .store-product li .item-img a.product-image img,
.widget_storevilla_cat_with_product_widget_area .product-cat-slide li .item-img a.product-image img {
transform: translateZ(0px);
-webkit-transform: translateZ(0px);
transition-duration: 1s;
-webkit-transition-duration: 1s;
transition-property: transform;
vertical-align: middle;
display: inline-block;
}
.widget_storevilla_latest_product_cat_widget_area .latest-product-slider li .item-img a.product-image:hover img,
.widget_storevilla_product_widget_area .store-product li .item-img a.product-image:hover img,
.widget_storevilla_cat_with_product_widget_area .product-cat-slide li .item-img a.product-image:hover img {
transform: scale(1.3);
-webkit-transform: scale(1.3);
}
.widget_categories select.postform,
.woocommerce.widget_product_categories select.dropdown_product_cat{
font-family: Open Sans;
font-size: 13px;
height: 30px;
padding: 0 10px;
width: 100%;
}
/*
end of css*/
/*
=====================
price tag css for all
=====================
*/
span.price span {
margin: 0;
font-family: Open Sans;
color: #000;
font-size: 14px;
font-weight: 600;
}
span.price del .amount,
.woocommerce ul.products li.product del .amount {
font-size: 14px;
color: #333333;
font-weight: 300;
text-decoration: line-through;
}
.woocommerce ul.products li.product del,
.woocommerce ul.products li.product ins {
display: inline-block !important;
vertical-align: middle;
}
span.price del span.woocommerce-Price-currencySymbol {
color: #333;
font-weight: 300;
}
/*
=======================
end of css
=======================
*/
/*
=====================
add to links css for all
=====================
*/
ul.add-to-links {
text-align: center;
border-top: 1px solid #eeeeee;
padding: 5px 0;
padding-left: 0;
padding-right: 30px;
}
ul.add-to-links li {
display: inline-block;
float: none !important;
margin: 0 13px;
}
.cross-sells ul.add-to-links li {
margin: 0 -13px;
}
ul.add-to-links li a {
/*font-size: 10px;
font-family: Lato;
font-weight: 400;*/
position: relative;
color: #666666;
display: inline-block;
text-transform: uppercase;
margin: 0 4px;
}
.single-product ul.products .add-to-links {
margin:0;
padding-left: 0;
padding-right: 23px;
}
ul.add-to-links li a:hover {
color: #420537;
}
ul.add-to-links li a.link-quickview:before {
position: absolute;
content: '\f002';
/*font-weight: 300;
font-family: FontAwesome;*/
left: auto;
right: -13px;
}
@-moz-document url-prefix() {
ul.add-to-links li a.link-quickview:before {
top:1px;
}
}
ul.add-to-links li a.link-wishlist:before {
position: absolute;
content: '\f08a';
/*font-weight: 300;
font-family: FontAwesome;*/
left: auto;
right: -13px;
}
@-moz-document url-prefix() {
ul.add-to-links li a.link-wishlist:before {
top:1px;
}
}
/*
=======================
end of css
=======================
*/
/*
=====================
sale and new button css for all
=====================
*/
.item-img {
position: relative;
}
/*--- مستطيل العرض على المنتج الذي عليه عرض في تفاصيل المنتج ---*/
.item-img .new-label,
.woocommerce span.onsale {
position: absolute;
z-index: 999;
/* خصائص الخطوط تبقى كما هي
font-family: Lato;
font-weight: 600;
color: #fff;
font-size: 14px;
text-transform: uppercase;*/
/* عكس اتجاه الدوران ليعادل نفس المظهر البصري في RTL */
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
/* خصائص تنعيم الخطوط تبقى كما هي */
-webkit-font-smoothing: antialiased;
-ms-font-smoothing: antialiased;
font-smoothing: antialiased;
font-weight: 400;
/*padding: 0px 5px 10px 45px;*/
}
.item-img .new-label.new-top-left {
/* عكس تحديد الموضع الأفقي من اليمين إلى اليسار */
left: 0;
right: auto; /* لإلغاء القيمة القديمة right: 0 */
background: #420537;
padding: 9px 13px;
top: 2px;
}
/*هذا الكود يحدد تنسيق العنصر الزائف (:before) الذي يُستخدم لإنشاء شكل هندسي (غالباً ما يكون مثلثاً أو ذيلاً) أسفل علامة المنتج (new-label)، مما يعطيها مظهراً شريطياً مميزاً.*/
.item-img .new-label.new-top-left:before {
width: 0;
height: 0;
border-style: solid;
/* عكس عرض الحدود: (Top, Right, Bottom, Left) */
border-width: 9px 10px 0 0;
/* عكس لون الحدود: (عكس لون الحد الأيسر ليكون الحد الأيمن) */
/* الترتيب: Top Right Bottom Left */
border-color: transparent #420537 transparent transparent;
content: '';
position: absolute;
/* عكس اتجاه الدوران */
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
-o-transform: rotate(-90deg);
/* الخاصية العمودية تبقى كما هي */
bottom: -8px;
/* عكس تحديد الموضع الأفقي من اليمين إلى اليسار */
left: -1px;
right: auto; /* إلغاء القيمة القديمة */
}
/*--- كلمة sale على المنتجات التي عليها عرض ---*/
/*هذا الكود يحدد موضع وتنسيق علامة "تخفيض/للبيع" (onsale) أو علامة "جديد" في الزاوية العلوية اليمنى (حسب اسم الفئة new-top-right) في سياق LTR.*/
.item-img .new-label.new-top-right,
.woocommerce span.onsale {
/* عكس تحديد الموضع الأفقي من اليسار إلى اليمين */
right: 0;
left: auto; /* لإلغاء القيمة القديمة left: 0 */
background: #763962;
padding: 9px 13px;
top: 4px;
}
/*هذا الكود يحدد تنسيق عام لملصقات "التخفيض" (onsale) في WooCommerce.*/
.woocommerce span.onsale {
border-radius: 0;
line-height: 1.2;
min-height: 38px !important;
padding: 10px;
top: 0;
}
/*--- المثلث قبل كلمة تخفيض ---*/
/*هذا الكود يحدد تنسيق العنصر الزائف (:before) الذي يُستخدم لإنشاء شكل هندسي (غالباً ما يكون مثلثاً أو ذيلاً) أسفل علامة "التخفيض/للبيع" أو علامة "جديد". هذا الشكل يتم إنشاؤه باستخدام حدود شفافة ومُلونة، ويتم تدويره.*/
.item-img .new-label.new-top-right:before,
.woocommerce span.onsale:before {
width: 0;
height: 0;
border-style: solid;
/* عكس عرض الحدود: (Top, Right, Bottom, Left) */
border-width: 9px 10px 0 0;
/* عكس لون الحدود: (عكس لون الحد الأيسر ليكون الحد الأيمن) */
/* الترتيب: Top Right Bottom Left */
border-color: transparent #763962 transparent transparent;
content: '';
position: absolute;
/* عكس اتجاه الدوران */
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
-o-transform: rotate(-90deg);
/* الخاصية العمودية تبقى كما هي */
bottom: -9px;
/* عكس تحديد الموضع الأفقي من اليمين إلى اليسار */
left: 0px;
right: auto; /* إلغاء القيمة القديمة right: 0 */
}
/*
=======================
end of css
=======================
*/
/*
=================
*****************
product-button-wrap and button css
*****************
=================
*/
.product-button-wrap {
margin: 0 0 8px;
}
.product-button-wrap a,
.woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button {
font-weight: 700;
font-family: Lato;
font-size: 10px;
text-transform: uppercase;
border-radius:0;
color: #fff;
padding: 8px 10px;
display: inline-block;
line-height: 1.4;
-webkit-transform: translateZ(0px);
transform: translateZ(0px);
-webkit-transition-duration:0.3s;
transition-duration: 0.3s;
transition-property: transform;
transition-timing-function: ease-out;
border: 1px solid #420537
max-width: 49%;
overflow: hidden;
white-space: nowrap;
}
.product-button-wrap a.button,
.product-button-wrap a.added_to_cart {
float: right;
display: inline-block;
background: #420537;
padding-left: 0; /* لإلغاء القيمة القديمة 30px */
padding-right: 30px; /* تطبيق الحشوة على الجانب الآخر */
position: relative;
border: 1px solid #420537;
transition: all 0.5s;
-webkit-transition: all 0.5s;
max-width: 49%;
overflow: hidden;
white-space: nowrap;
}
.product-button-wrap a.button:hover,
.product-button-wrap a.added_to_cart:hover,
.product-button-wrap a.villa-details:hover {
transition: all 0.5s;
-webkit-transition: all 0.5s;
background: none;
color: #000 !important;
}
.woocommerce a.added_to_cart {
padding-top: 8px;
}
.product-button-wrap a.added_to_cart {
transition: all 0.5s ease-in-out 0s;
-webkit-transition: all 0.5s ease-in-out 0s;
}
.product-button-wrap a.button.added {
display: none;
}
.product-button-wrap a.button:before,
.product-button-wrap a.added_to_cart:before {
content: '\f07a';
position: absolute;
font-family: FontAwesome;
left: auto;
right: 10px;
top: 6px;
font-size: 13px;
}
@-moz-document url-prefix() {
.product-button-wrap a.button:before,
.product-button-wrap a.added_to_cart:before {
top:5px;
}
}
.product-button-wrap a.villa-details {
float: left;
display: block;
background: #763962;
padding-left: 0;
padding-right: 30px;
position: relative;
border:1px solid #763962;
}
/*هذا الكود يحدد تنسيق أيقونة (عن طريق العنصر الزائف :before) لزر تفاصيل المنتج (villa-details). في التنسيق الأصلي، يتم وضع الأيقونة في جهة اليسار داخل الزر.*/
.product-button-wrap a.villa-details:before {
content: '\f064';
position: absolute;
font-family: FontAwesome;
font-size: 12px;
/* عكس الموضع من اليسار إلى اليمين */
right: 10px;
left: auto; /* إلغاء قيمة left: 10px و left: 0 */
top: 9px;
}
li.product-type-variable .product-button-wrap .button {
padding-left: 0;
padding-right: 27px;
}
li.product-type-variable .product-button-wrap .button:before {
content: '\f0c9';
font-size: 11px;
top: 9px;
}
/*
=======================
end of css
=======================
*/
/*
=======================
widget_storevilla_cat_with_product_widget_area css
=======================
*/
.widget_storevilla_cat_with_product_widget_area .lSSlideWrapper.usingCss {
border-top: 1px solid #eeeeee;
border-left: 1px solid #eeeeee;
border-right: none; /* أو border-right: initial; لإلغاء الحد القديم على اليمين */
border-bottom: 1px solid #eeeeee;
}
.widget_storevilla_cat_with_product_widget_area .right_align .lSSlideWrapper.usingCss {
border-right: 1px solid #eeeeee;
border-left: none; /* أو border-right: initial; لإلغاء الحد القديم على اليمين */
}
.widget_storevilla_cat_with_product_widget_area .block-title-desc {
font-family: Open Sans;
font-size: 14px;
color: #e5e5e5;
padding: 20px 26px;
position: absolute;
top: 0;
z-index: 1;
}
.widget_storevilla_cat_with_product_widget_area .block-title {
padding: 20px 26px;
width: 100%;
float: none;
}
.widget_storevilla_cat_with_product_widget_area .cat-block-wrap {
position: relative;
height: 100%;
}
.widget_storevilla_cat_with_product_widget_area .catblockwrap:before {
background: rgba(0,0,0,0.4);
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
content: '';
display: block;
height:100%;
z-index: 1;
}
.widget_storevilla_cat_with_product_widget_area .cat-block-wrap a.store-overlay {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-size: cover;
}
.widget_storevilla_cat_with_product_widget_area .block-title-desc p {
margin-bottom: 20px;
}
.widget_storevilla_cat_with_product_widget_area .block-title-desc a.view-bnt {
display: inline-block;
text-transform: uppercase;
border: 1px solid #eeeeee;
padding: 7px 26px;
color: #fff;
}
.widget_storevilla_cat_with_product_widget_area .block-title-desc a.view-bnt:hover {
background: #420537
transition:all 0.5s ease-in-out 0s;
-webkit-transition:all 0.5s ease-in-out 0s;
border: 1px solid #420537
}
.widget_storevilla_cat_with_product_widget_area .product-cat-slide ul.cat-with-product li {
border-right: 1px solid #eeeeee;
border-left: none;
float: right;
padding: 28px 24px 6px 14px;
margin-left: 0;
margin-right: -1px;
}
.widget_storevilla_cat_with_product_widget_area .product-cat-slide.left_align {
border-right: 1px solid #eeeeee;
border-left: none;
}
.widget_storevilla_cat_with_product_widget_area .product-cat-slide ul.cat-with-product li ul li {
border:none;
padding: 0;
}
.widget_storevilla_cat_with_product_widget_area .product-cat-slide.right_align ul.cat-with-product li.lslide.active {
border-right:none;
}
.widget_storevilla_cat_with_product_widget_area .product-cat-slide .home-block-inner {
float: right;
width: 25.21%;
overflow: hidden;
border: 1px solid #eeeeee;
position: relative;
height: 447px;
border-right: 0;
}
.widget_storevilla_cat_with_product_widget_area .product-cat-slide.left_align .home-block-inner {
float: left;
}
.widget_storevilla_cat_with_product_widget_area .product-cat-slide.left_align .home-block-inner {
border-right: none;
border-left: 1px solid #eeeeee;
}
.widget_storevilla_cat_with_product_widget_area .product-cat-slide .home-block-inner a img {
width: 100%;
vertical-align: top;
display: block;
-webkit-transform: translateZ(0px);
transform: translateZ(0px);
-webkit-transition-duration:0.5s;
transition-duration: 0.5s;
transition-property: transform;
transition-timing-function: ease-out;
}
.widget_storevilla_cat_with_product_widget_area .product-cat-slide .home-block-inner a:hover img {
transform: scale(1.1);
-webkit-transform:scale(1.1);
}
.widget_storevilla_cat_with_product_widget_area .product-cat-slide li .item-img a.product-image {
overflow: hidden;
display: inline-block;
}
/*========
css for arrows
==========*/
.widget_storevilla_cat_with_product_widget_area .product-cat-slide .lSAction .lSPrev,
.widget_storevilla_cat_with_product_widget_area .product-cat-slide .lSAction .lSNext {
background: rgba(0,0,0,0.6);
width: 40px;
height: 40px;
text-align: center;
opacity: 1;
display: none;
}
/*when hover css*/
.lSSlideWrapper.usingCss:hover .lSAction .lSPrev,
.lSSlideWrapper.usingCss:hover .lSAction .lSNext {
display: block;
transition: all 0.5s ease-in-out 0s;
-webkit-transition: all 0.5s ease-in-out 0s;
}
.widget_storevilla_cat_with_product_widget_area .product-cat-slide .lSAction .lSPrev:hover,
.widget_storevilla_cat_with_product_widget_area .product-cat-slide .lSAction .lSNext:hover {
background: rgba(0,0,0,0.3);
transition: all 0.5s ease-in-out 0s;
-webkit-transition: all 0.5s ease-in-out 0s;
}
/*اسهم يمين يسار category with product*/
.widget_storevilla_cat_with_product_widget_area .product-cat-slide .lSAction .lSPrev {
left: auto;
right: 20px;
}
/*هذا الكود يحدد موضع زر التنقل السابق (lSPrev) داخل محتوى فئة المنتجات المُرتبة بمحاذاة لليمين (right_align). يتم تثبيت الزر على بعد $20\text{px}$ من الحافة اليسرى للعنصر الحاوي.*/
.widget_storevilla_cat_with_product_widget_area .product-cat-slide.right_align .lSAction .lSPrev {
/* عكس تحديد الموضع من اليسار إلى اليمين */
right: 20px;
left: auto; /* لضمان إلغاء القيمة القديمة */
}
.widget_storevilla_cat_with_product_widget_area .product-cat-slide .lSAction .lSNext {
right: auto;
left: 20px;
}
/*هذا الكود يحدد موضع زر التنقل التالي (lSNext) داخل محتوى فئة المنتجات المُرتبة بمحاذاة لليمين (right_align). يتم تثبيت الزر على بعد $19\text{px}$ من الحافة اليمنى للعنصر الحاوي.*/
.widget_storevilla_cat_with_product_widget_area .product-cat-slide.right_align .lSAction .lSNext {
/* عكس تحديد الموضع من اليمين إلى اليسار */
left: 19px;
right: auto; /* لضمان إلغاء القيمة القديمة */
}
.widget_storevilla_cat_with_product_widget_area .product-cat-slide .lSAction .lSPrev:before {
content: '\f105';/*رمز سهم يشير الى اليمين*/
position: absolute;
font-family: FontAwesome;
font-size: 26px;
color: #fff;
left: auto;
right: 13px;
}
.widget_storevilla_cat_with_product_widget_area .product-cat-slide .lSAction .lSNext:before {
content: '\f104';/*رمز سهم يشير الى اليسار*/
position: absolute;
font-family: FontAwesome;
font-size: 26px;
color: #fff;
right: auto;
left: 13px;
}
/*
=======================
end of css
=======================
*/
/*
=========================================
widget_storevilla_promo_pages_area css
=========================================
*/
.widget_storevilla_promo_pages_area .promo-seciont{
padding: 40px 0;
}
.widget_storevilla_promo_pages_area .store-container {
background: #fff;
/* padding: 30px; */
}
.widget_storevilla_promo_pages_area .store-text-wrap {
margin-bottom: 30px;
}
.widget_storevilla_blog_widget_area .blog-preview-item {
margin-bottom: 30px;
}
.widget_storevilla_blog_widget_area .blog-preview-item + .blog-preview-item {
margin-bottom: 0;
}
.widget_storevilla_promo_pages_area .store-container .promo-area,
.widget_storevilla_blog_widget_area .blog-preview {
width: 22.93%;
float: right;
}
.widget_storevilla_promo_pages_area .store-container .promo-area.promo-two,
.widget_storevilla_blog_widget_area .large-blog-preview {
width: 48.87%;
margin: 0 2.5%;
float: right;
}
.widget_storevilla_promo_pages_area .store-container .promo-area.promo-two .promo-image,
.widget_storevilla_promo_pages_area .store-container .promo-area .promo-image {
margin:0 0 24px;
}
.widget_storevilla_promo_pages_area .promo-area.promo-two .promo-image {
margin: 0 0 10px !important;
}
.widget_storevilla_promo_pages_area .promo-area h2,
.widget_storevilla_blog_widget_area .blog-preview .blog-preview-info h2 a,
.widget_storevilla_blog_widget_area .large-blog-preview .blog-preview-info h2 a {
font-family: Open Sans;
font-size: 20px;
color: #333333;
font-weight: 300;
margin-bottom: 15px;
text-transform: uppercase;
}
.widget_storevilla_blog_widget_area .blog-preview .blog-preview-info h2 a,
.widget_storevilla_blog_widget_area .large-blog-preview .blog-preview-info h2 a {
display: block;
}
.widget_storevilla_blog_widget_area .blog-preview .blog-preview-info h2 a:hover,
.widget_storevilla_blog_widget_area .large-blog-preview .blog-preview-info h2 a:hover {
color: #30CFEF;
transition: all 0.5s ease-in-out 0s;
-webkit-transition: all 0.5s ease-in-out 0s;
}
.widget_storevilla_promo_pages_area .promo-area span,
.widget_storevilla_blog_widget_area .blog-preview .blog-preview-info .blog-preview_desc,
.widget_storevilla_blog_widget_area .large-blog-preview .blog-preview_desc {
color: #8b8b8b;
font-family: Open Sans;
font-size: 14px;
margin-bottom: 15px;
display: block;
}
.widget_storevilla_promo_pages_area .promo-area a button,
.widget_storevilla_blog_widget_area .blog-preview a.blog-preview-btn,
.widget_storevilla_blog_widget_area .large-blog-preview a.blog-preview-btn {
background: none;
box-shadow: none;
text-shadow: none;
display: inline-block;
border-radius:0;
text-transform: uppercase;
font-family: Open Sans;
font-size: 14px;
color: #8b8b8b;
padding: 9px 25px;
border: 1px solid #ccc;
}
.widget_storevilla_blog_widget_area .large-blog-preview a.blog-preview-btn,
.widget_storevilla_blog_widget_area .blog-preview a.blog-preview-btn {
line-height: 18px;
}
.widget_storevilla_promo_pages_area .promo-area a:hover button,
.widget_storevilla_blog_widget_area .blog-preview a.blog-preview-btn:hover,
.widget_storevilla_blog_widget_area .large-blog-preview a.blog-preview-btn:hover {
background: #420537 repeat scroll 0 0;
transition: all 0.5s ease-in-out 0s;
-webkit-transition: all 0.5s ease-in-out 0s;
color: #fff;
border: 1px solid #420537
}
.widget_storevilla_blog_widget_area .blog-outer-container .block-title {
width: 100%;
}
.widget_storevilla_blog_widget_area .blog-inner {
border: 1px solid #eeeeee;
overflow: hidden;
padding: 30px 30px;
}
.widget_storevilla_blog_widget_area .blog-preview-item .entry-thumb {
margin-bottom: 5px;
}
.widget_storevilla_blog_widget_area .blog-preview-item a {
display: block;
}
.widget_storevilla_blog_widget_area .blog-preview-item a img {
height: auto;
width: 100%;
}
/*
======================
blog layout style two
======================
*/
.blog-outer-container.blog_styletwo .blog-inner {
padding: 0;
}
.blog-outer-container.blog_styletwo .blog-column {
float: right;
width: 33.33%;
text-align: center;
position: relative;
min-height: 420px;
}
.blog-outer-container.blog_styletwo .blog-column figure {
overflow:hidden;
}
.blog-outer-container.blog_styletwo .blog-column figure img,
.blog_stylethree .column figure img {
width: 100%;
vertical-align: top;
max-height: 250px;
transition: all ease 0.3s;
-webkit-transition: all ease 0.3s;
transform: translateZ(0px);
-webkit-transform: translateZ(0px);
vertical-align: middle;
}
.blog-outer-container.blog_styletwo .blog-column figure:hover img,
.blog_stylethree .column figure:hover img {
transform: scale(1.1);
-webkit-transform: scale(1.1);
transition: all ease 0.3s;
-webkit-transition: all ease 0.3s;
}
.blog-outer-container.blog_styletwo .blog-column .blog-info {
font-family: Lato;
color: #6e6e6e;
font-size: 16px;
padding: 30px 40px 37px;
min-height: 214px;
margin-top: 50%;
}
.blog-outer-container.blog_styletwo .blog-column:nth-child(odd) .blog-info{
margin-top: 0;
margin-bottom: 50%;
}
.blog-outer-container.blog_styletwo .blog-column figure{
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 50%;
background-size: cover;
}
.blog-outer-container.blog_styletwo .blog-column:nth-child(odd) figure{
bottom: 0;
top: 50%;
}
.blog-outer-container.blog_styletwo .blog-column .blog-info h2,
.blog_stylethree .blog-inner .column .blog-info h2 {
font-size: 16px;
margin-bottom: 15px;
text-transform: uppercase;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.blog-outer-container.blog_styletwo .blog-column .blog-info h2 a {
color: #333333;
}
.blog-outer-container.blog_styletwo .blog-column .blog-info .meta-wrap {
margin-bottom: 10px;
}
.blog-outer-container.blog_styletwo .blog-column .blog-info .meta-wrap span {
font-size: 14px;
font-style: italic;
color: #949393;
display: inline-block;
margin: 0 15px;
position: relative;
font-weight: 300;
}
.blog-outer-container.blog_styletwo .blog-column .blog-info .meta-wrap span.comment:before {
position: absolute;
content: '\f0e5';
font-family: FontAwesome;
font-size: 13px;
display: block;
left: auto;
right: -19px;
font-style: normal;
}
.blog-outer-container.blog_styletwo .blog-column .blog-info .meta-wrap span.time:before {
position: absolute;
content: '\f017';
font-family: FontAwesome;
font-size: 13px;
display: block;
left: auto;
right: -17px;
font-style: normal;
width: 15px;
top: 1px;
}
.blog-outer-container.blog_styletwo .blog-column .blog-info .meta-wrap span a {
color: #949393;
transition: all ease 0.3s;
-webkit-transition: all ease 0.3s;
}
.blog-outer-container.blog_styletwo .blog-column .blog-info .meta-wrap span a:hover,
.blog-outer-container.blog_styletwo .blog-column .blog-info h2 a:hover {
color: #420537
transition: all ease 0.3s;
-webkit-transition: all ease 0.3s;
}
.blog-outer-container.blog_styletwo .blog-column .blog-info span.readmore a {
display: block;
color: #420537
text-transform: uppercase;
font-size: 14px;
margin-top: 20px;
transition: all ease 0.3s;
-webkit-transition: all ease 0.3s;
}
.blog-outer-container.blog_styletwo .blog-column .blog-info span.readmore a:hover {
color: #000;
transition: all ease 0.3s;
-webkit-transition: all ease 0.3s;
}
/*
==================
end of blog style 2
==================
*/
.blog_stylethree .blog-inner {
padding: 0;
border: none;
width: 100%;
}
.blog_stylethree .blog-inner .column {
float: right;
text-align: center;
background: #fff;
position: relative;
}
.blog_stylethree .blog-inner .column h2 {
font-size: 16px;
margin-bottom: 15px;
text-transform: uppercase;
}
.blog_stylethree .blog-inner .column h2 a {
color: #333333;
transition: all ease 0.3s;
-webkit-transition: all ease 0.3s;
}
.blog_stylethree .blog-inner .column h2 a:hover {
color: #420537
transition: all ease 0.3s;
-webkit-transition: all ease 0.3s;
}
.blog_stylethree .column .blog-info {
font-family: Lato;
color: #6e6e6e;
font-size: 16px;
padding: 35px 35px 37px;
margin-top: 50%;
}
.blog_stylethree .column figure {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 50%;
background-size: cover;
}
.blog-outer-container.blog_stylethree .column:nth-child(odd) .blog-info{
margin-top: 0;
margin-bottom: 50%;
}
.blog-outer-container.blog_stylethree .column:nth-child(odd) figure{
bottom: 0;
top: 50%;
}
.blog_stylethree .column span.time {
background: #420537;
padding: 10px 5px;
display: inline-block;
width: 55px;
cursor: pointer;
border: 1px solid #420537;
color: #fff;
transition: all ease 0.3s;
-webkit-transition: all ease 0.3s;
position: absolute;
left: 0;
right: 0;
margin-right: auto;
margin-left: auto;
top: 50%;
margin-top: -31px;
}
.blog_stylethree .column span.time:hover {
background: #fff;
color: #420537;
transition: all ease 0.3s;
-webkit-transition: all ease 0.3s;
}
.blog_stylethree .column span.time span {
display: block;
line-height: 1;
}
.blog_stylethree .column span.time .date {
font-size: 24px;
margin-bottom: 5px;
}
.blog_stylethree .column span.time .month {
text-transform: uppercase;
font-size: 12px;
}
.blog_stylethree .column .blog-info span.readmore a {
display: block;
color: #420537;
text-transform: uppercase;
font-size: 14px;
margin-top: 12px;
transition: all ease 0.3s;
-webkit-transition: all ease 0.3s;
}
.blog_stylethree .column .blog-info span.readmore a:hover {
color: #000;
transition: all ease 0.3s;
-webkit-transition: all ease 0.3s;
}
/*
=======================
end of css
=======================
*/
/*
==============
blog separator css
==============
*/
.sv-separator {
width: 100%;
margin-bottom: 20px;
}
/*
===============================================
widget_storevilla_testimonial_widget_area css
===============================================
*/
.widget_storevilla_testimonial_widget_area .store-container {
text-align: center;
}
.widget_storevilla_testimonial_widget_area .block-title {
display: block;
float: none;
z-index: 1;
position: relative;
margin-bottom: 20px;
}
.widget_storevilla_testimonial_widget_area .block-title h2 {
color: #000;
}
.widget_storevilla_testimonial_widget_area .testimonial-outer-container {
padding: 50px 0;
position: relative;
}
.widget_storevilla_testimonial_widget_area .testimonial-area .entry-thumb {
border-radius: 100%;
float: right;
overflow: hidden;
width: 117px;
height: 117px;
margin-bottom: 26px;
}
.widget_storevilla_testimonial_widget_area .testimonial-area .testimonial-preview-info {
float: right;
color: #999999;
font-family: Open Sans;
font-size: 14px;
width: 60%;
margin-left: 0;
margin-right: 40px;
text-align: right;
}
.widget_storevilla_testimonial_widget_area .testimonial-area .testimonial-preview-info h2 {
font-size: 16px;
font-weight: 300;
text-transform: uppercase;
display: inline-block;
margin-right: 0;
margin-left: 10px;
}
.widget_storevilla_testimonial_widget_area .testimonial-area .testimonial-preview-info strong {
font-weight: normal;
font-size: 13px;
}
.widget_storevilla_testimonial_widget_area .testimonial-area .testimonial-preview-info p {
position: relative;
}
.widget_storevilla_testimonial_widget_area .testimonial-area .testimonial-preview-info p:before {
content: '\f10d';
position: relative;
left: auto;
right: 0;
top: -2px;
font-size: 20px;
margin-right: 0;
margin-left: 6px;
color: #420537
font-family: 'FontAwesome';
}
.widget_storevilla_testimonial_widget_area .testimonial-area .testimonial-preview-info p:after {
content: '';
position: absolute;
background-color: #eeeeee;
width: 70px;
height: 1px;
left: auto;
right: 0;
bottom: -15px;
}
.widget_storevilla_testimonial_widget_area .testimonial-area .testimonial-preview_desc {
margin-bottom: 30px
}
.widget_storevilla_testimonial_widget_area .lSAction > a {
margin-top: -50px;
}
.widget_storevilla_testimonial_widget_area .lSAction > a {
background-image: url(images/arrowicon.png);
height: 52px;
width: 41px;
}
.widget_storevilla_testimonial_widget_area .lSSlideWrapper.usingCss ul li {
padding: 0 5% 0 0;
}
/*
=======================
end of css
=======================
*/
/*
=====================================
brand-logo-wrap css
=====================================
*/
/* .brand-logo-wrap {
padding: 50px 0;
} */
.brand-logo-wrap .block-title {
float: none;
}
.brand-logo-wrap .brands-logo li {
display: inline-block;
vertical-align: middle;
float: none;
text-align: center;
margin: 0 -2px;
}
.brand-logo-wrap .lSSlideWrapper.usingCss {
height: auto;
}
/*
=======================
end of css
=======================
*/
/*
=====================================
our-features-box css
=====================================
*/
.our-features-box {
padding: 38px 0 18px;
background: #efefef;
}
.our-features-box .feature-box {
float: right;
margin-left: 0;
margin-right: 2%;
margin-bottom: 20px;
width: 30%;
}
.our-features-box .feature-box:first-child {
margin-left: 0;
margin-right: 5% ;
}
.our-features-box .feature-box .content {
font-size: 14px;
font-family: Open Sans;
color: #3d3d3d;
}
.our-features-box .feature-box .content h3 {
font-size: 16px;
text-transform: uppercase;
color: #333333;
margin-bottom: 5px;
}
.our-features-box .feature-box span,
.our-features-box .feature-box .content {
display: inline-block;
vertical-align: middle;
}
.our-features-box .feature-box span {
border: 2px solid #ccc;
border-radius: 100%;
font-size: 34px;
height: 73px;
line-height: 67px;
overflow: hidden;
padding: 0 8px 0 0;
text-align: center;
width: 73px;
color: #420537;
margin-right: 0;
margin-left: 14px;
}
/*
=======================
end of css
=======================
*/
/*
=====================================
************
footer css
************
=====================================
*/
.site-footer .footer-widgets {
background: #333333;
padding: 40px 0 10px;
color: #c6c6c6;
font-size: 13px;
}
.site-footer .footer-widgets .widget_recent_comments li {
color: #c6c6c6;
}
.site-footer .footer-widgets h3.widget-title {
font-size: 18px;
color: #ffffff;
text-transform: uppercase;
font-weight: 400;
margin-bottom: 25px;
}
.site-footer .footer-widgets .footer-widget-1 {
float: right;
width: 25%;
}
.site-footer .footer-widgets ul li a {
color: #c6c6c6;
}
.site-footer .footer-widgets .footer-widget-2,
.site-footer .footer-widgets .footer-widget-3,
.site-footer .footer-widgets .footer-widget-4,
.site-footer .footer-widgets .footer-widget-5 {
float: right;
width: 18%;
margin-left: 0;
margin-right: 0.7%;
/* padding-top: 35px; */
}
.site-footer .bottom-footer-wrap {
background: #2f2f2f;
}
.site-footer .site-info {
float: right;
font-size: 13px;
color: #8b8b8b;
padding: 25px 0 25px;
}
.site-footer .site-info a {
color: #fff;
}
.site-footer .site-info a:hover {
color: #30CFEF;
}
.site-footer .payment-accept {
float: left;
padding: 21px 0;
}
.site-footer .payment-accept img {
display: inline-block;
vertical-align: middle;
margin: 0 2px;
max-width: 45px;
}
/*
=======================
end of css
=======================
*/
/*
==========================
widgets css
==========================
*/
/*
============
widget title
============
*/
h3.widget-title,
h3.comment-reply-title,
.comments-area h2.comments-title {
color: #420537;
font-family: Open Sans;
font-size: 20px;
font-weight: 400;
margin-bottom: 20px;
text-transform: uppercase;
}
/*
end of css
*/
.widget-area,
.widget {
font-size: 13px;
}
.widget {
margin-bottom: 30px;
}
.widget_nav_menu ul li,
.widget_pages ul li,
.widget_recent_entries ul li,
.widget_recent_comments ul li,
.widget_meta ul li,
.widget_archive ul li,
.widget_categories ul li {
margin-bottom: 8px;
line-height: 1.7;
}
.widget_archive ul li {
text-align: left;
overflow: hidden;
}
.widget_nav_menu ul li a,
.widget_pages ul li a,
.widget_recent_entries ul li a,
.widget_meta ul li a,
.widget_archive ul li a,
.widget_categories ul li a,
.site-footer .widget_recent_comments ul li a,
.widget_product_categories ul li a,
.widget_recent_comments ul li {
position: relative;
display: block;
font-size: 13px;
transition: all ease 0.3s;
-webkit-transition: all ease 0.3s;
padding-left: 0;
padding-right: 12px;
color: #666;
}
.widget_archive ul li a {
float: right;
}
.widget_nav_menu ul li a:before,
.widget_pages ul li a:before,
.widget_recent_entries ul li a:before,
.widget_meta ul li a:before,
.widget_archive ul li a:before,
.widget_categories ul li a:before,
.site-footer .widget_recent_comments ul li a:before,
.widget_product_categories ul li a:before,
.widget_recent_comments ul li:before {
content: '\f104';/*رمز سهم يشير الى اليسار*/;
position: absolute;
left: auto;
right: 0;
/*font-family: FontAwesome;*/
font-size: 13px;
color: #666;
}
/*في هذا الكود، يتم استخدام الرمز \f0da وهو سهم صغير يشير إلى اليمين (caret-right) ليظهر بجانب عناصر القوائم الجانبية (مثل التصنيفات والأرشيف) في القوائم الفرعية.*/
.widget_nav_menu ul ul li a:before,
.widget_pages ul ul li a:before,
.widget_recent_entries ul ul li a:before,
.widget_meta ul ul li a:before,
.widget_archive ul ul li a:before,
.widget_categories ul ul li a:before,
.widget_product_categories ul ul li a:before {
/* تغيير اتجاه السهم ليشير لليسار بما يناسب القوائم العربية */
content: '\f0d9';
}
.widget_recent_comments {
font-size: 13px;
color: #666 !important;
}
.widget_recent_comments ul li a {
color: #420537;
}
.widget_nav_menu ul li a:hover,
.widget_pages ul li a:hover,
.widget_recent_entries ul li a:hover,
.widget_meta ul li a:hover,
.widget_archive ul li a:hover,
.widget_categories ul li a:hover,
.widget_product_categories ul li a:hover,
.widget_recent_comments ul li:hover,
.widget_recent_comments ul li:hover:before,
.widget_nav_menu ul li a:hover:before,
.widget_pages ul li a:hover:before,
.widget_recent_entries ul li a:hover:before,
.widget_meta ul li a:hover:before,
.widget_archive ul li a:hover:before,
.widget_categories ul li a:hover:before,
.site-footer .widget_recent_comments ul li a:hover:before,
.widget_product_categories ul li a:hover:before {
color: #420537;
transition: all ease 0.3s;
-webkit-transition: all ease 0.3s;
}
.widget_nav_menu ul li a:hover:before,
.widget_pages ul li a:hover:before,
.widget_recent_entries ul li a:hover:before,
.widget_meta ul li a:hover:before,
.widget_archive ul li a:hover:before,
.widget_categories ul li a:hover:before,
.site-footer .widget_recent_comments ul li a:hover:before,
.widget_product_categories ul li a:hover:before,
.widget_recent_comments ul li:hover:before {
left: auto;
right: 3px;
}
.widget_recent_comments ul li {
padding-left: 0;
padding-right: 15px;
position: relative;
}
.widget_recent_comments ul li .comment-author-link a {
color: #420537;
}
.widget_storevilla_aboutus_info_area .about-desc {
margin-bottom: 30px;
}
.widget_storevilla_aboutus_info_area .about-logo {
margin-bottom: 10px;
}
.widget_storevilla_aboutus_info_area .about-logo img {
width: auto;
}
.widget_storevilla_aboutus_info_area ul li {
float: right;
margin-right: 0;
margin-left: 5px;
}
.widget_storevilla_aboutus_info_area ul li a {
display: block;
width: 30px;
height: 30px;
background: #beb9b9;
border-radius: 100%;
font-size: 14px;
text-align: center;
line-height: 30px;
}
.widget_storevilla_aboutus_info_area ul li a:hover {
background: #30CFEF;
transition: all 0.5s ease-in-out 0s;
-webkit-transition: all 0.5s ease-in-out 0s;
}
.widget_storevilla_aboutus_info_area ul li a .fa {
color: #333333;
}
.widget_storevilla_aboutus_info_area ul li a:hover .fa {
color: #fff;
transition: all 0.5s ease-in-out 0s;
-webkit-transition: all 0.5s ease-in-out 0s;
}
.widget_nav_menu ul li ul {
padding: 7px 10px 0 8px;
}
.footer-quick-info,
.widget_storevilla_contact_info_area ul.contacts-info li {
text-align: center;
color: #c6c6c6;
}
.footer-quick-info h4 {
font-family: Lato;
font-size: 40px;
margin-bottom: 30px;
padding: 15px 0 0;
}
.widget_storevilla_contact_info_area ul li {
display: inline-block;
margin: 0 40px;
vertical-align: top;
width: 15%;
}
.widget_storevilla_contact_info_area ul li span,
.widget_storevilla_contact_info_area ul li p {
display: inline-block;
vertical-align: middle;
}
.widget_storevilla_contact_info_area ul li span {
border: 1px solid #ccc;
border-radius: 100%;
color: #ccc;
font-size: 18px;
height: 45px;
line-height: 41px;
overflow: hidden;
text-align: center;
width: 45px;
transition: all 300ms ease-in-out 0s;
-webkit-transition: all 300ms ease-in-out 0s;
display: block;
margin: 0 auto 10px;
}
.widget_storevilla_contact_info_area ul li span:hover {
border-color: #420537;
cursor: pointer;
background: #420537;
color: #fff;
transition: all 300ms ease-in-out 0s;
-webkit-transition: all 300ms ease-in-out 0s;
}
.widget_storevilla_contact_info_area ul li span .fa-mobile {
font-size: 25px;
line-height: 45px;
}
.widget-area ul li a,
.widget li {
color: #666;
}
.widget_search form label,
.widget_search form input[type=submit],
.widget_product_search label,
.widget_product_search form input[type=submit] {
display: inline-block;
vertical-align: middle;
}
.widget_search form input[type=search],
.widget_product_search form input[type=search] {
border-radius: 0;
font-size: 14px;
border: 1px solid #eeeeee;
color: #000;
height: 31.5px;
display: inline-block;
vertical-align: middle;
}
.bothsidebar .widget_search form input[type=search],
.bothsidebar .widget_product_search form input[type=search] {
width: 151px;
}
.widget_product_search form input[type=submit] {
margin-top: -4px;
}
.widget_product_search form input[type=submit] {
margin-top: 0;
}
.widget_product_search h3,
.widget_search h3 {
margin-bottom: 0
}
.widget_product_search form,
.widget_search form {
padding-top: 15px;
}
.widget_search form input[type=submit],
.widget_product_search form input[type=submit],
.no-results.not-found .search-form .search-submit {
box-shadow: none;
background: #420537;
text-shadow: none;
border-radius: 0;
border: 1px solid #420537;
color: #fff;
height: 31px;
padding: 5px 14px;
transition: all ease 0.3s;
-webkit-transition: all ease 0.3s;
text-transform: uppercase;
display: inline-block;
}
.widget_search form input[type=submit]:hover,
.widget_product_search form input[type=submit]:hover,
.no-results.not-found .search-form .search-submit:hover {
background: none;
border: 1px solid #420537;
color: #420537;
transition: all ease 0.3s;
-webkit-transition: all ease 0.3s;
}
.widget_shopping_cart .cart_list.product_list_widget li.empty {
color: #f00;
}
.widget_layered_nav ul li span,
.widget_product_categories ul li span {
float: left;
}
.widget_product_categories ul li {
margin-bottom: 5px;
line-height: 1.7;
}
.widget_product_categories ul li ul,
.widget_pages ul li ul {
padding-top: 5px;
padding-left: 0;
padding-right: 15px;
}
.widget_categories a {
display: inline-block;
}
.widget_storevilla_aboutus_info_area {
padding-top: 15px;
}
.woocommerce .star-rating span::before {
color: #420537;
}
.woocommerce.widget_shopping_cart p.buttons a.wc-forward {
float: right;
}
.woocommerce.widget_shopping_cart p.buttons a.checkout.wc-forward {
float: left;
}
.site-header-cart .woocommerce a.button.wc-forward:hover,
.site-header-cart .woocommerce a.button.checkout:hover {
box-shadow: none;
background: none;
color: #420537
}
/*
=======================
end of css
=======================
*/
/*
=======================
tags cloud css
=======================
*/
.widget-area .widget_tag_cloud .tagcloud a,
.widget-area .widget_product_tag_cloud .tagcloud a {
color: #000;
padding: 8px 10px;
}
.widget_tag_cloud .tagcloud a,
.widget_product_tag_cloud .tagcloud a {
display: inline-block;
color: #c6c6c6;
font-size: 13px !important;
border:1px solid #c6c6c6;
padding: 3px 5px;
margin-bottom: 7px;
margin-right: 0;
margin-left: 2px;
}
.widget_tag_cloud .tagcloud a:hover,
.widget_product_tag_cloud .tagcloud a:hover {
background: #420537;
transition: all 0.7s ease-in-out 0s;
-webkit-transition: all 0.7s ease-in-out 0s;
color: #fff;
border:1px solid #420537;
}
.widget_products ul li span.product-title,
.woocommerce ul.cart_list li a,
.woocommerce ul.product_list_widget li a {
font-size: 14px;
font-weight: 400;
margin-bottom: 5px;
color: #666;
transition: all 0.7s ease-in-out 0s;
-webkit-transition: all 0.7s ease-in-out 0s;
}
.widget_products ul li span.product-title:hover,
.woocommerce ul.cart_list li a:hover,
.woocommerce ul.product_list_widget li a:hover {
color: #420537;
transition: all 0.7s ease-in-out 0s;
-webkit-transition: all 0.7s ease-in-out 0s;
}
.woocommerce ul.cart_list li a,
.woocommerce ul.product_list_widget li a {
font-size: 14px;
}
.woocommerce ul.product_list_widget li a.remove {
font-size: 16px;
}
.widget_products ul li del,
.widget_products ul li .amount,
.widget_top_rated_products ul li {
font-weight: 700;
font-size: 12px;
}
.widget_products ul li del span.amount,
.widget_products ul li del,
.widget_top_rated_products ul li del span.amount,
.widget_top_rated_products ul li del {
color: #000;
font-weight: 300;
}
/*
calender css
*/
.calendar_wrap caption {
background: none repeat scroll 0 0 #420537;
color: #ffffff;
line-height: 40px;
text-align: center;
}
.calendar_wrap table {
border-collapse: collapse;
width: auto;
}
.calendar_wrap table th {
border: 1px solid #ccc;
font-weight: bold;
padding: 8px 0px;
text-align: center;
width: 5%
}
.calendar_wrap table td {
border: 1px solid #ccc;
padding: 8px 0px;
color: #000;
width: 5%;
text-align: center;
}
.calendar_wrap table td #prev, .calendar_wrap table td#next {
text-align: right;
padding-left: 10px;
padding-right: 10px;
}
.calendar_wrap table td #next {
text-align: left;
}
/*
=======================
end of css
=======================
*/
/*
===========================
scroll up css
===========================
*/
a.scrollup {
bottom: 15px;
right: auto;
left: 15px;
background: rgba(0,0,0,0.4);
color: #fff;
text-align: center;
height: 45px;
width: 50px;
display: block;
line-height: 41px;
font-size: 36px;
position: fixed;
z-index: 999999;
border-radius: 3px;
}a.scrollup:hover {
background: rgba(0,0,0,1);
color: #30CFEF;
transition: all 0.7s ease-in-out 0s;
-webkit-transition: all 0.7s ease-in-out 0s;
}
.hfeed.site {
position: relative;
}
/*
=======================
end of css
=======================
*/
/*
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
inner pages css
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
*/
#primary,
.homepage-main-widget {
float: right;
width: 70%;
}
#secondaryright{
width: 26%;
padding: 30px 0 0;
float: right;
}
.homepage-sidebar {
width: 26%;
padding:0;
float: left;
}
#primary .site-main {
padding: 30px 0;
}
#secondaryleft {
float: left;
width: 26%;
padding: 30px 0 0;
}
/*
==================
right sidebar
==================
*/
.rightsidebar #primary {
float: left;
}
.rightsidebar #secondaryright {
float: right;
}
/*
==================
left sidebar
==================
*/
.leftsidebar #secondaryleft {
float: left;
}
.leftsidebar #primary {
float: right;
}
/*
nosidebar
*/
.nosidebar #primary {
float: none;
width: 100%;
}
.nosidebar #primary .site-main {
padding-bottom: 30px;
}
/*
end of css
*/
.widget-area section {
margin-bottom: 30px;
border: 1px solid #eaeaea;
padding: 0 15px 15px 15px;
}
.widget-area section h3.widget-title,
aside .widget_storevilla_contact_info_area h4 {
margin-left: -15px;
margin-right: -15px;
border-bottom: 1px solid #eaeaea;
padding: 10px 15px;
text-transform: uppercase;
}
.widget-area.left section.widget_categories {
overflow: hidden;
}
/*
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
end of css
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
*/
/*
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
woocommerce css
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
*/
.woocommerce .woocommerce-breadcrumb {
font-size: 14px;
}
.woocommerce .woocommerce-breadcrumb a {
position: relative;
/* padding-left: 12px; */
}
.woocommerce .woocommerce-breadcrumb a:hover {
color: #420537;
}
.woocommerce .woocommerce-breadcrumb a:hover:before {
left: auto;
right: 4px;
transition: all 0.5s ease-in-out 0s;
-webkit-transition: all 0.5s ease-in-out 0s;
}
.woocommerce .woocommerce-ordering, .woocommerce .woocommerce-result-count {
font-size: 14px;
color: #777;
position: relative;
}
.woocommerce .woocommerce-ordering select {
/*for firefox*/
-moz-appearance: none;
/*for chrome*/
-webkit-appearance:none;
appearance: none;
border: 1px solid #ccc;
box-shadow: none;
color: #8e8e8e;
cursor: pointer;
font-size: 14px;
height: 38px;
margin-right: 0;
margin-left: 3px;
outline: medium none;
padding: 7px 10px 7px 20px;
width: 150px;
}
.woocommerce .woocommerce-ordering:before {
color: #8e8e8e;
content: "\f107";
font-family: FontAwesome;
position: absolute;
right: auto;
left: 15px;
top: 11px;
font-size: 19px;
top:5px;
}
.woocommerce ul.products li.product .button {
margin-top: 0;
}
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
background: none;
}
.woocommerce #respond input#submit.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
color: #420537
}
.woocommerce #respond input#submit.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
background: none;
}
.woocommerce .products li {
text-align: center;
}
.woocommerce-page.columns-3 ul.products li.product,
.woocommerce.columns-3 ul.products li.product {
border: 1px solid #eeeeee;
padding: 18px 7px 7px;
margin-bottom: 30px;
}
.columns-3 .upsells.products ul li:nth-child(3n),
.columns-3 .related.products ul li:nth-child(3n) {
margin-left: 0 !important;
}
.woocommerce .products ul,
.woocommerce ul.products {
margin-bottom: 0;
}
.woocommerce .products ul, .woocommerce ul.products ul.add-to-links {
line-height: 18px;
padding-top: 5px;
}
.single-product .products ul.add-to-links li {
margin:0 5px;
}
/*woocommerce img hover*/
.woocommerce #primary ul.products li .item-img .product-image {
overflow: hidden;
display: block;
}
.woocommerce #primary ul.products li a img {
transform: translateZ(0px);
-webkit-transform: translateZ(0px);
transition-duration: 1s;
-webkit-transition-duration: 1s;
transition-property: transform;
vertical-align: middle;
display: inline-block;
}
.woocommerce #primary ul.products li a:hover img {
transform: scale(1.3);
-webkit-transform: scale(1.3);
}
.woocommerce ul.products li.product a img {
margin-bottom: 0;
}
.woocommerce .star-rating {
font-size: 10px;
margin-bottom: 3px;
}
.woocommerce .widget_price_filter .ui-slider .ui-slider-range {
background-color: #ccc;
}
.woocommerce .widget_price_filter .ui-slider .ui-slider-handle {
background-color: none;
background: url('images/range-icon.png') no-repeat;
border-radius: 0;
height: 20px;
}
.woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button {
background-color: #420537;
}
.woocommerce .widget_price_filter .price_slider_wrapper .ui-widget-content {
background-color: #420537;
}
/*
single pages
*/
.woocommerce .woocommerce-product-rating .star-rating,
.woocommerce-review-link {
margin: 0 0 0 10px;
display: inline-block;
vertical-align: middle;
}
.woocommerce .woocommerce-product-rating .star-rating {
margin-top: 13px !important;
}
.woocommerce-review-link {
font-size: 13px;
color: #000;
}
.woocommerce div.product .woocommerce-product-rating {
margin-bottom: 10px;
}
.single-product .woocommerce .woocommerce-breadcrumb {
margin-bottom: 25px;
}
a.woocommerce-main-image {
display: block;
border: 1px solid #c6c6c6;
padding: 2px;
margin-bottom: 10px;
}
.woocommerce div.product div.summary {
margin-top: 0;
}
.woocommerce div.product form.cart,
.woocommerce div.product p.cart {
margin-bottom: 0;
}
.woocommerce div.product form.cart {
border-top: 1px dotted #ddd;
border-bottom: 1px dotted #ddd;
padding: 15px 0; /*yo hatcha hai*/
}
/*end*/
/*
==========================================================
blog post css
==========================================================
*/
.storevilla-blog {
font-family: Open Sans;
}
.storevilla-blog figure {
overflow: hidden;
position: relative;
display: block;
margin: 0 0 25px !important;
}
.storevilla-blog figure img {
vertical-align: top;
display: block;
position: relative;
z-index: 1;
}
.storevilla-blog figure:hover .sv-img-hover {
opacity: 1;
visibility: visible;
z-index: 2;
transition: all 300ms ease-in-out 0s;
-webkit-transition: all 300ms ease-in-out 0s;
}
.storevilla-blog .sv-img-hover {
height: 100%;
left: auto;
right: 0;
opacity: 0;
padding: 20px;
position: absolute;
top: 0;
visibility: hidden;
width: 100%;
z-index: 2;
transition: all 300ms ease-in-out 0s;
-webkit-transition: all 300ms ease-in-out 0s;
}
.storevilla-blog .sv-img-hover .holder {
border: 1px solid #fff;
height: 100%;
position: relative;
width: 100%;
}
.storevilla-blog .sv-post-content,
.storevilla-blog .entry-content {
text-align: center;
color: #8b8b8b;
}
.storevilla-blog .sv-post-content .category-name span {
color: #888;
display: inline-block;
position: relative;
padding: 0 20px 0 0;
border-radius: 0;
}
.storevilla-blog .sv-post-content .category-name span:before {
position: absolute;
content: '\f07c';
font-family: FontAwesome;
left: auto;
right: -4px;
top: 1px;
}
.storevilla-blog .sv-post-content .category-name span a,
.storevilla-blog .sv-post-content .post-meta .date {
font-style: italic;
font-size: 14px;
color: #888;
transition: all 300ms ease-in-out 0s;
-webkit-transition: all 300ms ease-in-out 0s;
}
.storevilla-blog .sv-post-content .category-name span a:hover {
color: #420537;
transition: all 300ms ease-in-out 0s;
-webkit-transition: all 300ms ease-in-out 0s;
}
.storevilla-blog .sv-post-content .post-meta .date {
position: relative;
padding: 0 10px;
}
.storevilla-blog .sv-post-content .post-meta .date:before,
.storevilla-blog .sv-post-content .post-meta .date:after {
background: #8b8b8b;
content: "";
display: block;
height: 1px;
left: 0;
right: 100%;
position: absolute;
top: 50%;
width: 80px;
}
.storevilla-blog .sv-post-content .post-meta .date:before {
right: auto;
left: 100%;
}
.storevilla-blog h3 a {
color: #424242;
font-weight: 400;
font-size: 22px;
transition: all 300ms ease-in-out 0s;
-webkit-transition: all 300ms ease-in-out 0s;
display: inline-block;
margin-bottom: 10px;
line-height: 22px;
}
.storevilla-blog h3 a:hover {
color: #420537;
transition: all 300ms ease-in-out 0s;
-webkit-transition: all 300ms ease-in-out 0s;
}
.storevilla-blog .sv-post-content .post-meta {
margin-top: 4px;
}
.storevilla-blog .sv-post-content .description,
.storevilla-blog .entry-content,
.single-product div[itemprop="description"] {
text-align: right;
font-size: 14px;
}
.storevilla-blog .sv-post-content .description {
text-align: center;
}
.single-post .storevilla-blog ul.blog-meta {
margin-bottom: 10px;
}
.single-product div[itemprop="description"] p {
margin-bottom: 13px;
}
.single-product div[itemprop="description"] {
color: #8b8b8b;
margin-top: 5px;
}
.storevilla-blog .sv-post-content a.sv-btn-countinuereading {
display: inline-block;
font-weight: 400;
line-height: 14px;
margin: 10px 0 10px;
padding: 5px 10px;
position: relative;
text-transform: capitalize;
vertical-align: middle;
color: #888;
font-family: Open Sans;
font-size: 14px;
}
.storevilla-blog .sv-post-content a.sv-btn-countinuereading:before,
.storevilla-blog .sv-post-content a.sv-btn-countinuereading:after {
background: #888 none repeat scroll 0 0;
content: "";
display: block;
height: 82%;
left: auto;
right: 0;
position: absolute;
top: 15%;
width: 1px;
}
.storevilla-blog .sv-post-content a.sv-btn-countinuereading:before {
right: auto;
left: 0
}
.storevilla-blog .sv-post-foot a {
font-size: 13px;
/*font-family: Open Sans;*/
color: #888;
transition: all 300ms ease-in-out 0s;
-webkit-transition: all 300ms ease-in-out 0s;
}
.storevilla-blog .sv-post-foot a:hover,
.storevilla-blog .sv-post-content a.sv-btn-countinuereading:hover {
color: #420537;
transition: all 300ms ease-in-out 0s;
-webkit-transition: all 300ms ease-in-out 0s;
}
.storevilla-blog .sv-post-foot {
position: relative;
padding-left: 0;
padding-right: 22px;
text-align: right;
}
.storevilla-blog .sv-post-foot:before {
position: absolute;
content: '\f02c';
/*font-family: FontAwesome;*/
left: auto;
right: 0;
top: 3px;
}
.storevilla-blog .post-meta.pull-right,
.blog-meta li {
font-size: 13px;
}
.blog-meta li a {
color: #424242;
transition: all 300ms ease-in-out 0s;
-webkit-transition: all 300ms ease-in-out 0s;
position: relative;
}
.blog-meta li a:hover {
color: #763962;
transition: all 300ms ease-in-out 0s;
-webkit-transition: all 300ms ease-in-out 0s;
}
.blog-meta li {
display: inline-block;
vertical-align: middle;
margin-right: 0;
margin-left: 15px;
padding-left: 0;
padding-right: 15px;
position: relative;
}
.blog-meta li.sv-author:before {
content: '\f007';
/*font-family: FontAwesome;*/
left: auto;
right: 0;
position: absolute;
}
.blog-meta li.sv-time:before {
content: '\f133';
/*font-family: FontAwesome;*/
left: auto;
right: -2px;
position: absolute;
}
.blog-meta li.sv-category:before {
content: '\f07c';
font-family: FontAwesome;
left: auto;
right: -2px;
position: absolute;
}
.blog-meta li.sv-tags:before {
content: '\f02c';
font-family: FontAwesome;
left: auto;
right: -2px;
position: absolute;
}
.blog-meta li.sv-comments:before {
content: '\f086';
font-family: FontAwesome;
left: auto;
right: -2px;
position: absolute;
}
/*
=============
end
=============
*/
/*
=======================================
compare clear button
=======================================
*/
.yith-woocompare-widget a.clear-all,
.yith-woocompare-widget .compare.button {
display: inline-block;
vertical-align: middle;
border: 1px solid #c6c6c6;
text-transform: uppercase;
color: #000;
font-size: 12px;
padding: 8px 20px;
font-family: Open Sans;
transition: all 300ms ease-in-out 0s;
-webkit-transition: all 300ms ease-in-out 0s;
}
.yith-woocompare-widget .compare.button {
background-color: #420537;
border-color: #420537;
color: #fff;
transition: all 300ms ease-in-out 0s;
-webkit-transition: all 300ms ease-in-out 0s;
border-radius: 0;
padding: 8px 20px;
font-weight: 400;
}
.yith-woocompare-widget .compare.button:hover {
background: none;
color: #420537;
transition: all 300ms ease-in-out 0s;
-webkit-transition: all 300ms ease-in-out 0s;
}
.yith-woocompare-widget a.clear-all:hover {
background-color: #420537;
color: #fff;
border-color: #420537;
transition: all 300ms ease-in-out 0s;
-webkit-transition: all 300ms ease-in-out 0s;
}
.yith-woocompare-widget .products-list {
margin-bottom: 15px;
}
.yith-woocompare-widget .products-list li {
margin-bottom: 5px;
}
/*end of css*/
/*
single page navigation css
*/
.post-navigation .nav-links {
border-bottom: 1px solid #efefef;
border-top: 1px solid #efefef;
margin: 0 auto 40px;
overflow: hidden;
}
.post-navigation .nav-links .nav-previous {
border-left: 1px solid #efefef;
border-right: none; /* أو border-right: initial; لإلغاء الحد القديم على اليمين */
text-align: left;
padding-right: 0;
padding-left: 30px;
}
.post-navigation .nav-links .nav-next {
text-align: right;
padding-left: 0;
padding-right: 30px;
border-left: none;
border-right: 1px solid #efefef;
}
.post-navigation .nav-links .nav-previous,
.post-navigation .nav-links .nav-next {
padding-top:30px;
padding-bottom:30px;
}
.post-navigation .nav-links .nav-previous a,
.post-navigation .nav-links .nav-next a {
color: #424242;
font-size: 14px;
position: relative;
transition: all 300ms ease-in-out 0s;
-webkit-transition: all 300ms ease-in-out 0s;
}
.post-navigation .nav-links .nav-previous a:hover,
.post-navigation .nav-links .nav-next a:hover {
transition: all 300ms ease-in-out 0s;
-webkit-transition: all 300ms ease-in-out 0s;
color: #420537;
}
.post-navigation .nav-links .nav-previous a:before {
font-family: FontAwesome;
content: '\f100';
position: absolute;
left: auto;
right: -30px;
top: 0;
}
.post-navigation .nav-links .nav-next a:before {
right: auto;
left: -30px;
content: '\f101';
font-family: FontAwesome;
position: absolute;
top: 0;
}
/*end of css*/
/*
=================
comment css
=========================
*/
.comments-area .comment-notes {
color: #f00;
font-size: 13px;
/*font-family: Open Sans;*/
margin-bottom: 5px;
}
.comments-area p label {
color: #424242;
font-size: 13px;
text-transform: uppercase;
}
.comments-area .comment-form-author {
width: 49%;
display: inline-block;
vertical-align: middle;
margin-right: 0;
margin-left: 1.4%;
}
.comments-area .comment-form-email {
width: 49%;
display: inline-block;
vertical-align: middle;
}
.comments-area label {
display: block;
}
.comments-area textarea,
.comments-area .comment-form-author input,
.comments-area .comment-form-email input,
.comments-area .comment-form-url input {
border-radius: 0;
width: 100%;
padding: 0 10px;
}
.comments-area .comment-form-author input,
.comments-area .comment-form-email input,
.comments-area .comment-form-url input {
height: 35px;
font-size: 14px;
}
.comments-area .comment-form-comment,
.comments-area .comment-form-author,
.comments-area .comment-form-email,
.comments-area .comment-form-url {
margin-bottom: 10px;
}
.comments-area .form-submit .submit {
display: inline-block;
border: 1px solid #420537;
box-shadow: none;
text-shadow: none;
background: #420537;
padding: 10px;
color: #fff;
border-radius: 0;
transition: all 300ms ease-in-out 0s;
-webkit-transition: all 300ms ease-in-out 0s;
}
.comments-area .form-submit .submit:hover {
transition: all 300ms ease-in-out 0s;
-webkit-transition: all 300ms ease-in-out 0s;
background: none;
color: #420537;
}
/*end of css*/
/*
==========
category taxonomy-description css
==========
*/
.taxonomy-description {
font-family: Open Sans;
font-size: 14px;
color: #8b8b8b;
margin-bottom: 15px
}
/*end of css*/
/*
==========
category taxonomy-description css
==========
*/
.navigation.pagination {
text-align: center;
}
.pagination .nav-links span,
.pagination .nav-links a {
display: inline-block;
border: 1px solid #c6c6c6;
height: 30px;
width: 30px;
text-align: center;
line-height: 30px;
border-right: none;
font-size: 13px;
transition: all 300ms ease-in-out 0s;
-webkit-transition: all 300ms ease-in-out 0s;
color: #000;
margin:0 -4px 0 0;
}
.pagination .nav-links span,
.pagination .nav-links a.prev.page-numbers {
border-left: none;
border-right: 1px solid #c6c6c6;
}
.pagination .nav-links a.next.page-numbers,
.pagination .nav-links a.prev.page-numbers {
width: auto;
padding:0 5px;
transition: all 300ms ease-in-out 0s;
-webkit-transition: all 300ms ease-in-out 0s;
}
.pagination .nav-links span.current {
background: #420537;
border-color: #420537;
color: #fff;
}
.pagination .nav-links a:hover {
background: #420537;
border-color: #420537;
color: #fff;
transition: all 300ms ease-in-out 0s;
-webkit-transition: all 300ms ease-in-out 0s;
}
/*end of css*/
/*
variations_form cart
*/
.variations_form.cart label {
/*font-size: 13px;
font-family: Open Sans;
color: #000;*/
text-transform: uppercase;
}
.woocommerce div.product form.cart .variations select {
height: 30px;
/*font-size: 13px;
font-family: Open Sans;*/
padding: 0 10px;
}
.woocommerce div.product form.cart .variations td {
line-height: 2.5em;
}
/*
woocommerce-variation-add-to-cart variations_button
*/
.woocommerce div.product form.cart div.quantity {
border: 1px solid #420537;
}
.quantity button,
.quantity .input-text.text {
background: #fff;
box-shadow: none;
text-shadow: none;
border: none;
width: 41px;
height: 34px;
border-radius: 0;
text-align: center;
padding: 5px;
font-size: 10px;
float: right;
vertical-align: middle;
border-right: none;
border-left:1px solid #420537;
}
.quantity button.increase {
border-left: 0;
}
.quantity button {
background: #420537;
color: #fff;
}
.quantity button:hover {
background: none;
color: #420537;
}
.cart_item .quantity .input-text {
overflow: hidden;
border-top: 1px solid #420537;
border-bottom: 1px solid #42537;
}
.quantity .input-text.text {
width: auto;
font-size: 14px;
}
.woocommerce #respond input#submit.alt.disabled,
.woocommerce #respond input#submit.alt.disabled:hover,
.woocommerce #respond input#submit.alt:disabled,
.woocommerce #respond input#submit.alt:disabled:hover,
.woocommerce #respond input#submit.alt[disabled]:disabled,
.woocommerce #respond input#submit.alt[disabled]:disabled:hover,
.woocommerce a.button.alt.disabled,
.woocommerce a.button.alt.disabled:hover,
.woocommerce a.button.alt:disabled,
.woocommerce a.button.alt:disabled:hover,
.woocommerce a.button.alt[disabled]:disabled,
.woocommerce a.button.alt[disabled]:disabled:hover,
.woocommerce button.button.alt.disabled,
.woocommerce button.button.alt.disabled:hover,
.woocommerce button.button.alt:disabled,
.woocommerce button.button.alt:disabled:hover,
.woocommerce button.button.alt[disabled]:disabled,
.woocommerce button.button.alt[disabled]:disabled:hover,
.woocommerce input.button.alt.disabled,
.woocommerce input.button.alt.disabled:hover,
.woocommerce input.button.alt:disabled,
.woocommerce input.button.alt:disabled:hover,
.woocommerce input.button.alt[disabled]:disabled,
.woocommerce input.button.alt[disabled]:disabled:hover {
border-radius: 0;
background: #420537;
}
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
background: #420537;
border-radius: 0;
position: relative;
}
button.single_add_to_cart_button.button.alt {
padding: 9px 30px 9px 10px !important;
position: relative;
display: inline-block;
}
button.single_add_to_cart_button:before {
content: '\f07a';
position:absolute;
left: auto;
right: 11px;
/*font-family: FontAwesome;*/
font-size: 13px;
top: 7px;
}
.woocommerce #respond input#submit.alt:hover,
.woocommerce input.button.alt:hover {
color: #420537;
background: none;
}
.woocommerce a.button.alt:hover ,
.woocommerce button.button.alt:hover, {
background: none;
color: #420537;
}
.woocommerce #content table.cart td.actions .input-text, .woocommerce table.cart td.actions .input-text, .woocommerce-page #content table.cart td.actions .input-text, .woocommerce-page table.cart td.actions .input-text {
width: auto;
}
.woocommerce .woocommerce-breadcrumb {
display: block;
margin: 0 0 30px;
}
/*end*/
.single-product .summary.entry-summary .variations_form.cart {
margin-bottom: 15px;
}
.single-product .summary.entry-summary .clear {
display: none;
}
.single-product .yith-wcwl-add-to-wishlist {
margin-top: 0;
}
.single-product .yith-wcwl-add-to-wishlist,
.single-product .entry-summary .compare.button {
display: inline-block !important;
vertical-align: middle;
width: auto;
font-size: 14px;
text-transform: capitalize;
/*font-family: Open Sans;*/
color: #8b8b8b;
padding: 10px 0;
}
.single-product .yith-wcwl-add-to-wishlist a {
color: #000;
padding-left: 0;
padding-right: 20px;
position: relative;
transition: all ease 0.3s;
-webkit-transition: all ease 0.3s;
}
.single-product .yith-wcwl-add-to-wishlist a:hover{
transition: all ease 0.3s;
-webkit-transition: all ease 0.3s;
}
.single-product .entry-summary .compare.button {
background: none;
padding: 0;
color: #000;
border-radius: 0;
font-weight: 400;
position: relative;
padding: 8px 20px 10px 0px;
border: none;
}
.single-product .compare.button:hover,
.single-product .entry-summary .yith-wcwl-add-to-wishlist a:hover {
background: none;
color: #420537;
}
.single-product .yith-wcwl-add-to-wishlist a.add_to_wishlist:before {
content: '\f08a';
position: absolute;
/*font-family: FontAwesome;*/
left: auto;
right: 0;
}
.single-product .entry-summary .compare.button:before {
content: '\f080';
position: absolute;
/*font-family: FontAwesome;*/
left: auto;
right: 0;
}
.single-product .product_meta {
font-size: 13px;
border-top: 1px dotted #ddd;
padding: 10px 0 5px;
}
.single-product .product_meta .sku_wrapper span {
display: inline-block;
border-bottom: 0;
padding-bottom: 0;
}
.single-product .product_meta span.sku_wrapper,
.single-product .product_meta .posted_in {
display: block;
margin-bottom: 10px;
}
.single-product .product_meta span {
border-bottom: 1px dotted #ddd;
display: block;
padding-bottom: 10px;
}
.single-product .product_meta span a {
color: #420537;
}
.single-product .product_meta .posted_in a {
color: #000;
}
.single-product .product_meta .posted_in a:hover {
transition: all 0.5s ease-in-out 0s;
-webkit-transition: all 0.5s ease-in-out 0s;
color: #420537;
}
.single-product .yith-wcwl-wishlistaddedbrowse a,
.single-product .yith-wcwl-wishlistexistsbrowse a {
display: inline-block;
position: relative;
padding-left: 0;
padding-right: 25px;
}
.single-product .yith-wcwl-wishlistaddedbrowse a:before,
.single-product .yith-wcwl-wishlistexistsbrowse a:before {
content: '\f110';
/*font-family: FontAwesome;*/
left: auto;
right: 5px;
position: absolute;
}
.single-product .yith-wcwl-wishlistexistsbrowse.show .feedback {
color: #420537;
}
.storevilla-social .apss-share-text {
display: none;
}
/*
========================
sidebar pagelayout css
========================
*/
.bothsidebar .store-container-inner {
padding-right: 300px;
padding-left: 300px;
}
.bothsidebar #primary .site-main{
float: left;
}
.bothsidebar #secondaryleft {
/* عكس الـ margin السلبي */
margin-right: -300px;
margin-left: 0; /* إلغاء الهامش السلبي القديم */
/* عكس التعويم */
float: right;
/* العرض يبقى ثابتاً */
width: 47%;
}
.bothsidebar #secondaryright {
/* عكس التعويم */
float: left;
/* عكس الهامش السلبي */
margin-left: -300px;
margin-right: 0; /* إلغاء الهامش السلبي القديم */
/* يبقى كما هو */
position: relative;
/* عكس الإزاحة الموضعية */
left: -100%;
right: auto; /* إلغاء القيمة القديمة */
/* العرض يبقى ثابتاً */
width: 47%;
}
.bothsidebar #primary{
width: 100%;
position: relative;
float: none;
}
.woocommerce-tabs.wc-tabs-wrapper,
.page .entry-content {
/*font-family: Open Sans;
font-size: 14px;*/
color: #8b8b8b;
}
.woocommerce-tabs.wc-tabs-wrapper ul.tabs li a {
/*font-size: 16px;
font-family: Open Sans;
font-weight: 300;*/
}
.woocommerce-tabs.wc-tabs-wrapper h2 {
font-size: 18px;
color: #420537;
font-weight: 300;
margin-bottom: 15px;
/*font-family: Open Sans;*/
}
.related.products h2,
.upsells.products h2 {
color: #6a6a6a;
/*font-family: Open Sans;*/
text-transform: capitalize;
font-size: 26px;
border-bottom: 1px solid #e6e6e6;
padding-bottom: 10px;
}
/*
wc-proceed-to-checkout
*/
.wc-proceed-to-checkout .checkout-button {
width: 100% !important;
text-align: center !important;
}
.wc-proceed-to-checkout .checkout-button:before {
left: 53px !important;
}
/*
======================
no-results not-found css
======================
*/
.no-results.not-found .page-content {
color: #f00;
/*font-style: italic;*/
}
.no-results.not-found .page-content p {
margin-bottom: 15px;
}
.no-results.not-found .page-content .search-field {
border-radius: 0 !important;
font-style: normal;
font-size: 13px;
/*font-family: Open Sans;*/
height: 31.5px;
padding: 3px 10px;
}
/*
=========================
error 404
=========================
*/
#primary-404 .site-main {
padding: 60px 0;
}
#primary-404 .site-main .error-404.not-found {
text-align: center;
}
#primary-404 .site-main .error-404.not-found h1 {
color: red;
}
#primary-404 .site-main .error-404.not-found .page-content p {
margin-bottom: 40px;
}
.error-homepage a {
display: inline-block;
background: #420537;
font-size: 14px;
text-transform: uppercase;
color: #fff;
padding: 10px 20px;
}
.error-homepage a:hover {
background: #420537;
}
/*
pagination css
*/
.woocommerce nav.woocommerce-pagination ul,
.woocommerce nav.woocommerce-pagination ul li {
border-color: #420537;
}
.woocommerce nav.woocommerce-pagination ul li a:focus,
.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li span.current {
background: #420537;
color: #fff;
}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
color: #420537;
}
.woocommerce nav.woocommerce-pagination ul li a.next.page-numbers {
margin-top: -2px;
}
/*widget_shopping_cart_content css*/
.widget-area .widget_shopping_cart_content {
padding: 0;
}
/*
====================
woocommerce-tabs css
====================
*/
.woocommerce-tabs .entry-content ol li {
list-style: disc;
}
.woocommerce-tabs .entry-content ol.commentlist li {
list-style: none;
}
.woocommerce-tabs.wc-tabs-wrapper .entry-content ol {
padding-left: 0ك;
padding-right: 17px;
margin-bottom: 10px;
}
.woocommerce .woocommerce-tabs #reviews h3 {
margin-bottom: 10px;
}
.woocommerce .woocommerce-tabs p.stars a {
color: #420537;
}
.woocommerce .woocommerce-tabs .comment-form-rating {
}
.woocommerce .woocommerce-tabs .comment-form-rating label,
.woocommerce .woocommerce-tabs .comment-form-rating .stars {
display: inline-block;
vertical-align: middle;
}
.woocommerce .woocommerce-tabs .comment-form-rating .stars {
margin-bottom: 0 !important;
line-height: 12px;
margin-left: 0;
margin-right: 10px !important;
}
.woocommerce-tabs .comment-respond .comment-form-comment {
float: right;
width: 49%;
}
.woocommerce-tabs .comment-respond .comment-form-author,
.woocommerce-tabs .comment-respond .comment-form-email {
float: left;
width: 49%;
}
.woocommerce-tabs .comment-respond .comment-form-author label,
.woocommerce-tabs .comment-respond .comment-form-email label,
.woocommerce-tabs .comment-respond .comment-form-comment label {
display: block;
margin-bottom: 5px;
color: #000;
}
.woocommerce-tabs .comment-respond .comment-form-author label span,
.woocommerce-tabs .comment-respond .comment-form-email label span {
color: red;
}
.woocommerce-tabs .comment-respond .comment-form-author input,
.woocommerce-tabs .comment-respond .comment-form-email input,
.woocommerce-tabs .comment-respond .comment-form-comment textarea {
border-radius: 0;
color: #000;
padding: 5px 10px;
width: 100%;
font-size: 14px;
}
.woocommerce-tabs .comment-respond .comment-form-author input,
.woocommerce-tabs .comment-respond .comment-form-email input {
height: 35px;
}
.woocommerce #reviews #comment {
height: 105px;
}
.woocommerce-tabs .comment-respond .form-submit {
float: left;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
border-bottom-left-radius: 0;
border-bottom-right-radius: initial;
border-width: 0;
box-shadow: none;
right: 0;
left: auto;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::after, .woocommerce div.product .woocommerce-tabs ul.tabs li::before {
border: none;
bottom: 0;
content: " ";
height: 0;
position: static;
width: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs {
padding: 0 5px 0 0px;
margin: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before {
border:none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
margin: 0 -5px 0 5px;
border: none;
border-radius: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
/*font-family: Open Sans;*/
font-weight: 400;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active,
.woocommerce div.product .woocommerce-tabs ul.tabs li:hover {
background: #420537;
color: #fff;
transition: all 300ms ease-in-out 0s;
-webkit-transition: all 300ms ease-in-out 0s;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li:hover a {
color: #fff;
}
.woocommerce div.product .woocommerce-tabs .panel.entry-content.wc-tab {
border-top: 2px solid #420537
padding-top: 15px;
border-bottom: 1px solid #ddd;
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
padding: 20px 20px;
}
/*form css*/
.woocommerce form.checkout_coupon, .woocommerce form.login, .woocommerce form.register {
border-radius: 0;
}
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea {
border-radius: 0;
height: 35px;
padding: 0 10px;
font-size: 13px;
}
.woocommerce form .form-row textarea {
min-height: 140px;
padding-top: 5px;
}
/*itemprop css*/
.entry-summary div[itemprop="description"] ol {
padding: 0 15px 0 0;
margin-bottom: 15px;
}
.entry-summary div[itemprop="description"] ol li {
list-style: disc;
}
/*
=============
wishlist_table css
=============
*/
table.wishlist_table .product-name a {
display: block;
font-size: 16px;
color: #000;
transition: all 300ms ease-in-out 0s;
-webkit-transition: all 300ms ease-in-out 0s;
}
table.wishlist_table .product-name a.button {
display: inline-block;
font-size: 10px;
color: #8b8b8b;
background: none;
padding: 0 15px 0 0;
position: relative;
transition: all 300ms ease-in-out 0s;
-webkit-transition: all 300ms ease-in-out 0s;
border: none;
}
table.wishlist_table .product-name a.button:before {
position: absolute;
content: '\f002';
left: auto;
right: 0;
/*font-family: FontAwesome;*/
display: inline-block;
}
table.wishlist_table .product-name a:hover,
table.wishlist_table .product-name a.button:hover {
color: #420537;
transition: all 300ms ease-in-out 0s;
-webkit-transition: all 300ms ease-in-out 0s;
}
.wishlist_table tr td.product-name {
width: 300px;
}
.woocommerce .wishlist_table td.product-add-to-cart a {
padding: 10px;
}
.woocommerce table.wishlist_table {
font-size: 14px;
}
/*
====================
comments-area css
====================
*/
.comments-area .comment-list {
margin-bottom: 20px;
}
.comments-area ol li .comment-body {
background: #f1f1f1 none repeat scroll 0 0;
margin-bottom: 10px;
padding: 10px;
border-radius: 5px;
}
.comments-area ol li .comment-author img {
height: 42px;
margin-right: 0;
margin-left: 15px;
width: 42px;
float: right;
}
.comment-author .fn a {
color: #000;
display: inline-block;
font-size: 14px;
font-style: normal;
font-weight: bold;
margin-top: 6px;
padding-top: 10px;
text-transform: capitalize;
}
.comments-area .comment-metadata a {
color: #777777;
font-size: 12px;
padding-left: 0;
padding-right: 15px;
position: relative;
text-transform: capitalize;
}
.comments-area .comment-metadata a:hover {
color: #420537;
}
.comments-area .comment-metadata a::before {
content: "";
/*font-family: FontAwesome;*/
right: auto;
left: 0;
position: absolute;
top: 0;
display: inline-block;
top: -1px;
}
.comments-area ol li .comment-metadata {
float: none;
margin-bottom: 5px;
width: 100%;
}
.comments-area .comment-body .comment-content {
font-size: 12px;
margin-left: 0;
margin-right: 57px;
}
.comments-area .comment-body .reply {
margin-left: 0;
margin-right: 57px;
}
.comments-area .reply a {
display: inline-block;
background: #420537;
padding: 5px 15px;
color: #fff;
font-size: 12px;
border: 1px solid #420537;
transition: all 300ms ease-in-out 0s;
-webkit-transition: all 300ms ease-in-out 0s;
}
.comments-area .reply a:hover {
background: none;
color: #420537;
transition: all 300ms ease-in-out 0s;
-webkit-transition: all 300ms ease-in-out 0s;
}
.comments-area ol.children {
margin: 0 25px 0 0;
}
.comment-author.vcard b.fn {
text-transform: capitalize;
float: right;
margin-right: 0;
margin-left: 5px;
}
/*
end
*/
/*
group table css======================
*/
table.group_table tr td {
float: none;
}
table.group_table td a.button {
display: inline-block;
float: none !important;
}
.woocommerce div.product form.cart .group_table td.label {
float: right;
padding-bottom: 5px;
padding-left: 0;
padding-right: 0;
width: 160px;
}
.woocommerce div.product form.cart .group_table td.label a {
color: #420537;
font-size: 14px;
}
.woocommerce div.product form.cart .group_table td.label a:hover {
color: #FBB203;
}
.woocommerce div.product form.cart .group_table td.price {
display: inline-block;
}
.woocommerce div.product form.cart table div.quantity {
float: right;
}
.woocommerce div.product form.cart .group_table td.price {
display: inline-block;
font-size: 13px;
padding: 5px 0 0;
width: 80px;
}
.woocommerce div.product form.cart .group_table td.label a:hover {
color: #000;
}
.woocommerce .product-type-grouped form.cart table tr:last-child {
border-bottom: 0;
}
/*
end
*/
/*
====================
archive add to links
====================
*/
.archive .products .add-to-links {
padding-left: 0;
padding-right: 12px
}
.archive .products .add-to-links li {
margin: 0 7px;
}
/*
css
*/
.woocommerce .cart-collaterals .cart_totals, .woocommerce-page .cart-collaterals .cart_totals {
width: 35%;
}
.woocommerce .cart-collaterals .cross-sells, .woocommerce-page .cart-collaterals .cross-sells {
width: 60%;
}
.woocommerce table.shop_table {
margin-bottom: 45px;
}
.woocommerce-page table.cart td.actions .coupon .input-text {
height: 30px;
}
.woocommerce-info a.showcoupon {
color: #420537;
}
.woocommerce-info a.showlogin {
color: #ccc;
}
.woocommerce-checkout-payment ul li {
list-style: none
}
.woocommerce-checkout-payment li.wc_payment_method.payment_method_paypal a.about_paypal {
color: #420537;
}
.woocommerce-page tr.cart_item td.product-name {
width: 41%;
padding: 20px 10px !important;
}
.select2-container .select2-choice {
border-radius: 0;
border-color: #ccc;
height: 35px;
padding: 2px 10px;
}
article .entry-content ul.wc_payment_methods.payment_methods.methods li {
list-style: none;
}
/*
boxed layout css
*/
.boxlayout .hfeed.site {
max-width: 1230px;
background:#fff;
margin: 0 auto;
}
/*
columns-4 display css
*/
.columns-4 .product-button-wrap a {
display: inline-block;
}
.columns-4.single-product .product-button-wrap .button {
margin-bottom: 5px;
}
.columns-4 ul.products > li {
border: 1px solid #eeeeee;
padding: 10px 10px !important;
}
/*
form.cart button css
*/
form.cart button.single_add_to_cart_button {
padding: 9px 10px;
}
/*
============
both sidebar widget css
============
*/
.widget-area .widget_storevilla_contact_info_area h4 {
color: #420537;
margin-bottom: 20px;
}
.widget-area .widget_storevilla_contact_info_area .contacts-info li {
width: 100%;
text-align: right;
margin: 0;
overflow: hidden;
}
.widget-area .widget_storevilla_contact_info_area .contacts-info li span,
.widget-area .widget_storevilla_contact_info_area .contacts-info li p {
display: inline-block;
vertical-align: middle;
color: #000;
}
.widget-area .widget_storevilla_contact_info_area .contacts-info li span {
border-color: #000;
}
.widget-area .widget_storevilla_contact_info_area .contacts-info li span:hover {
color: #fff;
border-color: #420537;
}
.widget-area .widget_storevilla_contact_info_area .contacts-info li p {
width: 66%;
margin-left: 0;
margin-right: 10px;
vertical-align: middle;
display: inline-block;
}
.widget-area .widget_storevilla_contact_info_area .contacts-info li.email-footer a {
width: 66%;
margin-left: 0;
margin-right: 10px;
vertical-align: middle;
display: inline-block;
}
.widget-area .widget_storevilla_contact_info_area .contacts-info li a:hover {
color: #420537;
}
/*end of css*/
/*
=======================
widget_storevilla_column_product_widget_area homepage
=======================
*/
.widget_storevilla_column_product_widget_area .column-wrap {
background: #efefef;
padding: 40px 0 30px !important;
}
.widget_storevilla_column_product_widget_area .column-wrap .col-wrap {
background: #fff;
}
.widget_storevilla_column_product_widget_area .column-wrap .col-wrap li {
list-style: none;
display: block;
width: 100%;
overflow: hidden;
border-bottom: 1px solid #eeeeee;
padding-bottom: 19px;
margin-bottom: 19px;
}
.widget_storevilla_column_product_widget_area .column-wrap .col-wrap li:last-child {
border: none;
margin-bottom: 0;
padding-bottom: 0;
}
.widget_storevilla_column_product_widget_area .column-wrap .col-wrap .block-title {
float: none;
}
.widget_storevilla_column_product_widget_area .column-wrap .col-wrap .block-title h2 {
color: #420537;
font-size: 24px;
}
.widget_storevilla_column_product_widget_area .column-wrap .col-product-area-one {
/* عكس التعويم */
float: right;
/* الحشوة تبقى كما هي */
padding: 30px 25px;
/* العرض يبقى كما هو */
width: 33%;
/* عكس الحد من اليسار إلى اليمين */
border-right: 1px solid #eeeeee;
border-left: none; /* أو border-left: 0; لإلغاء الحد القديم */
}
.widget_storevilla_column_product_widget_area .column-wrap .col-product-area-one .new-label,
.widget_storevilla_column_product_widget_area .column-wrap .col-product-area-one .product-button-wrap,
.widget_storevilla_column_product_widget_area .column-wrap .col-product-area-one .add-to-links {
display: none;
}
.widget_storevilla_column_product_widget_area .column-wrap .col-product-area-one .item-img {
float: right;
width: 25%;
overflow: hidden;
}
/*هذا الكود يحدد تنسيق الصورة داخل رابط المنتج ضمن الودجت، وهو يركز على تفعيل تسريع الأجهزة وتأثير الانتقال (Transition) على خاصية التحويل (Transform).*/
.widget_storevilla_column_product_widget_area .column-wrap .col-product-area-one .item-img a img {
display: inline-block;
transform: translateZ(0px);
transition-duration: 1s;
transition-property: transform;
vertical-align: middle;
}
/*هذا الكود يحدد تأثير التكبير (Zoom) على صورة المنتج عند مرور مؤشر الفأرة فوقها (حالة :hover).*/
.widget_storevilla_column_product_widget_area .column-wrap .col-product-area-one .item-img a:hover img {
transform: scale(1.3);
-webkit-transform: scale(1.3);
}
.widget_storevilla_column_product_widget_area .column-wrap .col-product-area-one .item-img .product-image {
display: block;
}
.widget_storevilla_column_product_widget_area .column-wrap .col-product-area-one .item-img .product-image img {
width: 100%;
}
.widget_storevilla_column_product_widget_area .column-wrap .col-product-area-one .block-item-title {
float: right;
/*font-family: Lato;*/
margin-left: 0;
margin-right: 5%;
padding-bottom: 5px;
width: 60%;
}
.widget_storevilla_column_product_widget_area .column-wrap .col-product-area-one .block-item-title span a,
.widget_storevilla_pro_prouct_list_widget_area .block-item-title span a {
font-size: 10px;
color: #9e9e9e;
text-transform: uppercase;
}
.widget_storevilla_column_product_widget_area .column-wrap .col-product-area-one .block-item-title span a:hover {
color: #420537;
}
.widget_storevilla_pro_prouct_list_widget_area .block-item-title span a:hover {
color: #420537;
}
.widget_storevilla_column_product_widget_area .column-wrap .col-product-area-one .block-item-title h3 {
margin-bottom: 0;
line-height: 0.5;
}
.widget_storevilla_column_product_widget_area .column-wrap .col-product-area-one .block-item-title h3 a {
color: #000;
display: block;
font-size: 18px;
font-weight: 500;
line-height: 1.2;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.widget_storevilla_column_product_widget_area .column-wrap .col-product-area-one .block-item-title h3 a:hover {
color: #420537;
}
.widget_storevilla_column_product_widget_area .column-wrap .col-product-area-one .product-price-wrap {
margin-left: 0;
margin-right: 4%;
float: right;
}
.widget_storevilla_column_product_widget_area .column-wrap .col-product-area-one span.price span {
color: #000;
/*font-family: Open Sans;*/
font-size: 14px;
font-weight: 600;
}
.widget_storevilla_column_product_widget_area .column-wrap .col-product-area-one span.price del span {
font-weight: 300;
}
/*
================================================
widget-area css for widget_storevilla_column_product_widget_area
================================================
*/
.widget-area .widget_storevilla_column_product_widget_area .column-wrap {
background: none;
padding: 0;
}
.widget-area .widget_storevilla_column_product_widget_area .column-wrap .col-product-area-one {
border-right: none;
float: none;
width: 100%;
padding: 10px;
}
/*
button.product_type_external css
*/
/*
wishlist css
*/
.add-to-wishlist-custom img.ajax-loading {
visibility: hidden;
}
/*
========================================
all tabs css
========================================
*/
/*----- Tabs -----*/
.svpro-tabs {
width:100%;
display:inline-block;
}
/*----- Tab Links -----*/
/* Clearfix */
.svpro-tab-links:after {
display:block;
clear:both;
content:'';
}
.svpro-tab-links li {
margin:0px 5px;
float:right;
list-style:none;
}
/*هذا الكود يحدد تنسيق الروابط (Links) داخل قائمة علامات التبويب (Tab Links) في عنصر svpro-tab-links.
لتحويل هذا الكود ليناسب ملف اللغة العربية (RTL)، يجب عكس خاصية نصف قطر الحدود الأفقية (Border Radius) التي تحدد الزوايا الدائرية.*/
.svpro-tab-links a {
padding: 9px 15px;
display: inline-block;
border-radius: 3px 3px 0px 0px; /* القيمة تبقى كما هي للحفاظ على تقويس الزوايا العلوية */
background: #7FB5DA;
font-size: 16px;
color: #4c4c4c;
}
.svpro-tab-links a:hover {
background:#a7cce5;
text-decoration:none;
}
/* li.active a, li.active a:hover {
background:#fff;
color:#4c4c4c;
} */
/*----- Content of Tabs -----*/
/*هذا الكود يحدد تنسيق محتوى علامة التبويب (svpro-tab-content)، بما في ذلك الحشوة، ونصف قطر الحدود، والظل، ولون الخلفية.*/
.svpro-tab-content {
padding: 15px;
border-radius: 3px;
/* عكس الإزاحة الأفقية من -1px إلى 1px */
box-shadow: 1px 1px 1px rgba(0,0,0,0.15);
background: #fff;
}
.svpro-tab {
display:none;
}
.svpro-tab.active {
display:block;
}
/*
ajax loader css
*/
.tabs-ajax-loader {
background-image: url('images/preloader/grid.gif');
}
/*
===============================
tab-styletwo css
===============================
*/
.tab-styletwo .svpro-tabs ul.svpro-tab-links {
float: right;
border-bottom: 1px solid #e2e2e5;
width: 100%;
}
/*هذا الكود يحدد تنسيق العنصر الحاوي لأزرار التنقل (lSAction)، ووظيفته الرئيسية هي توسيط هذا الحاوية عمودياً في منتصف العنصر الأب (svpro-tab-content) باستخدام مزيج من top: 50%; و transform: translateY(-50%);*/
.tab-styletwo .svpro-tab-content .lSAction {
width: 100%;
position: absolute;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}
/*هذا الكود يحدد التنسيق العام لأزرار التنقل (السابق والتالي) الخاصة بعرض الشرائح (.lSAction a). معظم الخصائص هنا غير اتجاهية، باستثناء محاذاة النص التي يجب مراجعتها في سياق اللغة العربية (RTL).*/
.tab-styletwo .svpro-tab-content .lSAction a {
width: 40px;
height: 40px;
background: rgba(0,0,0,0.6);
color: #fff;
display: inline-block;
/* المحاذاة للمركز تبقى كما هي */
text-align: center;
cursor: pointer;
font-size: 24px;
position: absolute;
transition: all ease 0.5s;
-webkit-transition: all ease 0.5s;
}
/*هذا الكود يحدد تنسيق زر التنقل السابق (lSPrev) في أحد مكونات عرض الشرائح، ويتم إخفاؤه افتراضيًا في سياق LTR.*/
.tab-styletwo .svpro-tab-content .lSAction a.lSPrev {
/* عكس تحديد الموضع الأفقي */
left: -40px;
right: auto;
opacity: 0;
visibility: hidden;
/* خصائص الانتقال غير اتجاهية */
transition: all ease 0.5s;
-webkit-transition: all ease 0.5s;
}
/*هذا الكود يحدد تنسيق زر التنقل التالي (lSNext) في أحد مكونات عرض الشرائح أو القوائم الدائرية، ويتم إخفاؤه افتراضيًا في سياق LTR.*/
.tab-styletwo .svpro-tab-content .lSAction a.lSNext {
/* عكس تحديد الموضع من اليمين إلى اليسار */
left: -40px;
right: auto; /* إلغاء القيمة القديمة right: -40px */
opacity: 0;
visibility: hidden;
}
/*هذا الكود يحدد تأثير ظهور زر التنقل السابق (lSPrev) عند مرور مؤشر الفأرة على المحتوى الحاوي له (svpro-tab-content:hover).*/
.tab-styletwo .svpro-tab-content:hover .lSAction a.lSPrev {
opacity: 1;
visibility: visible;
/* عكس تحديد الموضع من اليسار إلى اليمين */
right: 0;
left: auto; /* لضمان إلغاء أي قيمة سابقة لـ left */
transition: all ease 0.5s;
-webkit-transition: all ease 0.5s;
}
/*هذا الكود يحدد تأثير ظهور زر التنقل التالي (lSNext) عند مرور مؤشر الفأرة على المحتوى الحاوي له (svpro-tab-content:hover).*/
.tab-styletwo .svpro-tab-content:hover .lSAction a.lSNext {
opacity: 1;
visibility: visible;
/* عكس تحديد الموضع من اليمين إلى اليسار */
left: 0;
right: auto; /* لضمان إلغاء أي قيمة سابقة لـ right */
transition: all ease 0.5s;
-webkit-transition: all ease 0.5s;
}
/*هذا الكود يحدد تنسيق عناصر قائمة علامات التبويب (li) داخل الحاوية (svpro-tab-links).*/
.tab-styletwo .svpro-tabs ul.svpro-tab-links li {
padding: 0 20px;
position: relative;
text-align: center;
margin: 0;
}
.tab-styletwo .svpro-tabs ul.svpro-tab-links li:before {
position: absolute;
content: '';
height: 15px;
width: 1px;
background: #dddddd;
left: 0;
top: 7px;
}
.tab-styletwo .svpro-tabs ul.svpro-tab-links li:first-child:before {
background: none;
}
.tab-styletwo .svpro-tabs ul.svpro-tab-links li:first-child {
padding-right: 0;
}
/*هذا الكود يحدد تنسيق الروابط (a) داخل عناصر قائمة علامات التبويب.*/
.tab-styletwo .svpro-tabs ul.svpro-tab-links li a {
background: none;
font-size: 20px;
text-transform: uppercase;
color: #666666;
/*font-family: Open Sans;*/
font-weight: 300;
position: relative;
padding: 0 0 9px;
transition: all ease 0.5s;
-webkit-transition: all ease 0.5s;
}
.tab-styletwo .svpro-tabs ul.svpro-tab-links li.active a:before {
content: '';
background: #420537;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
right: 0;
position: absolute;
}
.tab-styletwo .svpro-tabs ul.svpro-tab-links li a:before {
content: '';
background: #420537;
width: 0;
height: 2px;
bottom: 0;
left: 0;
right: 0;
position: absolute;
transition: all ease 0.7s;
-webkit-transition: all ease 0.7s;
}
/*هذا الكود يحدد تأثير تغيير عرض العنصر الزائف (:before) عند مرور مؤشر الفأرة على رابط علامة التبويب (a:hover). غالباً ما يُستخدم هذا العنصر الزائف كـ خط سفلي متحرك (Underline) أو مؤشر.*/
.tab-styletwo .svpro-tabs ul.svpro-tab-links li a:hover:before {
width: 100%;
transition: all ease 0.7s;
-webkit-transition: all ease 0.7s;
}
.tab-styletwo .svpro-tab-content {
box-shadow: none;
padding: 20px 0;
}
.tab-styletwo .svpro-tab-content ul.tabs-product > li {
padding: 20px 10px 10px;
border: 1px solid #dddddd;
overflow: hidden;
}
.homepage-middle-wrap .tab-styletwo .svpro-tab-content ul.tabs-product > li.active {
margin-right: 0 !important;
}
.tab-styletwo .svpro-tab-content ul.tabs-product > li .item-img {
margin-bottom: 5px;
position: relative;
}
.tab-styletwo .svpro-tab-content ul.tabs-product > li .item-img a {
display: block;
overflow: hidden;
}
/*
* هذا الكود يحدد تنسيق صور المنتجات داخل قائمة علامات التبويب، ووظيفته الأساسية هي تفعيل تسريع الأجهزة (Hardware Acceleration) وتحديد خصائص الانتقال (Transition) الخاصة بـ transform.*/
.tab-styletwo .svpro-tab-content ul.tabs-product > li .item-img a img {
transform: translateZ(0px);
-webkit-transform: translateZ(0px);
transition-property: transform;
transition: all ease 0.3s;
-webkit-transition: all ease 0.3s;
}
/*هذا الكود يحدد تأثير التكبير (Zoom) على صورة المنتج عند مرور مؤشر الفأرة فوقها (حالة :hover).*/
.tab-styletwo .svpro-tab-content ul.tabs-product > li .item-img a:hover img {
transform: scale(1.1);
-webkit-transform: scale(1.1);
transition: all ease 0.3s;
-webkit-transition: all ease 0.3s;
}
.tab-styletwo .svpro-tab-content ul.tabs-product li .block-item-title {
text-align: center !important;
/*font-family: Lato;*/
}
.tab-styletwo .svpro-tab-content ul.tabs-product li .block-item-title span {
font-size: 10px;
text-transform: uppercase;
display: block;
margin-bottom: 10px;
}
.tab-styletwo .svpro-tab-content ul.tabs-product li .block-item-title span a {
color: #9e9e9e;
}
.tab-styletwo .svpro-tab-content ul.tabs-product li .block-item-title h3 {
font-size: 18px;
/*font-family: Open Sans;*/
text-transform: uppercase;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 0;
}
.tab-styletwo .svpro-tab-content ul.tabs-product li .block-item-title h3 a {
color: #000;
transition: all ease 0.3s;
-webkit-transition: all ease 0.3s;
}
.tab-styletwo .svpro-tab-content ul.tabs-product li .block-item-title h3 a:hover,
.tab-styletwo .svpro-tab-content ul.tabs-product li .block-item-title span a:hover {
color: #420537;
transition: all ease 0.3s;
-webkit-transition: all ease 0.3s;
}
.tab-styletwo .svpro-tab-content ul.tabs-product li .product-button-wrap {
margin-bottom: 5px;
}
.tab-styletwo .svpro-tab-content ul.tabs-product li .product-price-wrap {
text-align: center;
}
.tab-styletwo .svpro-tab-content ul.tabs-product li .product-price-wrap .price {
padding: 5px 0 10px;
}
.tab-styletwo .svpro-tab-content ul.tabs-product li ul.add-to-links {
padding-right: 0;
}
.tab-styletwo .svpro-tab-content ul.tabs-product li ul.add-to-links li {
vertical-align: middle;
}
.tab-styletwo .svpro-tab-content ul.tabs-product li ul.add-to-links li .yith-wcwl-add-button {
position: relative;
display: block;
}
.tab-styletwo .svpro-tab-content ul.tabs-product li ul.add-to-links li .yith-wcwl-add-button img.ajax-loading {
position: absolute;
right: auto;
left: -20px;
top: 0;
}
/*هذا الكود يحدد تنسيق أزرار الإضافة إلى السلة (add_to_cart_button و ما شابهها) داخل قائمة المنتجات. يتم إخفاء هذه الأزرار افتراضيًا ويتم وضعها خارج الحافة اليسرى للعنصر الحاوي (بسبب left: -107%;).*/
.tab-styletwo .svpro-tab-content ul.tabs-product li .item-img a.add_to_cart_button,
.tab-styletwo .svpro-tab-content ul.tabs-product li .item-img a.added_to_cart,
.tab-styletwo .svpro-tab-content ul.tabs-product li .item-img a.product_type_grouped {
position: absolute;
width: 100%;
bottom: 0;
background: rgba(0,145,213,0.6);
padding: 8px 10px;
color: #fff;
font-size: 13px;
opacity: 0;
visibility: hidden;
/* عكس تحديد الموضع من اليسار إلى اليمين */
right: -107%;
left: auto; /* إلغاء القيمة القديمة left: -107%; */
transition: all ease 0.5s;
-webkit-transition: all ease 0.5s;
text-align: center;
}
.tab-styletwo .svpro-tab-content ul.tabs-product li .item-img a.added_to_cart,
.tab-styletwo .svpro-tab-content ul.tabs-product li .item-img a.product_type_grouped {
background: rgba(255,0,0,0.7);
left: auto;
right: 0;
opacity: 1;
visibility: visible;
}
.tab-styletwo .svpro-tab-content ul.tabs-product li .item-img a.added_to_cart:hover,
.tab-styletwo .svpro-tab-content ul.tabs-product li .item-img a.product_type_grouped:hover {
background: rgb(255,0,0);
}
.tab-styletwo .svpro-tab-content ul.tabs-product li .item-img a.add_to_cart_button.added {
display: none;
}
.tab-styletwo .svpro-tab-content ul.tabs-product li .item-img:hover a.add_to_cart_button,
.tab-styletwo .svpro-tab-content ul.tabs-product li .item-img:hover a.product_type_grouped {
opacity: 1;
visibility: visible;
left: auto;
right: 0;
transition: all ease 0.5s;
-webkit-transition: all ease 0.5s;
}
.tab-styletwo .svpro-tab-content ul.tabs-product li .item-img a.add_to_cart_button:hover {
background: rgb(0,145,213);
}
/*
==========================================
end of tab-styletwo
==========================================
*/
/*
===============================
tab-styleone css
===============================
*/
.tab-styleone .svpro-tabs {
text-align: left;
border-bottom: 1px solid #cfcfcf;
position: relative;
min-height: 48px;
margin-bottom: 15px;
}
.tab-styleone .svpro-tabs ul.svpro-tab-links {
position: absolute;
right: auto;
left: 0;
top: 2px;
}
.tab-styleone .svpro-tabs ul.svpro-tab-links li {
display: inline-block;
float: none;
margin: 0;
}
.tab-styleone .svpro-tabs ul.svpro-tab-links li a {
background: none;
font-size: 18px;
text-transform: capitalize;
color: #333333;
/*font-family: Open Sans;*/
border-radius: 0;
border-color: none;
font-weight: 400;
}
/*هذا الكود يحدد تنسيق رابط علامة التبويب النشطة (li.active a).*/
.tab-styleone .svpro-tabs ul.svpro-tab-links li.active a {
background: #fff;
border: 1px solid #cfcfcf;
color: #420537
/* تبقى القيمة كما هي لتقويس الزوايا العلوية فقط */
border-radius: 7px 7px 0 0;
border-bottom: none;
}
.tab-styleone .svpro-tabs ul.svpro-tab-links li:hover a {
color: #420537;
}
.tab-styleone .svpro-tab-content {
box-shadow: none;
padding: 0;
border: 1px solid #eeeeee;
border-radius: 0 !important;
position: relative;
overflow: hidden;
}
.tab-styleone .svpro-tab-content .storevillaprosction {
position: absolute;
z-index: 9;
}
/*هذا الكود يحدد تنسيق عناصر قائمة المنتجات (li) داخل محتوى علامة التبويب، ويتضمن خصائص اتجاهية أفقية مثل الحدود، والهوامش، والحشوات.*/
.tab-styleone .svpro-tab-content .tabs-product-area ul.tabs-product > li {
/* عكس الحد من اليسار إلى اليمين */
border-right: 1px solid #eeeeee;
border-left: none; /* إلغاء الحد القديم */
/* عكس الهامش من اليمين إلى اليسار */
margin-left: 9px !important;
margin-right: 0 !important; /* إلغاء الهامش القديم */
/* عكس الحشوة الأفقية (اليمين واليسار) */
/* الأصل: (أعلى 30، يمين 10، أسفل 10، يسار 20) */
/* RTL: (أعلى 30، يسار 10، أسفل 10، يمين 20) -> نستخدم الترتيب الجديد */
padding: 30px 20px 10px 10px;
}
.tab-styleone .svpro-tab-content .tabs-product-area ul.tabs-product li .item-img {
margin-bottom: 10px;
}
.tab-styleone .svpro-tab-content .tabs-product-area ul.tabs-product > li.lslide.active {
border-right: none;
padding-left: 0;
padding-right: 22px;
}
.tab-styleone .svpro-tab-content ul.tabs-product li .block-item-title {
text-align: center !important;
/*font-family: Lato;*/
}
.tab-styleone .svpro-tab-content ul.tabs-product li .block-item-title h3 {
font-size: 18px;
font-family: Open Sans;
text-transform: uppercase;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.tab-styleone .svpro-tab-content ul.tabs-product li .block-item-title h3 a {
color: #000;
transition: all ease 0.3s;
-webkit-transition: all ease 0.3s;
}
.tab-styleone .svpro-tab-content ul.tabs-product li .block-item-title span {
font-size: 10px;
text-transform: uppercase;
display: block;
margin-bottom: 5px;
}
.tab-styleone .svpro-tab-content ul.tabs-product li .block-item-title span a {
color: #9e9e9e;
}
.tab-styleone .svpro-tab-content ul.tabs-product li .block-item-title h3 a:hover,
.tab-styleone .svpro-tab-content ul.tabs-product li .block-item-title span a:hover {
color: #420537;
transition: all ease 0.3s;
-webkit-transition: all ease 0.3s;
}
.tab-styleone .svpro-tab-content ul.tabs-product li .product-button-wrap {
margin-bottom: 5px;
}
.tab-styleone .svpro-tab-content ul.tabs-product li .product-price-wrap {
text-align: center;
}
.tab-styleone .svpro-tab-content ul.tabs-product li .product-price-wrap .price {
padding: 5px 0 10px;
}
.tab-styleone .svpro-tab-content ul.tabs-product li ul.add-to-links {
padding-right: 0;
}
.tab-styleone .svpro-tab-content ul.tabs-product li ul.add-to-links li {
vertical-align: middle;
}
.tab-styleone .svpro-tab-content ul.tabs-product li ul.add-to-links li .yith-wcwl-add-button {
position: relative;
display: block;
}
.tab-styleone .svpro-tab-content ul.tabs-product li ul.add-to-links li .yith-wcwl-add-button img.ajax-loading {
position: absolute;
right: auto;
left: -20px;
top: 0;
}
/*هذا الكود يحدد تنسيق العنصر الحاوي لأزرار التنقل (lSAction)، ووظيفته الرئيسية هي توسيط هذه الحاوية عمودياً في منتصف العنصر الأب (svpro-tab-content) باستخدام مزيج من top: 50%; و transform: translateY(-50%);.*/
.tab-styleone .svpro-tab-content .lSAction {
width: 100%;
position: absolute;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}
.tab-styleone .svpro-tab-content .lSAction a {
width: 40px;
height: 40px;
background: rgba(0,0,0,0.6);
color: #fff;
display: inline-block;
text-align: center;
cursor: pointer;
font-size: 24px;
position: absolute;
transition: all ease 0.5s;
-webkit-transition: all ease 0.5s;
}
.tab-styleone .svpro-tab-content .lSAction a:hover {
background: #000;
transition: all ease 0.5s;
-webkit-transition: all ease 0.5s;
}
.tab-styleone .svpro-tab-content .lSAction a.lSPrev {
left: auto;
right: -40px;
opacity: 0;
visibility: hidden;
transition: all ease 0.5s;
-webkit-transition: all ease 0.5s;
}
.tab-styleone .svpro-tab-content .lSAction a.lSNext {
right: auto;
left: -40px;
opacity: 0;
visibility: hidden;
}
.tab-styleone .svpro-tab-content:hover .lSAction a.lSPrev {
opacity: 1;
visibility: visible;
left: auto;
right: 0;
transition: all ease 0.5s;
-webkit-transition: all ease 0.5s;
}
.tab-styleone .svpro-tab-content:hover .lSAction a.lSNext {
opacity: 1;
visibility: visible;
right: auto;
left: 0;
transition: all ease 0.5s;
-webkit-transition: all ease 0.5s;
}
/*
==========================================
end of tab-styleone
==========================================
*/
/*
===============================
tab-stylethree css
===============================
*/
.tab-stylethree .svpro-tabs {
text-align: left;
position: relative;
margin-bottom: 20px;
}
.tab-stylethree .svpro-tabs ul.svpro-tab-links,
.tab-stylethree .storevillaprosction {
display: inline-block;
vertical-align: middle;
margin-left: 0;
margin-right: 20px;
}
.tab-stylethree .svpro-tabs ul.svpro-tab-links li {
display: inline-block;
float: none;
margin: 0 -3px;
position: relative;
text-align: center;
}
/*هذا الكود يحدد تنسيق العنصر الزائف (:before) لعناصر قائمة علامات التبويب (li) في تصميم مائل (skew(-18deg)). هذا العنصر الزائف هو الذي يعطي التبويبات مظهرها المائل (على شكل شبه منحرف)، ويستخدم خاصية left: 0; لتحديد موضع بدايته.*/
.tab-stylethree .svpro-tabs ul.svpro-tab-links li:before {
position: absolute;
content: ''; /* تم دمج السطرين المكررين */
width: 100%;
height: 100%;
display: inline-block;
background: #fff;
/* عكس الميلان من -18deg إلى 18deg */
-webkit-transform: skew(18deg);
-moz-transform: skew(18deg);
-o-transform: skew(18deg);
transform: skew(18deg);
z-index: -1;
/* عكس الموضع من اليسار إلى اليمين */
right: 0;
left: auto; /* إلغاء القيمة القديمة */
border: 1px solid #efefef;
transition: all ease 0.3s;
-webkit-transition: all ease 0.3s;
}
.tab-stylethree .svpro-tabs ul.svpro-tab-links li.active:before,
.tab-stylethree .svpro-tabs ul.svpro-tab-links li:hover:before {
background: #420537;
transition: all ease 0.3s;
-webkit-transition: all ease 0.3s;
}
.tab-stylethree .svpro-tabs ul.svpro-tab-links li.active a,
.tab-stylethree .svpro-tabs ul.svpro-tab-links li:hover a {
color: #fff;
}
.tab-stylethree .svpro-tabs ul.svpro-tab-links li a {
background: none;
font-size: 12px;
text-transform: uppercase;
color: #666666;
/*font-family: Open Sans;*/
border-radius: 0;
border-color: none;
font-weight: 400;
display: block;
padding: 12px 15px;
}
.tab-stylethree .lSSlideOuter {
position: relative;
top: 0;
height: 100%;
}
.tab-stylethree .lSAction a {
background: rgb(0,145,213);
height: 100%;
top: 16px;
text-align: center;
}
.tab-stylethree .lSSlideOuter:hover .lSAction a.lSPrev {
left: auto;
right: 0;
}
.tab-stylethree .lSSlideOuter:hover .lSAction a.lSNext {
right: auto;
left: 0;
}
.tab-stylethree .lSAction a.lSPrev {
left: auto;
right: -32px;
transition: all ease 0.3s;
-webkit-transition: all ease 0.3s;
}
.tab-stylethree .lSAction a.lSNext {
right: auto;
left: -32px;
transition: all ease 0.3s;
-webkit-transition: all ease 0.3s;
}
.tab-stylethree .lSAction a .fa {
font-size: 30px;
color: #fff;
line-height: 15;
}
.tab-stylethree .svpro-tab-content {
box-shadow: none;
padding: 0;
border: 1px solid #eeeeee;
border-radius: 0 !important;
position: relative;
overflow: hidden;
}
.tab-stylethree .svpro-tab-content .tabs-product-area ul.tabs-product > li {
border-left: none;
border-right: 1px solid #eeeeee;
margin-right: 0;
margin-left: 9px !important;
padding: 40px 20px 10px 10px;
}
.tab-stylethree .svpro-tab-content .tabs-product-area ul.tabs-product li .block-item-title {
margin-top: 10px;
}
.tab-stylethree .svpro-tab-content .tabs-product-area ul.tabs-product > li.lslide.active {
border-right: none;
padding-left: 0;
padding-right: 22px;
}
.tab-stylethree .svpro-tab-content ul.tabs-product li .block-item-title {
text-align: center !important;
/*font-family: Lato;*/
}
.tab-stylethree .svpro-tab-content ul.tabs-product li .block-item-title h3 {
font-size: 18px;
/*font-family: Open Sans;*/
text-transform: uppercase;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.tab-stylethree .svpro-tab-content ul.tabs-product li .block-item-title h3 a {
color: #000;
transition: all ease 0.3s;
-webkit-transition: all ease 0.3s;
}
.tab-stylethree .svpro-tab-content ul.tabs-product li .block-item-title span {
font-size: 10px;
text-transform: uppercase;
display: block;
margin-bottom: 5px;
}
.tab-stylethree .svpro-tab-content ul.tabs-product li .block-item-title span a {
color: #9e9e9e;
}
.tab-stylethree .svpro-tab-content ul.tabs-product li .block-item-title h3 a:hover,
.tab-stylethree .svpro-tab-content ul.tabs-product li .block-item-title span a:hover {
color: #420537;
transition: all ease 0.3s;
-webkit-transition: all ease 0.3s;
}
.tab-stylethree .svpro-tab-content ul.tabs-product li .product-price-wrap {
text-align: center;
}
.tab-stylethree .svpro-tab-content ul.tabs-product li .item-img .box-hover {
position: absolute;
width: 100%;
height: 100%;
top: 0;
overflow: hidden;
}
.tab-stylethree .svpro-tab-content ul.tabs-product li .item-img .box-hover ul.add-to-links {
display: block;
text-align: center;
border-top: none;
padding: 0;
padding-right: 0;
top: 40%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
position: absolute;
width: 100%;
}
.tab-stylethree .svpro-tab-content ul.tabs-product li .item-img .box-hover ul.add-to-links li a {
font-size: 0;
color: #fff;
display: block;
text-transform: capitalize;
background: none;
height: 40px;
position: absolute;
margin: 0;
}
.tab-stylethree .svpro-tab-content ul.tabs-product li .item-img .box-hover ul.add-to-links li a.link-quickview {
opacity: 0;
visibility: hidden;
left: auto;
right: -15%;
transition: all ease 0.6s;
-webkit-transition: all ease 0.6s;
}
.tab-stylethree .svpro-tab-content ul.tabs-product li .item-img:hover .box-hover ul.add-to-links li a.link-quickview {
left: auto;
right: 35%;
opacity: 1;
visibility: visible;
transition: all ease 0.6s;
-webkit-transition: all ease 0.6s;
}
/*هذا الكود يحدد تنسيق رابط "الإضافة إلى قائمة الأمنيات" (link-wishlist) داخل قائمة المنتجات. يتم إخفاء هذا الزر افتراضيًا ويتم وضعه خارج الحافة اليمنى للعنصر الحاوي (بسبب right: -15%;).*/
.tab-stylethree .svpro-tab-content ul.tabs-product li .item-img .box-hover ul.add-to-links li a.link-wishlist {
opacity: 0;
visibility: hidden;
/* عكس تحديد الموضع من اليمين إلى اليسار */
left: -15%;
right: auto; /* إلغاء القيمة القديمة right: -15%; */
transition: all ease 0.6s;
-webkit-transition: all ease 0.6s;
}
.tab-stylethree .svpro-tab-content ul.tabs-product li .item-img:hover .box-hover ul.add-to-links li a.link-wishlist {
right: auto;
left: 48%;
opacity: 1;
visibility: visible;
transition: all ease 0.6s;
-webkit-transition: all ease 0.6s;
}
.tab-stylethree .svpro-tab-content ul.tabs-product li .item-img .box-hover ul.add-to-links li a.link-quickview:before,
.tab-stylethree .svpro-tab-content ul.tabs-product li .item-img .box-hover ul.add-to-links li a.link-wishlist:before {
background: rgb(0,145,213);
height: 40px;
width: 40px;
text-align: center;
transition: all ease 0.3s;
-webkit-transition: all ease 0.3s;
line-height: 40px;
}
.tab-stylethree .svpro-tab-content ul.tabs-product li .item-img .box-hover ul.add-to-links li a.link-quickview:hover:before,
.tab-stylethree .svpro-tab-content ul.tabs-product li .item-img .box-hover ul.add-to-links li a.link-wishlist:hover:before {
background: rgba(0,145,213,0.6);
transition: all ease 0.3s;
-webkit-transition: all ease 0.3s;
}
.tab-stylethree .svpro-tab-content ul.tabs-product li .item-img .box-hover ul.add-to-links li a.link-quickview:before {
position: absolute;
content: '\f002';
font-weight: 300;
/*font-family: FontAwesome;*/
left: auto;
right: 0;
font-size: 15px;
display: block;
}
.tab-stylethree .svpro-tab-content ul.tabs-product li .item-img .box-hover ul.add-to-links li a.link-wishlist:before {
position: absolute;
content: '\f08a';
font-weight: 300;
/*font-family: FontAwesome;*/
left: auto;
right: 0;
font-size: 15px;
display: block;
}
.tab-stylethree .svpro-tab-content ul.tabs-product li ul.add-to-links {
display: none;
}
.tab-stylethree .svpro-tab-content ul.tabs-product li ul.add-to-links li a.link-quickview:before,
.tab-stylethree .svpro-tab-content ul.tabs-product li ul.add-to-links li a.link-wishlist:before {
display: none;
}
.tab-stylethree .svpro-tab-content ul.tabs-product li ul.add-to-links .add-to-wishlist-custom img.ajax-loading {
display: none;
}
.tab-stylethree .svpro-tab-content ul.tabs-product li .product-price-wrap .price {
padding: 0;
}
/*
===============================
end css
===============================
*/
/*
=================================================
widget_storevilla_pro_offer_deal_widget_area css
=================================================
*/
section.widget_storevilla_pro_offer_deal_widget_area {
padding: 0;
}
section.widget_storevilla_pro_offer_deal_widget_area .sp-productlist-wrap {
background: #f6f6f6;
}
section.widget_storevilla_pro_offer_deal_widget_area .offer-product-wrap {
float: right;
width: 48%
}
section.widget_storevilla_pro_offer_deal_widget_area .offer-product-wrap .item-img,
section.widget_storevilla_pro_offer_deal_widget_area .offer-product-wrap .fl-pcountdown-cnt {
float: right;
}
section.widget_storevilla_pro_offer_deal_widget_area .offer-product-wrap .fl-pcountdown-cnt {
background: #420537;
height: 100%;
width: 15%;
text-align: center;
}
section.widget_storevilla_pro_offer_deal_widget_area .offer-product-wrap .fl-pcountdown-cnt ul li {
color: #fff;
/*font-family: Open Sans;*/
font-size: 14px;
padding: 20px 0;
line-height: 1;
position: relative;
}
section.widget_storevilla_pro_offer_deal_widget_area .offer-product-wrap .fl-pcountdown-cnt ul li:first-child {
padding: 0;
}
section.widget_storevilla_pro_offer_deal_widget_area .offer-product-wrap .fl-pcountdown-cnt ul li:first-child:before,
section.widget_storevilla_pro_offer_deal_widget_area .offer-product-wrap .fl-pcountdown-cnt ul li:last-child:before {
background: none;
}
section.widget_storevilla_pro_offer_deal_widget_area .offer-product-wrap .fl-pcountdown-cnt ul li:before {
content: '';
position: absolute;
background: #fff;
height: 1px;
width: 80%;
bottom: 0;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}
section.widget_storevilla_pro_offer_deal_widget_area .offer-product-wrap .fl-pcountdown-cnt ul li span {
font-size: 26px;
margin-bottom: 5px;
display: inline-block;
}
section.widget_storevilla_pro_offer_deal_widget_area .offer-product-wrap .fl-pcountdown-cnt ul li .time-clock {
font-size: 30px;
border-bottom: 1px solid #fff;
padding: 30px 0;
line-height: 1;
}
section.widget_storevilla_pro_offer_deal_widget_area .offer-product-wrap .fl-pcountdown-cnt ul li .time-clock .fa-clock-o:before {
padding: 2px;
}
section.widget_storevilla_pro_offer_deal_widget_area .offer-product-wrap .item-img {
width: 84%;
overflow: hidden;
}
section.widget_storevilla_pro_offer_deal_widget_area .offer-product-wrap .item-img .product-image {
display: block;
vertical-align: middle;
}
section.widget_storevilla_pro_offer_deal_widget_area .offer-product-wrap .item-img img {
width: 100%;
display: block;
vertical-align: top;
}
section.widget_storevilla_pro_offer_deal_widget_area .offer-product-info-wrap {
float: left;
width: 50%;
padding: 40px 10px 5px 40px ;
line-height: 1.2;
}
section.widget_storevilla_pro_offer_deal_widget_area .offer-product-info-wrap .block-item-title {
/*font-family: Lato;*/
}
section.widget_storevilla_pro_offer_deal_widget_area .offer-product-info-wrap .block-item-title span.mini-title {
text-transform: uppercase;
font-size: 16px;
color: #9e9e9e;
margin-bottom: 20px;
display: block;
}
section.widget_storevilla_pro_offer_deal_widget_area .offer-product-info-wrap .block-item-title h3 {
font-size: 30px;
font-weight: 700;
/*font-family: Lato;*/
text-transform: capitalize;
}
section.widget_storevilla_pro_offer_deal_widget_area .offer-product-info-wrap .block-item-title h3 a {
color: #000;
}
section.widget_storevilla_pro_offer_deal_widget_area .offer-product-info-wrap .offer-deal {
font-size: 14px;
color: #666666;
line-height: 1.5;
margin-bottom: 35px;
}
section.widget_storevilla_pro_offer_deal_widget_area .offer-product-info-wrap .product-button-wrap {
width: 300px;
margin-bottom: 25px;
}
section.widget_storevilla_pro_offer_deal_widget_area .offer-product-info-wrap .product-button-wrap a.villa-details {
float: right;
margin-left: 0;
margin-right: 15px;
}
section.widget_storevilla_pro_offer_deal_widget_area .offer-product-info-wrap .offer-wrap {
border-top: 1px solid #d8d8d8;
border-bottom: 1px solid #d8d8d8;
padding: 10px 0;
}
section.widget_storevilla_pro_offer_deal_widget_area .offer-product-info-wrap .offer-wrap span {
font-size: 26px;
}
section.widget_storevilla_pro_offer_deal_widget_area .offer-product-info-wrap .offer-deal-links {
padding-top: 15px;
padding-left: 0;
padding-right: 30px;
}
section.widget_storevilla_pro_offer_deal_widget_area .offer-product-info-wrap .offer-deal-links ul li {
display: inline-block;
vertical-align: middle;
font-size: 12px;
/*font-family: Open Sans;*/
position: relative;
text-transform: uppercase;
margin-right: 0;
margin-left: 40px;
}
section.widget_storevilla_pro_offer_deal_widget_area .offer-product-info-wrap .offer-deal-links ul li .yith-wcwl-add-button img {
position: absolute;
}
section.widget_storevilla_pro_offer_deal_widget_area .offer-product-info-wrap .offer-deal-links ul li a {
color: #666;
position: relative;
transition: all ease 0.3s;
-webkit-transition: all ease 0.3s;
}
section.widget_storevilla_pro_offer_deal_widget_area .offer-product-info-wrap .offer-deal-links ul li a.link-quickview:before {
content: '\f002';
position: absolute;
right: -15px;
left: auto;
/*font-family: FontAwesome;*/
}
section.widget_storevilla_pro_offer_deal_widget_area .offer-product-info-wrap .offer-deal-links ul li a.add_to_wishlist:before {
content: '\f08a';
position: absolute;
left: auto;
right: -15px;
/*font-family: FontAwesome;*/
}
section.widget_storevilla_pro_offer_deal_widget_area .offer-product-info-wrap .offer-deal-links ul li a.link-quickview:hover,
section.widget_storevilla_pro_offer_deal_widget_area .offer-product-info-wrap .offer-deal-links ul li a.add_to_wishlist:hover {
color: #420537;
transition: all ease 0.3s;
-webkit-transition: all ease 0.3s;
}
/*
===============================
end css
===============================
*/
/*
======================================================
widget_storevilla_cat_vertical_tabs_products_area css
======================================================
*/
.widget_storevilla_cat_vertical_tabs_products_area .tab-wrapper {
float: right;
width: 75%;
}
.widget_storevilla_cat_vertical_tabs_products_area .svpor-vertical-wrap {
width: 67%;
}
.widget_storevilla_cat_vertical_tabs_products_area .tab-wrapper {
border: 1px solid #eeeeee;
width: 75%;
}
.widget_storevilla_cat_vertical_tabs_products_area .vertical-tabs,
.widget_storevilla_cat_vertical_tabs_products_area .svpor-vertical-wrap {
float: right;
}
.widget_storevilla_cat_vertical_tabs_products_area .vertical-tabs {
width: 33%;
border-right: none;
border-left: 1px solid #eeeeee;
min-height: 518px;
height: 100%;
}
.widget_storevilla_cat_vertical_tabs_products_area .vertical-tabs .block-title {
width: 100%;
text-align: center;
padding: 35px 25px;
}
.widget_storevilla_cat_vertical_tabs_products_area .vertical-tabs .block-title span {
/*font-family: Open Sans;*/
font-weight: 600;
color: #333333;
text-transform: uppercase;
font-size: 18px;
}
.widget_storevilla_cat_vertical_tabs_products_area .vertical-tabs ul.vertical-tab-links {
width: 100%;
display: inline-block;
}
.widget_storevilla_cat_vertical_tabs_products_area .vertical-tabs ul.vertical-tab-links li a {
/*font-family: Lato;*/
font-size: 16px;
color: #666666;
border-bottom: 1px solid #eeeeee;
padding: 10px 25px;
display: block;
transition: all ease 0.3s;
-webkit-transition: all ease 0.3s;
}
.widget_storevilla_cat_vertical_tabs_products_area .vertical-tabs ul.vertical-tab-links li.active a,
.widget_storevilla_cat_vertical_tabs_products_area .vertical-tabs ul.vertical-tab-links li:hover a {
background: #420537;
color: #fff;
transition: all ease 0.3s;
-webkit-transition: all ease 0.3s;
}
.widget_storevilla_cat_vertical_tabs_products_area .vertical-tabs ul.vertical-tab-links li:first-child a {
border-top: 1px solid #eeeeee;
}
.widget_storevilla_cat_vertical_tabs_products_area .svpor-vertical-wrap ul.vertical-tabs-product > li {
float: right;
width: 33.33%;
border-right: none;
border-left: 1px solid #eeeeee;
min-height: 259px;
height: 100%;
border-bottom: 1px solid #eeeeee;
cursor: pointer;
}
.widget_storevilla_cat_vertical_tabs_products_area .svpor-vertical-wrap ul.vertical-tabs-product > li:nth-child(3),
.widget_storevilla_cat_vertical_tabs_products_area .svpor-vertical-wrap ul.vertical-tabs-product > li:nth-child(6) {
border-left: none;
}
.widget_storevilla_cat_vertical_tabs_products_area .svpor-vertical-wrap ul.vertical-tabs-product > li:nth-child(4),
.widget_storevilla_cat_vertical_tabs_products_area .svpor-vertical-wrap ul.vertical-tabs-product > li:nth-child(5),
.widget_storevilla_cat_vertical_tabs_products_area .svpor-vertical-wrap ul.vertical-tabs-product > li:nth-child(6) {
border-bottom: none;
}
.widget_storevilla_cat_vertical_tabs_products_area .svpor-vertical-wrap ul.vertical-tabs-product > li:first-child {
border-right: none;
}
.widget_storevilla_cat_vertical_tabs_products_area .svpor-vertical-wrap ul.vertical-tabs-product > li .item-img {
padding: 0;
position: relative;
overflow: hidden;
}
.widget_storevilla_cat_vertical_tabs_products_area .svpor-vertical-wrap ul.vertical-tabs-product > li .item-img a {
display: block;
}
.widget_storevilla_cat_vertical_tabs_products_area .svpor-vertical-wrap ul.vertical-tabs-product > li .item-img .box-hover {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
background: rgba(0,0,0,0.6);
transition: all ease 0.6s;
-webkit-transition: all ease 0.6s;
opacity: 0;
visibility: visible;
}
.widget_storevilla_cat_vertical_tabs_products_area .svpor-vertical-wrap ul.vertical-tabs-product > li:hover .item-img .box-hover {
visibility: visible;
opacity: 1;
transition: all ease 0.6s;
-webkit-transition: all ease 0.6s;
}
.widget_storevilla_cat_vertical_tabs_products_area .svpor-vertical-wrap ul.vertical-tabs-product > li .item-img .box-hover ul.add-to-links {
border-top: none;
padding: 0;
position: absolute;
top: 42%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
width: 36px;
}
.widget_storevilla_cat_vertical_tabs_products_area .svpor-vertical-wrap ul.vertical-tabs-product > li .item-img .box-hover ul.add-to-links li {
width: 100%;
margin: 10px 20px;
}
.widget_storevilla_cat_vertical_tabs_products_area .svpor-vertical-wrap ul.vertical-tabs-product > li .item-img .box-hover ul.add-to-links li a {
font-size: 0;
margin: 0;
}
.widget_storevilla_cat_vertical_tabs_products_area .svpor-vertical-wrap ul.vertical-tabs-product > li .item-img .box-hover ul.add-to-links li a.add_to_cart_button:before {
content: '\f07a';
/*font-family: FontAwesome;*/
position: absolute;
left: auto;
right: -15px;
}
.widget_storevilla_cat_vertical_tabs_products_area .svpor-vertical-wrap ul.vertical-tabs-product > li .item-img .box-hover ul.add-to-links li a:before {
font-size: 16px;
width: 20px;
color: #fff;
transition: all ease 0.3s;
-webkit-transition: all ease 0.3s;
}
.widget_storevilla_cat_vertical_tabs_products_area .svpor-vertical-wrap ul.vertical-tabs-product > li .item-img .box-hover ul.add-to-links li .yith-wcwl-add-button img {
display: none;
}
.widget_storevilla_cat_vertical_tabs_products_area .svpor-vertical-wrap ul.vertical-tabs-product > li .block-item-title,
.widget_storevilla_cat_vertical_tabs_products_area .svpor-vertical-wrap ul.vertical-tabs-product > li .product-price-wrap {
text-align: right;
width: 100%;
padding: 5px 20px 0;
font-size: 10px;
}
.widget_storevilla_cat_vertical_tabs_products_area .svpor-vertical-wrap ul.vertical-tabs-product > li .product-price-wrap .price {
padding: 0;
}
.widget_storevilla_cat_vertical_tabs_products_area .svpor-vertical-wrap ul.vertical-tabs-product > li .product-price-wrap .price span {
margin-left: 0;
margin-right: 0;
}
.widget_storevilla_cat_vertical_tabs_products_area .svpor-vertical-wrap ul.vertical-tabs-product > li .product-price-wrap .price span.woocommerce-Price-amount.amount {
margin-right: 0;
margin-left: 5px;
}
.widget_storevilla_cat_vertical_tabs_products_area .svpor-vertical-wrap ul.vertical-tabs-product > li .block-item-title h3 {
font-size: 14px;
color: #000;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 5px;
}
.widget_storevilla_cat_vertical_tabs_products_area .svpor-vertical-wrap ul.vertical-tabs-product > li .block-item-title a {
font-size: 14px;
/*font-family: Lato;*/
font-weight: 700;
color: #000;
line-height: 1;
transition: all ease 0.3s;
-webkit-transition: all ease 0.3s;
}
.widget_storevilla_cat_vertical_tabs_products_area .svpor-vertical-wrap ul.vertical-tabs-product > li .block-item-title a:hover {
color: #420537;
transition: all ease 0.3s;
-webkit-transition: all ease 0.3s;
}
.widget_storevilla_cat_vertical_tabs_products_area .vertical-promo {
float: left;
width: 24%;
position: relative;
overflow: hidden;
cursor: pointer;
}
/*هذا الكود يحدد تنسيق الصور داخل منطقة التبويبات العمودية الترويجية (.vertical-promo img).*/
.widget_storevilla_cat_vertical_tabs_products_area .vertical-promo img {
transform: translateZ(0px);
-webkit-transform: translateZ(0px);
transition-duration: 0.5s;
-webkit-transition-duration: 0.5s;
vertical-align: middle;
}
/*هذا الكود يحدد تأثير التكبير (Zoom) على الصورة داخل المنطقة الترويجية العمودية عند مرور مؤشر الفأرة فوقها (حالة :hover).*/
.widget_storevilla_cat_vertical_tabs_products_area .vertical-promo:hover img {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
/*هذا الكود يحدد تنسيق العنصر الزائف (:after) داخل منطقة التبويبات العمودية الترويجية (.vertical-promo). ووظيفته هي إنشاء طبقة تراكب (Overlay) شفافة باللون الأزرق فوق العنصر الأب، تمتد على كامل مساحته.*/
.widget_storevilla_cat_vertical_tabs_products_area .vertical-promo:after {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
content: '';
background: rgba(0,145,213,0.2);
}
/*هذا الكود يحدد تنسيق العنصر الزائف (:before) داخل المنطقة الترويجية العمودية (.vertical-promo). هذا العنصر هو عبارة عن تأثير انزلاق أو وميض يتم وضعه في المنتصف الأفقي للعنصر الأب (left: 50%;)، ويتم تدويره ودفعه للأعلى بعيدًا عن مجال الرؤية كحالة أولية (translate3d(0, -150%, 0)).*/
.widget_storevilla_cat_vertical_tabs_products_area .vertical-promo:before {
position: absolute;
top: 0;
/* عكس الموضع من اليسار إلى اليمين */
right: 50%;
left: auto; /* إلغاء القيمة القديمة */
width: 120%;
height: 100px;
background: rgba(255, 255, 255, 0.3);
content: '';
-webkit-transition: all 0.6s linear;
transition: all 0.6s linear;
z-index: 1;
/* عكس الدوران: 45deg إلى -45deg */
-webkit-transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, -45deg) translate3d(0, -150%, 0);
transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, -45deg) translate3d(0, -150%, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
/*هذا الكود يحدد تأثير الحركة للعنصر الزائف (:before) عند التحويم (:hover)، والذي يخلق تأثير انزلاق الوميض عبر الصورة الترويجية.*/
.widget_storevilla_cat_vertical_tabs_products_area .vertical-promo:hover:before {
/* عكس الدوران: 45deg إلى -45deg */
-webkit-transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, -45deg) translate3d(0, 200%, 0);
transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, -45deg) translate3d(0, 200%, 0);
/* عكس الموضع النهائي من اليسار إلى اليمين */
right: -100%;
left: auto; /* إلغاء القيمة القديمة */
top: 100%;
}
/*
==========
end
==========
*/
.widget_storevilla_pro_prouct_list_widget_area .product-list-area {
border: 1px solid #eeeeee;
}
.widget_storevilla_pro_prouct_list_widget_area .product-list-area .block-title-wrap {
border-bottom: 1px solid #eee;
}
.widget_storevilla_pro_prouct_list_widget_area .product-list-area .block-title-wrap .block-title {
padding: 20px;
float: none;
}
.widget_storevilla_pro_prouct_list_widget_area .product-list-area .block-title-wrap .block-title span {
/*font-family: Open Sans;*/
font-weight: 600;
color: #333333;
text-transform: uppercase;
font-size: 18px;
}
.widget_storevilla_pro_prouct_list_widget_area .product-list-area ul.all-product-list li {
float: right;
width: 33.33%;
border-right: none;
border-left: 1px solid #eee;
padding: 15px 12px;
border-top: 1px solid #eee;
}
.widget_storevilla_pro_prouct_list_widget_area .product-list-area ul.all-product-list li:nth-child(1),
.widget_storevilla_pro_prouct_list_widget_area .product-list-area ul.all-product-list li:nth-child(2),
.widget_storevilla_pro_prouct_list_widget_area .product-list-area ul.all-product-list li:nth-child(3) {
border-top: none;
}
.widget_storevilla_pro_prouct_list_widget_area .product-list-area ul.all-product-list li:nth-child(3n) {
border-left: none;
}
.widget_storevilla_pro_prouct_list_widget_area .product-list-area ul.all-product-list li .item-img {
width: 43%;
}
.widget_storevilla_pro_prouct_list_widget_area .product-list-area ul.all-product-list li .item-img a {
display: block;
}
.widget_storevilla_pro_prouct_list_widget_area .product-list-area ul.all-product-list li .item-img a img {
vertical-align: top;
}
.widget_storevilla_pro_prouct_list_widget_area .product-list-area ul.all-product-list li .text-wrapper {
width: 51%;
float: left;
}
.widget_storevilla_pro_prouct_list_widget_area .product-list-area ul.all-product-list li .item-img,
.widget_storevilla_pro_prouct_list_widget_area .product-list-area ul.all-product-list li .text-wrapper {
display: inline-block;
vertical-align: top;
}
.widget_storevilla_pro_prouct_list_widget_area .product-list-area ul.all-product-list li .text-wrapper {
/*font-family: Lato;*/
}
.widget_storevilla_pro_prouct_list_widget_area .product-list-area ul.all-product-list li .text-wrapper .block-item-title {
margin-bottom: 5px;
}
.widget_storevilla_pro_prouct_list_widget_area .product-list-area ul.all-product-list li .text-wrapper .block-item-title span {
color: #9e9e9e;
text-transform: uppercase;
font-size: 10px;
display: block;
margin-bottom: 5px;
}
.widget_storevilla_pro_prouct_list_widget_area .product-list-area ul.all-product-list li .text-wrapper .block-item-title h3 {
font-size: 16px;
font-weight: 700;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 0 !important;
}
.widget_storevilla_pro_prouct_list_widget_area .product-list-area ul.all-product-list li .text-wrapper .block-item-title h3 a {
color: #333;
transition: all ease 0.3s;
-webkit-transition: all ease 0.3s;
}
.widget_storevilla_pro_prouct_list_widget_area .product-list-area ul.all-product-list li .text-wrapper .block-item-title h3 a:hover {
color: #420537;
transition: all ease 0.3s;
-webkit-transition: all ease 0.3s;
}
.widget_storevilla_pro_prouct_list_widget_area .product-list-area ul.all-product-list li .text-wrapper .product-price-wrap {
margin-bottom: 10px;
}
.widget_storevilla_pro_prouct_list_widget_area .product-list-area ul.all-product-list li .text-wrapper .product-price-wrap .price {
padding: 0;
}
.widget_storevilla_pro_prouct_list_widget_area .product-list-area ul.all-product-list li .text-wrapper .product-price-wrap span.price span {
margin-left: 0;
margin-right: 0;
font-size: 14px;
color: #000;
font-weight: 600;
}
.widget_storevilla_pro_prouct_list_widget_area .product-list-area ul.all-product-list li .text-wrapper .product-price-wrap span.price del .amount,
.widget_storevilla_pro_prouct_list_widget_area .product-list-area ul.all-product-list li .text-wrapper .product-price-wrap span.price del .amount .woocommerce-Price-currencySymbol {
font-weight: 300;
}
.widget_storevilla_pro_prouct_list_widget_area .product-list-area ul.all-product-list li .text-wrapper .product-price-wrap span.price del {
margin-right: 0;
margin-left: 5px;
}
.widget_storevilla_pro_prouct_list_widget_area .product-list-area ul.all-product-list li .text-wrapper .add-cart-list a {
display: inline-block;
/*font-family: Lato;*/
font-size: 10px;
color: #666666;
border: 1px solid #eee;
padding: 10px 20px;
text-transform: uppercase;
transition: all ease 0.3s;
-webkit-transition: all ease 0.3s;
}
.widget_storevilla_pro_prouct_list_widget_area .product-list-area ul.all-product-list li .text-wrapper .add-cart-list a:hover {
background: #420537;
border-color: #420537;
color: #fff;
transition: all ease 0.3s;
-webkit-transition: all ease 0.3s;
}
/*
=========================================
homepage-area css
=========================================
*/
.homepage-middle-wrap .homepage-main-widget .widget_storevilla_pro_offer_deal_widget_area {
position: relative;
}
.homepage-middle-wrap .homepage-main-widget .widget_storevilla_pro_offer_deal_widget_area .item-img {
width: 100%;
}
.homepage-middle-wrap .homepage-main-widget .widget_storevilla_pro_offer_deal_widget_area .fl-pcountdown-cnt {
width: 100%;
min-height: auto;
}
.homepage-middle-wrap .homepage-main-widget .widget_storevilla_pro_offer_deal_widget_area .fl-pcountdown-cnt ul {
padding: 17px;
}
.homepage-middle-wrap .homepage-main-widget .widget_storevilla_pro_offer_deal_widget_area .fl-pcountdown-cnt ul li {
display: inline-block;
padding: 0;
vertical-align: middle;
float: none;
margin: 0 10px;
}
.homepage-middle-wrap .homepage-main-widget .widget_storevilla_pro_offer_deal_widget_area .fl-pcountdown-cnt ul li:before {
background: none;
}
.homepage-middle-wrap .homepage-main-widget section.widget_storevilla_pro_offer_deal_widget_area .offer-product-wrap .fl-pcountdown-cnt ul li .time-clock {
padding: 0;
border: none;
}
/*
========
end of offer-area
========
*/
.homepage-middle-wrap .homepage-main-widget .widget_storevilla_cat_vertical_tabs_products_area .vertical-promo {
display: none;
}
.homepage-middle-wrap .homepage-main-widget .widget_storevilla_cat_vertical_tabs_products_area .tab-wrapper {
width: 100%;
}
/*
========
end of vertical_tab_area
========
*/
.homepage-middle-wrap .homepage-main-widget .widget_storevilla_pro_prouct_list_widget_area .product-list-area ul.all-product-list li .text-wrapper .product-price-wrap span.price span {
font-size: 12px;
}
.homepage-middle-wrap .homepage-main-widget .widget_storevilla_pro_prouct_list_widget_area .product-list-area ul.all-product-list li .text-wrapper .block-item-title {
margin-bottom: 0;
}
/*
============================================
css for .blog_styletwo .blog-inner .column
============================================
*/
.homepage-middle-wrap .blog_styletwo .blog-column .blog-info {
padding: 25px 22px 25px;
}
.homepage-middle-wrap .blog-outer-container.blog_styletwo .blog-column .blog-info h2 {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 5px;
}
.homepage-middle-wrap .blog-outer-container.blog_styletwo .blog-column .blog-info .meta-wrap {
display: none;
}
.homepage-middle-wrap .blog-outer-container.blog_styletwo .blog-column .blog-info {
font-size: 13px;
}
.homepage-middle-wrap .blog-outer-container.blog_styletwo .blog-column .blog-info span.readmore a {
margin-top: 10px;
}
/*
============================================
css for .blog_stylethree .blog-inner .column
============================================
*/
.homepage-middle-wrap .blog_stylethree .column .blog-info {
padding: 35px 15px 45px;
}
.homepage-middle-wrap .blog-outer-container.blog_stylethree .column .blog-info h2 {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 5px;
}
/*
=======================
css for ajax image loading
======================
*/
/*هذا الكود يحدد موضع أيقونة التحميل (ajax-loading) التي تظهر بجانب زر "أضف إلى قائمة الأمنيات". في التخطيط الأصلي، يتم دفع الأيقونة خارج الحافة اليمنى للعنصر بمقدار $13\text{px}$.*/
.add-to-wishlist-custom img.ajax-loading {
position: absolute;
top: 0;
/* عكس تحديد الموضع من اليمين إلى اليسار */
left: -13px;
right: auto; /* إلغاء القيمة القديمة لملفات RTL */
}
/*
========================
css for item-img button
========================
*/
.tab-styleone .svpro-tab-content ul li .item-img .box-hover,
.tab-styleone .svpro-tab-content ul li .item-img a.add_to_cart_button,
.tab-styleone .svpro-tab-content ul li .item-img a.product_type_grouped,
.tab-styletwo .svpro-tab-content ul li .item-img .box-hover,
.tab-styletwo .svpro-tab-content ul li .product-button-wrap,
.tab-styletwo .svpro-tab-content ul li .item-img a.product_type_grouped,
.tab-stylethree .svpro-tab-content ul li .item-img .add_to_cart_button,
.widget_storevilla_latest_product_cat_widget_area .sp-producttype-wrap ul li .item-img .box-hover,
.widget_storevilla_latest_product_cat_widget_area .sp-producttype-wrap ul li .item-img .button,
.widget_storevilla_cat_with_product_widget_area .product-cat-slide ul li .item-img .box-hover,
.widget_storevilla_cat_with_product_widget_area .product-cat-slide ul li .item-img .button,
.widget_storevilla_product_widget_area .sp-producttype-wrap ul li .item-img .box-hover,
.widget_storevilla_product_widget_area .sp-producttype-wrap ul li .item-img a.add_to_cart_button,
.widget_storevilla_product_widget_area .sp-producttype-wrap ul li .item-img a.product_type_grouped,
.single.woocommerce ul.products .item-img a.add_to_cart_button,
.single.woocommerce ul.products .item-img .box-hover,
.single.woocommerce ul.products .item-img .product_type_grouped,
ul.products li .item-img .button,
ul.products li .item-img .box-hover,
.widget_storevilla_column_product_widget_area .col-wrap .col-slider-items li .item-img .button,
.widget_storevilla_product_widget_area ul li .item-img .button.product_type_external {
display: none;
}
/*
=========================
all blog layout arrow css
=========================
*/
/*هذا الكود يحدد التنسيق العام لأزرار التنقل (الأسهم) في ويدجت المدونة (Blog Widget)، وهو يركز على الأبعاد والخلفية والمحاذاة.*/
.widget_storevilla_blog_widget_area .blog_styletwo .lSAction a,
.widget_storevilla_blog_widget_area .blog_stylethree .lSAction a {
background-image: none;
background: #000;
width: 45px;
height: 45px;
text-align: center;
line-height: 45px;
}
/*هذا الكود يحدد موضع زر التنقل السابق (lSPrev) في ويدجت المدونة، حيث يتم إخفاؤه أو دفعه خارج الحافة اليسرى بمقدار $45\text{px}$*/
.widget_storevilla_blog_widget_area .blog_styletwo .lSAction a.lSPrev,
.widget_storevilla_blog_widget_area .blog_stylethree .lSAction a.lSPrev {
/* عكس التموضع من اليسار إلى اليمين */
right: -45px;
left: auto; /* إلغاء القيمة الأصلية لضمان عمل RTL بشكل صحيح */
transition: all ease 0.3s;
-webkit-transition: all ease 0.3s;
}
/*هذا الكود يحدد موضع زر التنقل السابق (lSPrev) عند تمرير الفأرة (:hover) فوق منطقة المدونة، حيث يعيده إلى الحافة ليبدأ من نقطة الصفر أفقياً.*/
.widget_storevilla_blog_widget_area .blog_styletwo:hover .lSAction a.lSPrev,
.widget_storevilla_blog_widget_area .blog_stylethree:hover .lSAction a.lSPrev {
/* عكس نقطة الوصول عند التحويم لتصبح من اليمين */
right: 0;
left: auto; /* إلغاء القيمة القديمة */
}
/*تعديل أيقونة السهم وموضعها لزر "السابق"، والثانية هي تعديل موضع زر "التالي".*/
/* تعديل أيقونة وموضع زر السابق */
.widget_storevilla_blog_widget_area .blog_styletwo .lSAction a.lSPrev:before,
.widget_storevilla_blog_widget_area .blog_stylethree .lSAction a.lSPrev:before {
content: '\f105'; /* تغيير السهم ليشير لليمين > */
position: absolute;
font-family: FontAwesome;
font-size: 24px;
color: #fff;
/* عكس الاتجاه من اليسار لليمين */
right: 17px;
left: auto;
}
/* تعديل موضع زر التالي الابتدائي */
.widget_storevilla_blog_widget_area .blog_styletwo .lSAction a.lSNext,
.widget_storevilla_blog_widget_area .blog_stylethree .lSAction a.lSNext {
/* عكس الإزاحة لتكون من اليسار */
left: -45px;
right: auto;
transition: all ease 0.3s;
-webkit-transition: all ease 0.3s;
}
.widget_storevilla_blog_widget_area .blog_styletwo:hover .lSAction a.lSNext,
.widget_storevilla_blog_widget_area .blog_stylethree:hover .lSAction a.lSNext {
right: auto;
left: 0;
}
.widget_storevilla_blog_widget_area .blog_styletwo .lSAction a.lSNext:before,
.widget_storevilla_blog_widget_area .blog_stylethree .lSAction a.lSNext:before {
content: '\f104';
position: absolute;
/*font-family: FontAwesome;*/
font-size: 24px;
color: #fff;
right: auto;
left: 17px;
}
/*
================
primary section view-product for featured product
================
*/
.homepage-middle-wrap .widget_storevilla_product_widget_area .sp-producttype-wrap a.product_type_grouped {
padding-left: 0;
padding-right: 20px;
}
.homepage-middle-wrap .widget_storevilla_product_widget_area .sp-producttype-wrap a.product_type_grouped:before {
left: auto;
right: 5px;
}
/*
========================
breadcrumb css
========================
*/
#content .page_header_wrap {
padding: 80px 0;
text-align: center;
position: relative;
}
#content .page_header_wrap:after {
position: absolute;
content: '';
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.6);
top: 0;
left: auto;
right: 0;
z-index: 1;
}
#content .page_header_wrap .store-container {
position: relative;
z-index: 9;
}
#content .page_header_wrap .entry-header h1.entry-title {
color: #fff;
}
/*هذا الكود يحدد تنسيق مسار التنقل (Breadcrumb)، وهي الروابط التي تظهر في أعلى الصفحة لتوضح للمستخدم مكانه (مثل: الرئيسية > المتجر > حقائب).*/
#content .page_header_wrap #storevilla-breadcrumb,
.woocommerce .woocommerce-breadcrumb {
color: rgba(255,255,255,0.8);
font-size: 14px;
/* ضمان محاذاة النص لليمين في النسخة العربية */
text-align: right;
direction: rtl;
}
/*هذا الكود يحدد تنسيق الروابط (Links) داخل مسار التنقل (Breadcrumb). الخصائص الموجودة هنا (اللون ومدة الانتقال) هي خصائص جمالية وليست اتجاهية، لذا فهي لا تتأثر تقنياً بالتحويل للعربية.*/
#content .page_header_wrap #storevilla-breadcrumb a,
.woocommerce .woocommerce-breadcrumb a {
color: #fff;
transition: all ease 0.3s;
-webkit-transition: all ease 0.3s;
/* تحسينات اختيارية للغة العربية */
display: inline-block; /* لضمان استقرار المسافات */
text-decoration: none; /* إزالة الخط السفلي إذا وجد */
}
/*هذا الكود يحدد لون روابط "مسار التنقل" (Breadcrumb) عند تمرير مؤشر الفأرة فوقها (hover).*/
#content .page_header_wrap #storevilla-breadcrumb a:hover,
.woocommerce .woocommerce-breadcrumb a:hover {
color: #420537;
transition: all ease 0.3s;
-webkit-transition: all ease 0.3s;
}
/*
=============
price amount
=============
*/
.woocommerce-Price-amount.amount {
display: inline-block;
}
/*
=====================================
full promo css
=====================================
*/
/*هذا الكود يحدد التنسيق العام لمنطقة العروض الترويجية الكاملة (full-promo-area). بمراجعة الخصائص، نجد أنها تتعلق بالهوامش الداخلية، الارتفاع، والمحاذاة المركزية.*/
.widget_storevilla_promo_pages_area .full-promo-area {
padding: 30px;
min-height: 300px;
text-align: center; /* يبقى في المنتصف، أو يغير إلى right حسب الرغبة */
position: relative;
}
/*هذا الكود يقوم بإنشاء طبقة تراكب سوداء شفافة (Overlay) فوق منطقة العروض الترويجية لتسهيل قراءة النصوص التي ستوضع فوقها.*/
.widget_storevilla_promo_pages_area .full-promo-area:before {
position: absolute;
content: '';
background: rgba(0,0,0,0.5);
height: 100%;
width: 100%;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
/*هذا الكود يتحكم في حاوية النصوص (full-text-wrap) داخل منطقة العروض، ووظيفته الأساسية هي جعل النص يتوسط المساحة عمودياً (Vertical Centering) مع تمدده بعرض العنصر بالكامل.*/
.widget_storevilla_promo_pages_area .full-promo-area .full-text-wrap {
position: absolute;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
width: 100%;
left: 0;
right: 0;
}
/*هذا الكود يحدد تنسيق العنوان الرئيسي ($H2$) داخل منطقة العروض الترويجية. الخصائص الموجودة هنا (حجم الخط، اللون، والهامش السفلي) هي خصائص جمالية وتنسيقية عامة.*/
.widget_storevilla_promo_pages_area .full-promo-area .full-text-wrap h2 {
font-size: 30px; /* زيادة بسيطة في الحجم لأن الخط العربي يظهر أصغر */
color: #420537;
margin-bottom: 0;
line-height: 1.4; /* لضمان وضوح الكلمات العربية */
}
.widget_storevilla_promo_pages_area .full-promo-area .full-text-wrap a {
display: block;
}
/*هذا الكود يحدد تنسيق زر العرض الترويجي. جميع الخصائص المستخدمة تتعلق بالمظهر الخارجي للزر (الألوان، الحواف، الخط، والتحويلات).*/
.widget_storevilla_promo_pages_area .full-promo-area .full-text-wrap a button {
border: 2px solid #420537
border-radius: 0;
box-shadow: none;
color: #fff;
text-shadow: none;
padding: 12px 20px;
background: #420537
font-size: 15px; /* زيادة بسيطة لتناسب الخطوط العربية */
font-weight: 600; /* إضافة سماكة للخط العربي ليظهر بشكل أوضح */
transition: all ease 0.3s;
-webkit-transition: all ease 0.3s;
/* إزالة uppercase لأنها لا تعمل مع العربية */
text-transform: none;
}
/*هذا الكود يحدد تأثير التحويم (hover) على الزر داخل منطقة العروض، حيث يغير لون الحدود إلى الأبيض ويجعل الخلفية شفافة عند مرور الفأرة فوق الرابط.*/
.widget_storevilla_promo_pages_area .full-promo-area .full-text-wrap a:hover button {
border-color: #fff;
background: none;
transition: all ease 0.3s;
-webkit-transition: all ease 0.3s;
color: #fff; /* تأكيد ظهور النص باللون الأبيض عند التحويم */
}
/*هذا الكود يحدد تنسيق النص الفرعي أو "العنوان المميز" (الموجود داخل وسم span) في منطقة العروض. غالباً ما يُستخدم هذا الجزء لعرض نسب الخصم أو كلمات ترويجية ضخمة.*/
.widget_storevilla_promo_pages_area .full-promo-area .full-text-wrap span {
color: #fff;
/* الحجم 42px كبير؛ قد تحتاج لتقليله إلى 38px إذا كان الخط العربي عريضاً جداً */
font-size: 42px;
font-weight: 700;
display: block;
margin-bottom: 20px;
/* إضافة ارتفاع سطر لضمان عدم قص النقاط أو الحركات في الحروف العربية */
line-height: 1.2;
/* إزالة uppercase لعدم الحاجة لها في العربية */
text-transform: none;
}
/*
========================================
team description
========================================
*/
.term-description {
margin-bottom: 40px;
}
/*
============================
grid toggle css
============================
*/
/*هذا الكود هو الحاوية الرئيسية لأزرار تبديل عرض المنتجات (Grid/List). الخصائص المستخدمة هنا (العرض على نفس السطر، إزالة الهوامش الداخلية، والتوسيط العمودي) هي خصائص تنسيقية عامة ولا تعتمد على اتجاه اللغة.*/
.woocommerce .gridlist-toggle {
display: inline-block !important;
padding: 0 !important;
vertical-align: middle;
/* إضافة محاذاة لضمان تموضعه بشكل صحيح في النسخة العربية */
float: left; /* أو right حسب رغبتك في مكان ظهوره */
margin-right: 15px; /* مسافة فاصلة عن العنصر الذي بجانبه من اليمين */
}
/*هذا الكود يتحكم في أزرار تبديل عرض المنتجات (بين وضع الشبكة Grid ووضع القائمة List) في متجر ووكومرس.*/
.woocommerce .gridlist-toggle a {
margin: 0 2px;
color: #420537;
background: none;
border: 1px solid #420537;
/* لضمان محاذاة الأيقونات بشكل صحيح في المتصفحات التي تدعم RTL */
display: inline-block;
float: none;
transition: all ease 0.3s;
-webkit-transition: all ease 0.3s;
}
/*هذا الكود يتحكم في مظهر أزرار تبديل عرض المنتجات (Grid & List) في حالتين: عند تمرير الفأرة (hover) وعندما يكون الزر نشطاً (active) أي يعبر عن طريقة العرض الحالية.*/
.woocommerce .gridlist-toggle a:hover,
.woocommerce .gridlist-toggle a.active {
background: #420537;
border: 1px solid #420537;
color: #fff;
transition: all ease 0.3s;
-webkit-transition: all ease 0.3s;
}
/*هذا الكود يتحكم في نص "عرض النتائج" (مثل: عرض 1-12 من أصل 50 نتيجة) في صفحات المتجر. الخاصية الأساسية التي تحتاج للتعديل هنا هي الاتجاه (float).*/
.woocommerce .woocommerce-result-count {
display: inline-block;
margin-bottom: 0;
margin-top: 7px;
vertical-align: middle;
/* عكس الاتجاه من اليمين إلى اليسار */
float: left;
/* إضافة هامش بسيط من اليسار لضمان عدم الالتصاق بحافة الصفحة */
margin-left: 15px;
margin-right: 0;
}
/*
===========================
list view for product
===========================
*/
/*هذا الكود يحدد المسافات الداخلية (Padding) للمنتجات عندما تكون معروضة في وضع القائمة (List View). في هذا الوضع، تكون المنتجات مصفوفة عمودياً، لذا يجب عكس المسافات الجانبية لضمان التناسق مع اتجاه اللغة العربية.*/
.woocommerce ul.products.list li.product {
padding-bottom: 13px;
/* عكس القيم الجانبية (حتى لو كانت متساوية حالياً لضمان التوافق المستقبلي) */
padding-right: 18px;
padding-left: 18px;
/* ضمان محاذاة محتوى المنتج لليمين */
text-align: right;
}
هذا الكود هو الجزء المسؤول عن تموضع صورة المنتج عند عرض المتجر بنظام "القائمة" (List View). في الإنجليزية، يتم دفع الصورة لليسار ليكون النص بجانبها على اليمين.*/
.woocommerce ul.products.list li .item-img {
width: 30%;
/* عكس اتجاه الصورة لتظهر على اليمين في العربية */
float: right;
/* إضافة هامش بسيط من جهة اليسار للفصل بين الصورة والنص */
margin-left: 20px;
margin-right: 0;
}
body.rtl .woocommerce ul.products.list li.product .price,
body.rtl .woocommerce ul.products.list li.product .woocommerce-loop-product__title {
text-align: right;
}
/*تعديل مكمل هام (الحاوية النصية)
بما أنك قمت بإزاحة الصورة لليمين، يجب عليك أيضاً التأكد من أن الجزء الذي يحتوي على اسم المنتج والسعر (item-content-main أو ما يشابهه في قالبك) مجهز ليكون بجانب الصورة من جهة اليسار.
إذا وجدت أن النص متداخل أو تحت الصورة، استخدم هذا الكود المكمل:*/
.woocommerce ul.products.list li .item-content-main {
width: 70%; /* باقي مساحة الـ 30% الخاصة بالصورة */
float: left; /* دفع النص لليسار */
text-align: right; /* محاذاة النص داخل الحاوية لليمين */
padding-right: 20px; /* مسافة بين النص والصورة من جهة اليمين */
}
.woocommerce ul.products.list li.product .item-img img {
width: 100% !important
}
/*هذا الكود هو المسؤول عن تنسيق المحتوى النصي (العنوان، الأزرار، السعر، والوصف) للمنتج عند عرضه بنظام "القائمة" (List View). في النسخة الإنجليزية، يتم دفع هذا المحتوى لليمين لأن الصورة تكون على اليسار.*/
.woocommerce ul.products.list li.product .block-item-title,
.woocommerce ul.products.list li.product .product-button-wrap,
.woocommerce ul.products.list li.product .product-price-wrap,
.woocommerce ul.products.list li.product div[itemprop="description"],
.woocommerce ul.products.list li.product .gridlist-buttonwrap {
/* دفع المحتوى النصي لليسار لترك مساحة للصورة على اليمين */
float: left;
width: 65% !important;
/* محاذاة النص لليمين بما يتناسب مع القراءة العربية */
text-align: right !important;
/* إضافة مسافة أمان بسيطة من جهة اليمين لتجنب الالتصاق بالصورة */
padding-right: 15px;
padding-left: 0;
}
/*نصيحة إضافية لتنسيق الأزرار
بما أنك قمت بتعديل .product-button-wrap و .gridlist-buttonwrap ليصبحا محاذيين لليمين، تأكد من أن الأزرار بداخل هذه الحاويات لا تحتوي على هوامش (margins) إنجليزية قديمة قد تسبب فجوات غير متناسقة*/
/* تأكيد تنسيق الأزرار داخل الحاوية */
body.rtl .woocommerce ul.products.list li.product .product-button-wrap a {
margin-left: 10px; /* مسافة بين الأزرار من جهة اليسار */
margin-right: 0;
}
ul.products.list li.product h3,
ul.products.list li.product .price{
float: right !important;
}
ul.products.list li.product hr {
display: none;
}
ul.products.list li.product .product-button-wrap a.villa-details {
float: right;
margin-left: 0;
margin-right: 5px;
}
ul.products.list li ul.add-to-links li {
float: right !important;
}
ul.products.list li.product .gridlist-buttonwrap {
margin-bottom: 0 !important
}
.woocommerce ul.products.list li.product div[itemprop="description"] {
font-size: 13px;
}
ul.products.list li .product-button-wrap a.button::before,
ul.products.list li .product-button-wrap a.added_to_cart::before {
top: 5px;
}
ul.products.list li .product-button-wrap a.villa-details::before {
top: 8px;
}
ul.products.list li .product-button-wrap .product_type_variable.button::before {
top: 8px;
}
.woocommerce ul.products.list li .product-price-wrap {
border-top: none;
}
/*هذا الكود يقوم بإزالة الهامش الداخلي (Padding) من القائمة التي تحتوي على أزرار التحكم في وضع القائمة. في التصميم الأصلي (LTR)، يتم تصفير الجهة اليسرى (padding-left: 0).*/
.woocommerce ul.products.list li.product .gridlist-buttonwrap ul {
/* تصفير الهامش من اليمين في النسخة العربية */
padding-right: 0;
/* إلغاء أي قيم سابقة للجهة اليسرى إذا لزم الأمر */
padding-left: 0;
/* التأكد من إزالة النقاط الافتراضية للقائمة */
list-style: none;
margin: 0;
}
/*نصيحة لتنسيق الأزرار
بما أن هذه الأزرار (مثل "أضف للسلة" أو "المقارنة") تكون داخل عناصر li داخل هذه القائمة، يفضل التأكد من أنها تظهر بجانب بعضها البعض أفقياً في العربية:*/
.woocommerce ul.products.list li.product .gridlist-buttonwrap ul li {
display: inline-block;
/* إضافة مسافة بسيطة بين الأزرار من جهة اليسار */
margin-left: 5px;
margin-right: 0;
}
.woocommerce ul.products.list li.product .gridlist-buttonwrap ul li {
margin-right: 0;
margin-left: 20px;
}
/*
=====================
woocommerce widget_rating_filter
=====================
*/
/*هذا الكود يتحكم في محاذاة العناصر داخل ودجت تصفية المنتجات حسب التقييم (Rating Filter) في ووكومرس.*/
.woocommerce.widget_rating_filter ul li {
text-align: right;
direction: rtl; /* لضمان ترتيب النجوم والنصوص من اليمين لليسار */
}
/* تحسين إضافي إذا كانت النجوم تظهر بشكل مقلوب أو ملتصق */
.woocommerce.widget_rating_filter ul li a {
display: flex;
align-items: center;
justify-content: flex-start; /* محاذاة المحتوى لليمين في وضع RTL */
}
.woocommerce.widget_rating_filter ul li .star-rating {
float: right; /* دفع النجوم لليمين */
margin-left: 10px; /* مسافة بين النجوم والنص من جهة اليسار */
margin-right: 0;
}
/*هذا الكود هو المسؤول عن وضع النجوم داخل ودجت التقييم. في النسخة الإنجليزية، يتم دفع النجوم لجهة اليسار ليكون النص (مثل "5 نجوم") بجانبها على اليمين.*/
.woocommerce .widget_rating_filter ul li .star-rating {
/* عكس اتجاه النجوم لتظهر على اليمين */
float: right;
/* إضافة مسافة بسيطة من جهة اليسار للفصل بين النجوم والنص */
margin-left: 10px;
margin-right: 0;
}
/*في بعض الأحيان، قد تحتاج لتأكيد محاذاة النص الذي يتبع النجوم لضمان عدم تداخله*/
.woocommerce .widget_rating_filter ul li {
clear: both; /* لضمان عدم تداخل الأسطر */
display: block;
overflow: hidden; /* لاحتواء العناصر العائمة (Floats) بداخلها */
}
/*هذا الكود يحدد حجم النجوم داخل ودجت تصفية التقييمات. تماماً مثل الأكواد الجمالية السابقة، فإن font-size هي خاصية لا تتأثر باتجاه اللغة وتعمل بشكل صحيح في النسختين.*/
.woocommerce .widget_rating_filter ul li {
text-align: right;
}
.woocommerce .widget_rating_filter ul li .star-rating {
float: right; /* النجوم على اليمين */
font-size: 12px; /* الحجم */
margin-left: 10px; /* مسافة من اليسار للفصل عن النص */
margin-right: 0; /* تصفير المسافة اليمنى */
}
/*
===============
===============
*/
/*هذا الكود يتحكم في أزرار التنقل (السهم السابق والتالي) الخاصة بـ معرض صور المنتج (غالباً باستخدام مكتبة LightSlider). يقوم الكود بإلغاء صورة الخلفية الافتراضية ويضع خلفية سوداء صلبة مع تحديد أبعاد الزر.*/
.product .images .lSAction > a {
background-image: none;
background: #000;
height: 30px;
width: 30px;
text-align: center;
line-height: 30px; /* إضافة لضمان التوسيط العمودي للأيقونة */
}
/* عكس اتجاه الأسهم في النسخة العربية */
body.rtl .product .images .lSAction > .lSPrev {
left: auto;
right: 0; /* نقل زر السابق لجهة اليمين */
}
body.rtl .product .images .lSAction > .lSNext {
right: auto;
left: 0; /* نقل زر التالي لجهة اليسار */
}
/*هذا الكود هو المسؤول عن إظهار أيقونة "السهم السابق" في معرض صور المنتج باستخدام خط FontAwesome. في التصميم الإنجليزي، الكود \f104 يمثل سهمًا يشير إلى اليسار (<)، وموضعه مزاح بمقدار $10\text{px}$*/
.product .images .lSAction > a.lSPrev:before {
/* تغيير الرمز ليشير إلى اليمين (Angle Right) */
content: '\f105';
position: absolute;
font-size: 20px;
font-family: FontAwesome;
line-height: 30px;
color: #fff;
/* عكس الاتجاه من اليسار إلى اليمين */
right: 10px;
left: auto;
}
/*هذا الكود هو الجزء المكمل لسهم "التالي" (Next) في معرض الصور. في النسخة الإنجليزية الأصلية، يستخدم الرمز \f105 (سهم يشير لليمين > ) ووضعية إزاحة من اليمين.*/
.product .images .lSAction > a.lSNext:before {
/* تغيير الرمز ليشير إلى اليسار (Angle Left) */
content: '\f104';
position: absolute;
font-size: 20px;
font-family: FontAwesome;
line-height: 30px;
color: #fff;
/* عكس الإزاحة لتكون من جهة اليسار */
left: 10px;
right: auto;
}
/*هذا الكود يحدد الموضع الافتراضي لزر "السابق" (Previous) في معرض الصور، حيث يتم إخفاؤه خارج حاوية الصورة بمسافة $30\text{px}$ جهة اليسار (left: -30px) ليظهر لاحقاً عند تمرير الفأرة (Hover).*/
.product .images .lSAction > a.lSPrev {
/* إلغاء الإزاحة من اليسار */
left: auto;
/* جعل الزر يبدأ من خارج الصورة جهة اليمين */
right: -30px;
/* الحفاظ على سلاسة الحركة */
transition: all ease 0.3s;
-webkit-transition: all ease 0.3s;
}
/*هذا الكود يكمل منطق حركة أزرار المعرض، حيث يقوم بإخفاء زر "التالي" (Next) بمسافة $30\text{px}$ جهة اليمين (right: -30px) ليظهر عند تمرير الفأرة.*/
.product .images .lSAction > a.lSNext {
/* إلغاء الإزاحة من اليمين */
right: auto;
/* جعل الزر يختفي خارج الصورة جهة اليسار */
left: -30px;
/* الحفاظ على سلاسة الحركة */
transition: all ease 0.3s;
-webkit-transition: all ease 0.3s;
}
/*هذا الكود هو المسؤول عن إظهار زر "السابق" (Previous) وتحريكه للداخل عند تمرير الفأرة (Hover) فوق معرض الصور. في التصميم الأصلي، يتحرك الزر ليصل إلى الحافة اليسرى (left: 0).*/
.product .images .lSSlideOuter:hover a.lSPrev {
/* إلغاء القيمة اليسرى */
left: auto;
/* تحريك الزر ليظهر عند الحافة اليمنى تماماً */
right: 0;
}
/*هذا الكود هو اللمسة الأخيرة لتأثير ظهور زر "التالي" (Next) عند تمرير الفأرة. في النسخة الإنجليزية، يظهر الزر عند الحافة اليمنى (right: 0).*/
.product .images .lSSlideOuter:hover a.lSNext {
/* إلغاء القيمة اليمنى */
right: auto;
/* تحريك الزر ليظهر عند الحافة اليسرى تماماً */
left: 0;
}
/*
=====================
home page sidebar
=====================
*/
/*هذا الكود يتحكم في تموضع الشريط الجانبي (Sidebar) في الصفحة الرئيسية عندما يكون الإعداد المختار هو "الشريط الجانبي على اليسار". في التصميم الإنجليزي، يتم دفعه لليسار (float: left).*/
body.leftsidebar .homepage-sidebar {
/* عكس الاتجاه ليكون على اليمين في الواجهة العربية */
float: right;
/* الحفاظ على التنسيقات الأخرى */
padding-top: 0;
/* إضافة هامش بسيط لفصل الشريط عن المحتوى الرئيسي */
margin-left: 0;
margin-right: 0;
}
/*هذا الكود يكمل تنسيق الصفحة الرئيسية؛ حيث يتحكم في منطقة المحتوى الرئيسي (homepage-main-widget) التي تظهر بجانب الشريط الجانبي. في الإنجليزية، بما أن الشريط الجانبي على اليسار، يتم دفع المحتوى لليمين (float: right).*/
body.leftsidebar .homepage-main-widget {
/* دفع منطقة المحتوى الرئيسي لليسار في العربية */
float: left;
/* ضمان وجود مسافة بين المحتوى والشريط الجانبي من جهة اليمين */
padding-right: 20px;
padding-left: 0;
}
/*
====================
====================
*/
/*هذا الكود يضيف إطاراً (Border) حول جدول "المنتجات المجمعة" (Grouped Products) في صفحة المنتج. بما أن الإطار يحيط بالجدول من جميع الجهات، فإن الكود بحد ذاته لا يحتاج لتعديل اتجاهي (RTL) لأنه سيظهر بنفس الشكل في العربية والإنجليزية.
ومع ذلك، لجعل الجدول يبدو احترافياً ومتوافقاً تماماً مع اللغة العربية، ستحتاج غالباً لتعديل المحتوى الداخلي لهذا الجدول (مثل محاذاة النص والحدود الداخلية).*/
/* الحفاظ على الإطار الخارجي */
.woocommerce .product-type-grouped form.cart table.group_table {
border: 1px solid #e7e7e7;
width: 100%;
/* لضمان محاذاة الجدول نفسه لليمين */
direction: rtl;
border-collapse: collapse;
}
/* محاذاة النصوص داخل خلايا الجدول لليمين */
.woocommerce .product-type-grouped form.cart table.group_table td {
text-align: right;
padding: 10px;
border-bottom: 1px solid #e7e7e7; /* خطوط فاصلة بين المنتجات */
}
/* ضبط كمية المنتج (Quantity) لتظهر بشكل صحيح بجانب الاسم */
.woocommerce .product-type-grouped form.cart table.group_table td.woocommerce-grouped-product-list-item__label {
padding-right: 15px;
padding-left: 0;
}
/*هذا الكود يقوم بتحويل صفوف الجدول (tr) إلى عناصر بلوك (inline-block) بعرض كامل، مما يجعل الجدول يبدو كقائمة عمودية بدلاً من جدول تقليدي. هذا التنسيق شائع في تصاميم متجر "StoreVilla" لجعله متوافقاً مع الشاشات الصغيرة أو لإعطائه مظهراً عصرياً.*/
.woocommerce .product-type-grouped form.cart table tr {
border-bottom: 1px solid #e7e7e7;
display: inline-block;
padding: 10px;
width: 100%;
/* إضافة محاذاة النص لليمين لضمان ترتيب العناصر العربية */
text-align: right;
/* منع أي مشاكل في ترتيب العناصر العائمة بداخل الصف */
direction: rtl;
float: right;
}
/*هذا الكود يقوم بتحويل خلايا الجدول (td) إلى عناصر عائمة لتظهر بجانب بعضها، وهو تعديل شائع لجعل الجدول يبدو كقائمة مرنة. في الكود الذي أرسلته، قمت بالفعل باستخدام float: right; وهو الخيار الصحيح للنسخة العربية (RTL).
ومع ذلك، هناك مشكلة تقنية قد تواجهك: بما أنك حددت العرض بنسبة 40% لكل خلية، فسيتبقى 20% فقط في السطر، مما قد يؤدي إلى نزول الخلية الثالثة (مثل السعر) إلى سطر جديد أو حدوث تداخل.*/
.woocommerce .product-type-grouped.product form.cart .group_table td {
float: right;
padding: 0;
vertical-align: middle;
/* سحب أي هوامش قديمة من النسخة الإنجليزية */
margin-left: 0;
}
/* تخصيص العرض لكل خلية لضمان بقائها في سطر واحد */
/* 1. خلية الكمية (تكون صغيرة عادة) */
.woocommerce .product-type-grouped.product form.cart .group_table td.woocommerce-grouped-product-list-item__quantity {
width: 20%;
}
/* 2. خلية اسم المنتج (تحتاج مساحة أكبر) */
.woocommerce .product-type-grouped.product form.cart .group_table td.woocommerce-grouped-product-list-item__label {
width: 50%;
text-align: right;
padding-right: 10px; /* مسافة بسيطة من اليمين */
}
/* 3. خلية السعر */
.woocommerce .product-type-grouped.product form.cart .group_table td.woocommerce-grouped-product-list-item__price {
width: 30%;
text-align: left; /* جعل السعر في أقصى اليسار لجمالية التصميم */
}
/*هذا الكود يتحكم في خلية اسم المنتج (Label) داخل جدول المنتجات المجمعة. في النسخة الإنجليزية، يتم دفع النص لليسار (float: left) مع وجود هامش صغير على اليمين.
🔄 التعديل المقترح لملف العربية (RTL)
في التصميم العربي، يجب عكس الاتجاه ليكون النص على اليمين، ونقل الهامش (Margin) ليكون على الجهة اليسرى ليفصل بين اسم المنتج والعناصر المجاورة له (مثل السعر أو الكمية).*/
.woocommerce .product-type-grouped.product form.cart .group_table td.label {
/* عكس اتجاه العوم لليمين */
float: right;
/* عكس الهامش ليكون جهة اليسار */
margin-left: 5px;
margin-right: 0;
/* محاذاة النص لليمين */
text-align: right;
/* تحسين تباعد الأسطر للخطوط العربية */
line-height: 1.5;
padding: 0;
width: 32%;
}
/*هذا الكود يتحكم في خلية السعر داخل جدول المنتجات المجمعة. في النسخة الإنجليزية، يوجد هامش من جهة اليمين (margin-right) ويكون النص ممركزاً.
لجعله متوافقاً مع اللغة العربية (RTL)، سنقوم بعكس اتجاه الهامش لضمان وجود مسافة بين السعر واسم المنتج الذي يقع الآن على يمينه، كما سنقوم بتحسين المحاذاة.*/
.woocommerce .product-type-grouped.product .summary form.cart .group_table td.price {
/* عكس الهامش ليكون جهة اليسار بدلاً من اليمين */
margin-left: 5px;
margin-right: 0;
/* جعل محاذاة السعر لليسار تعطي مظهراً أكثر ترتيباً في الجداول العربية */
text-align: left;
/* ضمان عوم الخلية لليسار إذا كان باقي العناصر تعوم لليمين */
float: left;
font-size: 14px;
font-weight: 400;
padding-bottom: 0;
width: 25%;
}
/*هذا الكود يقوم بإلغاء الحواف المستديرة (border-radius: 0) لجدول المتجر وخانة إدخال الكوبون، مما يعطي تصميماً زواياه حادة (Sharp edges).
بما أن هذا التنسيق "هيكلي" (Structural) ويتعلق بشكل الزوايا وليس بالاتجاه، فهو يعمل بشكل صحيح في النسختين العربية والإنجليزية ولا يحتاج لتعديل برمجياً. ومع ذلك، هناك بعض التفاصيل المتعلقة بخانة الكوبون في وضع RTL تحتاج لاهتمامك.
🛠️ التحسينات المقترحة لملف العربية (RTL)
في صفحة السلة (Cart Page)، تظهر خانة الكوبون وبجانبها زر "تطبيق الكوبون". عند إلغاء الحواف المستديرة، يفضل التأكد من أن الخانة والزر ملتصقان بشكل جمالي من الجهة الصحيحة.*/
/* تنسيق خانة الكوبون في العربية */
body.rtl .woocommerce-page table.cart td.actions .coupon .input-text {
border-radius: 0;
float: right; /* ضمان عوم الخانة لليمين */
margin-left: 10px; /* مسافة بين الخانة والزر جهة اليسار */
margin-right: 0;
text-align: right; /* محاذاة نص الكوبون لليمين */
}
/* تنسيق جدول المتجر لضمان محاذاة النصوص */
body.rtl .woocommerce table.shop_table {
border-radius: 0;
text-align: right;
direction: rtl;
}
/* محاذاة رؤوس الجدول (اسم المنتج، السعر، الكمية) */
body.rtl .woocommerce table.shop_table th {
text-align: right;
}
.woocommerce .checkout-button.button.alt.wc-forward {
height: auto;
}
.woocommerce-cart table.cart .quantity button:hover {
background: #420537
color: #fff;
}
/*
=============================
css for shortcodes
=============================
*/
/*هذا الكود يضيف إطاراً (Border) ومسافة داخلية (Padding) لقسم "دعوة لاتخاذ إجراء" (Call to Action). وبما أن القيم متوازنة (أعلى/أسفل 10px ويمين/يسار 25px)، فالتنسيق سيبدو جيداً في العربية، لكنه يحتاج لبعض الخصائص لضمان محاذاة المحتوى الداخلي بشكل صحيح.
🔄 التعديل والتحسين المقترح لملف RTL
عندما يكون هناك قسم "Call to Action"، فإنه عادةً ما يحتوي على نص وزر بجانبه. في النسخة العربية، يجب أن يكون النص محاذياً لليمين والزر في جهة اليسار أو ممركزاً.*/
.sv_call_to_action {
border: 1px solid #420537
padding: 10px 25px;
/* ضمان اتجاه النص والمحاذاة للعربية */
direction: rtl;
text-align: right;
}
/* إذا كان هناك زر داخل هذا القسم، نضمن وجود مسافة صحيحة */
.sv_call_to_action a.button {
margin-right: 15px; /* مسافة من اليمين لفصله عن النص العربي */
margin-left: 0;
}
/*إضافة لمسة جمالية (اختياري)
في التصاميم العربية، يفضل أحياناً تمييز جهة اليمين بشريط ملون بدلاً من الإطار الكامل لإعطاء لمسة عصرية:*/
body.rtl .sv_call_to_action {
border-right: 5px solid #420537شريط سميك جهة اليمين */
border-left: 1px solid #420537
background-color: #f9f9f9; /* خلفية خفيفة لتمييز القسم */
}
/*هذا الكود ينسق زر "الدعوة لاتخاذ إجراء" داخل القسم الذي صممناه سابقاً. بما أن الزر يعتمد على display: inline-block وتوسيط النص بداخل الزر نفسه، فهو سيعمل بشكل صحيح في النسخة العربية.
ومع ذلك، لضمان مظهر احترافي ومتناسق مع اتجاه القراءة العربي (RTL)، نحتاج لإضافة بعض اللمسات الفنية.
🔄 التعديل والتحسين المقترح لملف RTL
عندما يكون الزر بجانب نص في النسخة العربية، يجب التأكد من وجود مسافات صحيحة ومنع التصاق الزر بالنصوص من جهة اليمين.*/
.sv_call_to_action a.sv_call_to_action_button {
display: inline-block;
background: #420537
color: #fff;
padding: 8px 15px;
text-align: center;
border: 1px solid #420537
/* إضافة مسافة من جهة اليمين لفصل الزر عن النص العربي */
margin-right: 15px;
margin-left: 0;
/* تحسين الخط العربي */
font-family: 'Cairo', sans-serif;
font-weight: 600;
/* إلغاء أي تحويل تلقائي للحروف اللاتينية */
text-transform: none;
/* انتقال ناعم عند تمرير الفأرة */
transition: all 0.3s ease;
}
/* تأثير عند تمرير الفأرة (Hover) */
.sv_call_to_action a.sv_call_to_action_button:hover {
background: #fff;
color: #420537
}
/*نصيحة بخصوص الأيقونات
إذا أردت إضافة سهم داخل الزر (مثل "اشترك الآن ←")، فتذكر أن السهم يجب أن يشير لجهة اليسار في العربية بدلاً من اليمين:*/
/* إذا كنت تستخدم أيقونة FontAwesome داخل الزر */
body.rtl .sv_call_to_action_button i {
margin-right: 0;
margin-left: 8px; /* مسافة على يسار الأيقونة */
transform: rotate(180deg); /* قلب السهم ليشير لليسار */
}
/*هذا الكود يضيف تأثير التحويم (Hover) على زر "الدعوة لاتخاذ إجراء". عندما يمرر المستخدم الفأرة فوق الزر، تختفي الخلفية الملونة ويصبح النص بلون أزرق.
بما أن هذا التأثير بصري بحت ويتعلق بالألوان، فهو لا يتطلب أي تعديل اتجاهي لملف العربية (RTL). ومع ذلك، هناك تحسين تقني وجمالي يضمن بقاء الزر متناسقاً عند تغيير الخلفية إلى "لا شيء" (none).
🛠️ التحسين المقترح لملف العربية (RTL)
عند استخدام background: none; في الـ Hover، قد يختفي الإطار أو يتغير شكل الزر فجأة إذا لم يكن هناك إطار محدد مسبقاً. يفضل التأكد من بقاء الإطار الأزرق ليحدد شكل الزر.*/
.sv_call_to_action a.sv_call_to_action_button:hover {
background: transparent; /* أفضل من none للحفاظ على المساحة */
color: #420537
/* التأكد من بقاء الإطار ليظل الزر واضحاً في النسخة العربية */
border: 1px solid #420537
/* إضافة لمسة نعومة عند التحول */
transition: all 0.3s ease-in-out;
}
/*💡 نصيحة لتجربة المستخدم (UX) في المتصفحات العربية
في بعض الأحيان، عند تغيير الخلفية إلى شفافة (none) في الخطوط العربية، قد يبدو الخط أنحف أو أقل وضوحاً. يمكنك إضافة ثقل بسيط للخط عند التحويم لضمان وضوحه:*/
body.rtl .sv_call_to_action a.sv_call_to_action_button:hover {
font-weight: 700; /* جعل الخط العربي أوضح عند التحويم */
}
/*هذا الكود مخصص لـ توسيط الزر داخل قسم "الدعوة لاتخاذ إجراء". بما أنك استخدمت display: block مع margin: 0 auto وحددت عرضاً ثابتاً (105px)، فإن الزر سيظهر دائماً في منتصف المساحة المتاحة بغض النظر عن لغة الموقع.
لذلك، هذا الكود يعمل بشكل صحيح تماماً في النسخة العربية (RTL) ولا يتطلب تعديلات في الاتجاه.
🛠️ تحسينات مقترحة لملف العربية (RTL)
رغم أن التوسيط يعمل، إلا أن هناك مشكلتين شائعتين مع الخطوط العربية عند استخدام عرض ثابت (width):
طول النص: الكلمات العربية غالباً ما تكون أطول من الإنجليزية (مثلاً: "Buy Now" مقابل "اشترِ الآن"). العرض الثابت 105px قد يكون ضيقاً جداً ويؤدي لنزول النص لسطرين.
المحاذاة: يفضل التأكد من أن النص داخل الزر ممركز تماماً.*/
.sv_call_to_action.center a.sv_call_to_action_button {
margin: 0 auto;
/* يفضل استخدام min-width بدلاً من width لضمان استيعاب الكلمات العربية الطويلة */
min-width: 120px;
width: auto;
display: table; /* أو block كما هي، لكن table تجعل العرض يتناسب مع المحتوى إذا كان قصيراً */
/* ضمان توسيط النص العربي داخل الزر */
text-align: center;
padding: 8px 20px; /* زيادة الحشو الجانبي لجمالية الخط العربي */
}
/*✅ نصيحة أخيرة:
بما أنك قمت بتوسيط الزر، تأكد أن النص الذي يسبقه (العنوان أو الوصف) ممركز أيضاً ليكون التصميم متناسقاً:*/
body.rtl .sv_call_to_action.center {
text-align: center;
}
/*هذا الكود يقوم بدفع الزر إلى جهة اليمين (float: right). في النسخة الإنجليزية (LTR)، هذا يعني أن الزر سينتقل إلى نهاية السطر (جهة اليمين).
أما في النسخة العربية (RTL)، فإن جهة اليمين هي "بداية" السطر. لذا، إذا كنت تريد أن يظهر الزر في نهاية السطر (أي جهة اليسار) ليكون مقابلاً للنص العربي الذي يبدأ من اليمين، فيجب عليك عكس هذا الكود في ملف العربية.
🔄 التعديل المقترح لملف العربية (RTL)
للحفاظ على التوازن البصري (النص في جهة والزر في الجهة المقابلة)، يفضل تعديل الكود كالتالي:*/
/* في ملف rtl.css */
body.rtl .sv_call_to_action.right a.sv_call_to_action_button {
/* دفع الزر لليسار ليكون في نهاية السطر العربي */
float: left;
/* إضافة مسافة بسيطة من اليمين لضمان عدم التصاقه بالنص */
margin-right: 15px;
margin-left: 0;
}
/*
==============
drop cap
==============
*/
/*هذا الكود مخصص لتنسيق الحرف الاستهلالي (Drop Cap)، وهو الحرف الأول الكبير الذي يبدأ به المقال. في اللغة الإنجليزية، يوضع هذا الحرف في بداية الفقرة على اليسار.
في اللغة العربية (RTL)، يجب أن يكون الحرف الاستهلالي في جهة اليمين. كما أن المسافات الجانبية (Padding) تحتاج للعكس لضمان عدم التصاق الحرف بالنص الذي يليه.
🔄 التعديل المقترح لملف العربية (RTL)
يجب عليك عكس اتجاه العوم (Float) وعكس المسافات الجانبية كالتالي:*/
body.rtl .sv-dropcaps {
/* عكس الاتجاه لليمين */
float: right;
/* عكس المسافات: مسافة أكبر من اليسار لفصل الحرف عن النص */
padding-left: 15px;
padding-right: 3px;
padding-top: 4px;
/* الخطوط العربية قد تحتاج تعديل بسيط في الارتفاع لتظهر بشكل متناسق */
line-height: 65px;
font-size: 75px;
text-align: center;
}
/*⚠️ ملاحظة هامة حول الحروف العربية
الحروف الاستهلالية (Drop Caps) هي أسلوب شائع جداً في اللاتينية، لكنها ليست شائعة في الخط العربي لأن الحروف العربية تتغير أشكالها بناءً على اتصالها (أول الكلمة، وسطها، آخرها).
إذا قررت استخدامها، إليك بعض النصائح:
نوع الخط: يفضل استخدام خطوط "ديواني" أو "كوفي" للحرف الاستهلالي ليعطي مظهراً جمالياً كالمخطوطات القديمة.
التداخل: تأكد من أن الحرف الكبير لا يتداخل مع النقاط (مثل حرف ب، ت، ث) في الأسطر التالية.
💡 لمسة جمالية إضافية
لجعل الحرف الاستهلالي العربي يبدو أكثر احترافية، يمكنك إضافة لون مختلف أو إطار بسيط:*/
body.rtl .sv-dropcaps {
color: #420537;
font-weight: bold;
border-left: 1px solid #eee; /* خط فاصل بسيط بين الحرف والنص */
margin-left: 10px;
}
/*هذا الكود يضيف نمطاً معيناً للحرف الاستهلالي، حيث يضعه داخل مربع ملون (fg-square). في التصميم الإنجليزي، يكون المربع على اليسار وله هامش من اليمين لفصله عن النص.
بالنسبة للنسخة العربية (RTL)، نحتاج لعكس اتجاه العوم (float) وعكس الهامش (margin) لضمان تموضع المربع بشكل صحيح في بداية الفقرة من جهة اليمين.
🔄 التعديل المقترح لملف العربية (RTL)*/
body.rtl .sv-dropcaps.fg-square {
/* عكس الاتجاه لليمين في العربية */
float: right;
/* عكس الهامش: الهامش الآن يجب أن يكون من اليسار لفصل المربع عن النص */
margin-left: 8px;
margin-right: 0;
/* الحفاظ على التنسيقات اللونية والداخلية */
background: #763962;
color: #fff;
margin-top: 4px;
padding: 10px;
/* تحسين المحاذاة للخطوط العربية */
line-height: 1;
text-align: center;
}
/*💡 ملاحظات تقنية هامة للخط العربي:
المساحة والارتفاع (Line-height): الحروف العربية التي تحتوي على أجزاء تمتد للأسفل (مثل: ر، ج، ي) أو للأعلى (مثل: أ، ل) قد تحتاج إلى تعديل الـ padding أو الـ line-height لكي لا تبدو "مخنوقة" داخل المربع.
حجم المربع: إذا لاحظت أن المربع يظهر بشكل مستطيل غير متناسق، يمكنك إضافة min-width و display: block لضمان شكل مربع مثالي:*/
body.rtl .sv-dropcaps.fg-square {
min-width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
}
/*
=============
button
=============
*/
/*هذا الكود يمثل التنسيق العام للأزرار (Buttons) في موقعك. بما أن الزر يعتمد على التوسيط الداخلي (text-align: center) وعرضه يتحدد بناءً على النص بداخله، فهو يعمل بشكل جيد تقنياً في الجهتين.
ومع ذلك، في ملف العربية (RTL)، نحتاج لضبط الخط وبعض التفاصيل التي تجعل الزر يبدو متقناً واحترافياً للمستخدم العربي.
🔄 التعديل والتحسين المقترح لملف RTL
إليك الكود المضاف لضمان ظهور الأزرار بشكل متناسق مع اللغة العربية:*/
body.rtl .bttn {
/* الخطوط العربية تحتاج مساحة عمودية أكبر قليلاً */
padding: 10px 20px;
/* تغيير الخط لخط عربي واضح (اختياري حسب رغبتك) */
font-family: 'Cairo', sans-serif;
font-weight: 600;
/* إزالة تحويل الحروف الإنجليزية لكبيرة (Uppercase) إن وجدت */
text-transform: none;
/* المسافة بين الأزرار: إذا كان هناك زر بجانب الآخر */
margin-left: 10px;
margin-right: 0;
/* جعل الانحناءات بسيطة وناعمة (اختياري) */
border-radius: 3px;
/* تحسين القراءة */
line-height: 1.5;
}
/*💡 لمسات احترافية إضافية
1. أيقونات داخل الزر: إذا كان الزر يحتوي على أيقونة (مثل سهم أو عربة تسوق)، يجب عكس مكانها في العربية. ففي الإنجليزية تكون الأيقونة غالباً على اليمين، أما في العربية فتكون على اليسار:*/
body.rtl .bttn i {
margin-right: 0;
margin-left: 8px; /* مسافة على يسار الأيقونة */
}
/*هذا الكود يضيف تأثير التحويم (Hover) العام للأزرار، حيث تتحول الخلفية إلى شفافة ويصبح النص ملوناً بالأزرق. هذا التنسيق يعمل بشكل مثالي في النسخة العربية ولا يحتاج لتعديل اتجاهي.
ومع ذلك، هناك مشكلة تقنية شائعة تحدث عند استخدام background: none: إذا لم يكن للزر إطار (Border) واضح في حالته الطبيعية، سيختفي شكل الزر تماماً عند التحويم ويتبقى النص وحيداً، مما يربك المستخدم العربي.
🛠️ التحسين المقترح لملف العربية (RTL)
لضمان تجربة مستخدم احترافية، يفضل استخدام transparent بدلاً من none والتأكد من بقاء الإطار ثابتاً لمنع "اهتزاز" الزر عند التحويم.*/
.bttn:hover {
/* جعل الخلفية شفافة بدلاً من حذفها تماماً */
background: transparent;
color: #420537
/* التأكد من وجود إطار يحافظ على هيكل الزر */
border: 1px solid #420537
/* إضافة نعومة في الانتقال (0.3 ثانية هي السرعة المثالية) */
transition: all 0.3s ease-in-out;
/* للخطوط العربية: أحياناً يكون اللون الأزرق فاتحاً على خلفية بيضاء،
يمكنك زيادة سمك الخط قليلاً للوضوح */
font-weight: 700;
}
/*🎨 معاينة بصرية للتأثير
في الواجهات العربية، الحفاظ على حدود الزر أثناء التحويم يساعد العين على تتبع مكان النقر بسهولة، خاصة في الأجهزة التي تعمل باللمس.
💡 نصيحة إضافية للأزرار في العربية:
إذا كان الزر يحتوي على أيقونة (مثل سهم)، قد ترغب في تحريكها قليلاً عند التحويم لإعطاء شعور بالتفاعل:*/
body.rtl .bttn:hover i {
/* تحريك الأيقونة لجهة اليسار قليلاً في العربية (اتجاه التقدم) */
transform: translateX(-5px);
transition: transform 0.2s ease;
}
/*هذا الكود مخصص لتوسيط الأزرار التي تحمل الفئة .sv-align-none. بما أنك استخدمت display: block مع margin: 0 auto وعرضاً ثابتاً، فإن الزر سيتوسط الصفحة تلقائياً في كلا النسختين العربية والإنجليزية.
ومع ذلك، هناك مشكلتان تقنيتان قد تواجههما في النسخة العربية (RTL) بسبب العرض الثابت (105px):
طول الكلمات العربية: الكلمات العربية غالباً ما تكون أطول من الإنجليزية (مثلاً: "View More" تقابلها "عرض المزيد"). العرض 105px قد يكون ضيقاً جداً ويؤدي إلى خروج النص عن حدود الزر أو تداخله.
محاذاة النص: يجب التأكد من أن النص العربي ممركز تماماً داخل الكتلة.
🔄 التعديل المقترح لملف العربية (RTL)
لضمان مرونة الزر واحترافية مظهره، يفضل استخدام min-width بدلاً من width:*/
body.rtl .bttn.sv-align-none {
/* السماح للزر بالتمدد إذا كان النص العربي طويلاً */
min-width: 105px;
width: auto;
/* ضمان التوسيط ككتلة */
display: table; /* أفضل من block لضمان أن الخلفية تحيط بالنص فقط مع التوسيط */
margin: 10px auto;
/* تنسيق النص الداخلي */
text-align: center;
padding: 8px 20px; /* زيادة الحشو الجانبي لراحة العين في القراءة العربية */
}
/*هذا الكود يقوم بدفع الزر إلى جهة اليسار (float: left). في التصميم الإنجليزي (LTR)، هذا يعني أن الزر يظهر في بداية السطر.
أما في النسخة العربية (RTL)، فإن جهة اليسار هي "نهاية" السطر. لذا، إذا كنت تريد أن يظل الزر في "بداية" السطر العربي، فيجب عليك عكس هذا الكود ليكون float: right.
🔄 التعديل المقترح لملف العربية (RTL)
للحفاظ على التوازن البصري الصحيح (أن يبدأ الزر من نفس جهة بداية النص)، استخدم التعديل التالي في ملف rtl.css:*/
body.rtl .bttn.sv-align-left {
/* عكس الاتجاه لليمين ليكون في بداية السطر العربي */
float: right;
/* إضافة مسافة بسيطة من اليسار لضمان عدم التصاقه بالنص التالي */
margin-left: 15px;
margin-right: 0;
}
/*هذا الكود يقوم بدفع الزر إلى جهة اليمين (float: right). في التصميم الإنجليزي (LTR)، هذا يعني أن الزر يظهر في نهاية السطر.
أما في النسخة العربية (RTL)، فإن جهة اليمين هي "بداية" السطر. لذا، إذا كنت تريد أن يظهر الزر في نهاية السطر (جهة اليسار) ليكون مقابلاً لبداية النص العربي، فيجب عليك عكس هذا الكود في ملف العربية.
🔄 التعديل المقترح لملف العربية (RTL)
للحفاظ على التوازن البصري (بحيث يظل الزر في "نهاية" السطر بالنسبة للقارئ العربي)، استخدم التعديل التالي:*/
body.rtl .bttn.sv-align-right {
/* دفع الزر لليسار ليكون في نهاية السطر العربي */
float: left;
/* إضافة مسافة من اليمين لفصله عن النص */
margin-right: 15px;
margin-left: 0;
}
/*
===================
list style
===================
*/
/*هذا الكود يحدد عرض الأعمدة التي تحمل الفئة .sv-span3 لتأخذ نصف مساحة الشاشة (50%) ويجعلها تصطف بجانب بعضها البعض من جهة اليسار.
في التصميم العربي (RTL)، يجب أن تبدأ الأعمدة بالاصطفاف من جهة اليمين لضمان الترتيب الصحيح للمحتوى (مثلاً: أن يظهر العمود الأول على اليمين والعمود الثاني على اليسار).
🔄 التعديل المقترح لملف العربية (RTL)
يجب عكس خاصية float لتصبح جهة اليمين:*/
body.rtl .sv_column.sv-span3 {
/* عكس اتجاه الاصطفاف لليمين */
float: right;
/* العرض يبقى كما هو لضمان ظهور عمودين في السطر الواحد */
width: 50%;
}
/*⚠️ ملاحظة هامة بخصوص المسافات (Margins)
إذا كانت هذه الأعمدة تحتوي على هوامش جانبية (Margins) لتفصل بينها، فستحتاج أيضاً لعكس هذه الهوامش. على سبيل المثال، إذا كان الكود الأصلي يحتوي على مسافة من جهة اليمين، يجب نقلها لجهة اليسار في ملف العربية:*/
/* مثال إذا كان هناك هامش */
body.rtl .sv_column.sv-span3 {
float: right;
margin-left: 2%; /* المسافة الآن على يسار العمود */
margin-right: 0;
width: 48%; /* تقليل العرض قليلاً لتعويض مساحة الهامش */
}
/*📱 نصيحة للتجاوب مع الجوال (Responsive Design)
عادةً ما تُستخدم هذه الأعمدة لعرض محتوى بجانب بعضه على الشاشات الكبيرة. تأكد من إضافة "media query" لجعل العرض 100% على الشاشات الصغيرة (الجوال) لسهولة القراءة:*/
@media (max-width: 768px) {
.sv_column.sv-span3 {
width: 100%;
float: none;
}
}
/*هذا الكود يتحكم في عناوين الأعمدة ($h3$) داخل الشبكة (Grid). بما أنك قمت سابقاً بتحويل الأعمدة لتطفو جهة اليمين في النسخة العربية، يجب الآن التأكد من أن النصوص داخل هذه العناوين تتبع نفس الاتجاه.في التصميم العربي (RTL)، المحاذاة الافتراضية للنصوص يجب أن تكون لليمين لضمان سهولة القراءة واتساقها مع هيكل العمود.🔄 التعديل المقترح لملف العربية (RTL)*/
body.rtl .sv_column.sv-span3 h3 {
/* ضمان محاذاة النص لليمين */
text-align: right;
/* في بعض القوالب، قد تحتاج لضبط اتجاه القراءة يدوياً */
direction: rtl;
/* الحفاظ على المسافات والألوان */
color: #420537;
margin-bottom: 25px;
/* تحسين الخط العربي (اختياري) */
font-weight: 700;
line-height: 1.4;
}
/*💡 لماذا نهتم بـ text-align: right هنا؟
حتى لو كان المتصفح يضبط الاتجاه تلقائياً، فإن تحديد المحاذاة برمجياً يضمن عدم تأثر العناوين بأي كود "توسيط" أو "محاذاة لليسار" قد يكون موروثاً من التنسيقات العامة للموقع.
🛠️ نصيحة إضافية للزينة (Decorative Elements)
إذا كان هناك "خط صغير" تحت العنوان (Border bottom) أو أيقونة بجانبه، ستحتاج لعكس مكانها أيضاً:*/
/* إذا كان هناك خط تحت العنوان */
body.rtl .sv_column.sv-span3 h3 {
border-bottom: 2px solid #420537;
display: inline-block; /* ليظهر الخط بطول النص فقط */
padding-bottom: 5px;
}
/*هذا الكود يقوم بإلغاء المسافات الداخلية (Padding) للقوائم المنقطة (ul) داخل الأعمدة. بما أنك ضبطت القيمة لتكون 0 من جميع الجهات، فهي تقنياً تعمل في العربية والإنجليزية على حد سواء.
ولكن، في القوائم العربية (RTL)، تظهر مشكلة شائعة وهي التصاق النص بحافة العمود اليمنى أو خروج النقاط (Bullets) عن الإطار.
🔄 التعديل والتحسين المقترح لملف RTL
لضمان ظهور القائمة بشكل مرتب واحترافي في النسخة العربية، يفضل إضافة التنسيقات التالية:*/
body.rtl .sv_column.sv-span3 ul {
padding: 0;
margin: 0;
list-style-type: none; /* غالباً ما تُستخدم مع padding: 0 */
text-align: right;
direction: rtl;
}
/* إذا كنت تريد بقاء النقاط (Bullets) ظاهرة بشكل جميل في العربية */
body.rtl .sv_column.sv-span3 ul li {
padding-right: 20px; /* مسافة من اليمين بدلاً من اليسار */
padding-left: 0;
position: relative;
line-height: 1.8; /* لراحة العين في القراءة العربية */
}
/* إضافة نقطة مخصصة (اختياري) لضمان اتساقها في اليمين */
body.rtl .sv_column.sv-span3 ul li::before {
content: "•";
color: #420537/*نفس لون موقعك */
position: absolute;
right: 0;
top: 0;
}
/*✅ نصيحة بخصوص "الأيقونات":
إذا كانت هذه القائمة تحتوي على أيقونات (مثل علامة الصح ✅)، تأكد من وضعها على يمين النص:*/
body.rtl .sv_column.sv-span3 ul li i {
margin-left: 10px; /* مسافة على يسار الأيقونة لفصلها عن النص */
margin-right: 0;
}
/*هذا الكود ينسق عناصر القائمة (li) داخل الأعمدة، وبما أنك استخدمت position: relative و padding-left: 20px مع إلغاء النقاط الافتراضية، فهذا يعني غالباً أنك تترك مساحة لوضع أيقونة أو نقطة مخصصة جهة اليسار (كما هو متبع في التصميم الإنجليزي).
في النسخة العربية (RTL)، نحتاج لعكس هذه المسافة لتكون جهة اليمين، حيث يبدأ النص العربي.
🔄 التعديل المقترح لملف العربية (RTL)
يجب نقل المسافة البادئة من اليسار إلى اليمين لضمان عدم تداخل النص مع الأيقونة التي ستوضع لاحقاً:*/
body.rtl .sv_column.sv-span3 ul li {
/* إلغاء المسافة من اليسار */
padding-left: 0;
/* إضافة المسافة جهة اليمين للنص العربي */
padding-right: 20px;
/* المحاذاة والتباعد */
text-align: right;
margin-bottom: 15px;
line-height: 1.6; /* زيادة طفيفة لراحة الخط العربي */
/* الحفاظ على التموضع النسبي للأيقونات */
position: relative;
}
/*🛠️ لماذا قمنا بهذا التعديل؟
عكس الـ Padding: في التصميم العربي، العين تبدأ من اليمين. لذا فإن أي "هامش داخلي" مخصص لأيقونة يجب أن يكون على يمين النص.
انسيابية الخط: الخطوط العربية (مثل Cairo أو Adobe Arabic) تشغل مساحة عمودية أكبر قليلاً من الخطوط اللاتينية، لذا رفعنا line-height إلى 1.6 لضمان عدم تداخل الحروف الصاعدة والهابطة.
💡 إضافة الأيقونة المخصصة (Pseudo-element)
بما أن الكود الأصلي يحتوي على position: relative, فمن المرجح أنك تستخدم ::before لإضافة نقطة أو أيقونة. إليك كيف يجب ضبطها في العربية:*/
/* مثال لإضافة نقطة زرقاء مخصصة في العربية */
body.rtl .sv_column.sv-span3 ul li::before {
content: "";
position: absolute;
/* تثبيت الأيقونة في جهة اليمين */
right: 0;
left: auto;
top: 8px;
width: 8px;
height: 8px;
background-color: #420537;
border-radius: 50%;
}
/*هذا الكود ينسق القوائم الرقمية (Ordered Lists) داخل الأعمدة. بما أنك تستخدم list-style: decimal; الافتراضية، فإن الأرقام ستظهر بتنسيق ($1, 2, 3$).في النسخة العربية (RTL)، تظهر الأرقام عادةً على يمين النص. وبما أنك لم تحدد هوامش داخلية (padding) أو وضعية القائمة (list-style-position) في الكود الأصلي، فقد تواجه مشكلة خروج الأرقام خارج حدود العمود أو تداخلها مع النص.🔄 التعديل المقترح لملف العربية (RTL)لضمان ظهور الأرقام بشكل محاذٍ تماماً لليمين وبمسافة مريحة، يفضل استخدام هذا التنسيق:*/
body.rtl .sv_column.sv-span3 ol li {
/* ضمان محاذاة النص لليمين */
text-align: right;
direction: rtl;
/* جعل الأرقام تظهر داخل حدود العنصر لضمان عدم اختفائها */
list-style-position: inside;
/* الخطوط العربية تحتاج مساحة عمودية أكبر قليلاً */
line-height: 1.7;
margin-bottom: 15px;
/* إضافة مسافة بسيطة بين الرقم والنص */
padding-right: 5px;
}
/*🛠️ لمسة احترافية: الأرقام العربية (الهندية)إذا كنت تفضل أن تظهر الأرقام بالشكل العربي المستخدم في المشرق العربي ($١, ٢, ٣$) بدلاً من الأرقام الغربية، يمكنك تغيير نوع القائمة:*/
body.rtl .sv_column.sv-span3 ol {
list-style-type: arabic-indic;
}
/*هذا الكود هو "تنسيق تنظيفي" (Reset) يهدف إلى إلغاء المسافة السفلية للعنصر الأخير في القائمة لضمان عدم وجود فراغ غير مبرر أسفل العمود (خاصة في التذييل Footer).
بما أن هذا الكود يتعلق بالمسافات الرأسية (margin-bottom) وليس الأفقية، فهو يعمل بشكل مثالي في النسخة العربية (RTL) ولا يحتاج لأي تعديل اتجاهي.
💡 لمسة احترافية إضافية لملف العربية
في التصاميم العربية، غالباً ما نستخدم "خطوطاً فاصلة" (Separators) بين عناصر القائمة. إذا كنت تستخدم خطوطاً فاصلة، ستحتاج لإلغاء الخط عن العنصر الأخير أيضاً ليكون التصميم متناسقاً:*/
body.rtl .sv_column.sv-span3 ul li:last-child {
margin-bottom: 0;
/* إلغاء الخط الفاصل أو الإطار السفلي للعنصر الأخير إذا وُجد */
border-bottom: none;
padding-bottom: 0;
}
/*هذا الكود يضيف أيقونة (سهم صغير) باستخدام مكتبة FontAwesome قبل كل عنصر في القائمة، ويضعها في أقصى اليسار (left: 0). الأيقونة المستخدمة (\f105) هي سهم يتجه لليمين (angle-right).
في النسخة العربية (RTL)، نحتاج لعكس أمرين:
الموقع: نقل الأيقونة من اليسار إلى اليمين.
الاتجاه: تغيير السهم الذي يشير لليمين (>) بسهم يشير لليسار (<) ليتماشى مع اتجاه القراءة العربي.*/
body.rtl .sv_column.sv-span3 ul.sv-list1 li:before {
/* نقل الأيقونة لجهة اليمين */
right: 0;
left: auto;
/* تغيير الأيقونة من سهم يشير لليمين (\f105) إلى سهم يشير لليسار (\f104) */
content: '\f104';
/* ضبط المحاذاة لتناسب الخطوط العربية */
font-size: 14px; /* الخطوط العربية قد تحتاج تعديل بسيط في الحجم */
}
/*هذا الكود يضيف أيقونة "رأس سهم" (Caret) تشير إلى اليمين (▸) باستخدام الرمز \f0da من مكتبة FontAwesome، ويضعها في جهة اليسار.
في التصميم العربي (RTL)، نحتاج إلى عكس أمرين ليصبح التصميم منطقياً:
الموقع: نقل الأيقونة لتكون على يمين النص.
الشكل: تغيير اتجاه رأس السهم ليشير إلى اليسار (◂) بدلاً من اليمين، ليتناسب مع اتجاه القراءة العربي.
🔄 التعديل المقترح لملف العربية (RTL)
أضف الكود التالي في ملف rtl.css:*/
body.rtl .sv_column.sv-span3 ul.sv-list2 li:before {
/* نقل الأيقونة لجهة اليمين وإلغاء وضعها في اليسار */
right: 0;
left: auto;
/* تغيير الرمز من سهم يشير لليمين (\f0da) إلى سهم يشير لليسار (\f0d9) */
content: '\f0d9';
/* تحسين التموضع الرأسي للخطوط العربية */
top: 2px;
}
/* تأكد من عكس الحشو (Padding) في عنصر القائمة نفسه */
body.rtl .sv_column.sv-span3 ul.sv-list2 li {
padding-right: 20px;
padding-left: 0;
text-align: right;
}
/*🛠️ لماذا قمنا بهذه التغييرات؟
content: '\f0d9': الرمز \f0da هو "caret-right"، بينما الرمز \f0d9 هو "caret-left". في الواجهات العربية، الأيقونات التي تشير للتقدم أو التوسع يجب أن تتجه لليسار.
right: 0: بما أن القارئ العربي يبدأ من اليمين، يجب أن تسبق الأيقونة النص من تلك الجهة.
عكس الـ Padding: بدون تحويل الـ padding-left إلى padding-right في عنصر الـ li نفسه، سيغطي النص الأيقونة أو تظهر الأيقونة بعيدة جداً عنه.
✅ نصيحة إضافية للتنسيق الجمالي:
إذا كنت ترغب في تحريك الأيقونة قليلاً عند مرور الفأرة (Hover) لإعطاء تأثير تفاعلي جذاب في النسخة العربية:*/
body.rtl .sv_column.sv-span3 ul.sv-list2 li:hover:before {
/* تحريك السهم قليلاً لليسار عند التحويم */
transform: translateX(-3px);
transition: transform 0.2s ease;
}
/*هذا الكود يضيف أيقونة الطائرة الورقية (Paper Plane) باستخدام الرمز \f1d8 من مكتبة FontAwesome، ويقوم بتثبيتها في جهة اليسار. تُستخدم هذه الأيقونة عادةً في قوائم "تواصل معنا" أو "النشرة الإخبارية".
في النسخة العربية (RTL)، يجب نقل الأيقونة لتكون على يمين النص، مع التأكد من إزالتها من جهة اليسار تماماً.
🔄 التعديل المقترح لملف العربية (RTL)
أضف هذا الكود لضمان ظهور الأيقونة بشكل صحيح في بداية السطر العربي:*/
body.rtl .sv_column.sv-span3 ul.sv-list3 li:before {
/* تثبيت الأيقونة في اليمين */
right: 0;
left: auto;
/* الحفاظ على الأيقونة وحجمها */
content: '\f1d8';
font-size: 13px;
/* موازنة بسيطة للخطوط العربية */
top: 3px;
}
/* تأكد من وجود مساحة للنص في جهة اليمين */
body.rtl .sv_column.sv-span3 ul.sv-list3 li {
padding-right: 25px;
padding-left: 0;
text-align: right;
}
/*🛠️ لماذا قمنا بهذه التغييرات؟
تبديل left بـ right: في الواجهات العربية، الرموز النقطية أو الأيقونات التوضيحية يجب أن تسبق النص، وبما أن النص يبدأ من اليمين، فالأيقونة تذهب لأقصى اليمين (right: 0).
left: auto: هذه الخطوة ضرورية جداً لإلغاء القيمة الأصلية (left: 0) التي قد تظل فعالة وتسبب تداخل الأيقونة أو ظهورها في مكان خاطئ.
تعديل الـ Padding: قمنا بتحويل المسافة البادئة من اليسار إلى اليمين (padding-right) في عنصر القائمة (li) ليفسح مجالاً للأيقونة ولا يغطيها النص.
💡 نصيحة جمالية:
أيقونة الطائرة الورقية (\f1d8) تميل قليلاً إلى اليمين في شكلها الأصلي. إذا كنت تريدها أن تبدو كأنها "تنطلق" باتجاه النص العربي (أي تميل لليسار)، يمكنك عكس الأيقونة نفسها برمجياً:*/
body.rtl .sv_column.sv-span3 ul.sv-list3 li:before {
transform: scaleX(-1); /* عكس اتجاه الأيقونة أفقياً */
}
/*هذا الكود يضيف أيقونة السهم المزدوج (Double Angle Right ») باستخدام الرمز \f101 من مكتبة FontAwesome، ويضعها في جهة اليسار.
في النسخة العربية (RTL)، السهم المزدوج الذي يشير لليمين (») يعبر عن "العودة للخلف"، بينما السهم الذي يشير لليسار («) هو الذي يعبر عن "التقدم" أو "الإشارة للنص". لذا، نحتاج لعكس الاتجاه والموقع معاً.
🔄 التعديل المقترح لملف العربية (RTL)
أضف هذا الكود في ملف rtl.css:
🛠️ لماذا قمنا بهذه التغييرات؟
عكس الرمز (\f100): في لغات (LTR) نستخدم angle-double-right للإشارة لبداية السطر. في (RTL)، الأيقونة المكافئة بصرياً ومنطقياً هي angle-double-left.
right: 0 و left: auto: لتثبيت الأيقونة في بداية السطر العربي (الجهة اليمنى) وإلغاء تأثير الكود الإنجليزي الذي كان يثبتها يساراً.
تنسيق الـ li: بدون عكس الـ padding من اليسار إلى اليمين، سيظهر النص العربي فوق الأيقونة مباشرة.
✅ ملخص سريع للأيقونات التي قمنا بتعديلها:
القائمة الأيقونة الأصلية (LTR) الأيقونة الجديدة (RTL) الرمز البرمجي (RTL)
sv-list1 سهم مفرد يمين > سهم مفرد يسار < \f104
sv-list2 رأس سهم يمين ▸ رأس سهم يسار ◂ \f0d9
sv-list4 سهم مزدوج يمين » سهم مزدوج يسار « \f100
التصدير إلى "جداول بيانات Google"
بهذا نكون قد انتهينا من جميع أنماط القوائم (Lists) في موقعك. هل تود مساعدتك في تنسيق "صناديق البحث" (Search Boxes) أو "أزرار الإرسال" (Submit Buttons) في القوائم الجانبية؟*/
body.rtl .sv_column.sv-span3 ul.sv-list4 li:before {
/* نقل الأيقونة لجهة اليمين */
right: 0;
left: auto;
/* تغيير الرمز من سهم مزدوج يمين (\f101) إلى سهم مزدوج يسار (\f100) */
content: '\f100';
/* موازنة التموضع ليتناسب مع الخط العربي */
top: 3px;
font-size: 15px;
}
/* تعديل المسافة البادئة في عنصر القائمة */
body.rtl .sv_column.sv-span3 ul.sv-list4 li {
padding-right: 25px;
padding-left: 0;
text-align: right;
}
/*هذا الكود يضيف أيقونة الصاعقة (Bolt/Lightning) باستخدام الرمز \f0e7 من مكتبة FontAwesome، ويضعها في جهة اليسار.
في النسخة العربية (RTL)، يجب نقل الأيقونة لتكون على يمين النص لتبدأ الفقرة بها، مع التأكد من إزالة تأثير التموضع لجهة اليسار.
🔄 التعديل المقترح لملف العربية (RTL)
أضف هذا الكود في ملف rtl.css:
🛠️ لماذا قمنا بهذه التغييرات؟
right: 0 و left: auto: في التصميم العربي، القارئ يبدأ من اليمين. تثبيت الأيقونة على اليمين يضمن أنها أول ما تقع عليه العين قبل قراءة النص.
عكس الـ Padding: الكود الإنجليزي يعتمد على padding-left لترك مساحة للأيقونة. في العربية، يجب إلغاء هذه المساحة من اليسار ونقلها إلى اليمين (padding-right) لمنع تداخل النص مع الأيقونة.
التموضع الرأسي (top): الخطوط العربية تختلف في ارتفاعها عن اللاتينية، لذا قد تحتاج لتعديل قيمة top بـ 1 أو 2 بيكسل لضمان توسيط الأيقونة مع أول سطر في النص.
✅ ملخص تنسيق القوائم الخمس (sv-list):
لقد قمنا الآن بضبط كافة الأيقونات في القوائم الخاصة بك:
List 1 & 4: عكسنا اتجاه الأسهم (> أصبحت <).
List 2: عكسنا رأس السهم (▸ أصبح ◂).
List 3 & 5: نقلنا الأيقونات (الطائرة والصاعقة) لليمين مع الحفاظ على شكلها.*/
body.rtl .sv_column.sv-span3 ul.sv-list5 li:before {
/* نقل الأيقونة لجهة اليمين */
right: 0;
left: auto;
/* الحفاظ على رمز الصاعقة */
content: '\f0e7';
font-size: 15px;
/* موازنة بسيطة للارتفاع ليناسب الخطوط العربية */
top: 4px;
}
/* تعديل المسافة البادئة في عنصر القائمة نفسه */
body.rtl .sv_column.sv-span3 ul.sv-list5 li {
padding-right: 25px; /* مسافة كافية للأيقونة جهة اليمين */
padding-left: 0;
text-align: right;
}
/*هذا الكود يضيف أيقونة النجمة (Star) باستخدام الرمز \f005 من مكتبة FontAwesome، ويضعها في جهة اليسار. تُستخدم هذه الأيقونة عادةً لتمييز المميزات أو العناصر المفضلة في القوائم.
في النسخة العربية (RTL)، يجب نقل النجمة لتكون على يمين النص، مع التأكد من إزاحة النص قليلاً لليسار لتجنب التداخل.
🔄 التعديل المقترح لملف العربية (RTL)
أضف هذا الكود في ملف rtl.css لضبط موضع النجمة:*/
body.rtl .sv_column.sv-span3 ul.sv-list6 li:before {
/* نقل النجمة لجهة اليمين */
right: 0;
left: auto;
/* الحفاظ على رمز النجمة */
content: '\f005';
font-size: 14px; /* النجمة تبدو أفضل أحياناً بحجم أصغر قليلاً في العربية */
/* موازنة الارتفاع */
top: 4px;
}
/* ضبط المسافات في عنصر القائمة */
body.rtl .sv_column.sv-span3 ul.sv-list6 li {
padding-right: 25px; /* مسافة كافية للنجمة جهة اليمين */
padding-left: 0;
text-align: right;
}
/*🛠️ لماذا قمنا بهذه التغييرات؟
right: 0 و left: auto: في التصميم العربي، تظهر الأيقونات النقطية دائماً قبل النص (أي على يمينه). لذا نقوم بتثبيتها يميناً ونلغي القيمة اليسرى السابقة.
عكس الـ Padding: الكود الأصلي (LTR) يترك مساحة على اليسار. في العربية، يجب نقل هذه المساحة إلى اليمين (padding-right) لتوفير "ممر" للأيقونة بحيث لا يغطيها النص.
التناسق البصري: بما أن النجمة رمز متماثل (Symmetrical)، لا نحتاج لعكس شكلها (Flip) كما فعلنا في الأسهم، بل نكتفي فقط بنقل موقعها الجغرافي داخل العنصر.
✅ نصيحة إضافية:
إذا كانت هذه القائمة تُستخدم لتقييمات (Reviews) وتريد تلوين النجمة باللون الذهبي في النسخة العربية فقط:*/
body.rtl .sv_column.sv-span3 ul.sv-list6 li:before {
color: #FFD700; /* اللون الذهبي */
}
/*
===============
grid
===============
*/
/*هذا الكود هو حجر الأساس لنظام الشبكة (Grid System) في موقعك، حيث يحدد اتجاه اصطفاف الأعمدة والمسافات بينها. في النسخة العربية (RTL)، نحتاج لعكس "التعويم" (Float) والهامش (Margin) تماماً لضمان ترتيب المحتوى من اليمين إلى اليسار.
🔄 التعديل المقترح لملف العربية (RTL)
في ملف rtl.css أو داخل وسام body.rtl في ملفك الحالي، استخدم الكود التالي:*/
body.rtl .sv_column {
/* عكس اتجاه اصطفاف الأعمدة لتبدأ من اليمين */
float: right;
/* نقل المسافة الفاصلة لتصبح على يمين العمود */
margin-right: 2%;
/* إلغاء المسافة من جهة اليسار الموروثة من التصميم الإنجليزي */
margin-left: 0;
}
/*🛠️ لماذا هذا التعديل ضروري؟
اتجاه التدفق: القارئ العربي يبدأ من اليمين، لذا العمود الأول يجب أن يكون في أقصى اليمين، وهذا ما يفعله float: right.
توازن المسافات: في التصميم الإنجليزي، margin-left: 2% تدفع العمود بعيداً عن الجار الذي على يساره. في العربية، نحتاج لدفع العمود بعيداً عن الجار الذي على يمينه، لذا نستخدم margin-right.
إعادة الضبط (Reset): إذا لم تضع margin-left: 0; فقد يطبق المتصفح كلا الهامشين (الأيمن والأيسر) مما يؤدي إلى تصغير عرض الأعمدة وخراب التنسيق في السطر الواحد.
💡 ملاحظة هامة للأعمدة المتجاورة:
عادةً ما يكون للعمود الأول في السطر (أقصى اليمين في العربية) هامش صفر لكي يلتصق بحافة الحاوية. إذا كان لديك كود يلغي الهامش للعمود الأول، يجب عكسه أيضاً:*/
/* في الإنجليزية (LTR) */
.sv_column:first-child { margin-left: 0; }
/* في العربية (RTL) */
body.rtl .sv_column:first-child {
margin-right: 0;
margin-left: 0;
}
/*هذا الكود يضمن أن العمود الأول في السطر لا يحتوي على مسافة بادئة من جهة اليسار، لكي يلتصق تماماً بحافة الحاوية (Container) في التصميم الإنجليزي.
في النسخة العربية (RTL)، العمود الأول هو العمود الموجود في أقصى اليمين. لذا، يجب علينا نقل خاصية إلغاء المسافة من الجهة اليسرى إلى الجهة اليمنى.
🔄 التعديل المقترح لملف العربية (RTL)
يجب إضافة هذا الكود لضمان توازن المسافات في الشبكة (Grid) العربية:*/
body.rtl .sv_column:first-child {
/* إلغاء المسافة من اليمين للعمود الأول (الأيمن) */
margin-right: 0;
/* التأكد من إعادة المسافة لليسار إذا كانت موجودة */
margin-left: 0;
}
/*🛠️ لماذا هذا التعديل مهم جداً؟
المحاذاة البصرية: بدون هذا التعديل، سيظهر فراغ بنسبة 2% (حسب الكود السابق) بين حافة الموقع اليمنى وأول عمود، مما يجعل التصميم يبدو "مزاحاً" وغير متماثل.
تجنب الكسر (Layout Break): في أنظمة الشبكات، إذا كان لكل الأعمدة هامش (Margin)، فقد يتجاوز مجموع العرض الكلي نسبة 100% مما يؤدي لسقوط العمود الأخير إلى سطر جديد. إلغاء الهامش للعمود الأول يضمن بقاء الأعمدة في سطر واحد.
التوافق مع float: right: بما أننا جعلنا الأعمدة تطفو لليمين، فإن "نقطة الصفر" لكل سطر أصبحت الآن من جهة اليمين.
💡 نصيحة للمحترفين:
إذا كنت تستخدم نظام أعمدة يلتف لعدة أسطر (مثلاً 4 أعمدة في السطر)، فإن :first-child ستؤثر فقط على العمود الأول في الموقع ككل. إذا أردت التأثير على أول عمود في كل سطر جديد، يفضل استخدام nth-child:*/
/* إذا كان السطر يحتوي على عمودين (كما في كود sv-span3 الذي عرضته سابقاً) */
body.rtl .sv_column:nth-child(2n+1) {
margin-right: 0;
}
/*هذا الكود يحدد عرض الأعمدة الصغيرة جداً (التي تشغل مساحة 15% من عرض الحاوية). بما أنك قمت سابقاً بضبط التنسيقات العامة للأعمدة (.sv_column) لتعمل بخاصية float: right في النسخة العربية، فإن هذا العرض سيعمل بشكل صحيح تلقائياً.ومع ذلك، هناك ملاحظة تقنية هامة تتعلق بالحسابات الرياضية للمساحة في النسخة العربية (RTL):📏 تحليل المساحة (Grid Calculation)إذا كان لديك صف يحتوي على أعمدة من نوع .sv-span1 مع وجود الهامش الذي حددته سابقاً (margin: 2%)، يجب التأكد من أن مجموع العرض لا يتخطى 100% لكي لا ينهار التصميم.في النسخة العربية، الحساب سيكون كالتالي:العرض: 15%الهامش (Margin-right): 2%الإجمالي لكل عمود: 17%هذا يعني أنه يمكنك وضع 5 أعمدة كحد أقصى في السطر الواحد ($17\% \times 5 = 85\%$)، وسيبقى فراغ بسيط. أما إذا حاولت وضع 6 أعمدة، فسيقفز العمود الأخير لسطر جديد.🔄 التعديل المقترح (اختياري للتحسين)إذا وجدت أن الأعمدة العربية تبدو ضيقة جداً (لأن الكلمات العربية غالباً ما تكون أعرض من الإنجليزية)، يمكنك زيادة العرض قليلاً في ملف rtl.css:*/
body.rtl .sv-span1 {
width: 18%; /* زيادة بسيطة لتناسب الخطوط العربية العريضة */
/* التأكد من محاذاة النص للوسط أو اليمين داخل هذا العمود الضيق */
text-align: center;
}
/*هذا الكود يحدد عرض الأعمدة المتوسطة بنسبة 32%. بما أننا قمنا سابقاً بضبط الأعمدة لتطفو جهة اليمين في النسخة العربية (float: right) مع هامش قدره 2%، فإن هذا التنسيق سيعمل بشكل مثالي تقنياً.ومع ذلك، هناك قاعدة حسابية يجب الانتباه لها لضمان عدم "انهيار" السطر (أي سقوط العمود الأخير للأسفل) في الواجهة العربية:📏 الحساب الرياضي للمساحة (Grid Math)في النسخة العربية، يتم توزيع المساحة كالتالي:العرض (Width): 32%الهامش (Margin-right): 2%المجموع للعمود الواحد: 34%هذا يعني أن السطر الواحد يمكنه استيعاب 3 أعمدة كحد أقصى ($34 \times 3 = 102\%$).تنبيه: بما أن المجموع (102%) يتخطى الـ 100%، سيؤدي ذلك إلى سقوط العمود الثالث لسطر جديد.🔄 التعديل المقترح لملف العربية (RTL)لضمان بقاء 3 أعمدة في سطر واحد دون مشاكل، يفضل تقليل العرض أو الهامش قليلاً في ملف rtl.css:*/
body.rtl .sv-span2 {
/* تقليل العرض بنسبة بسيطة لضمان احتواء 3 أعمدة مع الهوامش */
width: 31.3%;
/* التأكد من محاذاة النص العربي لليمين */
text-align: right;
/* تعامل أفضل مع الكلمات الطويلة في العربية لكي لا تخرج عن الإطار */
word-wrap: break-word;
}
/*💡 نصيحة بخصوص الخطوط العربية (Cairo / Tajawal)
الأعمدة بعرض 32% غالباً ما تُستخدم لعرض "خدمات" أو "مميزات" (Features). الخطوط العربية تحتاج إلى مساحة أفقية أكبر من الإنجليزية، لذا:
تجنب استخدام letter-spacing (تباعد الحروف) لأنه يشوه شكل الكلمات العربية.
يفضل استخدام line-height: 1.6 لجعل النص داخل هذه الأعمدة مريحاً للعين.
📱 التجاوب مع الجوال (Mobile)
في الشاشات الصغيرة، عرض 32% سيكون ضيقاً جداً للنص العربي. يفضل إضافة هذا الكود لجعله عريضاً في الجوال:*/
@media (max-width: 768px) {
body.rtl .sv-span2 {
width: 100%;
margin-right: 0;
margin-bottom: 20px; /* مسافة بين الأعمدة عند ترتيبها عمودياً */
}
}
/*هذا الكود يحدد عرض الأعمدة الكبيرة بنسبة 48%، وهو ما يعني عادةً وجود عمودين فقط في السطر الواحد (حيث $48\% + 48\% = 96\% + \text{Margin}$).في النسخة العربية (RTL)، بما أننا قمنا بتحويل الأعمدة لتطفو جهة اليمين، سيعمل هذا العرض بشكل جيد، ولكن يجب التأكد من "تصفير" الهوامش بشكل صحيح لضمان بقاء العمودين بجانب بعضهما.🔄 التعديل المقترح لملف العربية (RTL)لضمان عدم سقوط العمود الثاني إلى سطر جديد، استخدم هذا التنسيق في ملف rtl.css:*/
body.rtl .sv-row .sv-span3 {
/* عرض العمود */
width: 48%;
/* التأكد من وجود مسافة فاصلة بين العمودين في الوسط */
margin-right: 0;
margin-left: 4%; /* نضع المسافة في اليسار لتدفع العمود الثاني */
/* محاذاة النص العربي */
text-align: right;
float: right;
}
/* العمود الأول (أقصى اليمين) يجب ألا يكون له هامش أيمن */
body.rtl .sv-row .sv-span3:first-child {
margin-right: 0;
}
/* العمود الثاني يجب ألا يكون له هامش أيسر لضمان الاحتواء */
body.rtl .sv-row .sv-span3:last-child {
margin-left: 0;
}
/*🛠️ لماذا استخدمنا نسبة 4% للهامش؟
بما أن العرض هو 48%، فإن العمودين معاً يشغلان 96%. يتبقى لدينا 4% وهي المساحة المثالية للفراغ (Gutter) بين العمودين.
في الإنجليزية: الهامش يكون margin-right: 4% للعمود الأول.
في العربية: الهامش يكون margin-left: 4% للعمود الأول (الأيمن) ليدفع العمود الثاني بعيداً عنه جهة اليسار.
💡 نصيحة لتحسين التصميم العربي:
إذا كان هذا العمود يحتوي على نصوص طويلة، فإن عرض 48% يعتبر ممتازاً للقرّاء العرب لأنه يوفر طول سطر مريح للعين (بين 8 إلى 12 كلمة في السطر)، وهو المعيار الذهبي لتجربة المستخدم (UX).*/
body.rtl .sv-row .sv-span3 p {
line-height: 1.8; /* لزيادة وضوح الحروف العربية */
font-size: 16px;
}
/*
==================
our team
==================
*/
/*هذا الكود هو المسؤول عن توسيط محتوى "فريق العمل" (Team Section). بما أن التنسيق الحالي هو center (التوسيط)، فهو يعمل بشكل جيد تقنياً في العربية والإنجليزية على حد سواء، لأن التوسيط لا يتأثر باتجاه القراءة.
ولكن، لجعل قسم فريق العمل يبدو احترافياً في النسخة العربية (RTL)، هناك بعض اللمسات الفنية التي يفضل إضافتها لضمان تناسق الأسماء والوظائف العربية.
🔄 التعديل والتحسين المقترح لملف العربية (RTL)
أضف هذا الكود في ملف rtl.css:*/
body.rtl .sv-team {
/* الحفاظ على التوسيط كخيار أساسي */
text-align: center;
/* ضبط اتجاه العناصر الداخلية لضمان ترتيب الأسماء العربية */
direction: rtl;
}
/* إذا كان هناك أسماء أعضاء الفريق ووظائفهم */
body.rtl .sv-team h3,
body.rtl .sv-team h4,
body.rtl .sv-team p {
/* ضمان عدم انحراف النصوص لليمين بقوة وبقائها في المنتصف */
text-align: center;
/* تحسين تباعد الأسطر للخطوط العربية */
line-height: 1.6;
}
/*🛠️ نصائح إضافية لقسم فريق العمل (Team Section):
أيقونات التواصل الاجتماعي: إذا كان لكل عضو فريق أيقونات (فيسبوك، تويتر، إلخ) أسفل صورته، تأكد أنها مصطفة في صف واحد وموسطة أيضاً:*/
body.rtl .sv-team .social-icons {
display: flex;
justify-content: center;
gap: 10px; /* مسافة متساوية بين الأيقونات */
}
/*هذا الكود يعالج تنسيق صور أعضاء الفريق، وبما أنه يعتمد على التوسيط التلقائي (margin: 0 auto) والانتقالات السلسة (transition)؛ فهو يعمل بشكل ممتاز في النسخة العربية دون الحاجة لتغييرات جذرية في الهيكل.
ومع ذلك، عند تطبيق التصميم العربي (RTL)، يفضل إضافة بعض التحسينات لضمان توافق "تأثيرات الحركية" (Animations) والمساحات مع النصوص العربية التي ستظهر أسفل الصور.
🔄 التعديل والتحسين المقترح لملف العربية (RTL)
أضف هذه اللمسات لضمان استجابة الصور بشكل أفضل مع المحتوى العربي:*/
body.rtl .sv-team .sv-member-image {
/* الحفاظ على التوسيط والمساحة السفلية */
margin: 0 auto 15px auto; /* زيادة بسيطة للمسافة لتناسب الخطوط العربية */
/* ضمان عدم حدوث مشاكل في الظهور عند استخدام الخطوط العربية العريضة */
display: block;
position: relative;
/* تنعيم الحواف إذا كنت تستخدم إطاراً دائرياً */
border-radius: 8px;
}
/* تأثير التكبير (Zoom) عند مرور الفأرة - اختياري وجميل */
body.rtl .sv-team .sv-member-image:hover img {
transform: scale(1.1);
transition: transform 0.3s ease-in-out;
}
/*🛠️ ملاحظات تقنية لتحسين العرض في العربية:
المسافة السفلية (margin-bottom): قمت بزيادتها قليلاً إلى 15px؛ لأن الحروف العربية الصاعدة (مثل الألف واللام) في الاسم الذي يظهر تحت الصورة قد تبدو قريبة جداً من حافة الصورة إذا ظلت المسافة 10px.
تأثير الانتقال (transition): الكود الخاص بك يغطي كافة الخصائص (all)؛ وهذا ممتاز لأنه سيشمل أي تغيير في الظلال (Shadows) أو الإطارات التي قد تضيفها لاحقاً في النسخة العربية.
التعامل مع الصور الدائرية: إذا كانت صور الفريق دائرية، تأكد من إضافة border-radius: 50%; داخل هذا الكود لضمان أن خاصية overflow: hidden تقص الزوايا بشكل صحيح.
💡 نصيحة بخصوص "الأيقونات العائمة":
إذا كان لديك أيقونات تظهر فوق الصورة عند مرور الفأرة (مثل روابط التواصل)، ستحتاج لعكس اتجاهها في العربية:*/
body.rtl .sv-member-image .overlay-icons {
right: 10px; /* بدلاً من left في الإنجليزية */
left: auto;
}
/*هذا الكود يضيف تأثير "الشفافية" عند مرور الفأرة على صور أعضاء الفريق. مثل بقية تأثيرات الصور، هذا الكود يعمل بشكل عام في اللغتين، ولكن لإضفاء لمسة احترافية تتناسب مع طبيعة المواقع العربية الحديثة، يفضل دمج تأثير الشفافية مع حركة بسيطة.
🔄 التعديل والتحسين المقترح لملف العربية (RTL)
في المواقع العربية، غالباً ما نستخدم تأثيراً أكثر وضوحاً عند التفاعل مع صور الفريق لإبراز العنصر. يمكنك إضافة الكود التالي في ملف rtl.css:*/
body.rtl .sv-team .sv-member-image:hover img {
opacity: 0.7; /* تقليل الشفافية قليلاً لزيادة التأثير */
/* إضافة حركة تكبير بسيطة (Zoom) تعطي انطباعاً بالتفاعل */
transform: scale(1.05);
/* ضمان انسيابية الحركة */
transition: all 0.4s ease-in-out;
}
/*🛠️ لماذا هذا التحسين؟
الوضوح البصري: الشفافية وحدها قد تجعل الصورة تبدو "باهتة" في بعض التصاميم. دمجها مع transform: scale يجعل العنصر يبدو وكأنه يقترب من المستخدم، وهو أسلوب متبع في تحسين تجربة المستخدم (UX).
سلاسة الحركة: رفع مدة الـ transition إلى 0.4s يعطي شعوراً بالفخامة والهدوء في الحركة، وهو ما يتناسب مع الخطوط العربية الانسيابية.
💡 فكرة إضافية (تراكب الألوان):
إذا كنت تريد وضع اسم الشخص أو أيقونات التواصل فوق الصورة عند ظهور الشفافية، يمكنك استخدام هذا التنسيق في العربية:*/
body.rtl .sv-team .sv-member-image::after {
content: "عرض الملف الشخصي"; /* نص يظهر عند التحويم */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
opacity: 0;
transition: 0.3s;
font-size: 14px;
}
body.rtl .sv-team .sv-member-image:hover::after {
opacity: 1;
}
/*هذا الكود يضمن أن صور أعضاء الفريق تغطي كامل عرض الحاوية الخاصة بها وأنها مصطفة عمودياً بشكل صحيح. هذا التنسيق يعمل بشكل تلقائي وممتاز في النسخة العربية (RTL) ولا يحتاج لتعديلات في الاتجاه.
ومع ذلك، في التصميم العربي، تظهر بعض التفاصيل المتعلقة بجمالية الصور وتناسقها مع النصوص العربية التي يفضل مراعاتها:
🔄 التحسين المقترح لملف العربية (RTL)
لضمان عدم حدوث تشويه في صور الفريق عند استخدام لغات مختلفة أو أحجام شاشات متنوعة، يفضل إضافة هذه الخصائص في ملف rtl.css:*/
body.rtl .sv-team .sv-member-image img {
/* ضمان تغطية الصورة للمساحة دون تمطيط (Stretch) */
width: 100%;
height: auto;
object-fit: cover;
/* تحسين المحاذاة */
vertical-align: middle;
/* إضافة انسيابية لعمليات الانتقال التي ضبطناها سابقاً */
transition: transform 0.3s ease;
}
/*🛠️ لماذا استخدمنا object-fit: cover؟
في قسم فريق العمل، قد يرفع المستخدمون صوراً بنسب أبعاد مختلفة (أحدهم صورة مربعة والآخر مستطيلة). خاصية object-fit: cover تضمن أن جميع الصور ستملأ الإطار المخصص لها بالكامل دون أن تبدو "مضغوطة" أو "ممطوطة"، مما يحافظ على المظهر الاحترافي للموقع.
💡 نصيحة لخطوط العناوين العربية تحت الصور:
بما أن الصورة تأخذ عرض 100% من العمود، فإن اسم الشخص الذي يليه سيكون محاذياً لحافة الصورة. يفضل تنسيق الاسم (الذي يكون غالباً h3 أو h4) كالتالي:*/
body.rtl .sv-team h3 {
margin-top: 15px;
font-weight: 700;
font-size: 18px;
/* التأكد من أن الأسماء الطويلة لا تكسر التصميم */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/*هذا الكود يحدد تنسيق اسم عضو الفريق. في النسخة العربية (RTL)، يظل التنسيق الأساسي (اللون والحجم) ثابتاً، ولكن نحتاج لتعديل نوع الخط وموازنة المساحات، لأن الخطوط العربية الافتراضية تظهر أصغر حجماً وأقل سماكة مقارنة بالإنجليزية عند نفس الدرجة.
🔄 التعديل والتحسين المقترح لملف العربية (RTL)
أضف هذا الكود في ملف rtl.css لضمان ظهور الأسماء بشكل بارز وواضح:*/
body.rtl .sv-team h4.sv-member-name {
/* الخطوط العربية تحتاج حجم أكبر قليلاً لتكون بنفس وضوح الإنجليزية */
font-size: 18px;
/* زيادة سماكة الخط لإعطاء اسم الشخص أهمية بصرية */
font-weight: 700;
/* موازنة المسافة السفلية */
margin-bottom: 8px;
/* لون أسود صريح أو رمادي غامق جداً */
color: #1a1a1a;
/* التأكد من محاذاة النص للمنتصف بما أن القسم موسط */
text-align: center;
}
/*🛠️ لماذا قمنا بهذه التحسينات؟
زيادة الحجم (18px): حرف "M" الإنجليزي يأخذ مساحة بصرية أكبر من حرف "م" العربي بنفس القياس. لذا، رفع الحجم بمقدار درجتين يجعل الاسم مريحاً للقراءة.
سماكة الخط (700): الخطوط العربية الانسيابية (مثل Cairo أو Tajawal) تبدو رائعة في العناوين عندما تكون عريضة (Bold).
المسافة (margin-bottom): الخط العربي يحتوي على حركات وأجزاء هابطة تحت السطر (مثل حرف الراء والواو)، زيادة المسافة تمنع تداخل الاسم مع "الوظيفة" أو "الوصف" الذي يليه.
💡 نصيحة إضافية للأسماء الطويلة:
في حال كان اسم الموظف ثلاثياً أو رباعياً وطويلاً جداً، يفضل إضافة هذا الكود لمنع الاسم من الانقسام لسطرين بشكل مشوه:*/
body.rtl .sv-team h4.sv-member-name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; /* يضيف نقاط (...) في حال كان الاسم أطول من العمود */
}
/*هذا الكود يحدد تنسيق المسمى الوظيفي (مثل: مدير تسويق، مطور ويب) الذي يظهر أسفل اسم العضو. في التصميم العربي، تحتاج النصوص الصغيرة والرمادية إلى عناية خاصة لضمان وضوح القراءة (Readability)، لأن الخطوط العربية بوزن خفيف ولون باهت قد تصبح صعبة القراءة.
🔄 التعديل والتحسين المقترح لملف العربية (RTL)
أضف هذا الكود في ملف rtl.css:*/
body.rtl .sv-team h6.sv-member-position {
/* الخطوط العربية في المقاسات الصغيرة تحتاج لزيادة طفيفة لتكون مقروءة */
font-size: 14px;
/* جعل اللون أغمق قليلاً من الرمادي العادي لتحسين التباين */
color: #757575;
/* تحسين تباعد الأسطر */
line-height: 1.5;
/* موازنة المسافة السفلية قبل أيقونات التواصل الاجتماعي */
margin-bottom: 12px;
/* جعل الخط متوسط السماكة ليتناسب مع طبيعة المسميات الوظيفية */
font-weight: 500;
}
/*🛠️ لماذا قمنا بهذه التحسينات؟
وضوح التباين (Contrast): اللون #9e9e9e فاتح جداً، ومع الخطوط العربية الرقيقة قد يختفي النص تقريباً. استخدام #757575 يضمن بقاء النص "ثانوياً" (Secondary) وفي نفس الوقت مقروءاً بوضوح.
حجم الخط (14px): في الويب، يُفضل ألا يقل حجم النص العربي عن 14px؛ لأن التفاصيل الدقيقة للحروف العربية (مثل النقاط والهمزات) تضيع في الأحجام الأصغر.
الوزن (500): استخدام وزن متوسط يساعد في إبراز النص دون أن ينافس اسم الشخص الأساسي.
💡 لمسة جمالية إضافية:
إذا كنت تريد تمييز المسمى الوظيفي بشكل عصري، يمكنك إضافة خلفية بسيطة جداً (Label Style) في النسخة العربية:*/
body.rtl .sv-team h6.sv-member-position {
display: inline-block;
background-color: #f5f5f5;
padding: 2px 10px;
border-radius: 4px;
font-size: 13px;
}
/*هذا الكود يحدد المسافة السفلية لأيقونات التواصل الاجتماعي الخاصة بعضو الفريق. في النسخة العربية (RTL)، التنسيق الأساسي للمسافة يظل صحيحاً، ولكن التحدي الأكبر في "أكواد التواصل الاجتماعي القصيرة" (Social Shortcodes) يكمن في ترتيب الأيقونات واتجاهها.
غالباً ما تكون هذه الأيقونات مصفوفة بجانب بعضها، وفي العربية يجب أن ينعكس ترتيبها (مثلاً: إذا كان فيسبوك أولاً من اليسار في الإنجليزية، يفضل أن يكون أولاً من اليمين في العربية).
🔄 التعديل والتحسين المقترح لملف العربية (RTL)
أضف الكود التالي في ملف rtl.css لضمان اصطفاف الأيقونات بشكل سليم:*/
body.rtl .sv-member-message .social-shortcode {
/* الحفاظ على المسافة السفلية */
margin-bottom: 15px;
/* التأكد من عكس اتجاه ترتيب الأيقونات */
display: flex;
justify-content: center; /* توسيط الأيقونات تحت المسمى الوظيفي */
flex-direction: row-reverse; /* عكس الترتيب لتبدأ الأيقونة الأولى من اليمين */
gap: 10px; /* توفير مساحة متساوية بين الأيقونات */
}
/* إذا كانت الأيقونات تستخدم الهوامش الجانبية بدلاً من gap */
body.rtl .sv-member-message .social-shortcode a {
margin-left: 5px;
margin-right: 5px;
}
/*🛠️ لماذا استخدمنا row-reverse؟
المنطق البصري: عندما يتصفح المستخدم العربي الموقع، تبدأ عينه من اليمين. استخدام row-reverse يضمن أن الأيقونة الأهم (أو الأولى في الكود) تظهر في الجهة اليمنى.
التمركز: بما أنك تستخدم .sv-team { text-align: center; }؛ فإن استخدام justify-content: center يضمن بقاء كتلة الأيقونات في منتصف البطاقة تماماً.
💡 لمسة جمالية (تأثير Hover):
بما أننا في قسم "فريق العمل"، يمكنك إضافة تأثير تفاعلي للأيقونات عند تمرير الفأرة يتناسب مع روح الموقع العربي:*/
body.rtl .sv-member-message .social-shortcode a:hover {
/* تحريك الأيقونة للأعلى قليلاً بدلاً من تغيير اللون فقط */
transform: translateY(-3px);
transition: transform 0.2s ease-in-out;
opacity: 0.8;
}
/*هذا الكود يحدد تصميم روابط أيقونات التواصل الاجتماعي (الدوائر أو المربعات الصغيرة) التي تظهر تحت عضو الفريق. بما أنها عناصر ثابتة الحجم (30px) وموسطة المحتوى، فهي تعمل بشكل جيد في النسخة العربية.
ولكن، لضمان مظهر احترافي في بيئة RTL، نحتاج للتأكد من تناسق الهوامش (Margins) وسلاسة التفاعل.
🔄 التعديل والتحسين المقترح لملف العربية (RTL)
أضف هذا الكود في ملف rtl.css:*/
body.rtl .sv-member-message .social-shortcode a {
/* الحفاظ على الأبعاد والتوسيط */
display: inline-block;
vertical-align: middle;
/* موازنة الهوامش الجانبية في العربية لضمان التباعد المتساوي */
margin: 0 4px;
/* تحسين ظهور الأيقونات (مثل FontAwesome) داخل الدائرة */
font-size: 14px;
/* التأكد من أن الإطار واللون يظهران بوضوح على الخلفيات البيضاء */
border-color: #d1d1d1;
color: #555;
}
/* تأثير التحويم (Hover) - تغيير اللون وتدوير بسيط */
body.rtl .sv-member-message .social-shortcode a:hover {
background-color: #f8f8f8;
border-color: #333;
color: #000;
/* إضافة حركة دوران خفيفة تعطي حيوية للتصميم العربي */
transform: rotate(10deg);
}
/*🛠️ ملاحظات تقنية لتحسين العرض:
line-height: أنت تستخدم 29px مع ارتفاع 30px. هذا ممتاز لتوسيط الأيقونة عمودياً بشكل دقيق. في بعض الخطوط العربية، إذا قمت بإضافة نص بجانب الأيقونة، قد تحتاج لجعلها 30px تماماً.
margin: في النسخة العربية، يفضل أن تكون المسافات بين الأيقونات واضحة لمنع نقرات الخطأ على شاشات اللمس، لذا اقترحت زيادة margin إلى 4px.
الدوران (Rotation): إضافة transform: rotate(10deg) عند التحويم هو لمسة جمالية تجعل الموقع يبدو حديثاً وتفاعلياً.
💡 نصيحة بخصوص الألوان:
إذا كنت تريد أن تأخذ كل أيقونة لون المنصة الخاصة بها عند تمرير الفأرة (مثلاً أزرق لفيسبوك)، يمكنك إضافة هذا الكود:*/
body.rtl .social-shortcode a.facebook:hover { color: #3b5998; border-color: #3b5998; }
body.rtl .social-shortcode a.twitter:hover { color: #1da1f2; border-color: #1da1f2; }
/*هذا الكود يحدد شكل "أيقونة التواصل الاجتماعي" عندما يمرر المستخدم الفأرة عليها (Hover)، حيث يتغير لون الخلفية والإطار إلى اللون الأزرق (#0091d5) ويتحول لون الأيقونة إلى الأبيض.
هذا التنسيق يعمل بشكل جمالي رائع في اللغتين، ولكن لإضفاء طابع احترافي على النسخة العربية (RTL)، يفضل التأكد من أن التغيير اللوني يتناغم مع الخطوط العربية، ويمكن إضافة حركة بسيطة لتعزيز تجربة المستخدم.
🔄 التعديل والتحسين المقترح لملف العربية (RTL)*/
body.rtl .sv-team .sv-member-message .social-shortcode a:hover {
color: #fff;
background: #0091d5;
border-color: #0091d5;
/* إضافة تأثير رفع بسيط للأيقونة يتناسب مع الذوق العربي في التصميم */
transform: translateY(-5px);
/* زيادة نعومة الحركة */
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
/*🛠️ لماذا قمنا بهذه التحسينات؟
transform: translateY(-5px): هذا التأثير يجعل الأيقونة تبدو وكأنها ترتفع عن الصفحة عند لمسها، وهو أسلوب بصري فعال لجذب الانتباه في المواقع العربية التي تعتمد على العناصر التفاعلية.
cubic-bezier: بدلاً من ease العادية، يعطي هذا المنحنى الحركي انسيابية أكثر فخامة (أسرع في البداية وأهدأ في النهاية).
التوافق البصري: اللون الأزرق المستخدم (#0091d5) يعتبر لوناً قوياً وواضحاً، ومع تحول الأيقونة للأبيض، تزداد نسبة التباين (Contrast)، مما يسهل على المستخدم رؤية الأيقونة بوضوح.
💡 نصيحة إضافية لسرعة الموقع:
لقد لاحظت تكرار كود transition في أكثر من مكان. لتنظيف الكود وجعله أسرع في التحميل، يمكنك وضع transition في الحالة العادية للعنصر (بدون Hover) وسيقوم المتصفح بتطبيقه تلقائياً عند الدخول والخروج من حالة الـ Hover.*/
/* يوضع في الحالة العادية */
body.rtl .sv-member-message .social-shortcode a {
transition: all 0.3s ease;
}
/*
==================
testimonial
==================
*/
/*هذا الكود يقوم بتوسيط محتوى "آراء العملاء" (Testimonials). بما أن التوسيط (center) هو تنسيق محايد، فإنه يعمل بشكل جيد في كلا الاتجاهين (اليمين واليسار).
ولكن، لضمان أن يظهر قسم آراء العملاء بشكل احترافي ومتوافق تماماً مع تجربة المستخدم العربي، هناك بعض اللمسات الفنية الضرورية، خاصة فيما يتعلق بـ علامات الاقتباس وانسيابية النص.
🔄 التعديل والتحسين المقترح لملف العربية (RTL)
أضف هذه الخصائص في ملف rtl.css لضمان محاذاة النص العربي ووضوحه:*/
body.rtl .sv-testimonial {
/* الحفاظ على التوسيط */
text-align: center;
/* ضمان تدفق النص من اليمين لليسان (مهم لعلامات الترقيم) */
direction: rtl;
/* تحسين تباعد الأسطر للخطوط العربية */
line-height: 1.8;
/* إضافة مساحة تنفس للنص */
padding: 20px;
}
/* تحسين شكل الاقتباس إذا كان مستخدماً كـ Before */
body.rtl .sv-testimonial:before {
/* إذا كان هناك رمز اقتباس، قد يحتاج لعكس اتجاهه */
display: inline-block;
transform: scaleX(-1); /* عكس علامة الاقتباس لتناسب العربية */
margin-bottom: 10px;
color: #ccc;
}
/*هذا الكود يحدد شكل الحاوية (Container) التي تظهر فيها صورة العميل داخل قسم آراء العملاء. بما أنك قمت سابقاً بتوسيط القسم بالكامل (text-align: center)، فإننا نحتاج للتأكد من أن حاوية الصورة نفسها تتوسط الصفحة في النسخة العربية (RTL).
🔄 التعديل والتحسين المقترح لملف العربية (RTL)
أضف هذا الكود في ملف rtl.css لضمان ظهور صور العملاء بشكل متناسق:
CSS*/
body.rtl .sv-testimonial .sv-client-image {
/* التأكد من توسيط الصورة في منتصف السطر */
margin: 0 auto 20px auto;
/* تحديد أبعاد ثابتة للصورة لجعلها تبدو كأيقونة احترافية */
width: 80px;
height: 80px;
/* جعل الصورة دائرية تماماً (أسلوب مفضل في المواقع العربية) */
border-radius: 50%;
/* التأكد من قص أي أجزاء زائدة من الصورة */
overflow: hidden;
/* إضافة إطار رقيق لتمييز الصورة عن الخلفية */
border: 3px solid #f0f0f0;
/* لمنع تداخل العناصر */
display: block;
}
/*هذا الكود يعالج الصورة الفعلية داخل حاوية آراء العملاء، مع استخدام تقنيات مثل translateZ(0px) لتحسين أداء الرسوم المتحركة (Hardware Acceleration) ومنع الوميض أثناء الحركة.
في النسخة العربية (RTL)، يظل المنطق البرمجي ثابتاً، ولكن سنقوم بتنقيح الكود لإزالة التكرار وضمان أن الصور التي يرفعها العملاء تظهر بأفضل شكل ممكن بغض النظر عن أبعادها الأصلية.
🔄 التعديل والتحسين المقترح لملف العربية (RTL)
أضف هذا الكود لضمان انسيابية عالية للصور في الواجهة العربية:*/
body.rtl .sv-testimonial .sv-client-image img {
width: 100%;
height: 100%; /* لضمان ملء الدائرة بالكامل */
/* ميزة أساسية: تمنع تمطيط وجه العميل إذا كانت الصورة غير مربعة */
object-fit: cover;
/* تحسين المحاذاة مع الخطوط العربية */
vertical-align: middle;
/* الحفاظ على أداء المحرك الرسومي */
transform: translateZ(0px);
-webkit-transform: translateZ(0px);
/* تنظيف كود الانتقال وجعله أكثر تحديداً للمتصفح */
transition: transform 0.3s ease-in-out;
}
/* تأثير اختياري عند تمرير الفأرة يتناسب مع المواقع الحديثة */
body.rtl .sv-testimonial .sv-client-image:hover img {
transform: scale(1.1) translateZ(0px);
}
/*هذا الكود يمنح صورة العميل تأثيراً تفاعلياً عند مرور الفأرة، حيث يتم تكبير الصورة بنسبة 10% مع تقليل الشفافية قليلاً. هذا النوع من المؤثرات البصرية يضيف حيوية للموقع، وهو يعمل بشكل ممتاز في اللغتين العربية والإنجليزية.
لتحسين هذا الكود وضمان عمله بسلاسة تامة داخل بيئة RTL، يفضل تنظيمه وإضافة لمسة احترافية تتعلق بمركز التكبير.
🔄 التعديل والتحسين المقترح لملف العربية (RTL)
في النسخة العربية، يفضل أن يكون مركز التكبير (Transform Origin) متناسقاً، كما يمكننا تحسين الأداء بجعل الـ transition في الحالة الأساسية وليس فقط عند الـ hover.
أضف هذا الكود في ملف rtl.css:*/
/* أولاً: نضمن وجود الانتقال في الحالة العادية ليكون الدخول والخروج سلساً */
body.rtl .sv-testimonial .sv-client-image img {
transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
-webkit-transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
/* ثانياً: تأثير التحويم المعدل */
body.rtl .sv-testimonial .sv-client-image:hover img {
transform: scale(1.1);
-webkit-transform: scale(1.1);
opacity: 0.85; /* تقليل بسيط إضافي للشفافية لزيادة التأثير البصري */
/* التأكد من أن التكبير يبدأ من المنتصف تماماً */
transform-origin: center center;
}
/*هذا الكود يحدد تنسيق اسم العميل (صاحب الرأي). في النسخة العربية (RTL)، يظل اللون الأسود خياراً كلاسيكياً، ولكن نظراً لطبيعة الخطوط العربية، يفضل إجراء تعديلات بسيطة على الحجم والوزن لضمان أن يكون الاسم بارزاً وواضحاً كعنوان للشهادة.
🔄 التعديل والتحسين المقترح لملف العربية (RTL)
أضف هذا الكود في ملف rtl.css لضبط مظهر الاسم:*/
body.rtl .sv-testimonial .sv-client-name {
/* الخطوط العربية تبدو أصغر، لذا نرفع الحجم قليلاً */
font-size: 16px;
/* جعل الاسم عريضاً (Bold) لإبرازه عن نص الشهادة */
font-weight: 700;
/* اللون الأسود الصريح */
color: #000;
/* زيادة المسافة السفلية قليلاً لتجنب تداخل النقاط العربية مع النص بالأسفل */
margin-bottom: 8px;
/* التأكد من التمركز بما أن القسم موسط */
display: block;
text-align: center;
}
/*هذا الكود مخصص لتعريف المسمى الوظيفي للعميل (مثل: مدير تنفيذي، رائد أعمال). في النسخة العربية (RTL)، يفضل دائماً جعل النصوص الثانوية (ذات اللون الرمادي) أكثر وضوحاً، لأن تفاصيل الخط العربي تضيع بسهولة عند استخدام ألوان باهتة ومقاسات صغيرة.
🔄 التعديل والتحسين المقترح لملف العربية (RTL)
أضف التعديلات التالية في ملف rtl.css لضمان التوازن البصري:*/
body.rtl .sv-testimonial .sv-client-position {
/* الخط العربي الصغير يحتاج حجماً أوضح قليلاً */
font-size: 14px;
/* زيادة تباين اللون (Contrast) لسهولة القراءة */
color: #757575;
/* جعل الخط بوزن خفيف لتمييزه عن اسم العميل */
font-weight: 400;
/* تحسين تباعد الأسطر */
line-height: 1.4;
/* التأكد من التمركز */
display: block;
text-align: center;
}
/*هذا الكود يضيف مسافة علوية بمقدار 20px لكتلة أيقونات التواصل الاجتماعي الخاصة بالعميل، ليفصلها عن نص الشهادة أو المسمى الوظيفي.
من الناحية التقنية، الهامش العلوي (margin-top) لا يتأثر باتجاه الصفحة، ولكن في التصميم العربي (RTL)، غالباً ما نحتاج إلى موازنة هذه المسافة لأن الخطوط العربية تحتوي على "بروزات" علوية وسفلية (مثل الألف واللام) قد تجعل المسافة تبدو بصرياً أصغر مما هي عليه في الإنجليزية.
🔄 التعديل والتحسين المقترح لملف العربية (RTL)
لضمان مظهر متناسق، يفضل استخدام Flexbox لتنظيم هذه الأيقونات في النسخة العربية لضمان توسيطها أو محاذاتها لليمين بدقة:*/
body.rtl .sv-client-message .social-shortcode {
/* زيادة طفيفة للمسافة لتناسب ارتفاع الحروف العربية */
margin-top: 25px;
/* استخدام Flexbox لضمان توزيع متساوٍ للأيقونات */
display: flex;
justify-content: center; /* توسيط الأيقونات تحت نص العميل */
gap: 10px; /* مسافة ثابتة بين كل أيقونة وأخرى */
/* لضمان عدم تأثر الكتلة بأي إزاحة قديمة */
margin-right: 0;
margin-left: 0;
}
/*هذا الكود يحدد المظهر الأساسي لأزرار التواصل الاجتماعي الخاصة بالعميل (التي تظهر عادةً على شكل دوائر أو مربعات صغيرة). بما أن الأبعاد ثابتة (30px) والمساحات متساوية (0 3px)؛ فإن التنسيق سليم جداً للنسخة العربية، ولكن يمكننا تحسين "تجربة اللمس" ودقة التوسيط.
🔄 التعديل والتحسين المقترح لملف العربية (RTL)
في النسخة العربية، يفضل أحياناً استخدام flexbox لضمان توسيط الأيقونة (مثل أيقونات FontAwesome) داخل المربع بدقة متناهية، بدلاً من الاعتماد فقط على line-height.
أضف هذا الكود في ملف rtl.css:*/
body.rtl .sv-client-message .social-shortcode a {
/* الحفاظ على الخصائص الأساسية */
border: 1px solid #e4e4e4;
color: #727272;
width: 30px;
height: 30px;
display: inline-flex; /* التبديل إلى flex لضمان التوسيط الدقيق */
align-items: center;
justify-content: center;
/* موازنة الهوامش الجانبية */
margin: 0 4px;
/* إزالة line-height القديم لأنه لم يعد مطلوباً مع flex */
line-height: normal;
/* تحسين شكل الأيقونة في العربية */
font-size: 14px;
transition: all 0.3s ease;
}
/* حالة التحويم لتعزيز التفاعل */
body.rtl .sv-client-message .social-shortcode a:hover {
background-color: #420537;
border-color: #420537;
color: #fff;
transform: scale(1.1);
}
/*هذا الكود يحدد تأثير "التحويم" (Hover) لأيقونات التواصل الاجتماعي الخاصة بالعملاء. اللون الأزرق المستخدم (#0091d5) هو لون تفاعلي ممتاز، وتحويل الأيقونة للون الأبيض يعطي تبايناً عالياً يسهل على المستخدم رؤيته بوضوح.
في النسخة العربية (RTL)، التنسيق اللوني لا يحتاج لتغيير، ولكن سنقوم بإضافة لمسات برمجية تضمن سلاسة الحركة وتناسقها مع بقية أجزاء الموقع التي قمنا بتعديلها.
🔄 التعديل والتحسين المقترح لملف العربية (RTL)
لضمان أن تكون الحركة "ناعمة" في الاتجاهين (عند وضع الفأرة وعند إبعادها)، يفضل التأكد من وجود transition في الحالة الأساسية للعنصر. أضف هذا التعديل في rtl.css:*/
/* تحسين الحالة الأساسية لضمان سلاسة الخروج من الـ Hover */
body.rtl .sv-client-message .social-shortcode a {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* تأثير التحويم للنسخة العربية */
body.rtl .sv-client-message .social-shortcode a:hover {
color: #fff;
background-color: #420537;
border-color: #420537;
/* إضافة حركة بسيطة للأعلى تعطي شعوراً بالتفاعل الحيوي */
transform: translateY(-3px);
/* إضافة ظل خفيف جداً بنفس لون الأيقونة ليعطي عمقاً (Glow Effect) */
box-shadow: 0 4px 12px rgba(0, 145, 213, 0.3);
}
/*
============
============
*/
/*هذا الكود يحدد المسافة السفلية لعنصر المطويات (Accordion/Toggle). برمجياً، الهامش السفلي (margin-bottom) لا يحتاج لتغيير اتجاه، ولكن في النسخة العربية (RTL)، غالباً ما نحتاج لضبط العناصر الداخلية للمطوية (مثل العنوان وأيقونة الفتح/الإغلاق) لضمان سهولة الاستخدام.
🔄 التعديل والتحسين المقترح لملف العربية (RTL)
في المطويات العربية، يجب أن يكون العنوان محاذياً لليمين، والأيقونة (السهم أو علامة +) منزاحة لليسار. أضف هذا الكود في ملف rtl.css:*/
body.rtl .sv_toggle {
/* زيادة طفيفة للمسافة لتناسب تباعد الأسطر في الخطوط العربية */
margin-bottom: 12px;
/* ضمان اتجاه النص من اليمين لليسار */
direction: rtl;
text-align: right;
}
/* تحسين شكل العنوان داخل المطوية */
body.rtl .sv_toggle .sv_toggle_title {
padding-right: 15px; /* مسافة من اليمين بدلاً من اليسار */
padding-left: 40px; /* ترك مساحة للأيقونة في جهة اليسار */
cursor: pointer;
}
/*هذا الكود هو الجزء المسؤول عن إخفاء محتوى المطوية (Accordion Content) عندما تكون الحالة "مغلقة" (.close). برمجياً، خاصية display: none تعمل بشكل مثالي في النسخة العربية ولا تحتاج لتغيير، لأنها تخفي العنصر تماماً من الشاشة.
ولكن، لضمان أن يظهر المحتوى بشكل صحيح عند فتحه في النسخة العربية (RTL)، نحتاج لضبط المحاذاة والهوامش الداخلية لضمان تجربة مستخدم سلسة.
🔄 التعديل والتحسين المقترح لملف العربية (RTL)
أضف هذا الكود لضبط شكل المحتوى عندما يكون ظاهراً:*/
body.rtl .sv_toggle .sv_toggle_content {
/* التأكد من محاذاة النص لليمين عند فتح المطوية */
text-align: right;
/* عكس الهوامش الداخلية: إذا كان هناك padding من اليسار في الإنجليزية، نعكسه لليمين */
padding: 15px 20px 15px 10px; /* الأعلى، اليمين، الأسفل، اليسار */
/* تحسين تباعد الأسطر للنصوص العربية الطويلة */
line-height: 1.8;
/* لون الخط ليكون مريحاً للقراءة */
color: #555;
}
/* في حال وجود حدود جانبية (Border) للمحتوى */
body.rtl .sv_toggle.open .sv_toggle_content {
border-right: 3px solid #420537; /* تمييز المحتوى المفتوح بخط جانبي يمين */
border-left: none;
}
/*هذا الكود يحدد المظهر "النشط" أو "المفتوح" لعنوان المطوية (Accordion)، حيث يتحول الخلفية إلى اللون الأزرق والنص إلى الأبيض لتمييز القسم المفتوح حالياً.
في النسخة العربية (RTL)، التنسيق اللوني ممتاز، ولكن التصميم يحتاج لضبط الحواف والهوامش الداخلية، لأن الخطوط العربية على خلفية ملونة داكنة تحتاج لمساحة "تنفس" أكبر لتبدو احترافية.
🔄 التعديل والتحسين المقترح لملف العربية (RTL)
أضف هذا الكود لضمان ظهور العنوان المفتوح بشكل متناسق مع اتجاه اليمين:*/
body.rtl .sv_toggle.open .sv_toggle_title,
body.rtl .sv_toggle_title.active {
background: #420537;
color: #fff;
/* الخط العربي يحتاج سمكاً أكبر قليلاً ليظهر بوضوح على اللون الأزرق */
font-weight: 600;
/* ضبط الحواف المربعة أو الدائرية لتبدأ من اليمين */
border-radius: 4px 0 0 4px; /* مثال: حواف دائرية من جهة اليسار فقط في العربية */
/* موازنة المسافات الداخلية (تبديل padding-left بـ padding-right) */
padding-right: 20px;
padding-left: 10px;
/* ضمان أن أيقونة السهم (إذا وجدت) تتحرك لليسار */
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row-reverse;
}
/*هذا الكود يضمن أن الأيقونة (التي غالباً ما تكون علامة + أو سهم) المضافة عبر العنصر المستعار :before ستتحول للون الأبيض عندما تكون المطوية مفتوحة، لتتناسق مع لون النص والخلفية الزرقاء التي أعددناها سابقاً.
في النسخة العربية (RTL)، التحدي ليس في اللون، بل في مكان ظهور هذه الأيقونة. في التصميمات العربية، يفضل أن يكون النص على اليمين والأيقونة على اليسار، أو العكس تماماً، لضمان سهولة المسح البصري.
🔄 التعديل والتحسين المقترح لملف العربية (RTL)
إذا كانت الأيقونة تظهر في الجهة الخاطئة، استخدم هذا الكود لضبط تموضعها ولونها في rtl.css:*/
body.rtl .sv_toggle.open .sv_toggle_title:before,
body.rtl .sv_toggle_title.active:before {
color: #fff; /* الحفاظ على اللون الأبيض */
/* إذا كانت الأيقونة متموضعة بشكل مطلق (Absolute) */
left: 20px; /* وضع الأيقونة جهة اليسار في العربية */
right: auto; /* إلغاء أي تموضع من جهة اليمين */
/* إذا كانت الأيقونة تعتمد على الهوامش */
margin-left: 10px;
margin-right: 0;
/* تحسين حجم الأيقونة لتناسب الخطوط العربية العريضة */
font-size: 18px;
}
/*هذا الكود يحدد المظهر الأساسي لعنوان المطوية (Toggle Title) مثل الإطار الأزرق، المسافات الداخلية، وشكل مؤشر الفأرة.
بما أنك تعاني من اختفاء بعض العناصر (مثل أيقونة السلة سابقاً)، يجب أن تنتبه هنا إلى أن استخدام position: relative هو أمر صحيح، ولكن في النسخة العربية (RTL)، قد تحتاج لضبط الهوامش (Padding) لضمان عدم تداخل النص مع الأيقونات التي تظهر عادةً داخل هذا العنوان.
🔄 التعديل والتحسين المقترح لملف العربية (RTL)
في النسخة العربية، يجب عكس اتجاه الحشوة (Padding) إذا كانت الأيقونة ستوضع في جهة اليمين، أو التأكد من توازن المسافات إذا كانت الأيقونة في اليسار.
أضف هذا الكود في ملف rtl.css:*/
body.rtl .sv_toggle_title {
/* عكس المسافات: اليمين 15px واليسار 8px (أو حسب الحاجة) */
padding: 8px 15px 8px 15px;
/* محاذاة النص لليمين */
text-align: right;
/* لضمان سلاسة حركة الإطار عند تغيير اللغة */
transition: all 0.3s ease;
}
/* إذا كنت تستخدم أيقونة (+/-) داخل العنوان */
body.rtl .sv_toggle_title::after {
/* وضع الأيقونة في أقصى اليسار في النسخة العربية */
position: absolute;
left: 15px;
right: auto;
}
/*هذا الكود هو المسؤول عن إظهار أيقونة السهم (رقم الكود f107 في مكتبة FontAwesome) داخل عنوان المطوية. بما أنك ذكرت سابقاً أن رمز السلة اختفى، فهذا الكود يعطينا مفتاحاً مهماً جداً لحل المشكلة وتنسيق النسخة العربية في نفس الوقت.
1. لماذا اختفى رمز السلة؟ (الاحتمال الأكبر)
بما أنك تستخدم font-family: FontAwesome; هنا، فإذا قمت بتحميل ملف CSS لا يحتوي على رابط مكتبة الأيقونات، أو إذا كان هناك تعارض في إصدارات FontAwesome، ستختفي أيقونة السهم وأيقونة السلة معاً.
تأكد من وجود هذا السطر في ملف HTML (الهيدر):
2. التعديل الضروري للنسخة العربية (RTL)
في النسخة الإنجليزية، السهم موجود على اليمين (right: 15px). في العربية، يجب نقل السهم إلى اليسار لكي لا يتداخل مع بداية النص العربي الذي يبدأ من اليمين.
أضف هذا الكود في ملف rtl.css:*/
body.rtl .sv_toggle_title:before {
/* نقل الأيقونة من اليمين إلى اليسار */
left: 15px;
right: auto;
/* التأكد من استخدام نفس مكتبة الأيقونات */
font-family: FontAwesome;
/* موازنة المحاذاة العمودية إذا لزم الأمر */
top: 50%;
transform: translateY(-50%);
}
/* تعديل مسافة النص لترك مساحة للأيقونة في جهة اليسار */
body.rtl .sv_toggle_title {
padding-right: 15px; /* مسافة بسيطة من اليمين لبداية النص */
padding-left: 40px; /* مسافة كبيرة من اليسار مكان السهم */
}
/*هذا الكود يضيف تأثير "التحويم" (Hover) بحيث تتغير خلفية عنوان المطوية إلى اللون الأزرق والنص إلى الأبيض عند مرور الفأرة. هذا التأثير ممتاز لتعزيز تجربة المستخدم (UX) لأنه يشعر الزائر بأن العنصر قابل للتفاعل.
فيما يخص اختفاء رمز السلة، هناك ملاحظة هامة جداً في كود الـ Hover قد تكون هي السبب إذا كنت تستخدم أيقونات تعتمد على الشفافية أو إذا كان هناك تداخل في الطبقات.
🔄 التعديل المقترح للنسخة العربية (RTL) مع حل مشكلة الأيقونات
أضف هذا الكود لضمان سلاسة الحركة وتجنب اختفاء الرموز:*/
body.rtl .sv_toggle_title:hover {
background: #420537;
color: #fff;
}
/* ضمان تحول لون أيقونة السهم للأبيض عند التحويم حتى لا تختفي في الخلفية الزرقاء */
body.rtl .sv_toggle_title:hover:before {
color: #fff !important;
}
/* تحسين الأداء: جعل الانتقال محدداً بدلاً من All */
body.rtl .sv_toggle_title {
transition: background 0.3s ease, color 0.3s ease;
}
/*هذا الكود يضمن بقاء أيقونة السهم (أو علامة +) مرئية باللون الأبيض عند تمرير الفأرة على عنوان المطوية، لأن الخلفية تتحول للأزرق في تلك اللحظة.
أما بخصوص اختفاء رمز السلة الذي تعاني منه، فوجود هذا الكود يؤكد فرضية مهمة جداً: المشكلة ليست في الحذف، بل في "ترتيب الطبقات" أو "اللون".
🔍 لماذا يختفي رمز السلة؟ (التحليل بناءً على كودك الأخير)
بما أنك تستخدم عناصر :before بكثرة، فإليك الأسباب التقنية التي قد تكون أخفت السلة:
تضارب الألوان (Color Masking): إذا كان رمز السلة مبرمجاً ليأخذ لون العناصر المجاورة (Inherit)، وبما أنك تعطي أوامر بتغيير الألوان إلى الأبيض #fff عند الـ hover، فقد يكون الرمز قد تحول للأبيض على خلفية بيضاء فاصبح "مخفياً" وهو موجود.
انهيار مكتبة الخطوط (Font Stack): أنت تستخدم الأيقونات عبر الـ CSS. إذا كان هناك أي خطأ في كتابة كود FontAwesome في ملفك، ستتحول كل الأيقونات (السلة، السهم، التواصل الاجتماعي) إلى مربعات فارغة أو تختفي.
ترتيب الـ CSS (Specificity): إذا كان لديك كود عام في الأعلى يقول * { color: transparent; } أو شيئاً مشابهاً، ثم لم تقم بتعريف لون السلة بدقة، ستختفي.
🔄 التعديل المقترح للنسخة العربية (RTL)
في ملف rtl.css الخاص بك، تأكد من دمج حركة الأيقونة مع اللون لضمان تجربة مستخدم احترافية:*/
body.rtl .sv_toggle_title:hover:before {
/* ضمان اللون الأبيض */
color: #fff !important;
/* إضافة حركة بسيطة للأيقونة عند التحويم (اختياري) */
transform: translateY(-50%) scale(1.2);
left: 12px; /* تقريبها قليلاً من الحافة اليسرى */
}
/* لضمان عدم اختفاء الأيقونة الأصلية */
body.rtl .sv_toggle_title:before {
transition: all 0.3s ease;
}
/*هذا الكود يحدد شكل "صندوق المحتوى" الذي يظهر عند فتح المطوية. بما أنه يملك border-top: none; فهو مصمم ليلتصق تماماً بالعنوان العلوي الذي لديه إطار بالفعل، مما يعطي مظهراً متصلاً واحترافياً.
أما بخصوص اختفاء رمز السلة، فاستخدام خاصية border و padding هنا لا يؤثر مباشرة، لكن إذا كان هناك كود "عائم" (Floating) أو مشكلة في "إغلاق الوسوم" (Tags) في HTML داخل هذا المحتوى، فقد يؤدي ذلك لإزاحة العناصر العلوية (مثل السلة) خارج مكانها.
🔄 التعديل والتحسين المقترح لملف العربية (RTL)
في النسخة العربية، نحتاج لضبط محاذاة النص داخل هذا الصندوق لضمان سهولة القراءة.
أضف هذا في ملف rtl.css:*/
body.rtl .sv_toggle_content {
/* التأكد من محاذاة النص لليمين */
text-align: right;
/* عكس اتجاه الهوامش الداخلية إذا لزم الأمر */
padding: 10px 20px 10px 15px;
/* تحسين شكل الإطار ليتناسب مع الخطوط العربية */
border: 1px solid #420537;
border-top: none;
/* إضافة سمك خط جهة اليمين لتمييز المحتوى */
border-right: 3px solid #420537;
}
/*هذا الكود يقوم بإجبار الأعمدة التي من المفترض أن تأخذ نصف مساحة الشاشة (span6 عادةً تعني 50%) على أخذ المساحة الكاملة 100%. هذا التعديل يجعل التصميم يبدو كقائمة عمودية (One Column Layout).
بما أنك تعاني من اختفاء رمز السلة، فإن هذا الكود تحديداً قد يكون هو "المتهم الأول" الآن، وإليك السبب:
🔍 لماذا اختفى رمز السلة بسبب هذا الكود؟
الإزاحة لأسفل (Pushing Down): إذا كانت "سلة التسوق" موجودة داخل عمود بجانب عناصر أخرى في الهيدر، فإن تحويل العرض إلى 100% سيؤدي إلى دفع السلة للسطر التالي. إذا كان الهيدر له ارتفاع ثابت (height) أو خاصية overflow: hidden؛ فستختفي السلة تماماً لأنها خرجت عن حدود الحاوية.
تغطية العناصر (Overlapping): عندما يأخذ العنصر عرض 100%، فإنه قد يتمدد فوق عناصر أخرى متموضعة بشكل مطلق (absolute) مثل أيقونة السلة، مما يجعلها خلفه وغير قابلة للرؤية أو النقر.
🔄 التعديل المقترح للنسخة العربية (RTL)
في النسخة العربية، تأكد من أن هذا التغيير لا يؤثر على توازن العناصر في الهيدر. يفضل دائماً حصر هذا التعديل في الشاشات الصغيرة (الجوال) فقط، أو استثناء الهيدر منه:*/
/* اجعل الأعمدة 100% فقط داخل محتوى الصفحة، وليس الهيدر */
body.rtl .page-content .sv_column.sv-span6 {
width: 100%;
float: right; /* ضمان المحاذاة لليمين في العربية */
margin-bottom: 20px; /* إضافة مسافة بين الأعمدة بعد أن أصبحت فوق بعضها */
}
/* حل مشكلة اختفاء السلة في الهيدر */
body.rtl .top-header .sv_column {
width: auto !important; /* السماح لعناصر الهيدر بالحفاظ على حجمها الطبيعي */
}
/*
===================
horizontal tab
===================
*/
/*هذا الكود يضيف مساحة عمودية (Margin-bottom) أسفل العناصر التي تحمل كلاس .horizontal. الغرض منه هو منع تلاصق الأقسام الأفقية مع بعضها البعض.
في النسخة العربية (RTL)، هذا الكود يعمل بشكل سليم لأنه يتحكم في المسافة "الأسفل"، ولكن إذا كانت هذه العناصر الأفقية تحتوي على صور أو نصوص مصفوفة بجانب بعضها، فقد تواجه مشكلة في المحاذاة الجانبية.
🔄 التعديل والتحسين المقترح لملف العربية (RTL)
إذا كان الكلاس .horizontal يُستخدم لتنسيق صفوف (Rows) تحتوي على أعمدة، يفضل التأكد من توزيع المسافات بشكل صحيح في العربية:*/
body.rtl .horizontal {
margin-bottom: 30px;
/* التأكد من إزالة أي تعارض مع الهوامش الجانبية */
margin-left: 0;
margin-right: 0;
/* إذا كان الصف يحتوي على عناصر عائمة (Floated elements) */
display: block;
clear: both;
}
/*هذا الكود ينظم عناوين التبويبات (Tabs) لتظهر بجانب بعضها البعض أفقياً. استخدام display: inline-block ممتاز هنا لأنه يسمح للتبويبات بالاصطفاف في سطر واحد مع الحفاظ على التحكم في الهوامش والحشو.
بالنسبة للنسخة العربية (RTL)، التنسيق يحتاج للمسات بسيطة لضمان أن التبويبات تبدأ من اليمين بشكل طبيعي وتستخدم خطوطاً تتناسب مع المساحة المحدودة للعناوين.
🔄 التعديل والتحسين المقترح لملف العربية (RTL)
أضف هذا الكود لضبط اتجاه التبويبات في rtl.css:*/
body.rtl .horizontal .sv_tab_group {
/* التأكد من أن الحاوية تبدأ من اليمين */
text-align: right;
direction: rtl;
}
body.rtl .horizontal .sv_tab_group .tab-title {
display: inline-block;
/* موازنة المسافات الجانبية */
margin: 0 2px;
padding: 10px 15px;
/* استخدام خط عربي واضح في المساحات الصغيرة */
font-family: 'Cairo', sans-serif;
font-size: 14px;
/* منع انكسار النص في التبويبات القصيرة */
white-space: nowrap;
}
/*المشكلة في الكود الحالي هي padding-left و float: right (إذا كان التصميم الأصلي إنجليزي)، لذا سنقوم بعكس الهوامش لضمان المحاذاة الصحيحة.
أضف هذا الكود في ملف rtl.css أو داخل وسوم الاستعلام الخاصة بالعربية:*/
body.rtl .horizontal .sv_tab_group {
/* عكس اتجاه الإزاحة الجانبية */
padding-left: 0;
padding-right: 5px;
/* التأكد من بقاء العناصر على اليمين في النسخة العربية */
float: right;
/* المسافة السفلية تبقى كما هي */
margin-bottom: 5px;
/* إضافة محاذاة النص لليمين لضمان ترتيب التبويبات */
text-align: right;
}
/* لضمان عدم حدوث تداخل مع العناصر التي تلي التبويبات (مثل السلة) */
body.rtl .horizontal .sv_tab_group::after {
content: "";
display: table;
clear: both;
}
/*💡 ملاحظة هامة:
بما أنك تستخدم float: right هنا وفي أماكن أخرى، إذا لاحظت أن السلة بدأت "تزحف" أو تقترب بشكل مزعج من التبويبات، يمكنك إضافة هامش أمان بسيط للسلة في العربية:*/
/*body.rtl .top-header-regin .count {
margin-right: 20px; /* يعطي مساحة بين السلة وبين التبويبات العائمة */
/*}*/
/*هذا الكود هو المسؤول عن إظهار "الخلفية الملونة" أو التأثير البصري الذي يظهر خلف عنوان التبويب عند الضغط عليه (Active) أو تمرير الفأرة فوقه (Hover).
بما أنك استخدمت z-index: -1 و position: absolute (المفترضة للـ before)؛ فهذا يعني أنك تنشئ طبقة خلفية زرقاء تظهر خلف النص.
🔄 التعديل المقترح للنسخة العربية (RTL)
في النسخة العربية، نحتاج للتأكد من أن هذه الخلفية تغطي المساحة بالكامل ولا تنزاح لليسار أو اليمين بشكل خاطئ بسبب اتجاه الصفحة.
أضف هذا الكود في ملف rtl.css:*/
body.rtl .horizontal .sv_tab_group .tab-title.active:before,
body.rtl .horizontal .sv_tab_group .tab-title:hover:before {
/* ضمان أن الخلفية الزرقاء تبدأ من اليمين في العربية */
right: 0;
left: 0;
width: 100%;
background: #420537;
/* التأكد من أن الطبقة خلف النص */
z-index: -1;
/* إذا كنت تريد إضافة زوايا منحنية تتناسب مع الخطوط العربية */
border-radius: 4px;
}
/* لضمان ظهور النص فوق الخلفية الزرقاء بوضوح */
body.rtl .horizontal .sv_tab_group .tab-title.active,
body.rtl .horizontal .sv_tab_group .tab-title:hover {
color: #fff; /* تحويل النص للأبيض عند التنشيط */
transition: color 0.3s ease;
}
/*هذا الكود هو اللمسة النهائية لتأثير التبويبات، حيث يقوم بتحويل لون النص إلى الأبيض عندما يكون التبويب نشطاً أو عند تمرير الفأرة فوقه، وذلك ليتناسب مع الخلفية الزرقاء التي أضفناها في الخطوة السابقة.
في النسخة العربية (RTL)، الكود يعمل بشكل جيد تقنياً، ولكن لجعله يبدو احترافياً مع الخطوط العربية (التي غالباً ما تكون سماكتها مختلفة)، يفضل إضافة بعض التحسينات البسيطة.
🔄 التعديل والتحسين المقترح لملف العربية (RTL)
أضف هذا الكود في ملف rtl.css:*/
body.rtl .horizontal .sv_tab_group .tab-title.active,
body.rtl .horizontal .sv_tab_group .tab-title:hover {
color: #fff;
/* إضافة سماكة بسيطة للخط العربي عند التنشيط لزيادة الوضوح */
font-weight: 600;
/* التأكد من سلاسة تحول اللون */
transition: all 0.3s ease-in-out;
}
/* تحسين شكل التبويبات في العربية */
body.rtl .horizontal .sv_tab_group .tab-title {
/* الخطوط العربية تحتاج مساحة علوية وسفلية أكبر قليلاً لتظهر بشكل متوازن */
padding: 12px 20px;
font-size: 14px;
}
/*هذا الكود هو السر وراء الشكل الجمالي للتبويبات لديك، فهو يستخدم خاصية skew(-18deg) لعمل ميلان (انحراف) في شكل الخلفية، مما يعطي تصميماً عصرياً مائلاً.
بما أنك تستخدم left: 0 و skew بزاوية سالبة، فإن هذا التصميم مصمم ليميل باتجاه معين في الإنجليزية. في النسخة العربية (RTL)، يفضل عادةً عكس اتجاه الميلان ليناسب القراءة من اليمين لليسار، أو على الأقل التأكد من أن الإزاحة لا تسبب تداخلاً بين التبويبات.
🔄 التعديل المقترح للنسخة العربية (RTL)
في ملف rtl.css أو قسم العربية، سنقوم بعكس زاوية الميلان لتبدو متناسقة بصرياً:*/
body.rtl .horizontal .sv_tab_group .tab-title:before {
/* عكس زاوية الميلان لتكون متناسقة مع الاتجاه العربي */
transform: skew(18deg);
-webkit-transform: skew(18deg);
/* تأكيد التموضع في اليمين */
right: 0;
left: auto;
/* الحفاظ على بقية الخصائص */
display: inline-block;
border: 1px solid #420537;
content: '';
width: 100%;
height: 100%;
position: absolute;
top: 0;
z-index: -1;
}
/*هذا الكود ينسق صندوق المحتوى الذي يظهر أسفل التبويبات. بما أنك استخدمت float: right; و border-top: 3px solid #0091d5;؛ فالمحتوى الآن مصمم ليصطف جهة اليمين مع إطار علوي سميك يميزه عن العناوين المائلة.
في النسخة العربية (RTL)، الكود يحتاج لبعض الضبط لضمان عدم حدوث مشاكل في المسافات الجانبية، خاصة أنك استخدمت float.
🔄 التعديل والتحسين المقترح لملف العربية (RTL)
أضف هذا الكود في ملف rtl.css:*/
body.rtl .horizontal .sv_tab_content {
/* التأكد من المحاذاة لليمين */
float: right;
text-align: right;
direction: rtl;
/* ضبط الحواف */
border: 1px solid #420537;
border-top: 3px solid #420537;
/* توزيع المسافات الداخلية بما يتناسب مع الخطوط العربية */
padding: 15px 20px;
/* لضمان أن الصندوق يأخذ العرض الكامل ولا تتداخل معه عناصر أخرى */
width: 100%;
box-sizing: border-box;
}
/* حل مشكلة الارتفاع (Clearfix) لضمان عدم اختفاء العناصر أسفل الصندوق */
body.rtl .horizontal::after {
content: "";
display: table;
clear: both;
}
/*⚠️ تنبيه بخصوص "رمز السلة"
استخدام float: right; و width: 100%; معاً في هذا الجزء قد يؤدي إلى:
دفع السلة: إذا كانت السلة موجودة "برمجياً" تحت كود التبويبات في ملف الـ HTML، فإن هذا الصندوق سيأخذ السطر بالكامل ويدفع السلة للأسفل بعيداً عن مكانها الأصلي.
التغطية: إذا كان الهيدر يملك overflow: hidden؛ فإن أي زيادة في طول هذا المحتوى قد تسبب اختفاء عناصر أخرى.
🛠️ نصيحة لربط المحتوى بالعناوين المائلة
بما أنك استخدمت skew (ميلان) في العناوين، قد تلاحظ فجوة صغيرة بين العنوان والصندوق. يمكنك معالجتها بهذا الكود البسيط:*/
body.rtl .horizontal .sv_tab_content {
margin-top: -1px; /* لدمج إطار المحتوى مع إطار العنوان المائل */
position: relative;
z-index: 2;
}
/*هذا الكود يقوم بتحويل نظام التبويبات من العرض الأفقي إلى العرض العمودي، حيث تأخذ عناوين التبويبات جانباً واحداً (30% من العرض) ويظهر المحتوى بجانبها.
في النسخة العربية (RTL)، يجب أن نعكس هذا التصميم تماماً، بحيث تنتقل القائمة إلى جهة اليمين بدلاً من اليسار.
🔄 التعديل والتحسين للنسخة العربية (RTL)
أضف هذا الكود في ملف rtl.css:*/
body.rtl .vertical .sv_tab_group {
/* عكس المحاذاة لليمين */
float: right;
width: 30%;
/* إضافة حدود أو هوامش تناسب الاتجاه العربي */
padding-left: 10px;
padding-right: 0;
border-left: 1px solid #420537; /* خط فاصل بين القائمة والمحتوى */
border-right: none;
}
/*⚠️ تنبيه هام: لضمان عدم اختفاء "رمز السلة" مجدداً
بما أنك قمت بتحديد عرض width: 30% واستخدمت float؛ فهذا يعني أن هناك عنصراً آخر بجانبه سيأخذ الـ 70% المتبقية (غالباً هو .sv_tab_content).
إليك ما يجب الحذر منه:
وضعية السلة: إذا كانت أيقونة السلة جزءاً من هذا النظام العمودي، فستظهر داخل الـ 30%. أما إذا كانت في الهيدر، فتأكد أن خاصية float هنا لا تسبب "انهياراً" للهيدر العلوي.
التجاوب (Responsive): على شاشات الموبايل، عرض 30% سيكون صغيراً جداً للنصوص العربية. يفضل إلغاء الـ float في الشاشات الصغيرة:*/
@media (max-width: 768px) {
body.rtl .vertical .sv_tab_group {
width: 100%;
float: none;
border-left: none;
margin-bottom: 15px;
}
}
/*هذا الكود ينسق عناوين التبويبات في الوضع العمودي (Vertical Tabs). في هذا التصميم، تظهر التبويبات كأزرار قائمة مرصوصة فوق بعضها البعض.
بالنسبة للنسخة العربية (RTL)، التنسيق يحتاج لضبط بسيط لضمان محاذاة النص جهة اليمين، خاصة أن الخطوط العربية قد تظهر بشكل مختلف داخل الإطارات.
🔄 التعديل المقترح للنسخة العربية (RTL)
أضف هذا الكود في ملف rtl.css:*/
body.rtl .vertical .sv_tab_group .tab-title {
/* ضمان محاذاة النص لليمين */
text-align: right;
/* ضبط المسافات الداخلية لتناسب الخط العربي */
padding: 10px 15px;
/* الحفاظ على الإطار والمسافة السفلية */
border: 1px solid #420537;
margin-bottom: 5px;
/* إضافة خط يمين سميك قليلاً لإعطاء لمسة جمالية (اختياري) */
border-right: 3px solid #420537;
/* اختيار خط عربي مناسب */
font-family: 'Cairo', sans-serif;
font-size: 14px;
}
/* تنسيق حالة التمرير (Hover) والنشط (Active) للوضع العمودي */
body.rtl .vertical .sv_tab_group .tab-title:hover,
body.rtl .vertical .sv_tab_group .tab-title.active {
background-color: #420537;
color: #fff;
transition: all 0.3s ease;
}
/*🔍 ملاحظات تقنية هامة:
المساحة الجانبية: بما أنك تستخدم border؛ تأكد في النسخة العربية أن الإطارات لا تتداخل مع "صندوق المحتوى" المجاور (الذي يمثل الـ 70% من العرض). إذا وجد تداخل، يمكنك إضافة margin-left: -1px; للتبويبات لدمج الإطارين معاً.
أيقونة السلة: بما أن هذا الجزء بعيد عن الهيدر، فلا خوف على رمز السلة الآن. ولكن تأكد دائماً أن الحاوية الأكبر لهذه التبويبات تملك خاصية overflow: hidden أو "Clearfix" لأنك استخدمت float: left (أو right في العربي) للأب.
🛠️ لمسة احترافية (الأيقونات الجانبية)
إذا أردت إضافة سهم صغير يشير إلى المحتوى في النسخة العربية، يمكنك إضافة هذا الكود:*/
body.rtl .vertical .sv_tab_group .tab-title.active::after {
content: '\f104'; /* رمز السهم لليسار في FontAwesome */
font-family: FontAwesome;
float: left; /* يظهر السهم في أقصى اليسار ليشير للمحتوى */
margin-top: 2px;
}
/*هذا الكود هو اللمسة النهائية للتبويبات العمودية، حيث يحدد مظهر التبويب المختار حالياً (Active). فبمجرد الضغط على التبويب، تتحول خلفيته للون الأزرق ويصبح النص أبيض لتمييزه عن بقية العناصر.
بالنسبة للنسخة العربية (RTL)، الكود يعمل بشكل تلقائي، ولكن هناك تفصيل جمالي يخص الخط العربي؛ حيث أن الحروف العربية المتصلة قد تبدو "مزدحمة" داخل اللون الأزرق إذا لم نضبط الوزن (Weight) والمساحات.
🔄 التعديل والتحسين المقترح لملف العربية (RTL)
أضف هذا الكود في ملف rtl.css لضمان وضوح النص العربي عند تنشيط التبويب:*/
body.rtl .vertical .sv_tab_group .tab-title.active {
background: #420537;
color: #fff;
/* الخطوط العربية تحتاج لسمك أكبر قليلاً عند تلوين الخلفية */
font-weight: bold;
/* إضافة إطار داخلي بسيط لتمييز التبويب النشط عن المحتوى */
border-right: 4px solid #420537;
/* سلاسة عند الانتقال بين التبويبات */
transition: background 0.3s ease;
}
/*هذا الكود يكمل نظام التبويبات العمودية بتنسيق صندوق المحتوى. بما أنك استخدمت width: 68%; و float: right; و border-left: 3px solid #0091d5;؛ فهذا يعني أن التصميم الإنجليزي يضع القائمة على اليسار (30%) والمحتوى على اليمين (68% مع ترك 2% كفراغ أمان).
في النسخة العربية (RTL)، نحتاج لعكس هذه الأدوار تماماً لتصبح القائمة يميناً والمحتوى يساراً.
🔄 التعديل والتحسين للنسخة العربية (RTL)
أضف هذا الكود في ملف rtl.css:*/
body.rtl .vertical .sv_tab_content {
/* عكس المحاذاة لليسار في العربية لأن القائمة أصبحت يميناً */
float: left;
width: 68%;
/* ضبط الحدود: استبدال الحد الأيسر بحد أيمن سميك */
border: 1px solid #420537;
border-left: 1px solid #420537; /* إرجاع الحد الأيسر للسمك العادي */
border-right: 3px solid #420537; /* تمييز الجهة الملاصقة للقائمة */
/* محاذاة النص */
text-align: right;
direction: rtl;
/* المسافات الداخلية */
padding: 10px 15px;
box-sizing: border-box;
}
/* حل مشكلة انهيار الحاوية بسبب الـ float */
body.rtl .vertical::after {
content: "";
display: table;
clear: both;
}
/*⚠️ ملاحظة هامة لربط التصميم
بما أنك قمت بعمل border-right: 3px في كود الـ tab-title السابق، وهذا الكود يعطي border-right: 3px للمحتوى، فسيظهر خطان سميكان بجانب بعضهما.
للحصول على مظهر احترافي (خط واحد مشترك): يفضل في النسخة العربية إزالة الحد الأيمن للمحتوى لجعله يبدو وكأنه يخرج مباشرة من التبويب النشط:*/
body.rtl .vertical .sv_tab_content {
border-right: none;
margin-right: -1px; /* دمج الإطار مع القائمة */
}
/*
===========
css for pre-loader
===========
*/
/*هذا الكود يتحكم في حجم ومكان أيقونة التحميل (Preloader) التي تظهر للمستخدم قبل اكتمال تحميل الصفحة. حالياً، الأيقونة تأخذ 10% فقط من عرض الشاشة وموسطة في المنتصف.
في النسخة العربية (RTL)، لا يحتاج هذا الكود لتعديلات جوهرية لأن الـ margin: 0 auto يعمل بشكل صحيح في الجهتين، ولكن هناك بعض التحسينات التقنية لضمان ظهوره بشكل احترافي.
🔄 التعديل والتحسين المقترح لملف العربية (RTL)
إذا كانت أيقونة التحميل عبارة عن "نص" أو "أنيميشن" يتأثر باتجاه القراءة، يفضل إضافة التالي في ملف rtl.css:*/
body.rtl .sv-preloader {
width: 15%; /* تكبير الحجم قليلاً لأن الخطوط/الأيقونات العربية قد تحتاج مساحة أوضح */
margin: 0 auto;
/* ضمان أن أي نصوص داخل البريلودر موسطة */
text-align: center;
direction: ltr; /* غالباً أيقونات التحميل الدائرية تعمل بشكل أفضل في اتجاه اليسار لليمين */
}
/*🛠️ كيف تجعل الـ Preloader يبدو أفضل؟
إذا أردت أن يظهر الـ Preloader بشكل عصري في الموقع، يمكنك إضافة هذا التعديل البسيط لجعله متوافقاً مع الهواتف الذكية أيضاً:*/
.sv-preloader {
width: 60px; /* استخدام حجم ثابت بالبكسل أفضل للأيقونات الدائرية */
height: 60px;
margin: 20vh auto; /* يضعه في ثلث الشاشة العلوي ليكون مريحاً للعين */
}
@media (max-width: 768px) {
.sv-preloader {
width: 40px; /* تصغير الحجم في الجوال */
}
}
/*هذا الكود مخصص لإظهار أيقونة التحميل (Preloader) داخل منطقة التبويبات العمودية فقط، وهو يستخدم تقنية التوسيط المطلق (position: absolute) لضمان ظهور الأيقونة في منتصف الصندوق تماماً أثناء تحميل المحتوى.
بما أنك استخدمت left: 0 و right: 0 مع margin: auto (أو العرض المحدد)، فالأيقونة ستتوسط أفقياً، والـ top: 50% مع transform سيوسطها عمودياً.
🔄 التعديل والتحسين للنسخة العربية (RTL)
في النسخة العربية، وبما أننا جعلنا التبويبات العمودية تنقسم إلى (30% قائمة يميناً) و (70% محتوى يساراً)، يجب أن نتأكد من أن "أيقونة التحميل" تظهر في منتصف منطقة المحتوى وليس فوق القائمة.
أضف هذا الكود في ملف rtl.css:*/
body.rtl .vertical-tabs-wrap .sv-preloader {
/* التأكد من أن الأيقونة تظهر في جهة اليسار (منطقة المحتوى) */
left: 0;
right: 30%; /* دفع الأيقونة بعيداً عن القائمة اليمنى التي تأخذ 30% */
width: auto;
/* الحفاظ على التوسيط العمودي */
top: 50%;
transform: translateY(-50%);
/* لضمان عدم حجب النصوص خلفها */
background: rgba(255, 255, 255, 0.7);
border-radius: 50%;
}
/*هذا الكود هو حجر الزواية الذي يجعل كود التحميل (Preloader) الذي ناقشناه سابقاً يعمل بشكل صحيح.
بإضافة position: relative; إلى الحاوية الكبرى للتبويبات، أنت تخبر المتصفح أن أي عنصر بداخلها يملك position: absolute (مثل أيقونة التحميل) يجب أن يتقيد بحدود هذا الصندوق فقط، ولا يخرج ليتوسط الصفحة كاملة.
🔄 التعديل المقترح للنسخة العربية (RTL)
في النسخة العربية، لا يحتاج هذا الكود لتغيير في الخاصية نفسها، ولكن يفضل التأكد من أن الحاوية لا تملك أي "تسريب" للهوامش يؤثر على اتساق الصفحة:*/
body.rtl .vertical-tabs-wrap {
position: relative;
/* التأكد من أن الاتجاه العام بداخلها يبدأ من اليمين */
direction: rtl;
/* منع أي عناصر عائمة بداخلها من الخروج عن السيطرة */
display: block;
clear: both;
}
/*
===========
cart add
===========
*/
/*هذا الكود يتحكم في توحيد ارتفاع (Height) عناصر صفحة السلة في ووكومرس (WooCommerce). يقوم بجعل الأزرار، حقول إدخال الكوبونات، وجدول السلة بارتفاع ثابت وهو 35 بكسل لضمان تناسق المظهر.
بما أنك قمت بتعديل الارتفاع، يجب الانتباه في النسخة العربية (RTL) لأن الخطوط العربية غالباً ما تكون "أطول" عمودياً من الإنجليزية، مما قد يجعل النص يبدو مقصوصاً أو غير موسط داخل الـ 35 بكسل.
🔄 التعديل والتحسين المقترح لملف العربية (RTL)
في النسخة العربية، نحتاج لضبط الحشو (Padding) وخط الأساس (Line-height) لضمان ظهور الكلمات مثل "تطبيق الكوبون" أو "تحديث السلة" بشكل مثالي.
أضف هذا في ملف rtl.css:*/
body.rtl form.cart .button,
body.rtl .woocommerce .cart .button,
body.rtl .woocommerce .cart input.button,
body.rtl .woocommerce-page table.cart td.actions .coupon .input-text {
height: 35px;
line-height: 33px; /* أصغر قليلاً من الارتفاع لتوسيط النص العربي عمودياً */
padding-top: 0;
padding-bottom: 0;
font-family: 'Cairo', sans-serif; /* أو أي خط عربي تستخدمه */
font-size: 13px; /* حجم مناسب لارتفاع 35 بكسل */
text-align: center;
}
/* ضبط المسافة بين حقل الكوبون وزر التطبيق في العربية */
body.rtl .woocommerce-page table.cart td.actions .coupon .input-text {
margin-left: 5px;
margin-right: 0;
}
/*هذا الكود يقوم بإلغاء الارتفاع الثابت (35px) الذي حددناه سابقاً، ولكن فقط لأزرار قائمة الرغبات (Wishlist)، حيث يعيدها لوضعها الطبيعي (auto) الذي يتمدد حسب حجم النص. استخدام !important يضمن تغلب هذا الأمر على أي قيود أخرى.
في النسخة العربية (RTL)، تعتبر هذه الخطوة ممتازة لأن نصوص قائمة الرغبات (مثل "إضافة إلى السلة" أو "عرض المنتج") قد تكون طويلة وتحتاج مساحة مرنة لتظهر بالكامل دون أن ينقص منها شيء.
🔄 التعديل والتحسين المقترح لملف العربية (RTL)
لضمان أن هذه الأزرار تبدو متناسقة مع بقية الموقع في النسخة العربية، أضف هذا الكود في rtl.css:*/
body.rtl .wishlist_table a.button {
height: auto !important;
padding: 8px 15px; /* إضافة حشو مناسب للنص العربي */
line-height: 1.5; /* ضمان مسافة مريحة بين الأسطر العربية */
display: inline-block;
text-align: center;
white-space: nowrap; /* منع انكسار الكلمة الطويلة لسطرين */
}
/*🔍 لماذا استخدمنا height: auto هنا بالتحديد؟
مرونة الخطوط: الخطوط العربية (مثل "أضف إلى السلة") تأخذ مساحة عمودية وأفقية تختلف عن الإنجليزية. الارتفاع التلقائي يحمي النص من "الاختناق".
أيقونات قائمة الرغبات: غالباً ما تحتوي هذه الأزرار على أيقونات قلب أو سلة بجانب النص؛ الـ auto يسمح للأيقونة والنص بالاصطفاف بشكل سليم مهما اختلف حجم الأيقونة.
⚠️ ملاحظة بخصوص "التصميم العام"
بما أننا جعلنا أزرار السلة بارتفاع 35px وأزرار قائمة الرغبات تلقائية، قد تلاحظ فرقاً في الحجم إذا ظهرا في نفس الصفحة. لتوحيد المظهر بصرياً في العربية، يمكنك جعل الـ min-height هو الحد الفاصل:*/
body.rtl .wishlist_table a.button {
min-height: 35px; /* لا يقل عن أزرار السلة، ولكنه يزيد إذا احتاج النص */
display: flex;
align-items: center;
justify-content: center;
}
/*رائع! سنقوم الآن بتنسيق أيقونة القلب (قائمة الرغبات) لتعطي انطباعاً تفاعلياً (Interactive) جذاباً. سنستخدم اللون الأحمر التقليدي للقلب مع إضافة "تأثير نبض" بسيط (Pulse effect) أو لمعة عند تمرير الفأرة، لزيادة تفاعل المستخدم.
أضف هذا الكود في ملف rtl.css لضمان تطبيقه في النسخة العربية:
🎨 تنسيق أيقونة قائمة الرغبات (Wishlist Icon)*/
/* التنسيق الافتراضي للأيقونة */
body.rtl .wishlist_table .wishlist-icon i,
body.rtl .yith-wcwl-add-to-wishlist i {
color: #888; /* لون رمادي هادئ قبل التفعيل */
transition: all 0.3s ease;
margin-left: 8px; /* مسافة بين الأيقونة والنص في العربي */
}
/* تأثير عند تمرير الفأرة (Hover) */
body.rtl .wishlist_table a:hover i,
body.rtl .yith-wcwl-add-to-wishlist a:hover i {
color: #e74c3c; /* لون أحمر حيوي */
transform: scale(1.2); /* تكبير بسيط للأيقونة */
text-shadow: 0 0 10px rgba(231, 76, 60, 0.5); /* لمعة خفيفة حول القلب */
}
/* إذا كان المنتج مضافاً بالفعل للقائمة (القلب ممتلئ) */
body.rtl .yith-wcwl-wishlistaddedback i,
body.rtl .yith-wcwl-wishlistexistsbrowse i {
color: #e74c3c !important;
}
/*💓 إضافة "تأثير النبض" (Pulse Animation)
لجعل الأيقونة تلفت الانتباه أكثر عند الوقوف عليها، يمكنك إضافة هذا "الأنيميشن" الذي يجعل القلب ينبض:*/
@keyframes heartBeat {
0% { transform: scale(1); }
50% { transform: scale(1.3); }
100% { transform: scale(1); }
}
body.rtl .yith-wcwl-add-to-wishlist a:hover i {
animation: heartBeat 0.8s infinite;
color: #e74c3c;
}
/*-------------team-section------------*/
/*هذا الكود يضيف إطاراً (Border) رقيقاً حول كل عضو في فريق العمل (Team Member) داخل الشبكة (Grid). وبما أنك تستخدم اللون الرمادي الفاتح جداً #eeeeee مع إطار بسمك 1 بكسل، فهذا يعطي مظهراً نظيفاً ومنظماً.
في النسخة العربية (RTL)، نحتاج للتأكد من أن هذا الإطار يتماشى مع اتجاه القراءة، خاصة إذا كنت ستضيف تأثيرات عند تمرير الفأرة (Hover) أو إذا كانت الصور غير متساوية الأحجام.
🔄 التعديل والتحسين المقترح لملف العربية (RTL)
أضف هذا الكود في ملف rtl.css لإضافة لمسة جمالية تتناسب مع هوية موقعك (اللون الأزرق الذي استخدمناه سابقاً):*/
body.rtl .team-outer-container ul.team-area .grid-item {
border: 1px solid #eeeeee;
transition: all 0.3s ease-in-out; /* لتنعيم حركة التأثيرات */
background: #fff;
/* ضبط المسافات في العربية لضمان عدم التصاق النص بالإطار */
padding: 10px;
text-align: center;
}
/* تأثير احترافي عند تمرير الفأرة على عضو الفريق */
body.rtl .team-outer-container ul.team-area .grid-item:hover {
border-color: #420537; /* يتحول الإطار للأزرق عند الوقوف عليه */
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); /* إضافة ظل خفيف */
transform: translateY(-5px); /* رفع العنصر قليلاً للأعلى */
}
/*💡 نصائح إضافية لتنسيق "فريق العمل":
تناسق الصور: تأكد أن الصور داخل الـ .grid-item تملك الخاصية التالية لضمان عدم خروجها عن الإطار في النسخة العربية:*/
body.rtl .team-outer-container ul.team-area .grid-item img {
max-width: 100%;
height: auto;
display: block;
margin: 0 auto 15px; /* موسطة مع مسافة سفلية */
}
/*هذا الكود هو "حارس الحدود" لصور أعضاء الفريق. استخدام overflow: hidden; داخل الـ media-box يضمن أن أي صورة (أو أي تأثير تكبير للصورة) لن يخرج عن حدود الإطار المحدد له، مما يحافظ على نظافة التصميم وتناسق الشبكة (Grid).
في النسخة العربية (RTL)، هذا الكود ضروري جداً، خاصة إذا كنت ستضيف تأثير "تكبير الصورة" عند تمرير الفأرة، وهو تأثير شائع جداً في صفحات "فريق العمل".
🔄 التعديل والتحسين المقترح لملف العربية (RTL)
سنضيف تأثير "الزووم" الاحترافي الذي يشتهر به هذا الكود، مع ضمان سلاسة الحركة في الاتجاه العربي:*/
body.rtl .team-outer-container ul.team-area .grid-item .media-box {
position: relative;
overflow: hidden; /* يمنع الصورة من الخروج عند التكبير */
border-radius: 5px; /* اختيار اختياري لزوايا ناعمة */
}
/* تأثير تكبير الصورة عند تمرير الفأرة */
body.rtl .team-outer-container ul.team-area .grid-item:hover .media-box img {
transform: scale(1.1) rotate(1deg); /* تكبير مع ميلان خفيف جداً */
transition: transform 0.5s ease; /* سرعة الحركة */
}
/* تنسيق الصورة الافتراضي */
body.rtl .team-outer-container ul.team-area .grid-item .media-box img {
width: 100%;
height: auto;
display: block;
transition: transform 0.5s ease;
}
/*هذا الكود يجعل صور الفريق تبدو أكبر قليلاً من حجمها الطبيعي بشكل دائم (scale(1.05)) مع انتقال ناعم. ومع وجود كود overflow: hidden الذي أضفته سابقاً في الـ media-box؛ ستظهر الصورة ممتلئة ومقصوصة بشكل جميل داخل الإطار.
في النسخة العربية (RTL)، التعديل هنا ليس في "الاتجاه" بل في تأثير الحركة لجعله أكثر حيوية وتفاعلاً مع المستخدم.
🔄 التعديل والتحسين المقترح لملف العربية (RTL)
سنقوم بجعل الصورة تبدأ بحجمها الطبيعي، ثم تكبر عند تمرير الفأرة (Hover)، فهذا يعطي انطباعاً أفضل للمستخدم بأن العنصر قابل للتفاعل.
أضف هذا في ملف rtl.css:*/
/* الحالة الافتراضية للصورة في العربية */
body.rtl .team-outer-container ul.team-area .grid-item img {
display: block;
width: 100%;
/* نبدأ من الحجم الطبيعي 1 لتجنب تشوش الصورة */
transform: scale(1);
-webkit-transform: scale(1);
transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
}
/* تأثير التكبير عند تمرير الفأرة على الصندوق بالكامل */
body.rtl .team-outer-container ul.team-area .grid-item:hover img {
/* تكبير الصورة بنسبة 10% عند الحوم بالفأرة */
transform: scale(1.1);
-webkit-transform: scale(1.1);
}
/*🔍 ملاحظات تقنية لتحسين الأداء:
وضوح الصورة: استخدام scale(1.05) كحالة افتراضية قد يجعل الصور تبدو "مغبرة" أو غير حادة قليلاً (Blurry) في بعض المتصفحات. الأفضل دائماً البدء بـ scale(1).
خاصية الـ Overflow: تأكد أن الكود الذي كتبته سابقاً (.media-box { overflow: hidden; }) لا يزال موجوداً، لأنه بدونه ستخرج الصورة عن حدود المربع عند التكبير وتغطي على رمز السلة أو العناصر المجاورة.
تسريع التصفح: استخدام -webkit- و -moz- ممتاز لضمان عمل الحركات على المتصفحات القديمة (مثل سفاري القديم أو فايرفوكس).
🛠️ فكرة إضافية لجعل الفريق "عربياً" بامتياز:
عادة في المواقع العربية، نحب إضافة فلتر خفيف يتغير عند التفاعل. ما رأيك بإضافة هذا السطر لجعل الصورة بالأبيض والأسود ثم تتحول للألوان عند وضع الفأرة عليها؟*/
body.rtl .team-outer-container ul.team-area .grid-item img {
filter: grayscale(100%); /* أبيض وأسود */
}
body.rtl .team-outer-container ul.team-area .grid-item:hover img {
filter: grayscale(0%); /* عودة الألوان الأصلية */
}
/*هذا الكود هو "اللمسة التفاعلية" التي تجعل الصورة تكبر بنسبة 15% عند تمرير الفأرة. إضافة translateZ(0) ذكية جداً لأنها تُفعل تسريع العتاد (Hardware Acceleration) في المتصفح، مما يجعل حركة التكبير سلسة جداً وبدون أي "رعشة" في الصورة.
بما أننا في النسخة العربية (RTL)، الكود يعمل تقنياً بشكل ممتاز، ولكن سنضيف عليه بعض التحسينات لضمان عدم حدوث إزاحة في الشبكة (Grid) وللتأكد من تناسق الأبعاد.
🔄 التعديل والتحسين المقترح لملف العربية (RTL)
أضف هذا الكود في ملف rtl.css لضمان ثبات الصورة وتوسيطها أثناء التكبير:*/
body.rtl .team-outer-container ul.team-area .grid-item .media-box:hover img {
/* التكبير بنسبة 1.15 مع الحفاظ على استقرار الصورة */
transform: scale(1.15) translateZ(0);
-webkit-transform: scale(1.15) translateZ(0);
/* إضافة فلتر لزيادة حدة الألوان عند التفاعل في العربية */
filter: brightness(1.1);
/* التأكد من أن نقطة ارتكاز التكبير هي المنتصف */
transform-origin: center center;
}
/* تحسين الحاوية في العربية لمنع أي خروج للصورة */
body.rtl .team-outer-container ul.team-area .grid-item .media-box {
overflow: hidden;
backface-visibility: hidden; /* تمنع ظهور أي بياض أثناء الحركة */
}
/*هذا الكود هو المسؤول عن إعطاء "مساحة للتنفس" داخل صندوق عضو الفريق. من خلال إضافة padding: 20px؛ أنت تضمن أن الاسم، الصورة، ووصف العمل لا يلتصقون بحواف الإطار الرمادي الذي صممناه سابقاً.
في النسخة العربية (RTL)، المساحات الداخلية (Padding) تعتبر حيوية جداً لأن الخطوط العربية بطبيعتها تحتاج إلى مسافات عمودية وأفقية أكبر قليلاً لتبدو مريحة للعين.
🔄 التعديل والتحسين المقترح لملف العربية (RTL)
أضف هذا الكود في ملف rtl.css لضبط التوازن البصري:*/
body.rtl .team-outer-container .grid-item-inner {
/* الحفاظ على المساحة الداخلية مع التأكد من محاذاة النص */
padding: 25px 20px; /* زيادة بسيطة في الأعلى والأسفل لتناسب طول الحروف العربية */
text-align: center; /* موسطة محتوى الفريق (اسم، منصب، أيقونات) */
/* لضمان أن الحشو لا يزيد من حجم الصندوق الكلي */
box-sizing: border-box;
/* إضافة اتجاه النص العربي */
direction: rtl;
}
/*🔍 لماذا هذا التعديل مهم في موقعك؟
وضوح الخط العربي: الحروف مثل (ج، خ، ي) تحتاج لمساحة سفلية وعلوية لكي لا تبدو "مخنوقة" داخل الإطار. الـ 25px الإضافية تعطي فخامة للتصميم.
تناسق الأجهزة: بما أنك تستخدم padding ثابتاً، تأكد أنه في شاشات الجوال لا يستهلك مساحة كبيرة من العرض. يمكنك تصغيره في الجوال هكذا:*/
@media (max-width: 480px) {
body.rtl .team-outer-container .grid-item-inner {
padding: 15px;
}
}
/*هذا الكود ينسق اسم عضو الفريق. حالياً، هو يستخدم خطاً نحيفاً (400) وحجم (20px).
بالنسبة للنسخة العربية (RTL)، هناك ملاحظتان تقنيتان:
الخط: خط Open Sans لا يدعم الحروف العربية بشكل جيد، مما سيجعل المتصفح يختار خطاً افتراضياً (غالباً Times New Roman) يفسد جمال التصميم.
نمط الحروف: خاصية text-transform: capitalize; لا تؤثر على اللغة العربية، لذا يمكننا استبدالها بخصائص تحسن مظهر الحروف العربية.
🔄 التعديل والتحسين المقترح لملف العربية (RTL)
أضف هذا الكود في ملف rtl.css لضمان ظهور الأسماء بشكل احترافي:*/
body.rtl .team-outer-container .grid-item-inner h4 {
/* تغيير الخط لخط عربي متناسق مثل Cairo أو Almarai */
font-family: 'Cairo', 'Tahoma', sans-serif;
/* زيادة الوزن قليلاً لأن الخطوط العربية تبدو باهتة عند وزن 400 */
font-weight: 600;
/* ضبط المسافات */
margin: 0 0 8px 0; /* زيادة المسافة السفلية قليلاً */
font-size: 19px; /* الخط العربي يظهر أكبر قليلاً من الإنجليزي بنفس القيمة */
/* محاذاة النص */
text-align: center;
color: #333; /* لون داكن وواضح للأسماء */
}
/*🔍 لماذا قمنا بهذه التغييرات؟
ثبات الخط: الخطوط العربية "المدورة" مثل Cairo تعطي انطباعاً عصرياً يتناسب مع الصور المكبرة التي صممناها.
التوازن البصري: بما أننا استخدمنا transform: scale(1.15) للصورة، فإن الاسم تحتها يحتاج لوزن (weight) أثقل قليلاً ليحافظ على توازنه أمام الصورة الضخمة.
المسافات: الحروف العربية تملك "نقاطاً" وأجزاءً تنزل تحت السطر، لذا زيادة الـ margin-bottom إلى 8px تمنع تداخل الاسم مع المسمى الوظيفي الذي يليه.
🛠️ لمسة جمالية (اختيارية)
إذا أردت أن يتغير لون الاسم إلى الأزرق (نفس لون التبويبات) عندما يضع المستخدم الفأرة على الصندوق، أضف هذا الكود:*/
body.rtl .team-outer-container .grid-item:hover .grid-item-inner h4 {
color: #420537;
transition: color 0.3s ease;
}
/*هذا الكود ينسق المسمى الوظيفي أو البيانات التعريفية (مثل: DIRECTOR أو DEVELOPER) التي تظهر أسفل اسم عضو الفريق. حالياً، التصميم يستخدم خطاً صغيراً جداً، لوناً رمادياً، وفاصلاً سفلياً (Border) ليفصل البيانات عن أيقونات التواصل الاجتماعي التي تأتي بعدها.
في النسخة العربية (RTL)، نحتاج لمعالجة خاصية text-transform: uppercase; لأنها لا تنطبق على العربية، كما نحتاج لضبط الخط ليكون واضحاً رغم صغر حجمه (12px).
🔄 التعديل والتحسين المقترح لملف العربية (RTL)*/
body.rtl .team-outer-container .grid-item-inner .meta-data {
/* الخطوط العربية في مقاس 12px تكون صعبة القراءة، يفضل رفعها قليلاً */
font-size: 13px;
font-family: 'Cairo', sans-serif;
/* جعل الخط عريضاً قليلاً لتعويض غياب الـ Uppercase */
font-weight: 600;
letter-spacing: 0; /* الحروف العربية لا تقبل تباعد الحروف مثل الإنجليزية */
/* اللون والحدود */
color: #858e97;
border-bottom: 1px solid #E8E8E8;
/* المسافات */
padding-bottom: 13px;
margin-bottom: 16px;
/* ضمان الظهور في المنتصف */
display: block;
text-align: center;
}
/*🔍 ملاحظات تقنية هامة:
وضوح النص: بما أن اللون رمادي والحجم صغير، يفضل التأكد من أن الخلفية بيضاء تماماً. إذا كنت تستخدم خلفية رمادية فاتحة للموقع، يفضل جعل لون الخط #666 ليكون مريحاً للعين.
التوازن مع "رمز السلة": هذا الكود آمن تماماً، ولكن تأكد أن الـ margin-bottom لا يسبب "تمدداً" مبالغاً فيه للصندوق مما قد يدفع المحتوى للأسفل ويؤثر على ترتيب العناصر في الصفحة.
إزالة التأثير الإنجليزي: في الـ CSS الأصلي، الـ uppercase يعطي هيبة للمسمى الوظيفي. في العربية، البديل هو استخدام وزن الخط (Font Weight) أو تغيير اللون قليلاً.
🛠️ لمسة جمالية (اختيارية)
لجعل المسمى الوظيفي يبدو أكثر تميزاً في النسخة العربية، يمكنك إضافة خلفية بسيطة جداً بدلاً من الخط السفلي:*/
body.rtl .team-outer-container .grid-item-inner .meta-data {
background: #f9f9f9;
padding: 5px 25px;
border-radius: 4px;
border-bottom: none; /* إزالة الخط القديم */
display: inline-block; /* ليأخذ عرض النص فقط */
}
/*هذا الكود هو التنسيق الأساسي لقائمة أيقونات التواصل الاجتماعي أسفل بيانات عضو الفريق. استخدامه لـ margin:0 و padding:0 يضمن إزالة أي مسافات افتراضية للقوائم (ul) لكي نتمكن من توزيع الأيقونات بدقة.
في النسخة العربية (RTL)، التحدي يكمن في طريقة اصطفاف الأيقونات (فيسبوك، تويتر، لنكد إن) لضمان أنها تبدأ من اليمين إلى اليسار وتتوسط الصندوق بشكل مثالي.
🔄 التعديل والتحسين المقترح لملف العربية (RTL)
أضف هذا الكود في ملف rtl.css لضمان توزيع الأيقونات بشكل احترافي:*/
body.rtl .team-outer-container .grid-item-inner ul.social-icons {
margin: 0;
padding: 0;
list-style: none; /* إزالة النقاط الافتراضية للقائمة */
display: flex; /* استخدام Flexbox لتوزيع سهل */
justify-content: center; /* توسيط الأيقونات في منتصف الصندوق */
gap: 10px; /* مسافة ثابتة ومريحة بين كل أيقونة وأخرى */
direction: ltr; /* نصيحة: أيقونات التواصل الاجتماعي يفضل بقاء ترتيبها العالمي (يسار لليمين) حتى في المواقع العربية */
}
/* تنسيق العناصر داخل القائمة */
body.rtl .team-outer-container .grid-item-inner ul.social-icons li {
display: inline-block;
}
/*🔍 ملاحظات تقنية هامة:
استخدام Flexbox: بدلاً من الاعتماد على float أو inline-block فقط، الـ display: flex مع justify-content: center يضمن أن الأيقونات ستكون دائماً في المنتصف تماماً مهما كان عددها (أيقونتين أو أربعة).
الاتجاه (Direction): على الرغم من أن الموقع عربي، إلا أن ترتيب أيقونات التواصل الاجتماعي (مثل ظهور فيسبوك ثم تويتر) يفضل برمجياً أن يتبع ltr ليبقى مألوفاً للمستخدم، أو يمكنك تركه يتبع العربي rtl إذا أردت عكس الترتيب.
المساحة (Gap): خاصية gap هي أسهل طريقة لعمل مسافات بين الأيقونات دون الحاجة لاستخدام margin-left أو margin-right التي قد تسبب مشاكل في الاتجاهات.
🛠️ لمسة جمالية (تصميم الأيقونات)
بما أننا قمنا بتهيئة القائمة، إليك كود إضافي لجعل الأيقونات دائرية وتتفاعل مع اللون الأزرق الخاص بموقعك:*/
/*body.rtl .team-outer-container .grid-item-inner ul.social-icons li a {
width: 35px;
height: 35px;
line-height: 35px;
background: #f4f4f4;
color: #555;
border-radius: 50%; /* جعل الأيقونة دائرية تماماً */
/* display: block;
transition: all 0.3s ease;
text-align: center;
}
body.rtl .team-outer-container .grid-item-inner ul.social-icons li a:hover {
background: #420537; /* اللون الأزرق الخاص بك */
/* color: #fff;
transform: translateY(-3px); /* رفعة بسيطة عند التمرير */
}*/
/*هذا الكود يحدد المظهر النهائي لكل أيقونة تواصل اجتماعي على حدة. باستخدام display: inline-block; تضمن أن الأيقونات ستصطف بجانب بعضها البعض أفقياً، بينما يعطي الـ padding مسافة جانبية متساوية (5 بكسل من اليمين واليسار) لمنع التصاق الأيقونات.
في النسخة العربية (RTL)، التنسيق يعمل بشكل جيد، ولكن سنقوم ببعض التحسينات لضمان سهولة الضغط (خاصة لمستخدمي الجوال) ولضمان أن المسافات لا تسبب إزاحة في شكل الشبكة.
🔄 التعديل والتحسين المقترح لملف العربية (RTL)
أضف هذا الكود في ملف rtl.css:*/
body.rtl .team-outer-container .grid-item-inner ul.social-icons li {
display: inline-block;
/* زيادة المسافة قليلاً لتسهيل الضغط على الشاشات اللمسية */
padding: 0 8px;
/* حجم الأيقونة 17px مناسب جداً للخطوط العربية */
font-size: 17px;
/* محاذاة عمودية لضمان استقامة الأيقونات مع النص */
vertical-align: middle;
}
/* تحسين شكل الأيقونة عند التفاعل */
body.rtl .team-outer-container .grid-item-inner ul.social-icons li a {
color: #858e97; /* نفس لون المسمى الوظيفي لتوحيد التصميم */
transition: color 0.3s ease;
}
body.rtl .team-outer-container .grid-item-inner ul.social-icons li a:hover {
color: #420537; /* اللون الأزرق المميز لموقعك عند التمرير */
}
/*هذا الكود يحدد اللون الافتراضي لروابط أيقونات التواصل الاجتماعي، حيث استخدمت صيغة rgba لتعطي لوناً أسود شفافاً بنسبة 50% (0.5). هذا يمنح الأيقونات مظهراً رمادياً هادئاً يندمج جيداً مع أي خلفية.
في النسخة العربية (RTL)، يفضل دائماً جعل الأيقونات أكثر وضوحاً أو ربطها بالهوية البصرية للموقع (اللون الأزرق الذي استخدمناه سابقاً) عند التفاعل، لضمان تجربة مستخدم ممتازة.
🔄 التعديل والتحسين المقترح لملف العربية (RTL)
سنقوم بتثبيت هذا اللون كقاعدة، مع إضافة تأثير انتقال (Transition) ناعم ليتغير اللون عند تمرير الفأرة، مما يجعل الموقع يبدو أكثر حيوية.
أضف هذا في ملف rtl.css:*/
body.rtl .team-outer-container .grid-item-inner ul.social-icons li a {
/* اللون الذي اخترته (أسود شفاف 50%) */
color: rgba(0, 0, 0, 0.5);
/* إضافة انتقال ناعم لتغيير اللون */
transition: all 0.3s ease-in-out;
/* التأكد من أن الأيقونة تأخذ مساحة كافية للنقر */
display: inline-block;
line-height: 1;
}
/* تأثير عند تمرير الفأرة (Hover) في العربية */
body.rtl .team-outer-container .grid-item-inner ul.social-icons li a:hover {
/* تغيير اللون للأزرق الخاص بموقعك عند الوقوف بالفأرة */
color: #420537;
/* حركة بسيطة للأعلى لتعزيز الشعور بالتفاعل */
transform: translateY(-2px);
}
/*هذا الكود هو اللمسة النهائية لضبط المسافات بين الأيقونات. وظيفته هي إزالة الفراغ من جهة اليسار لأول أيقونة (first-child) لضمان أن تبدأ الأيقونات بمحاذاة مثالية مع حافة النص أو الصورة فوقها.
في النسخة العربية (RTL)، يجب عكس هذا المنطق تماماً. فبدلاً من إزالة المسافة من اليسار، يجب إزالتها من اليمين، لأن أول أيقونة في الترتيب العربي ستكون هي التي في أقصى اليمين.
🔄 التعديل البرمجي للنسخة العربية (RTL)
أضف هذا الكود في ملف rtl.css لضمان المحاذاة الصحيحة:*/
/* إلغاء تأثير الكود الإنجليزي الأصلي */
body.rtl .team-outer-container .grid-item-inner ul.social-icons li:first-child {
padding-left: 5px; /* إعادة المسافة الطبيعية */
}
/* تطبيق التعديل الصحيح للغة العربية */
body.rtl .team-outer-container .grid-item-inner ul.social-icons li:first-child {
padding-right: 0 !important; /* إزالة المسافة من جهة اليمين لأول أيقونة */
}
/*هذا الكود هو "اللمسة التفاعلية" الأخيرة التي تربط أيقونات التواصل الاجتماعي بالهوية البصرية لموقعك. باستخدام اللون rgb(0, 145, 213) (وهو اللون الأزرق السماوي الاحترافي)، ستتحول الأيقونة فوراً عند مرور الفأرة عليها، مما يمنح المستخدم شعوراً بالحيوية والنشاط.
في النسخة العربية (RTL)، هذا الكود ممتاز، وسنقوم فقط بإضافة بعض الخصائص التي تجعل هذا التحول (Transition) يبدو أكثر سلاسة وفخامة.
🔄 التعديل والتحسين المقترح لملف العربية (RTL)
لضمان أن هذا التغيير في اللون يظهر بشكل ناعم وليس مفاجئاً، أضف هذا التنسيق في ملف rtl.css:*/
body.rtl .team-outer-container .grid-item-inner ul.social-icons li a {
/* ضمان وجود انتقال ناعم في الحالة الافتراضية */
transition: color 0.3s ease-in-out, transform 0.3s ease-in-out;
}
body.rtl .team-outer-container .grid-item-inner ul.social-icons li:hover a {
/* اللون الأزرق الذي اخترته */
color: rgb(0, 145, 213);
/* إضافة حركة بسيطة للأعلى لجذب الانتباه */
display: inline-block;
transform: translateY(-3px);
}
/*هذا الكود مخصص لـ الرابط الأساسي (مثل "اقرأ المزيد" أو "عرض الملف الشخصي") الذي يظهر تحت بيانات عضو الفريق. حالياً، يعتمد الكود على خط إنجليزي Open Sans ومساحة من جهة اليمين padding-right مخصصة لإضافة أيقونة أو سهم خلف النص.
بالنسبة للنسخة العربية (RTL)، نحتاج لعكس المسافات وتغيير الخط لضمان عدم تداخل النص مع الأيقونة التي ستظهر بسببه.
🔄 التعديل والتحسين المقترح لملف العربية (RTL)
أضف هذا الكود في ملف rtl.css:*/
body.rtl .team-outer-container .grid-item-inner a.basic-link {
/* 1. تغيير الخط لخط عربي متناسق */
font-family: 'Cairo', sans-serif;
font-size: 14px; /* الخطوط العربية تبدو أوضح في هذا المقاس */
/* 2. عكس المسافة (Padding) من اليمين إلى اليسار */
padding-right: 0;
padding-left: 20px;
/* 3. اللون وتناسق النص */
color: #808080;
display: inline-block;
transition: all 0.3s ease;
text-decoration: none;
}
/* تأثير عند تمرير الفأرة */
body.rtl .team-outer-container .grid-item-inner a.basic-link:hover {
color: #420537; /* اللون الأزرق الخاص بموقعك */
}
/*🔍 لماذا قمنا بعكس الـ Padding؟
بما أن الكود الأصلي يحتوي على position: relative و padding-right: 20px؛ فهذا يعني عادةً أن هناك أيقونة سهم (Pseudo-element) سيتم وضعها برمجياً في جهة اليمين باستخدام position: absolute.
في الإنجليزية: النص يتبعه السهم جهة اليمين →.
في العربية: النص يتبعه السهم جهة اليسار ←. لذا قمنا بنقل المساحة لجهة اليسار ليفسح النص مكاناً للسهم العربي.
🛠️ إضافة "أيقونة السهم" بشكل احترافي للعربية
إذا أردت ظهور سهم صغير يتحرك عند تمرير الفأرة بجانب الرابط في النسخة العربية، أضف هذا الكود:*/
body.rtl .team-outer-container .grid-item-inner a.basic-link::after {
content: "\f104"; /* كود السهم الأيسر في FontAwesome */
font-family: "Font Awesome 5 Free";
font-weight: 900;
position: absolute;
left: 0; /* وضعه في أقصى اليسار */
top: 50%;
transform: translateY(-50%);
transition: left 0.3s ease;
}
body.rtl .team-outer-container .grid-item-inner a.basic-link:hover::after {
left: -5px; /* حركة بسيطة للسهم جهة اليسار عند الحوم بالفأرة */
}
/*هذا الكود يقوم بإضافة أيقونة (Pseudo-element) تظهر في جهة اليمين داخل الرابط الذي نسقناه في الخطوة السابقة. الملاحظة المثيرة للاهتمام هنا هي أن الكلاس يسمى icon-arrow-right (سهم لليمين) ولكن المحتوى (content) المستخدم هو \f0e0 وهو رمز "الظرف البريدي" (Envelope) في مكتبة FontAwesome.
بما أننا في النسخة العربية (RTL)، وجود الأيقونة في أقصى اليمين (right: 0) سيجعلها تتداخل مع بداية النص العربي. يجب نقلها إلى جهة اليسار لتظهر بشكل طبيعي بعد انتهاء الكلمة.
🔄 التعديل والتحسين المقترح لملف العربية (RTL)
سنقوم بعكس اتجاه الأيقونة وتغيير موضعها لتتناسب مع اتجاه القراءة العربي:*/
body.rtl .team-outer-container .icon-arrow-right:before {
/* 1. إلغاء التموضع القديم من اليمين */
right: auto;
/* 2. وضع الأيقونة في جهة اليسار */
left: 0;
/* 3. الحفاظ على التوسيط العمودي */
top: 50%;
margin-top: -8px;
/* 4. الحفاظ على الخصائص الجمالية */
content: '\f0e0'; /* رمز البريد الإلكتروني */
font-family: FontAwesome;
font-size: 16px;
color: rgba(0, 0, 0, 0.5);
position: absolute;
transition: all 0.3s ease-in-out;
}
/* تأثير عند تمرير الفأرة لجعل الأيقونة تتحرك قليلاً */
body.rtl .team-outer-container .grid-item-inner a.basic-link:hover .icon-arrow-right:before {
color: #420537; /* اللون الأزرق الخاص بموقعك */
left: -5px; /* حركة بسيطة لجهة اليسار في العربية */
}
/*هذا الكود يحدد لون الرابط عند تمرير الفأرة (Hover) ليصبح باللون الأسود الصريح #000000.
بما أننا اعتمدنا في الخطوات السابقة اللون الأزرق rgb(0, 145, 213) كـ "لون تفاعلي" أساسي لموقعك، فإن استخدام اللون الأسود هنا قد يكسر التناسق البصري. في النسخة العربية (RTL)، يفضل دائماً توحيد ألوان التفاعل لتعزيز هوية العلامة التجارية.
🔄 التعديل والتحسين المقترح لملف العربية (RTL)
أقترح عليك استخدام اللون الأزرق بدلاً من الأسود، أو إضافة تأثير يجمع بين تغيير اللون والحركة ليظهر بشكل احترافي:*/
body.rtl .team-outer-container .grid-item-inner a.basic-link:hover {
/* تغيير اللون للأزرق ليتناسب مع بقية عناصر الموقع */
color: #420537;
/* جعل النص أوضح قليلاً عند التمرير */
font-weight: 600;
/* إلغاء الخط السفلي إذا وجد ليعطي مظهراً عصرياً */
text-decoration: none;
}
/* إذا أردت استمرار استخدام اللون الأسود كما طلبت، يفضل تنعيمه هكذا: */
body.rtl .team-outer-container .grid-item-inner a.basic-link:hover {
color: #000000;
transition: color 0.3s ease;
}
/*هذا الكود هو اللمسة النهائية لتأثير "الحوم" (Hover) على الأيقونة الموجودة داخل الرابط. باستخدامه، سيتحول لون أيقونة البريد/السهم إلى الأسود الصريح #000000 بمجرد أن يضع المستخدم الفأرة على النص أو الرابط.
في النسخة العربية (RTL)، قمنا سابقاً بنقل هذه الأيقونة إلى جهة اليسار، لذا سنقوم الآن بتثبيت هذا التفاعل اللوني مع إضافة حركة انسيابية بسيطة تعزز من تجربة المستخدم.
🔄 التعديل والتحسين المقترح لملف العربية (RTL)
أضف هذا الكود لضمان أن التفاعل اللوني يحدث بسلاسة مع الحركة التي صممناها سابقاً:*/
body.rtl .team-outer-container .grid-item-inner a.basic-link:hover .icon-arrow-right:before {
/* تغيير لون الأيقونة للأسود عند التفاعل */
color: #000000;
/* التأكد من بقاء الأيقونة في وضعها الصحيح جهة اليسار */
left: -5px; /* دفعة بسيطة إضافية لجهة اليسار لإظهار الحركة */
/* جعل الأيقونة تظهر بوضوح (إزالة أي شفافية قديمة) */
opacity: 1;
}
/*هذا الكود مخصص لتنسيق أزرار التنقل (Arrows) إذا كنت تستخدم مكتبة مثل LightSlider لعرض أعضاء الفريق بشكل "سلايدر" (Slider). حالياً، الأزرار تظهر كمربعات سوداء بخلفية صلبة.
في النسخة العربية (RTL)، نحتاج إلى التأكد من أن هذه الأزرار لا تغطي محتوى الصور، وأن اتجاهاتها منطقية (سهم اليمين يذهب للسابق، وسهم اليسار يذهب للتالي).
🔄 التعديل والتحسين المقترح لملف العربية (RTL)
سنقوم بتحويل المربعات السوداء الحادة إلى دوائر أنيقة تتناسب مع اللون الأزرق الخاص بموقعك، مع ضبط موضعها:*/
body.rtl .team-outer-container .lSAction > a {
background-image: none;
background: #000; /* يمكنك تغييره لـ #0091d5 ليطابق السلة */
height: 40px;
width: 40px;
line-height: 40px; /* لتوسط الأيقونة عمودياً */
border-radius: 50%; /* جعل الأزرار دائرية */
opacity: 0.7; /* جعلها شفافة قليلاً لتظهر ما خلفها */
transition: all 0.3s ease-in-out;
/* منع ظهور أطر زرقاء عند النقر في المتصفحات */
outline: none;
text-decoration: none;
}
/* تأثير عند تمرير الفأرة */
body.rtl .team-outer-container .lSAction > a:hover {
background: #420537; /* يتحول للأزرق عند الوقوف عليه */
opacity: 1;
transform: scale(1.1);
}
/* ضبط موضع الأزرار في النسخة العربية */
body.rtl .team-outer-container .lSAction > .lSPrev {
right: 10px; /* زر السابق يكون على اليمين في العربي */
left: auto;
}
body.rtl .team-outer-container .lSAction > .lSNext {
left: 10px; /* زر التالي يكون على اليسار في العربي */
right: auto;
}
/*هذا الكود هو الذي يضع السهم الفعلي داخل أزرار التنقل التي نسقناها في الخطوة السابقة. باستخدام FontAwesome ولون أبيض وحجم كبير (29px) وبتموضع مطلق (absolute).
في النسخة العربية (RTL)، التحدي ليس في اللون أو الحجم، بل في توسيط السهم تماماً داخل الدائرة أو المربع، وضمان أن الأسهم تشير للاتجاه الصحيح (سهم اليمين للسابق وسهم اليسار للتالي).
🔄 التعديل والتحسين المقترح لملف العربية (RTL)
سنقوم بضبط توسيط الأيقونة تماماً باستخدام تقنية calc لضمان أنها في المنتصف مهما كان حجم الزر:*/
body.rtl .team-outer-container .lSAction > a:before {
position: absolute;
font-family: FontAwesome;
color: #fff;
font-size: 24px; /* تصغير بسيط ليناسب الدائرة بشكل أجمل */
/* توسيط احترافي للأيقونة داخل الزر */
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
line-height: 1;
display: block;
transition: all 0.3s ease;
}
/* تحديد شكل السهم لكل اتجاه في العربية */
body.rtl .team-outer-container .lSAction > .lSPrev:before {
content: '\f105'; /* سهم يشير لليمين (السابق في العربي) */
}
body.rtl .team-outer-container .lSAction > .lSNext:before {
content: '\f104'; /* سهم يشير لليسار (التالي في العربي) */
}
/*هذا الكود يحدد موضع زر "السابق" (Previous) في السلايدر، حيث يقوم بدفعه خارج حدود الحاوية جهة اليسار بمسافة 45 بكسل (left: -45px).
في التصميم العربي (RTL)، تنعكس الأدوار والمواقع تماماً. زر "السابق" في العربية يجب أن يكون في جهة اليمين، كما أن القيمة السالبة يجب أن تُطبق على الجهة المقابلة لضمان ظهور الزر بشكل متناسق خارج الصندوق من الناحية اليمنى.
🔄 التعديل البرمجي للنسخة العربية (RTL)
أضف هذا الكود في ملف rtl.css لعكس تموضع الزر:*/
body.rtl .team-outer-container .lSAction > a.lSPrev {
/* إلغاء القيمة الإنجليزية */
left: auto;
/* تطبيق القيمة العربية: دفع الزر لجهة اليمين خارج الحاوية */
right: -45px;
}
/* في حال كانت الشاشات صغيرة، يفضل تقريب الزر للداخل لكي لا يختفي */
@media (max-width: 768px) {
body.rtl .team-outer-container .lSAction > a.lSPrev {
right: 0;
z-index: 10;
}
}
/*هذا الكود يضع رمز السهم داخل زر "السابق". في المكتبات الإنجليزية، الرمز \f104 يمثل السهم الذي يشير لليسار (<) لأن الانتقال للخلف (Previous) في اللغات التي تُكتب من اليسار لليمين يعني العودة لجهة اليسار.
أما في التصميم العربي (RTL)، فالمنطق ينعكس:
الرمز: السهم الذي يشير لليمين (>) هو الذي يعبر عن "السابق" أو العودة للبداية.
الموضع: بما أننا قمنا بتوسيط الأيقونة في الخطوات السابقة باستخدام transform و left: 50%؛ يفضل إلغاء القيمة الثابتة left: 16px لضمان التوسيط المثالي.
🔄 التعديل البرمجي للنسخة العربية (RTL)
أضف هذا الكود في ملف rtl.css:*/
body.rtl .team-outer-container .lSAction > a.lSPrev:before {
/* 1. تغيير السهم ليشير لليمين (السابق في العربية) */
content: '\f105';
/* 2. إلغاء الإزاحة اليسارية الثابتة */
left: auto;
/* 3. ضمان التوسيط المطلق في منتصف الدائرة/المربع */
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
/* التأكد من وضوح السهم */
display: block;
position: absolute;
}
/*هذا الكود هو المقابل لزر السابق، حيث يقوم بدفع زر "التالي" (Next) خارج حدود الحاوية جهة اليمين بمسافة 45 بكسل (right: -45px).
في النسخة العربية (RTL)، زر "التالي" (الذي ينقل المستخدم للأمام في السلايدر) يجب أن يتواجد في جهة اليسار، لأن حركة القراءة والتصفح تبدأ من اليمين وتنتهي يساراً.
🔄 التعديل البرمجي للنسخة العربية (RTL)
أضف هذا الكود في ملف rtl.css لعكس تموضع زر التالي:*/
body.rtl .team-outer-container .lSAction > a.lSNext {
/* إلغاء القيمة الإنجليزية */
right: auto;
/* تطبيق القيمة العربية: دفع الزر لجهة اليسار خارج الحاوية */
left: -45px;
}
/* لضمان عدم اختفاء الزر في الشاشات الصغيرة */
@media (max-width: 991px) {
body.rtl .team-outer-container .lSAction > a.lSNext {
left: 0;
z-index: 10;
}
}
/*هذا الكود يضع رمز السهم داخل زر "التالي" (Next). في التصميم الأصلي (LTR)، يتم استخدام الرمز \f105 الذي يشير لليمين (>) لأن التقدم للأمام يعني الاتجاه يميناً.
في النسخة العربية (RTL)، المنطق معكوس تماماً:
الرمز: التقدم للأمام (التالي) يعني الاتجاه نحو اليسار، لذا يجب استخدام الرمز \f104 الذي يشير لليسار (<).
الموضع: سنقوم بإلغاء الإزاحة الثابتة right: 16px لضمان التوسيط التلقائي الذي اعتمدناه سابقاً.
🔄 التعديل البرمجي للنسخة العربية (RTL)
أضف هذا الكود في ملف rtl.css لضبط اتجاه السهم:*/
body.rtl .team-outer-container .lSAction > a.lSNext:before {
/* 1. تغيير السهم ليشير لليسار (التالي في العربية) */
content: '\f104';
/* 2. إلغاء الإزاحة اليمينية الثابتة */
right: auto;
/* 3. التوسيط المثالي في منتصف الزر */
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
/* التأكد من الخصائص الأساسية */
display: block;
position: absolute;
}
/*هذا الكود هو المسؤول عن تأثير الظهور (Hover Effect)؛ حيث تظهر أزرار التنقل وتتحرك من الخارج إلى الداخل بمجرد أن يضع المستخدم الفأرة فوق قسم الفريق. في التصميم الأصلي، يتحرك زر "السابق" من موقعه المخفي (-45px) ليستقر عند الحافة اليسرى (left: 0).
في النسخة العربية (RTL)، بما أننا قمنا بنقل زر "السابق" إلى جهة اليمين، يجب أن نعكس اتجاه الحركة ليتحرك من اليمين الخارجي إلى الحافة اليمنى للصندوق.
🔄 التعديل البرمجي للنسخة العربية (RTL)
أضف هذا الكود في ملف rtl.css لضمان انسيابية الحركة:*/
body.rtl .team-outer-container:hover .lSAction a.lSPrev {
/* إلغاء الحركة جهة اليسار */
left: auto;
/* جعل الزر يستقر عند الحافة اليمنى تماماً عند تمرير الفأرة */
right: 0;
}
/*هذا الكود يكمل تأثير الظهور التفاعلي لزر "التالي" (Next). فبمجرد أن يمرر المستخدم الفأرة فوق قسم الفريق، يتحرك الزر من موضعه المخفي خارج الإطار ليستقر عند الحافة.
في النسخة العربية (RTL)، بما أننا نقلنا زر "التالي" ليكون في جهة اليسار، يجب أن نعكس اتجاه هذه الحركة ليأتي الزر من أقصى اليسار ويستقر عند left: 0.
🔄 التعديل البرمجي للنسخة العربية (RTL)
أضف هذا الكود في ملف rtl.css لضبط حركة زر التالي:*/
body.rtl .team-outer-container:hover .lSAction a.lSNext {
/* إلغاء الحركة جهة اليمين */
right: auto;
/* جعل الزر يستقر عند الحافة اليسرى عند تمرير الفأرة */
left: 0;
}
/*
===================
headerthree style
===================
*/
/*هذا الكود يحدد المظهر الأساسي لروابط القائمة العلوية في الهيدر (Header)، حيث يجعل لون الخط أسود صريح وبسماكة عريضة (Bold).
في النسخة العربية (RTL)، التحدي ليس في اللون أو السماكة، بل في نوع الخط والمسافات. الخطوط العربية الافتراضية بوزن 700 قد تبدو متلاحمة جداً أو ضخمة بشكل غير مريح، لذا سنقوم بضبطها لتظهر بشكل عصري وأنيق.
🔄 التعديل والتحسين المقترح لملف العربية (RTL)
أضف هذا الكود في ملف rtl.css:*/
body.rtl .headerthree .main-navigation ul li a {
/* 1. الحفاظ على اللون والسماكة */
color: #000;
font-weight: 700;
/* 2. تغيير الخط لخط عربي احترافي (مثل Cairo أو Tajawal) */
font-family: 'Cairo', sans-serif;
/* 3. ضبط المسافات بين الروابط لتناسب عرض الكلمات العربية */
padding-left: 15px;
padding-right: 15px;
/* 4. تصغير حجم الخط قليلاً لأن الخط العربي العريض يظهر أكبر من الإنجليزي */
font-size: 15px;
transition: color 0.3s ease;
display: block;
}
/* تأثير عند تمرير الفأرة (Hover) */
body.rtl .headerthree .main-navigation ul li a:hover {
color: #420537; /* اللون الأزرق الخاص بهوية موقعك */
}
/*
===============
pagination css
===============
*/
/*هذا الكود يقوم بإزالة الإطارات الافتراضية والهوامش من نظام ترقيم الصفحات (Pagination) في متجر ووكومرس، مما يجعله يبدو بسيطاً (Minimalist) وجاهزاً لاستقبال تنسيقاتك الخاصة.
في النسخة العربية (RTL)، لا يسبب هذا الكود مشكلة في الاتجاه، ولكنه يحتاج إلى تدعيم لضمان توزيع الأرقام والأسهم بشكل صحيح من اليمين إلى اليسار.
🔄 التعديل والتحسين المقترح لملف العربية (RTL)
سنقوم بتحويل القائمة إلى نظام flex لضمان ترتيب العناصر (1، 2، 3، التالي) بشكل صحيح وسلس في العربية:*/
body.rtl .woocommerce-pagination ul.page-numbers {
border: none !important;
margin: 0;
padding: 0;
/* ضمان ترتيب العناصر من اليمين لليسار */
display: flex;
justify-content: center; /* توسيط الأرقام في منتصف الصفحة */
list-style: none;
direction: rtl;
}
body.rtl .woocommerce-pagination ul.page-numbers li {
display: inline-block;
margin: 0 5px; /* تباعد خفيف بين الأرقام */
}
/*🔍 لمسات احترافية لأرقام الصفحات (RTL)
بما أنك أزلت الإطارات، إليك كود إضافي لجعل أرقام الصفحات تبدو كدوائر أو مربعات أنيقة تتفاعل مع المستخدم:*/
body.rtl .woocommerce-pagination ul.page-numbers li a,
body.rtl .woocommerce-pagination ul.page-numbers li span {
display: block;
padding: 8px 15px;
background-color: #f5f5f5;
color: #333;
text-decoration: none;
border-radius: 4px; /* زوايا منحنية قليلاً */
transition: all 0.3s ease;
font-family: 'Cairo', sans-serif; /* خط عربي متناسق */
}
/* حالة الرقم الحالي (المفعل) */
body.rtl .woocommerce-pagination ul.page-numbers li span.current {
background-color: #420537; /* لون متجرك الأزرق */
color: #fff;
}
/* عند تمرير الفأرة */
body.rtl .woocommerce-pagination ul.page-numbers li a:hover {
background-color: #000;
color: #fff;
}
/*هذا الكود يحدد المظهر الخارجي لكل رقم من أرقام الصفحات، حيث يجعلها داخل مربعات بإطار أزرق (#0091D5) وأبعاد ثابتة (32px عرضاً وارتفاعاً).
في النسخة العربية (RTL)، استخدام float: none جيد جداً، ولكننا نحتاج لضبط تباعد المربعات عن بعضها البعض لضمان عدم التصاق الإطارات ببعضها، والتأكد من أن الأرقام تتوسط هذه المربعات تماماً.
🔄 التعديل والتحسين المقترح لملف العربية (RTL)
سنقوم بتحويل المربعات إلى نظام inline-flex لضمان توسيط الأرقام والأسهم بداخلها (أفقياً وعمودياً) بشكل آلي:*/
body.rtl .woocommerce nav.woocommerce-pagination ul li {
border: 1px solid #420537;
float: none;
display: inline-flex; /* يضمن التوسيط التلقائي للمحتوى بداخل المربع */
align-items: center; /* توسيط عمودي */
justify-content: center; /* توسيط أفقي */
margin: 0 3px; /* إضافة مسافة بسيطة بين المربعات في العربية */
height: 32px;
width: 32px;
overflow: hidden;
transition: all 0.3s ease;
}
/* تحسين الروابط داخل المربعات لتملأ المساحة بالكامل */
body.rtl .woocommerce nav.woocommerce-pagination ul li a,
body.rtl .woocommerce nav.woocommerce-pagination ul li span {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
text-decoration: none;
font-weight: 700;
}
/*🔍 لمسات احترافية لترقيم الصفحات:
الرقم الحالي (Current Page): يفضل تمييز المربع الذي يمثل الصفحة الحالية بخلفية زرقاء كاملة ليتمكن العميل من معرفة مكانه في المتجر:*/
body.rtl .woocommerce nav.woocommerce-pagination ul li span.current {
background: #420537;
color: #fff;
}
/*تأثير التمرير (Hover): لإضافة لمسة تفاعلية عند مرور الفأرة:*/
body.rtl .woocommerce nav.woocommerce-pagination ul li:hover {
background: #000;
border-color: #000;
}
body.rtl .woocommerce nav.woocommerce-pagination ul li:hover a {
color: #fff;
}
/*هذا الكود مخصص لتنسيق السعر القديم (قبل الخصم) في مصغرات المنتجات (Widgets). هو يضمن ظهور السعر بلون رمادي خافت مع خط يتوسط النص (line-through) لتمييزه عن السعر الحالي الجديد.
في النسخة العربية (RTL)، التنسيق يعمل بشكل جيد برمجياً، ولكننا نحتاج لضبط بعض التفاصيل المتعلقة بالخط والمسافات لضمان وضوح السعر بجانب العملة العربية (مثل: "ر.س").
🔄 التعديل والتحسين المقترح لملف العربية (RTL)
في العربية، تظهر رموز العملات أحياناً بشكل أكبر من الأرقام، لذا سنقوم بضبط "سماكة الخط" وتصغيره قليلاً ليعطي الأولوية للسعر الجديد:*/
body.rtl .widget_products ul li del span.amount {
color: #666;
text-decoration: line-through;
font-weight: 400;
/* تصغير حجم السعر المشطوب قليلاً لتمييزه عن السعر الجديد */
font-size: 0.9em;
/* إضافة مسافة بسيطة جهة اليسار للفصل بين السعر القديم والجديد */
margin-left: 8px;
/* الحفاظ على الخط العربي متناسقاً */
font-family: 'Cairo', sans-serif;
}
/* التأكد من أن السعر الجديد (ins) يظهر بشكل أوضح */
body.rtl .widget_products ul li ins span.amount {
color: #420537; /* لون متجرك */
text-decoration: none;
font-weight: 700;
}
/*
========
footer widget category
========
*/
/*هذا الكود هو حجر الأساس لتنسيق قائمة تصنيفات المنتجات في الشريط الجانبي (Sidebar). وظيفته الأساسية هي التأكد من أن كل تصنيف يظهر في سطر مستقل (clear: both) وأن النص محاذى جهة اليمين.
في النسخة العربية (RTL)، الكود يعمل بشكل جيد، ولكن يمكننا تحسينه لجعله أكثر احترافية من خلال إضافة "نقاط قائمة" مخصصة أو فواصل بسيطة تزيد من سهولة القراءة.
🔄 التعديل والتحسين المقترح لملف العربية (RTL)
سنقوم بإضافة لمسات جمالية تجعل القائمة تبدو منظمة وسهلة التصفح:*/
body.rtl .widget_product_categories ul li {
text-align: right;
clear: both;
overflow: hidden;
/* إضافة مسافة عمودية بين التصنيفات */
padding: 8px 0;
/* إضافة خط فاصل خفيف بين العناصر */
border-bottom: 1px solid #f0f0f0;
/* لضمان تناسق القائمة في حال وجود عداد للمنتجات (Count) */
display: flex;
justify-content: space-between;
align-items: center;
}
/* إزالة الخط الفاصل من آخر عنصر */
body.rtl .widget_product_categories ul li:last-child {
border-bottom: none;
}
/* تنسيق الروابط داخل التصنيفات */
body.rtl .widget_product_categories ul li a {
color: #333;
text-decoration: none;
transition: all 0.3s ease;
font-family: 'Cairo', sans-serif;
}
body.rtl .widget_product_categories ul li a:hover {
color: #420537; /* لون متجرك */
padding-right: 5px; /* حركة بسيطة لليمين عند التمرير */
}
/*هذا الكود في النسخة الإنجليزية يقوم بجعل الروابط تطفو لجهة اليسار (float: left) مع التأكد من أن كل رابط يظهر في سطر منفصل.
في النسخة العربية (RTL)، هذا الكود سيعاكس اتجاه القراءة تماماً، حيث ستظهر النصوص في الجهة اليسرى بينما القائمة نفسها في اليمين، مما يشتت انتباه العميل.
🔄 التعديل البرمجي للنسخة العربية (RTL)
يجب علينا عكس الـ float ليكون جهة اليمين، أو الأفضل من ذلك، إلغاؤه واستخدام display: inline-block لضمان استقرار النص العربي:*/
body.rtl .widget_product_categories ul li a {
/* عكس الاتجاه لليمين */
float: right;
/* ضمان ظهور كل تصنيف في سطر مستقل */
clear: both;
/* تحسين المظهر */
text-align: right;
display: inline-block;
width: 100%; /* لضمان أن الرابط قابل للنقر على كامل السطر */
/* المسافات */
padding: 5px 0;
transition: all 0.3s ease;
}
/* حركة تفاعلية عند تمرير الفأرة تتناسب مع اتجاه اليمين */
body.rtl .widget_product_categories ul li a:hover {
padding-right: 10px; /* إزاحة بسيطة لليسار لإظهار التفاعل */
color: #420537;
}
/*🔍 لماذا قمنا بهذا التغيير؟
محاذاة النص: استخدام float: right يضمن أن أسماء التصنيفات تبدأ من الحافة اليمنى للويدجت، وهو ما يتوافق مع طبيعة اللغة العربية.
تجربة المستخدم (UX): عندما تكون الروابط بعرض 100% ومحاذية لليمين، يسهل على مستخدمي الهاتف النقر عليها بالإبهام بسهولة أكبر.
إلغاء التضارب: إذا بقي الكود الأصلي float: left في النسخة العربية، ستلاحظ وجود فراغ غريب على اليمين وتكدس الكلمات في أقصى اليسار بشكل غير احترافي.
💡 نصيحة إضافية للويدجت:
إذا كان التصنيف يحتوي على "تصنيفات فرعية" (Sub-categories)، يفضل إضافة هامش صغير لجهة اليمين لتمييزها:*/
body.rtl .widget_product_categories ul li ul.children {
margin-right: 15px; /* إزاحة التصنيفات الفرعية لليمين */
margin-left: 0;
}
/*
=========
coupon css
=========
*/
/*هذا الكود يضمن أن يكون لون نص زر "تحديث السلة" (Update Cart) أو أزرار الإرسال داخل جداول متجر ووكومرس باللون الأبيض الصريح، وهو أمر ضروري لضمان التباين الوضوح خاصة إذا كانت خلفية الأزرار غامقة (مثل الأسود أو الأزرق).
في النسخة العربية (RTL)، الكود يعمل بشكل صحيح، ولكننا نحتاج لإضافة بعض اللمسات لتجعل الأزرار تبدو أكثر احترافية وتناسب الخطوط العربية التي عادة ما تحتاج مساحات أكبر قليلاً لتظهر بوضوح.
🔄 التعديل والتحسين المقترح لملف العربية (RTL)
سنقوم بتحسين شكل الزر ليكون متناسقاً مع هوية متجرك (اللون الأزرق) مع ضبط الخطوط:*/
body.rtl .woocommerce .shop_table input[type="submit"] {
/* التأكد من لون النص الأبيض */
color: #fff !important;
/* تغيير الخلفية للون الأزرق الخاص بك (أو الأسود حسب رغبتك) */
background-color: #420537 !important;
/* ضبط الخط العربي */
font-family: 'Cairo', sans-serif;
font-weight: 600;
font-size: 14px;
/* تحسين شكل الزر */
padding: 10px 25px !important;
border-radius: 4px;
border: none;
cursor: pointer;
transition: all 0.3s ease;
/* في الجداول العربية، يفضل أن يكون الزر محاذياً لجهة اليمين أو اليسار حسب موقعه */
display: inline-block;
}
/* تأثير عند تمرير الفأرة */
body.rtl .woocommerce .shop_table input[type="submit"]:hover {
background-color: #420537 !important; /* يتحول للأسود عند التمرير */
transform: translateY(-2px); /* حركة رفع بسيطة */
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
/*هذا الكود يحدد لون النص عند تمرير الفأرة (Hover) فوق الأزرار في جدول المتجر (مثل زر "تحديث السلة"). حالياً، الكود يجعل النص يتغير إلى اللون الأزرق #0091D5.
في التصميم الاحترافي، إذا كانت خلفية الزر تصبح بيضاء عند التمرير، فلون النص الأزرق سيكون ممتازاً. أما إذا كانت الخلفية تظل غامقة، فقد يختفي النص. لذا، سنقوم بضبط "الخلفية" و"النص" معاً لضمان أفضل تجربة مستخدم في النسخة العربية.
🔄 التعديل والتحسين المقترح لملف العربية (RTL)
سنقوم بعكس الألوان عند التمرير (تأثير Invert) ليعطي شعوراً بالتفاعل القوي:*/
body.rtl .woocommerce .shop_table input[type="submit"]:hover {
/* تغيير لون النص للأزرق كما طلبت */
color: #420537 !important;
/* جعل الخلفية بيضاء أو شفافة مع إطار أزرق ليظهر النص بوضوح */
background-color: #fff !important;
border: 1px solid #420537 !important;
/* إضافة نعومة في الانتقال */
transition: all 0.3s ease-in-out;
}
/*هذا الكود حيوي جداً لأنه يخص زر "التقدم لإتمام الطلب" (Proceed to Checkout)، وهو أهم زر في صفحة السلة. الكود الحالي يجبر الزر على أخذ عرض المساحة بالكامل (100%)، مما يجعله بارزاً وسهل النقر، خاصة على الجوال.
في النسخة العربية (RTL)، لا نحتاج لتغيير العرض، ولكننا نحتاج للتأكد من أن هذا الزر يتميز بوضوح كـ Call to Action (CTA) رئيسي، وأن النص بداخله موسط، ونوع الخط متناسق.
🔄 التعديل والتحسين المقترح لملف العربية (RTL)
سنقوم بتعزيز هذا الزر ليصبح أكثر جاذبية (بما أنه الخطوة الأخيرة قبل الدفع) مع الحفاظ على عرضه الكامل:*/
body.rtl .wc-proceed-to-checkout a.checkout-button {
/* الحفاظ على العرض الكامل */
max-width: 100% !important;
width: 100% !important;
display: block;
/* تنسيق النص العربي */
text-align: center; /* توسيط النص مهم جداً في الأزرار العريضة */
font-family: 'Cairo', sans-serif;
font-weight: 700;
font-size: 16px;
/* ألوان الهوية (الأزرق) */
background-color: #763962 !important;
color: #fff !important;
/* تحسينات اللمس (Touch Target) */
padding: 15px 20px;
border-radius: 5px;
border: none;
position: relative;
transition: all 0.3s ease;
}
/* تأثير التمرير (Hover) */
body.rtl .wc-proceed-to-checkout a.checkout-button:hover {
background-color: #420537 !important; /* يتحول للأسود للفت الانتباه */
transform: translateY(-2px); /* حركة تفاعلية */
box-shadow: 0 5px 15px rgba(0, 145, 213, 0.3); /* ظل أزرق خافت */
}
/*🔍 لماذا هذا التنسيق مهم لزيادة المبيعات؟
سهولة النقر (Fitts's Law): عندما يكون الزر بعرض 100% وارتفاع مريح (Padding كبير)، يصبح هدفاً سهلاً للإصبع على شاشات الجوال، مما يقلل من معدل ترك السلة.
التسلسل البصري: يجب أن يكون هذا الزر هو العنصر "الأثقل" بصرياً في الصفحة. اللون الأزرق المشبع #0091d5 مع الخط العريض يحقق ذلك.
التوجيه: توسيط النص (text-align: center) في النسخة العربية يزيل الحيرة؛ فالزر العريض جداً مع نص محاذٍ لليمين قد يبدو غير متوازن.
🛠️ إضافة أيقونة توجيهية (اختياري)
لإضافة لمسة احترافية، يمكننا وضع سهم صغير يشير لليسار (اتجاه التقدم في العربية) بجانب النص:*/
body.rtl .wc-proceed-to-checkout a.checkout-button:after {
content: '\f104'; /* كود سهم اليسار في FontAwesome */
font-family: FontAwesome;
margin-right: 10px; /* مسافة بين النص والسهم */
font-weight: normal;
}
/*هذا الكود يجعل خلفية الزر تختفي تماماً (background: none) عند تمرير الفأرة، مما يُبقي فقط النص.
⚠️ تنبيه تصميمي: بالنسبة لزر حيوي مثل "إتمام الطلب" (Checkout)، فإن إخفاء الخلفية تماماً قد يجعل الزر يبدو وكأنه "نص عادي" أو رابط معطل، مما يضعف حماس المستخدم للنقر.
في النسخة العربية (RTL)، وللحفاظ على الاحترافية، أنصحك بتحويل هذا النمط إلى نمط "الإطار الخارجي" (Ghost Button)؛ أي أن تصبح الخلفية شفافة ولكن يظهر إطار ملون يحفظ شكل الزر.
🔄 التعديل والتحسين المقترح لملف العربية (RTL)
سنقوم بتعديل الكود ليصبح الزر "مفرغاً" ولكن بحدود واضحة ولون نص أزرق، ليعطي مظهراً عصرياً:*/
body.rtl .wc-proceed-to-checkout a:hover {
/* جعل الخلفية شفافة أو بيضاء */
background-color: transparent !important;
/* تغيير لون النص للأزرق ليظهر بوضوح */
color: #fff !important;
/* إضافة إطار أزرق لكي لا يختفي حجم الزر */
border: 2px solid #420537 !important;
/* إلغاء الظل ليكون التصميم مسطحاً ونظيفاً */
box-shadow: none !important;
}
/*
================
css for del
================
*/
/*هذا الكود بسيط ومباشر، ووظيفته وضع خط في منتصف النص (شطب)، وهو يُستخدم غالباً لتمييز الأسعار القديمة قبل الخصم.
في النسخة العربية (RTL)، الخاصية line-through تعمل بشكل سليم ولا تتأثر بالاتجاه. ومع ذلك، النصوص العربية (وخاصة الأرقام) تحتاج إلى معالجة بصرية لضمان أن الخط لا يطغى على الرقم فيجعله غير مقروء، ولتمييزه بوضوح عن السعر الجديد.
🔄 التعديل والتحسين المقترح لملف العربية (RTL)
سنقوم بإضافة بعض الخصائص لجعله يبدو "باهتاً" وأقل أهمية من السعر الحالي، مع ضبط الخط العربي:*/
body.rtl del span {
text-decoration: line-through;
/* 1. جعل اللون رمادياً لتقليل التركيز عليه */
color: #888;
/* 2. تقليل الشفافية قليلاً */
opacity: 0.7;
/* 3. تصغير الخط بنسبة بسيطة مقارنة بالسعر الأصلي */
font-size: 0.9em;
/* 4. التأكد من استخدام الخط العربي */
font-family: 'Cairo', sans-serif;
/* تحسين المسافات */
margin-left: 5px; /* مسافة تفصله عن السعر الجديد */
}
/*هذا الكود يستهدف الزر الأكثر أهمية في رحلة العميل: زر "إتمام الطلب" (Place Order) في صفحة الدفع. الكود الحالي يقوم بإلغاء الخلفية تماماً (background: none) عند تمرير الفأرة.
⚠️ تنبيه تقني: في صفحة الدفع، العميل يكون في مرحلة "اتخاذ قرار". إذا اختفت خلفية الزر عند التمرير، قد يشعر المستخدم بالارتباك أو يظن أن هناك خطأ تقني (Bug) لأن الزر فقد هويته البصرية.
🔄 التعديل الاحترافي للنسخة العربية (RTL)
بدلاً من إخفاء الخلفية، سنقوم بعمل تأثير "عكس الألوان" أو "التوهج" لتعزيز ثقة العميل أثناء الضغط، مع التأكد من أن النص العربي يظهر بوضوح تام.
أضف هذا الكود في ملف rtl.css:*/
/* تنسيق الزر عند تمرير الفأرة في صفحة الدفع */
body.rtl .woocommerce #payment #place_order:hover,
body.rtl .woocommerce-page #payment #place_order:hover {
/* 1. بدلاً من 'none'، سنجعل الخلفية بيضاء أو بلون مغاير */
background-color: #ffffff !important;
/* 2. تغيير لون النص للأزرق ليظل مقروءاً */
color: #420537 !important;
/* 3. إضافة إطار ليحافظ الزر على شكله */
border: 2px solid #420537 !important;
/* 4. إضافة ظل خفيف لإعطاء شعور بالعمق */
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
/* 5. تكبير طفيف جداً لجذب الانتباه */
transform: scale(1.02);
transition: all 0.3s ease-in-out;
}
/*
================
tab for my account
================
*/
/*هذا الكود يحدد عرض القائمة الجانبية (Sidebar) الخاصة بحساب العميل (My Account) في ووكومرس، حيث تستهلك حالياً 29% من عرض الصفحة.
في النسخة العربية (RTL)، المشكلة الكبرى ليست في العرض، بل في الموضع. في النسخة الإنجليزية، تكون هذه القائمة في اليسار، أما في العربية، فيجب أن تكون في جهة اليمين لتبدأ منها قراءة الخيارات (الطلبات، العنوان، تفاصيل الحساب).
🔄 التعديل البرمجي للنسخة العربية (RTL)
سنقوم بتثبيت العرض وعكس اتجاه القائمة لتكون في اليمين مع إضافة بعض المسافات الفاصلة:*/
body.rtl .woocommerce-MyAccount-navigation {
/* 1. الحفاظ على العرض المناسب */
width: 29%;
/* 2. نقل القائمة لجهة اليمين */
float: right;
/* 3. إضافة مسافة فاصلة جهة اليسار لتبتعد عن المحتوى */
margin-left: 5%;
margin-right: 0;
/* 4. محاذاة النص لليمين */
text-align: right;
}
/* ضبط محتوى الحساب (الجهة المقابلة) */
body.rtl .woocommerce-MyAccount-content {
width: 66%; /* المتبقي من المساحة */
float: left; /* نقل المحتوى لليسار */
}
/*🔍 لماذا نحتاج لهذا التقسيم؟
سهولة الوصول: المستخدم العربي يتوقع أن يجد "لوحة التحكم" و"الطلبات" في الجهة اليمنى، وهي نقطة انطلاق القراءة.
التوافق مع الجوال: في الشاشات الصغيرة، تختفي نسبة الـ 29% عادةً وتصبح القائمة بعرض 100%. لذا تأكد من وجود كود "Media Query" لضبطها:*/
@media (max-width: 768px) {
body.rtl .woocommerce-MyAccount-navigation,
body.rtl .woocommerce-MyAccount-content {
width: 100%;
float: none;
margin: 0 0 20px 0;
}
}
/*هذا الكود يقوم بتصفير الحواشي الداخلية والخارجية لقائمة "حسابي" الجانبية، مما يمنحك لوحة بيضاء فارغة لتصميم قائمة احترافية.
في النسخة العربية (RTL)، تصفير الـ padding و margin خطوة ممتازة، ولكننا نحتاج للتأكد من إزالة "نقاط القائمة" الافتراضية (Bullets) التي قد تظهر بشكل غير متناسق جهة اليمين.
🔄 التعديل والتحسين المقترح لملف العربية (RTL)
سنقوم بتنسيق القائمة لتظهر كأزرار متراصة وأنيقة، وهو النمط الأكثر عصرية لمتاجر ووكومرس:*/
body.rtl .woocommerce-MyAccount-navigation ul {
padding: 0 !important;
margin: 0;
list-style: none; /* إزالة النقاط تماماً */
}
body.rtl .woocommerce-MyAccount-navigation ul li {
border-bottom: 1px solid #eee; /* فاصل بسيط بين الخيارات */
}
body.rtl .woocommerce-MyAccount-navigation ul li:last-child {
border-bottom: none; /* إزالة الفاصل من آخر عنصر */
}
body.rtl .woocommerce-MyAccount-navigation ul li a {
display: block;
padding: 12px 15px;
color: #333;
text-decoration: none;
font-family: 'Cairo', sans-serif;
transition: all 0.3s ease;
text-align: right;
}
/* تأثير التمرير والحالة النشطة */
body.rtl .woocommerce-MyAccount-navigation ul li.is-active a,
body.rtl .woocommerce-MyAccount-navigation ul li a:hover {
background-color: #f9f9f9;
color: #420537; /* لون متجرك */
padding-right: 20px; /* إزاحة خفيفة جهة اليسار عند التفاعل */
}
/*هذا الكود يضع اللمسات الأخيرة على هيكلية عناصر القائمة الجانبية؛ فهو يلغي النقاط الافتراضية نهائياً (list-style: none) ويجعل كل خيار يمتد على كامل عرض القائمة (width: 100%) مع ترك مسافة بسيطة بين كل خيار والآخر.
في النسخة العربية (RTL)، التنسيق سليم جداً، ولكن لجعله يبدو احترافياً، سنضيف لمسات تتعلق بالانحناءات (Border Radius) والمحاذاة لضمان أن العناصر تبدو كـ "أزرار قائمة" منظمة.
🔄 التعديل والتحسين المقترح لملف العربية (RTL)
أضف هذا الكود لضمان ظهور القائمة بشكل عصري:*/
body.rtl .woocommerce-MyAccount-navigation ul li {
list-style: none !important;
width: 100%;
margin-bottom: 5px;
/* ضمان عدم وجود أي فلوت داخلي يفسد الترتيب */
float: none;
display: block;
}
body.rtl .woocommerce-MyAccount-navigation ul li a {
/* جعل الرابط يأخذ شكل "زر" داخل القائمة */
background-color: #fcfcfc;
border: 1px solid #eee;
border-radius: 5px; /* زوايا منحنية تعطي مظهراً حديثاً */
padding: 12px 15px;
display: block;
color: #444;
transition: all 0.2s ease-in-out;
}
/* تمييز الخيار النشط (الذي يقف عليه العميل حالياً) */
body.rtl .woocommerce-MyAccount-navigation ul li.is-active a {
background-color: #420537; /* لون متجرك */
color: #fff !important;
border-color: #420537;
}
/*🔍 لماذا هذا التنسيق مهم في "حسابي"؟
وضوح التفاعل: باستخدام is-active بلون مختلف، يشعر المستخدم بالسيطرة ويعرف مكانه بدقة داخل لوحة التحكم (مثلاً: هل هو في "الطلبات" أم في "تغيير كلمة المرور").
قابلية النقر: جعل العنصر width: 100% و display: block يضمن أن العميل يمكنه النقر في أي مكان داخل المربع، وليس فقط فوق النص، وهذا أساسي جداً لتجربة مستخدم مريحة على الجوال.
الترتيب العربي: المسافات (margin-bottom: 5px) تمنع تداخل الإطارات، مما يجعل القائمة تبدو كـ "درج" من الخيارات المرتبة جهة اليمين.
✅ ما هي الخطوة التالية؟
بما أننا انتهينا من هيكلة القائمة، يتبقى لنا "محتوى الصفحة" (My Account Content) الذي يظهر بجانبها. هذا المحتوى يحتوي على:
نصوص ترحيبية (مثل: "مرحباً فلان").
روابط سريعة داخل النصوص.
جداول الطلبات.*/
/*هذا الكود هو اللمسة النهائية لتجربة المستخدم في لوحة التحكم، حيث يقوم بتمييز الخيار النشط (Active Link) بلون خلفية أزرق ونص أبيض، مما يساعد العميل على معرفة القسم الذي يتصفحه حالياً (مثل: "الطلبات" أو "العناوين").
في النسخة العربية (RTL)، يفضل إضافة لمسة جمالية صغيرة تتعلق بالاتجاه لتعزيز الشعور بالهوية العربية للموقع.
🔄 التعديل والتحسين المقترح لملف العربية (RTL)
سنضيف "إشارة جانبية" جهة اليمين تظهر فقط عند اختيار العنصر، لتعطي طابعاً عصرياً يشبه التطبيقات الاحترافية:*/
body.rtl .woocommerce-MyAccount-navigation ul li.is-active a {
background: #420537 !important;
color: #fff !important;
/* إضافة حدود جهة اليمين لتمييز الاختيار بشكل أقوى */
border-right: 5px solid #000; /* خط أسود صغير على حافة الزر اليمنى */
/* التأكد من أن النص محاذى لليمين مع مسافة بسيطة */
padding-right: 20px;
/* تحسين الخط العربي */
font-weight: 700;
font-family: 'Cairo', sans-serif;
}
/*هذا الكود يضيف حيوية رائعة للقائمة الجانبية، حيث يجعل الروابط تتفاعل مع حركة الفأرة (Hover) بنفس لون القسم النشط الذي اعتمدناه سابقاً (#0091D5). استخدام الـ transition يضمن أن يكون الانتقال ناعماً وليس مفاجئاً.
في النسخة العربية (RTL)، الكود يعمل بشكل ممتاز، ولكن لإضفاء لمسة "الفخامة" والاحترافية، سنقوم بإضافة حركة بسيطة تجعل الرابط يتحرك قليلاً جهة اليمين أو اليسار عند التمرير، مما يعطي إيحاءً بالاستجابة العميقة للمستخدم.
🔄 التعديل والتحسين المقترح لملف العربية (RTL)
سنقوم بإضافة إزاحة بسيطة (Padding) عند التمرير، وهي حركة دارجة جداً في واجهات المستخدم الحديثة:*/
body.rtl .woocommerce-MyAccount-navigation ul li:hover a {
background: #420537 !important;
color: #fff !important;
/* إضافة إزاحة بسيطة للنص جهة اليسار (لأننا في RTL) */
padding-right: 25px;
/* لضمان نعومة الحركة التي أضفتها أنت */
transition: all ease 0.3s;
-webkit-transition: all ease 0.3s;
-ms-transition: all ease 0.3s;
/* إضافة ظل خفيف لإبراز الزر الذي يقف عليه المستخدم */
box-shadow: -4px 0 10px rgba(0, 145, 213, 0.2);
}
/*🔍 تحليل الكود وفوائده:
نعومة الحركة (Transitions): الكود الذي استخدمته (-webkit- و -ms-) ممتاز جداً لضمان عمل الحركة على المتصفحات القديمة مثل Safari و Internet Explorer.
التفاعل البصري: تغيير padding-right من (مثلاً) 15px إلى 25px عند التمرير يجعل النص "ينزلق" قليلاً، وهو تنبيه بصري ذكي يخبر المستخدم "أنت الآن جاهز للنقر هنا".
تناسق الألوان: استخدام نفس لون الحالة النشطة (is-active) يخلق لغة تصميم موحدة (Design Language) لكامل لوحة التحكم.
✅ ملاحظة تقنية هامة:
تأكد أن العنصر الأساسي (بدون hover) يحتوي أيضاً على نفس خصائص الـ transition التي وضعتها، وإلا ستجد أن الزر يعود للونه الأصلي فجأة وبشكل قاسي عند إبعاد الفأرة.*/
/* تأكد أن هذا الكود موجود أيضاً */
body.rtl .woocommerce-MyAccount-navigation ul li a {
transition: all ease 0.3s;
}
/*هذا الكود يحدد الشكل الأساسي لروابط قائمة "حسابي"، حيث يجعلها تظهر كأزرار مفرغة بإطار أزرق (#0091D5).
في النسخة العربية (RTL)، الكود ممتاز جداً لأنه يعتمد على display: block و width: 100% مما يسهل النقر، ولكن سنقوم بإضافة لمسات لضمان محاذاة النص العربي وتناسق المسافات البرمجية.
🔄 التعديل والتحسين المقترح لملف العربية (RTL)
سنقوم بتوحيد الخط العربي وضمان أن النص يبدأ من اليمين بشكل صحيح:*/
body.rtl .woocommerce-MyAccount-navigation ul li a {
/* الحفاظ على الألوان والإطار */
color: #420537;
border: 1px solid #420537;
/* ضبط الحجم والانتشار */
width: 100%;
padding: 10px 15px; /* زيادة مسافة اليمين قليلاً للنص العربي */
display: block;
/* محاذاة النص والخط */
text-align: right;
font-family: 'Cairo', sans-serif; /* أو أي خط عربي تستخدمه */
font-weight: 600;
/* الحركات الانتقالية التي أضفتها أنت */
transition: all ease 0.3s;
-webkit-transition: all ease 0.3s;
-ms-transition: all ease 0.3s;
/* منع تداخل الحواف مع بعضها */
box-sizing: border-box;
}
/*هذا الكود يحدد شكل منطقة المحتوى في صفحة "حسابي" (حيث تظهر تفاصيل الطلبات، العناوين، وكلمة المرور). استخدامك لإطار أزرق (#0091D5) مع حافة علوية سميكة (3px) يعطي تصميماً منظماً يشبه "البطاقات" (Cards) الاحترافية.
في النسخة العربية (RTL)، التحدي يكمن في أن هذا المربع سيظهر بجانب القائمة الجانبية، لذا يجب التأكد من أنه يحاذي اليسار (لأن القائمة في اليمين) وأنه يعالج المسافات بشكل صحيح لكي لا تلتصق النصوص بالإطارات.
🔄 التعديل والتحسين المقترح لملف العربية (RTL)
سنقوم بضبط العرض والمحاذاة لضمان تناسق المحتوى مع القائمة التي صممناها سابقاً:*/
body.rtl .woocommerce-MyAccount-content {
/* 1. الإطارات والحواف كما حددتها */
border: 1px solid #420537;
padding: 20px;
border-top: 3px solid #420537;
/* 2. المحاذاة جهة اليسار (لأن القائمة في اليمين) */
float: left;
width: 68%; /* تقريباً، لترك مسافة بينه وبين القائمة */
/* 3. تنسيق النص العربي */
text-align: right;
direction: rtl;
background-color: #fff; /* خلفية بيضاء لإبراز المحتوى */
/* 4. معالجة الشاشات الصغيرة */
box-sizing: border-box;
}
/* تنظيف المسارات بعد الفلوت */
body.rtl .woocommerce-account .woocommerce:after {
content: "";
display: table;
clear: both;
}
/*🔍 لمسات احترافية لمنطقة المحتوى (RTL):
المسافات الداخلية (Padding): بما أنك وضعت padding: 20px؛ فهذا ممتاز للغة العربية لأنها تحتاج "مساحة للتنفس". تأكد أن العناوين (H2, H3) داخل هذا المربع لا تملك هوامش علوية كبيرة لتظل متناسقة مع الحافة الزرقاء السميكة.
التجاوب (Responsiveness): في شاشات الجوال، يجب أن يصبح العرض 100% ويلغى الـ float لكي يظهر المحتوى أسفل القائمة:*/
@media (max-width: 768px) {
body.rtl .woocommerce-MyAccount-content {
width: 100% !important;
float: none !important;
margin-top: 20px;
}
}
/*هذا الكود يضمن أن زر "عرض" (View) الموجود في جداول الطلبات داخل صفحة حسابي يأخذ العرض المتاح له بالكامل ولا يتجاوز حدود الحاوية.
في النسخة العربية (RTL)، هذا الزر غالباً ما يظهر في جداول الطلبات. وبما أن النصوص العربية قد تكون أطول قليلاً (كلمة "عرض الطلب" أطول من "View")، فإن ضبط max-width يحمي التصميم من التداخل.
🔄 التعديل والتحسين المقترح لملف العربية (RTL)
سنقوم بتنسيق الزر ليكون أكثر بروزاً ومناسباً لنمط "الأزرار" التي صممناها سابقاً، مع التأكد من محاذاة النص بداخله:*/
body.rtl .woocommerce-MyAccount-content .button.view {
/* 1. الحفاظ على العرض ومنع الخروج عن الإطار */
max-width: 100%;
display: inline-block; /* لضمان قبول المسافات الجانبية */
/* 2. تحسين مظهر الزر */
background-color: #f7f7f7;
color: #420537;
border: 1px solid #420537;
padding: 8px 20px;
border-radius: 4px;
/* 3. تنسيق الخط العربي */
font-family: 'Cairo', sans-serif;
font-weight: 600;
text-align: center;
/* 4. حركة تفاعلية عند التمرير */
transition: all 0.3s ease;
}
body.rtl .woocommerce-MyAccount-content .button.view:hover {
background-color: #420537;
color: #ffffff;
box-shadow: 0 4px 8px rgba(0, 145, 213, 0.2);
}
/*هذا الكود يتحكم في المسافات بين مجموعات الحقول (Fieldsets) داخل صفحة حسابي، وهي المناطق التي تجمع البيانات المتشابهة (مثل مجموعة حقول "تغيير كلمة المرور" أو "تفاصيل العنوان").
في النسخة العربية (RTL)، المسافات العمودية (margin-bottom) تظل صحيحة، ولكننا نحتاج لضبط الحواف الجانبية والعناوين التي تأتي مع الـ fieldset (مثل وسم legend) لضمان محاذاتها لليمين بشكل احترافي.
🔄 التعديل والتحسين المقترح لملف العربية (RTL)
سنقوم بإضافة تنسيق لوسم legend (العنوان الذي يظهر أعلى مجموعة الحقول) لأنه غالباً ما يظهر منزاحاً لليسار بشكل افتراضي:*/
body.rtl .woocommerce-MyAccount-content fieldset {
margin-bottom: 20px; /* زيادة المسافة قليلاً لراحة العين */
border: 1px solid #eee; /* إطار خفيف لتمييز المجموعات */
padding: 15px;
border-radius: 5px;
text-align: right;
}
/* تنسيق عنوان المجموعة (مثل: تغيير كلمة المرور) */
body.rtl .woocommerce-MyAccount-content fieldset legend {
padding: 0 10px;
font-weight: bold;
color: #420537; /* استخدام لونك المعتمد */
font-family: 'Cairo', sans-serif;
margin-right: 10px; /* إزاحة العنوان لليمين */
}
/*هذا الكود يستهدف الروابط النصية داخل محتوى صفحة "حسابي" (مثل روابط "تعديل العنوان"، "عرض الطلب"، أو الروابط الموجودة في الرسالة الترحيبية).
في النسخة العربية (RTL)، يفضل تقليل الاعتماد على الخط السفلي (underline) لأنه قد يتقاطع مع الحروف العربية التي تحتوي على أجزاء هابطة (مثل: ر، و، ي، ن)، مما يجعل النص يبدو مزدحماً أو صعب القراءة.
🔄 التعديل والتحسين المقترح لملف العربية (RTL)
سنقوم بتغيير نمط الرابط ليكون أكثر نظافة، مع إضافة تأثير عند تمرير الفأرة يعزز تجربة المستخدم:*/
body.rtl .woocommerce-MyAccount-content a {
color: #420537;
/* 1. إزالة الخط السفلي التقليدي */
text-decoration: none;
/* 2. إضافة خط سفلي مخصص (Border) ليكون بعيداً عن الحروف العربية */
border-bottom: 1px solid rgba(0, 145, 213, 0.3);
/* 3. تنسيق الخط */
font-weight: 600;
transition: all 0.3s ease;
display: inline-block;
}
/* تأثير التمرير للروابط */
body.rtl .woocommerce-MyAccount-content a:hover {
color: #2f0227; /* درجة أغمق قليلاً عند التمرير */
border-bottom-color: #2f0227;
text-decoration: none;
}
/*هذا الكود يحدد اللون الذي يظهر عند تمرير الفأرة (Hover) على الروابط داخل منطقة المحتوى. حالياً، يتحول الرابط من الأزرق إلى الرمادي (#8b8b8b).
في النسخة العربية (RTL)، يفضل دائماً أن يكون تأثير الـ Hover "تفاعلياً" أكثر، بحيث يشعر المستخدم أن الرابط استجاب لحركته. اللون الرمادي قد يوحي أحياناً بأن الرابط "معطل" (Disabled) أو غير نشط.
🔄 التعديل والتحسين المقترح لملف العربية (RTL)
بدلاً من اللون الرمادي الباهت، سنستخدم درجة أغمق من الأزرق أو تأثيراً بصرياً يجعل الرابط يبرز، مع التأكد من سلاسة الحركة:*/
body.rtl .woocommerce-MyAccount-content a:hover {
/* 1. استخدام درجة أغمق من اللون الأساسي بدلاً من الرمادي */
color: #2f0227 !important;
/* 2. إضافة خط سفلي ناعم وواضح */
text-decoration: underline;
text-underline-offset: 4px; /* إبعاد الخط عن النقاط والحروف العربية الهابطة */
/* 3. جعل الانتقال ناعماً */
transition: color 0.3s ease-in-out;
}
/*
===========
logo text css
===========
*/
/*هذا الكود يقوم بتوسيط شعار الموقع (Logo) داخل الحاوية الخاصة به. في معظم المواقع، يكون التوسيط خياراً ممتازاً لنسخة الموبايل، أما في نسخة الحاسوب (Desktop)، فغالباً ما يفضل أصحاب المتاجر العربية أن يكون الشعار جهة اليمين.
إليك كيفية ضبط هذا الكود للنسخة العربية (RTL) لضمان مرونة التصميم:
🔄 التعديل والتحسين المقترح لملف العربية (RTL)
إذا كنت تريد للشعار أن يظل في المنتصف في كل الحالات، فكودك سليم، ولكن يفضل إضافة display: block لضمان استجابة العناصر:*/
body.rtl .sv-logo-wrap {
text-align: center;
display: block;
width: 100%;
clear: both; /* لمنع تداخل العناصر العائمة بجانبه */
}
/* تحسين صورة الشعار بداخل الحاوية */
body.rtl .sv-logo-wrap img {
max-width: 100%;
height: auto;
display: inline-block;
}
/*
===============
css for lost password
===============
*/
/*هذا الكود يتحكم في لون النص لزر "استعادة كلمة المرور" عند تمرير الفأرة عليه. حالياً، يتغير لون النص إلى الأزرق (#0091D5).
في المواقع العربية (RTL)، غالباً ما يكون هذا الزر هو "حبل النجاة" للمستخدم الذي نسي بياناته، لذا يفضل أن يكون التفاعل البصري (Hover) قوياً وواضحاً، وليس مجرد تغيير لون النص، لضمان سهولة الاستخدام.
🔄 التعديل والتحسين المقترح لملف العربية (RTL)
سنقوم بجعل الزر يتفاعل بشكل كامل (تغيير الخلفية والإطار) بدلاً من النص فقط، ليعطي شعوراً بالضغط الحقيقي:*/
body.rtl .woocommerce .lost_reset_password input.button:hover {
/* 1. عكس الألوان: نص أبيض وخلفية زرقاء */
background-color: #420537 !important;
color: #fff !important;
border-color: #420537;
/* 2. إضافة ظل خفيف لإبراز الزر */
box-shadow: 0 4px 12px rgba(0, 145, 213, 0.3);
/* 3. حركة انزلاق بسيطة للأعلى */
transform: translateY(-2px);
/* 4. التأكد من نعومة الحركة */
transition: all 0.3s ease;
}
/*هذا الكود ينسق رابط "نسيت كلمة المرور؟" الذي يظهر عادةً أسفل نموذج تسجيل الدخول. حالياً، يظهر الرابط باللون الرمادي مع خط سفلي.
في النسخة العربية (RTL)، هذا الرابط بالغ الأهمية للمستخدمين الذين يواجهون صعوبة في الدخول. اللون الرمادي قد يجعله يبدو أقل أهمية أو "باهتاً"، لذا يفضل تحسينه ليكون أكثر وضوحاً مع مراعاة جماليات الخط العربي.
🔄 التعديل والتحسين المقترح لملف العربية (RTL)
سنقوم بتغيير اللون ليكون متناسقاً مع هوية الموقع الزرقاء التي اعتمدتها، مع ضبط المسافات:*/
body.rtl .woocommerce-LostPassword.lost_password a {
/* 1. استخدام لون أكثر وضوحاً من الرمادي */
color: #420537;
/* 2. تحسين الخط السفلي لكي لا يقطع الحروف العربية */
text-decoration: none;
border-bottom: 1px solid rgba(0, 145, 213, 0.3);
/* 3. تنسيق الخط والمسافة */
font-family: 'Cairo', sans-serif;
font-size: 0.9em;
font-weight: 500;
display: inline-block;
margin-top: 10px;
/* 4. نعومة الحركة */
transition: all 0.3s ease;
}
/* تأثير عند التمرير بالماوس */
body.rtl .woocommerce-LostPassword.lost_password a:hover {
color: #2f0227;
border-bottom-color: #2f0227;
}
/*
==========
wishlist table
==========
*/
/*هذا الكود يضمن أن زر "إضافة إلى السلة" داخل جدول "قائمة الأمنيات" (Wishlist) يملأ المساحة المتاحة له ولا يتجاوز حدود العمود.
في النسخة العربية (RTL)، غالباً ما تكون جداول قائمة الأمنيات مزدحمة بالبيانات (صورة المنتج، الاسم، السعر، الحالة، ثم الزر). وبما أن النصوص العربية مثل "إضافة إلى السلة" تأخذ مساحة عرضية أكبر من الإنجليزية "Add to cart"، فإن هذا التنسيق يحمي الجدول من الانهيار أو التداخل.
🔄 التعديل والتحسين المقترح لملف العربية (RTL)
سنضيف لمسات تجعل الزر يبدو احترافياً وسهل النقر، مع التأكد من عدم وجود هوامش جانبية تزيحه عن المركز في الخلايا العربية:*/
body.rtl .wishlist_table .product-add-to-cart a.button {
/* 1. الحفاظ على مرونة العرض */
max-width: 100%;
width: 100%; /* لجعله يأخذ كامل عرض العمود في الجوال */
display: block;
/* 2. تنسيق الخط العربي */
font-family: 'Cairo', sans-serif;
font-size: 14px;
font-weight: 600;
text-align: center;
/* 3. الألوان واللمسات الجمالية */
background-color: #420537;
color: #fff;
padding: 10px 5px;
border-radius: 4px;
white-space: nowrap; /* لمنع انقسام النص العربي لسطرين داخل الزر */
/* 4. نعومة الحركة */
transition: all 0.3s ease;
}
/* تأثير التمرير للنسخة العربية */
body.rtl .wishlist_table .product-add-to-cart a.button:hover {
background-color: #2f0227;
box-shadow: 0 4px 10px rgba(0, 145, 213, 0.2);
}
/*هذا الكود يجعل زر "إضافة إلى السلة" في قائمة الأمنيات يتحول إلى نمط "مفرغ" (Ghost Button) عند تمرير الفأرة، حيث تختفي الخلفية ويصبح النص باللون الأزرق #0091D5.
في التصميم العربي (RTL)، وبما أننا نستخدم إطاراً (Border) في معظم الأزرار السابقة، يفضل التأكد من ظهور الإطار عند الـ Hover لكي لا يبدو الزر وكأنه "اختفى" أو فقد حدوده البصرية.
🔄 التعديل والتحسين المقترح لملف العربية (RTL)
سنضيف خاصية الإطار (Border) لضمان بقاء الزر واضحاً للمستخدم العربي عند التفاعل معه:*/
body.rtl .wishlist_table .product-add-to-cart a.button:hover {
/* 1. جعل الخلفية شفافة والنص أزرق */
background: transparent !important;
color: #420537 !important;
/* 2. إضافة إطار لضمان عدم اختفاء حدود الزر */
border: 1px solid #420537;
/* 3. الحفاظ على نعومة الحركة */
transition: all 0.3s ease;
/* 4. إزالة أي ظل قديم قد يشوه المظهر الشفاف */
box-shadow: none;
}
/*هذا الكود يستهدف زر "إرسال المراجعة" (Submit Review) في قسم تقييمات المنتجات. هو كود وقائي يضمن أن الزر لا يتمدد بشكل يكسر تصميم الصفحة في الشاشات الصغيرة أو في حال كان النص العربي طويلاً.
في المواقع العربية (RTL)، يظهر هذا الزر عادةً في نهاية "نموذج التقييم". وبما أن كتابة المراجعات هي جزء أساسي من التفاعل مع متجرك، يفضل تحسين مظهر الزر ليكون متناسقاً مع الهوية الزرقاء التي اعتمدناها.
🔄 التعديل والتحسين المقترح لملف العربية (RTL)
سنقوم بتنسيق الزر ليكون عريضاً وسهل النقر، مع التأكد من أن الخط العربي يظهر بوضوح:*/
body.rtl .woocommerce #review_form #respond .form-submit input {
/* 1. الحفاظ على العرض ومنع خروج الزر عن الإطار */
max-width: 100%;
width: auto; /* أو 100% إذا كنت تريده بعرض النموذج كاملاً */
min-width: 150px;
/* 2. الألوان المتناسقة مع هوية الموقع */
background-color: #420537;
color: #fff;
border: none;
padding: 12px 30px;
border-radius: 5px;
/* 3. تنسيق الخط العربي */
font-family: 'Cairo', sans-serif;
font-weight: 600;
font-size: 16px;
cursor: pointer;
/* 4. نعومة الحركة عند التفاعل */
transition: all 0.3s ease;
}
/* تأثير التمرير للزر */
body.rtl .woocommerce #review_form #respond .form-submit input:hover {
background-color: #2f0227;
box-shadow: 0 4px 12px rgba(0, 145, 213, 0.25);
}
/*هذا الكود يحدد لون النص لزر "إرسال التقييم" عند تمرير الفأرة. حالياً، يتحول لون النص فقط إلى الأزرق.
بما أننا اعتمدنا الهوية الزرقاء #0091D5 كخلفية للأزرار في الخطوات السابقة، فإن تحويل النص للأزرق عند الـ Hover (مع خلفية بيضاء مثلاً) سيجعل الزر يبدو "مفرغاً". لضمان أفضل تجربة مستخدم في المواقع العربية، يفضل أن يكون التفاعل البصري قوياً وواضحاً.
🔄 التعديل والتحسين المقترح لملف العربية (RTL)
سنقوم بجعل الزر أكثر احترافية من خلال عكس الألوان أو تعميق اللون الأزرق عند التمرير:*/
body.rtl .woocommerce #review_form #respond .form-submit input:hover {
/* 1. الحفاظ على النص أبيض مع تغميق الخلفية */
background-color: #2f0227 !important;
color: #ffffff !important;
/* 2. إضافة إطار متناسق */
border-color: #2f0227;
/* 3. إضافة ظل ليعطي إيحاء بالارتفاع */
box-shadow: 0 4px 15px rgba(0, 145, 213, 0.3);
/* 4. حركة سلسة */
transition: all 0.3s ease-in-out;
}
/*
=========
button alt hover
=========
*/
/*هذا الكود يستهدف الزر "الثانوي" أو "البديل" (alt) في ووكومرس، وهو غالباً الزر الأهم في الموقع مثل زر "إتمام الطلب" (Checkout) أو "إضافة إلى السلة" في بعض القوالب.
حالياً، عند تمرير الفأرة، يختفي لون الخلفية ويتحول النص إلى الأزرق. لضمان أن الزر لا يبدو "مكسوراً" أو يختفي في النسخة العربية (RTL)، سنضيف إطاراً (Border) ليحافظ على هيكل الزر.
🔄 التعديل والتحسين المقترح لملف العربية (RTL)
في التصميم العربي، الوضوح البصري للعمليات الشرائية أمر بالغ الأهمية. سنقوم بإضافة إطار متناسق عند الـ Hover لضمان احترافية المظهر:*/
body.rtl .woocommerce button.button.alt:hover {
/* 1. جعل الخلفية شفافة والنص أزرق */
background: transparent !important;
color: #420537 !important;
/* 2. إضافة إطار لضمان عدم ضياع حدود الزر في الخلفية البيضاء */
border: 2px solid #420537;
/* 3. تنسيق الخط العربي وضمان عدم انقسام النص */
font-family: 'Cairo', sans-serif;
font-weight: 700;
/* 4. إلغاء أي ظلال قد تظهر بشكل سيء مع الخلفية الشفافة */
box-shadow: none;
transition: all 0.3s ease-in-out;
}
/*🔍 لماذا هذا التعديل ضروري لأزرار الشراء؟
ثقة العميل: زر "إتمام الطلب" هو النقطة الأخيرة قبل الدفع. إذا اختفت حدود الزر عند الـ Hover، قد يشعر العميل بضعف في تصميم الموقع. الإطار يمنحه شعوراً بالثبات والاحترافية.
سهولة القراءة: في العربية، الكلمات مثل "إتمام الطلب" أو "تحديث السلة" تحتاج لمساحة واضحة. التصميم "المفرغ" (Ghost Button) عند الـ Hover يبرز الكلمات بشكل جيد بشرط وجود مسافة (Padding) كافية.
التوافق مع الجوال: بما أن مستخدمي الجوال لا يملكون خاصية "Hover"، تأكد أن التصميم الأصلي (قبل التمرير) للزر يحتوي على لون خلفية قوي (background-color: #0091D5) ليجذب الانتباه فوراً.
✅ نصيحة إضافية:
إذا كان هذا الزر هو زر "إتمام الطلب" في صفحة السلة، يفضل أن يظل لونه ثابتاً وقوياً حتى عند التمرير لضمان عدم تشتيت العميل عن الضغط عليه:*/
/* خيار بديل: جعل اللون أغمق قليلاً بدلاً من الشفافية لزيادة التحويلات (Conversion Rate) */
body.rtl .woocommerce button.button.alt:hover {
background-color: #2f0227 !important;
color: #fff !important;
border: none;
}
/*هذا الكود يستهدف نص "مسجل الدخول باسم (اسم المستخدم)" الذي يظهر في أعلى نماذج التعليقات أو مراجعات المنتجات عندما يكون العميل مسجلاً دخوله بالفعل.
في النسخة العربية (RTL)، يفضل ليس فقط تلوين الرابط بالأزرق، بل التأكد من أن الجملة بأكملها تتبع سياق القراءة العربي وأن الرابط يبرز بشكل يحافظ على جمالية الخط.
🔄 التعديل والتحسين المقترح لملف العربية (RTL)
سنقوم بضبط محاذاة النص وإضافة تنسيق بسيط للرابط لجعله يبدو أكثر احترافية:*/
body.rtl .logged-in-as {
/* 1. ضمان محاذاة النص بالكامل لليمين */
text-align: right;
direction: rtl;
font-family: 'Cairo', sans-serif;
font-size: 14px;
margin-bottom: 15px;
color: #666; /* لون النص العادي المحيط بالاسم */
}
body.rtl .logged-in-as a {
/* 2. تلوين اسم المستخدم وتنسيقه */
color: #420537;
text-decoration: none;
font-weight: 600;
border-bottom: 1px solid rgba(0, 145, 213, 0.2);
transition: all 0.3s ease;
}
/* تأثير عند تمرير الفأرة على الاسم */
body.rtl .logged-in-as a:hover {
color: #2f0227;
border-bottom-color: #2f0227;
}
/*هذا الكود يغير لون اسم المستخدم أو رابط "تسجيل الخروج" إلى الرمادي عند تمرير الفأرة. تقنياً، هذا يعكس التأثير الذي صممناه سابقاً (حيث كان الرابط أزرقاً ويتحول للرمادي).
في المواقع العربية الحديثة، يفضل أن يكون الـ Hover دائماً باتجاه لون أكثر حيوية أو أغمق قليلاً من اللون الأساسي لتعزيز شعور "التفاعل". تحويل اللون من الأزرق المشرق إلى الرمادي الباهت قد يعطي انطباعاً بأن الرابط أصبح "غير نشط".
🔄 التعديل المقترح للنسخة العربية (RTL)
للحفاظ على تناسق الألوان التي اخترتها لمتجرك (#0091D5)، يفضل استخدام درجة أغمق من الأزرق عند التمرير بدلاً من الرمادي:*/
body.rtl .logged-in-as a:hover {
/* 1. استخدام درجة أغمق من الأزرق بدلاً من الرمادي للحفاظ على الحيوية */
color: #2f0227 !important;
/* 2. إضافة خط سفلي ناعم لتمييز الرابط عند التفاعل */
text-decoration: underline;
text-underline-offset: 3px; /* لإبعاد الخط عن النقاط العربية */
/* 3. سرعة انتقال ناعمة */
transition: color 0.2s ease-in-out;
}
/*
=========
categories product
=========
*/
/*هذا الكود يستهدف القوائم الجانبية (Sidebars) التي تعرض "تصنيفات المنتجات" أو المدونة. في النسخة العربية (RTL)، المحاذاة لليمين هي الخيار الصحيح، واستخدام overflow: hidden يحمي التصميم من تداخل النصوص الطويلة.
لكن، غالباً ما تحتوي هذه القوائم على أيقونات صغيرة أو عداد لعدد المنتجات (Count)، وسنحتاج لضبطها لتظهر بشكل احترافي في الجهة المقابلة.
🔄 التعديل والتحسين المقترح لملف العربية (RTL)
سنقوم بإضافة لمسات لضمان توزيع المسافات بشكل صحيح، خاصة إذا كنت تستخدم النقاط الافتراضية أو عداد المنتجات:*/
body.rtl .widget_categories ul li {
/* 1. المحاذاة الأساسية */
text-align: right;
overflow: hidden;
/* 2. ضبط المسافات للحروف العربية */
padding: 8px 0;
list-style: none; /* إزالة النقاط لتنسيقها يدوياً */
border-bottom: 1px solid #f0f0f0; /* فاصل ناعم بين التصنيفات */
/* 3. لضمان ظهور الروابط والعداد في سطر واحد */
display: flex;
justify-content: space-between;
align-items: center;
}
/* تنسيق عداد المنتجات (الرقم الذي يظهر بجانب التصنيف) */
body.rtl .widget_categories ul li span.count {
background-color: #f7f7f7;
color: #666;
font-size: 12px;
padding: 2px 8px;
border-radius: 12px;
margin-right: auto; /* لدفعه لأقصى اليسار في النسخة العربية */
margin-left: 5px;
}
/*🔍 لماذا هذا التنسيق أفضل للمتاجر العربية؟
توزيع العناصر (Flexbox): باستخدام display: flex؛ نضمن أن اسم التصنيف سيكون في أقصى اليمين، وعدد المنتجات (Count) سيكون في أقصى اليسار، مما يجعل القائمة مريحة جداً للعين العربية.
سهولة التصفح: إضافة border-bottom خفيف تساعد المستخدم على التمييز بين التصنيفات بسرعة دون أن تلتصق الكلمات ببعضها.
تنسيق النقاط (Bullet Points): إذا كنت تريد إضافة أيقونة صغيرة قبل التصنيف، استخدم padding-right بدلاً من اليسار:*/
body.rtl .widget_categories ul li:before {
content: "\f105"; /* سهم بسيط */
font-family: "FontAwesome";
margin-left: 8px; /* مسافة بين السهم والنص العربي */
color: #420537;
transform: rotate(180deg); /* عكس اتجاه السهم ليناسب العربية */
}
/*هذا الكود يحتاج إلى تعديل جوهري في النسخة العربية (RTL). استخدام float: left سيجعل أسماء التصنيفات تنجرف إلى أقصى اليسار، وهو عكس اتجاه القراءة العربي، مما يجعل القائمة تبدو مكسورة أو غير متناسقة.
في المواقع العربية، يجب أن تطفو العناصر جهة اليمين، أو الأفضل من ذلك، استخدام نظام Flexbox الحديث لتجنب مشاكل الـ float التقليدية.
🔄 التعديل والتحسين المقترح لملف العربية (RTL)
سنقوم بعكس الاتجاه وضمان أن الروابط تأخذ مكانها الصحيح في جهة اليمين:*/
body.rtl .widget_categories ul li a {
/* 1. عكس الاتجاه لليمين */
float: right;
/* 2. تحسين مظهر الخط العربي */
color: #333;
text-decoration: none;
font-family: 'Cairo', sans-serif;
font-weight: 500;
transition: color 0.3s ease;
}
/* التفاعل عند التمرير */
body.rtl .widget_categories ul li a:hover {
color: #420537; /* لونك المعتمد */
padding-right: 5px; /* إزاحة بسيطة لليمين تعطي شعوراً بالحركة */
}
/*🛠️ الحل الأفضل باستخدام Flexbox (بديل الـ Float)
بدلاً من استخدام float الذي قد يسبب مشاكل في ارتفاع العناصر (Collapse)، يفضل استبداله بهذا التنسيق الذي يضمن بقاء النص والعداد في سطر واحد وبشكل مرتب:*/
body.rtl .widget_categories ul li {
display: flex;
justify-content: space-between; /* يدفع النص لليمين والعدد لليسار */
align-items: center;
direction: rtl;
}
body.rtl .widget_categories ul li a {
float: none; /* إلغاء الفلوت */
flex-grow: 1;
text-align: right;
}
/*
=========
both sidebar input
=========
*/
/*
====
header color for sales offer
====
*/
/*هذا الكود يستهدف العنوان الصغير (Mini-title) داخل ويدجت "العروض والصفقات" (Offer Deal) الخاصة بقالب StoreVilla. حالياً، يظهر النص باللون الرمادي #666.
في المواقع العربية (RTL)، غالباً ما تكون هذه العناوين هي المفتاح لجذب انتباه العميل للعروض المحدودة. وبما أننا اعتمدنا اللون الأزرق #0091D5 كسمة أساسية لموقعك، يفضل جعل هذا العنوان أكثر بروزاً وتنسيقه ليدعم جمالية الخط العربي.
🔄 التعديل والتحسين المقترح لملف العربية (RTL)
سنقوم بتعديل اللون وإضافة لمسات تجعل العنوان يبدو كـ "تاغ" (Tag) أو ملصق جذاب:*/
body.rtl .widget_storevilla_pro_offer_deal_widget_area .mini-title a {
/* 1. الحفاظ على اللون الرمادي أو تغييره للأزرق لزيادة التفاعل */
color: #420537;
/* 2. تحسين الخط العربي */
font-family: 'Cairo', sans-serif;
font-weight: 700;
font-size: 13px;
text-decoration: none;
/* 3. إضافة خلفية خفيفة لجعله يبدو كملصق عرض */
background-color: rgba(0, 145, 213, 0.05);
padding: 2px 10px;
border-radius: 3px;
/* 4. ضبط المسافات */
display: inline-block;
margin-bottom: 5px;
transition: all 0.3s ease;
}
/* تأثير التمرير */
body.rtl .widget_storevilla_pro_offer_deal_widget_area .mini-title a:hover {
background-color: #420537;
color: #ffffff !important;
}
/*هذا الكود يحدد اللون الذي يظهر عند تمرير الفأرة على العنوان الصغير في ويدجت العروض. بما أننا اقترحنا سابقاً جعل اللون الأساسي أزرق، فإن الـ Hover هنا يحتاج إلى لمسة إضافية لتمييزه، مثل تغميق الدرجة أو إضافة تأثير بصري بسيط.
في التصميم العربي (RTL)، يفضل دائماً أن تكون التفاعلات (Micro-interactions) واضحة جداً لأن المستخدم العربي يتفاعل بشكل أكبر مع العناصر التي تعطي رد فعل بصري قوي.
🔄 التعديل والتحسين المقترح لملف العربية (RTL)
سنقوم بتعديل الكود ليصبح التأثير أكثر عمقاً واحترافية:*/
body.rtl .widget_storevilla_pro_offer_deal_widget_area .mini-title a:hover {
/* 1. استخدام درجة أغمق من الأزرق لتمييز الحالة */
color: #2f0227 !important;
/* 2. إضافة إزاحة بسيطة لليمين (تأثير حركي جذاب) */
padding-right: 5px;
/* 3. إضافة خط سفلي ناعم وبعيد عن الحروف العربية */
text-decoration: none;
border-bottom: 2px solid #2f0227;
/* 4. حركة انسيابية */
transition: all 0.3s ease-in-out;
}
/*هذا الكود ينسق رؤوس الجداول (Headers) في قائمة الأمنيات. في النسخة العربية (RTL)، تعتبر هذه العناوين (مثل: المنتج، السعر، حالة المخزون) هي الدليل البصري للعميل، لذا يجب أن تكون محاذاتها واضحة ومنظمة تماماً.
إضافة الحافة العلوية (border-top) والتباعد (padding) خطوة جيدة، ولكننا نحتاج لضبطها لتناسب اتجاه القراءة العربي ولتكون أكثر تناسقاً مع الهوية الزرقاء للموقع.
🔄 التعديل والتحسين المقترح لملف العربية (RTL)
سنقوم بتحسين شكل العناوين لتكون أكثر بروزاً مع ضمان محاذاة النص لليمين:*/
body.rtl .woocommerce table.wishlist_table thead th {
/* 1. الحفاظ على الإطار العلوي مع إضافة لون متناسق */
border-top: 2px solid #420537; /* استخدام لون الهوية لتمييز بداية الجدول */
border-bottom: 1px solid #eee; /* إضافة خط سفلي لفصل العناوين عن المحتوى */
/* 2. ضبط المسافات والخط العربي */
padding: 18px 10px; /* زيادة المسافة الجانبية قليلاً */
text-align: right; /* ضمان المحاذاة لليمين */
font-family: 'Cairo', sans-serif;
font-weight: 700;
font-size: 15px;
color: #333;
/* 3. منع انقسام الكلمات العربية الطويلة */
white-space: nowrap;
}
/* في الشاشات الصغيرة، قد نحتاج لضبط المحاذاة للمنتصف */
@media (max-width: 768px) {
body.rtl .woocommerce table.wishlist_table thead th {
text-align: center;
padding: 10px 5px;
}
}
/*هذا الكود ينسق منطقة "أيقونات المشاركة" (Share Icons) في إضافة YITH Wishlist، وهي المنطقة التي تسمح للعملاء بمشاركة قائمة أمنياتهم عبر منصات التواصل الاجتماعي.
في النسخة العربية (RTL)، غالباً ما تظهر هذه الأيقونات بجانب نص "مشاركة على:"، لذا نحتاج للتأكد من أن النص والأيقونات يتبعون الترتيب الصحيح من اليمين إلى اليسار مع توزيع مسافات احترافي.
🔄 التعديل والتحسين المقترح لملف العربية (RTL)
سنقوم بإضافة تنسيق يضمن محاذاة العناصر جهة اليمين وتحسين مظهر الأيقونات لتكون أكثر جاذبية:*/
body.rtl .yith-wcwl-share {
/* 1. ضبط المسافات والمحاذاة */
padding: 15px 10px; /* زيادة المسافة العلوية قليلاً */
margin-bottom: 20px; /* إضافة مسافة ليفصلها عن أسفل الجدول */
text-align: right; /* محاذاة النص لليمين */
border-top: 1px solid #eee; /* إضافة فاصل ناعم بين الجدول والمشاركة */
}
/* تنسيق عنوان "مشاركة على" */
body.rtl .yith-wcwl-share h4.yith-wcwl-share-title {
display: inline-block;
margin-left: 15px; /* مسافة بين النص والأيقونات */
margin-right: 0;
font-family: 'Cairo', sans-serif;
font-size: 14px;
color: #333;
}
/* تنسيق قائمة الأيقونات */
body.rtl .yith-wcwl-share ul {
display: inline-flex;
list-style: none;
padding: 0;
margin: 0;
vertical-align: middle;
}
body.rtl .yith-wcwl-share ul li {
margin-left: 10px; /* مسافة بين الأيقونة والأخرى */
margin-right: 0;
}
/*هذا الكود يقوم بضبط عنوان "المشاركة" (مثل: شارك على:) ليكون في نفس السطر مع أيقونات التواصل الاجتماعي.
في التصميم العربي (RTL)، التحدي الأكبر هو المسافات الجانبية. بما أن النص يظهر قبل الأيقونات، يجب أن تكون المسافة الفاصلة جهة اليسار (لأن الأيقونات ستتبع النص من جهة اليسار في السياق العربي).
🔄 التعديل والتحسين المقترح لملف العربية (RTL)
سنقوم بإضافة لمسة تضمن محاذاة النص والخط العربي بشكل مثالي:*/
body.rtl .yith-wcwl-share h4.yith-wcwl-share-title {
/* 1. الحفاظ على التنسيق العرضي */
margin: 0;
display: inline-block;
vertical-align: middle;
/* 2. إضافة مسافة جهة اليسار لتبتعد عن الأيقونات */
margin-left: 15px;
margin-right: 0; /* تصفير المسافة اليمنى */
/* 3. تحسين مظهر الخط العربي */
font-family: 'Cairo', sans-serif;
font-size: 15px;
font-weight: 600;
color: #444;
}
/*هذا الكود يضمن بقاء قائمة أيقونات التواصل الاجتماعي في نفس السطر مع عنوان المشاركة.
في المواقع العربية (RTL)، وبما أننا جعلنا العنوان يظهر في اليمين، فإن القائمة (ul) ستتبعه تلقائياً جهة اليسار. التعديل الأهم هنا هو التأكد من أن المسافات (Margins) والـ (Padding) الافتراضية للقائمة لا تزيح الأيقونات بشكل خاطئ.
🔄 التعديل والتحسين المقترح لملف العربية (RTL)
سنقوم بضبط القائمة لضمان محاذاة الأيقونات بشكل انسيابي مع النص العربي:*/
body.rtl .yith-wcwl-share ul {
/* 1. الحفاظ على التموضع العرضي */
display: inline-block;
vertical-align: middle;
/* 2. تصفير الهوامش والبادئات الافتراضية للقوائم */
margin: 0;
padding: 0;
list-style: none;
}
/* تنسيق عناصر القائمة (الأيقونات الفردية) */
body.rtl .yith-wcwl-share ul li {
display: inline-block;
/* 3. إضافة مسافة بين كل أيقونة والتي تليها جهة اليسار */
margin-left: 8px;
margin-right: 0;
}
/* إزالة المسافة من آخر أيقونة جهة اليسار */
body.rtl .yith-wcwl-share ul li:last-child {
margin-left: 0;
}
/*
bothsidebar
*/
/*هذا الكود يحتاج إلى تغيير فوري في النسخة العربية (RTL). حالياً، الكود يجبر معلومات الاتصال (رقم الهاتف، العنوان، البريد الإلكتروني) على المحاذاة لليسار، وهو ما يتناقض مع اتجاه القراءة العربي ويجعل شكل الويدجت غير متناسق في القائمة الجانبية أو التذييل.
🔄 التعديل والتحسين المقترح لملف العربية (RTL)
سنقوم بعكس الاتجاه ليكون اليمين هو الأساس، مع ضبط المسافات للأيقونات التي تظهر عادةً بجانب هذه المعلومات:*/
body.rtl .widget-area .widget_storevilla_contact_info_area .contacts-info li {
/* 1. تصحيح المحاذاة لليمين */
text-align: right;
/* 2. ضبط اتجاه النص */
direction: rtl;
/* 3. تنسيق الخط العربي والمسافات */
font-family: 'Cairo', sans-serif;
padding: 10px 0;
list-style: none;
display: flex; /* لضمان محاذاة الأيقونة مع النص بشكل مثالي */
align-items: flex-start;
}
/* تنسيق الأيقونة (إذا كانت موجودة داخل li) */
body.rtl .widget-area .widget_storevilla_contact_info_area .contacts-info li i {
/* 4. إضافة مسافة جهة اليسار لتبتعد عن النص العربي */
margin-left: 12px;
margin-right: 0;
color: #420537; /* لون الهوية الخاص بك */
font-size: 18px;
margin-top: 4px; /* لضبط موازاة الأيقونة مع أول سطر نصي */
}
/*هذا الكود يقوم بجعل حقول (الاسم، البريد الإلكتروني، والموقع الإلكتروني) تأخذ العرض الكامل بنسبة 100% في القالب الذي يحتوي على شريطين جانبيين (Both Sidebars). هذا خيار ذكي لأن المساحة المتاحة للمحتوى تكون ضيقة، فجعل الحقول تحت بعضها بدلاً من بجانب بعضها يسهل عملية الكتابة.
في النسخة العربية (RTL)، التعديل الأساسي المطلوب هو التأكد من أن "مؤشر الكتابة" والنصوص التوضيحية (Placeholders) تبدأ من جهة اليمين.
🔄 التعديل والتحسين المقترح لملف العربية (RTL)
سنقوم بضبط المحاذاة والخط العربي لضمان تجربة كتابة مريحة للمستخدم:*/
body.rtl .bothsidebar .comment-respond .comment-form-url,
body.rtl .bothsidebar .comment-respond .comment-form-author,
body.rtl .bothsidebar .comment-respond .comment-form-email {
/* 1. التأكد من العرض الكامل والمحاذاة لليمين */
width: 100%;
text-align: right;
float: right; /* لضمان عدم حدوث مشاكل في توزيع الحقول */
/* 2. تنسيق الخط العربي */
font-family: 'Cairo', sans-serif;
}
/* ضبط حقول الإدخال نفسها داخل هذه الحاويات */
body.rtl .comment-respond input[type="text"],
body.rtl .comment-respond input[type="email"],
body.rtl .comment-respond input[type="url"] {
direction: rtl;
text-align: right;
padding: 10px 15px; /* مساحة داخلية مريحة للكتابة بالعربية */
border: 1px solid #ddd;
border-radius: 4px;
}
/* تحسين شكل النصوص التوضيحية (Placeholders) */
body.rtl .comment-respond input::placeholder {
text-align: right;
color: #999;
}
/*هذا الكود يضمن أن أزرار المنتج (مثل "إضافة للسلة"، "عرض التفاصيل"، أو "تمت الإضافة") تأخذ العرض المتاح لها بالكامل ولا تنجرف لجهة معينة باستخدام float: none عند عرض المنتجات في 4 أعمدة.
في التصميم العربي (RTL)، وبما أن النصوص العربية (مثل "إضافة إلى السلة") عادة ما تكون أطول من الإنجليزية، فإن جعل الأزرار بعرض كامل (max-width: 100%) هو الخيار الأمثل لمنع تشوه التصميم أو خروج النص عن حدود الزر.
🔄 التعديل والتحسين المقترح لملف العربية (RTL)
سنقوم بإضافة لمسات تضمن تناسق هذه الأزرار بجانب بعضها أو فوق بعضها بشكل مرتب مع دعم الخط العربي:*/
body.rtl .single-product.columns-4 .product-button-wrap a.button,
body.rtl .single-product.columns-4 .product-button-wrap a.added_to_cart,
body.rtl .single-product.columns-4 .product-button-wrap a.villa-details {
/* 1. ضمان العرض الكامل والتموضع الصحيح */
max-width: 100%;
width: 100%;
display: block;
float: none;
margin-bottom: 8px; /* مسافة بين الأزرار إذا ظهرت فوق بعضها */
/* 2. تنسيق الخط العربي */
font-family: 'Cairo', sans-serif;
font-size: 14px;
font-weight: 600;
text-align: center;
/* 3. تنظيف الزوائد */
padding: 10px 5px;
box-sizing: border-box;
white-space: nowrap; /* منع انقسام الكلمة لسطرين في الأعمدة الضيقة */
overflow: hidden;
text-overflow: ellipsis; /* إضافة نقاط في حال كان النص طويلاً جداً */
}
/* تمييز زر "التفاصيل" عن زر "السلة" */
body.rtl .single-product.columns-4 .product-button-wrap a.villa-details {
background-color: #f5f5f5;
color: #333;
border: 1px solid #ddd;
}
/*
=========
=========
*/
/*هذا الكود يستهدف السعر الجديد (المخفض) داخل صفحة المنتج أو سلة المشتريات. في ووكومرس، يتم استخدام الوسم (إختصار لـ Inserted) لعرض السعر بعد الخصم، بينما يتم استخدام للسعر القديم المشطوب.
في المتاجر العربية، يُعتبر السعر هو العنصر الأكثر أهمية للعميل. جعل الخط عريضاً (700) خطوة ممتازة، ولكن يمكننا تحسينه ليكون أكثر بروزاً وتناسقاً مع لغة الموقع.
🔄 التعديل والتحسين المقترح لملف العربية (RTL)
سنقوم بإضافة لون الهوية (#0091D5) وتكبير الحجم قليلاً لتمييز السعر المخفض عن السعر الأصلي المشطوب:*/
body.rtl form.cart ins span {
/* 1. جعل الخط عريضاً وواضحاً */
font-weight: 700;
/* 2. تلوين السعر بلون الهوية الأزرق لفت الانتباه للخصم */
color: #420537;
/* 3. تكبير حجم السعر قليلاً */
font-size: 1.2em;
/* 4. إزالة أي خط تحت السعر (أحياناً المتصفحات تضيفه لوسم ins) */
text-decoration: none;
}
/* تنسيق إضافي للسعر القديم المشطوب لزيادة التباين */
body.rtl form.cart del span {
color: #999;
font-size: 0.9em;
margin-left: 8px; /* مسافة بين السعر القديم والجديد في العربية */
}
/*
======
======
*/
/*هذا الكود يستهدف الروابط التي تظهر داخل "رسائل النجاح" في ووكومرس (مثل رابط "عرض السلة" الذي يظهر بعد إضافة منتج). حالياً، الكود يجعل الرابط باللون الأحمر، وهو ما قد يسبب ارتباكاً للمستخدم لأن اللون الأحمر يرتبط عادةً بالتحذيرات أو الأخطاء، بينما الرسالة نفسها تكون خضراء (رسالة نجاح).
🔄 التعديل والتحسين المقترح لملف العربية (RTL)
في النسخة العربية، يفضل أن يكون الرابط متناسقاً مع لون الرسالة (الأخضر) أو لون هويتك (الأزرق) لضمان راحة العين:*/
body.rtl .woocommerce-message > a {
/* 1. تغيير اللون للأزرق (لون هويتك) بدلاً من الأحمر */
color: #420537 !important;
/* 2. إضافة تنسيق لتمييز الرابط */
text-decoration: underline;
text-underline-offset: 4px;
font-weight: 700;
/* 3. ضمان وجود مسافة عن النص العربي */
margin-right: 5px;
margin-left: 5px;
}
/* تأثير عند تمرير الفأرة */
body.rtl .woocommerce-message > a:hover {
color: #2f0227 !important;
text-decoration: none;
}
/*🔍 لماذا يفضل تجنب اللون الأحمر في "الرسائل الخضراء"؟
سيكولوجية الألوان: رسالة النجاح في ووكومرس لها خلفية خضراء باهتة. وضع نص أحمر فوقها أو بجانبها يخلق تبايناً حاداً (Clashing colors) يزعج العين ويوحي بوجود "خطأ" في العملية.
التباين في العربية: الخطوط العربية الملونة بالأحمر الصريح تكون قاسية في القراءة. استخدام الأزرق #0091D5 يحافظ على هويتك البصرية ويجعل الرابط يبدو "قابلاً للنقر" بشكل بديهي.
المحاذاة: في العربية، تظهر الرسالة من اليمين. غالباً ما يكون الرابط (مثل "عرض السلة") في أقصى اليسار داخل الرسالة أو مدمجاً في النص. الكود أعلاه يضمن وجود مسافات كافية حوله.
💡 تنسيق إضافي لرسائل الخطأ (الأحمر الحقيقي):
إذا كنت تريد تمييز الروابط في رسائل الخطأ (مثل "كلمة المرور خاطئة")، يمكنك استخدام هذا الكود:*/
body.rtl .woocommerce-error > a {
color: #b20808; /* أحمر داكن احترافي */
font-weight: bold;
}
/*
========
col -4
========
*/
/*هذا الكود هو "شبكة الأمان" التي تضمن أن جميع أنواع الأزرار داخل شبكة المنتجات (سواء كانت أزرار "إضافة للسلة"، "تفاصيل"، أو أزرار النماذج المدمجة) تلتزم بنفس القواعد في حالة العرض بـ 4 أعمدة.
بما أن المساحة في نظام الـ 4 أعمدة ضيقة جداً (خاصة في اللغة العربية التي قد تكون كلماتها أطول)، فإن إلغاء الـ float وجعل العرض كاملاً (max-width: 100%) هو قرار ممتاز لتجنب تداخل الأزرار.
🔄 التعديل والتحسين المقترح لملف العربية (RTL)
في النسخة العربية، نحتاج للتأكد من أن الأزرار متراصة رأسياً بشكل نظيف، مع تصفير أي هوامش قد تسبب عدم توازن بصري:*/
/* استهداف الأزرار في شبكة الـ 4 أعمدة للنسخة العربية */
body.rtl .columns-4 .products.grid li .product-button-wrap a.button,
body.rtl .columns-4 .products.grid li .product-button-wrap a.added_to_cart,
body.rtl .columns-4 .products.grid li .product-button-wrap a,
body.rtl .columns-4 .products.grid li .woocommerce #respond input#submit,
body.rtl .columns-4 .products.grid li .woocommerce a.button,
body.rtl .columns-4 .products.grid li .woocommerce button.button,
body.rtl .columns-4 .products.grid li .woocommerce input.button {
/* 1. السيطرة على العرض والتموضع */
width: 100%;
max-width: 100%;
float: none !important;
display: block;
margin-bottom: 5px; /* مسافة بسيطة بين الأزرار إذا وُجد أكثر من واحد */
/* 2. ضبط النصوص العربية */
text-align: center;
font-family: 'Cairo', sans-serif;
font-size: 13px; /* تصغير الخط قليلاً ليناسب العرض الضيق */
padding: 8px 4px;
/* 3. منع تمدد النص بشكل غير متناسق */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/*هذا الكود يستهدف الروابط الموجودة داخل رسائل الخطأ في ووكومرس (مثل رابط "استعادة كلمة المرور" الذي يظهر عند إدخال بيانات خاطئة). حالياً، يظهر الرابط باللون الرمادي الغامق مع خط سفلي.
في المواقع العربية (RTL)، وبما أن رسالة الخطأ تكون بخلفية حمراء، فإن اللون الرمادي #515151 قد لا يكون واضحاً كفاية أو قد يبدو باهتاً جداً، مما يصعب على المستخدم رؤية الحل للمشكلة.
🔄 التعديل والتحسين المقترح لملف العربية (RTL)
سنقوم بتحسين التباين لضمان سهولة القراءة مع الحفاظ على وضوح الرابط كعنصر تفاعلي:*/
body.rtl ul.woocommerce-error li a {
/* 1. اختيار لون أغمق لزيادة التباين مع الخلفية الحمراء للرسالة */
color: #222222 !important;
/* 2. تحسين مظهر الخط السفلي ليناسب الخطوط العربية */
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: 1px;
/* 3. تنسيق الخط العربي */
font-weight: 700;
font-family: 'Cairo', sans-serif;
/* 4. مسافة بسيطة عن النص المحيط */
margin: 0 3px;
transition: all 0.2s ease;
}
/* تأثير عند تمرير الفأرة */
body.rtl ul.woocommerce-error li a:hover {
color: #420537 !important;
text-decoration-color: #420537; /* تلوين الخط السفلي بالأزرق عند التمرير */
}
/*هذا الكود هو اللمسة النهائية لرسائل الخطأ، حيث يقوم بتحويل لون الرابط إلى الأزرق المشرق عند تمرير الفأرة، وهو تصرف ذكي لأنه يربط "حل المشكلة" بهوية الموقع البصرية ويخبر المستخدم بوضوح أن هذا النص قابل للنقر.
في النسخة العربية (RTL)، وبما أننا في سياق "رسالة خطأ"، سنضيف تأثيراً بسيطاً يجعل الرابط يبرز أكثر دون أن يفقد هيبته.
🔄 التعديل والتحسين المقترح لملف العربية (RTL)
سنقوم بجعل الرابط أكثر استجابة (Responsive) عند التفاعل:*/
body.rtl ul.woocommerce-error li a:hover {
/* 1. استخدام اللون الأزرق المعتمد */
color: #420537 !important;
/* 2. تغيير لون الخط السفلي ليتناسب مع اللون الجديد */
text-decoration-color: #420537;
/* 3. إضافة تأثير سطوع خفيف (Glow) لزيادة البروز */
text-shadow: 0 0 1px rgba(0, 145, 213, 0.2);
/* 4. سرعة انتقال سلسة */
transition: all 0.3s ease-in-out;
}
/*هذا الكود يقوم بإلغاء اللون الافتراضي لسعر المنتج في ووكومرس ويجعله "يرث" (inherit) لون النص العادي المحيط به.
في المتاجر العربية، هذا التنسيق قد يمثل مخاطرة؛ لأن السعر هو أهم معلومة يبحث عنها العميل. إذا ورث السعر لون النص العادي (غالباً رمادي أو أسود باهت)، سيفقد بروزه وسط تفاصيل المنتج، مما قد يؤدي لتراجع في نسبة التحويل.
🔄 التعديل والتحسين المقترح لملف العربية (RTL)
بدلاً من جعل اللون باهتاً، سنقوم بتمييز السعر ليكون أول ما تقع عليه عين العميل العربي، مع ضبط المسافات للعملة العربية (مثل: ر.س، د.إ):*/
body.rtl .woocommerce div.product p.price,
body.rtl .woocommerce div.product span.price {
/* 1. استخدام لون الهوية الأزرق بدلاً من inherit لزيادة البروز */
color: #420537 !important;
/* 2. تحسين حجم ووزن الخط العربي */
font-weight: 700;
font-size: 1.5rem; /* تكبير السعر ليكون واضحاً */
font-family: 'Cairo', sans-serif;
/* 3. ضبط الاتجاه والمسافات */
direction: rtl;
display: block;
margin-bottom: 15px;
}
/* تنسيق العملة العربية إذا كانت داخل وسم small أو span فرعي */
body.rtl .woocommerce div.product p.price .woocommerce-Price-currencySymbol {
font-size: 0.8em; /* تصغير رمز العملة قليلاً ليعطي فخامة للرقم */
margin-right: 5px; /* مسافة بين الرقم والعملة */
font-weight: 400;
}
/*هذا الكود يغير سلوك زر "إتمام الطلب" أو "تحديث السلة" (الأزرار الأساسية) عند تمرير الفأرة. حالياً، الكود يقوم بإزالة الخلفية تماماً (background: none) ويحول لون النص إلى الأزرق.
في التصميم العربي (RTL)، وبما أن هذه الأزرار هي "المحرك الأساسي للمبيعات" (Call to Action)، فإن إزالة الخلفية تماماً قد يجعل الزر يبدو "ضعيفاً" أو كأنه اختفى، مما قد يربك العميل.
🔄 التعديل والتحسين المقترح لملف العربية (RTL)
بدلاً من إزالة الخلفية بالكامل، سنقوم بعمل تأثير "الزر المفرغ" (Outline Button) بشكل احترافي، مع إضافة إطار يحافظ على هيكل الزر:*/
body.rtl p.cart .button.alt:hover {
/* 1. جعل الخلفية شفافة أو بيضاء بدلاً من none */
background-color: #ffffff !important;
/* 2. تغيير لون النص للأزرق */
color: #420537 !important;
/* 3. إضافة إطار أزرق للحفاظ على شكل الزر */
border: 2px solid #420537;
/* 4. تحسين مظهر الخط العربي */
font-family: 'Cairo', sans-serif;
font-weight: 700;
/* 5. إضافة انتقال ناعم */
transition: all 0.3s ease;
}
/*🔍 لماذا هذا التعديل أفضل لمتجرك؟
وضوح حدود الزر: عند استخدام background: none بدون إطار (Border)، يفقد الزر "مساحته القابلة للنقر" بصرياً. إضافة الإطار تجعل العميل يدرك أنه لا يزال يضغط على زر.
التفاعل العكسي: هذا التأثير (خلفية ملونة تتحول لخلفية بيضاء بإطار) هو نمط عصري جداً في مواقع التجارة الإلكترونية، ويعطي انطباعاً بالنظافة والدقة في التصميم.
بروز النص العربي: الخطوط العربية تبدو أجمل عندما يكون هناك تباين واضح. اللون الأزرق #0091D5 على الخلفية البيضاء يوفر وضوحاً عالياً جداً للقراءة.
💡 نصيحة إضافية لزر السلة:
إذا كان الزر يحتوي على أيقونة سلة صغيرة، يمكنك إضافتها في النسخة العربية لتظهر على يمين النص:*/
body.rtl p.cart .button.alt::before {
content: "\f07a"; /* رمز السلة في FontAwesome */
font-family: "Font Awesome 5 Free";
margin-left: 8px; /* مسافة يسار الأيقونة لتبتعد عن النص العربي */
font-weight: 900;
}
/*هذا الكود يحتاج إلى تعديل ضروري للنسخة العربية (RTL). حالياً، الكود يجبر قائمة "ترتيب المنتجات" (Dropdown) على الظهور في جهة اليسار، بينما في المواقع العربية يجب أن تظهر في جهة اليمين لتتناسق مع بداية سطر القراءة وتوزيع العناصر في المتجر.
🔄 التعديل والتحسين المقترح لملف العربية (RTL)
سنقوم بعكس اتجاه القائمة لليمين وضبط المسافة السفلية لضمان عدم تداخلها مع شبكة المنتجات:*/
body.rtl .woocommerce .woocommerce-ordering,
body.rtl .woocommerce-page .woocommerce-ordering {
/* 1. عكس الاتجاه لليمين */
float: right;
/* 2. ضبط المسافات */
margin-bottom: 30px;
margin-left: 0;
/* 3. تنسيق القائمة المنسدلة للخط العربي */
font-family: 'Cairo', sans-serif;
}
/* تحسين شكل حقل الاختيار (Select) */
body.rtl .woocommerce .woocommerce-ordering select {
padding: 8px 15px;
border: 1px solid #ddd;
border-radius: 4px;
direction: rtl; /* ضمان ظهور السهم والنص من اليمين */
background-position: left 10px center; /* تحريك سهم الاختيار لليسار في العربية */
}
/*
============
scroll bar css
============
*/
/*هذا الكود يستهدف شريط التمرير (Scrollbar) داخل ويدجت سلة المشتريات المصغرة (Mini Cart)، وتحديداً الجزء المتحرك منه (Dragger Bar). تخصيصه باللون الأزرق #0091D5 لمسة احترافية جداً لأنها تربط حتى أدق تفاصيل التصفح بهوية موقعك.
في المواقع العربية (RTL)، غالباً ما ينتقل شريط التمرير من الجهة اليمنى إلى الجهة اليسرى داخل الحاوية لكي لا يتداخل مع النص العربي الذي يبدأ من اليمين.
🔄 التعديل والتحسين المقترح لملف العربية (RTL)
سنقوم بتعزيز ظهور شريط التمرير وضمان تموضعه الصحيح في التصميم العربي:*/
/* تخصيص لون شريط التمرير */
body.rtl .widget_shopping_cart_content .mCS-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
background-color: #420537 !important;
border-radius: 10px; /* جعل الحواف دائرية وانسيابية */
}
/* ضبط موضع شريط التمرير ليكون على اليسار في العربية */
body.rtl .widget_shopping_cart_content .mCSB_scrollTools {
left: 0;
right: auto;
width: 5px; /* جعل الشريط نحيفاً ليعطي مظهراً عصرياً */
}
/* تغيير لون الشريط عند التمرير عليه ليكون أغمق قليلاً */
body.rtl .widget_shopping_cart_content .mCSB_dragger:hover .mCSB_dragger_bar {
background-color: #2f0227 !important;
}
/*هذا الكود يضيف لمسة من الشفافية (Transparency) على شريط التمرير داخل سلة المشتريات المصغرة، حيث يجعله بلون أزرق شفاف بنسبة 70%.
في النسخة العربية (RTL)، يفضل دائماً زيادة التباين قليلاً عند تفاعل المستخدم مع الشريط، لضمان وضوحه التام فوق أسماء المنتجات العربية التي قد تكون كثيفة الحروف.
🔄 التعديل والتحسين المقترح لملف العربية (RTL)
سنبقي على الشفافية التي اخترتها، لكن سنضيف تأثيراً عند تمرير الفأرة (Hover) ليصبح اللون كاملاً، مما يعطي إيحاءً بالاستجابة والنشاط:
*/
/* اللون الافتراضي مع الشفافية */
body.rtl .widget_shopping_cart_content .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
background-color: rgba(0, 145, 213, 0.7) !important;
width: 6px; /* عرض مناسب للموبايل والسطح المكتب */
border-radius: 4px;
}
/* زيادة الوضوح عند التمرير أو الإمساك بالشريط */
body.rtl .widget_shopping_cart_content .mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar,
body.rtl .widget_shopping_cart_content .mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar {
background-color: rgba(0, 145, 213, 1) !important; /* لون كامل بدون شفافية */
width: 8px; /* تكبير بسيط للشريط لتسهيل الإمساك به */
}
/*
=======
sticky nav
=======
*/
/*هذا الكود هو المسؤول عن جعل القائمة الرئيسية (Navigation Bar) ثابتة في أعلى الشاشة عند النزول للأسفل (Sticky Menu). استخدامه لـ z-index مرتفع جداً يضمن بقاء القائمة فوق جميع عناصر الموقع (مثل الصور أو أزرار ووكومرس).
في النسخة العربية (RTL)، لا يغير هذا الكود الاتجاه لأنه يغطي العرض الكامل (left: 0 و right: 0)؛ ولكننا نحتاج للتأكد من أن العناصر الداخلية للقائمة (الشعار والروابط) لا تزال تحافظ على ترتيبها الصحيح أثناء التثبيت.
🔄 التعديل والتحسين المقترح لملف العربية (RTL)
سنقوم بإضافة لمسات تضمن سلاسة حركة القائمة عند التثبيت وتحسين مظهر الظل ليتناسب مع اتجاه القراءة العربي:*/
body.rtl .sticky-wrapper.is-sticky .main-navigation {
/* 1. الحفاظ على الثبات والعرض الكامل */
position: fixed;
z-index: 999999 !important;
top: 0;
left: 0;
right: 0;
width: 100% !important;
/* 2. إضافة خلفية بيضاء (ضروري عند التثبيت لعدم تداخل النصوص) */
/* background-color: #ffffff;
/* 3. تنعيم الظل السفلي ليناسب الخطوط العربية */
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
/* 4. إضافة تأثير ظهور ناعم (Animation) */
animation: slideDown 0.4s ease-out;
}
/* تأثير الانزلاق للأسفل عند التثبيت */
@keyframes slideDown {
from { transform: translateY(-100%); }
to { transform: translateY(0); }
}
/*🔍 نصائح هامة للقائمة الثابتة في الـ RTL:
الشفافية: تأكد أن القائمة الثابتة لها خلفية (background-color: #fff). إذا كانت شفافة، ستتداخل الروابط مع محتوى الصفحة أثناء التمرير، مما يجعل القراءة باللغة العربية مستحيلة.
حجم الشعار: أحياناً يكون الشعار كبيراً جداً ويأخذ مساحة ضخمة عند التثبيت. يمكنك تصغيره قليلاً في حالة الـ is-sticky لترك مساحة أكبر للمحتوى:
*/
body.rtl .is-sticky .main-navigation img {
max-height: 50px; /* ضبط الارتفاع المناسب */
transition: all 0.3s;
}
/*هذا الكود مكمل للكود السابق، وهو يضمن أن القائمة الثابتة (Sticky Menu) في التنسيق الثالث (headerthree) ستحصل على خلفية بيضاء مصمتة بمجرد أن يبدأ المستخدم بالتمرير للأسفل.
بدون هذا الكود، قد تظهر القائمة شفافة، مما يجعل روابط القائمة تتداخل مع صور ومنشورات الموقع وتصبح القراءة مستحيلة، خاصة مع الخطوط العربية التي تتطلب وضوحاً عالياً.
🔄 التعديل والتحسين المقترح لملف العربية (RTL)
سنضيف لمسة تجعل الانتقال للون الأبيض أكثر سلاسة، مع التأكد من أن الروابط والأيقونات (مثل أيقونة السلة والبحث) تظل واضحة فوق الخلفية البيضاء:
*/
body.rtl .headerthree .sticky-wrapper.is-sticky .main-navigation {
/* 1. ضمان الخلفية البيضاء */
/*background: #ffffff !important;
/* 2. إضافة حدود سفلية خفيفة لتمييز القائمة عن محتوى الصفحة */
border-bottom: 1px solid #f0f0f0;
/* 3. تنعيم حركة ظهور اللون الأبيض */
transition: background 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
}
/* التأكد من أن روابط القائمة باللون الأسود أو الأزرق فوق الخلفية البيضاء */
body.rtl .headerthree .sticky-wrapper.is-sticky .main-navigation ul li a {
color: #333 !important;
}
/* تمييز الرابط النشط أو عند تمرير الفأرة بلون الهوية */
body.rtl .headerthree .sticky-wrapper.is-sticky .main-navigation ul li a:hover {
color: #420537 !important;
}
/*/*
=======
=======
*/
/*هذا الكود ضروري جداً لمواقع "وردبريس"، فهو يعالج تداخل شريط أدوات وردبريس الأسود (Admin Bar) مع القائمة الثابتة للموقع عند تسجيل دخولك كمدير أو كعضو. بدون هذا الكود، سيقوم شريط الأدوات بتغطية الجزء العلوي من قائمتك الثابتة.في النسخة العربية (RTL)، يظل المنطق كما هو، ولكن يجب الحذر من أن شريط الأدوات في الجوال قد يتغير ارتفاعه أو يختفي، مما قد يترك فراغاً غير مرغوب فيه.🔄 التعديل والتحسين المقترح لملف العربية (RTL)سنقوم بتحسين الكود ليكون أكثر ذكاءً، بحيث يضبط نفسه تلقائياً بناءً على حجم الشاشة (لأن شريط الأدوات يكون بارتفاع $32px$ على الكمبيوتر و $46px$ على الشاشات الأصغر):*/
/* عند تسجيل الدخول: إزاحة القائمة الثابتة للأسفل لترك مساحة لشريط وردبريس */
body.rtl.logged-in .stickwrap.stick {
top: 32px;
}
/* ضبط الإزاحة لشاشات الجوال والأجهزة اللوحية */
@media screen and (max-width: 782px) {
body.rtl.logged-in .stickwrap.stick {
top: 46px; /* شريط أدوات وردبريس يصبح أعرض في الجوال */
}
}
/* إخفاء الإزاحة إذا قام المستخدم بإخفاء شريط الأدوات من بروفايله */
body.rtl.admin-bar .stickwrap.stick {
transition: top 0.3s ease;
}
/*
=======
css for down down
=======
*/
/*#############################################################################################################
* نهاية تعديل ملف Style.css
* ############################################################################################################*/