Link hover/focus/active styling

[fxedel]

Currently, links only change their color slightly when hovering / focusing / clicking them. Hovering leads to a lighter color, which decreases readability.

Instead, links should be highlighted in the following way:

• :link
  • color: keep previous link color (blue, in some places also grey), it must always be good readable against the current background
  • text-decoration: underline;
  • text-decoration-color: transparent;
  • text-underline-offset: 2px;
  • transition: Add text-decoration-color with same duration as existing transitions (color, fill, ...), e.g. 0.1s
• :hover, :focus
  • text-decoration-color: currentColor;
  • This should be sufficient to communicate that this is a link
  • Check that transition of underline color works
• :active
  • Set the link color (color and fill) to another color that is very good distinguishable from the normal link color, like orange-background (#ff9800).
  • Check that transition of link color works

This should, like before, only apply to inline text links. I.e. the download button, list/grid/card links, menu items, etc. should be excluded.

[FloEdelmann]

Also verify that the new colors have a good contrast in both light and dark theme. The Webhint tool can help there.