/* ========================= TABLEAUX : CELLULES FUSIONNÉES Posé par MergeTable.js par-dessus le greffon Table d'Editor.js. La feuille sert dans les deux pages : l'éditeur (fond clair) et le panneau de détails (fond sombre). ========================= */ /* EN LARGEUR Une ligne du greffon est une grille dont le nombre de colonnes suit le nombre de cases affichées. Une case absorbée doit donc sortir de la grille — `display: none` et pas `visibility`, sinon elle garderait sa piste et la ligne aurait une colonne de trop. Son contenu, lui, reste dans le DOM : séparer la fusion le fait réapparaître tel quel. */ .tc-cell--merged-away { display: none; } /* La case fusionnée porte le trait de droite pour tout ce qu'elle recouvre : sans cela, la ligne semblait s'arrêter à la largeur d'une seule colonne. Sélecteur doublé ici et plus bas : le greffon injecte sa feuille dans au chargement de son script, donc après ce fichier. À spécificité égale, c'est lui qui l'emporterait. */ .tc-cell.tc-cell--merged { border-right: 1px solid var(--color-border, #e8e8eb); } /* EN HAUTEUR Il n'existe pas de grille commune aux lignes : une case ne peut pas descendre dans la suivante. Un bloc haut est donc dessiné à l'envers — les cases du dessous gardent leur place (sinon leur ligne perdrait une colonne) mais s'effacent, et les traits horizontaux que le bloc franchit sont retirés. */ /* Sélecteur doublé, comme plus haut : c'est le greffon qui pose `overflow: hidden`, et sa feuille est injectée après celle-ci. Or le trait redessiné juste en dessous se place sur le bord, donc hors de la boîte, et se faisait rogner — la colonne s'ouvrait sur toute la hauteur du bloc. Cette case-ci n'a plus rien à retenir (son contenu est invisible), on peut donc lui rendre le débordement. */ .tc-cell.tc-cell--merged-under { visibility: hidden; position: relative; overflow: visible; } /* `visibility` emporte aussi les traits de la case. Celui de droite doit pourtant descendre le long du bloc : il est redessiné ici, et rendu visible à nouveau — la propriété s'hérite, donc elle se rétablit. */ .tc-cell--merged-under::after, .tc-row--merged-split > .tc-cell--merged-under::after { content: ""; visibility: visible; position: absolute; top: 0; bottom: 0; right: calc(-1 * var(--merge-line, 1px)); width: var(--merge-line, 1px); background: var(--color-border, #e8e8eb); } /* Le trait du bas appartient à la ligne entière : il traverserait le bloc de part en part. La ligne cesse donc de le peindre — `transparent` et non `none`, pour ne pas décaler la hauteur — et ses cases le peignent chacune pour soi. */ .tc-row.tc-row--merged-split { border-bottom-color: transparent; } /* En ombre intérieure, et pas autrement : - `border-bottom` rallongerait chaque case d'un pixel, et tout le tableau sauterait à la première fusion ; - un `::after` posé sur le bord, hors de la boîte, se fait rogner par le `overflow: hidden` du greffon — et là c'est le trait entier qui manquait, sur toute la largeur de la ligne. L'ombre, elle, se peint à l'intérieur : rien à rogner, rien à décaler. */ .tc-row--merged-split > .tc-cell { box-shadow: inset 0 calc(-1 * var(--merge-line, 1px)) 0 var(--color-border, #e8e8eb); } /* La case par où le bloc descend laisse le passage ouvert. C'est une classe à elle, et pas simplement « la case fusionnée » : une fusion en largeur posée sur la même ligne est un bloc d'une seule ligne, elle garde son trait du bas. */ .tc-row--merged-split > .tc-cell--merged-open { box-shadow: none; } /* ========================= BARRE DE FUSION (édition seulement) ========================= */ .table-merge-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .table-merge-btn { padding: 6px 12px; border: 1px solid var(--border-strong, rgba(148, 163, 184, 0.5)); border-radius: 999px; background: transparent; color: inherit; font-family: inherit; font-size: 13px; line-height: 1.2; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .table-merge-btn:hover:not(:disabled) { background: rgba(37, 99, 235, 0.12); border-color: #2563eb; } /* Désactivé plutôt que masqué : le bouton garde sa place, et son état dit pourquoi il ne se passe rien — dernière colonne à droite, ou case qui n'est pas une fusion. */ .table-merge-btn:disabled { opacity: 0.45; cursor: not-allowed; } .table-merge-hint { font-size: 12px; line-height: 1.45; opacity: 0.7; }