/** * دليل تخصيص الأزرار - Button Customization Guide * @package Lahzat_News * @version 2.1 */ /* ============================================== 🎨 دليل تخصيص ألوان أزرار الهيدر ============================================== يمكنك تخصيص ألوان الأزرار بسهولة عن طريق تغيير هذه المتغيرات: */ /* 🔹 الألوان الأساسية للأزرار */ :root { /* خلفية الزر العادية */ --button-bg: rgba(0, 168, 89, 0.1); /* خلفية الزر عند التمرير */ --button-bg-hover: #00A859; /* لون الحدود العادي */ --button-border: rgba(0, 168, 89, 0.2); /* لون الحدود عند التمرير */ --button-border-hover: #00A859; /* لون النص/الأيقونة العادي */ --button-text: #00A859; /* لون النص/الأيقونة عند التمرير */ --button-text-hover: #ffffff; /* حجم الأزرار */ --button-size: 45px; /* انحناء الأطراف */ --button-radius: 12px; /* الظلال العادية */ --button-shadow: 0 2px 8px rgba(0, 168, 89, 0.15); /* الظلال عند التمرير */ --button-shadow-hover: 0 4px 20px rgba(0, 168, 89, 0.3); } /* ============================================== 🎨 أمثلة على تخصيصات مختلفة ============================================== */ /* 🟦 نمط أزرق */ .blue-theme { --button-bg: rgba(52, 152, 219, 0.1); --button-bg-hover: #3498db; --button-border: rgba(52, 152, 219, 0.2); --button-border-hover: #3498db; --button-text: #3498db; --button-text-hover: #ffffff; --button-shadow: 0 2px 8px rgba(52, 152, 219, 0.15); --button-shadow-hover: 0 4px 20px rgba(52, 152, 219, 0.3); } /* 🟪 نمط بنفسجي */ .purple-theme { --button-bg: rgba(155, 89, 182, 0.1); --button-bg-hover: #9b59b6; --button-border: rgba(155, 89, 182, 0.2); --button-border-hover: #9b59b6; --button-text: #9b59b6; --button-text-hover: #ffffff; --button-shadow: 0 2px 8px rgba(155, 89, 182, 0.15); --button-shadow-hover: 0 4px 20px rgba(155, 89, 182, 0.3); } /* 🟠 نمط برتقالي */ .orange-theme { --button-bg: rgba(230, 126, 34, 0.1); --button-bg-hover: #e67e22; --button-border: rgba(230, 126, 34, 0.2); --button-border-hover: #e67e22; --button-text: #e67e22; --button-text-hover: #ffffff; --button-shadow: 0 2px 8px rgba(230, 126, 34, 0.15); --button-shadow-hover: 0 4px 20px rgba(230, 126, 34, 0.3); } /* ⚫ نمط أسود أنيق */ .dark-elegant-theme { --button-bg: rgba(52, 58, 64, 0.1); --button-bg-hover: #343a40; --button-border: rgba(52, 58, 64, 0.2); --button-border-hover: #343a40; --button-text: #343a40; --button-text-hover: #ffffff; --button-shadow: 0 2px 8px rgba(52, 58, 64, 0.15); --button-shadow-hover: 0 4px 20px rgba(52, 58, 64, 0.3); } /* 🔴 نمط أحمر */ .red-theme { --button-bg: rgba(231, 76, 60, 0.1); --button-bg-hover: #e74c3c; --button-border: rgba(231, 76, 60, 0.2); --button-border-hover: #e74c3c; --button-text: #e74c3c; --button-text-hover: #ffffff; --button-shadow: 0 2px 8px rgba(231, 76, 60, 0.15); --button-shadow-hover: 0 4px 20px rgba(231, 76, 60, 0.3); } /* ============================================== 📱 تخصيصات خاصة بالموبايل ============================================== */ @media (max-width: 768px) { :root { /* أزرار أصغر للموبايل */ --button-size: 42px; --button-radius: 10px; } } /* ============================================== 🌙 تخصيصات الوضع المظلم ============================================== */ body.dark-mode { /* يمكنك تغيير ألوان الوضع المظلم هنا */ --button-bg: rgba(0, 196, 110, 0.1); --button-bg-hover: #00c46e; --button-border: rgba(0, 196, 110, 0.3); --button-border-hover: #00c46e; --button-text: #00c46e; --button-text-hover: #0a0a0a; --button-shadow: 0 2px 8px rgba(0, 196, 110, 0.2); --button-shadow-hover: 0 4px 20px rgba(0, 196, 110, 0.4); } /* ============================================== 📝 كيفية الاستخدام ============================================== 1. لتطبيق نمط معين، أضف الكلاس المطلوب للعنصر : 2. لتخصيص ألوانك الخاصة، غير قيم المتغيرات في :root 3. يمكنك إنشاء ألوان مخصصة عن طريق نسخ أحد الأنماط وتعديله 4. تأكد من اختبار الألوان في الوضعين: العادي والمظلم ============================================== */