/* ========================================================================== لوحة المباريات — تصميم قائمة المباريات الجانبية ========================================================================== يُحمَّل بعد team-matches.css ويعيد بناء صف المباراة ورأس البطولة واللوحة. قاعدتان تحكمان هذا الملف: 1) كل الألوان والمقاسات تأتي من متغيرات معرّفة على #match_list_conf. الوضع الفاتح يعيد تعريف المتغيرات فقط، ولا يكرّر أي قاعدة تخطيط. 2) الصف شبكة ثابتة الأعمدة: [الفريق] [المركز] [الفريق]، والمركز بعرض وارتفاع ثابتين مهما كانت حالة المباراة. أي عنصر إضافي (ركلات ترجيح، أيقونة بث، وقت إضافي، شارة حالة) يوضع في خلية خاصة به أو خارج مجرى الشبكة، فلا يحرّك ما حوله. هذا ما يجعل كل الصفوف تتراصف عمودياً بدقة ويجعل إضافة حالة جديدة لاحقاً لا تُخلّ بالتصميم. المعرفات وأسماء الأصناف المشتقة من JS (percent، number، data-minutes، extratime، stopped، stopped_ex، live-match…) مستعملة كما هي؛ انظر public/app-js/today_matches.js و public/js/script.js. ========================================================================== */ /* المتغيرات معرّفة على html لأن عمود المحتوى الملاصق يستعملها أيضاً، وهو ليس داخل #match_list_conf. وستة منها ليست هنا: ‎--mb-center-bg‎ و‎--mb-text‎ و‎--mb-text-muted‎ و ‎--mb-text-dim‎ و‎--mb-accent‎ و‎--mb-live‎ معرَّفة في ‎team-matches.css‎. سببه أنّ أيقونات الصف السريعة صارت واحدة في كل صفحات الموقع. هذا الملف يُحمَّل في كل الصفحات من ‎layout/header.blade.php‎ بعد team-matches.css. وترتيب التحميل يضمن وجودها: ‎team-matches.css‎ قبل هذا الملف. */ html { /* أسطح */ --mb-panel-bg: #151825; --mb-panel-border: #1e2235; --mb-row-bg: #191d2d; --mb-row-bg-hover: #1d2233; --mb-row-line: rgba(255, 255, 255, 0.05); --mb-champ-header-line: rgba(255, 255, 255, 0.09); --mb-center-line: #252a3d; /* نصوص */ --mb-text-strong: #ffffff; /* دلالات */ --mb-pause: #ffc420; --mb-track: rgba(255, 255, 255, 0.1); --mb-loser: rgba(255, 255, 255, 0.38); /* نسخة «حِبر» من الألوان الدلالية. اللون الذي يقرأ جيداً كقوس سميك على خلفية لا يقرأ بالضرورة كرقم بحجم 11px، والعكس صحيح: تغميق اللون لأجل الرقم يُطفئ القوس. لذلك يأخذ كلٌّ منهما متغيره. في الوضع الداكن النصوص فاتحة على سطح غامق فتكفي الألوان نفسها. */ --mb-accent-ink: var(--mb-accent); --mb-live-ink: var(--mb-live); --mb-pause-ink: var(--mb-pause); --mb-postponed-ink: #a89562; /* فلتر المباريات */ --mb-filter-chip-bg: var(--mb-center-bg); --mb-filter-chip-border: var(--mb-center-line); --mb-filter-chip-active-bg: rgba(57, 219, 191, 0.12); --mb-filter-chip-active-border: rgba(57, 219, 191, 0.32); --mb-filter-btn-bg: rgba(57, 219, 191, 0.1); --mb-filter-btn-border: rgba(57, 219, 191, 0.32); --mb-filter-btn-bg-hover: rgba(57, 219, 191, 0.18); /* مقاسات */ --mb-row-h: 68px; --mb-center-w: 76px; --mb-ring: 42px; --mb-ring-w: 2.5px; --mb-logo: 26px; --mb-radius: 8px; --mb-radius-2xs: 4px; --mb-radius-xs: 5px; --mb-radius-sm: 6px; --mb-radius-md: 7px; --mb-panel-radius: 10px; --mb-panel-radius-sm: 8px; --mb-gutter: 12px; /* فسحة إضافية بين شعار الفريق وصندوق الوقت/النتيجة */ --mb-center-logo-gap: 4px; --mb-name: 12.5px; --mb-score: 15px; --mb-score-w: 18px; /* رقم الوقت داخل الدائرة. صغير وشبه عادي الوزن قصداً: هو رقم يتبدّل كل ثانية، والرقم الثقيل العريض يسحب العين إليه في كل نبضة فيُتعب القائمة. الدائرة حوله تقول «تُلعب الآن»، والرقم يذكر الدقيقة فحسب. */ --mb-clock: 12px; --mb-status: 8.5px; /* فسحة تسمية الحالة عن حافة الدائرة (أعلاها وأسفلها معاً). قيمة واحدة تحكم ‎top‎ و‎bottom‎ للتسميتين و‎.extra-time‎، فلا تنزلق واحدة عن أخرى إذا عُدِّلت لاحقاً — وكانت الثلاثة أرقاماً مكرّرة قبل ذلك. */ --mb-status-gap: 11px; /* طبقة المباراة الجارية. صفّها أطول ودائرتها ونتيجتها واسم فريقها أكبر درجة، فتتقدّم بصرياً على المجدولة والمنتهية. قيد يجب أن يصمد في كل نقطة توقّف: تسمية الحالة مطلقة على ‎bottom: calc(--mb-status-gap * -1)‎ من الدائرة، فحدّها الأسفل يقع بمقدار الفسحة تحتها. والدائرة متوسّطة في صندوق المحتوى (الصف ناقص 8px حشواً أعلى وأسفل)، فالمتاح تحتها ‎(row_h − 16 − ring) / 2 + 8‎. أي أن ‎row_h ≥ ring + 2 × gap‎ وإلا سقطت التسمية خارج الصف على الصف التالي. ولأن الدائرة لا تُرسم إلا داخل صفوف ‎.active-match‎ — وهي وحدها التي تحمل مقاسات هذه الطبقة — فالفسحة تُرفع إلى 13px هناك وحدها (انظر قاعدة ‎.mb-row.active-match‎). القيمة الأساسية 11px تبقى محسوبةً على مقاسات الطبقة الساكنة حتى يصمد القيد في الطبقتين معاً بفسحة أمان، بدل رقم واحد يحدّه أضيقُ الطبقتين وهي التي لا دائرة فيها أصلاً. */ --mb-row-h-live: 98px; --mb-ring-live: 56px; --mb-name-live: 11.5px; --mb-score-live: 20px; --mb-score-w-live: 24px; --mb-logo-live: 34px; /* عرض كتلة الشعار+الاسم في الصف الجاري — ثابت لتراصف الأعمدة */ --mb-team-block-w: 80px; /* سطح الصف الجاري = سطح بقية الصفوف. بلا صبغة على الإطلاق. جُرِّبت الصبغة مرّتين وسقطت مرّتين: أزرق (‎#f2f6ff‎ / ‎#1e2438‎) بدا دخيلاً على لوحة محايدة، ثم أخضر منخفض التشبّع (‎#ecf8f6‎ / ‎#1d2d2c‎) بدا باهتاً بلا معنى في الفاتح وموحلاً في الداكن. والعلّة في النمط لا في درجة اللون: صبغةٌ ممدودة على مساحة صفٍّ عريض إمّا أن تخفت حتى لا تُقرأ أو تعلو حتى تُقحم لوناً لا تقوله بقية الصفحة — والسطح الداكن أقسى، فكل أخضر خافت عليه يميل إلى الطين. فالتمييز انتقل كلّه إلى ما يحمل معنى أصلاً: الصف الجاري أطول ودائرته أوسع واسمه ونتيجته أكبر، ودائرة المؤقّت تتحرّك، وعلامة خضراء رقيقة على حافته الابتدائية (انظر ‎.mb-row.active-match::before‎) من عائلة عمود ترويسة البطولة نفسها. المتغيّران يبقيان كاسمين مستعارين لا كقيمتين مستقلّتين: أي قاعدة تشير إلى سطح الصف الجاري تبقى صحيحة، ويستحيل أن ينفصل السطحان. */ --mb-row-bg-live: var(--mb-row-bg); --mb-row-bg-live-hover: var(--mb-row-bg-hover); } html.light { --mb-panel-bg: #ffffff; --mb-panel-border: #e6eaf3; --mb-row-bg: #ffffff; --mb-row-bg-hover: #f5f7fc; /* لا ‎--mb-row-bg-live‎ هنا قصداً: تعريفه على ‎html‎ اسمٌ مستعار لـ‎--mb-row-bg‎، وهذه القاعدة تُعيد تعريف الأخير على العنصر نفسه، فيتبعه المستعار تلقائياً ويستحيل أن يتخلّف وضعٌ عن الآخر. */ --mb-row-line: #eef1f8; --mb-champ-header-line: #e0e5ef; --mb-champ-header-bg: #e2e7f0; --mb-center-line: #e4e8f2; --mb-text-strong: #131521; /* نظائر الوضع الفاتح للمتغيرات الستة المشتركة في ‎team-matches.css‎ */ --mb-pause: #e0a500; --mb-track: rgba(19, 21, 33, 0.1); --mb-loser: rgba(19, 21, 33, 0.42); /* على سطح فاتح تحتاج النصوص الصغيرة تغميقاً لتبلغ 4.5:1 */ --mb-accent-ink: #0a7f6b; --mb-live-ink: #a81f1f; --mb-pause-ink: #7a5200; --mb-postponed-ink: #7d6d4b; --mb-filter-chip-active-bg: #e8f7f4; --mb-filter-chip-active-border: #b8e8df; --mb-filter-btn-bg: #eefaf7; --mb-filter-btn-border: #c5ebe3; --mb-filter-btn-bg-hover: #dff5f0; } /* -------------------------------------------------------------------------- اللوحة والتمرير -------------------------------------------------------------------------- */ .championships-section #match_list_conf.home-matches-panel { background: transparent; padding: 0; } #match_list_conf.home-matches-panel > .championship-wrap.important-matches { background: var(--mb-panel-bg); border: 1px solid var(--mb-panel-border); border-radius: var(--mb-panel-radius); padding: 6px; box-shadow: none; } /* صفحتا البطولة والنادي — نفس الغلاف الخارجي للوحة الرئيسية. سطح المكتب: الأقسام (‎.matches-wrapper.wide‎) أبناء مباشرون لـ ‎#match_list_conf‎. الجوال: نفس الأقسام داخل ‎.champ-tab-item.matches‎. */ #match_list_conf:not(.home-matches-panel):has(> .matches-wrapper.wide), #match_list_conf:not(.home-matches-panel) .champ-tab-item.matches { --mb-panel-inset: 6px; background: var(--mb-panel-bg); border: 1px solid var(--mb-panel-border); border-radius: var(--mb-panel-radius); padding: var(--mb-panel-inset); box-shadow: none; } #match_list_conf:not(.home-matches-panel):has(> .matches-wrapper.wide) { gap: 0; } #match_list_conf:not(.home-matches-panel) .champ-tab-item.matches { gap: 0; } #match_list_conf:not(.home-matches-panel):has(> .matches-wrapper.wide) > .matches-wrapper.wide + .matches-wrapper.wide, #match_list_conf:not(.home-matches-panel) .champ-tab-item.matches > .matches-wrapper.wide + .matches-wrapper.wide { margin-top: 0; padding-top: 0; border-top: 0; } #match_list_conf.home-matches-panel > .championship-wrap.important-matches > .section-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0; padding: 10px 10px 12px; background: none; border: 0; border-bottom: 1px solid var(--mb-row-line); } #match_list_conf.home-matches-panel > .championship-wrap.important-matches > .section-title h3 { margin: 0; /* min-width: 0 شرط انكماش عنصر flex: بدونه يفرض العنوان عرض نصّه كاملاً فيدفع شريط الأدوات خارج الشاشة في النوافذ الضيقة بدل أن يُقصّ هو. */ min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 800; color: var(--mb-text-strong); line-height: 1.3; } /* -------------------------------------------------------------------------- شريط الأدوات: التاريخ والتقويم والفلتر والبحث كان الشريط يتمدّد على عرض اللوحة كاملاً وأدواته متباعدة إلى أقصاها، لأن ‎team-matches.css‎ يعطي ‎.section-actions‎ تحت 767px الوصفَين ‎flex: 1 1 100%‎ و‎justify-content: space-between‎، ويضيف ‎style.css‎ هامش ‎25px !important‎ على كل ‎.mobile-header-item‎ وفاصلاً رأسياً على ‎.match-filter-wrapper‎. النتيجة أربع أدوات متناثرة بلا رابط بينها. هنا تُجمع في مجموعة واحدة: حبّة التاريخ ثم ثلاثة أزرار متساوية بجانبها. -------------------------------------------------------------------------- */ #match_list_conf.home-matches-panel > .championship-wrap.important-matches > .section-title .section-actions { display: flex; align-items: center; justify-content: flex-end; flex: 0 0 auto; gap: 2px; margin: 0; } /* الهوامش القديمة تحمل ‎!important‎ في style.css و ltr.css معاً، فلا يُبطلها إلا ‎!important‎ بتخصيص أعلى. */ #match_list_conf.home-matches-panel .section-actions .mobile-header-item { margin: 0 !important; padding: 0 !important; border: 0 !important; } #match_list_conf.home-matches-panel .section-actions .match-filter-wrapper, html[dir="ltr"] #match_list_conf.home-matches-panel .section-actions .match-filter-wrapper { margin: 0; padding: 0; border: 0; } #match_list_conf.home-matches-panel .section-actions .matches-date-filter { display: flex; align-items: center; gap: 2px; } /* حبّة التاريخ: السهمان والتاريخ وحدة واحدة لا ثلاثة عناصر متجاورة */ #match_list_conf.home-matches-panel .section-actions .inline-date-filter { display: inline-flex; align-items: center; height: 28px; padding: 0 1px; background: var(--mb-center-bg); border: 1px solid var(--mb-center-line); border-radius: var(--mb-radius-sm); } #match_list_conf.home-matches-panel .section-actions .inline-date-filter .date-next-prev { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin: 0; border-radius: var(--mb-radius-xs); color: var(--mb-text-muted); transition: color 0.15s ease, background-color 0.15s ease; } #match_list_conf.home-matches-panel .section-actions .inline-date-filter .date-next-prev path { fill: currentColor; } #match_list_conf.home-matches-panel .section-actions .inline-date-filter .date-next-prev:hover { color: var(--mb-accent-ink); background: var(--mb-row-bg-hover); } /* لون التاريخ هو لون التطبيق. كان يرث ‎#BFC3D4‎ من style.css وهو رماديّ مائل للأزرق، فيقرأ أزرق باهتاً على اللوحة الكحلية ويقطع مع أخضر الهوية. ‎min-width‎ يحجز عرض أطول تاريخ («26 أغسطس 2026») فلا يقفز السهمان يميناً ويساراً كلما تغيّر طول اسم الشهر أو رقم اليوم. */ #match_list_conf.home-matches-panel .section-actions .inline-date-filter span { min-width: 86px; margin: 0 2px; padding: 0; font-size: 11.5px; font-weight: 700; line-height: 1; text-align: center; color: var(--mb-accent-ink); } #match_list_conf.home-matches-panel .section-actions .inline-date-filter .filtered-date { cursor: pointer; } /* الأزرار الثلاثة: التقويم والفلتر والبحث بمساحة نقر واحدة */ #match_list_conf.home-matches-panel .section-actions .drop-toggle, #match_list_conf.home-matches-panel .section-actions .search { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin: 0 !important; padding: 0; border-radius: var(--mb-radius-sm); color: var(--mb-text-muted); transition: color 0.15s ease, background-color 0.15s ease; } /* ‎width: auto‎ مع ارتفاع ثابت: أيقونة التقويم 18×20 والفلتر 20×18.18، فتحديد البعدين معاً يشوّه نسبتهما. viewBox يتكفّل بالباقي. */ #match_list_conf.home-matches-panel .section-actions .drop-toggle svg, #match_list_conf.home-matches-panel .section-actions .search svg { width: auto; height: 15px; } /* light.css يفرض ‎fill: #0E1019‎ على مسارات هذه الأيقونات، فتتجاهل ‎currentColor‎ في الوضع الفاتح ولا يظهر أثر التمرير ولا حالة التفعيل. */ #match_list_conf.home-matches-panel .section-actions .drop-toggle path, #match_list_conf.home-matches-panel .section-actions .search path, html.light #match_list_conf.home-matches-panel .section-actions .drop-toggle path, html.light #match_list_conf.home-matches-panel .section-actions .search path { fill: currentColor; } #match_list_conf.home-matches-panel .section-actions .drop-toggle:hover, #match_list_conf.home-matches-panel .section-actions .search:hover, #match_list_conf.home-matches-panel .section-actions .drop-toggle.active { color: var(--mb-accent-ink); background: var(--mb-row-bg-hover); } /* زرّ الإغلاق في رأس لوحات الفلتر والتاريخ: الرمادي الهادئ مثل بقية الواجهة؛ الأيقونة تستخدم ‎currentColor‎ و‎light.css‎ يفرض ‎fill‎ ثابتاً فيُعاد هنا. */ #match_list_conf.home-matches-panel .section-actions .drop-header .close-dropdown { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 32px; height: 32px; color: #6C6F83; -webkit-tap-highlight-color: transparent; transition: color 0.3s; } #match_list_conf.home-matches-panel .section-actions .drop-header .close-dropdown path { fill: currentColor; transition: fill 0.3s; } html.light #match_list_conf.home-matches-panel .section-actions .drop-header .close-dropdown path { fill: currentColor; } #match_list_conf.home-matches-panel .section-actions .drop-header .close-dropdown:hover, #match_list_conf.home-matches-panel .section-actions .drop-header .close-dropdown:focus-visible, #match_list_conf.home-matches-panel .section-actions .drop-header .close-dropdown:active { color: #FC4D4D; } /* -------------------------------------------------------------------------- لوحات الفلتر والتاريخ — محتوى داخلي ‎style.css‎ يفرض أزراراً كاملة العرض بخلفية ‎#39DBBF‎ وشرائح اختيار بيضاء/سوداء قوية. هنا تُعاد كتابة المحتوى فقط داخل لوحة الرئيسية لتتماشى مع حبّة التاريخ والصفوف: أسطح هادئة، حدود رفيعة، ولون هوية خفيف عند التفعيل لا كتلة صلبة. -------------------------------------------------------------------------- */ #match_list_conf.home-matches-panel .section-actions .match-filter-dropdown { padding: 14px; background: var(--mb-panel-bg); } #match_list_conf.home-matches-panel .section-actions .match-filter-dropdown .drop-header { margin-bottom: 14px; } #match_list_conf.home-matches-panel .section-actions .match-filter-dropdown .drop-header h6 { font-size: 14px; font-weight: 700; color: var(--mb-text-strong); } #match_list_conf.home-matches-panel .match-filter-wrapper .filter-item-wrap { margin-bottom: 14px; } #match_list_conf.home-matches-panel .match-filter-wrapper .filter-item-wrap:last-of-type { margin-bottom: 0; } #match_list_conf.home-matches-panel .match-filter-wrapper .filter-item-wrap .title { margin-bottom: 8px; font-size: 11px; font-weight: 600; line-height: 1.3; color: var(--mb-text-dim); } #match_list_conf.home-matches-panel .match-filter-wrapper .filter-group { display: flex; flex-wrap: wrap; align-items: stretch; gap: 6px; } #match_list_conf.home-matches-panel .match-filter-wrapper .filter-radio-item { position: relative; flex: 1 1 calc(50% - 3px); min-width: 0; margin: 0; } #match_list_conf.home-matches-panel .match-filter-wrapper .filter-item-wrap:first-child .filter-radio-item { flex: 1 1 calc(50% - 3px); } #match_list_conf.home-matches-panel .match-filter-wrapper .filter-item-wrap:first-child .filter-radio-item:first-child, #match_list_conf.home-matches-panel .match-filter-wrapper .filter-radio-item:first-child { width: auto; flex: 1 1 calc(50% - 3px); } #match_list_conf.home-matches-panel .match-filter-wrapper .filter-radio-item:last-child { margin: 0; } #match_list_conf.home-matches-panel .match-filter-wrapper .filter-radio-item input { position: absolute; z-index: -1; opacity: 0; visibility: hidden; } #match_list_conf.home-matches-panel .match-filter-wrapper .filter-radio-item label { display: flex; align-items: center; justify-content: center; width: 100%; height: 32px; margin: 0; padding: 0 8px; border: 1px solid var(--mb-filter-chip-border); border-radius: var(--mb-radius-sm); background: var(--mb-filter-chip-bg); font-size: 11.5px; font-weight: 600; line-height: 1.2; text-align: center; color: var(--mb-text-muted); cursor: pointer; transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease; } #match_list_conf.home-matches-panel .match-filter-wrapper .filter-radio-item input:checked + label { background: var(--mb-filter-chip-active-bg); border-color: var(--mb-filter-chip-active-border); color: var(--mb-accent-ink); } #match_list_conf.home-matches-panel .section-actions .match-filter-dropdown .filter-button { display: flex; align-items: center; justify-content: center; width: 100%; height: 40px; margin-top: 14px; padding: 0 16px 2px; border: 1px solid var(--mb-filter-btn-border); border-radius: var(--mb-radius-md); background: var(--mb-filter-btn-bg); font-size: 13px; font-weight: 700; line-height: 1; color: var(--mb-accent-ink); transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; } #match_list_conf.home-matches-panel .section-actions .match-filter-dropdown .filter-button:hover, #match_list_conf.home-matches-panel .section-actions .match-filter-dropdown .filter-button:focus-visible { background: var(--mb-filter-btn-bg-hover); border-color: var(--mb-filter-chip-active-border); color: var(--mb-accent-ink); } @media (min-width: 768px) { /* الزرّ قرب حافة العمود الضيق. ‎right: 50% + translateX(50%)‎ في ‎style.css‎ يوسّط اللوحة على الزرّ فيخرج نصفها خارج اللوحة، و‎body‎ يقصّه بـ ‎overflow-x: hidden‎. في العربية الأدوات يسار العنوان، فاللوحة يجب أن تنفتح إلى داخل العمود: ‎left: 0‎ في ‎rtl‎ و‎right: 0‎ في ‎ltr‎. */ #match_list_conf.home-matches-panel .section-actions .drop-item-wrap.match-filter-dropdown { width: min(320px, calc(100vw - 32px)); transform: none; border: 1px solid var(--mb-panel-border); border-radius: var(--mb-panel-radius-sm); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.38); } html[dir="rtl"] #match_list_conf.home-matches-panel .section-actions .drop-item-wrap.match-filter-dropdown { left: 0; right: auto; } html[dir="ltr"] #match_list_conf.home-matches-panel .section-actions .drop-item-wrap.match-filter-dropdown { right: 0; left: auto; } html.light #match_list_conf.home-matches-panel .section-actions .drop-item-wrap.match-filter-dropdown { box-shadow: 0 10px 28px rgba(19, 21, 33, 0.1); } } /* -------------------------------------------------------------------------- القوائم المنسدلة على الشاشة الضيقة ‎style.css‎ يعطي ‎.match-filter-dropdown‎ عرضاً ثابتاً 375px ويوسّطها على زرّها بـ ‎right: 50%‎ مع ‎translateX(50%)‎. الزرّ قرب حافة الشاشة، فنصف اللوحة يقع خارجها. للموقع علاجٌ قائم: ‎$class_mobile‎ يضيف ‎mobile-dropmenu-wrap‎ فيصير ‎position: fixed‎ بعرض الشاشة. لكنه معلّق على كشف الـ User-Agent لا على عرض النافذة، فنافذة سطح مكتب ضيّقة — أو جهاز بترويسة غير معروفة — تسقط خارج الشرط وتأخذ لوحة الـ 375px المقصوصة. وهذا بالضبط ما يظهر في المعاينة. العلاج هنا مبنيّ على عرض النافذة وحده، فيصيب الحالتين معاً: لوحة سفلية مثبّتة بعرض الشاشة، لا يقصّها ‎overflow‎ لأي سلف ولا تخرج عن الشاشة مهما كان موضع الزرّ. والتخصيص أعلى من ‎mobile-dropmenu-wrap‎ فيتوحّد السلوك على الهاتف الحقيقي وفي النافذة الضيّقة. -------------------------------------------------------------------------- */ @media (max-width: 767px) { #match_list_conf.home-matches-panel .section-actions .drop-item-wrap, #match_list_conf.home-matches-panel .champ-settings-wrap { position: fixed; top: auto; bottom: 0; left: 0; right: 0; width: auto; max-width: none; max-height: 85vh; overflow-y: auto; -webkit-overflow-scrolling: touch; margin: 0; padding: 10px 14px calc(16px + env(safe-area-inset-bottom, 0px)); background: var(--mb-panel-bg); border-top: 1px solid var(--mb-panel-border); border-radius: var(--mb-panel-radius) var(--mb-panel-radius) 0 0; box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.45); } #match_list_conf.home-matches-panel .section-actions .drop-item-wrap::before, #match_list_conf.home-matches-panel .champ-settings-wrap::before { content: ""; display: block; width: 36px; height: 4px; margin: 2px auto 12px; border-radius: 2px; background: var(--mb-center-line); } /* الحركة من أسفل لا من أعلى: القاعدة الأصلية تحرّك ‎margin-top‎ من ‎-5px‎ إلى صفر، وهو بلا أثر على عنصر مثبّت بـ ‎bottom‎. و‎translateX(50%)‎ الموروث يجب إبطاله وإلا انزلقت اللوحة نصف عرضها جانباً. */ #match_list_conf.home-matches-panel .section-actions .drop-item-wrap, #match_list_conf.home-matches-panel .champ-settings-wrap { transform: translateY(14px); } #match_list_conf.home-matches-panel .section-actions .drop-item-wrap.active, #match_list_conf.home-matches-panel .champ-settings-wrap.active { transform: none; z-index: 999; } #match_list_conf.home-matches-panel .section-actions .drop-item-wrap .drop-header { margin-bottom: 14px; } #match_list_conf.home-matches-panel .section-actions .drop-item-wrap .drop-header h6, #match_list_conf.home-matches-panel .champ-settings-wrap a { font-size: 15px; } /* التقويم يطلب ‎calc(100% + 30px)‎ بهامش سالب، وهو تعويض عن حشو اللوحة القديمة. داخل لوحة بعرض الشاشة يصير فيضاً أفقياً. */ #match_list_conf.home-matches-panel .section-actions .drop-item-wrap .xdsoft_datetimepicker { width: 100%; max-width: 100%; margin-right: 0; margin-left: 0; } } #match_list_conf.home-matches-panel .mb-matches-body { padding: 6px 4px 4px; } /* -------------------------------------------------------------------------- مجموعة بطولة -------------------------------------------------------------------------- */ #match_list_conf.home-matches-panel .matches-wrapper { background: none; border: 0; border-radius: 0; padding: 0; margin: 0 0 10px; box-shadow: none; } #match_list_conf.home-matches-panel .matches-wrapper:last-child { margin-bottom: 0; } #match_list_conf.home-matches-panel .matches-wrapper > .header { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 40px; margin: 0 0 6px; padding: 0 10px 4px; background: none; border: 0; border-radius: 0; } #match_list_conf.home-matches-panel .matches-wrapper:not(:first-child) { margin-top: 6px; } #match_list_conf.home-matches-panel .matches-wrapper > .header .champ-title { display: inline-flex; align-items: center; gap: 4px; flex: 1 1 0; min-width: 0; max-width: none; font-size: var(--mb-name); font-weight: 400; color: var(--mb-text-muted); text-decoration: none; } /* عمود صغير قبل شعار البطولة. الرأس كان سطراً مسطحاً محشوراً بين بطاقتي مباراة فلا يقرأ كبداية مجموعة؛ عمود بعرض 3px يكفي للإيحاء بأن ما تحته بطولة، دون إطار ملوّن ولا تدرّج ولا ظل. عنصر زائف لا وسم جديد: عند تغيير التاريخ أو الفلتر يستبدل today_matches.js محتوى ‎#match_block_list‎ كله عبر ‎.html(response)‎ بمخرجات matches_list_date.blade.php، فأي وسم يُضاف هنا كان لزاماً أن يعيش داخل الجزئية المشتركة وإلا اختفى العمود بعد أول تفاعل. العنصر الزائف يُسقط هذا الشرط من أصله. ‎[href^="http"]‎ تحصر العمود في رأس بطولة حقيقية: رأس «المفضلة» في matches-list-body.blade.php ولوحة البطولات المخفية (وتوأمها المبني في home_page.js) يستعملان الصنف ‎.champ-title‎ نفسه لكن برابط ‎javascript:void(0)‎، ورؤوس التجميع الزمني تستعمل ‎.matches-top-title‎ فلا يمسّها شيء. والبطولة التي يتعذّر حلّ رابطها تُخرج ‎href=""‎ فتُستثنى كذلك، وهو المقصود: لا نُعلن بطولة لا نعرف وجهتها. عنصر مرن أول داخل ‎.champ-title‎ (وهو inline-flex) لا موضع مطلق: ترتيب عناصر الفليكس يتبع ‎direction‎ وحده، فيقع العمود في جهة البداية — يميناً في العربية ويساراً في ‎html[dir="ltr"]‎ — بلا قاعدة اتجاه ثانية، وبعيداً عن تصريحات ‎right‎ القديمة في style.css التي سبق أن أفرطت في تقييد عناصر مطلقة فانزلقت جانباً. ‎flex: 0 0 3px‎ لا ‎width‎ وحدها: صفر انكماش يمنع العمود من ابتلاع نصيب الاسم من الانكماش، فيبقى قصّ الأسماء الطويلة على ‎b‎ سليماً. */ #match_list_conf.home-matches-panel .matches-wrapper > .header .champ-title[href^="http"]::before { content: ""; flex: 0 0 3px; height: 16px; border-radius: 2px; /* ‎-ink‎ لأن العمود عنصر صغير: أخضر اللوحة الساطع يذوب على السطح الفاتح */ background: var(--mb-accent-ink); } #match_list_conf.home-matches-panel .matches-wrapper > .header .champ-title .img { flex: 0 0 22px; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; margin: 0; background: none; padding: 0; border-radius: 0; } #match_list_conf.home-matches-panel .matches-wrapper > .header .champ-title .img img, #match_list_conf.home-matches-panel .matches-wrapper > .header .champ-title .img svg { max-width: 100%; max-height: 100%; object-fit: contain; } #match_list_conf.home-matches-panel .matches-wrapper > .header .champ-title b { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--mb-name); font-weight: 700; line-height: 1.35; color: var(--mb-text); transition: color 0.15s ease; } #match_list_conf.home-matches-panel .matches-wrapper > .header .champ-title:hover b { color: var(--mb-text-strong); } #match_list_conf.home-matches-panel .matches-wrapper > .header .matches-top-title { margin: 0; padding: 0; font-size: 12.5px; font-weight: 800; color: var(--mb-text-muted); text-align: start; background: none; border: 0; } #match_list_conf.home-matches-panel .matches-wrapper > .header .champ-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; } #match_list_conf.home-matches-panel .matches-wrapper > .header .champ-links { display: flex; align-items: center; gap: 10px; } #match_list_conf.home-matches-panel .matches-wrapper > .header .champ-links a { font-size: 11px; font-weight: 600; color: var(--mb-text-dim); text-decoration: none; white-space: nowrap; transition: color 0.15s ease; } #match_list_conf.home-matches-panel .matches-wrapper > .header .champ-links a:hover { color: var(--mb-accent); } /* في الوضع الفاتح نزيد الهامش بين مجموعات البطولات فقط — بدون خطّ فاصل؛ العمود الأخضر قبل الشعار يكفي لتمييز بداية بطولة جديدة. */ html.light #match_list_conf.home-matches-panel .matches-wrapper:not(:first-child) { margin-top: 10px; } html.light #match_list_conf.home-matches-panel .matches-wrapper > .header { margin-bottom: 8px; padding: 6px 10px; border-radius: var(--mb-radius-md); background: var(--mb-champ-header-bg); } /* team-matches.css يسقُف ‎.champ-title‎ عند ‎42%‎ في ‎ltr‎ دون ‎1200px‎، وهو المدى الذي تبقى فيه روابط البطولة ظاهرة فتزاحم الاسم. العمود يستهلك من هذا السقف عرضه (3px) والفجوة التي استحدثها قبل الشعار (8px)، فينقص نصيب الاسم 11px وقد يُقصّ اسم كان يسع كاملاً. نعوّضها هنا بالمقدار نفسه بدل تعديل الملف القديم. الأسبقية أعلى من قاعدته (صنف إضافي) وترتيب التحميل بعده، فالتعويض يفوز في الحالتين. */ @media (max-width: 1199px) { html[dir="ltr"] #match_list_conf.home-matches-panel .matches-wrapper > .header .champ-title { max-width: calc(42% + 11px); } } #match_list_conf.home-matches-panel .champ-settings-toggle { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: var(--mb-radius-xs); color: var(--mb-text-dim); transition: background-color 0.15s ease, color 0.15s ease; } #match_list_conf.home-matches-panel .champ-settings-toggle:hover { background: var(--mb-row-bg-hover); color: var(--mb-text); } /* قائمة إخفاء/تثبيت البطولة (⋮) كانت ‎left: -20px‎ في ‎style.css‎ فتخرج خارج العمود الضيق ويُقصّ نصفها. نفتحها إلى داخل اللوحة مثل الفلتر. على الجوال تُعالَج أعلاه كلوحة سفلية؛ هنا سطح المكتب والعمود الضيق. */ @media (min-width: 768px) { #match_list_conf.home-matches-panel .matches-wrapper > .header .champ-settings-dropdown-wrap { position: relative; } #match_list_conf.home-matches-panel .champ-settings-wrap { top: calc(100% + 4px); left: auto; right: 0; min-width: 180px; width: max-content; max-width: min(240px, calc(100vw - 24px)); padding: 8px 14px; background: var(--mb-panel-bg); border: 1px solid var(--mb-panel-border); border-radius: var(--mb-panel-radius-sm); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.38); transform: none; } html[dir="ltr"] #match_list_conf.home-matches-panel .champ-settings-wrap { right: auto; left: 0; } html.light #match_list_conf.home-matches-panel .champ-settings-wrap { box-shadow: 0 10px 28px rgba(19, 21, 33, 0.1); } #match_list_conf.home-matches-panel .champ-settings-wrap div { padding: 8px 0; border-bottom: 1px solid var(--mb-row-line); } #match_list_conf.home-matches-panel .champ-settings-wrap div:last-child { border-bottom: 0; } #match_list_conf.home-matches-panel .champ-settings-wrap a { padding: 4px 0; font-size: 13px; font-weight: 600; color: var(--mb-text-muted); } #match_list_conf.home-matches-panel .champ-settings-wrap a:hover { color: var(--mb-accent); } #match_list_conf.home-matches-panel .champ-settings-wrap a.remove-champ { color: #fc6b6b; } #match_list_conf.home-matches-panel .champ-settings-wrap a.remove-champ:hover { color: #ff8585; } } /* -------------------------------------------------------------------------- صف المباراة — الشبكة المشتركة بين كل الحالات المحدِّد يبدأ بـ html ويضمّ .inline-match-item لا زخرفةً بل لأن team-matches.css و light.css يلوّنان الصف عبر ‎html.light #match_list_conf .inline-match-item‎ بتخصيص (1,2,1). مطابقة ذلك التخصيص هنا تكفي ليحسم ترتيب التحميل الأمر لصالح هذا الملف، فتبقى خلفية الصف تابعة لمتغير الثيم في الوضعين معاً. -------------------------------------------------------------------------- */ /* غلاف الصف: مرجع موضع للأيقونة، لا صندوق تخطيط. الصف كله وسم ‎‎ والأيقونة وسم ‎‎ آخر، و‎‎ داخل ‎‎ ترميز يفكّه المحلّل فيقلب شجرة الصف رأساً على عقب (انظر التعليق في ‎resources/views/partials/match-quick-link.blade.php‎). فصارت الأيقونة شقيقة الصف داخل هذا الغلاف. و‎position: relative‎ الخاص به ليس هنا بل في ‎team-matches.css‎ بلا قيد سياق: الغلاف نفسه يُستعمل في كل صفحات الموقع، فمرجعُ موضعه صفة له لا صفة للوحة الرئيسية. وتكراره هنا كان سيجعل نسختين لقاعدةٍ واحدة. */ html #match_list_conf .mb-row.inline-match-item { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) var(--mb-center-w) minmax(0, 1fr); grid-auto-rows: min-content; align-content: center; align-items: center; column-gap: var(--mb-gutter); row-gap: 0; width: 100%; min-height: var(--mb-row-h); margin: 0 0 4px; /* فراغ الحافة الأمامية محفوظ لأيقونة البث/التشكيلة حتى تتراصف الصفوف التي تحملها مع التي لا تحملها. */ padding: 8px 12px 8px 40px; background: var(--mb-row-bg); border: 1px solid transparent; border-radius: var(--mb-radius); text-decoration: none; cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease; } html[dir="ltr"] #match_list_conf .mb-row { padding: 8px 40px 8px 12px; } /* آخر صفٍّ في المجموعة لا فسحة تحته، والشرط معلَّق على الغلاف لا على الصف: ‎.mb-row:last-child‎ صارت بعد الغلاف تطابق كلّ صفٍّ لا أيقونة فيه — لأنه حينها آخر أبناء غلافه — فتبتلع الفسحة بين صفوف المجموعة كلها. */ #match_list_conf .mb-row-shell:last-child .mb-row { margin-bottom: 0; } /* فاصل رفيع بين مباريات متتالية فقط — لا خط بعد آخر مباراة في المجموعة حتى لو تلتها ترويسة جولة أو زر «المزيد». */ #match_list_conf.home-matches-panel .matches-wrapper .mb-row-shell:has(+ .mb-row-shell)::after, html.light #match_list_conf:not(.home-matches-panel) .matches-wrapper.wide .mb-row-shell:has(+ .mb-row-shell)::after { content: ""; display: block; margin: 0 14px; border-bottom: 1px solid var(--mb-row-line); } #match_list_conf.home-matches-panel .matches-wrapper .mb-row-shell:has(+ .mb-row-shell) .mb-row, html.light #match_list_conf:not(.home-matches-panel) .matches-wrapper.wide .mb-row-shell:has(+ .mb-row-shell) .mb-row { margin-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } #match_list_conf.home-matches-panel .matches-wrapper .mb-row-shell + .mb-row-shell .mb-row, html.light #match_list_conf:not(.home-matches-panel) .matches-wrapper.wide .mb-row-shell + .mb-row-shell .mb-row { border-top-left-radius: 0; border-top-right-radius: 0; } #match_list_conf .mb-row:hover { background: var(--mb-row-bg-hover); border-color: var(--mb-panel-border); } /* المباراة الجارية: طبقة أعلى في الهرم البصري. التمييز بالحجم لا بلون الخلفية. صفّ أطول، ودائرة أوسع، وشعار واسم ونتيجة أكبر درجة، ودائرة مؤقّت تتحرّك — وهذه وحدها تقول «تُلعب الآن» من مسافة النظرة الأولى. الخلفية تبقى خلفية بقية الصفوف حرفياً: بلا صبغة ولا تدرّج ولا ظل ولا إطار ملوّن. واللمسة اللونية الوحيدة عمودٌ أخضر رقيق على الحافة الابتدائية، من قياس عمود ترويسة البطولة ولونه نفسيهما فتُقرأ العلامتان كعائلة واحدة. وكل حالات ‎.active-match‎ تشترك في المقاسات نفسها — جارية أو استراحة أو أشواط إضافية أو ترجيح — فالطبقتان اثنتان فقط ولا يختلف صفّان داخل الطبقة الواحدة، وهو ما يُبقي القائمة مرصوفة أياً كانت الحالات المعروضة. */ html #match_list_conf .mb-row.inline-match-item.active-match, html #match_list_conf .mb-row.inline-match-item.active-match.live-match, html #match_list_conf .mb-row.inline-match-item.active-match.stopped-match { --mb-ring: var(--mb-ring-live); --mb-name: var(--mb-name-live); --mb-score: var(--mb-score-live); --mb-score-w: var(--mb-score-w-live); /* الشعار يكبر مع الصف وإلا بدا الصف الجاري صفّاً عادياً مُطّاً رأسياً */ --mb-logo: var(--mb-logo-live); /* الدائرة لا تُرسم إلا هنا، فالفسحة تُقاس على مقاسات هذه الطبقة وحدها */ --mb-status-gap: 13px; --mb-status-below-nudge: 5px; --mb-row-pad-y: 20px; /* لون سطح الصف كرمز مستقل. علامة نقطة البداية أعلى الدائرة شقٌّ بلون السطح يقطع القوس، فيلزمها اللون نفسه — ومتابعته عبر متغيّر يعني أن تبديل السطح عند المرور بالفأرة يسحب الشقّ معه تلقائياً بلا قاعدة ثانية له. */ --mb-row-surface: var(--mb-row-bg-live); min-height: var(--mb-row-h-live); padding: 10px 12px 10px 40px; background: var(--mb-row-bg-live); border-color: transparent; box-shadow: none; } html[dir="ltr"] #match_list_conf .mb-row.inline-match-item.active-match, html[dir="ltr"] #match_list_conf .mb-row.inline-match-item.active-match.live-match, html[dir="ltr"] #match_list_conf .mb-row.inline-match-item.active-match.stopped-match { padding: 10px 40px 10px 12px; } #match_list_conf .mb-row.active-match:hover, #match_list_conf .mb-row.active-match.live-match:hover, #match_list_conf .mb-row.active-match.stopped-match:hover { --mb-row-surface: var(--mb-row-bg-live-hover); background: var(--mb-row-bg-live-hover); border-color: var(--mb-panel-border); } /* -------------------------------------------------------------------------- خليتا الفريقين -------------------------------------------------------------------------- */ #match_list_conf .mb-row .first-team, #match_list_conf .mb-row .second-team { display: flex; align-items: center; gap: 8px; min-width: 0; width: auto; margin: 0; padding: 0; } #match_list_conf .mb-row .first-team { grid-column: 1; justify-content: flex-end; padding-inline-end: var(--mb-center-logo-gap); } #match_list_conf .mb-row .second-team { grid-column: 3; justify-content: flex-start; padding-inline-start: var(--mb-center-logo-gap); } #match_list_conf .mb-row .team---item { display: inline-flex; align-items: center; gap: 8px; min-width: 0; width: auto; margin: 0; padding: 0; } #match_list_conf .mb-row .first-team .team---item { justify-content: flex-end; } #match_list_conf .mb-row .second-team .team---item { justify-content: flex-start; } /* الحجم من متغيّر لا رقماً ثابتاً: الصف الجاري يعيد تعريف ‎--mb-name‎ على نفسه، ونقاط التوقّف تعيد تعريفه على اللوحة، فيتبع الاسم الطبقة والعرض معاً بقاعدة واحدة بلا تنازع تخصيص بينهما. */ #match_list_conf .mb-row .team---item b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--mb-name); font-weight: 700; line-height: 1.35; color: var(--mb-text); transition: color 0.15s ease; } #match_list_conf .mb-row:hover .team---item b { color: var(--mb-text-strong); } #match_list_conf .mb-row .team---item .img { flex: 0 0 var(--mb-logo); width: var(--mb-logo); height: var(--mb-logo); display: flex; align-items: center; justify-content: center; margin: 0; padding: 0; background: none; border: 0; border-radius: 0; } #match_list_conf .mb-row .team---item .img img { max-width: 100%; max-height: 100%; object-fit: contain; } /* صف المباراة الجارية: الشعار فوق اسم النادي. ‎style.css‎ يفرض ترتيباً أفقياً على ‎.active-match‎؛ هذه القواعد (مع ‎.match-team-item‎) تعيد تكديس الشعار والاسم عمودياً في وسط خلية الفريق مع الإبقاء على النتيجة بجانبهما. */ #match_list_conf .mb-row.active-match .match-team-item .team---item { flex-direction: column; align-items: center; justify-content: center; gap: 2px; flex-wrap: nowrap; max-width: 100%; text-align: center; } #match_list_conf .mb-row.active-match .match-team-item .team---item .img { order: -1; margin: 0 !important; width: var(--mb-logo); height: var(--mb-logo); } #match_list_conf .mb-row.active-match .match-team-item b { width: 100%; max-width: 100%; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; text-align: center; line-height: 1.1; font-size: var(--mb-name); } #match_list_conf .mb-row.active-match .first-team .team---item, #match_list_conf .mb-row.active-match .second-team .team---item { justify-content: center; align-items: center; } /* تنظيم جهتي الفريق في الصف الجاري: كتلة ثابتة العرض (شعار فوق الاسم) والنتيجة ملاصقة للمركز. يُبطل ‎style.css‎ (‎margin-left: 25px‎، ‎flex-wrap: wrap‎) الذي كان يزيح كل صف بمقدار مختلف. */ #match_list_conf .mb-row.active-match .match-team-item { display: flex; flex-direction: row; align-items: center; gap: 6px; width: 100%; min-width: 0; } #match_list_conf .mb-row.active-match .first-team.match-team-item { justify-content: flex-end; } #match_list_conf .mb-row.active-match .second-team.match-team-item { justify-content: flex-start; } #match_list_conf .mb-row.active-match .match-team-item .team---item { flex: 0 0 var(--mb-team-block-w); width: var(--mb-team-block-w); max-width: var(--mb-team-block-w); flex-wrap: nowrap !important; margin: 0 !important; } #match_list_conf .mb-row.active-match .first-team, #match_list_conf .mb-row.active-match .second-team { width: 100%; } #match_list_conf .mb-row.active-match .match-team-item .team-result { flex: 0 0 var(--mb-score-w); } /* نتيجة المباريات الجارية: بعرض ثابت بجانب المركز حتى لا يتزحزح اسم الفريق عند تغيّر عدد الأهداف. */ #match_list_conf .mb-row .team-result { flex: 0 0 var(--mb-score-w); width: var(--mb-score-w); margin: 0; padding: 0; font-size: var(--mb-score); font-weight: 800; line-height: 1; text-align: center; color: var(--mb-text-strong); background: none; border: 0; } #match_list_conf .mb-row .team-result.loser { color: var(--mb-loser); } /* -------------------------------------------------------------------------- المركز — المباريات المجدولة والمنتهية والمؤجلة -------------------------------------------------------------------------- */ #match_list_conf .mb-row .result-wrap { grid-column: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 100%; min-width: 0; max-width: none; height: 42px; min-height: 42px; margin: 0 !important; padding: 0 4px; background: var(--mb-center-bg); border: 1px solid var(--mb-center-line); border-radius: var(--mb-radius-md); } #match_list_conf .mb-row .result-wrap .match-date { display: flex; align-items: baseline; justify-content: center; gap: 3px; margin: 0; font-size: 13.5px; font-weight: 800; line-height: 1.1; color: var(--mb-text-strong); font-variant-numeric: tabular-nums; /* الوقت ولاحقته صفٌّ واحد دائماً، ولو ضاقت الحبّة */ white-space: nowrap; } /* الشرطة بين نتيجتي المباراة المنتهية */ #match_list_conf .mb-row .result-wrap .match-date i { margin: 0; font-style: normal; font-weight: 400; color: var(--mb-text-dim); } /* لاحقة الوقت (ص/م، am/pm). أصغر وأخفّ من الرقم لأنها معلومة ثانوية: الرقم هو ما تقرأه العين أولاً. والتصغير هو ما يُبقي المجموع داخل الحبّة بلا فيض. ‎align-items: baseline‎ على الأب يرصّ اللاحقة على خطّ قاعدة الأرقام فلا تطفو أعلى أو أسفل منها باختلاف الحجم. */ #match_list_conf .mb-row .result-wrap .match-date .mb-meridiem { font-size: 10.5px; font-weight: 600; letter-spacing: 0; } #match_list_conf .mb-row .result-wrap .first-team-result, #match_list_conf .mb-row .result-wrap .second-team-result { min-width: 12px; font-size: 13.5px; font-weight: 800; line-height: 1.1; text-align: center; color: var(--mb-text-strong); } #match_list_conf .mb-row .result-wrap .first-team-result.winner, #match_list_conf .mb-row .result-wrap .second-team-result.winner { color: var(--mb-accent); } #match_list_conf .mb-row .result-wrap .first-team-result.loser, #match_list_conf .mb-row .result-wrap .second-team-result.loser { color: var(--mb-loser); } #match_list_conf .mb-row .result-wrap .result-status-text { position: static !important; inset: auto !important; transform: none !important; display: block; max-width: 100%; margin: 0; padding: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; /* نفس لغة تسمية الحالة تحت الدائرة: ثانوية أمام النتيجة، فلا تزاحمها */ font-size: var(--mb-status); font-weight: 500; line-height: 1.2; text-align: center; color: var(--mb-text-dim); background: none; border: 0; } #match_list_conf .mb-row .result-wrap .result-status-text.match-status-cancelled { color: var(--mb-live-ink); } #match_list_conf .mb-row .result-wrap .result-status-text.match-status-postponed { font-size: 10px; font-weight: 500; color: var(--mb-postponed-ink); } #match_list_conf .mb-row.match-postponed .result-wrap .match-date, #match_list_conf .mb-row.match-postponed .result-wrap .match-date .mb-meridiem { color: var(--mb-postponed-ink); } /* -------------------------------------------------------------------------- المركز — دائرة الوقت للمباريات الجارية والمتوقفة نفس الشكل المستخدم في رأس صفحة المباراة: قوس مرسوم بـ conic-gradient ونص الوقت في مركزه. الـ SVG القديم يبقى في الترميز لأن JS يحدّثه، لكنه مخفي بصرياً. -------------------------------------------------------------------------- */ #match_list_conf .mb-row .active-match-progress { grid-column: 2; position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: var(--mb-ring); min-height: var(--mb-ring); margin: 0; padding: 0; background: none; border: 0; } /* عمود المركز في الصف الجاري يمتد بارتفاع المحتوى كاملاً لا بمقاس الدائرة فقط، حتى تُحسب تسمية «الشوط الثاني» من منتصف الفسحة فوق الدائرة لا من حافتها السفلية. */ #match_list_conf .mb-row.active-match .active-match-progress { height: calc(var(--mb-row-h-live) - var(--mb-row-pad-y, 20px)); min-height: calc(var(--mb-row-h-live) - var(--mb-row-pad-y, 20px)); display: flex; flex-direction: column; align-items: center; justify-content: center; row-gap: 4px; } #match_list_conf .mb-row .match-inner-progress-wrap { position: relative; display: flex; align-items: center; justify-content: center; width: var(--mb-ring); height: var(--mb-ring); margin: 0; padding: 0; background: none; border: 0; } /* العنصران الزائفان للحاوية يستعملهما الشاهدان أدناه: ‎::before‎ للمبدأ و‎::after‎ للتوقّف. وهذه القاعدة تُبقي ‎::after‎ فارغاً افتراضاً، فلا يعيده الشاهد الأحمر إلّا في الحالات الموقوفة — وهي وسيلة إخفائه في المباراة الجارية. و‎::before‎ ليس هنا لأن ‎style.css‎ يعطيه علامة صفراء قديمة تعلو الدائرة، والشاهد أدناه يُحلّ محلّها بالكامل. */ #match_list_conf .mb-row .match-inner-progress-wrap::after { content: none; } #match_list_conf .mb-row .match-inner-progress-wrap svg { display: none !important; } #match_list_conf .mb-row .match-inner-progress-wrap .percent { position: relative; display: flex; align-items: center; justify-content: center; width: var(--mb-ring); height: var(--mb-ring); margin: 0; padding: 0; background: none; border: 0; border-radius: 50%; } #match_list_conf .mb-row .match-inner-progress-wrap .percent::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, var(--mb-ring-color, var(--mb-accent)) 0, var(--mb-ring-color, var(--mb-accent)) calc(var(--num, 0) * 1%), var(--mb-track) calc(var(--num, 0) * 1%), var(--mb-track) 100%); -webkit-mask: radial-gradient(circle, transparent calc(var(--mb-ring) / 2 - var(--mb-ring-w)), #000 calc(var(--mb-ring) / 2 - var(--mb-ring-w) + 0.5px)); mask: radial-gradient(circle, transparent calc(var(--mb-ring) / 2 - var(--mb-ring-w)), #000 calc(var(--mb-ring) / 2 - var(--mb-ring-w) + 0.5px)); } #match_list_conf .mb-row .match-inner-progress-wrap .number { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 100%; /* ‎--mb-clock‎ يُقاس على أطول قيمة تظهر داخل الدائرة: «105:00» و«120:00» بستّة محارف. القطر الداخلي = ‎--mb-ring‎ ناقص ضعف سمك القوس، والوتر المتاح على ارتفاع النص أقصر من القطر، فالخط يهبط درجة في كل نقطة توقّف لتبقى الستّة محارف داخل الدائرة لا على قوسها. */ font-size: var(--mb-clock); /* 600 لا 800، و‎letter-spacing: 0‎ لا سالباً. الوزن 800 مع تقارب سالب يجعل الرقم كتلة عريضة سوداء داخل الدائرة — صوتٌ أعلى مما تستحقّه دقيقةٌ تتبدّل كل ثانية. الوزن نصف العريض والتقارب الطبيعي يعيدانه إلى طابع الأرقام الكلاسيكي المتّسق مع بقية الصفحة، ويتركان الدائرة وحدها هي التي تحمل الحالة. التقارب السالب كان يُدخل الرقم في الدائرة قسراً؛ لم يعد له داع بعد أن اتّسع القطر — ويثبت ذلك فحص «عرض 105:00 ≤ وتر الدائرة». */ font-weight: 600; line-height: 1; color: var(--mb-ring-ink, var(--mb-accent-ink)); font-variant-numeric: tabular-nums; letter-spacing: 0; /* «90+5» و«105:00» و«··» كلها سطر واحد مهما ضاقت الدائرة */ white-space: nowrap; } /* المباراة الجارية: قوس فيروزي على الدائرة. */ #match_list_conf .mb-row.live-match .match-inner-progress-wrap { --mb-ring-color: var(--mb-accent); --mb-ring-ink: var(--mb-accent-ink); } /* الاستراحة ونهايات الأشواط وركلات الترجيح: قوس أصفر. */ #match_list_conf .mb-row .match-inner-progress-wrap.stopped, #match_list_conf .mb-row .match-inner-progress-wrap.stopped_ex { --mb-ring-color: var(--mb-pause); --mb-ring-ink: var(--mb-pause-ink); } /* -------------------------------------------------------------------------- شاهدا الدائرة وشريطا التوقّف الرقم داخل الدائرة يقول «45:00»، لكنه لا يقول موضع هذه الدقيقة من المباراة ولا إن كان الوقت يجري أم وقف. ثلاث علامات تكمل ما لا يقوله: • شاهد المبدأ (‎::before‎، برتقالي عند الساعة 12): معلَم مكان دائم يحضر في كل حالة، به يُعرف من أين يُقرأ القوس. ولونه حياديّ بين ألوان الحالات قصداً، فلا يُقرأ حالةً. وكان هنا قبله شقٌّ سالب بلون السطح، ثم شواهدُ حمراء لكل حدود الأشواط. والشقّ يقول «انقطاع» لا «مبدأ» ولا يُرى حيث يكون القوس بلون السطح؛ والشواهد الحمراء الدائمة تقول «موقوف» عن حدودٍ لا يقف عندها شيء. • شاهد التوقّف (‎.stopped::after‎ و‎.stopped_ex::after‎، أحمر عند نقطة الوقوف): حالةٌ لا بنية، فلا يظهر إلّا والزمن واقف، ويختفي مع أوّل ثانية تجري بعده. وزواياه في ‎responsive.css‎ مع بقيّة التعريف المشترك، وهذا الملفّ يقصره على قياس دائرة الصف. • شريطا التوقّف (‎.percent::after‎) أسفل الرقم داخل الدائرة: الرمز المتعارف عليه للإيقاف المؤقّت، في الحالات الموقوفة وحدها كذلك. الثلاثة خارج مجرى التخطيط (‎position: absolute‎) فلا تزحزح الرقم ولا ترفع ارتفاع الصف، ولا تعتمد على JS: أصناف ‎stopped‎ و‎stopped_ex‎ و‎ex_90‎ و‎ex_105‎ يضعها الخادم ويبدّلها ‎today_matches.js‎ كما هي. -------------------------------------------------------------------------- */ /* هندسة الشاهدين واحدة، والفارق لونٌ وزاوية. الحاوية هنا بقياس الدائرة نفسها (‎--mb-ring‎ عرضاً وطولاً)، فـ‎inset‎ سالباً يعطي دائرة أوسع من القوس بمقدار البروز من كل جهة، والقناع يفرغ وسطها فيبقى منها حلقةٌ سمكها ‎سمك القوس + بروزان‎ لا يظهر منها إلّا ما لوّنه التدرّج المخروطي: الشاهد وحده. ونصف قطر الفراغ يُحسب من مركز العنصر الموسّع: ‎ring/2 + out‎ نصف قطره الخارجي، فينقص منه سمك الحلقة ‎ring_w + 2×out‎ ليبقى ‎ring/2 − ring_w − out‎. ‎right: auto‎ لأن ‎style.css‎ يضع ‎right: 50%‎ على ‎::before‎ (بقيّة علامة صفراء قديمة كانت تعلو الدائرة)، وتحديد الجهتين معاً على عنصر مطلق يجعل الحالة over-constrained فيفوز ‎right‎ في RTL ويُهمل ‎left‎. */ #match_list_conf .mb-row .match-inner-progress-wrap::before, #match_list_conf .mb-row .match-inner-progress-wrap.stopped:not([data-minutes=""])::after, #match_list_conf .mb-row .match-inner-progress-wrap.stopped_ex:not([data-minutes=""])::after { content: ""; position: absolute; inset: calc(var(--mk-out) * -1); right: auto; width: calc(var(--mb-ring) + 2 * var(--mk-out)); height: calc(var(--mb-ring) + 2 * var(--mk-out)); margin: 0; padding: 0; border: 0; border-radius: 50%; -webkit-mask: radial-gradient(circle, transparent calc(var(--mb-ring) / 2 - var(--mb-ring-w) - var(--mk-out)), #000 calc(var(--mb-ring) / 2 - var(--mb-ring-w) - var(--mk-out) + 0.5px)); mask: radial-gradient(circle, transparent calc(var(--mb-ring) / 2 - var(--mb-ring-w) - var(--mk-out)), #000 calc(var(--mb-ring) / 2 - var(--mb-ring-w) - var(--mk-out) + 0.5px)); pointer-events: none; } /* ‎transform: none‎ يُبطل ‎translateX(50%)‎ الآتية مع العلامة القديمة من ‎style.css‎. والعطل من هذا النوع خبيث: الشاهد يبقى في موضعه الصحيح من حلقته لكن الحلقة نفسها منزلقة نصف عرضها عن الدائرة، فيبدو الأمر دوراناً في الزاوية لا انتقالاً في الموضع. ‎z-index‎ لأن ‎.percent‎ عنصر موضَّع يلي هذا العنصر الزائف في ترتيب المستند، فيُرسم القوس فوقه لولا رفعه. */ #match_list_conf .mb-row .match-inner-progress-wrap::before { background: var(--mk-tick-start); transform: none; z-index: 2; } /* التدوير هو ما ينقل الشاهد إلى نقطة الوقوف: المخروط مرسوم عند 0° لأن المخروط المخزّن في متغيّر لا تبلغه قيمةٌ محلّية، و‎transform‎ خاصّية حقيقية تُحسب على العنصر فتبلغها ‎--mk-at‎ الموضوعة حسب الحالة. والدوران حول مركز العنصر (الأصل الافتراضي) ودائرته متماثلة، فلا يتغيّر صندوقها ولا يلزم تعديل الإزاحات. و‎z-index‎ أعلى من البرتقالي: يلتقيان عند 360° في نهاية الشوط الإضافي الثاني وركلات الترجيح، فيعلو الأحمر — وهو الأحقّ، لأن ما يُخبر عن الحال أوجب من معلَم المكان. و‎:not([data-minutes=""])‎ شرطٌ في المعنى لا في الشكل: الصنف ‎stopped‎ يقع على الحالة 2 (الاستراحة) وعلى الحالة 13 («استأنفت») معاً، والثانية موقوفة بلا نقطة معلومة — قوسها صفر وساعتها «··». فلو رُسم لها شاهد لوقع عند 180° فقال إنها توقّفت في الاستراحة، وذلك خبرٌ لا تملكه الصفحة. والسمة ‎data-minutes‎ هي نفسها مصدر هذا المعنى في التطبيق: الدقيقة التي يستكمل منها المؤقّت، وتُترك فارغة حين لا تُعرف. فالشرط يقرأ الإشارة القائمة ولا يستحدث لها صنفاً ثانياً. */ #match_list_conf .mb-row .match-inner-progress-wrap.stopped:not([data-minutes=""])::after, #match_list_conf .mb-row .match-inner-progress-wrap.stopped_ex:not([data-minutes=""])::after { background: var(--mk-tick-stop); transform: rotate(var(--mk-at, 0deg)); z-index: 3; } /* شريطان رأسيان بعرض 1.5px بينهما 2px، مرسومان بتدرّجين خطّيين بدل حدّين: الحدّ يتبع ‎box-sizing‎ الموروث فيختلف عرض الشريط بين صفحة وأخرى، والخلفية لا تتبعه. ‎bottom: 8px‎ ثابتة لا نسبة من القطر: العلامة أيقونة لا مقياس، وثباتها يُبقيها مقروءة عند أصغر دائرة (44px). وهي تقع بين حافة الدائرة الداخلية وحدّ الرقم السفلي في نقاط التوقّف الثلاث جميعاً — يتحقّق من ذلك ‎scripts/check-match-board.py‎. */ #match_list_conf .mb-row .match-inner-progress-wrap.stopped .percent::after, #match_list_conf .mb-row .match-inner-progress-wrap.stopped_ex .percent::after { content: ""; position: absolute; bottom: 9px; left: 50%; right: auto; top: auto; transform: translateX(-50%); width: 5.5px; height: 6px; margin: 0; padding: 0; background: linear-gradient(var(--mb-ring-ink, var(--mb-pause-ink)) 0 0) left / 1.5px 100% no-repeat, linear-gradient(var(--mb-ring-ink, var(--mb-pause-ink)) 0 0) right / 1.5px 100% no-repeat; border: 0; z-index: 2; pointer-events: none; } @media (prefers-reduced-motion: reduce) { #match_list_conf .mb-row .match-inner-progress-wrap .number { animation: none !important; } } /* نصوص الحالة حول الدائرة: خارج مجرى الشبكة تماماً، فلا تُزحزح الدائرة ولا تغيّر ارتفاع الصف عند ظهورها أو اختفائها. */ /* right: auto ضرورة لا زينة. ‎style.css‎ يضع ‎right: 50%‎ على هذه العناصر (تصميم قديم كان يوسّطها من جهة اليمين). عندما يُحدَّد left و right معاً على عنصر absolute تكون الحالة over-constrained، وفي RTL يفوز ‎right‎ ويُهمل ‎left‎. فيصبح ‎translateX(-50%)‎ محسوباً من الحافة اليمنى فينزلق النص بعرضه كاملاً يساراً بدل أن يتوسّط تحت الدائرة — وكل تسمية بعرض مختلف تنزلق مسافة مختلفة، فتبدو التسميات غير مرصوفة أصلاً. */ #match_list_conf .mb-row .active-match-progress > .result-status-text, #match_list_conf .mb-row .match-inner-progress-wrap > .result-status-text { position: absolute; left: 50%; right: auto; transform: translateX(-50%); width: max-content; /* النص خارج مجرى الشبكة، فتوسيعه فوق حدود خلية المركز لا يزحزح عمودي الفريقين. يقف عند 114px لأنه يبقى بعدها في الفراغ أعلى/أسفل أسماء الفرق ولا يلامسها. */ max-width: calc(var(--mb-center-w) + 38px); margin: 0; padding: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; /* تسمية ثانوية تحت الدائرة: الرقم داخل الدائرة هو المعلومة، والتسمية شرحه. فهي أصغر وبوزن عادي لا عريض — العريض كان يزاحم الرقم على الانتباه ويثقل الصف. والوزن الأخف يجعلها أهدأ ولو صغر حجمها. */ font-size: var(--mb-status); font-weight: 500; line-height: 1.2; text-align: center; background: none; border: 0; } #match_list_conf .mb-row .active-match-progress > .result-status-text { color: var(--mb-text-dim); } #match_list_conf .mb-row:not(.active-match) .active-match-progress > .result-status-text { top: calc(var(--mb-status-gap) * -1); } #match_list_conf .mb-row.active-match .active-match-progress > .result-status-text { position: static !important; inset: auto !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; transform: none !important; order: -1; flex: 0 0 auto; align-self: center; color: var(--mb-text-dim); } #match_list_conf .mb-row.active-match .active-match-progress > .result-status-text:empty { display: none; } #match_list_conf .mb-row.active-match .active-match-progress > .match-inner-progress-wrap { flex: 0 0 auto; } /* لون هادئ لا لون دلالي. كان هنا ‎--mb-pause-ink‎ (الأصفر) على أساس أن التسمية تخصّ الاستراحة، وهو خطأ في الأساس: ‎today_matches.js‎ يكتب في هذا العنصر نفسه تسمية الحالة الجارية أيضاً، فكانت «الشوط الثاني» تظهر صفراء صارخة تحت دائرة فيروزية لمباراة تُلعب في الدقيقة 52 — لون يناقض حالته ويخطف الانتباه من الرقم بلا داعٍ. والرمادي الخافت هو لون التسمية التوأم فوق الدائرة، فتتوحّد لغتهما. ومعنى التوقّف لم يُفقد: القوس الأصفر وشريطا التوقّف داخل الدائرة يحملانه، والتسمية تشرح لا تنبّه. */ #match_list_conf .mb-row .match-inner-progress-wrap > .result-status-text { color: var(--mb-text-dim); } #match_list_conf .mb-row:not(.active-match) .match-inner-progress-wrap > .result-status-text { bottom: calc(var(--mb-status-gap) * -1); } #match_list_conf .mb-row.active-match .match-inner-progress-wrap > .result-status-text { bottom: calc((var(--mb-row-h-live) - var(--mb-ring) - var(--mb-row-pad-y, 20px)) / -4 - var(--mb-status-below-nudge, 0px)); transform: translate(-50%, 50%); } #match_list_conf .mb-row .match-inner-progress-wrap > .result-status-text[hidden] { display: none; } /* الوقت بدل الضائع. يشغل خانة تسمية الحالة نفسها تحت الدائرة — الاثنان متبادلان لا يظهران معاً — فيأخذ حجمها ليستقيم السطر بينهما، ويبقى وزنه أثقل لأنه عدّاد يتغيّر لا نصّاً ثابتاً. */ #match_list_conf .mb-row .extra-time { position: absolute; left: 50%; right: auto; width: max-content; margin: 0; padding: 0; font-size: var(--mb-status); font-weight: 700; line-height: 1.2; white-space: nowrap; color: var(--mb-live); background: none; font-variant-numeric: tabular-nums; } #match_list_conf .mb-row:not(.active-match) .extra-time { bottom: calc(var(--mb-status-gap) * -1); transform: translateX(-50%); } #match_list_conf .mb-row.active-match .extra-time { bottom: calc((var(--mb-row-h-live) - var(--mb-ring) - var(--mb-row-pad-y, 20px)) / -4 - var(--mb-status-below-nudge, 0px)); transform: translate(-50%, 50%); } #match_list_conf .mb-row .extra-time .extra-count { font-style: normal; font-weight: 800; } #match_list_conf .mb-row .extra-time[hidden] { display: none; } /* -------------------------------------------------------------------------- ركلات الترجيح — صف كامل أسفل الشبكة -------------------------------------------------------------------------- */ #match_list_conf .mb-row .penalties-wrapper { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin: 8px 0 0; padding: 7px 0 0; background: none; border: 0; border-top: 1px solid var(--mb-row-line); } #match_list_conf .mb-row .penalties-shots { display: flex; align-items: center; gap: var(--mb-pen-shot-gap); flex: 1 1 0; min-width: 0; flex-wrap: wrap; } #match_list_conf .mb-row .first-team-shots { justify-content: flex-end; } #match_list_conf .mb-row .second-team-shots { justify-content: flex-start; } #match_list_conf .mb-row .penalties-shots .p-shot-item { display: inline-flex; align-items: center; justify-content: center; width: var(--mb-pen-shot-size); height: var(--mb-pen-shot-size); margin: 0; padding: 0; color: var(--mb-text-dim); opacity: 0.45; } #match_list_conf .mb-row .penalties-shots .p-shot-item svg { width: 100%; height: 100%; } #match_list_conf .mb-row .penalties-shots .p-shot-item.success { color: var(--mb-accent); opacity: 1; } #match_list_conf .mb-row .penalties-shots .p-shot-item.failed { color: var(--mb-live); opacity: 1; } /* min-height يثبّت ارتفاع سطر الترجيح. السطر يحمل تسمية «ركلات الترجيح» فوق النتيجة في المباراة المنتهية، ولا يحملها في الحالة 11 لأن التسمية ظاهرة أسفل الدائرة. بدون ارتفاع محجوز يخرج صفّان بارتفاعين مختلفين لنفس المعلومة. */ #match_list_conf .mb-row .penalties-wrapper .result-wrap { grid-column: auto; flex: 0 0 var(--mb-center-w); width: var(--mb-center-w); height: auto; min-height: calc(var(--mb-pen-shot-size) + 11px); padding: 0; background: none; border: 0; } #match_list_conf .mb-row .penalties-wrapper .result-wrap .match-date { font-size: 12px; color: var(--mb-text-dim); } #match_list_conf .mb-row .penalties-wrapper .result-wrap .match-date i { color: var(--mb-text-dim); } #match_list_conf .mb-row .penalties-wrapper .result-wrap .match-date .first-team-result, #match_list_conf .mb-row .penalties-wrapper .result-wrap .match-date .second-team-result { font-size: 12px; font-weight: 800; color: var(--mb-text-strong); } #match_list_conf .mb-row .penalties-wrapper .result-wrap .match-date .first-team-result.winner, #match_list_conf .mb-row .penalties-wrapper .result-wrap .match-date .second-team-result.winner { color: var(--mb-text-strong); } #match_list_conf .mb-row .penalties-wrapper .result-wrap .match-date .first-team-result.loser, #match_list_conf .mb-row .penalties-wrapper .result-wrap .match-date .second-team-result.loser { color: var(--mb-loser); } #match_list_conf .mb-row .penalties-wrapper .result-wrap .result-status-text { color: var(--mb-text-dim); } /* -------------------------------------------------------------------------- أيقونات الصف (بث مباشر / تشكيلة / فيديو) -------------------------------------------------------------------------- */ /* المرجع هو الغلاف لا الصف: الأيقونة لم تعد داخل وسم الصف. والقياسات لم تتغيّر بحرف — الغلاف بعرض الصف وارتفاعه — فالأيقونة تقف حيث كانت. ولا قاعدة ‎object‎ بعد اليوم: الوسم كان يلفّ الأيقونة ليقطع سياق الرابط، وقد أغنى عنه الغلاف. وإبقاء قاعدةٍ لوسمٍ لا وجود له يوحي بأنه ما زال خياراً مطروحاً. */ #match_list_conf .mb-row-shell .active-match-quick-links { position: absolute; top: 50%; left: 10px; transform: translateY(-50%); display: flex; align-items: center; gap: 7px; margin: 0; padding: 0; z-index: 1; } html[dir="ltr"] #match_list_conf .mb-row-shell .active-match-quick-links { left: auto; right: 10px; } /* هنا مقاس الأيقونة وموضعها فقط. أما لونها وسماكة خطّها فمشتركان مع بقية صفحات الموقع ومكانهما ‎team-matches.css‎ (كتلة «أيقونات الصف السريعة»): الدلالة واحدة أينما ظهرت الأيقونة، والمقاس وحده يختلف لأن صفّ الرئيسية أقصر وصندوقه شفّاف بينما صفوف الصفحات الأخرى تحمل صندوقاً مصمتاً. والبديل المرفوض: إبقاء اللون هنا وتكراره هناك — فيفترق اللونان أول مرّة يُعدَّل أحدهما، ولا شيء في الملفين يشير إلى أن لهما نظيراً. */ #match_list_conf .mb-row-shell .active-match-quick-link { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; background: none; border: 0; border-radius: var(--mb-radius-2xs); transition: color 0.15s ease, background-color 0.15s ease; } #match_list_conf .mb-row-shell .active-match-quick-link svg { width: 18px; height: 18px; } /* الأيقونة أكبر داخل صندوق اللمس نفسه: الصندوق شفّاف ومقاسه محفوظ في ‎.active-match-quick-link‎، فتكبير الرسم وحده لا يزحزح شيئاً في الصف. */ #match_list_conf .mb-row-shell .active-match-quick-link.lineup svg { width: 21px; height: 21px; } /* الخلفية وحدها هنا. ولا ‎color‎ معها كما كان: كلُّ أيقونة تحمل صنف نوعها (‎lineup‎ أو ‎videos‎ أو ‎match-live-tab-link‎) وله لونه، وتلك القواعد كانت تسبق هذه في الترتيب وتساويها تخصيصاً فتغلبها — فكان اللون هنا سطراً ميّتاً لا يُطبَّق على أيقونةٍ واحدة. وحذفه الآن لازم لا تجميل: الألوان انتقلت إلى ‎team-matches.css‎ بتخصيصٍ أدنى، فلو بقي لأصبح حيّاً وأطفأ ألوان الأنواع. */ #match_list_conf .mb-row-shell .active-match-quick-link:hover { background: var(--mb-center-bg); } /* لمسة البثّ عند المرور تبقى هنا: صندوق الرئيسية شفّاف فيحتمل تلويناً خفيفاً، وصناديق بقية الصفحات مصمتة أصلاً فالتلوين عليها يعكّرها. */ #match_list_conf .mb-row-shell .active-match-quick-link.match-live-tab-link:hover { background: color-mix(in srgb, var(--mb-live) 14%, transparent); color: var(--mb-live); } /* -------------------------------------------------------------------------- لا مباريات -------------------------------------------------------------------------- */ #match_list_conf.home-matches-panel .no-matches-wrapper { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 44px 16px; background: none; border: 0; color: var(--mb-text-dim); } #match_list_conf.home-matches-panel .no-matches-wrapper svg { width: 44px; height: 44px; opacity: 0.5; } #match_list_conf.home-matches-panel .no-matches-wrapper p { margin: 0; font-size: 13px; font-weight: 600; color: var(--mb-text-dim); text-align: center; } /* -------------------------------------------------------------------------- لوحة البطولات المخفية -------------------------------------------------------------------------- */ #match_list_conf.home-matches-panel > .championship-wrap.hidden-champs { margin-top: 10px; padding: 6px; background: var(--mb-panel-bg); border: 1px solid var(--mb-panel-border); border-radius: var(--mb-panel-radius); } #match_list_conf.home-matches-panel > .championship-wrap.hidden-champs > .section-title { display: flex; align-items: center; justify-content: space-between; margin: 0; padding: 8px 10px 10px; background: none; border: 0; border-bottom: 1px solid var(--mb-row-line); } #match_list_conf.home-matches-panel > .championship-wrap.hidden-champs > .section-title h3 { margin: 0; font-size: 13px; font-weight: 800; color: var(--mb-text-muted); } #match_list_conf.home-matches-panel > .championship-wrap.hidden-champs .matches-wrapper > .header { min-height: 40px; margin: 4px 0 0; padding: 0 10px; border-radius: var(--mb-radius-md); background: var(--mb-row-bg); } #match_list_conf.home-matches-panel > .championship-wrap.hidden-champs .remove-hidden { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; color: var(--mb-live); text-decoration: none; } /* -------------------------------------------------------------------------- عمود المحتوى الملاصق (الصفحة الرئيسية، الشاشات الكبيرة) قائمة المباريات تطول كثيراً، وكان النقر على مباراة قريبة من أسفل القائمة يقذف الصفحة إلى الأعلى ليُظهر لوحة التفاصيل. بجعل عمود المحتوى ملاصقاً تبقى اللوحة أمام المستخدم دائماً، فتتبدّل التفاصيل في مكانها بلا أي حركة للصفحة — وأُلغي معها التمرير القسري في match_detail.js. العمود يمرّر داخلياً حين يطول محتواه؛ والنوافذ المنبثقة في الموقع position: fixed فلا يقصّها هذا التمرير. -------------------------------------------------------------------------- */ /* ‎body { overflow-x: hidden }‎ في style.css و light.css و _base.css يجعل الـ body حاوية تمرير، وأي عنصر sticky داخله يقيس التصاقه عليها لا على نافذة العرض — فيبقى ساكناً ولا يلتصق أبداً. الحل ‎clip‎: يمنع التمرير الأفقي مثل ‎hidden‎ لكن دون إنشاء حاوية تمرير. محاط بـ ‎@supports‎ حتى تبقى المتصفحات التي لا تعرفه على سلوكها السابق بدل أن تفقد منع التمرير. */ @supports (overflow: clip) { body { overflow-x: clip; } } @media (min-width: 992px) { /* الشعار في الصف الجاري على سطح المكتب كان 34px بينما الجوال 42px، فبدا صغيراً في العمود الضيق. نكبّره هنا فقط دون المساس بالموبايل. */ html { --mb-logo-live: 39px; --mb-team-block-w: 90px; --mb-name: 13.5px; --mb-name-live: 12.5px; } .championships-section .main-row { align-items: flex-start; } .club-page-inner > .main-row { align-items: flex-start; } .championships-section .main-row > .col-lg-7.home-content-panel.showing-match-detail, .club-page-inner > .main-row > .col-lg-7.home-content-panel.showing-match-detail { position: sticky; top: 12px; align-self: flex-start; max-height: calc(100vh - 24px); overflow-y: auto; /* contain كانت تحبس العجلة داخل العمود حتى بعد الوصول لأعلى المحتوى، فيتعذّر الرجوع لترويسة الصفحة. auto يعيد التمرير للصفحة عند الحافة. */ overscroll-behavior-y: auto; scrollbar-width: thin; z-index: 1; } .home-content-panel.showing-match-detail > .dynamic-tabs-content { display: none !important; } .championships-section .main-row > .col-lg-7.home-content-panel.showing-match-detail::-webkit-scrollbar, .club-page-inner > .main-row > .col-lg-7.home-content-panel.showing-match-detail::-webkit-scrollbar { width: 6px; } .championships-section .main-row > .col-lg-7.home-content-panel.showing-match-detail::-webkit-scrollbar-thumb, .club-page-inner > .main-row > .col-lg-7.home-content-panel.showing-match-detail::-webkit-scrollbar-thumb { background: var(--mb-center-line, rgba(127, 127, 127, 0.35)); border-radius: 3px; } .championships-section .main-row > .col-lg-7.home-content-panel.showing-match-detail::-webkit-scrollbar-track, .club-page-inner > .main-row > .col-lg-7.home-content-panel.showing-match-detail::-webkit-scrollbar-track { background: transparent; } } /* -------------------------------------------------------------------------- الجوال واللوحات المتوسطة -------------------------------------------------------------------------- */ @media (max-width: 991px) { html { --mb-row-h: 70px; --mb-logo: 32px; --mb-name: 13.5px; --mb-team-block-w: 90px; --mb-name-live: 13px; --mb-logo-live: 42px; --mb-row-h-live: 98px; --mb-ring-live: 52px; } #match_list_conf { gap: 12px; } #match_list_conf.home-matches-panel { --mb-row-h: 70px; --mb-center-w: 72px; --mb-ring: 40px; --mb-logo: 32px; --mb-name: 13.5px; --mb-gutter: 8px; --mb-clock: 11.5px; /* row_h ≥ ring + 2 × gap محفوظ: 98 ≥ 52 + 26 = 78 */ --mb-row-h-live: 98px; --mb-ring-live: 52px; --mb-name-live: 13px; --mb-score-live: 19px; --mb-score-w-live: 23px; --mb-logo-live: 42px; } .championships-section #match_list_conf.home-matches-panel { padding: 0; } #match_list_conf.home-matches-panel > .championship-wrap.important-matches { border-radius: var(--mb-panel-radius); padding: 4px; } #match_list_conf:not(.home-matches-panel):has(> .matches-wrapper.wide), #match_list_conf:not(.home-matches-panel) .champ-tab-item.matches { --mb-panel-inset: 4px; background: var(--mb-panel-bg); border: 1px solid var(--mb-panel-border); border-radius: var(--mb-panel-radius-sm); padding: var(--mb-panel-inset); box-shadow: none; } #match_list_conf.home-matches-panel .mb-matches-body { padding: 4px 2px; } /* روابط البطولة (هدافون/ترتيب/أخبار) تزاحم الاسم على اللوحات الضيقة؛ الوصول إليها من صفحة البطولة. وإلغاء سقف ‎42%‎ في LTR لأن الاسم يأخذ الآن الفسحة المتبقية بعد زر الإعدادات فقط. */ #match_list_conf.home-matches-panel .matches-wrapper > .header .champ-links { display: none; } html[dir="ltr"] #match_list_conf.home-matches-panel .matches-wrapper > .header .champ-title { max-width: none; } } @media (max-width: 575px) { html { --mb-row-h: 68px; --mb-logo: 30px; --mb-name: 12.5px; --mb-team-block-w: 84px; --mb-name-live: 12px; --mb-logo-live: 38px; --mb-row-h-live: 94px; --mb-ring-live: 48px; } #match_list_conf.home-matches-panel { --mb-row-h: 68px; --mb-center-w: 66px; --mb-ring: 38px; --mb-ring-w: 2px; --mb-logo: 30px; --mb-gutter: 6px; --mb-radius: 8px; --mb-name: 12.5px; --mb-clock: 11px; --mb-status: 8px; /* الزيادة هنا أقلّ منها في النقاط الأوسع قصداً: عرض 360px يُقسَّم بين عمودي الفريقين، وكل بكسل يأخذه الشعار أو خانة النتيجة يخصمه من اسم الفريق قبل أن يُقصّ بالنقاط الثلاث. row_h ≥ ring + 2 × gap: 94 ≥ 48 + 26 = 74 */ --mb-row-h-live: 94px; --mb-ring-live: 48px; --mb-name-live: 12px; --mb-score-live: 17.5px; --mb-score-w-live: 21px; --mb-logo-live: 38px; } #match_list_conf.home-matches-panel > .championship-wrap.important-matches { border: 0; border-radius: var(--mb-panel-radius-sm); padding: 2px; background: transparent; } #match_list_conf.home-matches-panel > .championship-wrap.important-matches > .section-title { padding: 8px 6px 10px; } /* الشريط كله ≈ 208px هنا بدل 228px، فيبقى للعنوان متّسع على شاشة 360px */ #match_list_conf.home-matches-panel .section-actions .inline-date-filter { height: 26px; } #match_list_conf.home-matches-panel .section-actions .inline-date-filter .date-next-prev { width: 20px; height: 20px; } #match_list_conf.home-matches-panel .section-actions .inline-date-filter span { min-width: 76px; font-size: 11px; } #match_list_conf.home-matches-panel .section-actions .drop-toggle, #match_list_conf.home-matches-panel .section-actions .search { width: 26px; height: 26px; } #match_list_conf.home-matches-panel .matches-wrapper > .header { padding: 0 6px; min-height: 36px; } #match_list_conf.home-matches-panel .matches-wrapper > .header .champ-title b { font-size: var(--mb-name); } #match_list_conf .mb-row { padding: 8px 10px 8px 34px; } html[dir="ltr"] #match_list_conf .mb-row { padding: 8px 34px 8px 10px; } /* الحبّة تنزل إلى 66px هنا (المتاح داخلها 56px)، فينزل الوقت معها درجة ليبقى «05:30 ص» ≈ 50px بالفسحة نفسها التي له في الشاشات الأوسع. تصغير الخط أفضل من توسيع الحبّة: العرض المتبقّي على شاشة 360px تحتاجه أسماء الفريقين. */ #match_list_conf .mb-row .result-wrap .match-date { font-size: 12.5px; } #match_list_conf .mb-row .result-wrap .match-date .mb-meridiem { font-size: 10px; } html #match_list_conf .mb-row.inline-match-item.active-match, html #match_list_conf .mb-row.inline-match-item.active-match.live-match, html #match_list_conf .mb-row.inline-match-item.active-match.stopped-match { padding: 10px 10px 10px 34px; } html[dir="ltr"] #match_list_conf .mb-row.inline-match-item.active-match, html[dir="ltr"] #match_list_conf .mb-row.inline-match-item.active-match.live-match, html[dir="ltr"] #match_list_conf .mb-row.inline-match-item.active-match.stopped-match { padding: 10px 34px 10px 10px; } #match_list_conf .mb-row-shell .active-match-quick-links { left: 7px; } html[dir="ltr"] #match_list_conf .mb-row-shell .active-match-quick-links { left: auto; right: 7px; } #match_list_conf .mb-row-shell .active-match-quick-link { width: 24px; height: 24px; } #match_list_conf .mb-row-shell .active-match-quick-link svg { width: 17px; height: 17px; } #match_list_conf .mb-row-shell .active-match-quick-link.lineup svg { width: 20px; height: 20px; } } /* -------------------------------------------------------------------------- قائمة إعدادات الهيدر (أيقونة الترس بجانب تسجيل الدخول) ‎.settings-dropdown-wrap‎ في ‎style.css‎ يوسّط اللوحة بعرض ‎323px‎ على الزرّ (‎right: 50% + translateX(50%)‎). الزرّ قرب حافة الشاشة — خصوصاً في ‎ltr‎ أو نافذة Cursor الضيقة — فيُقصّ نصف اللوحة بـ ‎overflow-x: hidden‎. -------------------------------------------------------------------------- */ .setting-wrap .drop-item { position: relative; } .setting-wrap .settings-dropdown-wrap { width: min(323px, calc(100vw - 24px)); transform: none; } html[dir="rtl"] .setting-wrap .settings-dropdown-wrap { left: 0; right: auto; } html[dir="ltr"] .setting-wrap .settings-dropdown-wrap { right: 0; left: auto; } @media (max-width: 767px) { .setting-wrap .settings-dropdown-wrap { position: fixed; top: auto; bottom: 0; left: 0; right: 0; width: auto; max-width: none; max-height: 85vh; overflow-y: auto; -webkit-overflow-scrolling: touch; margin: 0; padding: 10px 14px calc(16px + env(safe-area-inset-bottom, 0px)); border-radius: 16px 16px 0 0; box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.45); transform: translateY(14px); } .setting-wrap .settings-dropdown-wrap::before { content: ""; display: block; width: 36px; height: 4px; margin: 2px auto 12px; border-radius: 2px; background: rgba(127, 127, 127, 0.35); } .setting-wrap .settings-dropdown-wrap.active { transform: none; z-index: 999; } } /* أزرار الواجهة صارت بلا href بعد إسقاط javascript:void(0). ومؤشّر اليد في أنماط المتصفّح الافتراضيّة مربوط بـ a[href] لا بالوسم نفسه، فبإسقاط href يعود المؤشّر سهماً على كلّ زرّ. هذه القاعدة تعيده. وuser-select: none يمنع تحديد النصّ عند النقر المزدوج، وهو سلوك