Fix as per CSV sheet tracking + creature explanation

This commit is contained in:
2026-05-17 17:43:33 +02:00
parent a572c66678
commit 374854cc8b
99 changed files with 2716 additions and 464 deletions
+25
View File
@@ -157,6 +157,31 @@
margin: 0;
}
// ProseMirror / toggled editor inside fieldset — enforce contrast on dark bg
.application.mgne fieldset {
.editor,
.editor-content,
.ProseMirror,
.document-editor {
color: lighten(@parchment, 8%);
background: transparent;
}
.editor-content,
.ProseMirror {
p, li { color: lighten(@parchment, 8%); }
h1, h2, h3 { color: @gold-acid; }
.is-empty::before { color: fade(@gold-acid, 40%); }
}
.editor-menu button {
color: @bone;
background: fade(@bg-void, 55%);
&:hover {
color: lighten(@parchment, 8%);
background: fade(@gold-acid, 20%);
}
}
}
.application.mgne legend {
.caps-heading();
color: @gold-acid;
+61
View File
@@ -85,6 +85,67 @@
color: @parchment;
}
.mgne-chat-card .chat-outcome,
.mgne-chat-card .chat-damage-total {
&.has-tooltip {
cursor: pointer;
user-select: none;
&:hover { filter: brightness(1.12); }
}
.chat-tooltip-icon {
opacity: 0.55;
font-size: 0.75em;
margin-left: 0.3rem;
vertical-align: middle;
transition: opacity 0.15s;
}
&.tooltip-open .chat-tooltip-icon { opacity: 1; }
}
// Dice tooltip reveal panel
.mgne-chat-card .chat-dice-tooltip {
margin-top: 0.4rem;
padding: 0.4rem 0.55rem;
background: fade(@bg-void, 85%);
border: 1px solid fade(@bone, 22%);
border-radius: @radius-sm;
// Foundry's standard dice-roll markup
.dice-roll {
display: flex;
flex-direction: column;
gap: 0.2rem;
}
.dice-formula {
font-family: "Courier New", monospace;
font-size: 0.72rem;
color: fade(@parchment, 65%);
}
.dice-tooltip {
font-size: 0.78rem;
}
.dice {
margin: 0.15rem 0;
}
.die-icon, .die-face {
color: @gold-acid;
font-size: 0.8rem;
}
.part-formula { color: fade(@parchment, 70%); font-size: 0.72rem; }
.part-total { color: @parchment; font-weight: 600; }
.max { color: lighten(@verdigris, 20%); }
.min { color: lighten(@ember-bright, 10%); }
.dice-total {
font-family: "CastorTwoMGNE", serif;
font-size: 1.05rem;
color: @gold-acid;
text-align: right;
border-top: 1px solid fade(@bone, 20%);
padding-top: 0.2rem;
margin-top: 0.15rem;
}
}
.mgne-chat-card .chat-outcome {
.caps-heading();
margin: 0;
+670 -2
View File
@@ -123,9 +123,15 @@
}
.application.mgne .condition-value-grid {
grid-template-columns: max-content 1fr;
grid-template-columns: max-content minmax(auto, 9rem);
align-items: center;
margin-bottom: 0.6rem;
select {
width: auto;
min-width: 5rem;
max-width: 9rem;
}
}
.application.mgne .condition-flag-grid {
@@ -530,10 +536,23 @@
gap: 0.35rem;
align-items: center;
width: fit-content;
padding: 0.1rem 0.3rem 0.1rem 0.2rem;
border-radius: 4px;
transition: background 0.15s, color 0.15s;
&.active {
color: @ember-bright;
color: #f5dfa0;
font-weight: 600;
text-shadow: 0 0 8px fade(@gold-acid, 55%);
background: fade(@gold-acid, 14%);
border: 1px solid fade(@gold-acid, 28%);
margin: -1px; // compensate border so layout doesn't shift
}
&:not(.active) {
color: @bone;
border: 1px solid transparent;
margin: -1px;
}
}
@@ -641,3 +660,652 @@
grid-template-columns: 1fr;
}
}
// ─── Weight badges ────────────────────────────────────────────────────────────
.item-weight-badge {
display: inline-flex;
align-items: center;
padding: 0 0.45em;
border-radius: 3px;
font-family: @font-body;
font-size: 0.7em;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
white-space: nowrap;
border: 1px solid transparent;
&.weight-trivial {
color: fade(@bone, 45%);
border-color: fade(@bone, 20%);
}
&.weight-light {
color: @bone;
border-color: fade(@bone, 35%);
background: fade(@bone, 8%);
}
&.weight-normal {
color: @gold-acid;
border-color: fade(@gold-acid, 40%);
background: fade(@gold-acid, 10%);
}
&.weight-heavy {
color: @blood;
border-color: fade(@blood, 45%);
background: fade(@blood, 12%);
}
}
// ─── Load display ─────────────────────────────────────────────────────────────
.load-display {
font-weight: 700;
letter-spacing: 0.04em;
cursor: default;
}
.load-overloaded {
color: @blood !important;
text-shadow: 0 0 6px fade(@blood, 50%);
}
.resource-box-overloaded {
border-color: fade(@blood, 60%) !important;
background: fade(@blood, 10%) !important;
.resource-label-accent {
color: @blood !important;
}
}
// ─── Item description tooltip ─────────────────────────────────────────────────
.item-name[data-tooltip] {
cursor: help;
&:hover { text-decoration: underline dotted fade(@gold-acid, 55%); }
}
#tooltip.mgne-item-tooltip {
max-width: 22rem;
font-family: @font-body;
font-size: 0.82rem;
line-height: 1.5;
color: @parchment;
background: darken(@bg-panel-soft, 4%);
border: 1px solid fade(@gold-acid, 35%);
border-radius: 4px;
padding: 0.5rem 0.7rem;
box-shadow: 0 4px 14px fade(#000, 55%);
}
// ─── Broken / Durability badges ───────────────────────────────────────────────
.item-broken-badge {
display: inline-block;
margin-left: 0.3em;
padding: 0.05em 0.4em;
font-size: 0.65em;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: @blood;
background: fade(@blood, 14%);
border: 1px solid fade(@blood, 45%);
border-radius: 3px;
vertical-align: middle;
}
.item-burned-badge {
color: @gold-acid;
background: fade(@gold-acid, 12%);
border-color: fade(@gold-acid, 40%);
}
.item-durability-badge {
display: inline-flex;
align-items: center;
gap: 0.25em;
padding: 0.1em 0.45em;
font-size: 0.7em;
font-weight: 700;
color: fade(@bone, 65%);
border: 1px solid fade(@bone, 20%);
border-radius: 3px;
white-space: nowrap;
letter-spacing: 0.03em;
&.durability-broken {
color: @blood;
border-color: fade(@blood, 40%);
background: fade(@blood, 10%);
text-decoration: line-through;
}
}
.item-row-broken {
opacity: 0.6;
filter: grayscale(0.4);
.item-name {
text-decoration: line-through;
color: fade(@parchment, 55%);
}
}
// ─── Weapon properties ────────────────────────────────────────────────────────
.weapon-properties-grid {
display: flex;
flex-wrap: wrap;
gap: 0.35rem 0.6rem;
padding: 0.5rem 0.6rem;
background: fade(@bone, 4%);
border: 1px solid fade(@bone, 12%);
border-radius: 4px;
margin-bottom: 0.5rem;
.property-check {
display: flex;
align-items: center;
gap: 0.3em;
font-family: @font-body;
font-size: 0.82rem;
color: @parchment;
cursor: pointer;
white-space: nowrap;
padding: 0.15em 0.4em;
border-radius: 3px;
transition: background 0.15s;
&:hover { background: fade(@gold-acid, 8%); }
input[type="checkbox"] { accent-color: @gold-acid; }
}
}
.weapon-property-badge {
display: inline-block;
margin-left: 0.3em;
padding: 0.05em 0.35em;
font-size: 0.62em;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: fade(@gold-acid, 85%);
background: fade(@gold-acid, 10%);
border: 1px solid fade(@gold-acid, 30%);
border-radius: 3px;
vertical-align: middle;
}
// ─── Creature trait trigger ───────────────────────────────────────────────────
.creature-trait-trigger {
font-size: 0.82em;
color: fade(@parchment, 65%);
font-style: italic;
margin-left: 0.2em;
}
// ─── Creature traits container ────────────────────────────────────────────────
.creature-traits-container {
border: 1px solid fade(@blood, 35%);
border-left: 3px solid fade(@blood, 65%);
border-radius: 4px;
background: linear-gradient(135deg, fade(@blood, 5%), transparent 60%),
fade(@bg-panel-soft, 85%);
padding: 0.6rem 0.75rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.creature-traits-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
border-bottom: 1px solid fade(@blood, 25%);
padding-bottom: 0.4rem;
margin-bottom: 0.1rem;
h3 {
margin: 0;
font-family: @font-display;
font-size: 0.82rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: fade(@blood, 90%);
}
button {
font-size: 0.72rem;
padding: 0.15em 0.6em;
background: fade(@blood, 12%);
border: 1px solid fade(@blood, 35%);
color: fade(@blood, 80%);
border-radius: 3px;
cursor: pointer;
transition: background 0.15s, color 0.15s;
&:hover {
background: fade(@blood, 22%);
color: lighten(@blood, 10%);
}
}
}
.creature-traits-list {
display: flex;
flex-direction: column;
gap: 0.3rem;
}
.creature-trait-card {
background: fade(@bg-void, 30%);
border: 1px solid fade(@blood, 20%);
border-radius: 3px;
padding: 0.35rem 0.5rem;
transition: background 0.15s, border-color 0.15s;
&:hover {
background: fade(@blood, 8%);
border-color: fade(@blood, 35%);
}
}
.creature-trait-card-header {
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
}
.creature-trait-name {
display: flex;
align-items: center;
gap: 0.35em;
font-family: @font-body;
font-size: 0.88rem;
font-weight: 600;
color: @parchment;
flex: 1;
min-width: 0;
cursor: default;
i { color: fade(@blood, 70%); font-size: 0.75em; }
}
.creature-trait-trigger {
font-size: 0.75rem;
font-style: italic;
color: fade(@parchment, 55%);
white-space: nowrap;
}
.creature-trait-card .item-actions {
display: flex;
gap: 0.25rem;
margin-left: auto;
flex-shrink: 0;
button {
width: 1.6rem;
height: 1.6rem;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border: 1px solid fade(@bone, 18%);
color: fade(@bone, 50%);
border-radius: 3px;
cursor: pointer;
font-size: 0.72rem;
transition: background 0.15s, color 0.15s, border-color 0.15s;
&:hover {
background: fade(@bone, 10%);
color: @bone;
border-color: fade(@bone, 35%);
}
}
}
// ============================================================
// CREATURE SHEET — META ROW + ACTION TABLE
// ============================================================
.creature-meta-row {
display: flex;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
padding: 0.45rem 0.6rem;
background: fade(@bg-panel-soft, 50%);
border: 1px solid fade(@ember, 20%);
border-radius: 4px;
}
.creature-meta-label {
font-family: @font-display;
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.07em;
color: fade(@ember, 80%);
white-space: nowrap;
}
.creature-type-group {
display: flex;
align-items: center;
gap: 0.75rem;
flex: 1;
}
.creature-type-checkbox {
display: flex;
align-items: center;
gap: 0.3em;
font-size: 0.83rem;
color: @parchment;
cursor: pointer;
user-select: none;
input[type="checkbox"] {
accent-color: @ember;
width: 0.9rem;
height: 0.9rem;
cursor: pointer;
}
}
.creature-number-group {
display: flex;
align-items: center;
gap: 0.4rem;
flex-shrink: 0;
}
.creature-number-input {
width: 4rem;
text-align: center;
font-family: @font-body;
font-size: 0.9rem;
color: @parchment;
background: @bg-input;
border: 1px solid fade(@ember, 30%);
border-radius: 3px;
padding: 0.15em 0.3em;
&:focus {
outline: none;
border-color: fade(@ember, 60%);
background: fade(@bg-input, 90%);
}
}
.creature-action-table-section {
.action-table-drop-zone {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 0.75rem;
border-radius: 4px;
min-height: 2.4rem;
font-size: 0.88rem;
color: @parchment;
i { font-size: 1em; color: @ember; }
.action-table-name {
font-weight: 600;
font-family: @font-display;
color: @parchment;
}
&.drop-hint {
border: 2px dashed fade(@ember, 35%);
background: fade(@ember, 4%);
color: fade(@parchment, 50%);
font-style: italic;
justify-content: center;
cursor: default;
transition: background 0.15s, border-color 0.15s;
i { color: fade(@ember, 50%); }
&:hover, &.drag-over {
background: fade(@ember, 9%);
border-color: fade(@ember, 60%);
color: fade(@parchment, 70%);
i { color: @ember; }
}
}
}
.action-table-buttons {
display: flex;
gap: 0.3rem;
align-items: center;
button {
font-size: 0.75rem;
padding: 0.15em 0.55em;
background: fade(@ember, 10%);
border: 1px solid fade(@ember, 30%);
color: fade(@ember, 80%);
border-radius: 3px;
cursor: pointer;
transition: background 0.15s, color 0.15s;
display: flex;
align-items: center;
gap: 0.3em;
&:hover {
background: fade(@ember, 22%);
color: @ember;
}
}
}
}
// ============================================================
// PARTY ACTOR SHEET
// ============================================================
.application.mgne.party {
.party-credits-row {
display: flex;
align-items: center;
gap: 0.6rem;
margin-top: 0.5rem;
padding: 0.4rem 0.6rem;
border: 1px solid fade(@gold-acid, 35%);
border-radius: @radius-sm;
background: fade(@bg-input, 70%);
}
.party-credits-stepper {
display: flex;
align-items: center;
gap: 0.3rem;
}
.credits-input {
width: 5rem;
text-align: center;
font-size: 1.05rem;
font-weight: 700;
font-family: @font-display;
color: @gold-acid;
background: fade(@bg-void, 60%);
border: 1px solid fade(@gold-acid, 30%);
border-radius: @radius-sm;
padding: 0.2rem 0.4rem;
}
.credits-symbol {
color: @gold-acid;
font-family: @font-display;
font-size: 1.1rem;
font-weight: 700;
margin: 0 0.1rem;
}
.credits-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2rem;
padding: 0.15rem 0.4rem;
font-size: 0.75rem;
font-weight: 700;
border: 1px solid fade(@bone, 28%);
border-radius: @radius-sm;
background: fade(@bg-input, 80%);
color: @bone;
cursor: pointer;
user-select: none;
transition: background 0.15s, border-color 0.15s;
&:hover {
background: fade(@gold-acid, 18%);
border-color: fade(@gold-acid, 55%);
color: @gold-acid;
}
}
}
// ── Party member list ─────────────────────────────────────────
.application.mgne.party .party-member-list {
display: flex;
flex-direction: column;
gap: 0.25rem;
margin-top: 0.4rem;
}
.application.mgne.party .party-member-row {
display: grid;
grid-template-columns: 2rem 1fr 5rem 6rem 5.5rem;
gap: 0.5rem;
align-items: center;
padding: 0.3rem 0.4rem;
border-radius: @radius-sm;
&.party-member-header {
color: @dust;
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
border-bottom: 1px solid fade(@bone, 18%);
padding-bottom: 0.25rem;
margin-bottom: 0.1rem;
}
&:not(.party-member-header) {
background: fade(@bg-input, 75%);
border: 1px solid transparent;
&:hover {
border-color: fade(@gold-acid, 22%);
background: fade(@bg-input, 90%);
}
}
}
.application.mgne.party .party-member-portrait {
width: 2rem;
height: 2rem;
object-fit: cover;
border-radius: 3px;
border: 1px solid fade(@bone, 25%);
}
.application.mgne.party .party-member-name a {
color: @parchment;
font-weight: 700;
font-size: 0.9rem;
&:hover { color: @gold-acid; }
}
.application.mgne.party .party-member-hp {
color: @ember-bright;
font-family: @font-display;
font-size: 0.82rem;
font-weight: 700;
text-align: center;
}
.application.mgne.party .party-member-type {
color: @dust;
font-size: 0.78rem;
font-style: italic;
}
// ── Party loot list ────────────────────────────────────────────
.application.mgne.party .party-loot-list {
display: flex;
flex-direction: column;
gap: 0.25rem;
margin-top: 0.4rem;
}
.application.mgne.party .party-loot-row {
display: grid;
grid-template-columns: 2rem 1fr 7rem 4rem;
gap: 0.5rem;
align-items: center;
padding: 0.3rem 0.4rem;
border-radius: @radius-sm;
&.party-loot-header {
color: @dust;
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
border-bottom: 1px solid fade(@bone, 18%);
padding-bottom: 0.25rem;
margin-bottom: 0.1rem;
}
&:not(.party-loot-header) {
background: fade(@bg-input, 75%);
border: 1px solid transparent;
&:hover {
border-color: fade(@gold-acid, 22%);
background: fade(@bg-input, 90%);
}
}
}
.application.mgne.party .item-portrait {
width: 2rem;
height: 2rem;
object-fit: cover;
border-radius: 3px;
border: 1px solid fade(@bone, 25%);
}
.application.mgne.party .item-type-label {
color: @dust;
font-size: 0.78rem;
font-style: italic;
}
// ── Party drop hint ────────────────────────────────────────────
.application.mgne.party .party-drop-hint {
color: fade(@dust, 70%);
font-size: 0.75rem;
font-style: italic;
text-align: center;
margin-top: 0.5rem;
padding: 0.3rem;
border: 1px dashed fade(@bone, 18%);
border-radius: @radius-sm;
}