IETM_FIXE\ietm6
e3fc96a1bc
- 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).
347 lines
7.2 KiB
SCSS
347 lines
7.2 KiB
SCSS
.session-detail {
|
|
padding: 2.5rem 2rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1.5rem;
|
|
max-width: 1500px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
// ─────────────── Layout mode jeu (2 colonnes) ───────────────
|
|
.play-grid {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) 360px;
|
|
gap: 1.5rem;
|
|
align-items: start;
|
|
}
|
|
|
|
.play-main {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1.5rem;
|
|
min-width: 0;
|
|
}
|
|
|
|
/*
|
|
* Panneau latéral sticky pour garder dés + références visibles pendant
|
|
* que le MJ scroll dans le journal. Hauteur = viewport - padding pour ne
|
|
* pas déborder ; le panneau gère son propre scroll interne (.ref-content).
|
|
*/
|
|
.play-aside {
|
|
position: sticky;
|
|
top: 1rem;
|
|
height: calc(100vh - 3rem);
|
|
min-height: 0;
|
|
}
|
|
|
|
@media (max-width: 1024px) {
|
|
.play-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.play-aside {
|
|
position: static;
|
|
height: auto;
|
|
}
|
|
}
|
|
|
|
.back-link {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.35rem;
|
|
color: #9ca3af;
|
|
font-size: 0.85rem;
|
|
text-decoration: none;
|
|
width: fit-content;
|
|
|
|
&:hover { color: #e5e7eb; }
|
|
}
|
|
|
|
// ─────────────── Header ───────────────
|
|
.detail-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
gap: 1.5rem;
|
|
flex-wrap: wrap;
|
|
|
|
.header-texts { flex: 1; min-width: 0; }
|
|
|
|
h1 {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
font-size: 1.75rem;
|
|
font-weight: 700;
|
|
color: white;
|
|
margin: 0;
|
|
}
|
|
|
|
.title-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
margin-bottom: 0.75rem;
|
|
|
|
&.edit-mode input {
|
|
background: #0d1117;
|
|
border: 1px solid #374151;
|
|
color: white;
|
|
font-size: 1.25rem;
|
|
font-weight: 700;
|
|
padding: 0.4rem 0.75rem;
|
|
border-radius: 6px;
|
|
min-width: 280px;
|
|
}
|
|
}
|
|
|
|
.meta {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.5rem;
|
|
align-items: center;
|
|
}
|
|
|
|
.badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.35rem;
|
|
background: #1f2937;
|
|
color: #9ca3af;
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
padding: 0.25rem 0.75rem;
|
|
border-radius: 999px;
|
|
}
|
|
|
|
.badge-active { background: #064e3b; color: #6ee7b7; }
|
|
.badge-muted { background: #1f2937; color: #9ca3af; }
|
|
}
|
|
|
|
.header-actions {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
// ─────────────── Boutons ───────────────
|
|
.btn-primary,
|
|
.btn-secondary,
|
|
.btn-danger {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.35rem;
|
|
border: none;
|
|
padding: 0.55rem 1rem;
|
|
border-radius: 6px;
|
|
font-size: 0.85rem;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: background 0.15s ease;
|
|
|
|
&:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
}
|
|
|
|
.btn-primary { background: #6c63ff; color: white; &:hover:not(:disabled) { background: #5b52e0; } }
|
|
.btn-secondary{ background: #374151; color: #e5e7eb; &:hover:not(:disabled) { background: #4b5563; } }
|
|
.btn-danger { background: #7f1d1d; color: #fecaca; &:hover:not(:disabled) { background: #991b1b; } }
|
|
|
|
.btn-sm { padding: 0.35rem 0.65rem; font-size: 0.75rem; }
|
|
|
|
.btn-icon {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.25rem;
|
|
background: transparent;
|
|
border: 1px solid #374151;
|
|
color: #9ca3af;
|
|
padding: 0.3rem 0.45rem;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
font-size: 0.75rem;
|
|
transition: background 0.15s ease, color 0.15s ease;
|
|
|
|
&:hover:not(:disabled) { background: #1f2937; color: #e5e7eb; }
|
|
&:disabled { opacity: 0.5; cursor: not-allowed; }
|
|
|
|
&--danger:hover:not(:disabled) { background: #7f1d1d; color: #fecaca; border-color: #7f1d1d; }
|
|
}
|
|
|
|
// ─────────────── Sections / cards ───────────────
|
|
.detail-section {
|
|
background: #0d1117;
|
|
border: 1px solid #1f2937;
|
|
border-radius: 12px;
|
|
padding: 1.5rem 1.75rem;
|
|
}
|
|
|
|
.timeline-section h2 {
|
|
margin: 0 0 1.25rem 0;
|
|
font-size: 1.1rem;
|
|
color: #e5e7eb;
|
|
}
|
|
|
|
.empty-state {
|
|
text-align: center;
|
|
padding: 1.5rem 0;
|
|
color: #6b7280;
|
|
|
|
p { margin: 0.25rem 0; }
|
|
.hint { font-size: 0.8rem; font-style: italic; }
|
|
}
|
|
|
|
// ─────────────── Form "Ajouter une entrée" ───────────────
|
|
.add-entry-section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.type-selector {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.4rem;
|
|
|
|
&--compact { margin-bottom: 0.5rem; }
|
|
}
|
|
|
|
/*
|
|
* Variable CSS --type-color injectée par le template depuis ENTRY_TYPE_META.
|
|
* Permet à chaque puce d'avoir sa propre teinte sans dupliquer la règle.
|
|
*/
|
|
.type-chip {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.35rem;
|
|
background: transparent;
|
|
border: 1px solid #374151;
|
|
color: #9ca3af;
|
|
padding: 0.35rem 0.75rem;
|
|
border-radius: 999px;
|
|
font-size: 0.78rem;
|
|
cursor: pointer;
|
|
transition: border-color 0.15s, color 0.15s, background 0.15s;
|
|
|
|
&:hover { border-color: var(--type-color, #6c63ff); color: #e5e7eb; }
|
|
|
|
&--active {
|
|
background: color-mix(in srgb, var(--type-color, #6c63ff) 18%, transparent);
|
|
border-color: var(--type-color, #6c63ff);
|
|
color: var(--type-color, #6c63ff);
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
|
|
.entry-input {
|
|
width: 100%;
|
|
background: #111827;
|
|
border: 1px solid #1f2937;
|
|
color: #e5e7eb;
|
|
font-family: inherit;
|
|
font-size: 0.9rem;
|
|
padding: 0.65rem 0.85rem;
|
|
border-radius: 8px;
|
|
resize: vertical;
|
|
min-height: 70px;
|
|
|
|
&:focus { outline: none; border-color: #6c63ff; }
|
|
}
|
|
|
|
.entry-input-footer {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
|
|
.hint { color: #6b7280; font-size: 0.75rem; }
|
|
}
|
|
|
|
// ─────────────── Timeline ───────────────
|
|
.timeline {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
position: relative;
|
|
|
|
// Ligne verticale qui relie les markers
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 14px;
|
|
top: 8px;
|
|
bottom: 8px;
|
|
width: 2px;
|
|
background: #1f2937;
|
|
}
|
|
}
|
|
|
|
.timeline-entry {
|
|
display: grid;
|
|
grid-template-columns: 30px 1fr;
|
|
gap: 0.85rem;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.entry-marker {
|
|
width: 30px;
|
|
height: 30px;
|
|
border-radius: 50%;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: #0d1117;
|
|
border: 2px solid var(--type-color, #6c63ff);
|
|
color: var(--type-color, #6c63ff);
|
|
flex-shrink: 0;
|
|
z-index: 1;
|
|
}
|
|
|
|
.entry-body {
|
|
background: #111827;
|
|
border: 1px solid #1f2937;
|
|
border-radius: 10px;
|
|
padding: 0.75rem 1rem;
|
|
min-width: 0;
|
|
}
|
|
|
|
.entry-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.6rem;
|
|
margin-bottom: 0.4rem;
|
|
|
|
.entry-type {
|
|
color: var(--type-color, #6c63ff);
|
|
font-size: 0.75rem;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.4px;
|
|
}
|
|
|
|
.entry-time {
|
|
color: #6b7280;
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
.entry-actions {
|
|
margin-left: auto;
|
|
display: flex;
|
|
gap: 0.3rem;
|
|
}
|
|
}
|
|
|
|
.entry-content {
|
|
color: #e5e7eb;
|
|
font-size: 0.9rem;
|
|
line-height: 1.5;
|
|
white-space: pre-wrap;
|
|
word-break: break-word;
|
|
margin: 0;
|
|
}
|