Merge pull request #3396 from dipamsen/fix-highlight-color

Fix code selection background colors

Author: raclim

client/styles/components/_p5-contrast-codemirror-theme.scss

@@ -25,7 +25,7 @@ $p5-contrast-pink: #FFA9D9;
 
 $p5-contrast-gutter: #454545;
 $p5-contrast-number: #FDFDFD;
-$p5-contrast-selected: rgba(45, 123, 182, 25);
+$p5-contrast-selected: $middle-dark;
 $p5-contrast-activeline: #999999;
 
 .cm-s-p5-contrast {
@@ -81,8 +81,11 @@ $p5-contrast-activeline: #999999;
   color: $p5-contrast-number;
 }
 
-.cm-s-p5-contrast div .CodeMirror-selected {
-  background-color: $p5-contrast-selected;
+.cm-s-p5-contrast {
+  .CodeMirror-selected { background: $p5-contrast-selected; }
+  .CodeMirror-focused .CodeMirror-selected { background: $p5-contrast-selected; }
+  .CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection { background: $p5-contrast-selected; }
+  .CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection { background: $p5-contrast-selected; } 
 }
 
 .cm-s-p5-contrast .CodeMirror-activeline-background {

client/styles/components/_p5-dark-codemirror-theme.scss

@@ -26,7 +26,7 @@ $p5-dark-goldbrown: #b58318;
 
 $p5-dark-gutter: #f4f4f4;
 $p5-dark-number: #b5b5b5;
-$p5-dark-selected: rgba(45, 123, 182, 25);
+$p5-dark-selected: $medium-dark;
 $p5-dark-activeline: rgb(207, 207, 207);
 
 $p5-dark-error: #df3a3d;
@@ -84,8 +84,11 @@ $p5-dark-error: #df3a3d;
   color: $p5-dark-number;
 }
 
-.cm-s-p5-dark div.CodeMirror-selected {
-  background-color: $p5-dark-selected;
+.cm-s-p5-dark {
+  .CodeMirror-selected { background: $p5-dark-selected; }
+  .CodeMirror-focused .CodeMirror-selected { background: $p5-dark-selected; }
+  .CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection { background: $p5-dark-selected; }
+  .CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection { background: $p5-dark-selected; } 
 }
 
 .cm-s-p5-dark .CodeMirror-activeline-background {
@@ -146,8 +149,3 @@ $p5-dark-error: #df3a3d;
 .cm-s-p5-dark .cm-searching {
   background-color: $p5js-pink-opacity;
 }
-
-.cm-s-p5-dark .CodeMirror-selectedtext {
-  background-color: $medium-dark;
-}
-

client/styles/components/_p5-light-codemirror-theme.scss

@@ -23,7 +23,7 @@ $p5-light-green: #47820A;
 
 $p5-light-gutter: #f4f4f4;
 $p5-light-number: #b5b5b5;
-$p5-light-selected: rgba(45, 123, 182, 25);
+$p5-light-selected: $medium-light;
 $p5-light-activeline: rgb(207, 207, 207);
 
 .cm-s-p5-light {
@@ -79,8 +79,11 @@ $p5-light-activeline: rgb(207, 207, 207);
   color: $p5-light-number;
 }
 
-.cm-s-p5-light div .CodeMirror-selected {
-  background-color: $p5-light-selected;
+.cm-s-p5-light {
+  .CodeMirror-selected { background: $p5-light-selected; }
+  .CodeMirror-focused .CodeMirror-selected { background: $p5-light-selected; }
+  .CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection { background: $p5-light-selected; }
+  .CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection { background: $p5-light-selected; } 
 }
 
 .cm-s-p5-light .CodeMirror-activeline-background {
@@ -139,7 +142,3 @@ $p5-light-activeline: rgb(207, 207, 207);
 .cm-s-p5-light .cm-searching {
   background-color: $p5js-pink-opacity;
 }
-
-.cm-s-p5-light .CodeMirror-selectedtext {
-  background-color: $medium-light;
-}