/* ============================================================================= * SoccersAPI Livescore Widget V2 — External overrides * ----------------------------------------------------------------------------- * Fichier CSS des overrides SITE-SIDE pour le widget . * * Ce fichier n'a AUCUN effet tant que n'est pas ajoute dans index.html * APRES le UMD du widget. Tout est commente par defaut : rollback = suppression * du , ou vider ce fichier. * * Faits verifies sur le UMD 1789988169028 (2.1 MB) et le style.css (386 KB) : * - Custom element : (customElements.define(...)) * - Registration flag : shadow: false => this.container = this * => LIGHT DOM : tout le CSS externe atteint le widget, aucun Shadow root * - Aucun iframe, aucun ::part(), aucun attribut part="..." dans le JS * - Root scope wrapper : .wc-livescore-scope (englobe tout le widget) * - Classes stables prefixees .ls-* en BEM (ex: .ls-toolbar-date-slot, * .ls-league-row__logo, .ls-match-row__favorite). Aucune classe hashee. * - 608 variables CSS documentees --ls-* * - La plupart des regles internes utilisent :where(...) (specificite 0) * => surcharge triviale via simple classe .ls-... au niveau racine. * - Quelques regles LAYOUT critiques utilisent !important (voir bloc mobile). * * ROBUSTESSE (referentiel utilise dans les commentaires ci-dessous) : * [ROBUST] = custom property --ls-* (API publique de fait, resiste aux updates) * [MEDIUM] = classe stable .ls-... (BEM public, peu susceptible de bouger) * [FRAGILE] = surcharge structurelle avec !important + selecteurs composes * ============================================================================ */ /* ============================================================================= * PART 1 — Overrides via CSS Custom Properties [ROBUST] * * Redefinir une variable --ls-* au niveau :root suffit : la cascade traverse * le light DOM du widget sans obstacle. C'est la SEULE methode qui devrait * survivre a toutes les futures mises a jour de SoccersAPI. * Toutes les valeurs sont commentees : decommenter au besoin. * ============================================================================ */ :root { /* ---------- Typographie globale du widget ---------- */ /* --ls-font-family: "Inter", system-ui, sans-serif; */ /* --ls-font-scale: 1; */ /* multiplicateur global */ /* --ls-font-size: 14px; */ /* ---------- Couleurs de base ---------- */ /* --ls-accent: #2563eb; */ /* --ls-accent-color: #2563eb; */ /* --ls-hover-bg: #eef2f7; */ /* --ls-hover-text: #0f1a2b; */ /* --ls-border-color: #e5e7eb; */ /* ---------- League header / row ---------- */ /* --ls-league-group-bg: #ffffff; */ /* --ls-league-group-padding: 10px 14px; */ /* --ls-league-row-height: 48px; */ /* --ls-league-row-logo-size: 20px; */ /* --ls-league-row-hover-bg: #f7f9fc; */ /* --ls-league-row-sticky-top: 0px; */ /* sticky league header */ /* --ls-league-group-shadow: none; */ /* ---------- Match row ---------- */ /* --ls-match-row-height: 44px; */ /* --ls-match-row-bg: #ffffff; */ /* --ls-match-row-hover-bg: #f5f7fb; */ /* --ls-match-item-height: 44px; */ /* --ls-match-item-logo-size: 22px; */ /* logos equipes */ /* --ls-match-item-padding: 8px 12px; */ /* --ls-match-item-score-row-bg: #f0f3f9; */ /* --ls-match-team-name-line-height: 1.2; */ /* --ls-match-item-time-text-size: 12px; */ /* ---------- Score ---------- */ /* --ls-score-font-family: "Inter", system-ui, sans-serif; */ /* --ls-score-text: #0f1a2b; */ /* --ls-score-bg: transparent; */ /* --ls-role-score-weight: 700; */ /* ---------- Tabs (Aujourd'hui / En direct / A venir) ---------- */ /* --ls-tabs-active-bg: #2563eb; */ /* --ls-tabs-active-text: #ffffff; */ /* --ls-tabs-inactive-bg: transparent; */ /* --ls-tabs-inactive-text: #475569; */ /* --ls-tabs-hover-bg: #eef2f7; */ /* --ls-tabs-padding-x: 12px; */ /* --ls-tabs-btn-radius: 8px; */ /* --ls-tabs-wrapper-bg: #ffffff; */ /* --ls-tabs-cursor-height: 2px; */ /* --ls-tab-text-size: 13px; */ /* ---------- Date picker ---------- */ /* --ls-calendar-selected-bg: #2563eb; */ /* --ls-calendar-selected-text: #ffffff; */ /* --ls-toolbar-date-gap: 8px; */ /* --ls-toolbar-date-min-width: 220px; */ /* --ls-toolbar-date-min-width-compact: 160px; */ /* ---------- Toolbar sticky ---------- */ /* --ls-toolbar-sticky-top: 0px; */ /* --ls-toolbar-sticky-z: 50; */ /* ---------- Favoris ---------- */ /* --ls-favorite-active: #f59e0b; */ /* ---------- Live chip / red cards ---------- */ /* --ls-live-status: #dc2626; */ /* --ls-league-row-live-chip-bg: #fee2e2; */ /* --ls-danger: #dc2626; */ /* cartons rouges */ } /* ============================================================================= * PART 2 — Overrides via classes stables .ls-* [MEDIUM] * * Le widget utilise :where(...) pour scoper la plupart des regles a * specificite 0 : n'importe quelle regle plate suffit a surcharger. * ============================================================================ */ /* .ls-league-group-header__title { font-size: 13px; letter-spacing: 0.02em; text-transform: uppercase; } .ls-match-row__favorite-button { opacity: 0.7; } .ls-match-row__favorite-button:hover { opacity: 1; } */ /* ============================================================================= * PART 3 — Fix MOBILE : date picker + tabs empiles verticalement [FRAGILE] * * Constat sur le CSS 1789988169028 : * .ls-toolbar-default-row { * align-items: center !important; * flex-direction: row !important; * flex-wrap: nowrap !important; * overflow: hidden; * } * .ls-toolbar-default-row .ls-toolbar-tabs-slot { * flex: 1 1 var(--ls-toolbar-tabs-min, 132px) !important; * min-width: var(--ls-toolbar-tabs-min, 132px) !important; * } * * => nowrap + overflow:hidden = tabs coupees sur ecran etroit. * Surcharge possible uniquement avec !important + specificite egale ou sup. * * Objectif : sous 600px, empiler date picker (ligne 1) et tabs (ligne 2), * avec les tabs en scroll horizontal si necessaire. * ============================================================================ */ /* @media (max-width: 600px) { .wc-livescore-scope .ls-toolbar-default-row { flex-direction: column !important; flex-wrap: wrap !important; overflow: visible !important; align-items: stretch !important; gap: 8px; } .wc-livescore-scope .ls-toolbar-default-row .ls-toolbar-date-slot { order: 1; flex: 0 0 auto !important; width: 100%; } .wc-livescore-scope .ls-toolbar-default-row .ls-toolbar-tabs-slot { order: 2; flex: 1 1 auto !important; min-width: 0 !important; width: 100% !important; overflow-x: auto; -webkit-overflow-scrolling: touch; } .wc-livescore-scope .ls-toolbar-default-row .ls-toolbar-utility-slot { order: 3; margin-left: 0 !important; } } */ /* ============================================================================= * PART 3B — MATCH ROW responsive : stacked mobile, inline desktop [MEDIUM] * ----------------------------------------------------------------------------- * Preuves relevees dans style.css 1789988169028 : * .ls-match-row-inline { * container-type: inline-size; * container-name: ls-match-row-inline; * } * @container ls-match-row-inline (max-width: 420px) { * .ls-match-row-inline__fixture { --ls-match-row-inline-score-gap: 8px; ... } * } * * => la row inline est UN container CSS nomme. On peut donc y accrocher nos * propres @container ls-match-row-inline (...) : la regle reagit a la * largeur REELLE de la row (pas du viewport), donc marche aussi bien dans * une sidebar 400px sur ecran 1920 que sur un mobile 360. * * Structure JSX interne (verifiee dans le UMD) : * .ls-match-row-inline ← outer grid: [status] [fixture] [rail] * .ls-match-row-inline__status * .ls-match-row-inline__fixture ← inner grid: [home] [score] [away] * .ls-match-row-inline__team.ls-match-row-inline__team--home * .ls-match-row-inline__score * .ls-match-row-inline__team.ls-match-row-inline__team--away * .ls-match-row-inline__odds (si actives) * * Reagencement mobile : la fixture passe en 2 colonnes / 2 lignes ; la colonne * de gauche empile home au-dessus de away, la colonne de droite garde le * score verticalement centre. * ============================================================================ */ /* Desktop (viewport > 500px) : layout inline natif conserve tel quel. Aucune regle ecrite ici : on laisse la definition SoccersAPI intacte. */ /* IMPORTANT : on utilise @media (viewport) et PAS @container. Raison : @container ls-match-row-inline (...) ne peut PAS cibler l'element qui EST le container (`.ls-match-row-inline` porte lui-meme container-name: ls-match-row-inline). La regle ne s'appliquerait qu'aux enfants, pas au wrapper — ce qui empeche l'unlock de la hauteur. Le viewport suffit ici : le widget est full-width sur la home, viewport ~= largeur du widget. */ @media (max-width: 500px) { /* HAUTEUR : la row parent est bloquee a 40px par 4 inline styles React : min-height: var(--ls-match-row-height, 36px) -> resout a 40px height: var(--ls-match-row-height, auto) -> resout a 40px overflow: hidden -> clippe le 2e team padding: var(...5px 10px) -> resout a 3px 14px Mesure DevTools : la fixture veut 53px internes (grid-rows 43.99 + 9.12) mais est clippee visuellement a 40px, d'ou la 2e equipe cachee. Les 5 !important ci-dessous liberent la row d'un coup. */ .ls-match-row-inline { height: auto !important; min-height: 64px !important; overflow: visible !important; padding-block: 8px !important; align-items: stretch !important; } /* FIXTURE : grille 2 colonnes x 2 lignes. - Col 1 : team (home ligne 1, away ligne 2) - Col 2 : score (une case couvrant les 2 lignes ; on reshape son contenu en 2 lignes verticales pour aligner score home <-> team home, etc.) */ .ls-match-row-inline__fixture { grid-template-columns: minmax(0, 1fr) auto !important; grid-template-rows: auto auto !important; grid-template-areas: "home score" "away score" !important; row-gap: 2px !important; column-gap: 8px !important; align-items: stretch !important; } .ls-match-row-inline__team--home { grid-area: home; } .ls-match-row-inline__team--away { grid-area: away; } /* TEAMS : les DEUX equipes ont le meme rendu logo+nom, aligne a gauche. Le JS pose justifyContent:flex-end sur home (miroir desktop). On force flex-start des deux cotes. */ .ls-match-row-inline__team--home, .ls-match-row-inline__team--away { justify-content: flex-start !important; overflow: hidden; min-width: 0; align-self: center !important; } /* HOME : DOM reel [.truncate (nom), .ls-match-row__logo (logo)] verifie via DevTools. Le nombre d'enfants varie (2 sans cards, 3 avec cards). On cible par CLASSE (stable et semantique) au lieu de nth-child pour couvrir tous les cas. Ordre visuel force pour LES DEUX equipes : 1 = logo, 2 = nom, 3 = tout le reste (cards, arrows, badges). Cette regle harmonise home et away, garantit logo-first des deux cotes, et resiste aux ajouts d'elements futurs par SoccersAPI. Note : `order` reordonne visuellement, le DOM source reste intact pour l'accessibilite (screen reader lit toujours dans l'ordre logique). */ .ls-match-row-inline__team--home > *, .ls-match-row-inline__team--away > * { order: 3 !important; /* fallback : cards / arrows / badges en dernier */ } .ls-match-row-inline__team--home > .ls-match-row__logo, .ls-match-row-inline__team--away > .ls-match-row__logo { order: 1 !important; /* logo TOUJOURS en premier */ } .ls-match-row-inline__team--home > .truncate, .ls-match-row-inline__team--away > .truncate { order: 2 !important; /* nom TOUJOURS apres le logo */ } /* Force le nom (span truncate interne) a s'aligner a gauche. Le widget lui donne parfois `text-align: right` en mode desktop mirror ; on annule. */ .ls-match-row-inline__team--home .truncate, .ls-match-row-inline__team--away .truncate { text-align: left !important; } /* SCORE : la cellule couvre les 2 lignes (grid-area:score sur 2 rows). - Le wrapper `.ls-match-row-inline__score` prend toute la hauteur - Son enfant direct (le div rendu par mL, contenant home/separator/away) devient une grille 1col x 2rows pour distribuer home en haut, away en bas - Le separateur (span central) est masque */ .ls-match-row-inline__score { grid-area: score; align-self: stretch !important; min-width: 0 !important; padding-inline: 4px !important; display: flex !important; align-items: stretch !important; justify-content: flex-end !important; } /* mL rend un
avec 2 ou 3 spans. On le transforme en grille 2-lignes pour aligner sur la fixture. */ .ls-match-row-inline__score > div { display: grid !important; grid-template-columns: auto !important; grid-template-rows: 1fr 1fr !important; gap: 0 !important; height: 100%; align-items: center !important; justify-items: end !important; background: transparent !important; border: 0 !important; } /* Home score = premier span (structure stable dans TOUS les variants mL) */ .ls-match-row-inline__score > div > span:first-child { grid-row: 1 !important; align-self: center !important; min-width: 0 !important; } /* Away score = dernier span (dernier meme si variant grouped a 2 spans) */ .ls-match-row-inline__score > div > span:last-child { grid-row: 2 !important; align-self: center !important; min-width: 0 !important; } /* Separateur eventuel (":" ou "-") entre home et away : masque */ .ls-match-row-inline__score > div > span:not(:first-child):not(:last-child) { display: none !important; } /* Cas match non commence : mL retourne UN SEUL "--" sans div wrapper. On le centre verticalement dans la cellule score. */ .ls-match-row-inline__score > span { align-self: center !important; } /* Colonne odds : masquee sous 500px pour ne pas voler la place aux teams (deja masquee sous 360px par le widget lui-meme, on remonte le seuil). */ .ls-match-row-inline__odds { display: none !important; } } /* ============================================================================= * PART 4 — SAFE / RISKY / DO NOT OVERRIDE (memo) * ----------------------------------------------------------------------------- * SAFE : * - Toutes les --ls-* couleurs / tailles / paddings / radii / shadows. * - Toggle du sticky : --ls-toolbar-sticky-top, --ls-league-row-sticky-top. * - font-family, font-scale. * * RISKY : * - Overrides via classes .ls-*__element (BEM) : stables mais renommables. * - Layout flex du toolbar (PART 3) : depend de la structure DOM courante. * - Sticky behavior (position, top) : depend de l'ancrage scroll SoccersAPI. * * DO NOT OVERRIDE : * - Ne pas cibler les enfants profonds avec > > > (structure DOM interne * susceptible de changer d'un release a l'autre). * - Ne pas surcharger le comportement JavaScript (evenements, filtres). * - Ne pas retirer les elements sponsors / affiliates si presents dans le * plan (risque de violation TOS SoccersAPI Pro). * - Ne pas scraper le DOM pour recuperer les data (le widget doit rester la * seule source d'affichage). * ============================================================================ */