Layer views - reduced css changes.

[cityremade]

Introduced layout changes

• Updated default palette - new base colour introduced for content layout readability.
• Equivalent colour added to dark mode with addition to palette documentation.
• .no-select class now applied on drawer headers and layer meta elements - previously each had a set of no-select rules in respective stylesheets. Redundant rules removed.
• drawer and layerview stylesheets cleaned up - redundant rules moved to lower level drawer stylesheet, improved notation and order for nested rules.
• location view - hierarchy of colours to follow the layer view logic, that is: base -> secondary -> tertiary. Previously it would follow base -> tertiary -> secondary which caused readability clashes against inputs and dropdowns.
• dropdown background now base-tertiary to contrast correctly against drawers.
• layer view stylesheet - css selectors detached from .drawer class.
• location view - aligned padding, now header has the same padding on both sides. Selectors detached from .drawer class.
• dark mode palette - colours for secondary and tertiary switched over, previously tertiary would be darker than secondary which didn't work at all times.
• drawer - expanded drawers now have a flat look with a border.
• .layer-view, .layer-group, .location-view - collapsed drawers have box shadow which is a better indication that the element has inner content.
  * .layer group - font in primary colour for distinction. bg colour does enough.

Change from the previous PR:

• fourth base colour applied only on layer-group container
• box-shadow on collapsed drawers only when they have .layer-view, .layer-group, .location-view classes.
• inner drawers without box-shadow which would previously visually overtake buttons.

[cityremade]

I'm in two minds over group header in primary colour. no more.

[dbauszus-glx]

All drawers seem to be always expanded.

20260305-1601-48.1792051.mp4

[cityremade]

should be fixed now.

[dbauszus-glx]

I would probably remove these rules as they don't add a lot but seem to clutter up the space with an additional border.

.drawer {
    &.expanded {
        & > .header {
            /* border-bottom: solid 1px var(--color-border); */
            /* margin-bottom: 7px; */
        }
    }
}

More importantly. If you disable the rules and increase the screen scale you can see an issue with the padding. The header should not have a different padding than the content.

I am happy to address the issue with header text hirarchy in a different PR or here.

Currently the group is bold, the layer is thin, and drawer header in a layer view are bold making these standout moore than the actual layer header.

[cityremade]

ok so I've moved the bottom border on the header rule out of the drawer and into the layerview.

this is indeed too much right now.

yet this helps a lot with readability even if it only comes at top levels - layer group, layer view.

so the inner drawer is still a bit plain but we can't address it without addressing buttons and other important interactive elements.

[dbauszus-glx]

Padding should be applied to the drawer instead of a margin to the first child of the header. This ensures that the content and the header are equally padded. Previously the margin of the header exceeded the content of the drawer which looked odd.

[dbauszus-glx]

The extra bottom border and margin on an expanded layer / group header doesn't add much. ec9cbe7

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud