Fate Accelerated: Added stat roll buttons, cleaned up formatting

Fate_Accelerated/fate.css

@@ -91,12 +91,77 @@ table.sheet-stress td {
     position: relative;
 }
 
-input.sheet-stress-check {
-    font-size: 30px;
-    width: 20px;
-    height: 20px;
+table.sheet-stress td div.sheet-checkbox-label-div {
+    width: 50px;
+    height: 50px;
     position: relative;
-    left: calc(50% - 10px) !important;
+    border: 1px solid black;
+    left: calc(50% - 25px) !important;
+}
+
+table.sheet-stress td div.sheet-checkbox-label-div label {
+    position: relative;
+    top:-50px;
+    background: #ddd;
+    height: 50px;
+    width: 50px;
+    display: block;
+    /* Note: This gradient may render differently in browsers that don't support the unprefixed gradient syntax */
+
+    /* IE10 Consumer Preview */
+    background-image: -ms-linear-gradient(bottom right, #FFFFFF 0%, #C7C7C7 100%);
+
+    /* Mozilla Firefox */
+    background-image: -moz-linear-gradient(bottom right, #FFFFFF 0%, #C7C7C7 100%);
+
+    /* Opera */
+    background-image: -o-linear-gradient(bottom right, #FFFFFF 0%, #C7C7C7 100%);
+
+    /* Webkit (Safari/Chrome 10) */
+    background-image: -webkit-gradient(linear, right bottom, left top, color-stop(0, #FFFFFF), color-stop(1, #C7C7C7));
+
+    /* Webkit (Chrome 11+) */
+    background-image: -webkit-linear-gradient(bottom right, #FFFFFF 0%, #C7C7C7 100%);
+
+    /* W3C Markup, IE10 Release Preview */
+    background-image: linear-gradient(to top left, #FFFFFF 0%, #C7C7C7 100%);
+
+}
+table.sheet-stress td div.sheet-checkbox-label-div label:hover {/* Note: This gradient may render differently in browsers that don't support the unprefixed gradient syntax */
+
+    /* IE10 Consumer Preview */
+    background-image: -ms-linear-gradient(bottom right, #FFFFFF 0%, #8FECFF 100%);
+
+    /* Mozilla Firefox */
+    background-image: -moz-linear-gradient(bottom right, #FFFFFF 0%, #8FECFF 100%);
+
+    /* Opera */
+    background-image: -o-linear-gradient(bottom right, #FFFFFF 0%, #8FECFF 100%);
+
+    /* Webkit (Safari/Chrome 10) */
+    background-image: -webkit-gradient(linear, right bottom, left top, color-stop(0, #FFFFFF), color-stop(1, #8FECFF));
+
+    /* Webkit (Chrome 11+) */
+    background-image: -webkit-linear-gradient(bottom right, #FFFFFF 0%, #8FECFF 100%);
+
+    /* W3C Markup, IE10 Release Preview */
+    background-image: linear-gradient(to top left, #FFFFFF 0%, #8FECFF 100%);}
+
+
+input[type=checkbox].sheet-stress-check {
+    margin: 0px;
+    width: 50px;
+    height: 50px;
+    opacity: 0;
+    z-index: 1;
+    position: relative;
+    left: calc(50% - 27px) !important;
+    top: -2px;
+}
+
+input[type=checkbox].sheet-stress-check:checked ~ label {
+    background: url(http://ramyasspace.files.wordpress.com/2011/06/tick.jpg);
+    background-size: 100%;
 }
 
 /* === CONSEQUENCES === */

Fate_Accelerated/fate.html

@@ -30,12 +30,40 @@
 
     <div class="sheet-col-approaches sheet-col">
         <div class="sheet-header">Approaches</div>
-        <label>Careful  <input type="number" name="attr_careful" title="@{careful}"/></label>
-        <label>Clever   <input type="number" name="attr_clever"  title="@{clever}"/></label>
-        <label>Flashy   <input type="number" name="attr_flashy"  title="@{flashy}"/></label>
-        <label>Forceful <input type="number" name="attr_forceful"  title="@{forceful}"/></label>
-        <label>Quick    <input type="number" name="attr_quick"  title="@{quick}"/></label>
-        <label>Sneaky   <input type="number" name="attr_sneaky"  title="@{sneaky}"/></label>
+        <table class="sheet-stress">
+            <tbody>
+            <tr>
+                <td><button type='roll' value='/roll 4dF + @{careful}' name='roll_careful' /></td>
+                <td><label>Careful</label></td>
+                <td><input type="number" name="attr_careful" title="@{careful}"/></td>
+            </tr>
+            <tr>
+                <td><button type='roll' value='/roll 4dF + @{clever}' name='roll_clever' /></td>
+                <td><label>Clever</label></td>
+                <td><input type="number" name="attr_clever" title="@{clever}"/></td>
+            </tr>
+            <tr>
+                <td><button type='roll' value='/roll 4dF + @{flashy}' name='roll_flashy' /></td>
+                <td><label>Flashy</label></td>
+                <td><input type="number" name="attr_flashy" title="@{flashy}"/></td>
+            </tr>
+            <tr>
+                <td><button type='roll' value='/roll 4dF + @{forceful}' name='roll_forceful' /></td>
+                <td><label>Forceful</label></td>
+                <td><input type="number" name="attr_forceful" title="@{forceful}"/></td>
+            </tr>
+            <tr>
+                <td><button type='roll' value='/roll 4dF + @{quick}' name='roll_quick' /></td>
+                <td><label>Quick</label></td>
+                <td><input type="number" name="attr_quick" title="@{quick}"/></td>
+            </tr>
+            <tr>
+                <td><button type='roll' value='/roll 4dF + @{sneaky}' name='roll_sneaky' /></td>
+                <td><label>Sneaky</label></td>
+                <td><input type="number" name="attr_sneaky" title="@{sneaky}"/></td>
+            </tr>
+            </tbody>
+        </table>
     </div> <!-- .section-approaches -->
 </div>
 
@@ -53,9 +81,9 @@
         <div class="sheet-header">Consequences</div>
         <fieldset class="repeating_consequences">
             <select name="attr_consequences_type">
-                <option>Mild</option>
-                <option>Moderate</option>
-                <option>Severe</option>
+                <option>Mild (2 stress)</option>
+                <option>Moderate (4 stress)</option>
+                <option>Severe (6 stress)</option>
             </select>
             <input type="text" name="attr_consequence" />
         </fieldset>
@@ -66,22 +94,31 @@
         <div class="sheet-section">
             <table class="sheet-stress">
                 <tbody>
+                <tr>
+                    <td>
+                        <div class="sheet-checkbox-label-div">
+                            <input class="sheet-stress-check" type="checkbox" name="attr_stress1" value="1" title="@{stress1}" />
+                            <label></label>
+                        </div>
+                    </td>
+                    <td>
+                        <div class="sheet-checkbox-label-div">
+                            <input class="sheet-stress-check" type="checkbox" name="attr_stress2" value="2" title="@{stress2}" />
+                            <label></label>
+                        </div>
+                    </td>
+                    <td>
+                        <div class="sheet-checkbox-label-div">
+                            <input class="sheet-stress-check" type="checkbox" name="attr_stress3" value="3" title="@{stress3}" />
+                            <label></label>
+                        </div>
+                    </td>
+                </tr>
                 <tr>
                     <th><h4>1</h4></th>
                     <th><h4>2</h4></th>
                     <th><h4>3</h4></th>
                 </tr>
-                <tr>
-                    <td>
-                        <input class="sheet-stress-check" type="checkbox" name="attr_stress1" value="1" title="@{stress1}" />
-                    </td>
-                    <td>
-                        <input class="sheet-stress-check" type="checkbox" name="attr_stress2" value="2" title="@{stress2}" />
-                    </td>
-                    <td>
-                        <input class="sheet-stress-check" type="checkbox" name="attr_stress3" value="3" title="@{stress3}" />
-                    </td>
-                </tr>
                 </tbody>
             </table>
         </div>