Merge pull request #1818 from hypothesis/1790-change-higlight-css

Change highlight CSS for PDF.js

h/static/styles/base.scss

-@import 'compass/css3';
-
-$white: #fff !default;
-$black: #000 !default;
-
-// GRAYS
-$gray: #777 !default;
-$gray-darker: #333;
-$gray-dark: #585858;
-$gray-light: #969696 !default;
-$gray-lighter: #d3d3d3 !default;
-$gray-lightest: #f9f9f9 !default;
-
-//COLORS
-$hypothered: #bd1c2b !default;
-$hypothered-desat: #bd5862 !default;
-
-$error-red: $hypothered-desat !default;
-$error-red-light: #e0b0b0 !default;
-$error-red-lightest: #fff1f3 !default;
-
-$button-text-color: $gray-dark !default;
-$button-background-start: $white !default;
-$button-background-end: #f0f0f0 !default;
-$button-background-gradient: top, $button-background-start, $button-background-end !default;
-
-$success-green: #76B800 !default;
-
-// Scaffolding
-// -------------------------
-$body-background:        $white !default;
-$text-color:             $gray-dark !default;
-
-//LINKS
-$link-color:             $hypothered-desat !default;
-$link-color-hover:       $hypothered !default;
-
-// Typography
-// -------------------------
-$sans-font-family:        "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif !default;
-$serif-font-family:       Georgia, "Bitstream Charter", "Times", "Times New Roman", serif !default;
-$mono-font-family:        Open Sans Mono, Menlo, DejaVu Sans Mono, monospace !default;
-
-$base-font-size:          16px !default;
-$base-font-family:        $sans-font-family !default;
-$base-line-height:        20px !default;
-$alt-font-family:         $serif-font-family !default;
-
-$headings-font-family:    inherit !default;
-$headings-color:          inherit !default;
-
-//STANCE COLORS
-$positive: #3aab39;
-$negative: #d11c2b;
-$neutral: #0171ba;
-
-//OTHER VARIABLES
-$bucket-bar-width: 22px;
-$highlight-color: rgba(255, 255, 60, 0.3);
-$highlight-color-second: rgba(206, 206, 60, 0.4);
-$highlight-color-third: rgba(192, 192, 49, 0.4);
-$highlight-color-focus: rgba(192, 236, 253, 0.5);
-$score-width: 40px;
-$score-height: $score-width;
-$input-border-radius: 2px;
+@import "compass/css3";
+@import "variables";
 
 /* Style input placeholders */
 @mixin placeholder {

h/static/styles/pdfjs-overrides.scss

+@import "variables";
+
+// Newer versions of PDFjs use apply a transparency to the textLayer element.
+// In order for our highlights to be visible we need to use solid colors. The
+// PDFjs plugin provides a compatibility class to the PDFjs container that
+// we can use to detect this.
+.has-transparent-text-layer {
+  .annotator-hl {
+    &::-moz-selection {
+      background: rgba($highlight-color, 1);
+    }
+    &::-moz-selection, &::-moz-window-inactive, &::window-inactive {
+      background: rgba($highlight-color, 1);
+    }
+    &::selection, &::selection:window-inactive {
+      background: rgba($highlight-color, 1);
+    }
+  }
+
+  .annotator-highlights-always-on & .annotator-hl {
+    background: rgba($highlight-color, 1);
+
+    .annotator-hl {
+      background-color: rgba($highlight-color-second, 1);
+    }
+
+    .annotator-hl .annotator-hl {
+      background-color: rgba($highlight-color-third, 1);
+    }
+  }
+
+  .annotator-hl-focused,
+  .annotator-highlights-always-on & .annotator-hl.annotator-hl-focused {
+    background-color: rgba($highlight-color-focus, 1);
+  }
+}

h/static/styles/variables.scss

+$white: #fff !default;
+$black: #000 !default;
+
+// GRAYS
+$gray: #777 !default;
+$gray-darker: #333;
+$gray-dark: #585858;
+$gray-light: #969696 !default;
+$gray-lighter: #d3d3d3 !default;
+$gray-lightest: #f9f9f9 !default;
+
+//COLORS
+$hypothered: #bd1c2b !default;
+$hypothered-desat: #bd5862 !default;
+
+$error-red: $hypothered-desat !default;
+$error-red-light: #e0b0b0 !default;
+$error-red-lightest: #fff1f3 !default;
+
+$button-text-color: $gray-dark !default;
+$button-background-start: $white !default;
+$button-background-end: #f0f0f0 !default;
+$button-background-gradient: top, $button-background-start, $button-background-end !default;
+
+$success-green: #76B800 !default;
+
+// Scaffolding
+// -------------------------
+$body-background:        $white !default;
+$text-color:             $gray-dark !default;
+
+//LINKS
+$link-color:             $hypothered-desat !default;
+$link-color-hover:       $hypothered !default;
+
+// Typography
+// -------------------------
+$sans-font-family:        "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif !default;
+$serif-font-family:       Georgia, "Bitstream Charter", "Times", "Times New Roman", serif !default;
+$mono-font-family:        Open Sans Mono, Menlo, DejaVu Sans Mono, monospace !default;
+
+$base-font-size:          16px !default;
+$base-font-family:        $sans-font-family !default;
+$base-line-height:        20px !default;
+$alt-font-family:         $serif-font-family !default;
+
+$headings-font-family:    inherit !default;
+$headings-color:          inherit !default;
+
+//STANCE COLORS
+$positive: #3aab39;
+$negative: #d11c2b;
+$neutral: #0171ba;
+
+//OTHER VARIABLES
+$bucket-bar-width: 22px;
+$highlight-color: rgba(255, 255, 60, 0.3);
+$highlight-color-second: rgba(206, 206, 60, 0.4);
+$highlight-color-third: rgba(192, 192, 49, 0.4);
+$highlight-color-focus: rgba(192, 236, 253, 0.5);
+$score-width: 40px;
+$score-height: $score-width;
+$input-border-radius: 2px;