/* ══════════════════════════════════════════════════════════════════════ شريط آخر الأخبار — بألوان الهوية (tokens.css) يُحمّل بعد بقية أوراق الأنماط ليتمكّن من إزاحة الهيدر الثابت للأسفل. لا شيء هنا يعمل إلا عندما يضع الخادم الصنف has-fast-news على ، وهو ما يحدث فقط عندما ترجع الداشبورد أخبارًا فعلية. ══════════════════════════════════════════════════════════════════════ */ :root { --fast-news-height: 44px; --fast-news-bg: var(--c-navy, #252379); --fast-news-fg: var(--c-white, #fff); --fast-news-accent: var(--c-accent, #00B7E2); --fast-news-accent-fg: var(--c-navy, #252379); } @media (max-width: 767.98px) { :root { --fast-news-height: 40px; } } /* الهيدر ثابت (position: fixed; top: 0)، فيُزاح بمقدار ارتفاع الشريط */ 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); overflow: hidden; font-family: var(--font-sans, inherit); -webkit-font-smoothing: antialiased; } /* بنفس عرض محتوى الهيدر حتى تتحاذى الحواف */ .fast-news__inner { display: flex; align-items: center; gap: var(--space-4, 16px); height: 100%; max-width: calc(var(--container, 1240px) + var(--gutter, 16px) * 2); margin: 0 auto; padding-inline: var(--gutter, 16px); } /* ── وسم "آخر الأخبار" — لمسة الأزرق الفاتح ── */ .fast-news__label { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; padding: 6px 12px; border-radius: var(--radius-pill, 999px); background: var(--fast-news-accent); color: var(--fast-news-accent-fg); font-family: var(--font-sans, inherit); font-size: var(--fs-xs, 13px); font-weight: var(--fw-bold, 700); 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; /* المسار أعرض من الحاوية: في RTL كان يُثبَّت على الحافة اليمنى ويفيض يسارًا فتخرج الأخبار من مجال الرؤية. تثبيته LTR يجعل الإزاحة صحيحة، واتجاه كل خبر يبقى من dir="auto" على العنصر نفسه. */ direction: ltr; /* تلاشٍ عند الطرفين حتى لا يُبتر النص بحافة حادّة */ -webkit-mask-image: linear-gradient(to right, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%); } .fast-news__track { display: flex; align-items: center; height: 100%; width: max-content; 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: 28px; padding-inline-end: 28px; font-family: var(--font-sans, inherit); font-size: var(--fs-sm, 15px); font-weight: var(--fw-medium, 500); line-height: 1; white-space: nowrap; unicode-bidi: isolate; } /* فاصل صغير بالأزرق الفاتح بين الأخبار */ .fast-news__item::after { content: ""; width: 6px; height: 6px; border-radius: 2px; background: var(--fast-news-accent); transform: rotate(45deg); flex: 0 0 auto; } /* ── زر الإخفاء ── */ .fast-news__close { flex: 0 0 auto; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 50%; background: transparent; color: var(--fast-news-fg); font-size: 17px; line-height: 1; cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease; } .fast-news__close:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.5); } .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: 7px; } .fast-news__item { font-size: var(--fs-xs, 13px); } } /* ── تفضيل تقليل الحركة: الشريط يصبح قابلًا للتمرير يدويًا ── */ @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; } }