It may or may not be possible to change, but the way the current
highlighter slices the DOM when highlights overlap doesn't always
produce a structure where segments of larger highlights nest outside
segments of highlights that are entirely within their bounds. For
instance, structures like this may result:

    Spans boundaries:       [   ][[ ]][   ]
    Associated annotation:  A   ABA ABA   A

In this example, the range of A completely spans the range of B yet the
inner-most A span is completely wrapped by the B span, with no A span
wrapping them both. If A is the highlight with focus, it is not the
case that a CSS rule can simply neutralize the background color of B.
Therefore, the background color of the inner A span blends with the
background color of B, making the focus highlight less prominent than
it should be.

In this situation, the focus highlight can be guaranteed to be shown
in a clearly visible color by making it opaque. There may be colors
on which this is too low contrast, but until we can investigate other
options this PR makes the focus highlight color opaque to address this
issue.

Additionally, factor out a highlight mixin that makes it all a bit
more readable and consistent.

Fix #1766
Fix #1816