template.css

.sheet-rolltemplate-attack .sheet-template-container .sheet-row1 {
    background-color: #ffffff;
}

.sheet-rolltemplate-attack .sheet-template-container .sheet-row2 {
    background-color: #e5e5e5;
}

.sheet-rolltemplate-attack .sheet-template-container {
    background-color: #ffffff;
    border: 1px solid;
    padding: 2px;
    width: 189px;
}

.sheet-rolltemplate-attack .sheet-template-container h1 {
    color: rgb(126, 45, 64);
    font-size: 1.2em;
    font-variant: small-caps;
    line-height: 20px;
}

.sheet-rolltemplate-attack .sheet-template-container div {
    padding: 2px;
};
 
.sheet-rolltemplate-attack .sheet-template-container span {
    color: rgb(126, 45, 64);
    font-family: "Times New Roman", Times, serif;
    font-size: 1.2em;
    font-variant: small-caps;
    line-height: 1.6em;
    padding-left: 5px;
    text-align: left;
}
 
.sheet-rolltemplate-attack .sheet-arrow-right {
    border-bottom: 2px solid transparent;
    border-left: 180px solid rgb(126, 45, 64);
    border-top: 2px solid transparent;
}

.sheet-rolltemplate-attack .sheet-template-container .sheet-thead {
    font-weight: bold;
}

.sheet-rolltemplate-attack .sheet-template-container .sheet-tcat {
    font-style: italic;
}
 
.sheet-rolltemplate-attack .sheet-template-container .sheet-row1 .inlinerollresult  {
    background-color: #ffffff;
    border: none;
}

.sheet-rolltemplate-attack .sheet-template-container .sheet-row2 .inlinerollresult  {
    background-color: #e5e5e5;
    border: none;
}
 
.sheet-rolltemplate-attack .sheet-template-container .inlinerollresult.fullcrit {
    color: #3FB315;
    border: none;
}
 
.sheet-rolltemplate-attack .sheet-template-container .inlinerollresult.fullfail {
    color: #B31515;
    border: none;
}
 
.sheet-rolltemplate-attack .sheet-template-container .inlinerollresult.importantroll {
    color: #4A57ED;
    border: none;
}

template.html

