Move settings to top right menu
This is the same thing than !936 (closed) but the menu closes itself on blur (actually, it's only shown on focus). It relies on a bit of a hack:
- only form elements can have focus, so I introduced a checkbox that is focus when clicking on the icon (because the icon is actually a label).
- We don't actually want that checkbox so I hide it but putting it far far away, because really hiding it (
visibility: hidden) would prevent it to gain focus
- We still want the menu children to be clickable, which is not possible if they are hidden, so we also show the menu when it is active (is clicked) so that the click event is triggered even though the checkbox lost focus.
There is no more JS state.