From d4732fed5f70a7631c3a5db5facaeedbedfcbbf5 Mon Sep 17 00:00:00 2001
From: dginovker <dcress01@uoguelph.ca>
Date: Fri, 11 Dec 2020 09:47:38 -0500
Subject: [PATCH] Very nice checkboxes uwu uwu uwu

---
 services/m=hiscore/hiscores.html | 57 ++++++++++++++----------
 site/css/hiscores-17.css         | 74 +++++++++++++++++++++++++++++++-
 2 files changed, 107 insertions(+), 24 deletions(-)

diff --git a/services/m=hiscore/hiscores.html b/services/m=hiscore/hiscores.html
index 5cb06ae6c..cb7d71964 100644
--- a/services/m=hiscore/hiscores.html
+++ b/services/m=hiscore/hiscores.html
@@ -17,7 +17,7 @@ English
 ">
   <meta name="keywords" content="RSPS, Open Source, 2009scape, Osrs, Oldschool Runescape, Runescape, zezima">
   <meta name="description"
-  content="2009scape - Bringing back the game from 2009 you love. Multiplayer and Free forever.">
+    content="2009scape - Bringing back the game from 2009 you love. Multiplayer and Free forever.">
   <meta name="title" content="2009scape - Free Forever - Hiscores">
   <title>2009scape - Free Forever - Hiscores</title>
   <style type="text/css">
@@ -591,36 +591,46 @@ English
                   <form action="./hiscores.html" method="post" class="no_margin">
                     <div id="remember">
                       <label for="rem">
-                        <table class="center" style="margin: 0 auto; padding-top: 4px;">
+                        <table class="center" style="margin: 0 auto; padding-top: 6px; padding-bottom: 8px;">
                           <tr>
-                            <td onmouseover="this.style.background='rgba(20, 20, 20, 0.3)';"
-                              onmouseout="this.style.background='rgba(0, 0, 0, 0)';"
-                              onclick="document.getElementById('check_iron').checked = !document.getElementById('check_iron').checked">
-                              <img src="../../site/img/osrsimg/ironman.png" style="height: 11px;">
-                              <input type="checkbox" name="check_iron" id="check_iron" value="1" class="checkbox"
-                                style="pointer-events: none;">
+                            <td>
+                              <span style="white-space: nowrap;">
+                                <img src="../../site/img/osrsimg/ironman.png" style="height: 11px; padding-right: 30px;">
+                                <label class="control control-checkbox">
+                                  <input type="checkbox" name="check_iron" id="check_iron" value="1" class="checkbox"
+                                    style="pointer-events: none;" />
+                                  <div class="control_indicator"></div>
+                                </label>
+                              </span>
                             </td>
-                            <td onmouseover="this.style.background='rgba(20, 20, 20, 0.3)';"
-                              onmouseout="this.style.background='rgba(0, 0, 0, 0)';"
-                              onclick="document.getElementById('check_ultiron').checked = !document.getElementById('check_ultiron').checked">
-                              <img src="../../site/img/osrsimg/ultimateironman.png" style="height: 11px;">
-                              <input type="checkbox" name="check_ultiron" id="check_ultiron" value="1" class="checkbox"
-                                style="pointer-events: none;">
+                            <td>
+                              <span style="white-space: nowrap;">
+                                <img src="../../site/img/osrsimg/ultimateironman.png" style="height: 11px; padding-right: 25px;">
+                                <label class="control control-checkbox">
+                                  <input type="checkbox" name="check_ultiron" id="check_ultiron" value="1" class="checkbox"
+                                    style="pointer-events: none;" />
+                                  <div class="control_indicator"></div>
+                                </label>
+                              </span>
                             </td>
