Redesign zone UI

[camdendotlol]

Summary

• refreshes the colors for selected zones in both the image view and the transcription view
• small refactor to use a selected-zone class instead of inline styles for TEI elements whose zone is currently selected (not sure why I went for inline styles originally)

The one divergence from the mockup is that I had to keep the existing horizontal margins in the transcription view. The structure of the HTML elements in the transcription view makes it impossible to display the blue background all the way to the edges while keeping the text margins.

Screenshot

(Side note: I was unable to upload a screen recording because it exceeded GitHub's 10 MB file upload limit. Is that limit new?)

[NickLaiacona]

This looks good! A couple of small things, one is that I can still see the yellow outline when I creep up on a box with the mouse pointer:

The other thing, more for @cblissg is that I when the boxes aren't selected, they are this grey, which can be difficult to see:

[camdendotlol]

Hm, there should be hover styling. I'll check it out on Chrome and see if there might be a browser-compatiblity issue with the CSS rules.

[NickLaiacona]

What's odd is that it is blue when it the mouse is fully over the box but yellow when it is near the box.

[camdendotlol]

Aha, Annotorious was doing something fancy where instead of using the :hover selector, it applies a hover class that triggers when the mouse begins to approach the box, even if it's not actually hovering over it.

I replaced my use of :hover with .hover and now it looks good on my end.