Aesthetic overhaul: all 6 PJ sheet tabs styled with Mournblade theme

- Section boxes, item lists with alternating rows and hover effects
- Dark header rows (CentaurMT font, uppercase, gold text)
- 28x28px item icons with brown border
- Roll buttons: warm dark gradient with hover glow
- Chat/action buttons: blue gradient
- Predilection text: small italic muted gold
- Defense values in blue, gold argent banners
- Bio grid fields styled, description section header with accent
- Rich text editor area styled

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
2026-04-03 09:15:29 +02:00
parent e67ecd9238
commit f0969c9eb4
2 changed files with 497 additions and 0 deletions

View File

@@ -789,6 +789,275 @@
} }
} }
} }
// ── Tab Section Boxes ──────────────────────────────────────────────
.sheet-box {
margin-bottom: 0.4rem;
border-radius: 4px;
&.color-bg-archetype {
background: rgba(230, 215, 195, 0.12);
border: 1px solid rgba(139, 69, 19, 0.3);
padding: 0.25rem 0.4rem;
&:last-child {
margin-bottom: 0;
}
}
}
// ── Item Lists ──────────────────────────────────────────────────────
.item-list.alternate-list {
list-style: none;
margin: 0;
padding: 0;
li.item {
display: flex;
flex-direction: row;
align-items: center;
padding: 0.15rem 0.35rem;
min-height: 2rem;
border-bottom: 1px solid rgba(139, 69, 19, 0.12);
transition: background 0.15s;
&:hover {
background: rgba(0, 0, 0, 0.07);
}
&.items-title-bg {
background: rgba(20, 10, 0, 0.45);
border: 1px solid rgba(139, 69, 19, 0.55);
border-radius: 3px 3px 0 0;
padding: 0.2rem 0.4rem;
margin-bottom: 0;
&:hover {
background: rgba(20, 10, 0, 0.5);
}
h3 {
margin: 0;
padding: 0;
font-size: 0.85rem;
}
.items-title-text {
font-family: "CentaurMT", "Palatino Linotype", serif;
font-size: 0.85rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
color: #f0dfc0 !important;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.9);
}
.item-name-label-header {
color: #f0dfc0 !important;
}
.short-label {
color: #c0a870 !important;
font-size: 0.72rem;
font-style: italic;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7);
}
}
}
}
// Item images in lists
.item-list .item-name-img {
width: 28px;
height: 28px;
min-width: 28px;
max-width: 28px;
max-height: 28px;
object-fit: cover;
border-radius: 3px;
border: 1px solid rgba(139, 69, 19, 0.5);
margin-right: 0.25rem;
flex-shrink: 0;
}
// Roll buttons in item lists
.item-list .button-sheet-roll {
background: linear-gradient(to bottom, rgba(80, 50, 10, 0.9), rgba(50, 30, 5, 0.9));
border: 1px solid rgba(180, 120, 20, 0.7);
border-radius: 4px;
color: #f0dfc0;
font-size: 0.78rem;
font-weight: 600;
padding: 0.12rem 0.25rem;
max-height: 1.7rem;
width: 3.6rem;
cursor: pointer;
text-align: center;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
transition: all 0.15s;
box-shadow: none;
&:hover:not([disabled]) {
background: linear-gradient(to bottom, rgba(160, 60, 10, 0.95), rgba(100, 30, 5, 0.95));
border-color: rgba(255, 160, 40, 0.8);
color: #fff;
transform: scale(1.05);
box-shadow: 0 0 6px rgba(255, 120, 20, 0.3);
}
&:active:not([disabled]) {
transform: scale(0.97);
}
&[disabled] {
opacity: 0.35;
cursor: not-allowed;
}
}
// Combat action buttons (chat-card-button)
.item-list .chat-card-button,
.chat-card-button {
background: linear-gradient(to bottom, rgba(30, 50, 80, 0.92), rgba(15, 25, 50, 0.92));
border: 1px solid rgba(80, 120, 180, 0.6);
border-radius: 4px;
color: #c0d8f0;
font-family: "CentaurMT", "Palatino Linotype", serif;
font-size: 0.85rem;
font-weight: 600;
padding: 0.2rem 0.5rem;
cursor: pointer;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
transition: all 0.15s;
white-space: nowrap;
flex: 1;
min-width: 0;
margin: 2px;
&:hover {
background: linear-gradient(to bottom, rgba(100, 40, 10, 0.95), rgba(60, 20, 5, 0.95));
border-color: rgba(220, 100, 40, 0.8);
color: #fff;
box-shadow: 0 0 6px rgba(200, 80, 20, 0.3);
}
&:active {
transform: scale(0.97);
}
}
// Predilection text below skill name
.predilection-text {
font-size: 0.67rem;
font-style: italic;
color: #9a7a50 !important;
text-shadow: none;
line-height: 1.2;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 100%;
}
// Defence value label
label.arme-defensif.defense-sheet {
color: #6090c0 !important;
font-weight: 600;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}
// Argent / wealth summary banner
.argent-total-text {
font-family: "CentaurMT", "Palatino Linotype", serif;
font-size: 0.9rem;
font-weight: 700;
color: #c0a060 !important;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
letter-spacing: 0.3px;
}
// Quantity modify inline buttons
a.quantity-modify.plus-minus-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
background: linear-gradient(to bottom, rgba(80, 50, 10, 0.85), rgba(50, 30, 5, 0.85));
border: 1px solid rgba(180, 120, 20, 0.6);
border-radius: 3px;
color: #f0dfc0;
font-size: 0.85rem;
font-weight: 900;
cursor: pointer;
text-decoration: none;
margin: 0 1px;
transition: all 0.12s;
vertical-align: middle;
padding: 0;
max-width: unset;
box-shadow: none;
&:hover {
background: linear-gradient(to bottom, rgba(160, 60, 10, 0.95), rgba(100, 30, 5, 0.95));
border-color: rgba(255, 160, 40, 0.8);
color: #fff;
transform: scale(1.1);
}
}
// ── Bio / Biodata section ──────────────────────────────────────────
.grid.grid-3col {
.item.flexrow, li.item.flexrow {
padding: 0.12rem 0.3rem;
border-bottom: 1px solid rgba(139, 69, 19, 0.1);
align-items: center;
min-height: 1.8rem;
.generic-label {
min-width: 7rem;
font-family: "CentaurMT", "Palatino Linotype", serif;
font-size: 0.82rem;
font-weight: 700;
color: #4a3520 !important;
text-shadow: none;
}
input[type="text"] {
flex: 1;
font-size: 0.83rem;
}
}
}
// Bio historiques/profils rows
.item-list li.item.flexrow .generic-label {
font-family: "CentaurMT", "Palatino Linotype", serif;
font-size: 0.85rem;
color: #3a2a1a !important;
}
// Bio description section header (standalone h3 not in a list)
span > h3 {
font-family: "CentaurMT", "Palatino Linotype", serif;
font-size: 0.95rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
color: #3a2a1a !important;
border-left: 3px solid rgba(139, 69, 19, 0.7);
padding: 0.15rem 0 0.15rem 0.4rem;
margin: 0.4rem 0 0.3rem 0;
}
// Rich text editor container
.medium-editor.item-text-long-line {
border: 1px solid rgba(139, 69, 19, 0.35);
border-radius: 3px;
padding: 0.3rem;
background: rgba(255, 250, 240, 0.4);
min-height: 80px;
}
} }
/* ==================== Adversité Cards ==================== */ /* ==================== Adversité Cards ==================== */

