From a36ccfe8fefd81bd47e8f536f957206b42f9253c Mon Sep 17 00:00:00 2001
From: Francisco De La Hoz <39561227+franciscodelahoz@users.noreply.github.com>
Date: Sun, 3 Nov 2024 21:48:55 -0500
Subject: [PATCH] feat: enhance checkbox styling and layout for sound and ROM
 compatibility settings

---
 src/html/index.html  | 80 ++++++++++++++++++++++++++------------------
 src/styles/style.css | 64 +++++++++++++++++++++++++++++++++--
 2 files changed, 110 insertions(+), 34 deletions(-)

diff --git a/src/html/index.html b/src/html/index.html
index 678a99c..2d0a6e9 100644
--- a/src/html/index.html
+++ b/src/html/index.html
@@ -79,10 +79,12 @@ <h2 class="configuration-title">General Settings</h2>
           <h2 class="configuration-title">Sound Settings</h2>
           <ul class="quirks-list">
             <li>
-              <label>
-                <input type="checkbox" name="sound-state-checkbox" id="sound-state-checkbox">
-                Enable/Disable sound
-              </label>
+              <div class="checkbox-container-centered">
+                <input type="checkbox" name="sound-state-checkbox" id="sound-state-checkbox" class="default-checkbox">
+                <label class="checkbox-label">
+                  Enable/Disable sound
+                </label>
+              </div>
             </li>
             <li>
               <label class="block-item">
@@ -99,46 +101,60 @@ <h2 class="configuration-title">Sound Settings</h2>
           <h2 class="configuration-title">ROM Compatibility</h2>
           <ul class="quirks-list">
             <li>
-              <label>
-                <input type="checkbox" name="vf-quirk-checkbox" id="vf-quirk-checkbox" class="quirk-checkbox" data-quirk-property-name="vfQuirk">
-                The AND, OR and XOR opcodes reset the flags register to zero.
-              </label>
+              <div class="checkbox-container">
+                <input type="checkbox" name="vf-quirk-checkbox" id="vf-quirk-checkbox" class="quirk-checkbox default-checkbox" data-quirk-property-name="vfQuirk">
+                <label class="checkbox-label">
+                  The AND, OR and XOR opcodes reset the flags register to zero.
+                </label>
+              </div>
             </li>
             <li>
-              <label>
-                <input type="checkbox" name="memory-quirk-checkbox" id="memory-quirk-checkbox" class="quirk-checkbox" data-quirk-property-name="memoryQuirk">
-                The save and load opcodes (Fx55 and Fx65) increment the index register.
-              </label>
+              <div class="checkbox-container">
+                <input type="checkbox" name="memory-quirk-checkbox" id="memory-quirk-checkbox" class="quirk-checkbox default-checkbox" data-quirk-property-name="memoryQuirk">
+                <label class="checkbox-label">
+                  The save and load opcodes (Fx55 and Fx65) increment the index register.
+                </label>
+              </div>
             </li>
             <li>
-              <label>
-                <input type="checkbox" name="display-wait-quirk-checkbox" id="display-wait-quirk-checkbox" class="quirk-checkbox" data-quirk-property-name="displayWaitQuirk">
-                Drawing sprites to the display waits for the vertical blank interrupt, limiting their speed to max 60 sprites per second.
-              </label>
+              <div class="checkbox-container">
+                <input type="checkbox" name="display-wait-quirk-checkbox" id="display-wait-quirk-checkbox" class="quirk-checkbox default-checkbox" data-quirk-property-name="displayWaitQuirk">
+                <label class="checkbox-label">
+                  Drawing sprites to the display waits for the vertical blank interrupt, limiting their speed to max 60 sprites per second.
+                </label>
+              </div>
             </li>
             <li>
-              <label>
-                <input type="checkbox" name="clipping-quirk-checkbox" id="clipping-quirk-checkbox" class="quirk-checkbox" data-quirk-property-name="clipQuirks">
-                Sprites drawn at the bottom edge of the screen get clipped instead of wrapping around to the top of the screen.
-              </label>
+              <div class="checkbox-container">
+                <input type="checkbox" name="clipping-quirk-checkbox" id="clipping-quirk-checkbox" class="quirk-checkbox default-checkbox" data-quirk-property-name="clipQuirks">
+                <label class="checkbox-label">
+                  Sprites drawn at the bottom edge of the screen get clipped instead of wrapping around to the top of the screen.
+                </label>
+              </div>
             </li>
             <li>
