Follow-up ticket based on https://jira.magnolia-cms.com/browse/PAGES-235

In M5 not all area/components are active all the time. Whereas in M6.x there is no differentiation btw active and inactive areas/components. They are all the same green all the time.

Apply pattern to differentiate area/components that are "active" and "inactive" depending on what you click.

• active: strong green shades
• inactive: light green shades

AC:

Interaction pattern

• The selected area/component plus 1st level children are active (strong green)
• All others (parent, children 2nd level) are inactive (light green)

Color pattern

• Selected & Active (be it a selected area or component, it's the same pattern)
  • Selected #599900
    • no hover
    • Icons bg hover effect: color white; opacity default 0.3 / hover 0.5
  • Active #A2C86E
    • hover color: #7CB22A
    • Icons bg hover effect: color white; opacity default 0.3 / hover 0.5
• Default (inactive)
  • for areas: #D5E5C1
    • hover color: #C3DAA3
    • Icons bg hover effect: color white; opacity default 0.5 / hover 0.7
  • for components: #EEF4E4
    • hover color: #DEEBCB
    • Icons bg hover effect: color white; opacity default 0.8 / hover 100%

Note that for live copy pages we do not change anything.