feat: improve checkbox styling and layout for better accessibility an…

…d consistency
franciscodelahoz · Nov 9, 2024 · 11571d3 · 11571d3
1 parent 780574c
commit 11571d3
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 30 deletions.
diff --git a/src/html/index.html b/src/html/index.html
@@ -102,56 +102,56 @@ <h2 class="configuration-title">ROM Compatibility</h2>
           <ul class="quirks-list">
             <li>
               <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">
+                <input type="checkbox" name="vf-quirk-checkbox" id="vf-quirk-checkbox" class="quirk-checkbox default-checkbox" data-quirk-property-name="vfQuirk" style="margin-top: 0.25rem;">
+                <label class="checkbox-label" for="vf-quirk-checkbox">
                   The AND, OR and XOR opcodes reset the flags register to zero.
                 </label>
               </div>
             </li>
             <li>
               <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">
+                <input type="checkbox" name="memory-quirk-checkbox" id="memory-quirk-checkbox" class="quirk-checkbox default-checkbox" data-quirk-property-name="memoryQuirk" style="margin-top: 0.25rem;">
+                <label class="checkbox-label" for="memory-quirk-checkbox">
                   The save and load opcodes (Fx55 and Fx65) increment the index register.
                 </label>
               </div>
             </li>
             <li>
               <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">
+                <input type="checkbox" name="display-wait-quirk-checkbox" id="display-wait-quirk-checkbox" class="quirk-checkbox default-checkbox" data-quirk-property-name="displayWaitQuirk" style="margin-top: 0.25rem;">
+                <label class="checkbox-label" for="display-wait-quirk-checkbox">
                   Drawing sprites to the display waits for the vertical blank interrupt, limiting their speed to max 60 sprites per second.
                 </label>
               </div>
             </li>
             <li>
               <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">
+                <input type="checkbox" name="clipping-quirk-checkbox" id="clipping-quirk-checkbox" class="quirk-checkbox default-checkbox" data-quirk-property-name="clipQuirks" style="margin-top: 0.25rem;">
+                <label class="checkbox-label" for="clipping-quirk-checkbox">
                   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>
               <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">
+                <input type="checkbox" name="shifting-quirk-checkbox" id="shifting-quirk-checkbox" class="quirk-checkbox default-checkbox" data-quirk-property-name="shiftQuirk" style="margin-top: 0.25rem;">
+                <label class="checkbox-label" for="shifting-quirk-checkbox">
                   The shift opcodes only operate on vX instead of storing the shifted version of vY in vX
                 </label>
               </div>
             </li>
             <li>
               <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">
+                <input type="checkbox" name="jumping-quirk-checkbox" id="jumping-quirk-checkbox" class="quirk-checkbox default-checkbox" data-quirk-property-name="jumpQuirks" style="margin-top: 0.25rem;">
+                <label class="checkbox-label" for="jumping-quirk-checkbox">
                   The Bnnn instruction doesn't use v0, but vX instead where X is the highest nibble of nnn
                 </label>
               </div>
             </li>
             <li>
               <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">
+                <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" style="margin-top: 0.25rem;">
+                <label class="checkbox-label" for="zero-height-sprite-lores-quirk">
                   Adjusts for ROMs that define sprite height as zero in low-resolution mode, interpreting it as a height of 8 pixels.
                 </label>
               </div>

diff --git a/src/styles/style.css b/src/styles/style.css
@@ -245,47 +245,52 @@ input[type='range']::-moz-range-thumb {
   display: flex;
   align-items: flex-start;
   font-family: verdana;
+  gap: 0.5rem;
 }
 
 .checkbox-container-centered {
   display: flex;
   align-items: center;
   font-family: verdana;
+  gap: 0.5rem;
 }
 
 .default-checkbox {
   -webkit-appearance: none;
   appearance: none;
-  width: 17px;
-  height: 17px;
-  border: 2px solid #CCCCCC;
+  border: 0.125rem solid #CCCCCC;
   background-color: #222222;
   outline: none;
   cursor: pointer;
-  margin-right: 8px;
-  position: relative;
-  flex-shrink: 0;
-  margin-top: 3px;
-  border-radius: 5px;
+  margin: 0;
+  border-radius: 0.3125rem;
+  display: grid;
+  place-content: center;
+  box-sizing: border-box;
+  width: 1.0625rem;
+  height: 1.0625rem;
+}
+
+.default-checkbox::before {
+  content: '';
+  display: inline-block;
+  width: 0.875rem;
+  height: 0.875rem;
 }
 
 .default-checkbox:checked {
   border-color: #34ff66;
 }
 
 .default-checkbox:checked::before {
-  content: '';
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: 14px;
-  height: 14px;
-  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;
+  content: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='0.875rem' height='0.875rem' fill='%2334ff66'><rect x='0.3125rem' y='0.3125rem' width='0.875rem' height='0.875rem' rx='0.1875rem' ry='0.1875rem' /></svg>");
+  width: 0.875rem;
+  height: 0.875rem;
 }
 
 .checkbox-label {
   user-select: none;
+  cursor: pointer;
   margin: 0;
 }