/* Badge « nombre de commentaires » posé sur une bulle de commentaire, et mise en forme du détail affiché au survol (info-bulle). Composant de socle : aucune règle métier ici. Contrat avec le serveur (TeoGest.Core.Helpers.InfoBulleCommentairesHelper) : - classe .tg-bulle-cpt sur l'ancre qui porte la bulle ; - attribut data-nb-commentaires portant le nombre, émis UNIQUEMENT s'il est > 0 (pas d'attribut = pas de badge, la bulle reste vide) ; - original-title portant le markup .tg-cmt-detail (info-bulle BS5 déléguée, html:true). */ :root { --tg-bulle-cpt-taille: 15px; } .tg-bulle-cpt { /* Contexte de positionnement du badge. inline-flex : l'ancre se colle à l'icône, sans l'interligne d'un inline classique, sinon le badge flotte trop haut. */ position: relative; display: inline-flex; } /* Le badge est un pseudo-élément : aucun markup ajouté aux sites appelants, et il disparaît de lui-même quand le serveur cesse d'émettre l'attribut. NB : on cible .tg-bulle-cpt (l'ancre) et jamais [data-lucide] — lucide-init.js retire cet attribut des rendus, une règle qui s'en sert deviendrait morte. */ .tg-bulle-cpt[data-nb-commentaires]::after { content: attr(data-nb-commentaires); position: absolute; top: -5px; right: -7px; min-width: var(--tg-bulle-cpt-taille); height: var(--tg-bulle-cpt-taille); padding: 0 3px; box-sizing: border-box; border-radius: calc(var(--tg-bulle-cpt-taille) / 2); /* Pastille CLAIRE cernée de foncé, et non pleine couleur : la bulle qu'elle surmonte est elle-même bleue (--bs-info) dès qu'il y a des commentaires, un badge bleu s'y fondrait. Rôles du thème et non des hex, pour rester lisible sur les deux fonds. */ background: var(--bs-body-bg); color: var(--bs-body-color); border: 1px solid var(--bs-body-color); font-size: 9px; font-weight: 700; /* line-height compensée des 2 px de bordure, sinon le chiffre n'est pas centré verticalement. */ line-height: calc(var(--tg-bulle-cpt-taille) - 2px); text-align: center; /* Le badge chevauche la bulle : sans ceci il volerait le clic destiné à l'ancre. */ pointer-events: none; } /* ---- Détail au survol (contenu de l'original-title, rendu dans par BS5) ---- */ .tooltip.tg-info-tooltip:has(.tg-cmt-detail) { /* Le thème plafonne --bs-tooltip-max-width à 360px ; le détail est étroit mais ses libellés ne doivent pas se couper au milieu d'un mot. */ --bs-tooltip-max-width: 260px; } .tg-cmt-detail { text-align: left; } .tg-cmt-detail-titre { font-weight: 600; margin-bottom: .25rem; } .tg-cmt-detail-liste { display: grid; grid-template-columns: 1fr auto; gap: 0 .75rem; margin: 0; } .tg-cmt-detail-liste dt { font-weight: 400; white-space: nowrap; } .tg-cmt-detail-liste dd { margin: 0; font-weight: 600; text-align: right; } .tg-cmt-detail-dont { margin-top: .35rem; padding-top: .35rem; border-top: 1px solid rgba(255, 255, 255, .25); font-style: italic; opacity: .85; } .tg-cmt-detail-note { margin-top: .35rem; font-size: .75em; opacity: .75; }