: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; }