uberwald/l5rx-chiaroscuro
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

COrrections, WIP

Browse Source
This commit is contained in:
LeRatierBretonnier
2026-04-24 22:04:09 +02:00
parent d75b6cb945
commit e200b5f7b0
126 changed files with 768 additions and 5805 deletions
Download Patch File Download Diff File Expand all files Collapse all files

362
system/styles/scss/chiaroscuro.scss
View File

@@ -3,20 +3,19 @@
// ── Aspects (header block on character sheet) ─────────────────────────────
.aspects-section {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.25rem 0.5rem;
padding: 0.25rem 0.5rem;
flex-direction: column;
gap: 0.3rem;
padding: 0.4rem 0.5rem;
border: 1px solid rgba($chi-title, 0.3);
border-radius: 0.25rem;
font-size: 0.85rem;
width: 100%;
.aspect-fields {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.25rem;
flex: 1;
.attribute-label {
display: flex;
@@ -76,6 +75,38 @@
}
}
// ── Identity text blocks ──────────────────────────────────────────────────
.identity-text-wrapper {
flex: 1 1 100%;
align-items: stretch;
gap: 0.5rem;
.identity-text-block {
flex: 1 1 0;
min-width: 0;
}
}
// ── Notes tab ─────────────────────────────────────────────────────────────
article.tab.notes {
flex: 1 1 100%;
min-height: 0;
.notes-wrapper {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
.editor {
flex: 1 1 auto;
min-height: 300px;
}
}
}
// ── NPC Danger levels (identity.html) ────────────────────────────────────
.danger-row {
display: flex;
@@ -249,113 +280,302 @@
}
// ── Chiaroscuro Chat Roll ─────────────────────────────────────────────────
.chiaroscuro-chat-roll {
padding: 0.35rem;
font-size: 0.9rem;
&.chiaroscuro-chat-roll {
position: relative;
padding: 0.5rem 0.5rem 0.5rem 0.9rem;
font-size: 0.88rem;
background: rgba($l5r5e-black, 0.15);
border-radius: 0.3rem;
overflow: hidden;
// Header: portrait + actor + badges
// Ring-coloured left accent bar (thicker)
.chi-ring-bar {
position: absolute;
left: 0; top: 0; bottom: 0;
width: 6px;
border-radius: 6px 0 0 6px;
&.air { background: linear-gradient(to bottom, $l5r5e-air, darken($l5r5e-air, 15%)); }
&.water { background: linear-gradient(to bottom, $l5r5e-water, darken($l5r5e-water, 15%)); }
&.fire { background: linear-gradient(to bottom, $l5r5e-fire, darken($l5r5e-fire, 15%)); }
&.earth { background: linear-gradient(to bottom, $l5r5e-earth, darken($l5r5e-earth, 15%)); }
&.void { background: linear-gradient(to bottom, lighten($l5r5e-void, 20%), $l5r5e-void); }
}
// ── Header ──────────────────────────────────────────────────────────────
.chi-chat-header {
display: flex;
align-items: center;
gap: 0.4rem;
margin-bottom: 0.3rem;
gap: 0.45rem;
margin-bottom: 0.4rem;
padding-bottom: 0.35rem;
border-bottom: 1px solid rgba($l5r5e-title, 0.25);
.profile-img {
width: 2.5rem;
height: 2.5rem;
width: 2.8rem;
height: 2.8rem;
object-fit: cover;
border-radius: 50%;
border: 2px solid rgba($chi-title, 0.5);
flex-shrink: 0;
}
.chi-chat-actor {
flex: 1;
strong { font-family: $font-secondary; color: $chi-title; }
.chi-chat-quick-info { font-size: 0.75rem; color: $l5r5e-label; font-style: italic; }
min-width: 0;
strong { font-family: $font-secondary; color: $chi-title; font-size: 1rem; display: block; }
.chi-chat-quick-info { font-size: 0.72rem; color: $l5r5e-label; font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
.chi-chat-badges {
display: flex;
flex-direction: column;
gap: 0.2rem;
align-items: center;
.chi-aspect-badge {
font-size: 1rem;
&.solar { color: $chi-solar; }
&.lunar { color: $chi-lunar; }
align-items: flex-end;
flex-shrink: 0;
.chi-ring-badge {
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.15rem 0.45rem;
border-radius: 1rem;
font-size: 0.8rem;
font-weight: bold;
border: 1px solid;
i { font-size: 1.05rem; }
.chi-ring-name { font-size: 0.75rem; font-weight: normal; }
.chi-ring-val { font-size: 1rem; font-weight: bold; }
&.air { color: $l5r5e-air; background: rgba($l5r5e-air, 0.12); border-color: rgba($l5r5e-air, 0.35); }
&.water { color: $l5r5e-water; background: rgba($l5r5e-water, 0.12); border-color: rgba($l5r5e-water, 0.35); }
&.fire { color: $l5r5e-fire; background: rgba($l5r5e-fire, 0.12); border-color: rgba($l5r5e-fire, 0.35); }
&.earth { color: $l5r5e-earth; background: rgba($l5r5e-earth, 0.12); border-color: rgba($l5r5e-earth, 0.35); }
&.void { color: $l5r5e-void-light; background: rgba($l5r5e-void, 0.15); border-color: rgba($l5r5e-void-light, 0.4); }
}
.chi-aspect-badge, .chi-assistance-badge {
display: inline-flex;
align-items: center;
gap: 0.2rem;
padding: 0.1rem 0.35rem;
border-radius: 0.2rem;
font-size: 0.75rem;
border: 1px solid;
.chi-badge-label { font-size: 0.72rem; }
}
.chi-aspect-badge {
&.solar { color: $chi-solar; background: rgba($chi-solar, 0.15); border-color: rgba($chi-solar, 0.4); }
&.lunar { color: $chi-lunar; background: rgba($chi-lunar, 0.15); border-color: rgba($chi-lunar, 0.4); }
}
.chi-assistance-badge {
color: $l5r5e-label;
background: rgba($l5r5e-label, 0.1);
border-color: rgba($l5r5e-label, 0.3);
}
.chi-assistance-badge { color: $l5r5e-label; font-size: 1rem; }
}
}
// Description line
.chi-chat-desc {
// ── Context: skill (rank) → difficulty ──────────────────────────────────
.chi-chat-context {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.3rem;
margin-bottom: 0.3rem;
font-size: 0.85rem;
.chi-chat-skill { font-weight: bold; color: $chi-title; }
.chi-chat-vs { color: $l5r5e-label; }
.chi-chat-diff { color: $chi-subtitle; font-style: italic; }
font-size: 0.82rem;
.chi-ctx-skill { font-weight: bold; color: $chi-title; }
.chi-ctx-rank {
font-size: 0.7rem; padding: 0.05rem 0.3rem;
border-radius: 0.8rem; opacity: 0.85;
background: rgba($chi-title, 0.12); color: $chi-title;
}
.chi-ctx-arrow { color: $l5r5e-label; }
.chi-ctx-diff-name { color: $chi-subtitle; font-weight: bold; }
.chi-ctx-diff-val { color: $chi-subtitle; font-size: 0.78rem; }
}
// Dice pool
// ── Formula line ─────────────────────────────────────────────────────────
.chi-chat-formula {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.3rem;
margin-bottom: 0.45rem;
font-size: 0.8rem;
color: $l5r5e-label;
padding: 0.2rem 0.35rem;
background: rgba($l5r5e-black, 0.15);
border-radius: 0.2rem;
.chi-fml-base {
font-weight: bold;
&.air { color: $l5r5e-air; }
&.water { color: $l5r5e-water; }
&.fire { color: $l5r5e-fire; }
&.earth { color: $l5r5e-earth; }
&.void { color: $l5r5e-void; }
}
.chi-fml-mult {
padding: 0.05rem 0.3rem;
border-radius: 0.2rem;
font-size: 0.78rem;
em { font-style: normal; }
&.solar { color: $chi-solar; background: rgba($chi-solar, 0.1); }
&.lunar { color: $chi-lunar; background: rgba($chi-lunar, 0.1); }
&:not(.solar):not(.lunar) { color: $l5r5e-label; background: rgba($l5r5e-label, 0.08); }
}
.chi-fml-bonus { color: $chi-subtitle; font-size: 0.78rem; }
.chi-fml-mod { font-size: 0.78rem; }
.chi-fml-pos { color: $chi-subtitle; }
.chi-fml-neg { color: $l5r5e-red; }
.chi-fml-eq { color: $l5r5e-bold; font-weight: bold; margin-left: 0.1rem; }
}
// ── Dice section labels (raw / adjusted) ────────────────────────────────
.chi-dice-section-label {
font-size: 0.7rem;
color: $l5r5e-label;
font-style: italic;
margin-bottom: 0.15rem;
margin-top: 0.2rem;
padding-left: 0.2rem;
}
// ── Dice pool ────────────────────────────────────────────────────────────
.chi-chat-dice-pool {
display: flex;
flex-wrap: wrap;
gap: 0.25rem;
margin-bottom: 0.35rem;
gap: 0.35rem;
margin-bottom: 0.45rem;
padding: 0.4rem;
background: rgba($l5r5e-black, 0.25);
border-radius: 0.3rem;
&.chi-dice-raw {
opacity: 0.6;
margin-bottom: 0.1rem;
padding: 0.25rem 0.4rem;
background: rgba($l5r5e-black, 0.1);
.chi-die {
min-width: 1.6rem;
height: 1.6rem;
font-size: 0.85rem;
}
}
.chi-die {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.8rem;
height: 1.8rem;
border-radius: 0.25rem;
min-width: 2.4rem;
height: 2.4rem;
padding: 0 0.25rem;
border-radius: 0.35rem;
font-weight: bold;
font-size: 1rem;
background: rgba($l5r5e-black, 0.35);
border: 1px solid rgba($l5r5e-title, 0.4);
font-size: 1.15rem;
background: rgba($l5r5e-black, 0.65);
border: 1px solid rgba($l5r5e-title, 0.35);
color: $white;
position: relative;
&.die-low { color: $l5r5e-red; border-color: rgba($l5r5e-red, 0.5); }
&.die-high { color: $chi-solar; border-color: rgba($chi-solar, 0.5); }
box-shadow: inset 0 1px 0 rgba($white, 0.07), 0 1px 3px rgba($l5r5e-black, 0.4);
&.die-low {
color: $l5r5e-red;
background: rgba($l5r5e-red, 0.14);
border-color: rgba($l5r5e-red, 0.5);
box-shadow: inset 0 1px 0 rgba($white, 0.05), 0 0 6px rgba($l5r5e-red, 0.15);
}
&.die-high {
color: $chi-solar;
background: rgba($chi-solar, 0.14);
border-color: rgba($chi-solar, 0.5);
box-shadow: inset 0 1px 0 rgba($white, 0.1), 0 0 8px rgba($chi-solar, 0.2);
}
.die-adj-icon {
position: absolute;
top: -0.3rem;
right: -0.2rem;
font-size: 0.6rem;
color: $chi-solar;
filter: drop-shadow(0 0 2px rgba($chi-solar, 0.8));
}
}
}
// Breakdown
// ── Breakdown equation ───────────────────────────────────────────────────
.chi-chat-breakdown {
font-size: 0.85rem;
margin-bottom: 0.25rem;
color: $l5r5e-label;
strong { color: $white; }
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 0.3rem;
font-size: 0.9rem;
margin-bottom: 0.5rem;
padding: 0.3rem 0.5rem;
background: rgba($l5r5e-black, 0.15);
border-radius: 0.25rem;
.chi-bd-op { color: $l5r5e-label; font-size: 0.85rem; }
.chi-bd-part { font-weight: bold; }
.chi-bd-sum { color: $l5r5e-bold; font-size: 1rem; }
.chi-bd-pos { color: $chi-subtitle; }
.chi-bd-neg { color: $l5r5e-red; }
.chi-bd-eq { color: $l5r5e-label; font-size: 0.85rem; }
.chi-bd-total { color: $l5r5e-title; font-weight: bold; font-size: 1.15rem; }
.chi-bd-vs { color: $l5r5e-label; font-size: 0.85rem; margin: 0 0.1rem; }
.chi-bd-diff { color: darken($chi-subtitle, 15%); font-size: 1rem; font-weight: bold; }
}
// Result banner
// ── Result banner ────────────────────────────────────────────────────────
.chi-chat-result {
display: flex;
align-items: center;
gap: 0.3rem;
gap: 0.5rem;
font-family: $font-tertiary;
font-size: 1rem;
padding: 0.25rem 0.5rem;
border-radius: 0.2rem;
padding: 0.45rem 0.7rem;
border-radius: 0.3rem;
letter-spacing: 0.03em;
&.chi-success {
background: rgba($chi-subtitle, 0.25);
background: rgba($chi-subtitle, 0.18);
border: 1px solid rgba($chi-subtitle, 0.5);
color: $chi-subtitle;
color: darken($chi-subtitle, 30%);
box-shadow: 0 0 10px rgba($chi-subtitle, 0.1);
}
&.chi-failure {
background: rgba($l5r5e-red, 0.12);
border: 1px solid rgba($l5r5e-red, 0.35);
color: $l5r5e-red;
border: 1px solid rgba($l5r5e-red, 0.45);
color: darken($l5r5e-red, 20%);
box-shadow: 0 0 10px rgba($l5r5e-red, 0.08);
}
.chi-bonus-successes {
font-size: 0.85rem;
opacity: 0.85;
.chi-result-icon {
font-size: 1.4rem;
flex-shrink: 0;
}
.chi-result-body {
display: flex;
flex-direction: column;
gap: 0.1rem;
flex: 1;
}
.chi-result-text {
font-size: 1.05rem;
font-weight: bold;
}
.chi-result-delta {
font-size: 0.8rem;
font-weight: normal;
opacity: 0.9;
padding: 0.05rem 0.35rem;
border-radius: 0.8rem;
display: inline-block;
}
.chi-result-bonus {
background: rgba($chi-subtitle, 0.2);
border: 1px solid rgba($chi-subtitle, 0.4);
}
.chi-result-miss {
background: rgba($l5r5e-red, 0.12);
border: 1px solid rgba($l5r5e-red, 0.3);
}
}
}
@@ -374,3 +594,35 @@
text-underline-offset: 2px;
cursor: pointer;
}
// ── Invocations tab ───────────────────────────────────────────────────────
.invocations-wrapper {
display: flex;
flex-direction: column;
gap: 0.5rem;
.invocations-roll-header {
display: flex;
justify-content: center;
padding: 0.25rem 0;
.invocation-roll-btn {
cursor: pointer;
font-family: inherit;
font-size: 1rem;
font-weight: bold;
padding: 0.3rem 1.5rem;
}
}
.invocations-columns {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.5rem;
align-items: start;
.invocation-column {
width: 100%;
}
}
}