<rolltemplate class="sheet-rolltemplate-attack">
    <div class="sheet-template-container">
        <div class="sheet-template-header"><h1>{{name}}</h1></div>
        <div class="arrow-container"><div class="arrow-right"></div></div>
        <div class="row1"><span class="thead">{{name1}}</span></div>
        <div class="row1">
            <span class="tcat">Attack:</span> {{attack1}}
            {{#rollWasCrit() attack1}}
                | <span class="tcat">Confirm:</span> {{confirm1}}
            {{/rollWasCrit() attack1}}
        </div>
        <div class="row1">
            <span class="tcat">Damage:</span> {{damage1}}
            {{#rollWasCrit() attack1}}
                | <span class="tcat">Add Crit:</span> {{crit1}}
            {{/rollWasCrit() attack1}}
        </div>
        {{#notes1}}
            <div class="row1">
                <span class="tcat">Notes:</span> {{notes1}}
            </div>
        {{/notes1}}
        {{#name2}}
            <div class="row2"><span class="thead">{{name2}}</span></div>
            <div class="row2">
                <span class="tcat">Attack:</span> {{attack2}}
                {{#rollWasCrit() attack2}}
                    | <span class="tcat">Confirm:</span> {{confirm2}}
                {{/rollWasCrit() attack2}}
            </div>
            <div class="row2">
                <span class="tcat">Damage:</span> {{damage2}}
                {{#rollWasCrit() attack2}}
                    | <span class="tcat">Add Crit:</span> {{crit2}}
                {{/rollWasCrit() attack2}}
            </div>
            {{#notes2}}
                <div class="row2">
                    <span class="tcat">Notes:</span> {{notes2}}
                </div>
            {{/notes2}}
        {{/name2}}
        {{#name3}}
            <div class="row1"><span class="thead">{{name3}}</span></div>
            <div class="row1">
                <span class="tcat">Attack:</span> {{attack3}}
                {{#rollWasCrit() attack3}}
                    | <span class="tcat">Confirm:</span> {{confirm3}}
                {{/rollWasCrit() attack3}}
            </div>
            <div class="row1">
                <span class="tcat">Damage:</span> {{damage3}}
                {{#rollWasCrit() attack3}}
                    | <span class="tcat">Add Crit:</span> {{crit3}}
                {{/rollWasCrit() attack3}}
            </div>
            {{#notes3}}
                <div class="row1">
                    <span class="tcat">Notes:</span> {{notes3}}
                </div>
            {{/notes3}}
        {{/name3}}
        {{#name4}}
            <div class="row2"><span class="thead">{{name4}}</span></div>
            <div class="row2">
                <span class="tcat">Attack:</span> {{attack4}}
                {{#rollWasCrit() attack4}}
                    | <span class="tcat">Confirm:</span> {{confirm4}}
                {{/rollWasCrit() attack4}}
            </div>
            <div class="row2">
                <span class="tcat">Damage:</span> {{damage4}}
                {{#rollWasCrit() attack4}}
                    | <span class="tcat">Add Crit:</span> {{crit4}}
                {{/rollWasCrit() attack4}}
            </div>
            {{#notes4}}
                <div class="row2">
                    <span class="tcat">Notes:</span> {{notes4}}
                </div>
            {{/notes4}}
        {{/name4}}
        {{#name5}}
            <div class="row1"><span class="thead">{{name5}}</span></div>
            <div class="row1">
                <span class="tcat">Attack:</span> {{attack5}}
                {{#rollWasCrit() attack5}}
                    | <span class="tcat">Confirm:</span> {{confirm5}}
                {{/rollWasCrit() attack5}}
            </div>
            <div class="row1">
                <span class="tcat">Damage:</span> {{damage5}}
                {{#rollWasCrit() attack5}}
                    | <span class="tcat">Add Crit:</span> {{crit5}}
                {{/rollWasCrit() attack5}}
            </div>
            {{#notes5}}
                <div class="row1">
                    <span class="tcat">Notes:</span> {{notes5}}
                </div>
            {{/notes5}}
        {{/name5}}
        {{#name6}}
            <div class="row2"><span class="thead">{{name6}}</span></div>
            <div class="row2">
                <span class="tcat">Attack:</span> {{attack6}}
                {{#rollWasCrit() attack6}}
                    | <span class="tcat">Confirm:</span> {{confirm6}}
                {{/rollWasCrit() attack6}}
            </div>
            <div class="row2">
                <span class="tcat">Damage:</span> {{damage6}}
                {{#rollWasCrit() attack6}}
                    | <span class="tcat">Add Crit:</span> {{crit6}}
                {{/rollWasCrit() attack6}}
            </div>
            {{#notes6}}
                <div class="row2">
                    <span class="tcat">Notes:</span> {{notes6}}
                </div>
            {{/notes6}}
        {{/name6}}
        {{#name7}}
            <div class="row1"><span class="thead">{{name7}}</span></div>
            <div class="row1">
                <span class="tcat">Attack:</span> {{attack7}}
                {{#rollWasCrit() attack7}}
                    | <span class="tcat">Confirm:</span> {{confirm7}}
                {{/rollWasCrit() attack7}}
            </div>
            <div class="row1">
                <span class="tcat">Damage:</span> {{damage7}}
                {{#rollWasCrit() attack7}}
                    | <span class="tcat">Add Crit:</span> {{crit7}}
                {{/rollWasCrit() attack7}}
            </div>
            {{#notes7}}
                <div class="row1">
                    <span class="tcat">Notes:</span> {{notes7}}
                </div>
            {{/notes7}}
        {{/name7}}
        {{#name8}}
            <div class="row2"><span class="thead">{{name8}}</span></div>
            <div class="row2">
                <span class="tcat">Attack:</span> {{attack8}}
                {{#rollWasCrit() attack8}}
                    | <span class="tcat">Confirm:</span> {{confirm8}}
                {{/rollWasCrit() attack8}}
            </div>
            <div class="row2">
                <span class="tcat">Damage:</span> {{damage8}}
                {{#rollWasCrit() attack8}}
                    | <span class="tcat">Add Crit:</span> {{crit8}}
                {{/rollWasCrit() attack8}}
            </div>
            {{#notes8}}
                <div class="row2">
                    <span class="tcat">Notes:</span> {{notes8}}
                </div>
            {{/notes8}}
        {{/name8}}
        {{#name9}}
            <div class="row1"><span class="thead">{{name9}}</span></div>
            <div class="row1">
                <span class="tcat">Attack:</span> {{attack9}}
                {{#rollWasCrit() attack9}}
                    | <span class="tcat">Confirm:</span> {{confirm9}}
                {{/rollWasCrit() attack9}}
            </div>
            <div class="row1">
                <span class="tcat">Damage:</span> {{damage9}}
                {{#rollWasCrit() attack9}}
                    | <span class="tcat">Add Crit:</span> {{crit9}}
                {{/rollWasCrit() attack9}}
            </div>
            {{#notes9}}
                <div class="row1">
                    <span class="tcat">Notes:</span> {{notes9}}
                </div>
            {{/notes9}}
        {{/name9}}
        {{#name10}}
            <div class="row2"><span class="thead">{{name10}}</span></div>
            <div class="row2">
                <span class="tcat">Attack:</span> {{attack10}}
                {{#rollWasCrit() attack10}}
                    | <span class="tcat">Confirm:</span> {{confirm10}}
                {{/rollWasCrit() attack10}}
            </div>
            <div class="row2">
                <span class="tcat">Damage:</span> {{damage10}}
                {{#rollWasCrit() attack10}}
                    | <span class="tcat">Add Crit:</span> {{crit10}}
                {{/rollWasCrit() attack10}}
            </div>
            {{#notes10}}
                <div class="row2">
                    <span class="tcat">Notes:</span> {{notes10}}
                </div>
            {{/notes10}}
        {{/name10}}
    </div>
</rolltemplate>