IETM_FIXE\ietm6
694f687fec
All checks were successful
- Possibilité de parler à une IA pour règle de jeu ou élément de lore / campagne au cours d'une partie comme aide mémoire - Onglet dédié aux personnages de la campagne - Onglet dédié aux scènes - Onglet avec dès pour ceux qui souhaitent ; Possibilité de rajouté une note en tant qu'évènement, jet de dès ou encore action du joueur par exemple. D'autres ajouts seront fait dans le futur (notamment des tables aléatoires pour PNJ en live).
144 lines
2.7 KiB
SCSS
144 lines
2.7 KiB
SCSS
.reference-panel {
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: #0d1117;
|
|
border: 1px solid #1f2937;
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
height: 100%;
|
|
min-height: 0;
|
|
}
|
|
|
|
// ─────────────── Tabs ───────────────
|
|
.ref-tabs {
|
|
display: flex;
|
|
background: #111827;
|
|
border-bottom: 1px solid #1f2937;
|
|
}
|
|
|
|
.ref-tab {
|
|
flex: 1;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.35rem;
|
|
background: transparent;
|
|
color: #9ca3af;
|
|
border: none;
|
|
padding: 0.7rem 0.5rem;
|
|
font-size: 0.8rem;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
border-bottom: 2px solid transparent;
|
|
transition: color 0.15s, border-color 0.15s, background 0.15s;
|
|
|
|
&:hover { color: #e5e7eb; background: rgba(108, 99, 255, 0.06); }
|
|
|
|
&--active {
|
|
color: #c4bdff;
|
|
border-bottom-color: #6c63ff;
|
|
background: rgba(108, 99, 255, 0.1);
|
|
}
|
|
}
|
|
|
|
.ref-content {
|
|
padding: 1rem;
|
|
overflow-y: auto;
|
|
flex: 1;
|
|
min-height: 0;
|
|
}
|
|
|
|
/*
|
|
* Onglet IA : on retire l'overflow du conteneur (le panneau de chat gère
|
|
* son propre scroll interne pour les messages) et on force display flex
|
|
* pour que l'enfant prenne toute la hauteur.
|
|
*/
|
|
.ref-content--fill {
|
|
display: flex;
|
|
overflow: hidden;
|
|
|
|
> app-session-ai-chat-panel {
|
|
flex: 1;
|
|
min-height: 0;
|
|
display: flex;
|
|
}
|
|
}
|
|
|
|
// ─────────────── Listes (PJ/PNJ/Scènes) ───────────────
|
|
.ref-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.ref-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.35rem;
|
|
|
|
h4 {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.4rem;
|
|
color: #9ca3af;
|
|
font-size: 0.72rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.4px;
|
|
margin: 0 0 0.25rem 0;
|
|
}
|
|
}
|
|
|
|
.ref-subgroup {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.2rem;
|
|
padding-left: 0.25rem;
|
|
margin-top: 0.35rem;
|
|
|
|
.ref-subgroup-title {
|
|
color: #6b7280;
|
|
font-size: 0.72rem;
|
|
margin-bottom: 0.15rem;
|
|
}
|
|
}
|
|
|
|
.ref-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
background: #111827;
|
|
border: 1px solid #1f2937;
|
|
color: #e5e7eb;
|
|
font-size: 0.82rem;
|
|
text-align: left;
|
|
padding: 0.45rem 0.65rem;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
transition: border-color 0.15s, background 0.15s;
|
|
|
|
&:hover { border-color: #6c63ff; background: #131c2e; }
|
|
|
|
&--nested { padding-left: 0.9rem; }
|
|
|
|
.ref-item-name {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.ref-item-icon {
|
|
color: #6b7280;
|
|
flex-shrink: 0;
|
|
}
|
|
}
|
|
|
|
.loading-hint,
|
|
.empty-hint {
|
|
color: #6b7280;
|
|
font-size: 0.8rem;
|
|
font-style: italic;
|
|
text-align: center;
|
|
margin: 0.5rem 0;
|
|
}
|