/* ======================================== */ /* Global Styles */ /* ======================================== */ @import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;700&display=swap"); .charsheet { min-width: 850px; max-width: 850px; margin: 0 auto; overflow-x: hidden; } .charsheet * { box-sizing: border-box; max-width: 100%; } .charsheet, .monsheet { font-family: "Cormorant Garamond", "Times New Roman", serif; margin: 0; padding: 0; } /* Logo row */ /* Shared input styles */ .charsheet input, .monsheet input { border: none; border-bottom: 2px solid rgb(97, 97, 97); border-radius: 0; padding: 5px; font-size: 1.2em; outline: none; background: transparent; width: 100%; font-family: "Proxima Nova"; } .charsheet label, .monsheet label { font-size: 1.2em; font-weight: bold; margin-top: 5px; text-align: left; } .pc-weapon-table thead tr { position: absolute; top: -9999px; left: -9999px; } .pc-weapon-table tbody tr { margin-bottom: 12px; } .pc-weapon-table tbody td { position: relative; padding-left: 50%; text-align: left; border: none; border-bottom: 1px solid #ddd; } /* Label each field in “stacked” mode */ .pc-weapon-table tbody td:before { position: absolute; top: 6px; left: 8px; width: 45%; white-space: nowrap; font-weight: bold; font-size: 0.9em; color: #333; } .pc-weapon-table tbody td:nth-of-type(1):before { content: ""; } .pc-weapon-table tbody td:nth-of-type(2):before { content: "Weapon"; } .pc-weapon-table tbody td:nth-of-type(3):before { content: "Type"; } .pc-weapon-table tbody td:nth-of-type(4):before { content: "Hit Mod."; } .pc-weapon-table tbody td:nth-of-type(5):before { content: "DMG"; } .pc-weapon-table tbody td:nth-of-type(6):before { content: "DMG Mod."; } .pc-weapon-table tbody td:nth-of-type(7):before { content: "Notes"; } button[type="roll"] { background: #671c1c; border: 2px solid black; width: 25px; height: 25px; cursor: pointer; color: white; padding: 0 !important; margin: 0 !important; } .sheet-pc-info-row > .sheet-pc-info-section { min-width: 0; } .toggle-sheet-btn { position: fixed; top: 10px; right: 10px; z-index: 1000; padding: 5px 10px; font-size: 1em; cursor: pointer; font-family: "Proxima Nova"; } .charsheet, /* ======================================== */ /* Monster Sheet */ /* ======================================== */ .monsheet { display: none; } .sheet-mode-toggle[value="pc"] ~ .charsheet { display: block; } .sheet-mode-toggle[value="monster"] ~ .monsheet { display: block; } .charsheet { padding-top: 0px !important; } .sheet-header-container { width: 100%; padding: 0px; box-sizing: border-box; } /* ======================================== */ /* Logo Row */ /* ======================================== */ .sheet-logo-row { text-align: center; font-size: 2em; font-weight: bold; text-transform: uppercase; margin-bottom: 10px; padding-bottom: 10px; } .sheet-header-container label { margin-bottom: 0px; font-size: 1.3em; } /* ======================================== */ /* Header Rows */ /* ======================================== */ .sheet-header-row, /* ======================================== */ /* Alignment & Languages Rows */ /* ======================================== */ .sheet-alignment-row, .sheet-age-row { display: grid; gap: 10px; } .sheet-header-row { grid-template-columns: 2fr 2fr 1fr 1fr; } .sheet-alignment-row { grid-template-columns: 1fr 1fr; } .sheet-pc-info-row { display: grid; grid-template-columns: 2fr 2fr 2fr; gap: 10px; text-align: center; align-items: flex-start; } /* ======================================== */ /* PC Stats Row */ /* ======================================== */ .sheet-pc-stats-row { display: grid; grid-template-columns: 1fr 2fr 2fr; gap: 10px; margin-top: 20px; text-align: center; align-items: flex-start; } .sheet-pc-info-section { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 10px; } .sheet-pc-info-section h3 { margin: 0 0 5px 0; font-size: 1.7em; font-weight: bold; } .sheet-pc-attributes h3, .sheet-pc-attribute-mods h3 { margin: 0 0 10px 0; font-size: 2em; font-weight: bold; text-align: LEFT; } /* ======================================== */ /* Weapons Table */ /* ======================================== */ .sheet-weapon-table h3 { font-size: 2em; font-weight: bold; text-align: center; margin-top:10px; } .sheet-weapon-table { width: 100%; margin-bottom: 1em; border-bottom: 2px solid black; padding-bottom: 10px; } .sheet-pc-attribute-mods h3 { margin: 0 0 10px 0; font-size: 2em; font-weight: bold; text-align: center; } .sheet-pc-saving-throws h3 { margin: 0 0 10px 0; font-size: 2em; font-weight: bold; } .sheet-pc-info-section .armor-class-container { position: relative; width: 185px; height: 85px; background: url("https://raw.githubusercontent.com/Todd-Antill/dragonslayer_roll20/refs/heads/main/images/ac_icon.png") no-repeat center; background-size: contain; display: flex; justify-content: center; align-items: center; margin-bottom:20px; } .armor-description-container label { margin-bottom:0px; } .sheet-pc-info-section input[name="attr_armor-class"] { height: 68px !important; width: 65%; border: 0; text-align: center; font-size: xx-large; color: #6b6b6b; padding-bottom: 10px; } .sheet-pc-info-section .hp-container { position: relative; width: 130px; height: 85px; background: url("https://raw.githubusercontent.com/Todd-Antill/dragonslayer_roll20/refs/heads/main/images/hp_icon.png") no-repeat center; background-size: contain; display: flex; flex-direction: column; justify-content: center; align-items: center; } .sheet-pc-info-section .atk-bonus-container,.movement-container { position: relative; width: 100px; height: 100px; background: url("https://raw.githubusercontent.com/Todd-Antill/dragonslayer_roll20/refs/heads/main/images/dsr_box.png") no-repeat center; background-size: contain; display: flex; flex-direction: column; justify-content: center; align-items: center; } .movement-hdr { margin: 55px 0 0 0 !important; } .atk-bonus-hdr { margin: 5px 0 0 0 !important; } /* ======================================== */ /* Experience & Attack Bonus */ /* ======================================== */ .xp-container { display: grid; grid-template-columns: 2fr 1fr; gap: 10px; align-items: end; } .sheet-pc-info-section input[name="attr_current-hp"], .sheet-pc-info-section input[name="attr_max-hp"], .atk-bonus-container input[name="attr_attack-bonus"], /* ======================================== */ /* Hit Points & Movement */ /* ======================================== */ .movement-container input[name="attr_movement"] { width: 100%; height: 35px; border: none; background: transparent; text-align: center; font-size: x-large; color: #6b6b6b; outline: none; } .xp-container-next-level { width: 100%; } .sheet-pc-info-section label.curr-hp-label { font-size: .7em; color: rgb(50, 50, 50); background: transparent; padding: 2px 5px; pointer-events: none; position: absolute; top: 25px; left: 40px; } .sheet-pc-info-section label.max-hp-label { font-size: .7em; color: rgb(50, 50, 50); background: transparent; padding: 2px 5px; pointer-events: none; position: absolute; top: 75px; left: 50px; } /* ======================================== */ /* Shared Inputs & Labels */ /* ======================================== */ input.move-input { text-align: center; font-size: x-large; font-weight: bold; } .ui-dialog .charsheet input[type=number] { text-align: center; } /* ======================================== */ /* Abilities Section */ /* ======================================== */ .sheet-abilities { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; } .sheet-ability { display: flex; align-items: center; gap: 5px; min-height: 25px; } .charsheet .hex-container { position: relative; width: 50px; height: 50px; background: url("https://raw.githubusercontent.com/Todd-Antill/dragonslayer_roll20/refs/heads/main/images/hex-stat.png") no-repeat center; background-size: contain; display: flex; justify-content: center; align-items: center; } .charsheet .hex-input { width: 50px; background: transparent; border: none; text-align: center; font-size: 1.2em; font-weight: bold; color: #6b6b6b; outline: none; } .sheet-ability label { font-size: 1.7em; font-weight: bold; } .sheet-ability button[type="roll"], .weapon-row button[type="roll"] { width: 25px !important; height: 25px !important; min-width: 25px !important; min-height: 25px !important; background: #671c1c; border: 2px solid black; padding: 0 !important; margin: 0 !important; display: flex; justify-content: center; align-items: center; } .sheet-ability button[type="roll"].btn { width: 25px !important; height: 25px !important; } .sheet-pc-attribute-mods { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; } .sheet-modifiers { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; width: 100%; } /* ======================================== */ /* Modifiers Section */ /* ======================================== */ .sheet-modifier { display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: center; width: 100%; position: relative; } .sheet-modifier input { width: 100%; border: none; border-bottom: 2px solid rgb(97, 97, 97); padding: 5px; font-size: 1.2em; text-align: center; background: transparent; outline: none; } .sheet-modifier label { font-size: 1.1em; font-weight: bold; text-align: left; margin-top: 3px; /* Push labels below inputs */ display: block; width: 100%; margin-bottom: 2px; } .sheet-modifier:has(input:only-of-type) { display: flex; flex-direction: column; align-items: center; } .sheet-modifier:has(input:only-of-type) input { width: 100%; } .sheet-modifier:has(input:only-of-type) label { margin-top: 3px; width: 100%; padding-right: 0; } .sheet-modifier input:nth-of-type(2), .sheet-modifier label:nth-of-type(2) { margin-left: 5px; } /* ======================================== */ /* Saving Throws */ /* ======================================== */ /* Container for one spell line */ /* Container for one spell line */ .sheet-saving-throws-container { display: flex; flex-direction: column; /* Stack title and section */ margin-left: 30px } .sheet-saving-throws-wrapper { display: flex; flex-direction: row; /* Keep buttons and saving throws in a row */ align-items: left; gap: 10px; } .sheet-saving-throws { position: relative; width: 75px; height: 340px; background: url("https://raw.githubusercontent.com/Todd-Antill/dragonslayer_roll20/refs/heads/main/images/saving_throw_box.png") no-repeat; background-position: top center; background-size: contain; } .sheet-saving-throws-buttons { position: relative; width: 25px; height: 340px; } .sheet-saving-throws-buttons button { position: absolute; left: 0; width: 25px !important; height: 25px !important; background: #671c1c; border: 2px solid black; color: white; padding: 0 !important; display: flex; justify-content: center; align-items: center; } .sheet-saving-throws input { position: absolute; width: 40px; height: 40px; background: transparent; border: none; text-align: center; font-size: 1.4em; font-weight: bold; color: #6b6b6b; outline: none; left: 50%; transform: translateX(-50%); } .sheet-saving-throws label { position: absolute; left: 95px; font-size: 2em; font-weight: bold; color: black; white-space: nowrap; } .sheet-saving-throws .breath+label { top: 25px; } .sheet-saving-throws .death+label { top: 90px; } .sheet-saving-throws .stone+label { top: 150px; } .sheet-saving-throws .wand+label { top: 215px; } .sheet-saving-throws .spell+label { top: 275px; } .sheet-saving-throws .breath { top: 20px; left: 36px } .sheet-saving-throws .death { top: 80px; left: 36px } .sheet-saving-throws .stone { top: 142px; left: 36px } .sheet-saving-throws .wand { top: 205px; left: 36px } .sheet-saving-throws .spell { top: 264px; left: 36px } .sheet-saving-throws-buttons button:nth-child(1) { top: 25px; } .sheet-saving-throws-buttons button:nth-child(2) { top: 85px; } .sheet-saving-throws-buttons button:nth-child(3) { top: 145px; } .sheet-saving-throws-buttons button:nth-child(4) { top: 210px; } .sheet-saving-throws-buttons button:nth-child(5) { top: 270px; } .sheet-rolltemplate-savingthrow .inlinerollresult { background: #f8f8f8; border: 1px solid #ccc; padding: 2px 5px; border-radius: 3px; font-weight: bold; display: inline-block; min-width: 25px; text-align: center; } .sheet-rolltemplate-attack .sheet-header { background: #222; color: white; text-align: center; font-weight: bold; padding: 5px; border-radius: 5px 5px 0 0; line-height: 1.7em !important; } .sheet-rolltemplate-pc_attack_roll { line-height: 1.6em !important; padding-bottom: 5px; } .sheet-rolltemplate-pc_attack_roll .sheet-crit~.sheet-normal-damage { display: none; } .charsheet .sheet-tab-buttons { display: inline-block; border-bottom: 1px solid #ccc; margin-bottom: 10px; width: 100%; } .charsheet .sheet-tab-buttons button { background: none; border: none; padding: 6px 12px; margin-right: 4px; margin-bottom: -1px; cursor: pointer; color: #666; font-size: 1.4em; font-family: inherit; outline: none; } .charsheet .sheet-tab-buttons button:hover { color: #000; } .charsheet .sheet-tabstoggle[value="main"] ~ .sheet-tab-buttons .sheet-button0, .charsheet .sheet-tabstoggle[value="equipment"] ~ .sheet-tab-buttons .sheet-button1, .charsheet .sheet-tabstoggle[value="abilities"] ~ .sheet-tab-buttons .sheet-button2, .charsheet .sheet-tabstoggle[value="spells"] ~ .sheet-tab-buttons .sheet-button3, .charsheet .sheet-tabstoggle[value="wealth"] ~ .sheet-tab-buttons .sheet-button4, .charsheet .sheet-tabstoggle[value="henchmen"] ~ .sheet-tab-buttons .sheet-button5, .charsheet .sheet-tabstoggle[value="notes"] ~ .sheet-tab-buttons .sheet-button6 { background: #fff; border: 1px solid #ccc; border-bottom: 1px solid #fff; color: #000; font-weight: bold; margin-bottom: -1px; border-top-left-radius: 4px; border-top-right-radius: 4px; } .charsheet .sheet-main-tab, .charsheet .sheet-equipment-tab, .charsheet .sheet-abilities-tab, .charsheet .sheet-spells-tab, .charsheet .sheet-wealth-tab, .charsheet .sheet-hireling-tab, .charsheet .sheet-notes-tab { display: none; } .charsheet .sheet-tabstoggle[value="main"] ~ .sheet-tab-content .sheet-main-tab, .charsheet .sheet-tabstoggle[value="equipment"] ~ .sheet-tab-content .sheet-equipment-tab, .charsheet .sheet-tabstoggle[value="abilities"] ~ .sheet-tab-content .sheet-abilities-tab, .charsheet .sheet-tabstoggle[value="spells"] ~ .sheet-tab-content .sheet-spells-tab, .charsheet .sheet-tabstoggle[value="wealth"] ~ .sheet-tab-content .sheet-wealth-tab, .charsheet .sheet-tabstoggle[value="henchmen"] ~ .sheet-tab-content .sheet-hireling-tab , .charsheet .sheet-tabstoggle[value="notes"] ~ .sheet-tab-content .sheet-notes-tab { display: block; } /* ======================================== */ /* Equipment Tab */ /* ======================================== */ .sheet-equipment-tab .equipment-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .sheet-equipment-tab .equipment-column { display: flex; flex-direction: column; } .equipment-entry { margin-bottom: 10px; } .equipment-entry input { font-size:1.1em; } /* ======================================== */ /* Abilities Tab */ /* ======================================== */ .sheet-abilities-tab .abilities-columns { display: flex; gap: 10px; } .sheet-abilities-tab .abilities-column { width: 60%; margin-right:20px; } .sheet-abilities-tab .thief-skills-column { width: 40%; } .thief-skills-list .thief-skill { display: grid; grid-template-columns: min-content 1fr min-content; align-items: center; gap: 10px; margin-bottom: 20px; } .thief-skill .skill-name { font-size: 1.4em; font-weight: bold; display: flex; align-items: center; } .thief-skill button[type="roll"] { background: #671c1c; border: 2px solid black; width: 25px; height: 25px; cursor: pointer; padding: 0; display: flex; justify-content: center; align-items: center; } .thief-skill input { border: none; border: 2px solid rgb(97, 97, 97); padding: 5px; font-size: 1.3em; background: transparent; width: 60px; text-align: center } .ability-entry textarea { height:85px; font-family: "Proxima Nova"; } .sheet-abilities-tab button { font-family: "Proxima Nova"; } .spells-per-day { margin-bottom: 20px; } .spells-per-day-wrapper { display: flex; align-items: center; } .spells-per-day-left { flex: 0 0 auto; text-align: left; padding-right: 10px; font-weight: bold; } .spells-per-day-label, .spells-level-label { margin-top: 10px; font-size: 1.4em; } .spells-level-label { margin-top: 20px; } .spells-per-day-right { flex: 1; } .spells-per-day-inputs { display: flex; justify-content: space-between; } .spells-per-day-inputs input { width: calc((100% - 16px) / 9); text-align: center; border: 2px solid black; padding: 2px; height: 45px !important; margin: 5px; } .spells-per-day-numbers { display: flex; justify-content: space-between; margin-top: 4px; } .spells-per-day-numbers span { width: calc((100% - 16px) / 9); text-align: center; font-size: 1.5em; } .spells-list { display: flex; gap: 20px; } .spells-list-column { width: 50%; } .spell-level-entry { margin-bottom: 15px; } .spells-list-header { text-align: left; font-weight: bold; margin-bottom: 4px; font-size: 1.2em; border-bottom: 2px solid rgb(43, 43, 43) !important; border-top: 2px solid rgb(43, 43, 43) !important; background-color: rgb(247 247 247) !important; padding-left: 5px; } .spells-list-column fieldset { margin: 0 0 10px; padding: 5px; border: 1px solid #ccc; } /* ==== Updated .spell-entry section using GRID ==== */ .spell-entry { display: grid; grid-template-columns: 20px 1fr; align-items: center; gap: 8px; padding: 2px 4px; } .spell-entry input[type="checkbox"] { width: 16px; height: 16px; margin: 0; accent-color: #671c1c; box-sizing: border-box; } .spell-entry input[type="text"] { width: 100%; padding: 4px; font-size: 1em; line-height: 1.2em; border-bottom: 2px solid rgb(223, 223, 223); margin: 0; box-sizing: border-box; } /* Optional: visual style when spell is memorized */ .spell-entry input[type="checkbox"]:checked + input[type="text"] { font-weight: bold; color: #671c1c; text-decoration: underline; } /* Header row for spell list (✓ + label) */ .spell-level-labels { display: grid; grid-template-columns: 20px 1fr; align-items: center; gap: 8px; padding: 2px 4px; font-weight: bold; font-size: 1.2em; color: #444; margin-bottom: 4px; border-bottom: 2px solid rgb(223, 223, 223); } .spells-list .repcontrol { margin-bottom:20px; margin-top:10px; } .sheet-wealth-table { display: table; width: 100%; } .sheet-wealth-table .wealth-row { display: table-row; } .sheet-wealth-table .wealth-cell { display: table-cell; vertical-align: middle; padding: 5px; } .sheet-wealth-table .coin-col { width: 100px; text-align: center; } .sheet-wealth-table .wealth-heading { text-align: left; font-weight: bold; font-size: 2em; width: 100px; } .sheet-wealth-table input[type="text"] { width: 80px; height: 40px; border: 2px solid black; text-align: center; box-sizing: border-box; } .sheet-wealth-table label { display: block; width: 100%; margin: 0 auto; text-align: center; font-size: 1.5em; font-weight: bold; } .treasure-heading { font-size: 2em; margin-top: 10px; border-bottom: 2px solid rgb(43, 43, 43) !important; } /* ======================================== */ /* Treasure Section */ /* ======================================== */ .treasure-two-col { display: flex; gap: 40px; margin-top: 10px; } .treasure-col { flex: 1; text-align: left; } .treasure-col-header { display: flex; gap: 10px; font-weight: bold; margin-bottom: 8px; } .col-item-label, .col-value-label { width: 50%; text-align: left; font-size: 1.3em; } .repeating_treasureleft, .repeating_treasureright { margin-bottom: 10px; } .treasure-entry-2col { display: flex; gap: 10px; margin-bottom: 5px; } .treasure-entry-2col input[type="text"] { width: 50%; box-sizing: border-box; padding: 4px; border: 1px solid #ccc; } .charsheet .sheet-wealth .treasure-section .treasure-entry { display: inline-block; margin-bottom: 10px; white-space: nowrap; text-align: left; } .charsheet .sheet-wealth .treasure-section .treasure-entry label.treasure-label, .charsheet .sheet-wealth .treasure-section .treasure-entry label.treasure-value-label { display: inline-block !important; width: auto !important; float: none !important; margin: 0 !important; padding: 0 6px 0 0 !important; vertical-align: middle !important; text-align: left !important; } .charsheet .sheet-wealth .treasure-section .treasure-entry label.treasure-label { margin-right: 6px; } .charsheet .sheet-wealth .treasure-section .treasure-entry label.treasure-value-label { margin-left: 20px; margin-right: 6px; } .charsheet .sheet-wealth .treasure-section .treasure-entry input[type="text"] { border: 1px solid #ccc; padding: 4px; box-sizing: border-box; width: 150px; } /* ======================================== */ /* Henchmen Tab */ /* ======================================== */ .sheet-hireling-table { width: 100%; margin-bottom: 20px; padding: 10px; border: 1px solid #ccc; box-sizing: border-box; } /* Row 1: Name / Race / Class / Level / HP / Armor / AC / XP Use the same grid template for labels and data so they line up */ .hireling-row1-labels, .hireling-row1-data { display: grid; grid-template-columns: 255px /* Name */ 105px /* Race */ 105px /* Class */ 40px /* Level */ 40px /* HP */ 130px /* Armor */ 40px /* AC */ 60px; /* XP */ column-gap: 5px; margin-bottom: 5px; font-family: "Proxima Nova", sans-serif; font-size: 1em; align-items: center; } /* Make only the header row bold */ .hireling-row1-labels { font-weight: bold; } .hireling-row1-data { font-weight: normal; } /* Row 2: Attack / Weapon / Hit Mod / Damage / Dmg Mod / Notes Again, same grid template for labels and data */ .hireling-row2-labels, .hireling-row2-data { display: grid; grid-template-columns: 29px /* Attack button */ 150px /* Weapon */ 60px /* Hit Mod */ 60px /* Damage (die) */ 68px /* Dmg Mod */ auto; /* Notes */ column-gap: 5px; margin-bottom: 5px; font-family: "Proxima Nova", sans-serif; font-size: 1em; align-items: center; } /* Header row bold, data normal */ .hireling-row2-labels { font-weight: bold; } .hireling-row2-data { font-weight: normal; } .sheet-hireling-tab { margin-top: 10px; } .hireling-col-name { width: 255px;} .hireling-col-race { width: 105px; } .hireling-col-class { width: 105px;} .hireling-col-level { width: 40px; text-align: center !important; } .hireling-col-hp { width: 40px;text-align: center !important; } .hireling-col-armor { width: 130px;} .hireling-col-ac { width: 40px;text-align: center !important;} .hireling-col-xp { width: 60px;text-align: center !important;} .hireling-col-attack { min-width: 29px; text-align: center !important;padding-right:5px; } .hireling-col-weapon { width: 150px;} .hireling-col-hitmod { width: 60px;text-align: center !important;} .hireling-col-dmgdice{ min-width: 60px;} .hireling-col-dmgmod { width: 68px;text-align: center !important; } .hireling-col-notes {text-align: left !important; } select.hireling-col-dmgdice {max-width: 60px;} .hireling-row1-data input[type="text"], .hireling-row1-data select, .hireling-row2-data input[type="text"], .hireling-row2-data select { font-family: "Proxima Nova", sans-serif; height: 29px; line-height: 29px; box-sizing: border-box; border: 1px solid #aaa; text-align: left; padding: 0 4px; font-size:1em; } .hireling-row2-data .hireling-col-attack button { width: 25px; height: 25px; border: 2px solid #000; background: #671c1c; cursor: pointer; font-family: "Proxima Nova", sans-serif; font-size: 0.7em; color: #fff; text-align: center; padding: 0; box-sizing: border-box; } /* ======================================== */ /* NOTES SHEET */ /* ======================================== */ .sheet-notes { margin-top: 10px; } .notes-two-col { display: flex; gap: 20px; } .notes-col { flex: 1; text-align: left; } .notes-entry { margin-bottom: 15px; } .notes-entry input[type="text"], .notes-entry textarea { width: 100%; box-sizing: border-box; font-family: "Proxima Nova"; border: 1px solid #ccc; padding: 5px; margin-bottom: 5px; } .notes-entry textarea[type="text"], .notes-entry textarea { height:50px; } /* ==================================================== */ /* ==== OVERRIDE ROLL20'S DEFAULT INPUT MARGINS ==== */ /* ==================================================== */ .charsheet input, .charsheet select, .charsheet textarea, .monsheet input, .monsheet select, .monsheet textarea { margin-bottom: 0 !important; line-height: normal !important; /* prevents weird height shrinkage */ height: auto !important; /* stops Roll20's 18px forced height */ } /* ======================================== */ /* MONSTER SHEET */ /* ======================================== */ .monster-sheet { font-family: "Proxima Nova", sans-serif; margin: 10px; /* more padding on the right so the attack column doesn’t butt the dialog edge */ padding: 10px 36px 10px 10px; /* top, right, bottom, left */ border: none; background: #fff; margin-top: 0; } .monster-sheet .monster-header { display: grid; grid-template-columns: 1fr 3fr; gap: 30px; } .monster-sheet-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; /* slightly closer together so the whole block shifts left a bit */ } .monster-sheet .monster-info-grid { display: grid; grid-template-columns: 40px 100px 180px; row-gap: 5px; align-items: center; align-self: start; } .monster-sheet .stat-row { display: contents; } .monster-sheet .stat-button { grid-column: 1; text-align: center; } .monster-sheet .stat-label { grid-column: 2; font-weight: bold; font-size: 1.1em; margin-left: 5px; } .monster-sheet .stat-input { grid-column: 3; } .monster-sheet .stat-input input[type="text"] { width: 100%; border: none; border-bottom: 2px solid rgb(97,97,97); padding: 2px; font-size: 1.1em; background: transparent; border-radius: 0; } .monster-sheet .stat-input input[type="text"]:hover, .monster-sheet .stat-input input[type="text"]:focus { border-bottom-color: rgb(150,150,150); } .monster-sheet .double-input { display: flex; gap: 5px; } .monster-sheet .double-input input[type="text"] { width: calc(50% - 2.5px); } .monster-sheet .monster-image img { width: 100%; max-width: 150px; border: 2px solid rgb(97,97,97); } .monster-sheet button[type="roll"] { background: transparent; border: 2px solid black; width: 20px; height: 20px; cursor: pointer; padding: 0; display: flex; justify-content: center; align-items: center; color: black; font-weight: 500; font-size: 1.7em !important; border: 0; text-shadow: none; box-shadow: none; } .monster-sheet button[type="roll"]:hover { color: rgb(255, 255, 255); background:rgb(122, 42, 42) } .monster-sheet .monster-saving-throws { margin-top: 30px; text-align: left; } .monster-sheet .monster-saving-throws h3 { font-size: 1.4em; margin: 5px 0; } .monster-sheet .saving-throws-grid { display: grid; grid-template-columns: repeat(5, auto); gap: 5px; justify-content: start; } .monster-sheet .saving-throw { display: flex; flex-direction: column; align-items: flex-start; margin-left: 20px; } .monster-sheet .saving-throw input[type="text"] { width: 40px; border: none; border-bottom: 2px solid rgb(97, 97, 97); padding: 5px; font-size: 1.1em; background: transparent; border-radius: 0; text-align: center; } .saving-throw [type="roll"]{ margin-left: 10px !important; } .monster-sheet .saving-throw input[type="text"]:hover, .monster-sheet .saving-throw input[type="text"]:focus { border-bottom-color: rgb(150,150,150); } .monster-sheet .saving-label { font-size: 1em; margin-top: 2px; text-align: center; width: 100%; } .monster-sheet .monster-description { margin-top: 10px; height: 100%; } .monster-sheet .monster-description h3 { font-size: 1.4em; text-align: left; margin: 5px 0; } .monster-sheet .monster-description textarea { height: 100%; padding: 5px; font-size: 1.1em; background: transparent; border-radius: 0; } .monster-sheet .monster-description textarea:hover, .monster-sheet .monster-description textarea:focus { border-color: rgb(150,150,150); } .mon-atk-row-1 { display: grid; grid-template-columns: 1fr 3fr; gap: 10px; align-items: center; } .mon-atk-row-2 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 10px; align-items: center; } .mon-atk-row-description { display: grid; grid-template-columns: 100%; gap: 10px; align-items: start; } .mon-atk-row-description textarea { margin-top: 16px !important; } .monster-attack input[type="text"] { border: none; border-bottom: 2px solid rgb(97,97,97); font-size: 1em; background: transparent; border-radius: 0; width: 100%; box-sizing: border-box; padding: 1px !important; } .monster-attack label { font-size: 1em; font-weight: bold; margin-right: 4px !important; } .monster-attack .atk-entry { margin-bottom: 10px; } .monster-attack textarea { width: 90%; height:60px; border: 1px solid rgb(97,97,97); padding: 5px; font-size: 1.1em; background: transparent; border-radius: 0; box-sizing: border-box; margin-bottom:25px; } .mon-atk-row-1, .mon-atk-row-2 { display: flex; align-items: center; gap: 5px; } /* Tighten monster attack label spacing */ .monster-attack label { margin: 0 2px 0 0 !important; /* removes default spacing */ padding: 0 !important; } /* Reduce input padding */ .monster-attack input[type="text"] { padding: 2px 3px !important; /* subtle but cleaner */ } .mon-atk-row-1 label, .mon-atk-row-2 label { margin: 0; display: inline-block; width: auto; font-size: 1.1em; } .mon-atk-row-1 input[type="text"], .mon-atk-row-2 input[type="text"] { width: auto; flex: 1; margin: 0; padding: 3px; font-size: 1.1em; } .monster-attack button[type="roll"] { flex-shrink: 0; margin: 0; } .sheet-weapon-table { width: 100%; margin-bottom: 1em; } .weapon-row { display: grid; grid-template-columns: /* roll button */ 2em /* name */ 5.5fr /* type */ 2fr /* hit mod */ 1fr /* dmg */ 1.5fr /* dmg mod */ 1fr; align-items: center; gap: 0.5em; padding: 0.2em 0; } .header-row { font-family: "Proxima Nova"; font-weight: bold; border-bottom: 2px solid #000000; font-size: 1.2em; margin-bottom: 5px; } .header-row .cell-weapon { grid-column: 1 / span 2; } .header-row .cell-type { text-align: left; } .header-row .cell-hitmod { text-align: center; } .header-row .cell-dmg { text-align: center; } .header-row .cell-dmgmod { text-align: center; } .weapon-row button { width: 1.5em; height: 1.5em; padding: 0; border: none; background: transparent; cursor: pointer; } .weapon-row input[type="text"], .weapon-row select { width: 100%; box-sizing: border-box; padding: 2px 4px; border: 1px solid #888; border-radius: 2px; font-size: 1.2em; margin-bottom:0; background: #fff; font-family: "Proxima Nova"; height:28px; } .weapon-row input[name="attr_new_weapon"] { border-top: none; border-left: none; border-right: none; border-bottom: 1px solid #888; border-radius: 0; padding-left: 0; text-align:left !important; } .weapon-row input[type="text"] { text-align:center; } .sheet-weapon-table .repcontrol { margin-top:10px; } .sheet-weapon-table hr { margin-top: 10px; margin-bottom: 10px; border: 0; border-top: 1px solid #000000; } .repcontrol .btn { color: #000000; font-family: "Proxima Nova"; border-radius: 2px; box-shadow: none; background-color: #f1f1f1; background-image: none; } .sheet-atk-weapon { font-family: "Proxima Nova"; }