Files
Todd-Antill 469abfa9cb Add official Dragonslayer sheet files
Added all required files for the official Dragonslayer Classic Fantasy RPG character sheet:


• dragonslayer.css – complete styling for all tabs and rolltemplates
• sheet.json – metadata, instructions, preview reference
• dragonslayer.jpg – sheet preview image for Roll20 directory

These files form the complete, sanctioned sheet approved by Greg Gillespie.
2025-11-24 18:19:54 -06:00

1711 lines
33 KiB
CSS
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
/* ======================================== */
/* 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 doesnt 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";
}