Merge pull request #1350 from hypothesis/remove-highlight-drop-shadows

Remove the drop shadow from the highlight states

h/static/styles/base.scss

@@ -58,8 +58,13 @@ $negative: #d11c2b;
 $neutral: #0171ba;
 
 //OTHER VARIABLES
-$highlight-color: rgba(201, 215, 241, .5);
-$highlight-mode-color: rgba(255, 255, 60, .5);
+$highlight-color: rgba(192, 236, 253, 0.5);
+$highlight-color-second: rgba(181, 234, 255, 0.8);
+$highlight-color-third: rgba(149, 224, 253, 0.8);
+$highlight-mode-color: rgba(255, 255, 60, 0.3);
+$highlight-mode-color-second: rgba(206, 206, 60, 0.4);
+$highlight-mode-color-third: rgba(192, 192, 49, 0.4);
+$highlight-mode-active-color: rgba(255, 255, 60, 0.7);
 $thread-padding: 1em;
 $threadexp-width: .72em;
 $score-width: 40px;

h/static/styles/inject.scss

@@ -204,28 +204,41 @@ $base-font-size: 14px;
 .annotator-highlights-always-on .annotator-hl,
 .annotator-hl-active, .annotator-hl-temporary, .annotator-hl-focused {
   background: $highlight-color;
-  box-shadow:3px 3px 4px -1px #999999;
+
+  .annotator-hl {
+    background-color: $highlight-color-second;
+  }
+
+  .annotator-hl .annotator-hl {
+    background-color: $highlight-color-third;
+  }
+
   &::-moz-selection {
     background: $highlight-color;
-    box-shadow:3px 3px 4px #999999;
   }
   &::-moz-selection, &::-moz-window-inactive, &::window-inactive {
     background: $highlight-color;
-    box-shadow:3px 3px 4px #999999;
   }
   &::selection, &::selection:window-inactive {
     background: $highlight-color;
-    box-shadow:3px 3px 4px #999999;
   }
 }
 
 .annotator-highlights-always-on .annotator-hl {
   background: $highlight-mode-color;
+
+  .annotator-hl {
+    background-color: $highlight-mode-color-second;
+  }
+
+  .annotator-hl .annotator-hl {
+    background-color: $highlight-mode-color-third;
+  }
 }
 
 .annotator-highlights-always-on .annotator-hl-active,
 .annotator-highlights-always-on .annotator-hl-focused {
-  box-shadow:3px 3px 4px 3px #999999;
+  background-color: $highlight-mode-active-color;
 }
 
 // Sidebar