/* ========================================================================== NODE-CREATOR — Poignée « + » au survol d'un nœud de l'aperçu, et panneau de création du nœud lié. Les deux éléments sont en `position: fixed` dans (cf. js/node-creator.js), au-dessus du styler-panel (z-index 200) mais sous le shape-picker (250) que le panneau ouvre lui-même. ========================================================================== */ :root { --nc-handle-size: 26px; } /* ── Poignée « + » ───────────────────────────────────────────────────── */ .nc-handle { position: fixed; z-index: 210; width: var(--nc-handle-size); height: var(--nc-handle-size); padding: 0; border: 1px solid var(--accent); border-radius: 50%; background: var(--surface); color: var(--accent); font-size: var(--fs-xs); line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-md); transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast); animation: ncHandlePop 140ms cubic-bezier(0.16, 1, 0.3, 1); } .nc-handle:hover { background: var(--accent); color: var(--text-inverse); transform: scale(1.12); } .nc-handle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } @keyframes ncHandlePop { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: scale(1); } } /* Cible tactile confortable sans grossir la pastille elle-même. */ @media (pointer: coarse) { .nc-handle { --nc-handle-size: 32px; font-size: var(--fs-sm); } } /* ── Panneau de création ─────────────────────────────────────────────── */ .nc-panel { position: fixed; z-index: 220; width: 320px; max-width: calc(100vw - 16px); background: var(--surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; animation: ncPanelPop 180ms cubic-bezier(0.16, 1, 0.3, 1); } @keyframes ncPanelPop { from { opacity: 0; transform: translateY(-6px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } } .nc-header { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); background: var(--bg-tertiary); border-bottom: 1px solid var(--border-subtle); } .nc-title { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); font-weight: 600; color: var(--text-primary); } .nc-title i { color: var(--accent); } .nc-title code { font-family: var(--font-mono); font-size: 0.85em; background: var(--surface); padding: 2px 6px; border-radius: var(--radius-sm); border: 1px solid var(--border-subtle); color: var(--accent); } .nc-close { width: 28px; height: 28px; flex-shrink: 0; border: none; background: transparent; color: var(--text-tertiary); border-radius: var(--radius-sm); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all var(--t-fast); } .nc-close:hover { background: var(--surface-hover); color: var(--text-primary); } .nc-body { padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3); } .nc-row { display: grid; grid-template-columns: 76px 1fr; align-items: center; gap: var(--sp-3); } .nc-row > label { font-size: var(--fs-sm); color: var(--text-secondary); font-weight: 500; } .nc-input { width: 100%; height: 32px; border: 1px solid var(--border-default); border-radius: var(--radius-sm); padding: 0 var(--sp-2); background: var(--surface); color: var(--text-primary); font-family: var(--font-sans); font-size: var(--fs-sm); } .nc-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } /* Groupes segmentés — même grammaire visuelle que `.styler-seg`, mais des options plus larges (deux lignes de texte pour le sens du lien). */ .nc-seg { display: flex; gap: var(--sp-2); flex-wrap: wrap; } .nc-seg-opt { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 5px 4px; background: var(--surface); border: 1px solid var(--border-default); border-radius: var(--radius-sm); cursor: pointer; color: var(--text-secondary); font-size: 0.7rem; font-family: var(--font-sans); transition: all var(--t-fast); } .nc-seg-opt:hover { background: var(--surface-hover); color: var(--text-primary); border-color: var(--accent); } .nc-seg-opt.is-active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); } .nc-seg-opt span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Le sens du lien mérite une formulation complète : on la laisse passer à la ligne plutôt que de la tronquer en « Depuis le nouv… ». */ #nc-dir-row .nc-seg-opt span { white-space: normal; text-align: center; line-height: 1.15; } .nc-seg-link .nc-seg-opt code { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: -0.02em; } /* Aperçu de la ligne Mermaid produite — le contrat visible du formulaire. */ .nc-preview { margin: 0; padding: var(--sp-2) var(--sp-3); background: var(--bg-tertiary); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); font-size: var(--fs-xs); color: var(--text-tertiary); } .nc-preview-label { display: block; margin-bottom: 2px; } .nc-preview code { display: block; font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-primary); white-space: pre-wrap; word-break: break-word; } .nc-footer { padding: var(--sp-3) var(--sp-4); background: var(--bg-tertiary); border-top: 1px solid var(--border-subtle); display: flex; justify-content: flex-end; gap: var(--sp-2); } .nc-footer .btn { padding: var(--sp-2) var(--sp-3); } /* ── Relais depuis le styler (chemin tactile) ────────────────────────── */ .styler-add-node { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); width: 100%; min-height: 30px; padding: 4px var(--sp-2); border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); background: transparent; color: var(--text-secondary); font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: 500; cursor: pointer; transition: all var(--t-fast); } .styler-add-node:hover { border-color: var(--accent); border-style: solid; background: var(--accent-soft); color: var(--accent); } .styler-add-node i { font-size: 0.9em; } /* La création d'un nœud lié n'a de sens que depuis un nœud ou un sous-graphe de flowchart — jamais depuis un lien, ni dans un autre type de diagramme (l'attribut `hidden` est posé par Styler.open). `.styler-row` impose `display: grid`, d'où la règle explicite. */ .styler-panel[data-mode="link"] #styler-add-row, #styler-add-row[hidden] { display: none; } @media (max-width: 480px) { .nc-panel { width: calc(100vw - 16px); } .nc-row { grid-template-columns: 68px 1fr; } }