diff --git a/client/styles/components/_p5-contrast-codemirror-theme.scss b/client/styles/components/_p5-contrast-codemirror-theme.scss index 6aae60e051..93c604d0cc 100644 --- a/client/styles/components/_p5-contrast-codemirror-theme.scss +++ b/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 { diff --git a/client/styles/components/_p5-dark-codemirror-theme.scss b/client/styles/components/_p5-dark-codemirror-theme.scss index 68925469ac..77940fa188 100644 --- a/client/styles/components/_p5-dark-codemirror-theme.scss +++ b/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; -} - diff --git a/client/styles/components/_p5-light-codemirror-theme.scss b/client/styles/components/_p5-light-codemirror-theme.scss index ca30e2d854..c2e8062865 100644 --- a/client/styles/components/_p5-light-codemirror-theme.scss +++ b/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; -}