Adjust style of input elements to Firefox ones

[rugk]

Again as about:preferences does it, or, as the Photon styling guide states how it should be done.

This may require quite "much" CSS, but it can partically be taken from the linked photon site.

It should be applied to: checkboxes, radio elements, etc.

Note that it my look strange when it is applied to one element, but not all elements. So it needs to be done for all of them.

May be done in conjunction with https://github.com/rugk/offline-qr-code/issues/43.

[rugk]

Note that as of Firefox 60 the photon design has not really been applied to the elements on the options page or so… So maybe be wait or use the "old" design. (I assume the design will be adjusted, later.)

[rugk]

Uuuuh… wait… I cannot read the doc.

https://developer.mozilla.org/en-US/Add-ons/WebExtensions/user_interface/Browser_styles says the class browser-style still needs to be applied to some elements to work…

So this is way easier than I thought. :smile: And there they actually follow the Photon design (for checkboxes e.g.) – in contrast to the built-in settings page in Firefox. :laughing:

[rugk]

It may still require some tweaking so you cannot just stupidly apply the class. E.g. this one looks crazy when applied to my select element:

And it seems to make checkboxes (and other elements?) un-focusable (or one just does not see it?), so maybe tab-index needs to be set again.

[rugk]

So actually the issues I saw are Firefox issues.

In the PR https://github.com/rugk/offline-qr-code/pull/97 I've listed these bug reports. At least the accessibility issue with the not focusable elements makes this a blocking problem for now, so this won't be included in the v1.2.