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;">
<li>
<input type="checkbox" checked>
<label style="font-size: 18px;position: relative;top: -9px;">Tracking algorithm</label>
<label>Tracking algorithm</label>
</li>
<li>
<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>
<input type="checkbox" checked>
<label style="font-size: 18px;position: relative;top: -9px;">Calibration</label>
<label>Calibration</label>
</li>
<li>
<input type="checkbox" checked>
<label style="font-size: 18px;position: relative;top: -9px;"> GUI</label>
<label>GUI</label>
</li>
<li>
<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>
<input type="checkbox" checked>
<label style="font-size: 18px;position: relative;top: -9px;">Dual eye support</label>
<label>Dual eye support</label>
</li>
<li>
<input type="checkbox" checked>
<label style="font-size: 18px;position: relative;top: -9px;">Firmware</label>
<label>Firmware</label>
</li>
</ul>
</div>
@ -43,35 +43,35 @@ This will contain a list of features that are in progress, completed, and planne
<ul style="list-style: none;">
<li>
<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>
<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>
<input type="checkbox" unchecked>
<label style="font-size: 18px;position: relative;top: -9px;">Auto ROI cropping</label>
<label>Auto ROI cropping</label>
</li>
<li>
<input type="checkbox" unchecked>
<label style="font-size: 18px;position: relative;top: -9px;">Auto threshold's</label>
<label>Auto threshold's</label>
</li>
<li>
<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>
<input type="checkbox" unchecked>
<label style="font-size: 18px;position: relative;top: -9px;">New GUI</label>
<label>New GUI</label>
</li>
<li>
<input type="checkbox" unchecked>
<label style="font-size: 18px;position: relative;top: -9px;">Power regulator board</label>
<label>Power regulator board</label>
</li>
<li>
<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>
</ul>
</div>
@ -82,15 +82,15 @@ This will contain a list of features that are in progress, completed, and planne
<ul style="list-style: none;">
<li>
<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>
<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>
<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>
</ul>
</div>

View File

@ -1,5 +1,5 @@
/* Custom Checkboxes */
input[type=checkbox] {
input[type="checkbox"] {
cursor: pointer;
width: 10px;
height: 10px;
@ -9,7 +9,9 @@ input[type=checkbox] {
-o-appearance: none;
appearance: none;
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;
padding: 3px;
}
@ -20,14 +22,19 @@ input:focus {
border-radius: 2pt;
box-shadow: 0 0 0 1pt grey;
outline: none;
transition: .1s;
transition: 0.1s;
}
input[type=checkbox]:checked {
input[type="checkbox"]:checked {
background-color: #3899ff;
}
input[type=checkbox]:focus {
input[type="checkbox"]:focus {
box-shadow: 0 0 3pt 2pt cornflowerblue;
}
}
label {
font-size: 18px;
position: relative;
top: -9px;
}