[Ironsworn] New Oracles Page, Bonds Page and Minor Updates (#5761)

* added orcacles page

* added page css

* added oracle previews

* moving to use label for div

* updated text to use Verdana

* updated font size

* fixed margin for oracles

* added roll values for oracles

* added move oracles

* added changes

* titles for oracles updated

* moved ask oracle button to preview

* added empty tables

* fixed burdens

* added fix with master merged

* cleaned up trs

* added combat actions

* added character role oracle

* improved styling for oracles in chat

* fixed spans for themes

* added last of the oracles

* completed oracle functionality

* added new formatting for preview table

* added matching logic for ask the oracle

* fixed formatting of columns for roll template

* (oracles) Twist Logic

* added styling for long lists

* Removed 'Oracles' from sub groups

* added fix for missed  }}

* fixed accidently removed lines

* added bond template

* fixing label usage and replacing with span

* removed console log

* added intial note setup

* fix add attribute for notes

* removed new line

* added styling and placeholders

* improved styling and fixed global checkboces

* updated size difference for page 2 label

* html linting

* fixed momentum burn to use span rather than label

* updated line height

* moved cutom asset ticks to new table

* fixed custom debilities

* (Bonds) Updated title bottom padding to 0.08em

Ironsworn/Ironsworn.css

@@ -40,7 +40,7 @@ h3 {
     font-family: Copperplate, "Copperplate Gothic Light", arial;
     font-weight: bold;
     width: 100%;
-    line-height: 28px;
+    line-height: 24px;
     font-size: 18px;
     text-align: center;
     margin: 0 0 0px;
@@ -115,14 +115,16 @@ hr {
 .sheet-page1tab, 
 .sheet-page2tab,
 .sheet-page3tab,
-.sheet-page4tab {
+.sheet-page4tab,
+.sheet-page5tab {
     display: none;
 }
 
 input[type=radio].sheet-page1:checked ~ div.sheet-page1tab,
 input[type=radio].sheet-page2:checked ~ div.sheet-page2tab,
 input[type=radio].sheet-page3:checked ~ div.sheet-page3tab,
-input[type=radio].sheet-page4:checked ~ div.sheet-page4tab {
+input[type=radio].sheet-page4:checked ~ div.sheet-page4tab,
+input[type=radio].sheet-page5:checked ~ div.sheet-page5tab {
     display: block;
 }
 
@@ -132,25 +134,90 @@ input.sheet-clear-vow + .sheet-vow-clear-label {
     padding: 2px 4px;
 }
 
-.sheet-vow-clear-label {
-    border: 1px solid #ccc;
-    margin-right: 11px;
+input.sheet-pages {
+    opacity: 0;
+    cursor: pointer;  
 }
 
-.sheet-pages:checked + .sheet-page-label {
+input.sheet-clear-vow {
+    opacity: 0;
+    width: 54px;
+    margin-right: 22px;
+    cursor: pointer;  
+}
+
+.sheet-vow-clear-label {
+    border: 1px solid #ccc;
+    margin-left: -80px;
+    width: 80px;
+}
+
+.sheet-pages:checked + span.sheet-page-label {
     background-color: black;
     color: white;
 }
 
-.sheet-page-label:hover,
-.sheet-vow-clear-label:hover {
-    cursor: pointer;
+.sheet-pages:hover + .sheet-page-label,
+.sheet-clear-vow:hover + .sheet-vow-clear-label {
     border-radius: 4px;
     padding: 2px 4px;
     background-color: #ccc;
     color: black;
 }
 
+.sheet-page-label:hover,
+.sheet-vow-clear-label:hover {
+    border-radius: 4px;
+    padding: 2px 4px;
+    background-color: #ccc;
+    color: black;
+}
+
+input.sheet-page1 {
+    width: 140px;
+}
+
+span.sheet-page-label-1 {
+    margin-left: -144px;
+    width: 140px;
+}
+
+input.sheet-page2 {
+    width: 75px;
+}
+
+span.sheet-page-label-2 {
+    width: 75px;
+    margin-left: -78px;
+}
+
+input.sheet-page3 {
+    width: 60px;
+}
+
+span.sheet-page-label-3 {
+    margin-left: -64px;
+    width: 60px;
+}
+
+input.sheet-page4 {
+    width: 60px;
+}
+
+span.sheet-page-label-4 {
+    margin-left: -64px;
+    width: 60px;
+}
+
+input.sheet-page5 {
+    width: 60px;
+}
+
+span.sheet-page-label-5 {
+    margin-left: -64px;
+    width: 60px;
+}
+
 .sheet-vertleft {
     border-left: 2px solid black;
     height: 1000px;
@@ -197,6 +264,33 @@ input.sheet-clear-vow + .sheet-vow-clear-label {
     align-items: center;
 }
 
+input[type=checkbox].sheet-momentum-burn:hover ~ span.sheet-momentum-burn {
+    border-radius: 4px;
+    background-color: #ccc;
+    color: black;
+}
+
+input[type=checkbox].sheet-momentum-burn {
+    width: 80px;
+    height: 1.3em;
+    opacity: 0;
+}
+
+div.sheet-momentum-burn {
+    margin-bottom: 0.5em;
+}
+
+span.sheet-momentum-burn {
+    border-radius: 4px;
+    text-align: center;
+    border: 1px solid #ccc;
+    padding: 0.2em 1.3em 0.2em 1.3em;
+    font-family: Copperplate, "Copperplate Gothic Light", arial;
+    font-weight: bold;
+    font-size: 14px;
+    margin-left: -79px;
+}
+
 .sheet-bonds {
     margin-bottom: 0px;
 }
@@ -228,8 +322,7 @@ input.sheet-clear-vow + .sheet-vow-clear-label {
 }
 .sheet-debility {
     display: flex;
-    justify-content: center;
-    align-items: top;
+    flex-flow: row wrap;
 }
 
 .sheet-flex-container {
@@ -329,7 +422,7 @@ textarea.sheet-full-width {
 }
 
 input.sheet-filler[type="radio"],
-input[type="checkbox"]
+input[type="checkbox"].sheet-checkbox
 {
     opacity: 0;
     width: 16px;
@@ -344,7 +437,7 @@ input[type="checkbox"]
 
 /* Fake radio/checkbox */
 input[type="radio"] + span::before,
-input[type="checkbox"] + span::before
+input[type="checkbox"].sheet-checkbox + span::before
 {
     margin-right: 4px;
     border: solid 1px #a8a8a8;
@@ -364,7 +457,7 @@ input[type="checkbox"] + span::before
     background: -o-radial-gradient(#f6f6f6, #dfdfdf);
     background: radial-gradient(#f6f6f6, #dfdfdf);
 }
-input[type="checkbox"] + span::before,
+input[type="checkbox"].sheet-checkbox + span::before,
 input.sheet-filler[type="radio"] + span::before
 {
     content: "";
@@ -376,7 +469,7 @@ input.sheet-filler[type="radio"] + span::before
     -webkit-border-radius: 3px;
     border-radius: 3px;
 }
-input[type="checkbox"]:checked + span::before
+input[type="checkbox"].sheet-checkbox:checked + span::before
 {
     content: "■";
 }
@@ -441,6 +534,18 @@ input.sheet-filler[type="radio"]:checked ~ input.sheet-filler[type="radio"] + sp
     background-color: #ccc; 
 }
 
+.sheet-oracles {
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: column;
+}
+
+.sheet-oracle {
+    margin: 0em;
+    color: black;
+    display: flex;
+}
+
 .sheet-hidden {
     display: none;
     position: absolute;
@@ -479,6 +584,186 @@ div.sheet-showhide,
     display: none;
 }
 
+/* ORACLES */
+input[type=radio].sheet-action:checked ~ div.sheet-action,
+input[type=radio].sheet-theme:checked ~ div.sheet-theme,
+input[type=radio].sheet-region:checked ~ div.sheet-region,
+input[type=radio].sheet-location:checked ~ div.sheet-location,
+input[type=radio].sheet-coastal-waters-location:checked ~ div.sheet-coastal-waters-location,
+input[type=radio].sheet-location-descriptor:checked ~ div.sheet-location-descriptor ,
+input[type=radio].sheet-settlement-name:checked ~ div.sheet-settlement-name,
+input[type=radio].sheet-quick-settlement-name:checked ~ div.sheet-quick-settlement-name,
+input[type=radio].sheet-settlement-trouble:checked ~ div.sheet-settlement-trouble,
+input[type=radio].sheet-character-role:checked ~ div.sheet-character-role,
+input[type=radio].sheet-character-goal:checked ~ div.sheet-character-goal,
+input[type=radio].sheet-character-descriptor:checked ~ div.sheet-character-descriptor,
+input[type=radio].sheet-ironlander-names:checked ~ div.sheet-ironlander-names,
+input[type=radio].sheet-elf-names:checked ~ div.sheet-elf-names,
+input[type=radio].sheet-giant-names:checked ~ div.sheet-giant-names,
+input[type=radio].sheet-varou-names:checked ~ div.sheet-varou-names,
+input[type=radio].sheet-troll-names:checked ~ div.sheet-troll-names,
+input[type=radio].sheet-combat-action:checked ~ div.sheet-combat-action,
+input[type=radio].sheet-mystic-backlash:checked ~ div.sheet-mystic-backlash,
+input[type=radio].sheet-major-plot-twist:checked ~ div.sheet-major-plot-twist,
+input[type=radio].sheet-challenge-rank:checked ~ div.sheet-challenge-rank,
+input[type=radio].sheet-pay-the-price:checked ~ div.sheet-pay-the-price,
+input[type=radio].sheet-ask-the-oracle:checked ~ div.sheet-ask-the-oracle ,
+input[type=radio].sheet-endure-harm:checked ~ div.sheet-endure-harm,
+input[type=radio].sheet-endure-stress:checked ~ div.sheet-endure-stress {
+    display: block;
+}
+
+.sheet-oracle-container {
+    display: flex;
+    /* justify-content: space-around; */
+    /* width: 500px; */
+    font-family: Verdana, Arial, sans-serif;
+    font-size: 1em;
+    font-weight: bold;
+}
+
+.sheet-oracle-column {
+    display: flex;
+    flex-direction: column;
+    margin-right: 10px;
+}
+
+span.sheet-oracle-result {
+    width: 36em;
+}
+
+
+.sheet-oracle-box {
+    border: 2px solid #414042;
+    box-sizing: border-box;
+    width: 100%;
+}
+
+.sheet-oracle-box:nth-child(n+2) {
+    margin-top: 10px;
+}
+
+.sheet-oracle-title {
+    background-color: #414042;
+    color: #fff;
+    border-bottom: 1px solid #414042;
+    font-size: 1.4em;
+    padding-left: 5px;
+    padding-right: 5px;
+    text-transform: uppercase;
+    width: 12.3em;
+}
+
+.sheet-oracle-table-preview {
+    width: auto;
+}
+
+.sheet-oracle-show {
+    display: inline-flex;
+    font-size: 1em;
+    margin: 0em;
+    padding: 0.3em;
+}
+
+.sheet-oracle-show:hover {
+    background: #969696;
+    cursor: pointer;
+}
+
+.sheet-column-wrap {
+    flex-flow: column wrap;
+    width: 22.5em;
+}
+
+.sheet-oracle-table {
+    border: 2px solid #414042;
+    width: 45em;
+}
+
+.sheet-oracle-table-2-column-group {
+    display: flex;
+}
+
+
+.sheet-oracle-table-2-column {
+    flex-flow: column wrap;
+    height: 48em;
+    display: flex;
+}
+
+.sheet-oracle-table-3-column {
+    flex-flow: column wrap;
+    height: 63em;
+    display: flex;
+}
+
+.sheet-oracle-table-4-column {
+    flex-flow: column wrap;
+    height: 93em;
+    display: flex;
+}
+
+.sheet-oracle-result-4-column {
+    width: 22em;
+}
+
+.sheet-oracle-row:nth-child(2n+1), .sheet-oracle:nth-child(2n+1) {
+    background-color: #ddd;
+}
+
+.sheet-oracle-row {
+    padding: 3px 5px 3px 5px;
+    display: flex;
+    height: auto;
+}
+
+.sheet-oracle-row-2-column {
+    width: 21.7em;
+}
+
+.sheet-oracle-row-3-column {
+    width: 14.2em;
+}
+
+.sheet-oracle-row-4-column {
+    width: 10.47em;
+}
+
+.sheet-oracle-result-3-column {
+    width: 8em;
+}
+
+.sheet-oracle-roll {
+    width: 15%;
+}
+
+.sheet-oracle-roll-2-column {
+    width: 45%;
+}
+
+.sheet-oracle-roll-4-column {
+    width: 109%;
+}
+
+div.sheet-preview-roll {
+    padding: 0em;
+}
+
+span.sheet-preview-roll {
+    width: 30%;
+    margin-left: 1em;
+}
+
+.sheet-button-container {
+    width: 2.4em;
+    border-right: 1px solid black;
+}
+
+.sheet-button-container-preview {
+    width: 2.4em;
+}
+
+/* ASSETS */
 input[type="checkbox"].sheet-showhide:checked ~ div.sheet-showhide,
 input[type="checkbox"].sheet-asset-companion:checked ~ div.sheet-companion,
 input[type="checkbox"].sheet-asset-path:checked ~ div.sheet-path,
@@ -730,13 +1015,125 @@ input.sheet-border-bottom {
     border-bottom: 1px solid black;
 }
 
+.sheet-oracle-footer {
+    background-color: #434b4d;
+    color: #ffffff;
+    line-height: 0.9em;
+    font-size: 0.9em;
+    font-family: Verdana, arial, sans-serif;
+    font-variant: small-caps;
+    font-weight: bold;
+    text-align: left;
+    padding: 0.5rem;
+}
+
+/* BONDS */
+.sheet-bond-container {
+    border: 2px solid #414042;
+    border-radius: 1em;
+    margin-bottom: 1em;
+    padding: 1em;
+}
+
+.sheet-bond-notes {
+    width: 99%;
+}
+
+.sheet-bond-name,
+.sheet-bond-location,
+.sheet-bond-descriptors {
+    border: none;
+    border-radius: 0em;
+    background: transparent;
+    padding: 0;
+    padding-left: 0.5em;
+}
+
+.sheet-bond-descriptors {
+    width: 43%;
+}
+
+.sheet-bond-location {
+    width: 40%;
+}
+
+p.sheet-bond-title {
+    text-align: left;
+    font-family: Copperplate, "Copperplate Gothic Light", arial;
+    font-weight: bold;
+    font-size: 16px;
+    margin: 0 0 0px;
+    padding: 0.1em 0.2em 0.08em 0.2em;
+    text-transform: uppercase;
+    vertical-align: bottom;
+    display: inline;
+    background: #414042;
+    color: white;
+    border-radius: 0.3em 0em 0em 0.3em;
+}
+
+.sheet-bond-name::placeholder,
+.sheet-bond-location::placeholder,
+.sheet-bond-descriptors::placeholder {
+    color: #8a8a8a;
+}
+
+input[type="checkbox"].sheet-show-bond-info:checked ~ div.sheet-show-bond-info {
+    display: flex;
+    flex-flow: row wrap;
+}
+
+input[type="checkbox"].sheet-show-bond-info {
+    width: 4.5em;
+    height: 18px;
+    top: 0;
+    opacity: 0;
+    border-radius: 4px;
+    padding: 2px 4px;
+}
+
+input[type="checkbox"].sheet-show-bond-info:hover ~ span.sheet-show-bond-info {
+    border-radius: 4px;
+    padding: 2px 4px;
+    background-color: #ccc;
+    color: black;
+}
+
+input[type="checkbox"].sheet-show-bond-info:checked ~ span.sheet-show-bond-info {
+    border-radius: 4px;
+    padding: 2px 4px;
+    border: 1px solid;
+    background-color: #414042;
+    color: white;
+}
+
+span.sheet-show-bond-info {
+    margin-left: -4.9em;
+    border-radius: 4px;
+    padding: 2px 4px;
+    border: 1px solid;
+    font-family: Copperplate, "Copperplate Gothic Light", arial;
+    font-weight: bold;
+}
+
+.sheet-full-width {
+    width: 100%;
+    margin-top: 0.3em;
+}
+
 /* ROLL TEMPLATE */
 .sheet-rolltemplate-ironsworn table>thead>tr>th, 
 .sheet-rolltemplate-ironsworn table>tbody>tr>th, 
 .sheet-rolltemplate-ironsworn table>tfoot>tr>th, 
 .sheet-rolltemplate-ironsworn table>thead>tr>td, 
 .sheet-rolltemplate-ironsworn table>tbody>tr>td, 
-.sheet-rolltemplate-ironsworn table>tfoot>tr>td {
+.sheet-rolltemplate-ironsworn table>tfoot>tr>td,
+.sheet-rolltemplate-ironswornoracles table>thead>tr>th, 
+.sheet-rolltemplate-ironswornoracles table>tbody>tr>th, 
+.sheet-rolltemplate-ironswornoracles table>tfoot>tr>th, 
+.sheet-rolltemplate-ironswornoracles table>thead>tr>td, 
+.sheet-rolltemplate-ironswornoracles table>tbody>tr>td, 
+.sheet-rolltemplate-ironswornoracles table>tfoot>tr>td {
     padding: 4px;
     border: none; 
 }
@@ -749,8 +1146,17 @@ input.sheet-border-bottom {
     margin: 0px;
 }
 
-.sheet-rolltemplate-ironsworn th {
-    
+.sheet-rolltemplate-ironswornoracles table {
+    width: 100%;
+	border: 1px solid;
+	color: black;
+	font-size: 1em;
+    font-family: "Verdana", Arial, sans-serif;
+    margin: 0px;
+}
+
+.sheet-rolltemplate-ironsworn th,
+.sheet-rolltemplate-ironswornoracles th {
 	background-color: #434b4d;
 	color: #ffffff;
 	padding: 2px;
@@ -760,7 +1166,8 @@ input.sheet-border-bottom {
 	text-align: center;
 }
 
-.sheet-rolltemplate-ironsworn .sheet-subheader {
+.sheet-rolltemplate-ironsworn .sheet-subheader,
+.sheet-rolltemplate-ironswornoracles .sheet-subheader {
     background-color: #434b4d;
     color: #ffffff;
     line-height: 0.9em;
@@ -770,10 +1177,11 @@ input.sheet-border-bottom {
     font-style: italic;
     font-weight: bold;
     text-align: left;
-    padding: 0.5rem 0.5rem 0.2rem 0.5rem;
+    padding: 0.5rem;
 }
 
-.sheet-rolltemplate-ironsworn .sheet-subfooter {
+.sheet-rolltemplate-ironsworn .sheet-subfooter,
+.sheet-rolltemplate-ironswornoracles .sheet-subfooter {
     background-color: #b9b9b6;
     line-height: 0.9em;
     font-size: 0.9em;
@@ -789,7 +1197,8 @@ input.sheet-border-bottom {
     background-color: #761818;
 }
 
-.sheet-rolltemplate-ironsworn .sheet-opportunity {
+.sheet-rolltemplate-ironsworn .sheet-opportunity,
+.sheet-rolltemplate-ironswornoracles .sheet-opportunity {
     color: white;
     background-color: #0B3F0B;
 }
@@ -814,24 +1223,51 @@ input.sheet-border-bottom {
     background-color: #761818;
 }
 
-.sheet-rolltemplate-ironsworn .userscript-tcat {
+.sheet-rolltemplate-ironsworn .userscript-tcat,
+.sheet-rolltemplate-ironswornoracles .userscript-tcat {
 	font-weight: bold;
 }
 
-.sheet-rolltemplate-ironsworn td {
+.sheet-rolltemplate-ironsworn td,
+.sheet-rolltemplate-ironswornoracles td {
 	padding: 5px;
 	/*border-bottom: 1px solid black;*/
 }
 
-.sheet-rolltemplate-ironsworn tr:nth-child(odd) {
+.sheet-rolltemplate-ironswornoracles .sheet-oracle-dice {
+    width: 2em;
+    border-right: 1px solid;
+    background: #bfbfbf;
+}
+
+.sheet-rolltemplate-ironswornoracles .sheet-oracle-dice span {
+    border: 0px !important;
+}
+
+.sheet-rolltemplate-ironswornoracles .sheet-oracle-double-dice {
+    width: 5.7em;
+    border-right: 1px solid;
+    text-align: center;
+    background: #bfbfbf;
+    padding: 0.1em;
+}
+
+.sheet-rolltemplate-ironswornoracles .sheet-oracle-double-dice span {
+    border: 0px !important;
+}
+
+.sheet-rolltemplate-ironsworn tr:nth-child(odd),
+.sheet-rolltemplate-ironswornoracles tr:nth-child(odd) {
 	background-color: #d9d9d6;
 }
 
-.sheet-rolltemplate-ironsworn tr:nth-child(even) {
+.sheet-rolltemplate-ironsworn tr:nth-child(even),
+.sheet-rolltemplate-ironswornoracles tr:nth-child(even) {
 	background-color: #e9e9e6;
 }
 
-.sheet-rolltemplate-ironsworn .inlinerollresult  {
+.sheet-rolltemplate-ironsworn .inlinerollresult,
+.sheet-rolltemplate-ironswornoracles .inlinerollresult  {
 	display: inline-block;
 	min-width: 1.5em;
 	text-align: center;