IETM_FIXE\ietm6
f24ef0891e
Correction de plusieurs anomalies : problème de switch entre 2 templates (par exemple si on était sur un template 1 et qu'on voulait passer directement au 2, ce dernier ne chargeait pas) ; correction du soucis d'apparition de la sidebar à gauche qui disparaissait sans explication ; problème de redirection : lorsqu'on terminait de créer un PJ / PNJ ; on arrivait sur l'accueil de la campagne au lieu de voir le résultat de la création. Problème de redirection également lors du clique sur un PNJ / PJ sur le coté : on arrivait sur l'édition au lieu de la présentation. Correction de la première lettre stylisée : tout est au même style comme ça plus de probleme de lecture. Nouveautées : stylisation des modales (notamment suppression, warning.....) avec en prime l'ajout d'un warning lors du changement de système pour avertir que les fiches persos ne sont pas conservées. Ajout d'une option pour créer un game system directement à la création d'une campagne afin de faciliter la mise en place de cette dernière. Ajout d'un bouton pour créer un nouveau template directement lorsqu'on créer une page : ça permet de créer un template et de revenir sur la page qu'on était en train de créer sans perdre le titre. Passage en bêta 0.8.4
329 lines
6.2 KiB
SCSS
329 lines
6.2 KiB
SCSS
// Vue WorldAnvil-style : bandeau, portrait latteral, sections elegantes, drop cap.
|
|
|
|
.pv {
|
|
max-width: 1100px;
|
|
margin: 0 auto;
|
|
color: #e5e7eb;
|
|
}
|
|
|
|
// --- Bandeau ----------------------------------------------------------------
|
|
|
|
.pv-banner {
|
|
position: relative;
|
|
height: 280px;
|
|
overflow: hidden;
|
|
border-radius: 8px 8px 0 0;
|
|
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
.pv-banner-fade {
|
|
position: absolute;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
background: linear-gradient(
|
|
to bottom,
|
|
transparent 60%,
|
|
rgba(15, 17, 23, 0.85) 100%
|
|
);
|
|
}
|
|
|
|
// --- Hero (portrait + titre) ------------------------------------------------
|
|
|
|
.pv-hero {
|
|
display: grid;
|
|
grid-template-columns: 220px 1fr;
|
|
gap: 28px;
|
|
padding: 20px 32px;
|
|
margin-top: -90px;
|
|
position: relative;
|
|
z-index: 1;
|
|
|
|
&.no-banner {
|
|
margin-top: 0;
|
|
padding-top: 32px;
|
|
}
|
|
}
|
|
|
|
.pv-portrait {
|
|
width: 220px;
|
|
height: 220px;
|
|
border-radius: 6px;
|
|
overflow: hidden;
|
|
border: 3px solid rgba(255, 255, 255, 0.15);
|
|
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
|
|
background: #1a1d24;
|
|
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
.pv-title-block {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-end;
|
|
padding-bottom: 8px;
|
|
}
|
|
|
|
.pv-name {
|
|
font-family: 'Cinzel', 'EB Garamond', Georgia, serif;
|
|
font-size: 3rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.04em;
|
|
margin: 0;
|
|
color: #f3f4f6;
|
|
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
|
|
}
|
|
|
|
.pv-subtitle {
|
|
margin: 8px 0 0;
|
|
font-size: 1.05rem;
|
|
font-style: italic;
|
|
color: #b5b9c4;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
// Badges compacts pour les NUMBER isoles (Niveau, etc.) — evite la grosse card.
|
|
.pv-hero-badges {
|
|
margin-top: 12px;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
}
|
|
|
|
.pv-hero-badge {
|
|
display: inline-flex;
|
|
align-items: baseline;
|
|
gap: 6px;
|
|
padding: 4px 12px;
|
|
background: rgba(209, 168, 120, 0.08);
|
|
border: 1px solid rgba(209, 168, 120, 0.3);
|
|
border-radius: 100px;
|
|
|
|
.pv-hero-badge-label {
|
|
font-size: 0.7rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.1em;
|
|
color: #9ca3af;
|
|
}
|
|
.pv-hero-badge-value {
|
|
font-family: 'Cinzel', 'EB Garamond', Georgia, serif;
|
|
font-weight: 700;
|
|
font-size: 1.05rem;
|
|
color: #d1a878;
|
|
}
|
|
}
|
|
|
|
// --- Table compacte (NUMBER_GROUP / KEY_VALUE_LIST) ------------------------
|
|
// Style Foundry : 2 rangees (labels uppercase / valeurs serif), separateurs
|
|
// fins, sans gros ornements. --cols est la variable CSS pour le nombre
|
|
// d'entrees, posee inline dans le HTML.
|
|
|
|
.pv-kv-table {
|
|
display: flex;
|
|
flex-direction: column;
|
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
background: rgba(0, 0, 0, 0.18);
|
|
}
|
|
|
|
.pv-kv-row {
|
|
display: grid;
|
|
grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
|
|
}
|
|
|
|
.pv-kv-row-labels {
|
|
background: rgba(255, 255, 255, 0.03);
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
|
|
|
.pv-kv-cell {
|
|
font-size: 0.7rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.1em;
|
|
color: #9ca3af;
|
|
padding: 6px 4px;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
.pv-kv-row-values {
|
|
.pv-kv-cell {
|
|
font-family: 'Cinzel', 'EB Garamond', Georgia, serif;
|
|
font-size: 1.15rem;
|
|
font-weight: 700;
|
|
color: #d1a878;
|
|
padding: 8px 4px;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
.pv-kv-cell {
|
|
border-right: 1px solid rgba(255, 255, 255, 0.04);
|
|
|
|
&:last-child {
|
|
border-right: none;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 600px) {
|
|
// Sur mobile : si plus de 4 colonnes, on retombe en wrap (sacrifice de la
|
|
// structure tableau pour eviter le scroll horizontal sur les stats blocks).
|
|
.pv-kv-row {
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
}
|
|
}
|
|
|
|
// --- Liste 2 colonnes (KV avec >6 entrees, type "skills" Foundry) ---------
|
|
|
|
.pv-kv-list {
|
|
column-count: 2;
|
|
column-gap: 32px;
|
|
padding: 8px 12px;
|
|
background: rgba(0, 0, 0, 0.18);
|
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.pv-kv-list-row {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 6px;
|
|
padding: 4px 0;
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
|
|
break-inside: avoid; // empeche un row de se couper entre 2 colonnes
|
|
|
|
&:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.pv-kv-list-label {
|
|
font-size: 0.85rem;
|
|
color: #d6d8de;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
// Pointilles entre label et valeur (style fiche papier)
|
|
.pv-kv-list-dots {
|
|
flex: 1;
|
|
border-bottom: 1px dotted rgba(255, 255, 255, 0.12);
|
|
transform: translateY(-3px);
|
|
}
|
|
|
|
.pv-kv-list-value {
|
|
font-family: 'Cinzel', 'EB Garamond', Georgia, serif;
|
|
font-weight: 700;
|
|
font-size: 1rem;
|
|
color: #d1a878;
|
|
flex-shrink: 0;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 600px) {
|
|
.pv-kv-list {
|
|
column-count: 1;
|
|
}
|
|
}
|
|
|
|
// --- Sections ---------------------------------------------------------------
|
|
|
|
.pv-sections {
|
|
padding: 32px 32px 48px;
|
|
}
|
|
|
|
.pv-section {
|
|
margin-bottom: 36px;
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.pv-section-kv,
|
|
.pv-section-number {
|
|
.pv-kv-table {
|
|
margin-top: 8px;
|
|
}
|
|
}
|
|
|
|
.pv-section-title {
|
|
font-family: 'Cinzel', 'EB Garamond', Georgia, serif;
|
|
font-size: 1.4rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.06em;
|
|
text-transform: uppercase;
|
|
color: #d1a878;
|
|
margin: 0 0 12px;
|
|
padding-bottom: 8px;
|
|
border-bottom: 1px solid rgba(209, 168, 120, 0.25);
|
|
position: relative;
|
|
|
|
// Petit ornement central
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: -3px;
|
|
width: 6px;
|
|
height: 6px;
|
|
background: #d1a878;
|
|
border-radius: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
}
|
|
|
|
.pv-section-body {
|
|
font-size: 1rem;
|
|
line-height: 1.65;
|
|
color: #d6d8de;
|
|
}
|
|
|
|
.pv-paragraph {
|
|
margin: 0 0 14px;
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
// --- Etat vide --------------------------------------------------------------
|
|
|
|
.pv-empty {
|
|
text-align: center;
|
|
padding: 64px 24px;
|
|
color: #6b7280;
|
|
font-style: italic;
|
|
|
|
p {
|
|
margin: 12px 0 0;
|
|
}
|
|
}
|
|
|
|
// --- Responsive -------------------------------------------------------------
|
|
|
|
@media (max-width: 720px) {
|
|
.pv-hero {
|
|
grid-template-columns: 1fr;
|
|
margin-top: -60px;
|
|
}
|
|
|
|
.pv-portrait {
|
|
width: 160px;
|
|
height: 160px;
|
|
}
|
|
|
|
.pv-name {
|
|
font-size: 2.2rem;
|
|
}
|
|
|
|
.pv-banner {
|
|
height: 180px;
|
|
}
|
|
}
|