Files
2026-03-27 03:52:49 +01:00

3219 lines
66 KiB
CSS
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 url('https://fonts.googleapis.com/css2?family=Crimson+Text&display=swap');
.charsheet {
font-size: 16px;
}
/* Hide all tab content wrappers by default */
.charsheet .sheet-tab-content {
display: none;
}
/* Show the active tab's wrapper */
.charsheet .sheet-tabstoggle[value="character"] ~ .sheet-character,
.charsheet .sheet-tabstoggle[value="journal"] ~ .sheet-journal,
.charsheet .sheet-tabstoggle[value="notes"] ~ .sheet-notes,
.charsheet .sheet-tabstoggle[value="npc"] ~ .sheet-npc {
display: block;
}
/* Base styling for all tab buttons */
.sheet-tab-button {
font-family: 'Crimson Text', serif;
font-size: 2rem;
color: #fff;
padding: 0.6rem 1.2rem;
border: 1px solid #7c5849;
border-bottom: none;
background-color: #a47764;
cursor: pointer;
border-radius: 0.5rem 0.5rem 0 0;
margin-right: 0.25rem;
}
/* Active tab styling */
.charsheet .sheet-tabstoggle[value="character"] ~ .sheet-tabs .sheet-tab-button[name="act_character"],
.charsheet .sheet-tabstoggle[value="journal"] ~ .sheet-tabs .sheet-tab-button[name="act_journal"],
.charsheet .sheet-tabstoggle[value="notes"] ~ .sheet-tabs .sheet-tab-button[name="act_notes"],
.charsheet .sheet-tabstoggle[value="npc"] ~ .sheet-tabs .sheet-tab-button[name="act_npc"] {
background-color: #ece3e0;
color: #4b2e24;
font-weight: bold;
position: relative;
top: 1px;
z-index: 2;
}
.sheet-tab-content {
background-color: #ece3e0;
border: 1px solid #7c5849;
border-radius: 0 0.5rem 0.5rem 0.5rem;
padding: 1rem;
font-family: 'Crimson Text', serif;
max-width: 875px;
justify-content: flex-start;
align-items:center;
box-sizing: border-box;
overflow-x: auto;
}
/* Character Tab Info */
.sheet-tab-inner {
width: 100%;
box-sizing: border-box;
display: flex;
flex-direction: column;
min-width: 800px;
overflow-x: auto;
}
/* Character Title Section Styling */
.character-title {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 16px;
margin-bottom: 12px;
border-bottom: 1px solid #a47764;
padding-bottom: 4px;
padding-left: 12px;
padding-right: 12px;
box-sizing: border-box;
font-family: 'Crimson Text', serif;
background-color: #ece3e0;
max-width: 875px;
}
.character-title .token-image {
width: 60px;
height: 60px;
object-fit: cover;
border-radius: 4px;
}
.character-title .character-display {
font-size: 4.5rem;
font-weight: bold;
color: #a47764;
font-variant: small-caps;
line-height: 1;
margin: 0;
padding: 0;
}
.title-checkboxes {
display: flex;
gap: 8px;
margin-left: auto;
align-items: center;
align-self: center;
}
.title-checkboxes input[type="checkbox"] {
width: 16px;
height: 16px;
cursor: pointer;
}
.character-info {
background-color: #a47764;
padding: 12px;
margin-top: 12px;
border-radius: 6px;
width: 100%;
box-sizing: border-box;
max-width: 875px;
margin-left: auto;
margin-right: auto;
}
/* Character Information Header Styling */
.sheet-header {
margin: 0 auto;
border: 2px solid #a47764;
border-radius: 8px;
background-color: #ece3e0;
padding: 12px;
font-family: 'Crimson Text', serif;
color: #4b2e24;
justify-content: flex-start;
width: 100%;
box-sizing: border-box;
}
.header-top {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 16px;
margin-bottom: 12px;
border-bottom: 1px solid #a47764;
padding-bottom: 4px;
}
/* Three-column layout */
.sheet-charinfo-grid {
display: grid;
grid-template-columns: 3fr 2fr 2fr;
gap: 10px 20px;
width: 100%;
align-items: start;
}
.charinfo-column {
display: flex;
flex-direction: column;
gap: 10px;
}
.charinfo-block {
display: flex;
flex-direction: column;
}
.charinfo-block label {
font-weight: bold;
font-size: 1em;
margin-bottom: 2px;
color: #fff;
}
.charinfo-block input {
padding: 4px 6px;
font-family: 'Crimson Text', serif;
font-size: 1.5em;
width: 100%;
}
/* Combined Class / Level section */
.charinfo-combined {
display: flex;
flex-direction: column;
}
.class-level-wrapper {
display: flex;
gap: 8px;
align-items: center;
width: 100%;
}
.class-level-slash {
font-size: 1em;
line-height: 1;
color: #4b2e24;
}
.char-name-input {
width: 100%;
}
.class-input {
width: 100%;
}
.level-input {
text-align: center;
}
/* End of Character Information Header */
.sheet-main-content {
padding: 6px 2px;
display: flex;
flex-direction: column;
align-items: stretch;
width: 100%;
background-color: #ece3e0;
box-sizing: border-box;
}
/* Upper Content Container */
.upper-content-section {
padding: 4px 0;
display: flex;
align-items: stretch;
max-width: 875px;
box-sizing: border-box;
gap: 6px;
}
/* Abilities Panel */
/* This is the container for the abilities panel */
.abilities-container {
width: 100px;
background-color: #a47764;
border: 1px solid #a47764;
border-radius: 6px;
overflow: visible;
display: flex;
flex-direction: column;
height: 100%;
flex: 0 0 100px;
}
/* Styles for the header at the top */
.abilities-header {
border: 1px solid #a47764;
background-color: #a47764;
color: white;
font-weight: bold;
text-align: center;
font-family: 'Crimson Text', serif;
font-size: 1.25em;
}
/* Each ability cell box */
.ability-cell {
border: 2px solid #a47764;
border-radius: 6px;
border-bottom: 2px solid #a47764;
background-color: #ece3e0;
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 111px;
width: 100px;
box-sizing: border-box;
}
.ability-wrapper {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
height: 100%;
box-sizing: border-box;
background-color: #ece3e0;
padding-bottom: 12px;
padding-top: 4px;
}
/* Highlight key stats if the hidden key attribute equals "1" */
input[name="attr_str_key"][value="1"] + .ability-cell,
input[name="attr_str_key"][value="1"] + .ability-cell .ability-wrapper {
background-color: #d5e2e6;
}
input[name="attr_dex_key"][value="1"] + .ability-cell,
input[name="attr_dex_key"][value="1"] + .ability-cell .ability-wrapper {
background-color: #d5e2e6;
}
input[name="attr_int_key"][value="1"] + .ability-cell,
input[name="attr_int_key"][value="1"] + .ability-cell .ability-wrapper {
background-color: #d5e2e6;
}
input[name="attr_wil_key"][value="1"] + .ability-cell,
input[name="attr_wil_key"][value="1"] + .ability-cell .ability-wrapper {
background-color: #d5e2e6;
}
.roll-ability {
all: unset;
display: inline-flex;
align-items: center;
justify-content: center;
vertical-align: middle;
font-family: 'Crimson Text', serif;
font-weight: 600;
color: #4b2e24;
cursor: pointer;
text-align: center;
padding: 0;
line-height: 1;
height: 1em;
position: relative;
top: 0.1em;
}
.roll-ability:hover {
color: #a47764;
background-color: transparent;
}
.input-container {
position: relative;
height: 50px;
width: 50px;
display: flex;
border: 2px solid #a47764;
border-radius: 6px;
background-color: #FFFFFF;
z-index: 1;
align-items: center;
justify-content: center;
}
.ability-input {
text-align: center;
font-size: 1.5em;
font-family: 'Crimson Text', serif;
background-color: transparent;
border: 0px;
margin-left: 16px;
}
.hidden-checkbox {
display: none;
}
.custom-checkbox {
width: 15px;
min-width: 15px;
max-width: 15px;
height: 15px;
min-height: 15px;
max-height: 15px;
border: 2px solid #A47764;
border-radius: 4px;
background-color: #FFF;
display: inline-block;
cursor: pointer;
position: absolute;
left: 50%;
transform: translateX(-50%);
z-index: 2;
box-sizing: border-box;
}
.custom-checkbox.adv {
top: -11px;
}
.custom-checkbox.disadv {
bottom: -21px;
}
.hidden-checkbox:checked + .custom-checkbox {
background-color: #A47764;
}
.custom-checkbox::after {
content: "✔";
font-size: 12px;
color: white;
display: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -52%);
line-height: 1;
}
/* Show the checkmark when the checkbox is checked */
.hidden-checkbox:checked + .custom-checkbox {
background-color: #A47764;
}
.hidden-checkbox:checked + .custom-checkbox::after {
display: block;
}
/* End of Abilities Panel */
/* Secondary Stats Panel */
.secondary-stats-container {
background-color: #a47764;
border: 1px solid #a47764;
border-radius: 6px;
overflow: visible;
display: flex;
flex-direction: column;
flex: 0 0 165px;
width: 165px;
height: 100%;
}
.secondary-stats-header {
border: 1px solid #a47764;
background-color: #a47764;
color: white;
font-weight: bold;
font-size: 1.25em;
text-align: center;
font-family: 'Crimson Text', serif;
border-radius: 6px;
line-height: 1.1;
margin:0;
}
.secondary-stat-cell {
border: 2px solid #a47764;
border-radius: 6px;
border-bottom: 2px solid #a47764;
background-color: #ece3e0;
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 75px;
box-sizing: border-box;
padding-left: 6px;
padding-right: 6px;
}
.secondary-stats-container .secondary-stat-cell .secondary-stat-label {
display: block;
margin: 0 auto;
text-align: center;
font-family: 'Crimson Text', serif;
font-weight: 600;
color: #4b2e24;
margin-bottom: 4px;
}
.dual-inputs {
display: flex;
align-items: center;
gap: 6px;
}
.dual-inputs span {
font-size: 1.1em;
color: #4b2e24;
font-weight: bold;
}
.secondary-input {
padding: 4px 6px;
border: 1px solid #a47764;
border-radius: 4px;
background-color: white;
font-size: 1.2em;
text-align: center;
font-family: 'Crimson Text', serif;
}
.initiative-input {
width: 50px;
}
.initiative-wrapper {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
}
.initiative-inputs {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
}
.initiative-inputs .inline-checkbox {
margin-top: 6px;
}
.inline-checkbox {
width: 15px;
height: 15px;
min-width: 15px;
min-height: 15px;
max-width: 15px;
max-height: 15px;
border: 2px solid #A47764;
border-radius: 4px;
background-color: #FFF;
display: inline-block;
cursor: pointer;
box-sizing: border-box;
position: relative;
flex-shrink: 0;
}
.inline-checkbox::after {
content: "✔";
font-size: 10px;
color: white;
display: none;
line-height: 1;
}
.hidden-checkbox:checked + .inline-checkbox {
background-color: #A47764;
border-color: #4b2e24;
}
.hidden-checkbox:checked + .inline-checkbox::after {
display: block;
}
/* End of Secondary Stats Panel */
/* Skills Panel */
.skills-header {
border: 1px solid #a47764;
background-color: #a47764;
color: white;
font-weight: bold;
text-align: center;
font-family: 'Crimson Text', serif;
font-size: 1.25em;
}
.skills-container {
background-color: #a47764;
border: 1px solid #a47764;
border-radius: 6px;
overflow: visible;
display: flex;
flex-direction: column;
gap: 6px;
max-width: 283px;
}
.skills-grid {
display: grid;
grid-template-columns: 1fr 1fr;
flex-grow: 1;
grid-auto-rows: 1fr;
border: 1px solid #a47764;
flex: 1 1 auto;
}
.skill-cell {
border: 1px solid #a47764;
border-radius: 6px;
border-bottom: 2px solid #a47764;
background-color: #ece3e0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
box-sizing: border-box;
min-width: 140px;
height: 100%;
}
.skill-wrapper {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
}
.skill-inputs {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
}
.skill-inputs .inline-checkbox {
margin-top: 12px;
}
.skill-input {
width: 50px;
border: 1px solid #a47764;
border-radius: 4px;
background-color: white;
font-size: 1.2em;
text-align: center;
font-family: 'Crimson Text', serif;
}
/* End of Skills Panel */
/* Equipment Panel */
.equipment-container {
display: flex;
flex-direction: column;
background-color: #b1a6ae;
border: 1px solid #b1a6ae;
border-radius: 6px;
overflow: visible;
box-sizing: border-box;
width: 320px;
margin: 2px;
}
/* Inventory section */
.inventory-header {
border: 1px solid #b1a6ae;
background-color: #b1a6ae;
color: white;
font-weight: bold;
text-align: center;
font-family: 'Crimson Text', serif;
font-size: 1.25em;
margin-top: 3px;
margin-bottom: 3px;
}
.inventory-list {
display: flex;
flex-direction: column;
gap: .5px;
background-color: #ebe7ec;
border: 2px solid #b1a6ae;
border-radius: 4px;
padding: 2px 2px;
box-sizing: border-box;
justify-content: center;
/* stop stretching; scroll when overflowing */
height: 429px; /* pick a value that matches your panels visual height */
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
}
.inventory-row {
display: flex;
align-items: center;
gap: 6px;
justify-content: center;
}
.inventory-input {
flex: 1;
padding: 2px 4px;
margin-right: 4px;
border: 1px solid #a47764;
border-radius: 4px;
background-color: white;
font-family: 'Crimson Text', serif;
font-size: 1em;
line-height: 1;
box-sizing: border-box;
}
/* Default to inactive (overflow) styling */
.inventory-input {
background-color: #d5e2e6;
}
/* Active inventory slots (change color if active) */
input[name="attr_inventory_active_1"][value="1"] + input.slot-1,
input[name="attr_inventory_active_2"][value="1"] + input.slot-2,
input[name="attr_inventory_active_3"][value="1"] + input.slot-3,
input[name="attr_inventory_active_4"][value="1"] + input.slot-4,
input[name="attr_inventory_active_5"][value="1"] + input.slot-5,
input[name="attr_inventory_active_6"][value="1"] + input.slot-6,
input[name="attr_inventory_active_7"][value="1"] + input.slot-7,
input[name="attr_inventory_active_8"][value="1"] + input.slot-8,
input[name="attr_inventory_active_9"][value="1"] + input.slot-9,
input[name="attr_inventory_active_10"][value="1"] + input.slot-10,
input[name="attr_inventory_active_11"][value="1"] + input.slot-11,
input[name="attr_inventory_active_12"][value="1"] + input.slot-12,
input[name="attr_inventory_active_13"][value="1"] + input.slot-13,
input[name="attr_inventory_active_14"][value="1"] + input.slot-14,
input[name="attr_inventory_active_15"][value="1"] + input.slot-15 {
background-color: #FFFFFF;
}
/* Roll button */
.inventory-roll-button {
display: flex;
align-items: center;
justify-content: center;
vertical-align: middle;
all: unset;
background: none;
border: none;
font-family: 'Crimson Text', serif;
font-weight: 600;
color: #4b2e24;
cursor: pointer;
text-align: center;
padding: 0;
margin: 0;
line-height: 1;
font-size: 0.85em;
height: 20px;
width: 10px;
}
.inventory-roll-button:hover {
color: #a47764;
}
.inventory-input {
flex: 1 1 0 !important; /* Let it grow and shrink as needed */
min-width: 0 !important; /* Allow it to shrink to fit */
width: 100% !important; /* Force it to fill the cell, but not overflow */
box-sizing: border-box;
}
.inventory-header {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
padding: 2px 6px;
column-gap: 8px; /* NEW: guaranteed space between title and buttons */
}
.inventory-header > span { grid-column: 2; justify-self: center; }
.inventory-controls { grid-column: 3; justify-self: end; display: flex; gap: 3px; }
/* Compact +/- buttons in the Inventory header */
.inv-ctl {
all: unset;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-weight: 700;
font-size: 0.8em; /* was 0.9em */
height: 16px; /* was 18px */
min-width: 16px; /* was 18px */
padding: 0 4px; /* was 0 6px */
border: 1px solid #fff;
border-radius: 4px;
line-height: 1;
}
.inv-ctl:hover {
background-color: #ece3e0;
color: #4b2e24;
}
/* Make repeating rows look like the fixed ones */
.repinv-row .inventory-roll-button { /* already styled globally */ }
.repinv-row .repinv-input {
/* inherits .inventory-input, nothing extra needed */
}
/* Hide the default repeating section controls for Inventory */
.repcontainer[data-groupname="repeating_inventory"] .repcontrol {
display: none !important;
}
/* End of Equipment Section */
/* Lower Content */
.lower-content-section {
padding: 4px 0;
display: flex;
align-items: stretch;
width: 100%;
box-sizing: border-box;
gap: 10px; /* Optional, same as upper */
}
/* Other Panel */
.other-container {
flex: 1 1 0;
background-color: #a47764;
border: 1px solid #a47764;
border-radius: 6px;
overflow: visible;
box-sizing: border-box;
display: flex;
flex-direction: column;
}
.other-header {
border: 1px solid #a47764;
background-color: #a47764;
color: white;
font-weight: bold;
text-align: center;
font-family: 'Crimson Text', serif;
font-size: 1.25em;
padding: 4px;
}
/* Repating Controls Visibility */
.repcontainer {
overflow: visible;
z-index: 9999;
}
.repcontrol {
z-index: 9999;
}
.repcontrol .repcontrol_del,
.repcontrol .repcontrol_move {
background-color: yellow;
border: 1px solid red;
z-index: 9999;
}
/* Journal Tab Info */
/* Journal column layout */
.sheet-journal-columns {
display: flex;
flex-direction: column; /* Change from default row to column */
gap: 1rem;
align-items: stretch;
margin-bottom: 0;
}
/* Notes column layout */
.sheet-notes-columns {
display: flex;
flex-direction: column;
gap: 1rem;
align-items: stretch;
margin-bottom: 0;
}
/* Textarea styling */
.sheet-journal-columns textarea,
.sheet-notes-columns textarea {
display: block;
font-family: 'Crimson Text', serif;
font-size: 2rem;
line-height: 2.6rem;
color: #000;
padding: 0.75rem;
border: 1px solid #7c5849;
border-radius: 0.5rem;
min-height: 300px;
resize: vertical;
box-sizing: border-box;
background-color: #fff;
background-image:
linear-gradient(to right, #fff 1rem, transparent 1rem, transparent calc(100% - 1rem), #fff calc(100% - 1rem)),
repeating-linear-gradient(
to bottom,
#fff 0rem,
#fff 2.55rem,
#ccc 2.55rem,
#ccc 2.6rem
);
background-attachment: local;
background-repeat: no-repeat, repeat;
margin: 0;
}
/* === NPC Tab Styling === */
.npc-charinfo-row {
display: flex;
gap: 16px;
align-items: flex-end;
max-width: 875px;
margin: 0 auto;
padding: 8px 0;
}
.npc-charinfo-block {
display: flex;
flex-direction: column;
flex: 1;
min-width: 0;
}
.npc-charinfo-block label {
font-family: 'Crimson Text', serif;
font-size: 1.5em;
color: #4b2e24;
font-weight: bold;
margin-bottom: 4px;
color: #fff;
}
.npc-charinfo-block input {
font-family: 'Crimson Text', serif;
font-size: 1.1em;
padding: 4px 6px;
border: 1px solid #a47764;
border-radius: 4px;
background-color: #fff;
box-sizing: border-box;
}
/* Armor Dropdown */
.sheet-npc select[name="attr_armor"] {
font-family: 'Crimson Text', serif;
font-size: 1em;
padding: 4px 6px;
border: 1px solid #a47764;
border-radius: 4px;
background-color: white;
width: 80px;
box-sizing: border-box;
text-align: center;
}
.npc-flags {
display: flex;
flex-direction: row;
justify-content: space-between;
gap: 12px;
max-width: 875px;
margin: 16px auto 12px auto;
font-family: 'Crimson Text', serif;
}
.npc-flag {
flex: 1;
min-width: 0;
background-color: #ece3e0;
border: 2px solid #a47764;
border-radius: 6px;
padding: 8px 10px;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0px;
height: 160px; /* Equal height for all */
}
.npc-flag label {
display: flex;
align-items: center;
gap: 6px;
font-weight: bold;
color: #4b2e24;
cursor: pointer;
margin: 0;
margin-bottom: 2px;
}
.npc-flag-title {
font-size: 1em;
}
.npc-flag input[type="checkbox"] {
width: 16px;
height: 16px;
cursor: pointer;
}
.npc-flag-desc {
font-size: 1em;
color: #4b2e24;
line-height: 1.2;
}
.npc-upper-content-section {
flex:1;
display: flex;
margin-top: 0;
padding: 4px 0;
max-width: 875px;
box-sizing: border-box;
gap: 6px;
background-color: #ece3e0;
}
/* === NPC Loot Panel (aligned with Core & Secondary Stats) === */
.npc-loot-container {
display: flex;
flex-direction: column;
justify-content: flex-start;
background-color: #a47764;
border: 1px solid #a47764;
border-radius: 6px;
overflow: hidden;
box-sizing: border-box;
width: 200px;
min-width: 180px;
}
.npc-loot-header {
border: 1px solid #a47764;
background-color: #a47764;
color: white;
font-weight: bold;
text-align: center;
font-family: 'Crimson Text', serif;
font-size: 1.25em;
padding: 4px 0;
border-radius: 6px 6px 0 0;
}
.npc-loot-header-row {
display: flex;
justify-content: flex-start;
align-items: center;
padding: 0px 6px;
}
.npc-loot-header-row label {
font-weight: bold;
color: #4b2e24;
font-family: 'Crimson Text', serif;
font-size: 1.1em;
}
.npc-loot-button {
all: unset;
background: none;
border: none;
font-family: 'Crimson Text', serif;
font-weight: 600;
color: #4b2e24;
cursor: pointer;
text-align: center;
line-height: 1;
font-size: 0.85em;
height: 20px;
width: 10px;
}
.npc-loot-button:hover {
color: #a47764;
}
.npc-loot-body {
background-color: #ece3e0;
padding: 6px;
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: stretch;
border-radius: 0 0 6px 6px;
}
.npc-loot-notes-container {
display: flex;
flex: 1;
flex-direction: row;
gap: 2px;
margin-top: 0;
background-color: #a47764;
border: 1px solid #a47764;
border-radius: 6px;
padding: 2px;
box-sizing: border-box;
}
.npc-loot-notes-section {
flex: 1;
display: flex;
flex-direction: column;
background-color: #ece3e0;
border: 1px solid #a47764;
border-radius: 4px;
padding: 2px;
box-sizing: border-box;
}
.npc-loot-notes-section label {
font-weight: bold;
color: #4b2e24;
margin-bottom: 6px;
padding: 2px; 4px;
font-family: 'Crimson Text', serif;
font-size: 1.1em;
}
.npc-loot-notes-section textarea {
flex:1;
font-family: 'Crimson Text', serif;
font-size: 1em;
border: 1px solid #a47764;
border-radius: 4px;
padding: 6px;
resize: vertical;
background-color: #fff;
color: #000;
box-sizing: border-box;
width: 100%;
min-height: 100px;
height: 100%;
}
/* Roll Template Styling */
/* === Darkmode Styling for Roll Templates === */
.sheet-rolltemplate-custom.sheet-rolltemplate-darkmode .inlinerollresult,
.sheet-rolltemplate-attack.sheet-rolltemplate-darkmode .inlinerollresult,
.sheet-rolltemplate-spell.sheet-rolltemplate-darkmode .inlinerollresult,
.sheet-rolltemplate-other.sheet-rolltemplate-darkmode .inlinerollresult,
.sheet-rolltemplate-npc.sheet-rolltemplate-darkmode .inlinerollresult {
background:#fef68e;
display: inline-block;
min-width: 1.5em;
text-align: center;
border: 2px solid rgba(167, 168, 170,1);
}
.sheet-rolltemplate-custom.sheet-rolltemplate-darkmode .inlinerollresult.fullcrit,
.sheet-rolltemplate-attack.sheet-rolltemplate-darkmode .inlinerollresult.fullcrit,
.sheet-rolltemplate-spell.sheet-rolltemplate-darkmode .inlinerollresult.fullcrit,
.sheet-rolltemplate-other.sheet-rolltemplate-darkmode .inlinerollresult.fullcrit,
.sheet-rolltemplate-npc.sheet-rolltemplate-darkmode .inlinerollresult.fullcrit {
background-color:#fef68e;
border: 2px solid #3FB315;
}
.sheet-rolltemplate-custom.sheet-rolltemplate-darkmode .inlinerollresult.fullfail,
.sheet-rolltemplate-attack.sheet-rolltemplate-darkmode .inlinerollresult.fullfail,
.sheet-rolltemplate-spell.sheet-rolltemplate-darkmode .inlinerollresult.fullfail,
.sheet-rolltemplate-other.sheet-rolltemplate-darkmode .inlinerollresult.fullfail,
.sheet-rolltemplate-npc.sheet-rolltemplate-darkmode .inlinerollresult.fullfail {
background-color:#fef68e;
border: 2px solid #B31515;
}
.sheet-rolltemplate-custom.sheet-rolltemplate-darkmode .inlinerollresult.importantroll,
.sheet-rolltemplate-attack.sheet-rolltemplate-darkmode .inlinerollresult.importantroll,
.sheet-rolltemplate-spell.sheet-rolltemplate-darkmode .inlinerollresult.importantroll,
.sheet-rolltemplate-other.sheet-rolltemplate-darkmode .inlinerollresult.importantroll,
.sheet-rolltemplate-npc.sheet-rolltemplate-darkmode .inlinerollresult.importantroll {
border: 2px solid #4A57ED;
}
/* End of Darkmode Styling */
/* custom */
.sheet-rolltemplate-custom .sheet-template-container {
background: #ece3e0;
border: 2px solid #a47764;
border-radius: 8px;
padding: 8px;
font-family: sans-serif;
color: #4b2e24;
width: 95%;
margin: 10px auto;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.50);
}
.sheet-rolltemplate-custom .sheet-template-header {
font-size: 1.2em;
font-weight: bold;
border-bottom: 1px solid #a47764;
margin-bottom: 4px;
padding-bottom: 4px;
text-align: center;
}
.sheet-rolltemplate-custom .sheet-template-body {
font-size: 1.1em;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
.sheet-rolltemplate-custom .sheet-label {
font-weight: bold;
margin-right: 5px;
}
.sheet-rolltemplate-custom .sheet-result-box {
display: flex;
text-align: center;
justify-content: center;
align-items: center;
border: 2px solid #a47764;
background-color: #FEF68E;
height: 20px;
width: 20px;
border-radius: 6px;
padding: 6px;
margin-top: 2px;
}
.sheet-rolltemplate-darkmode-custom .sheet-darkmode-result-box {
display: flex;
text-align: center;
justify-content: center;
align-items: center;
border: 2px solid #a47764;
background-color: #FEF68E;
height: 20px;
width: 20px;
border-radius: 6px;
padding: 6px;
margin-top: 2px;
}
/* end of custom */
/* attack */
.sheet-rolltemplate-attack .sheet-template-container {
background-color: #F1D5D4;
border: 2px solid #A1504C;
border-radius: 6px;
padding: 8px;
font-family: inherit;
color: #3E1D1B;
}
.sheet-rolltemplate-attack .sheet-template-header {
background-color: #A1504C;
color: white;
font-weight: bold;
font-size: 1.25em;
padding: 4px;
border-radius: 4px;
margin-bottom: 6px;
text-align: center;
}
.sheet-rolltemplate-attack .sheet-template-body {
font-size: 0.95em;
line-height: 1.4;
}
.sheet-rolltemplate-attack .sheet-result-flex {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 6px;
font-size: 1.1em;
}
.sheet-rolltemplate-attack .sheet-result-box {
display: inline-flex;
justify-content: center;
align-items: center;
border: 2.5px solid #a0776b; /* Attack panel pink/red */
background: #fff;
border-radius: 8px;
padding: 2px 10px;
font-size: 1.2em;
font-weight: bold;
margin: 0 10px 0 0;
min-width: 0;
box-sizing: border-box;
}
.sheet-rolltemplate-attack .inlinerollresult.fullfail {
background: #fff !important;
border: 2px solid #c0392b !important;
color: #c0392b !important;
}
.sheet-rolltemplate-attack .inlinerollresult.fullcrit {
background: #fff !important;
border: 2px solid #237c3b !important;
color: #237c3b !important;
}
/* Keep the base style small and neutral */
.sheet-rolltemplate-attack .inlinerollresult,
.sheet-rolltemplate-attack .inlinerollresult.importantroll {
background: #fff !important;
border: 2px solid #a0776b !important;
color: #422a22 !important;
font-weight: bold;
font-size: 1em;
border-radius: 6px !important;
box-shadow: none !important;
padding: 2px 8px;
display: inline-block;
margin: 0;
}
.sheet-rolltemplate-attack hr.sheet-divider {
border: none;
border-top: 1px solid #6c2e2e; /* Match Attack Detail header tone */
margin: 8px 0;
}
.sheet-rolltemplate-attack .sheet-damage-label {
font-weight: normal;
}
.sheet-rolltemplate-attack .sheet-info-line {
margin-top: 10px;
font-size: 0.95em;
line-height: 1.5em;
}
.sheet-rolltemplate-attack .sheet-info-line span {
display: block;
margin-bottom: 3px;
}
.sheet-rolltemplate-attack .sheet-info-line strong {
font-weight: bold;
}
.sheet-rolltemplate-attack .sheet-info-line div {
margin: 2px 0;
}
.sheet-rolltemplate-attack .sheet-info-line .label {
font-weight: bold;
}
.sheet-rolltemplate-attack .sheet-info-line div span {
font-weight: normal;
}
.sheet-rolltemplate-attack .sheet-notes {
margin-top: 6px;
padding: 6px;
background-color: #F9E6E5;
border: 1px solid #A1504C;
border-radius: 4px;
white-space: pre-wrap;
}
/* end of attack */
/* spell */
.sheet-rolltemplate-spell .sheet-template-container {
background: #d5e2e6;
border: 2px solid #426572;
border-radius: 8px;
padding: 8px;
font-family: sans-serif;
color: #4b2e24;
width: 95%;
margin: 10px auto;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.50);
}
.sheet-rolltemplate-spell .sheet-template-header {
font-size: 1.2em;
font-weight: bold;
border-bottom: 1px solid #a47764;
margin-bottom: 4px;
padding-bottom: 4px;
text-align: center;
color: #4b2e24;
}
.sheet-rolltemplate-spell .sheet-template-body {
font-size: 1.1em;
display: flex;
flex-direction: column;
gap: 4px;
}
.sheet-rolltemplate-spell .sheet-damage-roll {
font-weight: bold;
padding: 4px 10px;
border: 2px solid #a47764;
border-radius: 6px;
background: #FEF68E;
display: inline-block;
height: 20px;
padding: 6px;
}
.sheet-rolltemplate-spell .sheet-spell-info > div {
margin-top: 2px;
}
.sheet-rolltemplate-spell .sheet-notes {
padding-top: 4px;
font-size: 1em;
color: #3a1e13;
border-top: 1px solid #a47764;
}
/* end of spell */
/* other */
/* Other (Abilities & Misc) Template */
.sheet-rolltemplate-other .sheet-template-container {
background: #e8e8e5;
border: 2px solid #908c7e;
border-radius: 8px;
padding: 8px;
font-family: sans-serif;
color: #4b2e24;
width: 95%;
margin: 10px auto;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}
.sheet-rolltemplate-other .sheet-template-header {
font-size: 1.2em;
font-weight: bold;
text-align: center;
border-bottom: 1px solid #a47764;
margin-bottom: 6px;
padding-bottom: 4px;
}
.sheet-rolltemplate-other .sheet-template-body {
font-size: 1em;
line-height: 1.4;
text-align: left;
}
.sheet-rolltemplate-other .sheet-notes {
font-size: 1em;
color: #3a1e13;
white-space: pre-wrap;
}
.sheet-rolltemplate-other .sheet-subheader {
font-size: 1.1em;
font-weight: bold;
text-align: center;
color: #4b2e24;
margin-bottom: 6px;
border-bottom: 1px dashed #a47764;rolltemplate-attack
padding-bottom: 2px;
}
/* end of other */
/* Other (Abilities & Misc) Template */
.sheet-rolltemplate-npc .sheet-template-container {
background: #f7e1cc;
border: 2px solid #db7d1f;
border-radius: 8px;
padding: 8px;
font-family: sans-serif;
color: #4b2e24;
width: 95%;
margin: 10px auto;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}
.sheet-rolltemplate-npc .sheet-template-header {
font-size: 1.2em;
font-weight: bold;
text-align: center;
border-bottom: 1px solid #db7d1f;
margin-bottom: 6px;
padding-bottom: 4px;
}
.sheet-rolltemplate-npc .sheet-template-body {
font-size: 1em;
line-height: 1.4;
text-align: left;
}
.sheet-rolltemplate-npc .sheet-notes {
font-size: 1em;
color: #3a1e13;
white-space: pre-wrap;
}
.sheet-rolltemplate-npc .sheet-subheader {
font-size: 1.1em;
font-weight: bold;
text-align: center;
color: #4b2e24;
margin-bottom: 6px;
border-bottom: 1px dashed #db7d1f;
padding-bottom: 2px;
}
/* end of NPC */
/* === Macro roll template === */
.sheet-rolltemplate-macro .sheet-template-container {
background: #ebe7ec;
border: 2px solid #b1a6ae;
border-radius: 8px;
padding: 8px;
font-family: 'Crimson Text', serif;
color: #4b2e24;
width: 95%;
margin: 10px auto;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.50);
}
.sheet-rolltemplate-macro .sheet-template-header {
background: #b1a6ae !important;
color: #fff !important;
font-weight: bold;
font-size: 1.2em;
padding: 4px;
border-radius: 4px;
margin-bottom: 4px;
text-align: center;
}
.sheet-rolltemplate-macro .sheet-template-body {
display: block;
flex-direction: column;
align-items: center;
}
/* Keep using .sheet-inventory-result-box in your macro HTML, or rename if you prefer */
.sheet-rolltemplate-macro .sheet-inventory-result-box {
display: block; /* stop shrink-wrapping */
width: 100%; /* fill the card */
max-width: 100%;
line-height: 1.35;
white-space: normal;
word-break: normal; /* don't break inside words */
overflow-wrap: anywhere; /* wrap at spaces/punctuation; anywhere if needed */
text-align: left; /* optional: easier to read long text */
margin: 14px auto 0; /* keep your existing spacing */
padding: 12px 18px;
border: 2px solid #b1a6ae !important;
background: #fff;
color: #4b2e24;
border-radius: 6px;
font-size: 1em;
font-family: 'Crimson Text', serif;
box-sizing: border-box;
}
/* Optional: subheader for your {{source}} field (keeps palette, unobtrusive) */
.sheet-rolltemplate-macro .sheet-template-subheader {
margin: 6px 0 2px;
color: #a47764;
text-align: center;
font-style: italic;
}
/* NimbleSheet: improve inline roll readability inside MACRO template only */
.sheet-rolltemplate-macro .inlinerollresult {
display: inline-block;
padding: 1px 6px;
border: 2px solid #b1a6ae !important;
border-radius: 6px;
background: #ffffff !important;
color: #4b2e24 !important;
font-weight: 700;
line-height: 1.1;
vertical-align: baseline;
white-space: nowrap; /* keep numbers intact */
box-shadow: 0 1px 0 rgba(0,0,0,.12);
}
/* Crit / fail / important—subtle, readable color cues */
.sheet-rolltemplate-macro .inlinerollresult.fullcrit {
border-color: #3a9d62 !important; /* green */
background: #eef8f2 !important;
}
.sheet-rolltemplate-macro .inlinerollresult.fullfail {
border-color: #b85a5a !important; /* red */
background: #fbf0f0 !important;
}
.sheet-rolltemplate-macro .inlinerollresult.importantroll {
border-color: #c8a35a !important; /* gold */
background: #fff9e8 !important;
}
/* Keep the text box itself comfortable for long paragraphs */
.sheet-rolltemplate-macro .sheet-inventory-result-box {
line-height: 1.35;
text-align: left;
}
/* End of macro styling */
/* NPC Attack = clone of player Attack styling */
.sheet-rolltemplate-npcattack .sheet-template-container {
background-color: #F1D5D4;
border: 2px solid #A1504C;
border-radius: 6px;
padding: 8px;
font-family: inherit;
color: #3E1D1B;
}
.sheet-rolltemplate-npcattack .sheet-template-header {
background-color: #A1504C;
color: white;
font-weight: bold;
font-size: 1.25em;
padding: 4px;
border-radius: 4px;
margin-bottom: 6px;
text-align: center;
}
.sheet-rolltemplate-npcattack .sheet-template-body {
font-size: 0.95em;
line-height: 1.4;
}
.sheet-rolltemplate-npcattack .sheet-result-flex {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 6px;
font-size: 1.1em;
}
.sheet-rolltemplate-npcattack .sheet-result-box {
display: inline-flex;
justify-content: center;
align-items: center;
border: 2.5px solid #a0776b; /* Attack panel pink/red */
background: #fff;
border-radius: 8px;
padding: 2px 10px;
font-size: 1.2em;
font-weight: bold;
margin: 0 10px 0 0;
min-width: 0;
box-sizing: border-box;
}
.sheet-rolltemplate-npcattack .inlinerollresult.fullfail {
background: #fff !important;
border: 2px solid #c0392b !important;
color: #c0392b !important;
}
.sheet-rolltemplate-npcattack .inlinerollresult.fullcrit {
background: #fff !important;
border: 2px solid #237c3b !important;
color: #237c3b !important;
}
/* Keep the base style small and neutral */
.sheet-rolltemplate-npcattack .inlinerollresult,
.sheet-rolltemplate-npcattack .inlinerollresult.importantroll {
background: #fff !important;
border: 2px solid #a0776b !important;
color: #422a22 !important;
font-weight: bold;
font-size: 1em;
border-radius: 6px !important;
box-shadow: none !important;
padding: 2px 8px;
display: inline-block;
margin: 0;
}
.sheet-rolltemplate-npcattack hr.sheet-divider {
border: none;
border-top: 1px solid #6c2e2e; /* Match Attack Detail header tone */
margin: 8px 0;
}
.sheet-rolltemplate-npcattack .sheet-damage-label {
font-weight: normal;
}
.sheet-rolltemplate-npcattack .sheet-info-line {
margin-top: 10px;
font-size: 0.95em;
line-height: 1.5em;
}
.sheet-rolltemplate-npcattack .sheet-info-line span {
display: block;
margin-bottom: 3px;
}
.sheet-rolltemplate-npcattack .sheet-info-line strong {
font-weight: bold;
}
.sheet-rolltemplate-npcattack .sheet-info-line div {
margin: 2px 0;
}
.sheet-rolltemplate-npcattack .sheet-info-line .label {
font-weight: bold;
}
.sheet-rolltemplate-npcattack .sheet-info-line div span {
font-weight: normal;
}
.sheet-rolltemplate-npcattack .sheet-notes {
margin-top: 6px;
padding: 6px;
background-color: #F9E6E5;
border: 1px solid #A1504C;
border-radius: 4px;
white-space: pre-wrap;
}
/* End of NPC Attack */
/* End of Roll Template Styling */
/* === NimbleV Attack Panel Styles === */
.attacks-wrapper {
width: 320px;
background-color: #D8B4B2;
border: 2px solid #A1504C;
border-radius: 8px;
padding: 2px;
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: 2px;
}
.attacks-header {
background-color: #A1504C;
color: white;
font-weight: bold;
text-align: center;
font-size: 1.25em;
padding: 2px;
border-radius: 6px;
border: 1px solid #A1504C;
box-sizing: border-box;
}
.attack-roll-setup {
width: 100%;
background-color: #D8B4B2;
padding: 2px;
display: flex;
flex-direction: column;
box-sizing: border-box;
}
.attack-roll-inner {
width: 100%;
display: flex;
flex-direction: column;
gap: 1px;
}
.attack-roll-row {
display: flex;
gap: 2px;
}
.attack-roll-row.labels {
align-items: flex-end;
}
.attack-roll-row.inputs {
align-items: flex-start;
}
.attack-roll-row.inputs .attack-roll-cell {
display: flex;
align-items: center;
justify-content: center;
}
.attack-roll-cell.roll-type {
width: 115px;
}
.attack-roll-cell.adv-dis {
width: 75px;
}
.attack-roll-cell.crit {
width: 25px;
display: flex;
flex-direction: column;
align-items: center;
}
.attack-roll-cell.die-size {
width: 45px;
}
.attack-roll-row.labels .attack-roll-cell {
font-weight: bold;
color: #3E1D1B;
text-align: center;
font-size: 0.9em;
}
.attack-roll-cell select,
.attack-roll-cell input {
width: 100%;
padding: 4px 2px;
border: 1px solid #A1504C;
border-radius: 4px;
background-color: white;
font-family: inherit;
font-size: 0.95em;
box-sizing: border-box;
}
.crit-roll-button {
all: unset;
cursor: pointer;
font-size: 1.2em;
font-weight: bold;
background-color: transparent;
color: #3E1D1B;
padding: 4px 8px;
display: inline-block;
text-align: center;
}
.crit-roll-button:hover {
color: #A1504C;
}
/* Repeating attack entry */
.attack-entry {
background-color: #F1D5D4;
border: 1px solid #A1504C;
border-radius: 6px;
padding: 6px;
margin-bottom: 6px;
display: flex;
flex-direction: column;
gap: 4px;
box-sizing: border-box;
}
.attack-top-row {
display: flex;
align-items: center;
gap: 6px;
padding: 2px 0;
}
.attack-roll-button {
all: unset;
cursor: pointer;
font-size: 1.2em;
font-weight: bold;
background-color: transparent;
color: #3E1D1B;
padding: 4px 8px;
display: inline-block;
text-align: center;
}
.attack-roll-button:hover {
color: #A1504C;
}
.attack-name-input {
width: 190px;
padding: 4px 6px;
font-size: 0.95em;
border: 1px solid #A1504C;
border-radius: 4px;
background-color: white;
font-family: inherit;
box-sizing: border-box;
}
.attack-toggle-checkbox {
position: absolute;
top: 16px;
right: 8px;
width: 16px;
height: 16px;
cursor: pointer;
z-index: 1;
}
/* Toggle detail section */
.attack-details {
display: none;
margin-top: 4px;
padding-top: 4px;
border-top: 1px dashed #A1504C;
color: #3E1D1B;
}
input[name="attr_attack_toggle"]:checked ~ .attack-details {
display: block;
}
/* === Primary Grid (4-column dice config) === */
.attack-details-grid {
display: flex;
flex-direction: column;
gap: 2px;
}
.attack-details-row {
display: flex;
gap: 6px;
}
.attack-details-row .attack-detail-cell:nth-child(1) { width: 50px; }
.attack-details-row .attack-detail-cell:nth-child(2) { width: 70px; }
.attack-details-row .attack-detail-cell:nth-child(3) { width: 70px; }
.attack-details-row .attack-detail-cell:nth-child(4) { width: 50px; }
.attack-details-row.labels .attack-detail-cell {
font-weight: bold;
color: #3E1D1B;
font-size: 0.85em;
text-align: center;
}
/* This will keep the ability dropdown a sane size */
.attack-details-row.inputs select[name="attr_attack_ability"] {
max-width: 70px; /* Adjust to taste */
width: auto;
min-width: 40px;
box-sizing: border-box;
}
.attack-detail-cell select {
max-width: 80px;
width: auto;
min-width: 40px;
}
select[name="attr_attack_ability"] {
max-width: 80px !important;
width: auto !important;
}
.attack-details-row.inputs .attack-detail-cell input,
.attack-details-row.inputs .attack-detail-cell select {
width: 100%;
padding: 4px 6px;
border: 1px solid #A1504C;
border-radius: 4px;
background-color: white;
font-family: inherit;
font-size: 0.9em;
box-sizing: border-box;
}
/* === Description Section With Labels === */
.attack-description-layout {
display: flex;
flex-direction: column;
gap: 4px;
margin-top: 6px;
box-sizing: border-box;
}
/* Layout rows */
.desc-row {
display: flex;
gap: 6px;
box-sizing: border-box;
}
.desc-row.labels {
align-items: flex-end;
text-align: center;
}
.desc-row.inputs {
align-items: flex-start;
}
/* Each label */
.desc-label {
width: 80px;
font-weight: bold;
font-size: 0.85em;
color: #3E1D1B;
text-align: center;
}
/* Text input fields */
.desc-row.inputs input {
padding: 4px 6px;
font-size: 0.9em;
font-family: inherit;
border: 1px solid #A1504C;
border-radius: 4px;
background-color: white;
box-sizing: border-box;
margin: 0 auto;
}
/* Roll button */
.attack-detail-roll-button {
width: 28px;
all: unset;
cursor: pointer;
font-size: 1.1em;
font-weight: bold;
color: #3E1D1B;
padding: 4px 6px;
text-align: center;
background-color: transparent;
box-sizing: border-box;
}
.attack-detail-roll-button:hover {
color: #A1504C;
}
/* Notes section */
.desc-notes {
display: flex;
flex-direction: column;
gap: 1px;
box-sizing: border-box;
}
.desc-notes label {
font-weight: bold;
font-size: 0.85em;
color: #3E1D1B;
margin-left: 2px;
margin-bottom: 2px;
}
.desc-notes textarea {
width: 100%;
min-height: 84px;
padding: 6px;
font-size: 0.9em;
font-family: inherit;
border: 1px solid #A1504C;
border-radius: 4px;
background-color: white;
box-sizing: border-box;
resize: vertical;
}
.action-input {
width: 60px;
}
.action-label {
width: 60px;
}
.range-input {
width: 60px;
}
.range-label {
width: 60px;
}
.target-input {
width: 120px;
}
.target-label {
width: 120px;
}
.desc-row.inputs .damage-type {
width: 250px;
}
.desc-label.chat-icon {
font-size: 1.2em;
line-height: 1;
text-align: center;
width: 28px;
}
.damage-type-label {
margin-left: -4px;
}
.sheet-rolltemplate-attackdetail .sheet-template-container {
background-color: #F1D5D4;
border: 2px solid #A1504C;
border-radius: 6px;
padding: 8px;
font-family: inherit;
color: #3E1D1B;
}
.sheet-rolltemplate-attackdetail .sheet-template-header {
background-color: #A1504C;
color: white;
font-weight: bold;
font-size: 1.25em;
padding: 4px;
border-radius: 4px;
margin-bottom: 6px;
text-align: center;
}
.sheet-rolltemplate-attackdetail .sheet-subheader {
font-weight: bold;
font-size: 1.1em;
color: #3E1D1B;
margin-bottom: 6px;
text-align: Left;
border-bottom: 1px solid #A1504C;
padding-bottom: 2px;
}
.sheet-rolltemplate-attackdetail .sheet-template-body {
font-size: 0.95em;
line-height: 1.4;
}
.sheet-rolltemplate-attackdetail .sheet-notes {
margin-top: 4px;
padding: 6px;
background-color: #F9E6E5;
border: 1px solid #A1504C;
border-radius: 4px;
white-space: pre-wrap;
}
/* === Spells Panel Styling === */
.spells-wrapper {
width: 283px;
background-color: #C8AFCF;
border: 2px solid #310A31;
border-radius: 8px;
padding: 2px;
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: 2px;
}
.spells-header {
background-color: #310A31;
color: white;
font-weight: bold;
text-align: center;
font-size: 1.25em;
padding: 2px;
border-radius: 6px;
border: 1px solid #310A31;
box-sizing: border-box;
}
.spells-mana-setup {
background-color: #C8AFCF;
padding: 2px;
display: flex;
flex-direction: column;
box-sizing: border-box;
}
.mana-row {
display: flex;
align-items: center;
gap: 4px;
justify-content: center;
font-weight: bold;
color: #310A31;
}
.mana-label {
font-size: 1em;
}
.mana-slash {
font-size: 1em;
margin: 0 2px;
}
.mana-input {
width: 50px;
padding: 4px 6px;
border: 1px solid #310A31;
border-radius: 4px;
font-family: inherit;
font-size: 0.95em;
background-color: white;
text-align: center;
box-sizing: border-box;
}
/* === Repeating Spells === */
.spell-entry {
background-color: #E7DBEC;
border: 1px solid #310A31;
border-radius: 6px;
padding: 6px;
margin-bottom: 6px;
display: flex;
flex-direction: column;
gap: 4px;
box-sizing: border-box;
}
.spell-top-row {
display: flex;
align-items: center;
gap: 6px;
padding: 2px 0;
}
.spell-roll-button {
all: unset;
cursor: pointer;
font-size: 1.2em;
font-weight: bold;
color: #310A31;
padding: 4px 8px;
text-align: center;
}
.spell-roll-button:hover {
color: #643E63;
}
.spell-name-input {
width: 190px;
padding: 4px 6px;
font-size: 0.95em;
border: 1px solid #310A31;
border-radius: 4px;
background-color: white;
font-family: inherit;
box-sizing: border-box;
}
/* Toggle */
.spell-toggle-checkbox {
position: absolute;
top: 20px;
right: 8px;
width: 16px;
height: 16px;
cursor: pointer;
z-index: 1;
}
/* Hidden details */
.spell-details {
display: none;
margin-top: 4px;
padding-top: 4px;
border-top: 1px dashed #310A31;
color: #310A31;
}
input[name="attr_spell_toggle"]:checked ~ .spell-details {
display: block;
}
/* Layout rows */
.spell-detail-row {
display: flex;
gap: 6px;
}
.spell-detail-row.full {
display: flex;
flex-direction: column;
gap: 1px;
margin-top: 4px;
}
.spell-detail-block {
flex: 1;
display: flex;
flex-direction: column;
}
.spell-detail-block label,
.spell-detail-row.full label {
font-weight: bold;
font-size: 0.85em;
color: #310A31;
margin-bottom: 1px;
line-height: 1.1;
}
.spell-detail-block input,
.spell-detail-row.full input,
.spell-detail-row.full textarea,
.spell-detail-block select {
width: 100%;
padding: 4px 6px;
border: 1px solid #310A31;
border-radius: 4px;
font-family: inherit;
font-size: 0.9em;
background-color: white;
box-sizing: border-box;
resize: vertical;
}
.sheet-rolltemplate-spell .sheet-template-container {
background-color: #EBDCED; /* soft lavender/pink background */
border: 2px solid #310A31;
border-radius: 6px;
padding: 8px;
font-family: inherit;
color: #310A31;
}
.sheet-rolltemplate-spell .sheet-template-header {
background-color: #310A31;
color: white;
font-weight: bold;
font-size: 1.25em;
padding: 4px;
border-radius: 4px;
margin-bottom: 6px;
text-align: center;
}
.sheet-rolltemplate-spell .sheet-subheader {
font-weight: bold;
font-size: 1.1em;
color: #310A31;
margin-bottom: 6px;
text-align: left;
border-bottom: 1px solid #A87CA0;
padding-bottom: 2px;
}
.sheet-rolltemplate-spell .sheet-template-body {
font-size: 0.95em;
line-height: 1.4;
}
.sheet-rolltemplate-spell .sheet-notes {
margin-top: 4px;
padding: 6px;
background-color: #F5ECF7;
border: 1px solid #A87CA0;
border-radius: 4px;
white-space: pre-wrap;
}
/* === Abilities & Other Panel === */
.other-wrapper {
width: 275px;
background-color: #DDE5D0;
border: 2px solid #729B79;
border-radius: 8px;
padding: 4px;
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: 6px;
}
.other-header {
background-color: #729B79;
color: #FFF;
font-weight: bold;
text-align: center;
font-size: 1.25em;
padding: 4px;
border-radius: 6px;
border: 1px solid #729B79;
box-sizing: border-box;
}
.hitdie-setup {
width: 100%;
display: flex;
justify-content: center;
}
.hitdie-row {
display: flex;
align-items: center;
gap: 2px;
font-weight: bold;
color: #1C1C1C;
flex-wrap: nowrap;
justify-content: flex-start;
align-self: flex-start;
}
/* Roll Button */
.hitdie-roll-button {
all: unset;
cursor: pointer;
font-size: 1em;
font-weight: bold;
color: #3E1D1B;
background: none;
padding: 3px 6px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
align-self: flex-start;
margin-bottom: 5px;
}
.hitdie-roll-button:hover {
color: #716259;
}
/* Label */
.hitdie-label {
white-space: nowrap;
font-size: 0.95em;
margin-right: 2px;
align-self: flex-start;
}
/* Slash */
.hitdie-slash {
margin: 0 2px;
font-weight: bold;
align-self: flex-start;
}
/* Inputs */
.hitdie-input {
width: 40px;
padding: 2px;
border: 1px solid #729B79;
border-radius: 4px;
background-color: white;
font-family: inherit;
font-size: 0.9em;
text-align: center;
align-self: flex-start;
margin-top: 2px;
}
/* Die Size Dropdown */
.hitdie-die-select {
width: 50px;
padding: 2px;
font-size: 0.9em;
line-height: 1.2;
border: 1px solid #729B79;
border-radius: 4px;
background-color: white;
font-family: inherit;
box-sizing: border-box;
align-self: flex-start;
}
/* Repeating Other Entry */
.other-entry {
background-color: #E9EFE7;
border: 1px solid #729B79;
border-radius: 6px;
padding: 6px;
display: flex;
flex-direction: column;
gap: 4px;
}
.other-toggle-checkbox {
position: absolute;
top: 16px;
right: 8px;
width: 16px;
height: 16px;
cursor: pointer;
z-index: 1;
}
.other-top-row {
display: flex;
align-items: center;
gap: 6px;
}
.other-name-input {
width: 190px;
padding: 4px 6px;
font-size: 0.95em;
border: 1px solid #729B79;
border-radius: 4px;
background-color: white;
font-family: inherit;
box-sizing: border-box;
}
.other-details {
display: none;
margin-top: 4px;
padding-top: 4px;
border-top: 1px dashed #729B79;
color: #1C1C1C;
}
input[name="attr_other_toggle"]:checked ~ .other-details {
display: block;
}
.other-detail-row.full {
display: flex;
flex-direction: column;
gap: 2px;
}
.other-detail-row.full label {
font-weight: bold;
font-size: 0.85em;
color: #1C1C1C;
}
.other-detail-row.full textarea {
width: 100%;
min-height: 64px;
padding: 6px;
font-size: 0.9em;
font-family: inherit;
border: 1px solid #729B79;
border-radius: 4px;
background-color: white;
resize: vertical;
box-sizing: border-box;
}
/* === NPC Abilities & Other Panel === */
.npc-other-wrapper {
width: 100%;
background-color: #CCC;
border: 2px solid #888;
border-radius: 8px;
padding: 4px;
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: 6px;
}
.npc-other-header {
background-color: #888;
color: #FFF;
font-weight: bold;
text-align: center;
font-size: 1.25em;
padding: 4px;
border-radius: 6px;
border: 1px solid #888;
box-sizing: border-box;
}
/* Repeating Other Entry */
.npc-other-entry {
background-color: #F9F9F9;
border: 1px solid #888;
border-radius: 6px;
padding: 6px;
display: flex;
flex-direction: column;
gap: 4px;
}
.npc-other-toggle-checkbox {
position: absolute;
top: 16px;
right: 8px;
width: 16px;
height: 16px;
cursor: pointer;
z-index: 1;
}
.npc-other-top-row {
display: flex;
align-items: center;
gap: 6px;
}
.npc-other-name-input {
width: 190px;
padding: 4px 6px;
font-size: 0.95em;
border: 1px solid #888;
border-radius: 4px;
background-color: white;
font-family: inherit;
box-sizing: border-box;
}
.npc-other-details {
display: none;
margin-top: 4px;
padding-top: 4px;
border-top: 1px dashed #888;
color: #1C1C1C;
}
input[name="attr_npc_other_toggle"]:checked ~ .npc-other-details {
display: block;
}
.npc-other-detail-row.full {
display: flex;
flex-direction: column;
gap: 2px;
}
.npc-other-detail-row.full label {
font-weight: bold;
font-size: 0.85em;
color: #1C1C1C;
}
.npc-other-detail-row.full textarea {
width: 100%;
min-height: 64px;
padding: 6px;
font-size: 0.9em;
font-family: inherit;
border: 1px solid #729B79;
border-radius: 4px;
background-color: white;
resize: vertical;
box-sizing: border-box;
}
.npc-other-roll-button {
all: unset;
cursor: pointer;
font-weight: bold;
background-color: transparent;
color: #3E1D1B;
display: inline-block;
text-align: center;
padding: 2px 4px;
line-height: 1;
transform: scale(0.85);
transform-origin: center;
}
.sheet-rolltemplate-other .sheet-template-container {
background-color: #E7F1E4; /* light background for soft contrast */
border: 2px solid #729B79;
border-radius: 6px;
padding: 8px;
font-family: inherit;
color: #2B2B2B;
}
.sheet-rolltemplate-other .sheet-template-header {
background-color: #729B79;
color: white;
font-weight: bold;
font-size: 1.25em;
padding: 4px;
border-radius: 4px;
margin-bottom: 6px;
text-align: center;
}
.sheet-rolltemplate-other .sheet-subheader {
font-weight: bold;
font-size: 1.1em;
color: #2B2B2B;
margin-bottom: 6px;
text-align: left;
border-bottom: 1px solid #729B79;
padding-bottom: 2px;
}
.sheet-rolltemplate-other .sheet-template-body {
font-size: 0.95em;
line-height: 1.4;
}
.sheet-rolltemplate-other .sheet-notes {
margin-top: 4px;
padding: 6px;
background-color: #F0F5EF;
border: 1px solid #BACDB0;
border-radius: 4px;
white-space: pre-wrap;
}
.sheet-rolltemplate-npc .sheet-template-container {
background-color: #F9F9F9;
border: 2px solid #888;
border-radius: 6px;
padding: 8px;
font-family: inherit;
color: #333;
}
.sheet-rolltemplate-npc .sheet-template-header {
background-color: #888;
color: white;
font-weight: bold;
font-size: 1.25em;
padding: 4px;
border-radius: 4px;
margin-bottom: 6px;
text-align: center;
border: none; /* This removes all borders */
}
.sheet-rolltemplate-npc .sheet-subheader {
font-weight: bold;
font-size: 1.1em;
color: #444;
margin-bottom: 4px;
text-align: center;
}
.sheet-rolltemplate-npc .sheet-template-body {
font-size: 0.95em;
line-height: 1.4;
}
.sheet-rolltemplate-npc .sheet-notes {
margin-top: 4px;
padding: 6px;
background-color: #EFEFEF;
border: 1px solid #CCC;
border-radius: 4px;
white-space: pre-wrap;
}
.sheet-rolltemplate-npc .sheet-subheader {
border-bottom: 1px solid #CCC;
padding-bottom: 2px;
margin-bottom: 6px;
}
.sheet-rolltemplate-npc *:focus {
outline: none;
}
/* Set consistent widths for dice/ability row fields */
.attack-details-row.inputs input[name="attr_attack_num_dice"],
.attack-details-row.inputs input[name="attr_attack_static_mod"] {
width: 38px !important;
min-width: 32px;
max-width: 44px;
box-sizing: border-box;
text-align: center;
}
.attack-details-row.inputs select[name="attr_attack_die"] {
width: 55px !important;
min-width: 40px;
max-width: 64px;
box-sizing: border-box;
text-align: center;
}
.attack-details-row.inputs select[name="attr_attack_ability"] {
width: 68px !important;
min-width: 55px;
max-width: 80px;
box-sizing: border-box;
text-align: center;
}
/* (Optional) reduce padding/margin on attack detail cells */
.attack-detail-cell {
padding: 1px 2px;
margin: 0;
}
/* Make Crit Die dropdown match your main Die Size dropdown */
select[name="attr_attack_crit_die"] {
width: 68px !important;
min-width: 55px;
max-width: 80px;
box-sizing: border-box;
text-align: center;
}
input[name="attr_attack_damage_type"] {
width: 110px !important; /* or 100px, to taste */
min-width: 70px;
max-width: 140px;
box-sizing: border-box;
text-align: center;
}
.damage-type-label {
display: block;
width: 100%;
text-align: center;
margin-bottom: 2px;
font-weight: bold;
}
.damage-type-container {
display: flex;
flex-direction: column;
align-items: center;
}
/* Move the chat bubble right */
.chat-icon {
margin-left: 30px; /* or tweak 16-22px for perfect alignment */
font-size: 1.15em; /* keeps icon crisp */
width: 28px; /* matches button size visually */
text-align: center;
}
/* Move the dice roll button right as well */
button.attack-detail-roll-button {
margin-left: 30px !important;
align-self: flex-start !important;
}
.sheet-rolltemplate-crit .sheet-template-container {
background-color: #F1D5D4;
border: 2px solid #A1504C;
border-radius: 6px;
padding: 8px;
font-family: inherit;
color: #3E1D1B;
margin: 4px 0;
}
.sheet-rolltemplate-crit .sheet-template-header {
background-color: #A1504C;
color: white;
font-weight: bold;
font-size: 1.25em;
padding: 4px;
border-radius: 4px;
margin-bottom: 6px;
text-align: center;
}
.sheet-rolltemplate-crit .sheet-template-body {
font-size: 1em;
line-height: 1.4;
}
.sheet-rolltemplate-crit .sheet-result-flex {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 6px;
font-size: 1.3em;
justify-content: center;
}
.sheet-rolltemplate-crit .sheet-result-box {
background-color: #FFFDB0;
border: 2px solid #A1504C;
border-radius: 6px;
padding: 2px 10px; /* (try 2px vertical, 10px horizontal) */
font-weight: bold;
color: #3E1D1B;
font-size: 1.1em; /* (try 1.1em or 1.2em) */
}
.sheet-rolltemplate-crit .sheet-crit-dice {
display: block;
margin-bottom: 6px;
font-size: 1.1em;
text-align: center;
}
.sheet-rolltemplate-crit .inlinerollresult,
.sheet-rolltemplate-crit .inlinerollresult.fullcrit,
.sheet-rolltemplate-crit .inlinerollresult.fullfail,
.sheet-rolltemplate-crit .inlinerollresult.importantroll {
background: none !important;
color: #3E1D1B !important;
border: none !important;
font-size: 1.5em !important;
font-weight: bold !important;
box-shadow: none !important;
padding: 0 !important;
border-radius: 0 !important;
}
.sheet-rolltemplate-hitdie .sheet-template-container {
background: #e3eddf;
border: 2px solid #4e8253;
border-radius: 8px;
padding: 8px;
font-family: 'Crimson Text', serif;
color: #2c3d29;
width: 95%;
margin: 10px auto;
box-shadow: 0 4px 10px rgba(0,0,0,0.12);
}
.sheet-rolltemplate-hitdie .sheet-template-header {
background: #4e8253;
color: #fff;
font-weight: bold;
font-size: 1.25em;
padding: 4px;
border-radius: 4px;
margin-bottom: 6px;
text-align: center;
}
.sheet-rolltemplate-hitdie .sheet-template-body {
font-size: 1.1em;
text-align: center;
}
.sheet-rolltemplate-hitdie .sheet-result-box {
display: inline-flex;
justify-content: center;
align-items: center;
border: 2px solid #4e8253;
background: #fff;
border-radius: 6px;
padding: 6px 18px;
font-size: 1.6em;
font-weight: bold;
margin: 4px 0 8px 0;
color: #2c3d29;
}
.sheet-rolltemplate-hitdie .sheet-hitdie-detail {
font-size: 0.95em;
color: #4e8253;
}
.sheet-rolltemplate-hitdie .inlinerollresult,
.sheet-rolltemplate-hitdie .inlinerollresult.fullcrit,
.sheet-rolltemplate-hitdie .inlinerollresult.fullfail,
.sheet-rolltemplate-hitdie .inlinerollresult.importantroll {
background: #fff !important; /* pale green, matches box */
border: none !important; /* removes the inner box! */
color: #2c3d29 !important;
font-weight: bold;
font-size: 1.6em;
border-radius: 0 !important; /* no rounded corners on inner */
box-shadow: none !important; /* nuke all shadows */
padding: 0 18px; /* adjust size as you like */
display: inline-block;
margin: 0;
}
.sheet-rolltemplate-inventory .sheet-template-container {
background: #ebe7ec;
border: 2px solid #b1a6ae;
border-radius: 8px;
padding: 8px;
font-family: 'Crimson Text', serif;
color: #4b2e24;
width: 95%;
margin: 10px auto;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.50);
}
.sheet-rolltemplate-inventory .sheet-template-header {
background: #b1a6ae !important;
color: #fff !important;
font-weight: bold;
font-size: 1.2em;
padding: 4px;
border-radius: 4px;
margin-bottom: 4px;
text-align: center;
}
.sheet-rolltemplate-inventory .sheet-inventory-result-box {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 80px; /* Set a reasonable minimum */
max-width: 95%; /* Never overflow the parent */
min-height: 2.4em; /* Nice vertical padding */
padding: 12px 18px;
border: 2px solid #b1a6ae !important;
background: #fff;
color: #4b2e24;
border-radius: 6px;
font-size: 1.2em;
font-family: 'Crimson Text', serif;
margin: 14px auto 0 auto;
box-sizing: border-box;
word-break: break-word;
text-align: center;
font-weight: 500;
}
.sheet-rolltemplate-inventory .sheet-template-body {
display: flex;
flex-direction: column;
align-items: center;
}
/* Kill the default +Add / Modify controls only for repeating_inventory */
/* Hide the default +Add / Modify controls for just repeating_inventory */
.repcontrol[data-groupname="repeating_inventory"],
fieldset.repeating_inventory + .repcontrol,
fieldset.repeating_inventory ~ .repcontrol {
display: none !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
}
/* Repeating inventory rows should look active (white) by default */
.repcontainer[data-groupname="repeating_inventory"] .inventory-input {
background-color: #fff !important;
}
/* === Fix NPC Attacks layout (no overlaps) === */
/* Keep rows on one line */
.attacks-wrapper .attack-roll-row { flex-wrap: nowrap; }
/* Crit cell now stacks two tiny buttons */
.attacks-wrapper .attack-roll-row.inputs .attack-roll-cell.crit {
width: 66px; /* was ~25px */
display: flex;
flex-direction: column; /* stack Public/Whisper */
gap: 2px;
align-items: center;
}
.attacks-wrapper .crit-roll-button {
padding: 2px 4px;
font-size: 0.9em;
line-height: 1;
}
/* Top row: small buttons, flexible name field */
.attacks-wrapper .attack-top-row {
display: flex;
align-items: center;
gap: 6px;
}
.attacks-wrapper .attack-top-row .attack-roll-button {
padding: 2px 6px;
font-size: 0.95em;
line-height: 1;
}
.attacks-wrapper .attack-top-row .attack-name-input {
flex: 1 1 auto; /* grow to fill remaining space */
min-width: 0; /* allow shrinking */
width: auto; /* override fixed 190px */
}
/* NPC: give Attacks more room, make Actions a slimmer sidebar */
.sheet-npc .lower-content-section { align-items: stretch; }
.sheet-npc .attacks-wrapper {
flex: 0 0 370px; /* wider than the global 320px */
width: 370px; /* explicit width keeps it steady */
}
.sheet-npc .npc-other-wrapper {
flex: 1 1 0; /* fill the rest, but… */
max-width: 400px; /* …dont get bulky */
min-width: 260px; /* safety floor so it doesnt collapse */
}
/* Align labels above their columns */
.attacks-wrapper .attack-roll-row.labels .attack-roll-cell {
text-align: center;
}
/* Make the Die column a fixed width so it lines up with its label */
.attacks-wrapper .attack-roll-cell.die-size {
width: 56px; /* tweak to taste (5060px works) */
}
/* Ensure the crit cell is treated as a column (matches the labels) */
.attacks-wrapper .attack-roll-row.inputs .attack-roll-cell.crit {
display: flex;
flex-direction: column; /* if you later add Public/Whisper here theyll stack neatly */
align-items: center;
gap: 2px;
}
/* Keep the Die select snug in its cell */
.attacks-wrapper .attack-roll-row.inputs .die-size select {
width: 100%;
min-width: 0;
}
/* === NPC Attacks: line up the headers with the controls === */
.sheet-npc .attacks-wrapper .attack-roll-cell.crit { width: 72px; } /* wide enough for both buttons stacked */
.sheet-npc .attacks-wrapper .attack-roll-cell.die-size { width: 56px; } /* matches the select nicely */
/* Center the label text (safe if duplicated; higher specificity here) */
.sheet-npc .attacks-wrapper .attack-roll-row.labels .attack-roll-cell {
text-align: center;
}
/* Stack & center the NPC Crit buttons in their column */
.sheet-npc .attacks-wrapper .attack-roll-row.inputs .attack-roll-cell.crit {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
}
/* Keep the Crit Die dropdown snug so the "Die" label centers above it */
.sheet-npc .attacks-wrapper .attack-roll-row.inputs .die-size select {
width: 100%;
min-width: 0;
}
/* Optional: make the Crit buttons fill the column for perfect symmetry */
/* .sheet-npc .attacks-wrapper .crit .crit-roll-button { width: 100%; } */
/* NPC Attacks: nudge the Crit Die column right */
.sheet-npc .attacks-wrapper .attack-roll-cell.die-size {
margin-left: 12px; /* bump to 1012px if you want more space */
}
/* --- Custom template (skills + initiative): remove inner inline-roll box --- */
.sheet-rolltemplate-custom .inlinerollresult,
.sheet-rolltemplate-custom .inlinerollresult.fullcrit,
.sheet-rolltemplate-custom .inlinerollresult.fullfail,
.sheet-rolltemplate-custom .inlinerollresult.importantroll {
background: none !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
min-width: 0 !important;
color: inherit !important;
}
/* Darkmode too */
.sheet-rolltemplate-custom.sheet-rolltemplate-darkmode .inlinerollresult,
.sheet-rolltemplate-custom.sheet-rolltemplate-darkmode .inlinerollresult.fullcrit,
.sheet-rolltemplate-custom.sheet-rolltemplate-darkmode .inlinerollresult.fullfail,
.sheet-rolltemplate-custom.sheet-rolltemplate-darkmode .inlinerollresult.importantroll {
background: none !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
min-width: 0 !important;
}
/* Make skill/initiative (custom template) result boxes white */
.sheet-rolltemplate-custom .sheet-result-box,
.sheet-rolltemplate-darkmode-custom .sheet-darkmode-result-box {
background-color: #fff; /* was #FEF68E */
}
/* Player Crit result box: white */
.sheet-rolltemplate-crit .sheet-result-box {
background-color: #fff; /* was #FFFDB0 */
border: 2px solid #A1504C;
border-radius: 6px;
padding: 2px 10px;
font-weight: bold;
color: #3E1D1B;
font-size: 1.1em;
}
.sheet-rolltemplate-attack .sheet-critical-text,
.sheet-rolltemplate-npcattack .sheet-critical-text { color:#176317; }
.sheet-rolltemplate-attack .sheet-miss-text,
.sheet-rolltemplate-npcattack .sheet-miss-text { color:#7a1111; }
.sheet-rolltemplate-attack .sheet-critical-text,
.sheet-rolltemplate-npcattack .sheet-critical-text,
.sheet-rolltemplate-attack .sheet-miss-text,
.sheet-rolltemplate-npcattack .sheet-miss-text {
font-size: 1.25em; /* slightly larger */
font-weight: 800; /* a touch bolder so it reads in chat */
line-height: 1;
}