/* ══════════════════════════════════════════════════════════════════════ شريط آخر الأخبار — هجر يُحمّل بعد بقية أوراق الأنماط ليتمكّن من إزاحة الهيدر الثابت للأسفل. لا شيء هنا يعمل إلا عندما يضع الخادم الصنف has-fast-news على ، وهو ما يحدث فقط عندما ترجع الداشبورد أخبارًا فعلية. ══════════════════════════════════════════════════════════════════════ */ :root { --fast-news-height: 44px; --fast-news-bg: linear-gradient(100deg, #0e0c8b 0%, #043b59 100%); --fast-news-fg: #eaf0ff; --fast-news-accent: #FFAB5B; --fast-news-accent-fg: #3d2000; --fast-news-edge: rgba(255,171,91,0.45); --fast-news-bullet: #FFAB5B; } @media (max-width: 767.98px) { :root { --fast-news-height: 40px; } } /* الهيدر ثابت (position: fixed; top: 0) في هذا المشروع، فيُزاح بمقدار ارتفاع الشريط. الـ !important ضروري لأن ملفات الثيم تعيد تعريف الهيدر بعد style.css، وهذا الملف هو آخر ما يُحمّل. */ body.has-fast-news header { top: var(--fast-news-height) !important; } .fast-news { position: fixed; top: 0; left: 0; right: 0; height: var(--fast-news-height); /* أقل من z-index الهيدر عمدًا: الشريط لا يتقاطع معه هندسيًا، وبهذا تستطيع القوائم المنسدلة وقائمة الجوال أن تغطّيه عند فتحها. */ z-index: 990; background: var(--fast-news-bg); color: var(--fast-news-fg); border-bottom: 1px solid var(--fast-news-edge); box-shadow: 0 2px 18px rgba(0, 0, 0, 0.18); overflow: hidden; font-family: inherit; -webkit-font-smoothing: antialiased; } .fast-news__inner { display: flex; align-items: center; gap: clamp(8px, 1.2vw, 16px); height: 100%; max-width: 1440px; margin: 0 auto; padding-inline: clamp(10px, 2vw, 22px); } /* ── وسم "آخر الأخبار" ── */ .fast-news__label { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; padding: 5px clamp(9px, 1.2vw, 14px); border-radius: 999px; background: var(--fast-news-accent); color: var(--fast-news-accent-fg); font-size: clamp(10.5px, 1.35vw, 12.5px); font-weight: 800; line-height: 1; white-space: nowrap; } .fast-news__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: 0 0 auto; animation: fast-news-pulse 1.8s ease-in-out infinite; } @keyframes fast-news-pulse { 0%, 100% { transform: scale(0.8); opacity: 0.5; } 50% { transform: scale(1.15); opacity: 1; } } /* ── مسار الأخبار ── */ .fast-news__viewport { position: relative; flex: 1 1 auto; min-width: 0; height: 100%; overflow: hidden; /* تلاشٍ عند الطرفين حتى لا يُبتر النص بحافة حادّة */ -webkit-mask-image: linear-gradient(to right, transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%); } .fast-news__track { display: flex; align-items: center; height: 100%; width: max-content; /* ترتيب المجموعتين ثابت مهما كان اتجاه الصفحة؛ اتجاه كل خبر يتكفّل به dir="auto" على العنصر نفسه. */ direction: ltr; will-change: transform; animation: fast-news-marquee var(--fast-news-duration, 40s) linear infinite; } /* العربية تُقرأ من اليمين، فيتحرّك الشريط ناحية اليمين لتدخل الأخبار من الحافة اليسرى بالترتيب الصحيح. */ [dir="rtl"] .fast-news__track { animation-name: fast-news-marquee-rtl; } @keyframes fast-news-marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } @keyframes fast-news-marquee-rtl { from { transform: translate3d(-50%, 0, 0); } to { transform: translate3d(0, 0, 0); } } .fast-news:hover .fast-news__track, .fast-news:focus-within .fast-news__track { animation-play-state: paused; } .fast-news__group { display: flex; align-items: center; flex: 0 0 auto; } .fast-news__item { display: inline-flex; align-items: center; gap: clamp(14px, 2vw, 26px); padding-inline-end: clamp(14px, 2vw, 26px); font-size: clamp(12px, 1.6vw, 14.5px); font-weight: 600; line-height: 1; white-space: nowrap; unicode-bidi: isolate; } /* نقطة فاصلة تتبع كل خبر — تعمل أيضًا عند الحدّ بين النسختين */ .fast-news__item::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--fast-news-bullet); opacity: 0.75; flex: 0 0 auto; } /* ── زر الإخفاء ── */ .fast-news__close { flex: 0 0 auto; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.12); color: inherit; font-size: 17px; line-height: 1; cursor: pointer; transition: background 0.2s ease, transform 0.2s ease; } .fast-news__close:hover { background: rgba(255, 255, 255, 0.24); transform: rotate(90deg); } .fast-news__close:focus-visible { outline: 2px solid var(--fast-news-accent); outline-offset: 2px; } /* ── الشاشات الضيقة: تكفي النقطة النابضة بدل النص ── */ @media (max-width: 479.98px) { .fast-news__label-text { display: none; } .fast-news__label { padding-inline: 9px; } } /* ── تفضيل تقليل الحركة: الشريط يصبح قابلًا للتمرير يدويًا ── */ @media (prefers-reduced-motion: reduce) { .fast-news__track { animation: none; transform: none; } .fast-news__viewport { overflow-x: auto; -webkit-mask-image: none; mask-image: none; } .fast-news__group + .fast-news__group { display: none; } } @media print { .fast-news { display: none !important; } body.has-fast-news header { top: 0 !important; } }