/* تنسيق شريط الترويسة العلوي */ .main-header { width: 100%; padding: 10px 0; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); position: sticky; top: 0; z-index: 1000; transition: background-color 0.3s ease; } /* حاوية الترويسة لضبط المحتوى في المنتصف */ .header-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; display: flex; align-items: center; } /* التحكم بأبعاد الشعار الكامل ليتناسب مع الهيدر */ .site-logo { height: 60px; /* الارتفاع القياسي المناسب للترويسة */ width: auto; /* جعل العرض يتناسق تلقائياً مع الارتفاع دون تمطيط */ display: block; max-width: 100%; /* حماية الشعار من الخروج عن حدود شاشات الهواتف الصغبرة */ } /* ========================================== ☀️ إعدادات المظهر النهاري (Light Mode) ========================================== */ @media (prefers-color-scheme: light) { .main-header { background-color: #ffffff; border-bottom: 1px solid #e0e0e0; } .light-logo { display: block; } /* إظهار الصورة النهارية */ .dark-logo { display: none; } /* إخفاء الصورة الليلية */ } /* ========================================== 🌃 إعدادات المظهر الليلي (Dark Mode) ========================================== */ @media (prefers-color-scheme: dark) { .main-header { background-color: #131926; border-bottom: 1px solid #1f2a40; } .light-logo { display: none; } /* إخفاء الصورة النهارية */ .dark-logo { display: block; } /* إظهار الصورة الليلية */ }

أخبار أنمي

الصفحة السابقة الصفحة التالية
زر الذهاب إلى الأعلى