Roll20 Character Sheet for Into the Odd

into_the_odd.css

.repitem {
    display: flex;
    align-items: center;
    margin-bottom: 3px;
    justify-content: space-between;
}
.sheet-ability-value, .sheet-ability-button {
    display: inline-block !important;
}
.sheet-flex-between {
    display: flex;
    justify-content: space-between;
}
.sheet-flex {
    display: flex;
    align-items: start;
}
.sheet-noborder, .sheet-thick-border {
    padding: 15px;
}
.sheet-thick-border {
    box-sizing: border-box;
    border: 4px solid;
    overflow: auto;
    margin-bottom: 10px;
}
.sheet-col-left {
    width: 48%;
}
.sheet-col-right {
    width: 51%;
}
input {
    border-radius: 0;
    border: 1px solid;
}
input[type=number] {
    -moz-appearance: textfield;
}
input[type=number]::-webkit-outer-spin-button,.charsheet input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.sheet-info-name {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
}
.sheet-info-name input {
    flex: 1 1 0;
    margin: 0 1%;
}
.sheet-info-row {
    display: flex;
    text-align: center;
    flex-wrap: wrap;
    justify-content: space-evenly;
}
.sheet-info-row input {
    text-align: center;
}
.sheet-info1 {
    width: 11%;
}
.sheet-info2 {
    width: 20%;
}
.sheet-info3 {
    width: 32%;
}
.sheet-bottom-line {
    border: none;
    border-bottom: 1px solid;
}
.sheet-ability {
    width: 33%;
    text-align: center;
}
input[type=number].sheet-ability-modifier {
    width: 40px;
    height: 40px;
    border-radius: 20px;
    font-size: 20px;
    text-align: center;
    padding: 0;
}
.sheet-subtext {
    width: 138px;
}
input[type=number].sheet-ability-value {
    width: 40px;
    height: 40px;
    font-size: 20px;
    text-align: center;
    display: block;
    margin: 6px auto;
}
button[type=roll].sheet-ability-button {
    width: 40px;
    height: 40px;
    font-size: 26px;
    background-color: white;
    background-image: none;
    color: black;
    text-shadow: none;
    margin: auto;
    display: block;
}

.sheet-equipment-name {
    width: 88%;
    padding-left: 4px;
}
.sheet-equipment {
    display: flex;
    flex-wrap: wrap;
    align-content: start;
}
.sheet-equipment .repcontainer {
    width: 100%;
    order: 2;
}
.sheet-equipment h3 {
    order: 1;
}
.sheet-equipment .repcontrol {
    order: 4;
    width: 100%;
}
input[type=number].sheet-encumbrance,select.sheet-skillvalue {
    width: 45px;
    text-align: center;
}
.sheet-encumbrance-total .sheet-encumbrance {
    font-weight: bold;
}
.sheet-encumbrance-total {
    font-weight: bold;
    align-items: center;
    margin: 5px 0;
    padding-top: 3px;
    order: 3;
    width: 100%;
}
.sheet-top-line {
    border-top: 2px solid black;
}

.sheet-rep-title {
    text-align: center;
    padding: 2px 0;
    font-weight: bold;
    align-items: center;
    margin-bottom: 3px;
}
.sheet-weapon-name {
    width: 65%;
}
.sheet-damage {
    width: 55px;
    vertical-align: top;
}
button[type=roll].sheet-attack-button {
    width: 30px;
    height: 28px;
    font-size: 20px;
    background-color: white;
    background-image: none;
    color: black;
    margin-right: 0;
    text-Shadow: none;
}
.sheet-dummy-attack-button {
    width: 30px;
    margin-left: 3px;
}



/* Roll Templates */
.sheet-rolltemplate-ito-save table {
    width: 100%;
    background: #FFFFFF;
}
.sheet-rolltemplate-ito-save caption {
    text-align: center;
    background: black;
    color: white;
    font-weight: bold;
    line-height: 1em;
}
.sheet-rolltemplate-ito-save td {
  border-bottom: 1px solid black;
  padding: 0 4px !important;
}
.sheet-rolltemplate-ito-save td.sheet-template_label {
    font-weight: bold;
}
.sheet-rolltemplate-ito-save td.sheet-template_value {
    text-align: center;
}
.sheet-rolltemplate-ito-save .inlinerollresult  {
  display: inline-block;
  min-width: 1.5em;
  text-align: center;
  border: 2px solid black;
  background: #BEBEBE;
}
/* Erase the default highlighting of crits/fails */
.sheet-rolltemplate-ito-save .inlinerollresult.fullcrit,
.sheet-rolltemplate-ito-save .inlinerollresult.fullfail,
.sheet-rolltemplate-ito-save .inlinerollresult.importantroll {
  border: 2px solid black;
  background: #BEBEBE;
}

into_the_odd.html

<div class="sheet-flex-between">
    <div class="sheet-col-left sheet-noborder">
        <div class="sheet-flex">
            <div style="margin-right: 20px;">
                <span>Hit Points</span>
                <input type="number" class="sheet-ability-value" name="attr_hp" value="6"> /
                <input type="number" class="sheet-ability-value" name="attr_hp_max" value="6">
            </div>
            <div>
                <span>Armour</span>
                <input type="number" class="sheet-ability-value" name="attr_armour" value="1">
            </div>
        </div>
    </div>
    <div class="sheet-col-right sheet-noborder">
         <div class="sheet-info-name sheet-info-margin">
             <span>Name: </span>
             <input type="text" class="sheet-bottom-line" name="attr_name">
         </div>
         <div class="sheet-info-row">
             <input type="text" class="sheet-info3" name="attr_class">
             <input type="text" class="sheet-info3" name="attr_level">
             <input type="text" class="sheet-info2" name="attr_age">
             <input type="text" class="sheet-info1" name="attr_sex">
             <span class="sheet-info3">Job</span>
             <span class="sheet-info3">Level</span>
             <span class="sheet-info2">Age</span>
             <span class="sheet-info1">Sex</span>
         </div>
         <div class="sheet-info-row">
            <select name="attr_wtype" class="dtype">
                <option value="">Never Whisper Rolls</option>
                <option value="/w gm ">Always Whisper Rolls</option>
            </select>
         </div>
    </div>