-              <label>
-                <input type="checkbox" name="shifting-quirk-checkbox" id="shifting-quirk-checkbox" class="quirk-checkbox" data-quirk-property-name="shiftQuirk">
-                The shift opcodes only operate on vX instead of storing the shifted version of vY in vX
-              </label>
+              <div class="checkbox-container">
+                <input type="checkbox" name="shifting-quirk-checkbox" id="shifting-quirk-checkbox" class="quirk-checkbox default-checkbox" data-quirk-property-name="shiftQuirk">
+                <label class="checkbox-label">
+                  The shift opcodes only operate on vX instead of storing the shifted version of vY in vX
+                </label>
+              </div>
             </li>
             <li>
-              <label>
-                <input type="checkbox" name="jumping-quirk-checkbox" id="jumping-quirk-checkbox" class="quirk-checkbox" data-quirk-property-name="jumpQuirks">
-                The Bnnn instruction doesn't use v0, but vX instead where X is the highest nibble of nnn
-              </label>
+              <div class="checkbox-container">
+                <input type="checkbox" name="jumping-quirk-checkbox" id="jumping-quirk-checkbox" class="quirk-checkbox default-checkbox" data-quirk-property-name="jumpQuirks">
+                <label class="checkbox-label">
+                  The Bnnn instruction doesn't use v0, but vX instead where X is the highest nibble of nnn
+                </label>
+              </div>
             </li>
             <li>
-              <label>
-                <input type="checkbox" name="zero-height-sprite-lores-quirk" id="zero-height-sprite-lores-quirk" class="quirk-checkbox" data-quirk-property-name="zeroHeightSpriteLoresQuirk">
-                Adjusts for ROMs that define sprite height as zero in low-resolution mode, interpreting it as a height of 8 pixels.
-              </label>
+              <div class="checkbox-container">
+                <input type="checkbox" name="zero-height-sprite-lores-quirk" id="zero-height-sprite-lores-quirk" class="quirk-checkbox default-checkbox" data-quirk-property-name="zeroHeightSpriteLoresQuirk">
+                <label class="checkbox-label">
+                  Adjusts for ROMs that define sprite height as zero in low-resolution mode, interpreting it as a height of 8 pixels.
+                </label>
+              </div>
             </li>
           </ul>
         </section>
diff --git a/src/styles/style.css b/src/styles/style.css
index 7d637ca..8778722 100644
--- a/src/styles/style.css
+++ b/src/styles/style.css
@@ -236,6 +236,64 @@ input[type='range']::-moz-range-thumb {
   transition: .2s ease-in-out;
 }
 
+.checkbox-container {
+  display: flex;
+  align-items: flex-start;
+  font-family: verdana;
+}
+
+.checkbox-container-centered {
+  display: flex;
+  align-items: center;
+  font-family: verdana;
+}
+
+.default-checkbox {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 17px;
+  height: 17px;
+  border: 2px solid #CCCCCC;
+  background-color: #222222;
+  outline: none;
+  cursor: pointer;
+  margin-right: 8px;
+  position: relative;
+  flex-shrink: 0;
+  margin-top: 3px;
+  border-radius: 5px;
+}
+
+.default-checkbox:checked {
+  border-color: #34ff66;
+}
+
+.default-checkbox:checked::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 13px;
+  height: 13px;
+  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='14' height='14' fill='%2334ff66'><rect x='5' y='5' width='14' height='14' rx='3' ry='3' /></svg>") no-repeat center center;
+}
+
+.checkbox-label {
+  user-select: none;
+  margin: 0;
+}
+
+.default-checkbox:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.default-checkbox:disabled + .checkbox-label {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
 .keyboard-indicator {
   position: absolute;
   bottom: 0.01em;
@@ -293,10 +351,11 @@ input[type='range']::-moz-range-thumb {
 
 .configuration-title {
   color: #34ff66;
-  font-size: 1rem;
+  font-size: 0.95rem;
   text-align: center;
   padding: 5px;
-  background-color: #222;
+  background-color: #222222;
+  font-family: Verdana;
 }
 
 .configuration-subtitle {
@@ -312,6 +371,7 @@ input[type='range']::-moz-range-thumb {
 .configuration-content > section > ul > li {
   font-size: .78em;
   margin: 0.8rem auto;
+  font-family: Verdana;
 }
 
 .configuration-subsection {