Files
roll20-character-sheets/D6pp_Modern/d6ppmodern.css
T
2025-09-23 12:12:08 -07:00

1498 lines
36 KiB
CSS

:root {
/* Font */
--font-main: 'Arial', serif; /*T*/
/* Main Text Colors */
--text-main: #111111; /*T*/
--text-secondary: #4b2e0f;
--text-hint: #666; /**/
--text-table-header: #eeeeee; /*T*/
--text-readonly: #222; /**/
/* Background Colors */
--bg-sheet-default: #b0c4de; /*T*/
--bg-editable-text: #fff; /**/
--bg-table-cell: #f4f4f4; /*T*/
--bg-table-header: #333333; /*T*/
--bg-container: #d8d8d8; /*T*/
--bg-readonly: #b0b0b0; /*T*/
/* Border Colors */
--border-main: #000000; /*T*/
/* Table/Interface Specific */
--grid-line: #000000; /*T*/
/* Buttons */
--button-bg: #2f4f4f; /*T*/
--button-hover-bg: #3b5f5f; /*T*/
--button-text: #fff; /**/
--button-border: #1f2f2f; /*T*/
--button-text-shadow: 1px 1px 1px #000;
--button-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /**/
/* Controls */
--radio-button: #000000; /**/
--checkbox: #000000; /**/
/* Shadows */
--shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /**/
/* Roll Template - NOT SUPPORTED
--shadow-rolltemplate: 2px 2px 6px #888;
--bg-rolltemplate-error: #fbeaea;
--bg-rolltemplate: #4b2e0f;
--border-rolltemplate: #654321;
--text-rolltemplate-error: #8b0000;
--border-rolltemplate-error: #a94442;
*/
}
.sheet-d6pp-sheet {
background-color: var(--bg-sheet-default);
padding: 20px;
border: 4px solid var(--border-main);
border-radius: 12px;
box-sizing: border-box;
margin: 10px;
}
.sheet-d6pp-sheet p {
font-family: var(--font-main);
color: var(--text-main);
font-size: 1.1em;
}
body {
font-family: var(--font-main);
}
.sheet-rolltemplate-d6plus,
.sheet-rolltemplate-d6plus-no-openend,
.sheet-rolltemplate-combined,
.sheet-rolltemplate-speed,
.sheet-rolltemplate-d6plus-message,
.sheet-rolltemplate-d6plus-openend,
.sheet-rolltemplate-d6plus-mishap,
.sheet-rolltemplate-combined-openend,
.sheet-rolltemplate-combined-mishap,
.sheet-rolltemplate-d6plus-initiative,
.sheet-rolltemplate-d6damage {
font-family: 'Arial', serif; /* var(--font-main) */
background-color: #d8d8d8; /* var(--bg-rolltemplate) */
border: 2px solid #000; /* var(--border-rolltemplate) */
box-shadow: 2px 2px 6px #888; /* var(--shadow-rolltemplate) */
color: #111111; /* var(--text-main) */
padding: 8px;
border-radius: 6px;
}
.sheet-rolltemplate-d6plus div,
.sheet-rolltemplate-d6plus-no-openend div,
.sheet-rolltemplate-combined div,
.sheet-rolltemplate-speed div,
.sheet-rolltemplate-d6plus-message div,
.sheet-rolltemplate-d6plus-openend div,
.sheet-rolltemplate-d6plus-mishap div,
.sheet-rolltemplate-combined-openend div,
.sheet-rolltemplate-combined-mishap div,
.sheet-rolltemplate-d6plus-initiative div,
.sheet-rolltemplate-d6damage div {
margin: 4px 0;
font-size: 1.1em;
}
.sheet-rolltemplate-d6plus-openend .inlinerollresult,
.sheet-rolltemplate-d6plus-mishap .inlinerollresult,
.sheet-rolltemplate-combined-openend .inlinerollresult,
.sheet-rolltemplate-combined-mishap .inlinerollresult,
.sheet-rolltemplate-d6plus-initiative .inlinerollresult,
.sheet-rolltemplate-d6damage .inlinerollresult,
.sheet-rolltemplate-combined .inlinerollresult,
.sheet-rolltemplate-speed .inlinerollresult,
.sheet-rolltemplate-d6plus .inlinerollresult {
background-color: #d8d8d8; /* var(--bg-rolltemplate) */
color: #111111; /* var(--text-main) */
border: 1px solid #000; /* var(--border-rolltemplate) */
font-weight: bold;
padding: 0 4px;
border-radius: 3px;
}
.sheet-rolltemplate-d6plus h3,
.sheet-rolltemplate-d6plus-no-openend h3,
.sheet-rolltemplate-speed h3,
.sheet-rolltemplate-combined h3,
.sheet-rolltemplate-d6plus-message h3,
.sheet-rolltemplate-d6plus-openend h3,
.sheet-rolltemplate-d6plus-mishap h3,
.sheet-rolltemplate-combined-openend h3,
.sheet-rolltemplate-combined-mishap h3,
.sheet-rolltemplate-d6plus-initiative h3,
.sheet-rolltemplate-d6damage h3 {
font-size: 1.5em;
color: #111111; /* var(--text-main) */
margin: 0 0 6px 0;
border-bottom: 1px solid #000; /* var(--border-rolltemplate) */
}
.sheet-rolltemplate-d6plus-error {
background-color: #fbeaea; /* var(--bg-rolltemplate-error) */
color: #000; /* var(--text-rolltemplate-error); */
box-shadow: 2px 2px 6px #888; /* var(--shadow-rolltemplate) */
border: 2px solid #000; /* var(--border-rolltemplate-error) */
padding: 10px;
border-radius: 6px;
}
.sheet-rolltemplate-d6plus-error h3 {
font-size: 1.4em;
margin: 0 0 6px 0;
color: #000; /* var(--text-rolltemplate-error); */
text-align: center;
}
.sheet-rolltemplate-d6plus-error div {
font-size: 1em;
text-align: center;
}
.skill-section-collapsible {
margin-bottom: 15px;
}
/* Arrow behavior */
.skill-toggle-label::before {
content: "▶ ";
display: inline-block;
transition: transform 0.2s ease;
}
input[type="checkbox"].skill-toggle:checked + .skill-toggle-label::before {
content: "▼ ";
}
/* Hide/show the collapsible content */
input[type="checkbox"].skill-toggle:not(:checked) + .skill-toggle-label + .skill-group-content {
display: none;
}
.skill-group-content {
padding: 12px;
border: 2px solid var(--border-main);
border-radius: 8px;
background-color: var(--bg-container);
box-shadow: var(--shadow);
margin-bottom: 12px;
}
.section-has-special-ability,
.section-has-skills {
display: none;
}
input[name="attr_skills_active"][value="1"] ~ .section-has-skills {
display: block;
}
input[name="attr_special_ability_active"][value="1"] ~ .section-has-special-ability {
display: block;
}
.melee-grid-one-row,
.melee-grid-two-rows,
.melee-grid-three-rows {
display: none;
}
input[name="attr_num_melee_attack_active"][value="1"] ~ .melee-grid-one-row {
display: block;
}
input[name="attr_num_melee_attack_active"][value="2"] ~ .melee-grid-two-rows {
display: block;
}
input[name="attr_num_melee_attack_active"][value="3"] ~ .melee-grid-three-rows {
display: block;
}
.section-has-special-ability {
display: none;
}
input[name="attr_special_ability_active"][value="1"] ~ .section-has-special-ability {
display: block;
}
.skill-roll-buttons .activate-skill-button,
.skill-roll-buttons .undo-activate-skill-button,
.skill-roll-buttons .roll-skill-button,
.skill-roll-buttons .activated-label,
.skill-roll-buttons .unactivated-label {
display: none;
}
input[name$="_active"][value="0"] ~ .skill-roll-buttons .unactivated-label {
display: inline-block;
}
input[name$="_active"][value="1"] ~ .skill-roll-buttons .activate-skill-button {
display: inline-block;
}
input[name$="_active"][value="2"] ~ .skill-roll-buttons .undo-activate-skill-button {
display: inline-block;
}
input[name$="_active"][value="3"] ~ .skill-roll-buttons .roll-skill-button,
input[name$="_active"][value="3"] ~ .skill-roll-buttons .activated-label {
display: inline-block;
}
.small-hint {
display: block;
font-size: 0.8em;
color: var(--text-hint);
margin-top: 0px;
margin-bottom: 4px;
font-style: italic;
}
/* Always hide both buttons */
.enter-spend-mode,
.commit-spend-mode {
display: none;
}
/* Show Enter button when spend_mode is 0 */
input[name="attr_spend_mode"][value="0"] ~ .spend-mode .enter-spend-mode {
display: inline-block;
}
/* Show Commit button when spend_mode is 1 */
input[name="attr_spend_mode"][value="1"] ~ .spend-mode .commit-spend-mode {
display: inline-block;
}
.enter-spend-mode,
.commit-spend-mode {
width: 150px;
text-align: center;
}
/* Hide all by default */
.preaction-normal,
.preaction-ignorepain,
.preaction-disengage {
display: none;
}
/* Normal if neither special is active */
input[name="attr_preaction_ignorepain_active"][value="0"]
~ input[name="attr_preaction_disengage_active"][value="0"]
~ .preaction-normal {
display: block;
}
/* Show ignorepain dropdown */
input[name="attr_preaction_ignorepain_active"][value="1"]
~ .preaction-ignorepain {
display: block;
}
/* Show disengage dropdown */
input[name="attr_preaction_disengage_active"][value="1"]
~ .preaction-disengage {
display: block;
}
.reaction-normal,
.reaction-medic,
.reaction-fixit {
display: none;
}
/* Normal if neither special is active */
input[name="attr_reaction_fixit_active"][value="0"]
~ input[name="attr_reaction_medic_active"][value="0"]
~ .reaction-normal {
display: block;
}
/* Show disengage dropdown */
input[name="attr_reaction_medic_active"][value="1"]
~ .reaction-medic {
display: block;
}
input[name="attr_reaction_fixit_active"][value="1"]
~ .reaction-fixit {
display: block;
}
.training-ready-toggle:not(:checked) ~ .next-step-button {
pointer-events: none;
opacity: 0.5;
cursor: not-allowed;
}
.sheet-ready-toggle:not(:checked) ~ .final-step-button {
pointer-events: none;
opacity: 0.5;
cursor: not-allowed;
}
.d6pp-checkbox {
display: inline-flex;
align-items: center;
margin-left: 10px; /* Adjust spacing as needed */
font-weight: bold;
}
.d6pp-checkbox input {
margin-right: 5px;
}
.inline-checkbox-label {
display: inline-flex !important;
align-items: center;
gap: 6px;
font-weight: bold;
white-space: nowrap;
margin-right: 5px;
}
.inline-checkbox-label input[type="checkbox"] {
margin: 0;
transform: scale(1.2); /* Optional */
}
select {
width: auto;
max-width: 150px;
}
.sheet-attack-section {
display: none;
transition: opacity 0.3s ease-in-out, max-height 0.3s ease-in-out;
}
/* Show only the matching section when the radio is checked */
input[type="radio"][name="attr_attack_mode"][value="firearms"]:checked ~ .sheet-firearms,
input[type="radio"][name="attr_attack_mode"][value="ranged"]:checked ~ .sheet-ranged,
input[type="radio"][name="attr_attack_mode"][value="armed"]:checked ~ .sheet-armed,
input[type="radio"][name="attr_attack_mode"][value="unarmed"]:checked ~ .sheet-unarmed,
input[type="radio"][name="attr_attack_mode_q"][value="firearms"]:checked ~ .sheet-firearms,
input[type="radio"][name="attr_attack_mode_q"][value="ranged"]:checked ~ .sheet-ranged,
input[type="radio"][name="attr_attack_mode_q"][value="armed"]:checked ~ .sheet-armed,
input[type="radio"][name="attr_attack_mode_q"][value="unarmed"]:checked ~ .sheet-unarmed {
display: block;
}
button[type="action"].sheet-d6pp,
button[type="roll"].sheet-d6pp,
button[type="action"].roll-skill-button,
button[type="action"].undo-activate-skill-button,
button[type="action"].activate-skill-button,
button[type="action"].enter-spend-mode,
button[type="action"].commit-spend-mode,
button.repcontrol_add,
button.repcontrol_edit,
button[type="action"] {
background: var(--button-bg);
color: var(--button-text);
border: 2px solid var(--button-border);
border-radius: 4px;
font-size: 14px;
padding: 5px 8px;
text-shadow: var(--button-text-shadow);
box-shadow: var(--button-shadow);
cursor: pointer;
transition: all 0.2s ease-in-out;
}
button[type="action"].sheet-d6pp:hover,
button[type="roll"].sheet-d6pp:hover,
button[type="action"].activate-skill-button:hover,
button[type="action"].undo-activate-skill-button:hover,
button[type="action"].roll-skill-button:hover,
button[type="action"].enter-spend-mode:hover,
button.repcontrol_add:hover,
button.repcontrol_edit:hover,
button[type="action"].commit-spend-mode:hover {
background: var(--button-hover-bg);
transform: scale(1.05);
color: var(--button-text);
}
.sheet-condition-grid {
display: grid;
grid-template-columns: repeat(3, 1fr); /* Three columns */
gap: 4px 12px;
margin-bottom: 10px;
}
.sheet-condition-grid label {
font-weight: bold;
display: flex;
align-items: center;
gap: 6px;
}
textarea.sheet-d6pp {
resize: vertical;
width: 100%;
line-height: 1.4;
}
.textarea-ten-lines {
height: auto !important;
min-height: calc(1.4em * 10 + 8px); /* Matches 10 rows */
}
.textarea-two-lines {
height: auto !important;
min-height: calc(1.4em * 2 + 8px); /* Matches 2 rows */
}
input.sheet-d6pp,
textarea.sheet-d6pp {
background-color: var(--bg-editable-text);
border: 2px solid var(--border-main);
border-radius: 6px;
padding: 4px 6px;
font-size: 14px;
color: var(--text-main);
box-shadow: var(--shadow);
text-align: left;
}
.description-display {
white-space: pre-wrap;
padding: 6px;
background-color: var(--bg-parchment);
font-family: var(--font-main);
}
.sheet-d6pp-label {
font-weight: bold;
font-size: 1.2em; /* Match actual label size */
color: var(--text-main);
display: inline-block;
margin-bottom: 4px;
}
.sheet-controls-row {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
flex-wrap: wrap;
margin-bottom: 1em;
}
/* Each group in the row */
.sheet-controls-group {
display: flex;
align-items: center;
gap: 8px;
}
.sheet-character-top-grid {
display: grid;
grid-template-columns: auto 3fr auto 1fr auto 1fr auto 1fr auto 1fr;
gap: 8px 4px;
align-items: center;
margin-bottom: 10px;
}
.sheet-character-inventory-grid {
display: grid;
grid-template-columns: auto 1fr auto 1fr auto 1fr;
gap: 8px 6px;
align-items: center;
margin-bottom: 10px;
}
.sheet-character-inventory-grid label {
font-weight: bold;
font-size: 1.1em;
color: var(--text-main);
text-align: right;
}
.sheet-character-inventory-grid input[type="text"] {
width: 100%;
min-width: 100px;
box-sizing: border-box;
background-color: var(--bg-editable-text);
border: 2px solid var(--border-main);
border-radius: 6px;
padding: 4px 6px;
font-size: 14px;
color: var(--text-main);
text-align: center;
box-shadow: var(--shadow);
}
.sheet-controls-row label,
.sheet-character-top-grid label {
display: grid;
place-items: center end; /* Vertical + right alignment */
height: 100%;
margin: 0;
padding: 0;
line-height: 1.2;
box-sizing: border-box;
}
.sheet-character-top-grid input {
width: 100%;
line-height: 1.2;
box-sizing: border-box;
}
.sheet-character-top-grid label:not(:first-of-type) {
margin-left: 4px;
}
.sheet-character-desc-grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto;
gap: 6px 10px;
margin-bottom: 0px;
}
.sheet-character-desc-grid label {
text-align: left;
font-weight: bold;
margin: 0;
padding: 0;
}
.sheet-character-desc-grid textarea {
width: 100%;
height: 100px;
resize: vertical;
box-sizing: border-box;
}
textarea.sheet-d6pp[readonly],
.sheet-character-desc-grid textarea[readonly],
input.sheet-d6pp[readonly] {
background-color: var(--bg-readonly);
color: var(--text-readonly);
border: 2px solid var(--border-main);
box-sizing: border-box;
}
#attr_skill_points,
#attr_advantage {
width: 60px;
max-width: 100%;
text-align: center;
}
.skill-group-content {
padding: 12px;
}
select.preaction-normal,
select.preaction-ignorepain,
select.preaction-disengage,
select.reaction-normal,
select.reaction-medic,
select.reaction-fixit,
select.background-select,
select[name="attr_significant_action_selection"],
select[name="attr_simple_action_selection"] {
background-color: var(--bg-editable-text);
border: 2px solid var(--border-main);
border-radius: 6px;
padding: 4px 6px;
font-size: 14px;
color: var(--text-main);
box-shadow: var(--shadow);
text-align: left;
max-width: 100%;
}
.action-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0px 12px;
align-items: start;
align-self: stretch;
}
.action-grid-header {
font-size: 1.3em;
font-weight: bold;
color: var(--text-main);
padding-bottom: 4px;
}
.action-grid > div:nth-child(odd) {
border-right: 2px solid var(--border-main);
padding-right: 16px;
align-self: stretch;
}
.d6pp-checkbox input[type="checkbox"] {
accent-color: var(--checkbox);
transform: scale(1.2);
}
input[type="radio"].sheet-tab {
accent-color: var(--radio-button);
transform: scale(1.2);
margin-right: 6px;
}
.sheet-tab + span {
font-size: 1.1em;
font-weight: bold;
color: var(--text-main);
margin-right: 12px;
}
.spacer-sm {
height: 8px;
}
.spacer-md {
height: 16px;
}
.spacer-lg {
height: 24px;
}
.spacer-xl {
height: 32px;
}
.target-number-cell {
text-align: center;
font-size: 2em;
font-weight: bold;
background-color: var(--bg-table-cell);
padding: 6px 8px;
border: 1px solid var(--grid-line);
}
.number-cell {
text-align: center;
font-size: 1.1em;
background-color: var(--bg-table-cell);
padding: 6px 8px;
border: 1px solid var(--grid-line);
}
.d6pp-span {
font-size: 1.1em;
color: var(--text-main);
margin-right: 4px;
white-space: nowrap;
}
.sheet-d6pp-select {
background-color: var(--bg-editable-text);
border: 2px solid var(--border-main);
border-radius: 6px;
padding: 4px 6px;
font-size: 14px;
color: var(--text-main);
box-shadow: var(--shadow);
text-align: left;
max-width: 100%;
box-sizing: border-box;
}
input[name="attr_spend_mode"][value="1"] ~ .hide-when-spending {
display: none;
}
.show-when-spending {
display: none;
}
input[name="attr_spend_mode"][value="1"] ~ .show-when-spending {
display: block;
}
.sheet-mode-background,
.sheet-mode-vehicle_select,
.sheet-mode-beast_select,
.sheet-mode-training,
.sheet-mode-sheet,
.sheet-mode-type,
.sheet-mode-quicknpc,
.sheet-mode-vehicle,
.sheet-mode-monster {
display: none;
}
/* Only show background step when attr_sheet_mode is "background" */
input[name="attr_sheet_mode"][value="type"] ~ .sheet-step-type {
display: block;
}
/* Only show background step when attr_sheet_mode is "background" */
input[name="attr_sheet_mode"][value="background"] ~ .sheet-step-background {
display: block;
}
input[name="attr_sheet_mode"][value="vehicle_select"] ~ .sheet-step-vehicle_select {
display: block;
}
input[name="attr_sheet_mode"][value="beast_select"] ~ .sheet-step-beast_select {
display: block;
}
/* Only show training step when attr_sheet_mode is "Training" */
input[name="attr_sheet_mode"][value="training"] ~ .sheet-step-training {
display: block;
}
/* Only show character sheet step when attr_sheet_mode is "sheet" */
input[name="attr_sheet_mode"][value="sheet"] ~ .sheet-step-sheet {
display: block;
}
/* Only show character sheet step when attr_sheet_mode is "sheet" */
input[name="attr_sheet_mode"][value="quicknpc"] ~ .sheet-step-quicknpc {
display: block;
}
/* Only show monster sheet step when attr_sheet_mode is "monster" */
input[name="attr_sheet_mode"][value="monster"] ~ .sheet-step-monster {
display: block;
}
/* Only show vehicle sheet step when attr_sheet_mode is "vehicle" */
input[name="attr_sheet_mode"][value="vehicle"] ~ .sheet-step-vehicle {
display: block;
}
.attack-count-group {
display: flex;
align-items: center;
justify-content: flex-start; /* ensures items stay to the left */
gap: 8px; /* space between label and input */
width: fit-content; /* shrink to fit contents */
}
.sheet-small-input {
width: 60px; /* Adjust as needed */
min-width: 60px;
max-width: 60px;
text-align: center;
}
.show-if-pc,
.show-if-major,
.show-if-npc {
display: none;
}
/* These MUST be siblings */
input[name="attr_character_type"][value="pc"] ~ .show-if-pc {
display: inline-block;
}
input[name="attr_character_type"][value="major_npc"] ~ .show-if-major {
display: inline-block;
}
input[name="attr_character_type"][value="npc"] ~ .show-if-npc {
display: inline-block;
}
.show-if-not-npc {
display: none;
}
input[name="attr_character_type"][value="pc"] ~ .show-if-not-npc,
input[name="attr_character_type"][value="major_npc"] ~ .show-if-not-npc {
display: block;
}
/* ================================
Inventory Card Styles (Wild West)
================================ */
.inventory-card {
border: 2px solid var(--border-main);
border-radius: 8px;
background-color: var(--bg-container);
box-shadow: var(--bg-shadow);
padding: 10px;
margin-bottom: 12px;
font-family: var(--font-main);
}
.inventory-card-header {
display: grid;
grid-template-columns: 2fr 0.8fr 0.8fr 1fr;
gap: 10px;
align-items: center;
margin-bottom: 6px;
}
.inventory-item-name,
.inventory-item-location,
.inventory-input {
background-color: var(--bg-editable-text);
border: 2px solid var(--border-main);
border-radius: 6px;
padding: 4px 6px;
font-size: 14px;
color: var(--text-main);
box-shadow: var(--shadow);
width: 100%;
box-sizing: border-box;
font-family: var(--font-main);
}
.inventory-card-description {
margin-top: 6px;
padding-left: 0;
padding-right: 0;
}
.inventory-card-description textarea {
width: 100%;
height: calc(1.4em + 15px); /* Two lines high */
resize: vertical;
border: 2px solid var(--border-main);
border-radius: 6px;
background-color: var(--bg-editable-text);
padding: 6px;
font-size: 14px;
color: var(--text-main);
font-family: var(--font-main);
box-shadow: var(--shadow);
box-sizing: border-box;
}
.inventory-labeled-input {
display: flex;
align-items: center;
gap: 4px;
font-weight: bold;
font-size: 0.95em;
color: var(--text-main);
width: 100%;
}
/* Remove arrows from weight field only */
.weight-input::-webkit-outer-spin-button,
.weight-input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.weight-input {
-moz-appearance: textfield;
}
/* Hide by default */
.sheet-view-character,
.sheet-view-inventory {
display: none;
}
/* Show appropriate view based on attr_view_mode */
.sheet-view-wrapper input[name="attr_view_mode"][value="character"] ~ .sheet-view-character {
display: block;
}
.sheet-view-wrapper input[name="attr_view_mode"][value="inventory"] ~ .sheet-view-inventory {
display: block;
}
/* Hide by default */
.sheet-view-wrapper .sheet-encumbrance-section {
display: none;
}
/* Show when visibility flag is set */
.sheet-view-wrapper input[name="attr_encumbrance_visible"][value="1"] ~ .sheet-encumbrance-section {
display: block;
}
.skill-group-content textarea.sheet-d6pp {
width: 100%;
box-sizing: border-box;
margin: 0;
}
.sheet-dodge-toggle {
display: none;
}
input[name="attr_preaction_selection_normal"][value="Dodge"] ~ .sheet-dodge-toggle,
input[name="attr_preaction_selection_ignorepain"][value="Dodge"] ~ .sheet-dodge-toggle,
input[name="attr_preaction_selection_disengage"][value="Dodge"] ~ .sheet-dodge-toggle {
display: inline-block;
}
.sheet-multi-attack-toggle {
display: none;
}
input[name="attr_preaction_selection_normal"][value="Multi-attack"] ~ .sheet-multi-attack-toggle,
input[name="attr_preaction_selection_ignorepain"][value="Multi-attack"] ~ .sheet-multi-attack-toggle,
input[name="attr_preaction_selection_disengage"][value="Multi-attack"] ~ .sheet-multi-attack-toggle {
display: inline-block;
}
/***** Grid Tables *****/
.sheet-grid-table {
display: grid;
width: 500px;
grid-auto-rows: auto;
box-sizing: border-box;
}
.sheet-grid-table.full-width {
width: 100%;
}
/* Column count variants */
.sheet-grid-table.two-col { grid-template-columns: repeat(2, 1fr); }
.sheet-grid-table.three-col { grid-template-columns: repeat(3, 1fr); }
.sheet-grid-table.four-col { grid-template-columns: repeat(4, 1fr); }
.sheet-grid-table.five-col { grid-template-columns: repeat(5, 1fr); }
.sheet-grid-table.six-col { grid-template-columns: repeat(6, 1fr); }
.sheet-grid-table.seven-col { grid-template-columns: repeat(7, 1fr); }
.sheet-grid-table.eight-col { grid-template-columns: repeat(8, 1fr); }
.sheet-grid-table.nine-col { grid-template-columns: repeat(9, 1fr); }
.sheet-grid-table.ten-col { grid-template-columns: repeat(10, 1fr); }
/* All cells */
.sheet-grid-table .grid-header,
.sheet-grid-table .grid-cell {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 6px 8px;
font-size: 1.0em;
text-align: center;
box-sizing: border-box;
/* Only top and left borders to prevent doubling */
border-top: 0px;
border-left: 1px solid var(--grid-line);
border-bottom: 1px solid var(--grid-line);
border-right: 0px;
}
/* Header styling */
.sheet-grid-table .grid-header {
background-color: var(--bg-table-header);
font-weight: bold;
color: var(--text-table-header);
border-top: 1px solid var(--grid-line);
}
/* Body cell background */
.sheet-grid-table .grid-cell {
background-color: var(--bg-table-cell);
}
/* Add right border to the last column of every row */
.sheet-grid-table.ten-col > *:nth-child(10n),
.sheet-grid-table.two-col > *:nth-child(2n),
.sheet-grid-table.three-col > *:nth-child(3n),
.sheet-grid-table.four-col > *:nth-child(4n),
.sheet-grid-table.five-col > *:nth-child(5n),
.sheet-grid-table.six-col > *:nth-child(6n),
.sheet-grid-table.seven-col > *:nth-child(7n),
.sheet-grid-table.eight-col > *:nth-child(8n),
.sheet-grid-table.nine-col > *:nth-child(9n) {
border-right: 1px solid var(--grid-line);
}
/***** FIREARM TABLE *****/
/* === Base Attack Grid Styling === */
.sheet-grid-attack {
display: grid;
width: 500px; /* default */
grid-auto-rows: auto;
box-sizing: border-box;
}
.sheet-grid-attack.full-width {
width: 100%;
}
.sheet-grid-table .target-number-cell {
font-weight: bold;
font-size: 2em;
color: var(--text-main);
}
.sheet-grid-attack > div {
border: 1px solid var(--grid-line);
padding: 6px 8px;
font-size: 1em;
font-family: var(--font-main);
text-align: center;
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
}
.sheet-grid-attack .grid-header,
.sheet-grid-attack .grid-cell {
border-left: 1px solid var(--grid-line);
border-right: 0;
border-top: 0;
border-bottom: 1px solid var(--grid-line);
}
.sheet-grid-attack .grid-cell {
background-color: var(--bg-table-cell);
}
.sheet-grid-attack .grid-header {
background-color: var(--bg-table-header);
color: var(--text-table-header);
font-weight: bold;
border-top: 1px solid var(--grid-line);
}
.sheet-grid-attack select {
width: 100%;
font-size: 14px;
}
.sheet-grid-attack button {
font-size: 1.1em;
margin: 0;
padding: 4px 8px;
}
.stack-tight {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
}
.stack-weapon {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
text-align: center;
}
.weapon-skill {
font-size: 1.1em;
font-family: var(--font-main);
line-height: 1.2em;
}
.weapon-skill .small-hint {
display: inline;
}
.ammo-button-row {
display: flex;
flex-direction: row;
gap: 4px;
}
.grid-cell.ammo-display {
display: flex; /* Ensure flex container */
justify-content: flex-start; /* Align contents to left */
align-items: center; /* Vertically center if desired */
text-align: left;
padding-left: 4px;
font-size: 1.5em;
}
/* === Specific Grid Column Layouts === */
.sheet-grid-firearms {
grid-template-columns:
2fr /* Weapon */
1fr /* Dice */
1fr /* Damage */
1.2fr /* Ammo */
1fr /* Short */
1fr /* Medium */
1fr /* Long */
1fr; /* Extreme */
}
.sheet-grid-ranged {
grid-template-columns:
2fr /* Weapon */
1fr /* Dice */
1fr /* Damage */
1fr /* Short */
1fr /* Medium */
1fr /* Long */
1fr; /* Extreme */
}
.sheet-grid-melee {
grid-template-columns:
2fr /* Weapon */
1fr /* Dice */
1fr; /* Damage */
}
/* Add right border to the last column of every row when grid is melee or ranged */
.sheet-grid-attack.sheet-grid-firearms > *:nth-child(8n),
.sheet-grid-attack.sheet-grid-melee > *:nth-child(3n),
.sheet-grid-attack.sheet-grid-ranged > *:nth-child(7n) {
border-right: 1px solid var(--grid-line);
}
.sheet-grid-attack.sheet-grid-firearms > .full-row {
grid-column: span 8;
border-right: 1px solid var(--grid-line);
}
.sheet-grid-attack.sheet-grid-firearms > .last-row {
grid-column: span 8;
border-bottom: 1px solid var(--grid-line);
}
/**** START Spinner Arrows trick *****/
/* Firefox - hide number input spinners by default */
input[type="number"] {
-moz-appearance: textfield;
}
/* Firefox - restore spinner on hover */
input[type="number"]:hover {
-moz-appearance: initial;
}
/* Chrome/Safari/Edge - hide spinners by default */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
opacity: 0;
transition: opacity 0.2s ease-in-out;
}
/* Chrome/Safari/Edge - show spinners on hover */
input[type="number"]:hover::-webkit-inner-spin-button,
input[type="number"]:hover::-webkit-outer-spin-button {
opacity: 1;
}
/**** END Spinner Arrows trick *****/
.sheet-grid-actions {
display: grid;
grid-template-columns: 1fr 1fr; /* Two equal columns */
gap: 1em;
align-items: start;
}
.sheet-grid-left {
display: flex;
flex-direction: column;
gap: 0.5em;
}
.sheet-grid-right {
display: flex;
flex-direction: column;
gap: 0.25em;
}
.sheet-grid-right textarea {
width: 100%;
height: 100%;
resize: none;
box-sizing: border-box; /* Prevents overflow in some Roll20 themes */
}
.sheet-new-turn-container {
text-align: right;
margin-top: 1em;
}
.sheet-inline-row {
display: flex;
flex-wrap: nowrap; /* Ensures the label/input stay on one line */
align-items: center;
gap: 0.3em;
}
.sheet-inline-row label {
white-space: nowrap;
margin: 0;
}
.sheet-divider {
border: none;
border-top: 1px solid #444;
margin: 0.5em 0;
}
.sheet-skill-select-row select {
width: 180px;
}
.sheet-skill-select-row {
display: flex;
align-items: baseline;
gap: 16px;
}
.sheet-skill-select-row select,
.sheet-skill-select-row span,
.sheet-skill-select-row button {
line-height: 1.4;
margin: 0;
padding: 4px 6px;
vertical-align: middle;
}
.sheet-skill-select-row button {
min-width: 110px;
text-align: center;
}
/* Default state: editable shown, readonly hidden */
.sheet-editable-actions {
display: none;
}
.sheet-readonly-actions {
display: none;
}
/* When locked (value = "1"): hide editable, show readonly */
input[name="attr_actions_locked"][value="1"] ~ .sheet-editable-actions {
display: none;
}
input[name="attr_actions_locked"][value="1"] ~ .sheet-readonly-actions {
display: inline-block;
}
input[name="attr_actions_locked"][value="0"] ~ .sheet-editable-actions {
display: inline-block;
}
input[name="attr_actions_locked"][value="0"] ~ .sheet-readonly-actions {
display: none;
}
.sheet-grid-table select,
.sheet-grid-table button {
width: 100%;
padding: 4px 6px;
font-size: 1em;
height: 2.2em; /* Consistent height for both */
box-sizing: border-box;
}
.skill-roll-buttons {
width: 100%;
padding: 4px 6px;
font-size: 1em;
height: 2.2em; /* Consistent height for both */
}
.sheet-grid-table .grid-cell {
display: flex;
align-items: center;
}
.sheet-d6pp-wealth-label::after {
content: "D";
margin-left: 0px;
}
/* Choice activations */
.sheet-show-if-background-performance,
.sheet-show-if-hobby-performance,
.sheet-show-if-background-physical,
.sheet-show-if-origin-physical,
.sheet-show-if-hobby-physical,
.sheet-show-if-origin-technical,
.sheet-show-if-hobby-technical,
.sheet-show-if-background-technical,
.sheet-show-if-background-origin,
.sheet-show-if-background-ma,
.sheet-show-if-origin-ma,
.sheet-show-if-hobby-ma,
.sheet-show-if-background-science,
.sheet-show-if-hobby-science,
.sheet-show-if-hobby-animals,
.sheet-show-if-background-knowledge,
.sheet-show-if-origin-knowledge,
.sheet-show-if-background-aviation {
display: none;
}
input[name="attr_choose_background_activate_aviation"][value="1"] ~ .sheet-show-if-background-aviation {
display: inline-block;
}
input[name="attr_choose_background_activate_ma"][value="1"] ~ .sheet-show-if-background-ma {
display: inline-block;
}
input[name="attr_choose_origin_activate_ma"][value="1"] ~ .sheet-show-if-origin-ma {
display: inline-block;
}
input[name="attr_choose_hobby_activate_ma"][value="1"] ~ .sheet-show-if-hobby-ma {
display: inline-block;
}
input[name="attr_choose_background_activate_science"][value="1"] ~ .sheet-show-if-background-science {
display: inline-block;
}
input[name="attr_choose_hobby_activate_science"][value="1"] ~ .sheet-show-if-hobby-science {
display: inline-block;
}
input[name="attr_choose_background_activate_knowledge"][value="1"] ~ .sheet-show-if-background-knowledge {
display: inline-block;
}
input[name="attr_choose_origin_activate_knowledge"][value="1"] ~ .sheet-show-if-origin-knowledge {
display: inline-block;
}
input[name="attr_choose_background_specialize_performance"][value="1"] ~ .sheet-show-if-background-performance {
display: inline-block;
}
input[name="attr_choose_hobby_specialize_performance"][value="1"] ~ .sheet-show-if-hobby-performance {
display: inline-block;
}
input[name="attr_choose_background_specialize_physical"][value="1"] ~ .sheet-show-if-background-physical {
display: inline-block;
}
input[name="attr_choose_origin_specialize_physical"][value="1"] ~ .sheet-show-if-origin-physical {
display: inline-block;
}
input[name="attr_choose_hobby_specialize_physical"][value="1"] ~ .sheet-show-if-hobby-physical {
display: inline-block;
}
input[name="attr_choose_origin_specialize_technical"][value="1"] ~ .sheet-show-if-origin-technical {
display: inline-block;
}
input[name="attr_choose_hobby_specialize_technical"][value="1"] ~ .sheet-show-if-hobby-technical {
display: inline-block;
}
input[name="attr_choose_background_specialize_technical"][value="1"] ~ .sheet-show-if-background-technical {
display: inline-block;
}
input[name="attr_choose_hobby_specialize_animals"][value="1"] ~ .sheet-show-if-hobby-animals {
display: inline-block;
}
.sheet-show-if-running {
display: none;
}
input[name="attr_run_toggle"][value="1"] ~ .sheet-show-if-running {
display: inline-block;
}
.sheet-armor-row {
display: flex;
gap: 20px;
margin-bottom: 1em;
}
.sheet-armor-column {
flex: 1;
display: flex;
flex-direction: column;
}
.sheet-armor-column label {
font-weight: bold;
margin-bottom: 4px;
}
.sheet-armor-column select {
width: 100%;
margin-bottom: 4px;
}
.sheet-armor-column span[name^="attr_"] {
font-size: 0.9em;
min-height: 1.5em;
line-height: 1.4;
}
/******* WEALTH *********/
/* Enabled look */
.ammo-button-row .sheet-wealth-button {
opacity: 1;
pointer-events: auto;
}
/* Disable when checkbox is checked */
.ammo-button-row input[name="attr_used_3Dwealth"]:checked ~ .sheet-wealth-button {
opacity: 0.5; /* greyed out */
pointer-events: none; /* no clicks */
}
.ammo-button-row input[name="attr_used_4Dwealth"]:checked ~ .sheet-wealth-button {
opacity: 0.5; /* greyed out */
pointer-events: none; /* no clicks */
}
.ammo-button-row input[name="attr_used_5Dwealth"]:checked ~ .sheet-wealth-button {
opacity: 0.5; /* greyed out */
pointer-events: none; /* no clicks */
}
/******* END WEALTH *****/
.sheet-veh-block { display:none; }
input[name="attr_vehicle_category_val"][value="cars"] ~ .sheet-veh-cars { display:block; }
input[name="attr_vehicle_category_val"][value="utility"] ~ .sheet-veh-utility { display:block; }
input[name="attr_vehicle_category_val"][value="specialty"] ~ .sheet-veh-specialty { display:block; }
input[name="attr_vehicle_category_val"][value="emergency"] ~ .sheet-veh-emergency { display:block; }
input[name="attr_vehicle_category_val"][value="terrain"] ~ .sheet-veh-terrain { display:block; }
input[name="attr_vehicle_category_val"][value="motorcycles"] ~ .sheet-veh-motorcycles { display:block; }
input[name="attr_vehicle_category_val"][value="watercraft"] ~ .sheet-veh-watercraft { display:block; }
input[name="attr_vehicle_category_val"][value="aircraft"] ~ .sheet-veh-aircraft { display:block; }
.sheet-beast-block { display: none; }
input[name="attr_beast_category_val"][value="dogs"] ~ .sheet-beast-dogs { display: block; }
input[name="attr_beast_category_val"][value="primates"] ~ .sheet-beast-primates { display: block; }
input[name="attr_beast_category_val"][value="flying"] ~ .sheet-beast-flying { display: block; }
input[name="attr_beast_category_val"][value="wild"] ~ .sheet-beast-wild { display: block; }
input[name="attr_beast_category_val"][value="burden"] ~ .sheet-beast-burden { display: block; }
input[name="attr_beast_category_val"][value="exotic"] ~ .sheet-beast-exotic { display: block; }
input[name="attr_beast_category_val"][value="livestock"] ~ .sheet-beast-livestock { display: block; }
input[name="attr_beast_category_val"][value="insects"] ~ .sheet-beast-insects { display: block; }
input[name="attr_beast_category_val"][value="cats"] ~ .sheet-beast-cats { display: block; }
input[name="attr_beast_category_val"][value="snakes"] ~ .sheet-beast-snakes { display: block; }
input[name="attr_beast_category_val"][value="sea"] ~ .sheet-beast-sea { display: block; }