-                            <td onmouseover="this.style.background='rgba(20, 20, 20, 0.3)';"
-                              onmouseout="this.style.background='rgba(0, 0, 0, 0)';"
-                              onclick="document.getElementById('check_hciron').checked = !document.getElementById('check_hciron').checked">
-                              <img src="../../site/img/osrsimg/hcim.png" style="height: 11px;">
-                              <input type="checkbox" name="check_hciron" id="check_hciron" value="1" class="checkbox"
-                                style="pointer-events: none;">
+                            <td>
+                              <span style="white-space: nowrap;">
+                                <img src="../../site/img/osrsimg/hcim.png" style="height: 11px; padding-right: 25px;">
+                                <label class="control control-checkbox">
+                                  <input type="checkbox" name="check_hciron" id="check_hciron" value="1" class="checkbox"
+                                    style="pointer-events: none;" />
+                                  <div class="control_indicator"></div>
+                                </label>
+                              </span>
                             </td>
                           </tr>
                         </table>
                         <table class="center" style="margin: 0 auto; padding-top: 4px;">
                           <tr>
                             <td>
-                              <input class="nonBlueInputSlider" id="maxXP" type="range" min="1" max="10" value="10" step="0.5"
-                            oninput="this.nextElementSibling.nextElementSibling.value = this.value % 1 != 0 ? this.value : this.value + '.0'">
+                              <input class="nonBlueInputSlider" id="maxXP" type="range" min="1" max="10" value="10"
+                                step="0.5"
+                                oninput="this.nextElementSibling.nextElementSibling.value = this.value % 1 != 0 ? this.value : this.value + '.0'">
                               <br>
                               Max XP Rate: <output id="maxXPoutput">10</output>
                             </td>
@@ -628,7 +638,8 @@ English
                         </table>
                       </label>
                     </div>
-                    <input id="filter_submit" type="submit" name="submit" class="buttonmedium" value="Filter" style="margin-top: 2px;">
+                    <input id="filter_submit" type="submit" name="submit" class="buttonmedium" value="Filter"
+                      style="margin-top: 2px;">
                     <div id="filter_clear_div">
 
                     </div>
diff --git a/site/css/hiscores-17.css b/site/css/hiscores-17.css
index d814b25fa..f5f620832 100644
--- a/site/css/hiscores-17.css
+++ b/site/css/hiscores-17.css
@@ -792,7 +792,11 @@
 
 
 
-
+/*
+ All of this was autogenerated 
+ Started here: https://stackoverflow.com/questions/28283332/style-lower-and-upper-fill-in-html5-range-input
+ Found this here: http://danielstern.ca/range.css/#/
+*/
  input[type=range] {
   width: 100%;
   margin: 5.3px 0;
@@ -883,3 +887,71 @@ how to remove the virtical space around the range input in IE*/
     /*Edge starts the margin from the thumb, not the track as other browsers do*/
   }
 }
+
+
+
+/*
+ Autogenerated from https://doodlenerd.com/html-control/css-checkbox-generator
+*/
+.control {
+  font-family: arial;
+  display: block;
+  position: relative;
+  margin-left: 15px;
+  margin-bottom: -13px;
+  padding-top: 0px;
+  cursor: pointer;
+  font-size: 15px;
+}
+  .control input {
+      position: absolute;
+      z-index: -1;
+      opacity: 0;
+  }
+.control_indicator {
+  position: absolute;
+  top: 0px;
+  left: 0;
+  height: 14px;
+  width: 14px;
+  background: #e9dfc5;
+  border: 1px outset #272525;
+  border-radius: 2px;
+}
+.control:hover input ~ .control_indicator {
+  background: #926f36;
+}
+
+.control input:checked ~ .control_indicator {
+  background: #654717;
+}
+.control:hover input:not([disabled]):checked ~ .control_indicator,
+.control input:checked:focus ~ .control_indicator {
+  background: #654717;
+}
+.control input:disabled ~ .control_indicator {
+  background: #e6e6e6;
+  opacity: 0.6;
+  pointer-events: none;
+}
+.control_indicator:after {
+  box-sizing: unset;
+  content: '';
+  position: absolute;
+  display: none;
+}
+.control input:checked ~ .control_indicator:after {
+  display: block;
+}
+.control-checkbox .control_indicator:after {
+  left: 4px;
+  top: 1px;
+  width: 3px;
+  height: 7px;
+  border: solid #e9dfc5;
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
+}
+.control-checkbox input:disabled ~ .control_indicator:after {
+  border-color: #7b7b7b;
+}
\ No newline at end of file