Switch to using Custom Roll Templates

Change all roll buttons to use a new roll template that is hopefully
easier to read and more closely match those in the rulebook.

Featuring:
- Icons for damage and range types
- Colors for different types of roll
- An Accuracy/Difficuly block built in to all rolls

The Accuracy/Difficulty block was inspired by Helmic's Lancer NPC
templates and the "Always roll Advantage" from the 5e sheet.

I will quote Helmec on its use:
> Accuracy and difficulty are to be read left to right.
> If an NPC has +2 accuracy, then the first two d6 results from the left
> are what it rolled for accuracy.
>
> If the NPC has 1 difficulty, then the first d6 instead counts as
> difficulty.  I highly recommend sneaking a smiilar block of d6’s into
> your players’ weapons’ note sections, just for the sake of speeding up
> the game instead of waiting a whole minute for someone to roll their
> accuracy and another minute for them to roll it again because
> they forgot to factor in cover.

I also updated the Mech Weapons section to allow for Threat, Cone, Line,
Blast, and Burst to be specified instead of just range. A second "range"
field is also added to allow "Range 5 Blast 2" style weapons.

LANCER RPG (1.8)/LANCER.css

@@ -232,7 +232,7 @@ input[type=number] {/*workaround for firefox jank*/
 /*-------------Button-------------*/
 button[type=roll].sheet-grit-roll::before{
     background:#000;
-    content: ''; 
+    content: '';
 }
 
 button[type=roll]{
@@ -246,7 +246,7 @@ button[type=roll].sheet-pilotweapon-roll::before{
     z-index:0;
     border-radius:0px;
     outline:none;
-    content: ''; 
+    content: '';
 }
 
 button[type=roll].sheet-hase-roll::before{
@@ -254,28 +254,28 @@ button[type=roll].sheet-hase-roll::before{
     z-index:0;
     border-radius:0px;
     outline:none;
-    content: ''; 
+    content: '';
 }
 
 button[type=roll].sheet-weapon-roll::before{
-    content: ''; 
+    content: '';
 }
 
 
 button[type=roll].sheet-core-struct-roll::before{
-    content: ''; 
+    content: '';
 }
 
 button[type=roll].sheet-sys-roll::before{
-    content: ''; 
+    content: '';
 }
 
 button[type=roll].sheet-talent-roll::before{
-    content: ''; 
+    content: '';
 }
 
 
-button.sheet-grit-roll{ 
+button.sheet-grit-roll{
     box-shadow:none;
     border:none;
     border-radius:0px;
@@ -288,7 +288,7 @@ button.sheet-grit-roll{
 button.sheet-talent-roll{
     width:405px;
     right:3px;
-    text-align: left; 
+    text-align: left;
     box-shadow:none;
     border:none;
     position:relative;
@@ -400,12 +400,12 @@ label.sheet-hp-section-title
 {
     font-size:16px;
     height:100%;
-    color:#ffffff;  
+    color:#ffffff;
     text-align:center;
     padding-top:2px;
 }
 
-div.sheet-headerbar label.sheet-section-title 
+div.sheet-headerbar label.sheet-section-title
 {
     padding-top:1px;
 }
@@ -449,7 +449,7 @@ div.sheet-pilotweps input
     margin:0px;
     position:relative;
     bottom:1px;
-    left:2px;   
+    left:2px;
     padding-left:2px;
     padding-top:4px;
     padding-right:0px;
@@ -480,10 +480,10 @@ label.sheet-mid
 }
 /*-------------Input-------------*/
 
-input[type=number]::-webkit-inner-spin-button, 
-input[type=number]::-webkit-outer-spin-button { 
-  -webkit-appearance: none; 
-  margin: 0; 
+input[type=number]::-webkit-inner-spin-button,
+input[type=number]::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
 }
 
 input
@@ -605,7 +605,7 @@ input.sheet-structure, input.sheet-corestress{
     margin-right:10px;
     width: 55px;
     height: 40px;
-    cursor: pointer;    
+    cursor: pointer;
     position: relative;
     opacity: 0;
     z-index: 9999;
@@ -644,7 +644,7 @@ input.sheet-overcharge,input.sheet-structure, input.sheet-corestress
 {
     width: 38px;
     height:40px;
-    cursor: pointer;    
+    cursor: pointer;
     opacity:0;
     border:0px;
     margin-right:0px;
@@ -784,7 +784,7 @@ span.sheet-hp-separator
     vertical-align:center;
     font-weight:bold;
     margin-top:-4px;
-}   
+}
 
 span.sheet-haseinfo
 {
@@ -796,7 +796,7 @@ span.sheet-overcharge,span.sheet-structure, span.sheet-corestress
     background: #dbdbdb;
     text-align: center;
     display: inline-block;
-    font-size: 21px;    
+    font-size: 21px;
     color: black;
     padding-top:3px;
     font-weight: bold;
@@ -804,7 +804,7 @@ span.sheet-overcharge,span.sheet-structure, span.sheet-corestress
     margin-right:0px;
     margin-left:0px;
     height: 44px;
-    cursor: pointer;    
+    cursor: pointer;
     position: relative;
     vertical-align: middle;
     border: 3px solid black;
@@ -1002,7 +1002,7 @@ textarea
 
 /*-------------TAB SETUP-------------*/
 /*this hides the contents of each tab by default*/
-.charsheet div[class^="sheet-section"] {    
+.charsheet div[class^="sheet-section"] {
     display: none;
 }
 
@@ -1014,7 +1014,7 @@ textarea
     display: block;
 }
 
-.charsheet input.sheet-tab99:checked ~ div[class^="sheet-section"] {    
+.charsheet input.sheet-tab99:checked ~ div[class^="sheet-section"] {
     display: block;
 }
 
@@ -1022,7 +1022,7 @@ textarea
 .charsheet input.sheet-tab {
     width: 100px;
     height: 50px;
-    cursor: pointer;    
+    cursor: pointer;
     position: relative;
     opacity: 0;
     z-index: 9999;
@@ -1032,7 +1032,7 @@ textarea
     left:15px;
     width: 100px;
     height: 50px;
-    cursor: pointer;    
+    cursor: pointer;
     position: relative;
     opacity:0;
     z-index: 9999;
@@ -1042,14 +1042,14 @@ textarea
 .charsheet span.sheet-tab {
     text-align: center;
     display: inline-block;
-    font-size: 16px;    
+    font-size: 16px;
     background: #c7c7c7;
     color: black;
     font-weight: bold;
     width: 100px;
     border-radius:0px;
     height: 40px;
-    cursor: pointer;    
+    cursor: pointer;
     position: relative;
     vertical-align: middle;
     margin-left: -101px;/*originally 91px*/
@@ -1059,14 +1059,14 @@ textarea
     left:15px;
     text-align: center;
     display: inline-block;
-    font-size: 16px;    
+    font-size: 16px;
     background: #c7c7c7;
     color: black;
     font-weight: bold;
     border-radius: 0px;
     width: 100px;
     height: 40px;
-    cursor: pointer;    
+    cursor: pointer;
     position: relative;
     vertical-align: middle;
     margin-left: -101px;/*originally 91px*/
@@ -1101,7 +1101,7 @@ input.sheet-talentrank3:checked+span.sheet-talentrank3 + input.sheet-talentrank2
 .charsheet input.sheet-tab6:checked + span.sheet-tab6,
 .charsheet input.sheet-tab7:checked + span.sheet-tab7,
 .charsheet input.sheet-tab8:checked + span.sheet-tab8,
-.charsheet input.sheet-tab99:checked + span.sheet-tab99 
+.charsheet input.sheet-tab99:checked + span.sheet-tab99
 {
     background: #007575;
     color: #fff;
@@ -1195,3 +1195,135 @@ input.sheet-corepower:not(:checked) + span.sheet-corepower:after
 content:"✓";
 }
 
+/*-------------ROLLTEMPLATE STYLING-------------*/
+/* Icon */
+.sheet-icon {
+    max-height: 15px;
+}
+
+/* Smaller margins - remove these if you want the huge default left margin */
+.sheet-rolltemplate-lancer {
+    margin-left: -37px;
+}
+.withoutavatars .sheet-rolltemplate-lancer {
+    margin-left: -7px;
+}
+
+.sheet-rolltemplate-lancer .sheet-container {
+    border: 1px solid;
+    /* by default, the border is the same color as the header. You can change this here, e.g. to black */
+    border-color: var(--header-bg-color);
+}
+
+/* Header formatting - name and tags */
+.sheet-rolltemplate-lancer .sheet-header {
+    background-color: var(--header-bg-color);
+    text-align: left;
+    color: var(--header-text-color);
+    padding: 5px;
+    font-family: Consolas, monaco, monospace;
+}
+.sheet-rolltemplate-lancer .sheet-name {
+    font-size:1.1em;
+}
+.sheet-rolltemplate-lancer .sheet-tags {
+    font-size:.9em;
+}
+
+/* example colors */
+.sheet-rolltemplate-lancer .sheet-container {
+    /* this is the default color */
+    --header-bg-color: #D2B48C;
+    --header-text-color: #FFF;
+}
+.sheet-rolltemplate-lancer .sheet-container.sheet-color-red {
+    --header-bg-color: #c31a20;
+    --header-text-color: #FFF;
+}
+.sheet-rolltemplate-lancer .sheet-container.sheet-color-green {
+    --header-bg-color: #68be43;
+    --header-text-color: #FFF;
+}
+.sheet-rolltemplate-lancer .sheet-container.sheet-color-teal {
+    --header-bg-color: #0a7675;
+    --header-text-color: #FFF;
+}
+.sheet-rolltemplate-lancer .sheet-container.sheet-color-black {
+    /* this is the default color */
+    --header-bg-color: #000;
+    --header-text-color: #FFF;
+}
+.sheet-rolltemplate-lancer .sheet-container.sheet-color-purple {
+    /* this is the default color */
+    --header-bg-color: #7f1f78;
+    --header-text-color: #FFF;
+}
+
+.sheet-rolltemplate-lancer .sheet-container.sheet-color-orange {
+    /* this is the default color */
+    --header-bg-color: #c85a00;
+    --header-text-color: #FFF;
+}
+
+/* Range/Threat & Damage row */
+.sheet-rolltemplate-lancer .sheet-rng-dmg {
+    font-weight: bold;
+    grid-column: span 2;
+    text-align: left;
+    padding: 5px;
+    font-family: Consolas, monaco, monospace;
+}
+
+/* Range/Threat & Damage row */
+.sheet-rolltemplate-lancer .sheet-to-hit {
+    grid-column: span 2;
+    text-align: left;
+    padding: 5px;
+    font-family: Consolas, monaco, monospace;
+}
+
+/* Effects & Notes */
+.sheet-rolltemplate-lancer .sheet-effect {
+    grid-column: span 2;
+    text-align: left;
+    padding: 5px;
+    background:#EEE;
+}
+
+.sheet-rolltemplate-lancer .sheet-d20 {
+    font-family: dicefontd20;
+    font-size: 1.3em;
+    font-weight: bold;
+    vertical-align: middle;
+}
+
+/* Icon */
+.sheet-rolltemplate-lancer .sheet-icon {
+    max-height: 15px;
+    vertical-align: text-top;
+}
+
+/* Allprops part */
+.sheet-rolltemplate-lancer .sheet-content {
+    display: grid;
+    background: #FFF;
+    /* Header formatting - modify the column layout below */
+    grid-template-columns: auto auto;
+    /* Line height to match default roll template */
+    line-height:1.4em;
+}
+.sheet-rolltemplate-lancer .sheet-content > div {
+    padding: 5px;
+}
+
+/* Left column */
+.sheet-rolltemplate-lancer .sheet-content .sheet-key {
+    font-weight: bold;
+    padding-right: 10px;
+    text-align: right;
+}
+
+/* Empty rule, use this if you want to change the right column
+.sheet-rolltemplate-lancer .sheet-value {
+}
+*/