Update Night Sky Panel's Markings tab + Small Sun Tab refactor

[WeirdRubberDuck]

Closes OpenSpace/OpenSpace#3753 by adding a new ToggleCard component and improving the layout in the Night Sky Panel's Markings tab. IN discussion with @ylvaselling, I also changed the design for the Cardinal directions part to better reflect how this control works, and that it's different from the other toggles.

Drafting as the following needs to be fixed before merging:

• Should be merged after Feature/property tree topic #195 and adapted/tested with the updated visibility code
• The "Hide all" button for each Markings group needs action implementation by @micahnyc

New VS old Markings tab:

New VS old Sun tab:

[WeirdRubberDuck]

The layout is now more responsive and uses an adaptive gridding similar to the skybrowser panel. Demonstration:

2026-03-20.09-43-50.mov

[alexanderbock]

Just for myself, what does the & do here?

[WeirdRubberDuck]

It controls how the CSS rules are nested. With the &, this rule is parsed to:

.card:active

versus, without it, it would add a whitespace in between the two selectors and be interpreted as the rule being applied to all "descendants" of the .card selector, rather than the card itself. Just using :active without the & essentially parses to

.card *:active

This page summarizes it quite nicely
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/Nesting_selector

However, since this is the only rule under the .card selector, I'll replace it with .card:active. The nesting is no longer needed as no other styling is applied to the card (I was experimenting a bit with borders) :)

[alexanderbock]

Thanks!