</div>

    <div class="sheet-thick-border">
        <h3>Ability Scores</h3>
        <div class="sheet-flex">
            <div class="sheet-ability">
                <span>Strength</span>
                <input type="number" class="sheet-ability-value" name="attr_str" value="10"> /
                <input type="number" class="sheet-ability-value" name="attr_str_max" value="10">
                <button class="sheet-ability-button btn ui-draggable" type="roll" value="@{wtype}&{template:ito-save} {{name=Strength Save}} {{success=[[@{str}]]}} {{roll1=[[1d20]]}}" name="roll_StrCheck"/>
            </div>
            <div class="sheet-ability">
                <span>Dexterity</span>
                <input type="number" class="sheet-ability-value" name="attr_dex" value="10"> /
                <input type="number" class="sheet-ability-value" name="attr_dex_max" value="10">
                <button class="sheet-ability-button btn ui-draggable" type="roll" value="@{wtype}&{template:ito-save} {{name=Dexterity Save}} {{success=[[@{dex}]]}} {{roll1=[[1d20]]}}" name="roll_DexCheck"/>
            </div>
            <div class="sheet-ability">
                <span>Willpower</span>
                <input type="number" class="sheet-ability-value" name="attr_wil" value="10"> /
                <input type="number" class="sheet-ability-value" name="attr_wil_max" value="10">
                <button class="sheet-ability-button btn ui-draggable" type="roll" value="@{wtype}&{template:ito-save} {{name=Willpower Save}} {{success=[[@{wil}]]}} {{roll1=[[1d20]]}}" name="roll_WilCheck"/>
            </div>
        </div>
    </div>

<div class="sheet-flex-between">
    <div class="sheet-col-left sheet-thick-border">
        <h3>Weapons</h3>
        <div class="sheet-rep-title sheet-flex-between">
            <span class="sheet-weapon-name">Name</span>
            <span class="sheet-damage">Damage</span>
            <span class="sheet-dummy-attack-button"></span>
        </div>
        <fieldset class="repeating_weapons">
            <input type="text" name="attr_weaponname" class="sheet-bottom-line sheet-weapon-name">
            <select name="attr_weapondamage" class="dtype sheet-damage">
                <option value="d4">d4</option>
                <option value="d6">d6</option>
                <option value="d8">d8</option>
                <option value="d10">d10</option>
                <option value="d12">d12</option>
            </select>
            <button class="sheet-attack-button btn ui-draggable" type="roll" value="@{wtype}&{template:default} {{name=@{name}'s @{weaponname}}} {{damage=[[@{weapondamage}]]}}" name="roll_Attack"></button>
        </fieldset>
    </div>


    <div class="sheet-col-right sheet-thick-border sheet-equipment">
        <h3>Equipment</h3>
        <fieldset class="repeating_equipment">
             <input type="text" name="attr_itemname" class="sheet-bottom-line sheet-equipment-name">
             <input type="number" name="attr_encumbrance" class="sheet-encumbrance sheet-bottom-line" value="0" step="0.1">
        </fieldset>
        <div class="sheet-top-line sheet-flex-between sheet-encumbrance-total">
          <span class="sheet-equipment-name">Total</span>
          <input type="number" name="attr_encumbrance_total" class="sheet-encumbrance" value="0" readonly="">
        </div>
    </div>
</div>

<div class="sheet-flex-between">
    <div class="sheet-col-left sheet-thick-border">
        <h3>Notes</h4>
        <div class="sheet-flex">
            <textarea name="attr_notes" style="width:97%;height:180px"></textarea>
        </div>
    </div>
    <div class="sheet-col-right sheet-thick-border">
        <h3>Notes 2</h4>
        <div class="sheet-flex">
            <textarea name="attr_notes2" style="width:97%;height:180px"></textarea>
        </div>
    </div>
</div>



<!-- Sheet workers -->
<script type="text/worker">
// Equipment counter
on('change:repeating_equipment remove:repeating_equipment', () => {
  "use strict";
  getSectionIDs('repeating_equipment', idArray => {
    getAttrs(idArray.map(id => `repeating_equipment_${id}_encumbrance`), v => {
      const total = Object.values(v).reduce((m, w) => (m + (parseFloat(w) || 0)), 0);
      setAttrs({
        encumbrance_total: total
      });
    });
  });
});
</script>

<!--
&{template:ito-save} {{name=Test}} {{success=[[50]]}} {{roll1=[[1d100]]}}
-->

<rolltemplate class="sheet-rolltemplate-ito-save">
    <table>
        <caption>{{name}}</caption>
        <tr>
            <td class="template_label">Target:</td>
            <td class="template_value">{{success}}</td>
        </tr>
        <tr>
            <td class="template_label">Rolled:</td>
            <td class="template_value">{{roll1}}</td>
        </tr>
        <tr style="background:#DFF0D8;">
            {{#rollBetween() roll1 1 success}}
			  <td class="template_value" colspan="2">Success</td>
			{{/rollBetween() roll1 1 success}}
		</tr>
		<tr style="background:#F2DEDE;">
			{{#rollGreater() roll1 success}}
			  <td class="template_value" colspan="2">Failure</td>
			{{/rollGreater() roll1 success}}
        </tr>
    </table>
</rolltemplate>