Redesign checkboxes and info tooltips

[Coscolin]

I know is a massive redesign, but I hope you like it.

Also I know is pending to create color variables for checkbox-wrapper-1 class.

[melkati]

Here is my feedback on your pull request:

1. Checkbox Design: I appreciate the design changes for the checkboxes. The visual improvement is noticeable, even though it involves a substantial amount of CSS.

2. Tooltip Icon Position: I don't agree with the tooltip icon being on the left. This positioning disrupts the direct readability of the label, which is the key information users need first. Typically, users' attention is on the right side where the inputs are, and placing the icon on the left forces a quick and awkward movement across the screen to find the tooltip. This is supported by design guidelines from Google Material Design, which suggest placing tooltip icons near the elements they describe to avoid disrupting the user's focus and ensure easy accessibility.

3. Tooltip Width: While a slightly wider tooltip can be a matter of personal preference, the current width is excessive. Very wide tooltips can be hard to read and scan, as users need to move their eyes across a larger horizontal space. Material Design guidelines recommend keeping tooltips concise and ensuring they don't span too wide to maintain readability.

Please note that there is another form (although it is not in the same branch). If you change one, you need to change them all: Link to other form.

Ensure you send the changes based on the latest version of the code. This PR is made on outdated code (yes, I know it changes often...).

For further reading and more detailed guidelines, you can refer to the official Google Material Design guidelines on tooltips.

References:

• Tooltips - Material Design 3
• Tooltips - Components - Material Design

[Coscolin]

Here is my feedback on your feedback:

1. Checkbox Design: I like that you like it. It's a lot of CSS code but it worth it. If do you want you can looking for another checkboxes design more smaller in CSS code inside https://getcssscan.com/css-checkboxes-examples web page. I like design number 8 (by Mauricio Allende) for some checkboxes like WiFi / BLE / MQTT / ESP32NOW options, but I understand that we can increase CSS size unlimited.

2. Tooltip Icon Position: Adding this to .tooltip-icon class you can move to right easly without changing nothing in preferences.html:
   .tooltip-icon { position: absolute; right: -25px; top: 0; cursor: pointer; margin-top: -5px; padding: 5px 10px;}

3. Tooltip widh: I agree with you, but previous widh was too much small. Maybe you can try with:
   .tooltip-text { visibility: hidden; width: 50%; top: calc(100% + 2px); right: -25px; border-radius: 10px 0 10px 10px; ....

4. Another forms: you are right, but at 4am my eyes not see too much...

5. outdated code: I am sorry, but it's impossible to me follow your code speed. I thought this branch is the latest version related to CSS/HTML .

I have another suggestion: I think initial "Connection" checkboxes it coud be ommited and added in fieldset/legend sections.
When you active WiFi checkbox in legend field, wifi options is shown just down.
Now, when you check MQTT or ESP32NOW options you don't see that related options are displayed.

I only try to contribute to this huge project. Take all you like when you want.