كيفية تخصيص محول اللغة باستخدام CSS (5 قوالب جاهزة للاستخدام)

/* تنسيق زر التبديل الرئيسي */
.ml-switcher-container {
    لون الخلفية: #ffffff !مهم؛ 
    نصف قطر الحدود: 50px !مهم؛ 
    الحشوة: 8 بكسل 16 بكسل !مهم؛
    ظل الصندوق: 0 4 بكسل 12 بكسل RGB (0, 0, 0, 0.04) !مهم; 
    الإطار: 1px صلبة #e2e8f0 !مهم؛ 
    الانتقال: جميع 0.2 سهلة !important;
}

.ml-switcher-container:hover {
    ظلال الصندوق: 0 6 بكسل 16 بكسل RGB (0, 0, 0, 0.08) !مهم; 
    لون الحافة: #cbd5e1 !مهم؛
}

/* تنسيق القائمة المنسدلة */
.ml-switcher-disdrop {
    الخلفية: #ffffff !مهم؛
    الإطار: 1px صلبة #e2e8f0 !مهم؛ 
    نصف قطر الحدود: 12 بكسل !مهم؛ 
    الحشوة: 6 بكسل !مهمة؛ 
    ظلال الصندوق: 0 10 بكسل 25 بكسل RGB (0,0,0,0.08) !مهم;
}

/* تنسيق عناصر اللغة الفردية */
.ml-switcher-dropdown-item {
    نصف قطر الحدود: 8 بكسل !مهم؛ 
    اللون: #475569 !مهم; 
    font-family: 'Inter', sans-serif !important;
    انتقال: خلفية 0.2، لون 0.2 ثانية !مهم؛
}

.ml-switcher-dropdown-item:hover {
    الخلفية: #f8fafc !مهم؛ 
    اللون: #0f172a !مهم؛
}

/* إزالة جميع الحاويات الخلفية */
.ml-switcher-container {
    الخلفية: شفافة !مهمة؛ 
    الحدود: لا يوجد !مهم؛ 
    ظل الصندوق: لا يوجد !مهم؛
}

/* تنسيق أزرار النص */
.ml-switcher-btn {
    الخلفية: شفافة !مهمة؛ 
    اللون: #a1a1aa !مهم؛ /* رمادي باهتم */
    font-family: 'Playfair Display'، serif !important; 
    وزن الخط: 400 !مهم؛ 
    حجم الخط: 18px !important;
    الموقع: نسبي !مهم؛ 
    الانتقال: اللون 0.3s سهل !مهم؛
}

/* الخط المتحرك */
.ml-switcher-btn::after {
    المحتوى: ''; 
    الموقع: المطلق؛ 
    العرض: 0; 
    الارتفاع: 1 بكسل؛ 
    الأسفل: -2px; 
    اليسار: 0;
    لون الخلفية: #000000 !important; 
    الانتقال: العرض 0.3 ثانية ease-in-out-important;
}

.ml-switcher-btn:hover {
    اللون: #000000 !مهم;
}

.ml-switcher-btn:hover::after {
    العرض: 100٪ !مهم؛
}

/* تنسيق غلاف الحاوية الرئيسي */
.ml-switcher-container {
    لون الخلفية: #ffffff !مهم؛ 
    الإطار: 1px صلبة #e2e8f0 !مهم؛ 
    نصف قطر الحدود: 50px !مهم؛
    الحشوة: 4 بكسل، !مهم؛ 
    ظلال الصندوق: 0 4 بكسل 12 بكسل RGB (0,0,0,0.04) !مهم;
}

/* تنسيق أزرار الحبوب الفردية */
.ml-switcher-btn {
    اللون: #64748b !مهم؛ 
    font-family: 'Inter', sans-serif !important;
    حجم الخط: 13px !important; 
    وزن الخط: 500 !important; 
    الحشوة: 6 بكسل 16 بكسل !مهمة; 
    نصف قطر الحدود: 50px !مهم؛
    الانتقال: جميع 0.2 !مهمة؛
}

.ml-switcher-btn:hover {
    الخلفية: #f8fafc !مهم؛ 
    اللون: #0f172a !مهم؛
}

/* حالة اللغة النشطة */
.ml-switcher-btn.active {
    لون الخلفية: rgba(59, 130, 246, 0.1) !مهم; 
    اللون: #3b82f6 !مهم؛ 
    وزن الخط: 600 !مهم;
}