View File

@@ -3081,6 +3081,234 @@ li {
margin: 0; margin: 0;
cursor: pointer; cursor: pointer;
} }
.fvtt-mournblade-cyd-2-0.actor .sheet-body .sheet-box {
margin-bottom: 0.4rem;
border-radius: 4px;
}
.fvtt-mournblade-cyd-2-0.actor .sheet-body .sheet-box.color-bg-archetype {
background: rgba(230, 215, 195, 0.12);
border: 1px solid rgba(139, 69, 19, 0.3);
padding: 0.25rem 0.4rem;
}
.fvtt-mournblade-cyd-2-0.actor .sheet-body .sheet-box.color-bg-archetype:last-child {
margin-bottom: 0;
}
.fvtt-mournblade-cyd-2-0.actor .sheet-body .item-list.alternate-list {
list-style: none;
margin: 0;
padding: 0;
}
.fvtt-mournblade-cyd-2-0.actor .sheet-body .item-list.alternate-list li.item {
display: flex;
flex-direction: row;
align-items: center;
padding: 0.15rem 0.35rem;
min-height: 2rem;
border-bottom: 1px solid rgba(139, 69, 19, 0.12);
transition: background 0.15s;
}
.fvtt-mournblade-cyd-2-0.actor .sheet-body .item-list.alternate-list li.item:hover {
background: rgba(0, 0, 0, 0.07);
}
.fvtt-mournblade-cyd-2-0.actor .sheet-body .item-list.alternate-list li.item.items-title-bg {
background: rgba(20, 10, 0, 0.45);
border: 1px solid rgba(139, 69, 19, 0.55);
border-radius: 3px 3px 0 0;
padding: 0.2rem 0.4rem;
margin-bottom: 0;
}
.fvtt-mournblade-cyd-2-0.actor .sheet-body .item-list.alternate-list li.item.items-title-bg:hover {
background: rgba(20, 10, 0, 0.5);
}
.fvtt-mournblade-cyd-2-0.actor .sheet-body .item-list.alternate-list li.item.items-title-bg h3 {
margin: 0;
padding: 0;
font-size: 0.85rem;
}
.fvtt-mournblade-cyd-2-0.actor .sheet-body .item-list.alternate-list li.item.items-title-bg .items-title-text {
font-family: "CentaurMT", "Palatino Linotype", serif;
font-size: 0.85rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
color: #f0dfc0 !important;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.9);
}
.fvtt-mournblade-cyd-2-0.actor .sheet-body .item-list.alternate-list li.item.items-title-bg .item-name-label-header {
color: #f0dfc0 !important;
}
.fvtt-mournblade-cyd-2-0.actor .sheet-body .item-list.alternate-list li.item.items-title-bg .short-label {
color: #c0a870 !important;
font-size: 0.72rem;
font-style: italic;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7);
}
.fvtt-mournblade-cyd-2-0.actor .sheet-body .item-list .item-name-img {
width: 28px;
height: 28px;
min-width: 28px;
max-width: 28px;
max-height: 28px;
object-fit: cover;
border-radius: 3px;
border: 1px solid rgba(139, 69, 19, 0.5);
margin-right: 0.25rem;
flex-shrink: 0;
}
.fvtt-mournblade-cyd-2-0.actor .sheet-body .item-list .button-sheet-roll {
background: linear-gradient(to bottom, rgba(80, 50, 10, 0.9), rgba(50, 30, 5, 0.9));
border: 1px solid rgba(180, 120, 20, 0.7);
border-radius: 4px;
color: #f0dfc0;
font-size: 0.78rem;
font-weight: 600;
padding: 0.12rem 0.25rem;
max-height: 1.7rem;
width: 3.6rem;
cursor: pointer;
text-align: center;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
transition: all 0.15s;
box-shadow: none;
}
.fvtt-mournblade-cyd-2-0.actor .sheet-body .item-list .button-sheet-roll:hover:not([disabled]) {
background: linear-gradient(to bottom, rgba(160, 60, 10, 0.95), rgba(100, 30, 5, 0.95));
border-color: rgba(255, 160, 40, 0.8);
color: #fff;
transform: scale(1.05);
box-shadow: 0 0 6px rgba(255, 120, 20, 0.3);
}
.fvtt-mournblade-cyd-2-0.actor .sheet-body .item-list .button-sheet-roll:active:not([disabled]) {
transform: scale(0.97);
}
.fvtt-mournblade-cyd-2-0.actor .sheet-body .item-list .button-sheet-roll[disabled] {
opacity: 0.35;
cursor: not-allowed;
}
.fvtt-mournblade-cyd-2-0.actor .sheet-body .item-list .chat-card-button,
.fvtt-mournblade-cyd-2-0.actor .sheet-body .chat-card-button {
background: linear-gradient(to bottom, rgba(30, 50, 80, 0.92), rgba(15, 25, 50, 0.92));
border: 1px solid rgba(80, 120, 180, 0.6);
border-radius: 4px;
color: #c0d8f0;
font-family: "CentaurMT", "Palatino Linotype", serif;
font-size: 0.85rem;
font-weight: 600;
padding: 0.2rem 0.5rem;
cursor: pointer;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
transition: all 0.15s;
white-space: nowrap;
flex: 1;
min-width: 0;
margin: 2px;
}
.fvtt-mournblade-cyd-2-0.actor .sheet-body .item-list .chat-card-button:hover,
.fvtt-mournblade-cyd-2-0.actor .sheet-body .chat-card-button:hover {
background: linear-gradient(to bottom, rgba(100, 40, 10, 0.95), rgba(60, 20, 5, 0.95));
border-color: rgba(220, 100, 40, 0.8);
color: #fff;
box-shadow: 0 0 6px rgba(200, 80, 20, 0.3);
}
.fvtt-mournblade-cyd-2-0.actor .sheet-body .item-list .chat-card-button:active,
.fvtt-mournblade-cyd-2-0.actor .sheet-body .chat-card-button:active {
transform: scale(0.97);
}
.fvtt-mournblade-cyd-2-0.actor .sheet-body .predilection-text {
font-size: 0.67rem;
font-style: italic;
color: #9a7a50 !important;
text-shadow: none;
line-height: 1.2;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 100%;
}
.fvtt-mournblade-cyd-2-0.actor .sheet-body label.arme-defensif.defense-sheet {
color: #6090c0 !important;
font-weight: 600;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}
.fvtt-mournblade-cyd-2-0.actor .sheet-body .argent-total-text {
font-family: "CentaurMT", "Palatino Linotype", serif;
font-size: 0.9rem;
font-weight: 700;
color: #c0a060 !important;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
letter-spacing: 0.3px;
}
.fvtt-mournblade-cyd-2-0.actor .sheet-body a.quantity-modify.plus-minus-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
background: linear-gradient(to bottom, rgba(80, 50, 10, 0.85), rgba(50, 30, 5, 0.85));
border: 1px solid rgba(180, 120, 20, 0.6);
border-radius: 3px;
color: #f0dfc0;
font-size: 0.85rem;
font-weight: 900;
cursor: pointer;
text-decoration: none;
margin: 0 1px;
transition: all 0.12s;
vertical-align: middle;
padding: 0;
max-width: unset;
box-shadow: none;
}
.fvtt-mournblade-cyd-2-0.actor .sheet-body a.quantity-modify.plus-minus-button:hover {
background: linear-gradient(to bottom, rgba(160, 60, 10, 0.95), rgba(100, 30, 5, 0.95));
border-color: rgba(255, 160, 40, 0.8);
color: #fff;
transform: scale(1.1);
}
.fvtt-mournblade-cyd-2-0.actor .sheet-body .grid.grid-3col .item.flexrow,
.fvtt-mournblade-cyd-2-0.actor .sheet-body .grid.grid-3col li.item.flexrow {
padding: 0.12rem 0.3rem;
border-bottom: 1px solid rgba(139, 69, 19, 0.1);
align-items: center;
min-height: 1.8rem;
}
.fvtt-mournblade-cyd-2-0.actor .sheet-body .grid.grid-3col .item.flexrow .generic-label,
.fvtt-mournblade-cyd-2-0.actor .sheet-body .grid.grid-3col li.item.flexrow .generic-label {
min-width: 7rem;
font-family: "CentaurMT", "Palatino Linotype", serif;
font-size: 0.82rem;
font-weight: 700;
color: #4a3520 !important;
text-shadow: none;
}
.fvtt-mournblade-cyd-2-0.actor .sheet-body .grid.grid-3col .item.flexrow input[type="text"],
.fvtt-mournblade-cyd-2-0.actor .sheet-body .grid.grid-3col li.item.flexrow input[type="text"] {
flex: 1;
font-size: 0.83rem;
}
.fvtt-mournblade-cyd-2-0.actor .sheet-body .item-list li.item.flexrow .generic-label {
font-family: "CentaurMT", "Palatino Linotype", serif;
font-size: 0.85rem;
color: #3a2a1a !important;
}
.fvtt-mournblade-cyd-2-0.actor .sheet-body span > h3 {
font-family: "CentaurMT", "Palatino Linotype", serif;
font-size: 0.95rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
color: #3a2a1a !important;
border-left: 3px solid rgba(139, 69, 19, 0.7);
padding: 0.15rem 0 0.15rem 0.4rem;
margin: 0.4rem 0 0.3rem 0;
}
.fvtt-mournblade-cyd-2-0.actor .sheet-body .medium-editor.item-text-long-line {
border: 1px solid rgba(139, 69, 19, 0.35);
border-radius: 3px;
padding: 0.3rem;
background: rgba(255, 250, 240, 0.4);
min-height: 80px;
}
.fvtt-mournblade-cyd-2-0.actor .adversite-section { .fvtt-mournblade-cyd-2-0.actor .adversite-section {
padding: 6px 8px 8px; padding: 6px 8px 8px;
} }