TextLayer selection coloring improvement for overlap.

As a consequence of merging #5221 it is more likely to have multiple
overlapping selection divs inside the text layer. Because each individual
element gets the selection style applied, the 30%opacity stacks, making a
60% bar visible where the overlap happens.

As proposed by @rocallahan, this can be fixed by making the selection
style solid and setting opacity for the overall layer.

I assume also that this should make the work for the renderer easier, but
was unable to bench it.

web/viewer.css

@@ -1327,7 +1327,7 @@ canvas {
   margin: -1px;
   padding: 1px;
 
-  background-color: rgba(180, 0, 170, 0.2);
+  background-color: rgb(180, 0, 170);
   border-radius: 4px;
 }
 
@@ -1344,14 +1344,20 @@ canvas {
 }
 
 .textLayer .highlight.selected {
-  background-color: rgba(0, 100, 0, 0.2);
+  background-color: rgb(0, 100, 0);
 }
 
 /* TODO: file FF bug to support ::-moz-selection:window-inactive
    so we can override the opaque grey background when the window is inactive;
    see https://bugzilla.mozilla.org/show_bug.cgi?id=706209 */
-::selection { background:rgba(0,0,255,0.3); }
-::-moz-selection { background:rgba(0,0,255,0.3); }
+::selection { background: rgba(0,0,255,0.3); }
+::-moz-selection { background: rgba(0,0,255,0.3); }
+
+.textLayer ::selection { background: rgb(0,0,255); }
+.textLayer ::-moz-selection { background: rgb(0,0,255); }
+.textLayer {
+  opacity: 0.2;
+}
 
 .annotationHighlight {
   position: absolute;