Files
fvtt-celestopol/styles/npc.less

302 lines
8.1 KiB
Plaintext
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
@import "mixins";
// ─── NPC sheet specifics ─────────────────────────────────────────────────────
.fvtt-celestopol.npc {
// ── Sélecteur type PNJ (en-tête) ────────────────────────────────────────
.npc-type-row {
margin: 3px 0;
.npc-type-select {
background: rgba(12,76,12,0.15);
border: 1px solid var(--cel-border);
color: var(--cel-orange);
border-radius: 3px;
padding: 2px 6px;
font-size: 0.85em;
}
.npc-type-badge {
font-family: var(--cel-font-title);
font-size: 0.8em;
letter-spacing: 0.05em;
text-transform: uppercase;
border-radius: 3px;
padding: 2px 8px;
&.antagoniste {
background: rgba(120, 30, 30, 0.25);
border: 1px solid rgba(200, 60, 60, 0.5);
color: #e06060;
}
}
}
// ── Grille 2×2 des domaines ──────────────────────────────────────────────
.npc-domains-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
padding: 8px 0;
.npc-domain-block {
border: 1px solid var(--cel-border);
border-radius: 4px;
overflow: hidden;
}
.npc-domain-header {
background: var(--cel-green);
background-image: url("../assets/ui/fond_cadrille.jpg");
background-blend-mode: soft-light;
color: var(--cel-orange);
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 12px;
min-height: 60px;
.npc-domain-labels {
display: flex;
flex-direction: column;
gap: 2px;
.domain-label-primary {
font-family: var(--cel-font-title);
font-weight: bold;
font-size: 1.1em;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--cel-orange);
}
.domain-label-secondary {
font-size: 0.75em;
color: rgba(220,170,80,0.7);
font-style: italic;
text-transform: uppercase;
letter-spacing: 0.04em;
}
}
.npc-domain-value-wrap {
display: flex;
align-items: center;
// Mode édition : input nombre
input.domain-value-input {
width: 40px;
.cel-input-std();
font-size: 1.2em;
text-align: center;
font-family: var(--cel-font-title);
}
// Mode jeu : bouton rollable avec dé
.npc-domain-roll-btn {
display: flex;
align-items: center;
gap: 5px;
cursor: pointer;
padding: 4px 8px;
border-radius: 4px;
transition: background 0.15s, box-shadow 0.15s;
&:hover {
background: rgba(224,123,0,0.2);
box-shadow: 0 0 6px rgba(224,123,0,0.4);
.domain-die-icon { color: var(--cel-orange); }
}
.domain-die-icon {
font-size: 1.2em;
color: rgba(220,170,80,0.7);
}
.domain-value {
font-family: var(--cel-font-title);
font-size: 1.4em;
font-weight: bold;
color: var(--cel-orange);
min-width: 20px;
text-align: center;
}
.domain-value-base {
font-size: 0.75em;
color: rgba(220,170,80,0.6);
font-style: italic;
}
}
}
}
}
// ── Section Aspects ──────────────────────────────────────────────────────
.npc-aspects-section {
margin-top: 12px;
border: 1px solid var(--cel-border);
border-radius: 4px;
overflow: hidden;
.section-header {
background: var(--cel-green);
background-image: url("../assets/ui/fond_cadrille.jpg");
background-blend-mode: soft-light;
color: var(--cel-orange);
display: flex;
align-items: center;
gap: 8px;
padding: 5px 10px;
font-family: var(--cel-font-title);
font-weight: bold;
font-size: 0.9em;
text-transform: uppercase;
letter-spacing: 0.06em;
border-bottom: 1px solid rgba(196,154,26,0.4);
a { color: var(--cel-orange-light); margin-left: auto; }
}
.aspect-row {
display: flex;
align-items: center;
padding: 4px 10px;
border-bottom: 1px solid rgba(122,92,32,0.18);
background: var(--cel-cream);
font-size: 0.9em;
gap: 8px;
&:nth-child(even) { background: var(--cel-cream-dark); }
.item-name { flex: 1; }
.aspect-value {
font-family: var(--cel-font-title);
font-weight: bold;
min-width: 28px;
text-align: center;
&.positive { color: #2a8a2a; }
&.negative { color: #c03030; }
}
}
}
// ── Onglet Biographie ────────────────────────────────────────────────────
.bio-section {
margin-bottom: 12px;
.section-header {
display: flex;
align-items: center;
gap: 8px;
padding: 5px 10px;
background: var(--cel-green);
background-image: url("../assets/ui/fond_cadrille.jpg");
background-blend-mode: soft-light;
color: var(--cel-orange);
font-family: var(--cel-font-title);
font-weight: bold;
font-size: 0.9em;
text-transform: uppercase;
letter-spacing: 0.06em;
border-radius: 4px 4px 0 0;
border: 1px solid var(--cel-border);
border-bottom: none;
}
.enriched-html {
font-size: 0.9em;
line-height: 1.6;
}
}
.faction-section {
.faction-display {
padding: 8px 12px;
background: var(--cel-cream);
border: 1px solid var(--cel-border);
border-top: none;
border-radius: 0 0 4px 4px;
.faction-name {
font-family: var(--cel-font-title);
color: var(--cel-orange);
font-size: 0.95em;
}
.faction-none {
font-style: italic;
color: rgba(122,92,32,0.5);
font-size: 0.85em;
}
}
.faction-select-row {
display: flex;
align-items: center;
gap: 10px;
padding: 6px 10px;
background: var(--cel-cream);
border: 1px solid var(--cel-border);
border-top: none;
border-radius: 0 0 4px 4px;
label { font-size: 0.85em; color: var(--cel-brown); }
select { flex: 1; .cel-input-std(); }
}
}
// ── Pistes (Blessures) ───────────────────────────────────────────────────
.track-section {
border: 1px solid var(--cel-border);
border-radius: 4px;
margin-bottom: 8px;
overflow: hidden;
.track-header {
background: var(--cel-green);
background-image: url("../assets/ui/fond_cadrille.jpg");
background-blend-mode: soft-light;
color: var(--cel-orange);
padding: 5px 8px;
font-family: var(--cel-font-title);
font-weight: bold;
text-transform: uppercase;
font-size: 0.9em;
letter-spacing: 0.06em;
border-bottom: 1px solid rgba(196,154,26,0.4);
}
.track-boxes {
display: flex;
padding: 8px;
gap: 6px;
background: var(--cel-cream);
.track-box {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
.box-label { font-size: 0.65em; color: var(--cel-border); }
}
}
.track-level {
display: flex;
align-items: center;
gap: 6px;
padding: 4px 8px;
background: rgba(139,115,85,0.1);
font-size: 0.85em;
input[type="number"] { width: 40px; .cel-input-std(); }
}
}
.description-section {
margin-top: 8px;
.enriched-html { font-size: 0.9em; line-height: 1.6; }
}
}