IETM_FIXE\ietm6
550078268c
- Ajout d'icônes dans la scène, chapitre et arc - Possibilité de bouger les cases dans la partie graphe et les textes associés si ces derniers ne sont pas visibles - Changement sur le thème du graphe : mode sombre et plus blanc - Barre d'action en haut, même pour la partie scène - Mode sticky corrigé : plus de trou entre le haut du navigateur web et de la barre d'action Passage version 0.6.5
118 lines
2.6 KiB
SCSS
118 lines
2.6 KiB
SCSS
.graph-page {
|
|
padding: 2.5rem 2rem;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.page-header {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
gap: 1rem;
|
|
margin-bottom: 2rem;
|
|
|
|
.subtitle {
|
|
color: #9ca3af;
|
|
font-size: 0.9rem;
|
|
margin: 0.25rem 0 0;
|
|
}
|
|
}
|
|
|
|
.graph-empty {
|
|
padding: 2rem;
|
|
text-align: center;
|
|
color: #9ca3af;
|
|
background: #14141f;
|
|
border-radius: 8px;
|
|
border: 1px dashed #374151;
|
|
}
|
|
|
|
.graph-container {
|
|
// Fond legerement plus sombre que la couleur des noeuds : creuse l'image
|
|
// sans aller jusqu'au noir pur (qui « brulerait » par contraste).
|
|
background: #0d0d18;
|
|
border: 1px solid #374151;
|
|
border-radius: 12px;
|
|
padding: 20px;
|
|
overflow: auto;
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.graph-svg {
|
|
display: block;
|
|
max-width: 100%;
|
|
// Empeche le browser de clipper le contenu qui depasserait le viewport SVG
|
|
// pendant un drag — le scroll du conteneur prend le relais.
|
|
overflow: visible;
|
|
// Évite que le navigateur intercepte le drag pour faire de la sélection texte
|
|
// ou du panning natif sur les nœuds.
|
|
touch-action: none;
|
|
user-select: none;
|
|
}
|
|
|
|
.node {
|
|
cursor: grab;
|
|
// Ombre portee douce pour detacher chaque noeud du fond. Faible alpha pour
|
|
// rester subtil sur fond sombre, large diffusion pour rester organique.
|
|
filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
|
|
|
|
.node-box {
|
|
// Indigo desature : reprend la palette accent (#6c63ff) en version assombrie
|
|
// pour donner du caractere aux noeuds sans saturer la vue. Bordure assortie
|
|
// un peu plus claire pour bien dessiner le contour.
|
|
fill: #1f1d3a;
|
|
stroke: #4f4a7a;
|
|
stroke-width: 2;
|
|
transition: fill 0.15s ease, stroke 0.15s ease;
|
|
}
|
|
|
|
.node-label {
|
|
font-size: 0.9rem;
|
|
font-weight: 500;
|
|
fill: #f3f4f6;
|
|
pointer-events: none;
|
|
}
|
|
|
|
&:hover .node-box {
|
|
fill: #2c2952;
|
|
stroke: #8b80ff;
|
|
}
|
|
|
|
&.dragging {
|
|
cursor: grabbing;
|
|
.node-box {
|
|
fill: #2c2952;
|
|
stroke: #8b80ff;
|
|
filter: drop-shadow(0 4px 10px rgba(108, 99, 255, 0.35));
|
|
}
|
|
}
|
|
}
|
|
|
|
.edge-label {
|
|
font-size: 0.75rem;
|
|
fill: #e5e7eb;
|
|
font-style: italic;
|
|
cursor: grab;
|
|
// Halo sombre autour du texte pour rester lisible quand un label passe
|
|
// par-dessus une arête ou un autre nœud. Aligne sur la couleur du fond.
|
|
paint-order: stroke;
|
|
stroke: #0d0d18;
|
|
stroke-width: 4px;
|
|
stroke-linejoin: round;
|
|
|
|
&:hover { fill: #ffffff; }
|
|
&.dragging {
|
|
cursor: grabbing;
|
|
fill: #ffffff;
|
|
}
|
|
}
|
|
|
|
.graph-hint {
|
|
display: block;
|
|
margin-top: 1rem;
|
|
color: #9ca3af;
|
|
font-size: 0.85rem;
|
|
}
|