/* تنسيق زر التبديل الرئيسي */
.ml-switcher-container {
    الخلفية: #111827 !مهم؛ 
    الإطار: 1px solid #1f2937 !important; 
    نصف قطر الحدود: 6 بكسل !مهم؛ 
    الحشوة: 8 بكسل 16 بكسل !مهم؛
    اللون: #9ca3af !مهم؛ 
    font-family: 'Space Mono', monospace !important; 
    الانتقال: جميع 0.3s سهلة !important;
}

.ml-switcher-container:hover {
    لون الحافة: #3b82f6 !مهم؛ 
    اللون: #f3f4f6 !مهم؛
}

/* تنسيق القائمة المنسدلة */
.ml-switcher-disdrop {
    الخلفية: #111827 !مهم؛
    الإطار: 1px solid #1f2937 !important; 
    نصف قطر الحدود: 6 بكسل !مهم؛ 
    الحشوة: 6 بكسل !مهمة؛ 
    ظل الصندوق: 0 10 بكسل 30 بكسل rgba (0,0,0,0.5) !مهم;
}

/* تنسيق عناصر اللغة الفردية */
.ml-switcher-dropdown-item {
    نصف قطر الحدود: 4 بكسل !مهم؛ 
    اللون: #6b7280 !مهم؛ 
    font-family: 'Space Mono', monospace !important;
    حجم الخط: 12 بكسل !مهم؛ 
    الانتقال: جميع 0.2 !مهمة؛
}

.ml-switcher-dropdown-item:hover {
    الخلفية: RGBA (59، 130، 246، 0.1) !مهم؛ 
    اللون: #e5e7eb !مهم؛
}

/* 1. قم بتنسيق زر الزناد الرئيسي */
.ml-switcher-container {
    الخلفية: #ffffff !مهم؛ 
    الإطار: 1px solid #d1d5db !important; 
    الحشوة: 10 بكسل 20 بكسل !مهم; 
    نصف قطر الحدود: 8 بكسل !مهم؛
    font-family: 'Inter', sans-serif !important; 
    وزن الخط: 500 !important;
    اللون: #374151 !مهم; 
    ظلال الصندوق: 0 1px 2px rgba (0,0,0,0.05) !مهم;
}

.ml-switcher-container:hover {
    الخلفية: #f9fafb !مهم؛
}

/* 2. الاختراق: حول القائمة المنسدلة إلى طبقة ملء الشاشة */
.ml-switcher-disdrop {
    الموقع: ثابت! مهم؛ 
    الأعلى: 0 !مهم؛ 
    اليسار: 0 !مهم؛ 
    العرض: 100 فولت واط !مهم; 
    الارتفاع: 100 في ساعة !مهم؛ 
    الخلفية: RGBA(0, 0, 0, 0.6) !مهم; 
    فلتر الخلفية: blur(8px) !مهم; 
    -webkit-backdrop-filter: blur(8px) !important;
    
/* مركز العناصر في منتصف الشاشة */
    عرض: flex !important; 
    اتجاه مرن: عمود !مهم; 
    محاذاة العناصر: مركز !مهم; 
    تبرير المحتوى: مركز !مهم؛
    
/* إزالة التصميم المنسدلي الافتراضي */
    الحدود: لا يوجد !مهم؛
    نصف قطر الحدود: 0 !مهم؛
    ظل الصندوق: لا يوجد !مهم؛
    مؤشر Z: 9999 !important;
}

/* 3. قم بتصميم عناصر اللغة الفردية كبطاقات مودالية كبيرة */
.ml-switcher-dropdown-item {
    الخلفية: #ffffff !مهم؛ 
    الإطار: 1 بكسل شفاف صلب !مهم؛ 
    نصف قطر الحدود: 12 بكسل !مهم؛ 
    الحشوة: 16 بكسل 24 بكسل !مهمة; 
    الهامش: 6 بكسل 0 !مهم;
    العرض: 90٪ !مهم؛ 
    أقصى عرض: 400px !مهم؛ 
    محاذاة نصية: center !important; 
    font-family: 'Inter', sans-serif !important; 
    حجم الخط: 16 بكسل !مهم؛ 
    وزن الخط: 500 !important;
    اللون: #111827 !مهم; 
    ظلال الصندوق: 0 10 بكسل 25 بكسل rgba (0,0,0,0.1) !مهم;
    الانتقال: جميع 0.2 سهلة !important;
}

/* حالة التحويم لبطاقات المودال */
.ml-switcher-dropdown-item:hover {
    لون الحافة: #3b82f6 !مهم؛ 
    اللون: #2563eb !مهم؛ 
    transform: translateY(-2px) !مهم;
    ظل الصندوق: 0 15 بكسل 30 بكسل RGB (59، 130، 246، 0.15) !مهم؛
}