refactor: simplify checkbox label styling

This commit is contained in:
ZanzyTHEbar 2023-01-13 18:31:14 +00:00
parent bbada4defb
commit e27e95e43d
2 changed files with 32 additions and 25 deletions

View File

@ -8,31 +8,31 @@ This will contain a list of features that are in progress, completed, and planne
<ul style="list-style: none;"> <ul style="list-style: none;">
<li> <li>
<input type="checkbox" checked> <input type="checkbox" checked>
<label style="font-size: 18px;position: relative;top: -9px;">Tracking algorithm</label> <label>Tracking algorithm</label>
</li> </li>
<li> <li>
<input type="checkbox" checked> <input type="checkbox" checked>
<label style="font-size: 18px;position: relative;top: -9px;">Better documentation over things (setup, wiring etc.)</label> <label>Better documentation over things (setup, wiring etc.)</label>
</li> </li>
<li> <li>
<input type="checkbox" checked> <input type="checkbox" checked>
<label style="font-size: 18px;position: relative;top: -9px;">Calibration</label> <label>Calibration</label>
</li> </li>
<li> <li>
<input type="checkbox" checked> <input type="checkbox" checked>
<label style="font-size: 18px;position: relative;top: -9px;"> GUI</label> <label>GUI</label>
</li> </li>
<li> <li>
<input type="checkbox" checked> <input type="checkbox" checked>
<label style="font-size: 18px;position: relative;top: -9px;">PCB Design for IR emitters</label> <label>PCB Design for IR emitters</label>
</li> </li>
<li> <li>
<input type="checkbox" checked> <input type="checkbox" checked>
<label style="font-size: 18px;position: relative;top: -9px;">Dual eye support</label> <label>Dual eye support</label>
</li> </li>
<li> <li>
<input type="checkbox" checked> <input type="checkbox" checked>
<label style="font-size: 18px;position: relative;top: -9px;">Firmware</label> <label>Firmware</label>
</li> </li>
</ul> </ul>
</div> </div>
@ -43,35 +43,35 @@ This will contain a list of features that are in progress, completed, and planne
<ul style="list-style: none;"> <ul style="list-style: none;">
<li> <li>
<input type="checkbox" unchecked> <input type="checkbox" unchecked>
<label style="font-size: 18px;position: relative;top: -9px;">Variable eye openness tracking</label> <label>Variable eye openness tracking</label>
</li> </li>
<li> <li>
<input type="checkbox" unchecked> <input type="checkbox" unchecked>
<label style="font-size: 18px;position: relative;top: -9px;">Release of V1 to the masses</label> <label>Release of V1 to the masses</label>
</li> </li>
<li> <li>
<input type="checkbox" unchecked> <input type="checkbox" unchecked>
<label style="font-size: 18px;position: relative;top: -9px;">Auto ROI cropping</label> <label>Auto ROI cropping</label>
</li> </li>
<li> <li>
<input type="checkbox" unchecked> <input type="checkbox" unchecked>
<label style="font-size: 18px;position: relative;top: -9px;">Auto threshold's</label> <label>Auto threshold's</label>
</li> </li>
<li> <li>
<input type="checkbox" unchecked> <input type="checkbox" unchecked>
<label style="font-size: 18px;position: relative;top: -9px;">Setup flashing of ESPs through anything other than VSC</label> <label>Setup flashing of ESPs through anything other than VSC</label>
</li> </li>
<li> <li>
<input type="checkbox" unchecked> <input type="checkbox" unchecked>
<label style="font-size: 18px;position: relative;top: -9px;">New GUI</label> <label>New GUI</label>
</li> </li>
<li> <li>
<input type="checkbox" unchecked> <input type="checkbox" unchecked>
<label style="font-size: 18px;position: relative;top: -9px;">Power regulator board</label> <label>Power regulator board</label>
</li> </li>
<li> <li>
<input type="checkbox" unchecked> <input type="checkbox" unchecked>
<label style="font-size: 18px;position: relative;top: -9px;">New IR LED PCB (only for the power reg board)</label> <label>New IR LED PCB (only for the power reg board)</label>
</li> </li>
</ul> </ul>
</div> </div>
@ -82,15 +82,15 @@ This will contain a list of features that are in progress, completed, and planne
<ul style="list-style: none;"> <ul style="list-style: none;">
<li> <li>
<input type="checkbox" unchecked> <input type="checkbox" unchecked>
<label style="font-size: 18px;position: relative;top: -9px;">Support for binary parameters</label> <label>Support for binary parameters</label>
</li> </li>
<li> <li>
<input type="checkbox" unchecked> <input type="checkbox" unchecked>
<label style="font-size: 18px;position: relative;top: -9px;">Dynamic foveated rendering via OpenXR (not a guarantee)</label> <label>Dynamic foveated rendering via OpenXR (not a guarantee)</label>
</li> </li>
<li> <li>
<input type="checkbox" unchecked> <input type="checkbox" unchecked>
<label style="font-size: 18px;position: relative;top: -9px;">Custom ESP-CAM boards</label> <label>Custom ESP-CAM boards</label>
</li> </li>
</ul> </ul>
</div> </div>

View File

@ -1,5 +1,5 @@
/* Custom Checkboxes */ /* Custom Checkboxes */
input[type=checkbox] { input[type="checkbox"] {
cursor: pointer; cursor: pointer;
width: 10px; width: 10px;
height: 10px; height: 10px;
@ -9,7 +9,9 @@ input[type=checkbox] {
-o-appearance: none; -o-appearance: none;
appearance: none; appearance: none;
outline: 1px solid lightblue; outline: 1px solid lightblue;
box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px; box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px,
rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px,
rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
background-clip: content-box; background-clip: content-box;
padding: 3px; padding: 3px;
} }
@ -20,14 +22,19 @@ input:focus {
border-radius: 2pt; border-radius: 2pt;
box-shadow: 0 0 0 1pt grey; box-shadow: 0 0 0 1pt grey;
outline: none; outline: none;
transition: .1s; transition: 0.1s;
} }
input[type=checkbox]:checked { input[type="checkbox"]:checked {
background-color: #3899ff; background-color: #3899ff;
} }
input[type=checkbox]:focus { input[type="checkbox"]:focus {
box-shadow: 0 0 3pt 2pt cornflowerblue; box-shadow: 0 0 3pt 2pt cornflowerblue;
} }
label {
font-size: 18px;
position: relative;
top: -9px;
}