From c65baa8b98ed2ccd9c3ffb657a613e065b20f481 Mon Sep 17 00:00:00 2001
From: Thomas Young <35073576+DrakeRichards@users.noreply.github.com>
Date: Wed, 17 Jan 2018 14:42:26 -0600
Subject: [PATCH] [Infinity 2d20] Improved readability of stress tracks

Removed the radio buttons from stress tracks; clicking on the labels will now select that value. Adjusted style to make it more obvious which value is selected.
---
 Infinity-2d20/Infinity 2d20.css  |  12 ++-
 Infinity-2d20/Infinity 2d20.html | 132 +++++++++++++++----------------
 2 files changed, 76 insertions(+), 68 deletions(-)

diff --git a/Infinity-2d20/Infinity 2d20.css b/Infinity-2d20/Infinity 2d20.css
index 0a6e098eac..fe4ed89b1f 100644
--- a/Infinity-2d20/Infinity 2d20.css	
+++ b/Infinity-2d20/Infinity 2d20.css	
@@ -113,7 +113,7 @@ button {
 	border: 1px solid gray;
 }
 
-/* === STRESS === */
+/* === Momentum Tracker === */
 
 .sheet-radio-tracker label {
     display: inline;
@@ -131,12 +131,15 @@ td.sheet-radio-tracker {
 }
 
 /* STRESS TRACKERS */
+
 table.sheet-stress-tracker label {
     text-align: center;
+    font-weight: normal;
+    color: DarkGrey;
 }
 
 table.sheet-stress-tracker input[type=radio] {
-    display: inline;
+    display: none;
     width: 5px;
 }
 
@@ -162,6 +165,11 @@ table.sheet-stress-tracker td {
     text-align: center;
 }
 
+table.sheet-stress-tracker input:checked + span {
+    color: Black;
+    font-weight: bold;
+}
+
 tr.sheet-stress-tracker-harms td:first-child {
     text-align: right;
     font-weight: bold;
diff --git a/Infinity-2d20/Infinity 2d20.html b/Infinity-2d20/Infinity 2d20.html
index 0b6b0a68d8..3938aa4cf3 100644
--- a/Infinity-2d20/Infinity 2d20.html	
+++ b/Infinity-2d20/Infinity 2d20.html	
@@ -200,30 +200,30 @@
             <div class="sheet-header">Firewall (Infowar)</div>
 			<table border="1" style="width:100%" class="sheet-stress-tracker">
 			    <tr>
-			        <td><label>0<br><input type="radio" name="attr_FW" value="0" checked="checked" /></label></td>
-                    <td><label>1<br><input type="radio" name="attr_FW" value="1" /></label></td>
-        			<td><label>2<br><input type="radio" name="attr_FW" value="2" /></label></td>
-        			<td><label>3<br><input type="radio" name="attr_FW" value="3" /></label></td>
-                    <td><label>4<br><input type="radio" name="attr_FW" value="4" /></label></td>
-                    <td><label>5<br><input type="radio" name="attr_FW" value="5" /></label></td>
-                    <td><label>6<br><input type="radio" name="attr_FW" value="6" /></label></td>
-            		<td><label>7<br><input type="radio" name="attr_FW" value="7" /></label></td>
-        			<td><label>8<br><input type="radio" name="attr_FW" value="8" /></label></td>
-                    <td><label>9<br><input type="radio" name="attr_FW" value="9" /></label></td>
-            		<td><label>10<br><input type="radio" name="attr_FW" value="10" /></label></td>
+			        <td><label><input type="radio" name="attr_FW" value="0" checked="checked" /><span>0</span></label></td>
+                    <td><label><input type="radio" name="attr_FW" value="1" /><span>1</span></label></td>
+        			<td><label><input type="radio" name="attr_FW" value="2" /><span>2</span></label></td>
+        			<td><label><input type="radio" name="attr_FW" value="3" /><span>3</span></label></td>
+                    <td><label><input type="radio" name="attr_FW" value="4" /><span>4</span></label></td>
+                    <td><label><input type="radio" name="attr_FW" value="5" /><span>5</span></label></td>
+                    <td><label><input type="radio" name="attr_FW" value="6" /><span>6</span></label></td>
+            		<td><label><input type="radio" name="attr_FW" value="7" /><span>7</span></label></td>
+        			<td><label><input type="radio" name="attr_FW" value="8" /><span>8</span></label></td>
+                    <td><label><input type="radio" name="attr_FW" value="9" /><span>9</span></label></td>
+            		<td><label><input type="radio" name="attr_FW" value="10" /><span>10</span></label></td>
     	    	</tr>
                 <tr>
-                    <td><label><input type="radio" name="attr_FW" value="11" /><br>11</label></td>
-            		<td><label><input type="radio" name="attr_FW" value="12" /><br>12</label></td>
-        			<td><label><input type="radio" name="attr_FW" value="13" /><br>13</label></td>
-                    <td><label><input type="radio" name="attr_FW" value="14" /><br>14</label></td>
-                    <td><label><input type="radio" name="attr_FW" value="15" /><br>15</label></td>
-                    <td><label><input type="radio" name="attr_FW" value="16" /><br>16</label></td>
-            		<td><label><input type="radio" name="attr_FW" value="17" /><br>17</label></td>
-        			<td><label><input type="radio" name="attr_FW" value="18" /><br>18</label></td>
-                    <td><label><input type="radio" name="attr_FW" value="19" /><br>19</label></td>
-                    <td><label><input type="radio" name="attr_FW" value="20" /><br>20</label></td>
-                    <td><label><input type="radio" name="attr_FW" value="21" /><br>21</label></td>
+                    <td><label><input type="radio" name="attr_FW" value="11" /><span>11</span></label></td>
+            		<td><label><input type="radio" name="attr_FW" value="12" /><span>12</span></label></td>
+        			<td><label><input type="radio" name="attr_FW" value="13" /><span>13</span></label></td>
+                    <td><label><input type="radio" name="attr_FW" value="14" /><span>14</span></label></td>
+                    <td><label><input type="radio" name="attr_FW" value="15" /><span>15</span></label></td>
+                    <td><label><input type="radio" name="attr_FW" value="16" /><span>16</span></label></td>
+            		<td><label><input type="radio" name="attr_FW" value="17" /><span>17</span></label></td>
+        			<td><label><input type="radio" name="attr_FW" value="18" /><span>18</span></label></td>
+                    <td><label><input type="radio" name="attr_FW" value="19" /><span>19</span></label></td>
+                    <td><label><input type="radio" name="attr_FW" value="20" /><span>20</span></label></td>
+                    <td><label><input type="radio" name="attr_FW" value="21" /><span>21</span></label></td>
                 </tr>
                 <tr class="sheet-stress-tracker-harms">
         			<td colspan="2">Breaches:</td>
@@ -286,30 +286,30 @@
             <div class="sheet-header">Resolve (Mental)</div>
  			<table border="1" style="width:100%" class="sheet-stress-tracker">
 			    <tr>
-			        <td><label>0<br><input type="radio" name="attr_RS" value="0" checked="checked" /></label></td>
-                    <td><label>1<br><input type="radio" name="attr_RS" value="1" /></label></td>
-        			<td><label>2<br><input type="radio" name="attr_RS" value="2" /></label></td>
-        			<td><label>3<br><input type="radio" name="attr_RS" value="3" /></label></td>
-                    <td><label>4<br><input type="radio" name="attr_RS" value="4" /></label></td>
-                    <td><label>5<br><input type="radio" name="attr_RS" value="5" /></label></td>
-                    <td><label>6<br><input type="radio" name="attr_RS" value="6" /></label></td>
-            		<td><label>7<br><input type="radio" name="attr_RS" value="7" /></label></td>
-        			<td><label>8<br><input type="radio" name="attr_RS" value="8" /></label></td>
-                    <td><label>9<br><input type="radio" name="attr_RS" value="9" /></label></td>
-            		<td><label>10<br><input type="radio" name="attr_RS" value="10" /></label></td>
+			        <td><label><input type="radio" name="attr_RS" value="0" checked="checked" /><span>0</span></label></td>
+                    <td><label><input type="radio" name="attr_RS" value="1" /><span>1</span></label></td>
+        			<td><label><input type="radio" name="attr_RS" value="2" /><span>2</span></label></td>
+        			<td><label><input type="radio" name="attr_RS" value="3" /><span>3</span></label></td>
+                    <td><label><input type="radio" name="attr_RS" value="4" /><span>4</span></label></td>
+                    <td><label><input type="radio" name="attr_RS" value="5" /><span>5</span></label></td>
+                    <td><label><input type="radio" name="attr_RS" value="6" /><span>6</span></label></td>
+            		<td><label><input type="radio" name="attr_RS" value="7" /><span>7</span></label></td>
+        			<td><label><input type="radio" name="attr_RS" value="8" /><span>8</span></label></td>
+                    <td><label><input type="radio" name="attr_RS" value="9" /><span>9</span></label></td>
+            		<td><label><input type="radio" name="attr_RS" value="10" /><span>10</span></label></td>
     	    	</tr>
                 <tr>
-                    <td><label><input type="radio" name="attr_RS" value="11" /><br>11</label></td>
-            		<td><label><input type="radio" name="attr_RS" value="12" /><br>12</label></td>
-        			<td><label><input type="radio" name="attr_RS" value="13" /><br>13</label></td>
-                    <td><label><input type="radio" name="attr_RS" value="14" /><br>14</label></td>
-                    <td><label><input type="radio" name="attr_RS" value="15" /><br>15</label></td>
-                    <td><label><input type="radio" name="attr_RS" value="16" /><br>16</label></td>
-            		<td><label><input type="radio" name="attr_RS" value="17" /><br>17</label></td>
-        			<td><label><input type="radio" name="attr_RS" value="18" /><br>18</label></td>
-                    <td><label><input type="radio" name="attr_RS" value="19" /><br>19</label></td>
-                    <td><label><input type="radio" name="attr_RS" value="20" /><br>20</label></td>
-                    <td><label><input type="radio" name="attr_RS" value="21" /><br>21</label></td>
+                    <td><label><input type="radio" name="attr_RS" value="11" /><span>11</span></label></td>
+            		<td><label><input type="radio" name="attr_RS" value="12" /><span>12</span></label></td>
+        			<td><label><input type="radio" name="attr_RS" value="13" /><span>13</span></label></td>
+                    <td><label><input type="radio" name="attr_RS" value="14" /><span>14</span></label></td>
+                    <td><label><input type="radio" name="attr_RS" value="15" /><span>15</span></label></td>
+                    <td><label><input type="radio" name="attr_RS" value="16" /><span>16</span></label></td>
+            		<td><label><input type="radio" name="attr_RS" value="17" /><span>17</span></label></td>
+        			<td><label><input type="radio" name="attr_RS" value="18" /><span>18</span></label></td>
+                    <td><label><input type="radio" name="attr_RS" value="19" /><span>19</span></label></td>
+                    <td><label><input type="radio" name="attr_RS" value="20" /><span>20</span></label></td>
+                    <td><label><input type="radio" name="attr_RS" value="21" /><span>21</span></label></td>
                 </tr>
                 <tr class="sheet-stress-tracker-harms">
         			<td colspan="2">Metanoia:</td>
@@ -368,30 +368,30 @@
                         <div class="sheet-header">Physical (Vigour)</div>
  			<table border="1" style="width:100%" class="sheet-stress-tracker">
 			    <tr>
-			        <td><label>0<br><input type="radio" name="attr_PH" value="0" checked="checked" /></label></td>
-                    <td><label>1<br><input type="radio" name="attr_PH" value="1" /></label></td>
-        			<td><label>2<br><input type="radio" name="attr_PH" value="2" /></label></td>
-        			<td><label>3<br><input type="radio" name="attr_PH" value="3" /></label></td>
-                    <td><label>4<br><input type="radio" name="attr_PH" value="4" /></label></td>
-                    <td><label>5<br><input type="radio" name="attr_PH" value="5" /></label></td>
-                    <td><label>6<br><input type="radio" name="attr_PH" value="6" /></label></td>
-            		<td><label>7<br><input type="radio" name="attr_PH" value="7" /></label></td>
-        			<td><label>8<br><input type="radio" name="attr_PH" value="8" /></label></td>
-                    <td><label>9<br><input type="radio" name="attr_PH" value="9" /></label></td>
-            		<td><label>10<br><input type="radio" name="attr_PH" value="10" /></label></td>
+			        <td><label><input type="radio" name="attr_PH" value="0" checked="checked" /><span>0</span></label></td>
+                    <td><label><input type="radio" name="attr_PH" value="1" /><span>1</span></label></td>
+        			<td><label><input type="radio" name="attr_PH" value="2" /><span>2</span></label></td>
+        			<td><label><input type="radio" name="attr_PH" value="3" /><span>3</span></label></td>
+                    <td><label><input type="radio" name="attr_PH" value="4" /><span>4</span></label></td>
+                    <td><label><input type="radio" name="attr_PH" value="5" /><span>5</span></label></td>
+                    <td><label><input type="radio" name="attr_PH" value="6" /><span>6</span></label></td>
+            		<td><label><input type="radio" name="attr_PH" value="7" /><span>7</span></label></td>
+        			<td><label><input type="radio" name="attr_PH" value="8" /><span>8</span></label></td>
+                    <td><label><input type="radio" name="attr_PH" value="9" /><span>9</span></label></td>
+            		<td><label><input type="radio" name="attr_PH" value="10" /><span>10</span></label></td>
     	    	</tr>
                 <tr>
-                    <td><label><input type="radio" name="attr_PH" value="11" /><br><span>11</span></label></td>
-            		<td><label><input type="radio" name="attr_PH" value="12" /><br>12</label></td>
-        			<td><label><input type="radio" name="attr_PH" value="13" /><br>13</label></td>
-                    <td><label><input type="radio" name="attr_PH" value="14" /><br>14</label></td>
-                    <td><label><input type="radio" name="attr_PH" value="15" /><br>15</label></td>
-                    <td><label><input type="radio" name="attr_PH" value="16" /><br>16</label></td>
-            		<td><label><input type="radio" name="attr_PH" value="17" /><br>17</label></td>
-        			<td><label><input type="radio" name="attr_PH" value="18" /><br>18</label></td>
-                    <td><label><input type="radio" name="attr_PH" value="19" /><br>19</label></td>
-                    <td><label><input type="radio" name="attr_PH" value="20" /><br>20</label></td>
-                    <td><label><input type="radio" name="attr_PH" value="21" /><br>21</label></td>
+                    <td><label><input type="radio" name="attr_PH" value="11" /><span>11</span></label></td>
+            		<td><label><input type="radio" name="attr_PH" value="12" /><span>12</span></label></td>
+        			<td><label><input type="radio" name="attr_PH" value="13" /><span>13</span></label></td>
+                    <td><label><input type="radio" name="attr_PH" value="14" /><span>14</span></label></td>
+                    <td><label><input type="radio" name="attr_PH" value="15" /><span>15</span></label></td>
+                    <td><label><input type="radio" name="attr_PH" value="16" /><span>16</span></label></td>
+            		<td><label><input type="radio" name="attr_PH" value="17" /><span>17</span></label></td>
+        			<td><label><input type="radio" name="attr_PH" value="18" /><span>18</span></label></td>
+                    <td><label><input type="radio" name="attr_PH" value="19" /><span>19</span></label></td>
+                    <td><label><input type="radio" name="attr_PH" value="20" /><span>20</span></label></td>
+                    <td><label><input type="radio" name="attr_PH" value="21" /><span>21</span></label></td>
                 </tr>
                 <tr class="sheet-stress-tracker-harms">
         			<td colspan="2">Wounds:</td>