From 019c24eef50369a1f810704426f0573d086c366d Mon Sep 17 00:00:00 2001 From: Dipam Sen Date: Fri, 14 Mar 2025 18:04:13 +0000 Subject: [PATCH 1/2] style: fix styles to use correct selection colors --- .../components/_p5-contrast-codemirror-theme.scss | 13 ++++++++++--- .../components/_p5-dark-codemirror-theme.scss | 14 ++++++-------- .../components/_p5-light-codemirror-theme.scss | 13 ++++++------- 3 files changed, 22 insertions(+), 18 deletions(-) diff --git a/client/styles/components/_p5-contrast-codemirror-theme.scss b/client/styles/components/_p5-contrast-codemirror-theme.scss index 6aae60e051..8e967d3618 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 { @@ -147,3 +150,7 @@ $p5-contrast-activeline: #999999; // background-color: $medium-dark; outline: #{math.div(1, $base-font-size)}rem solid $p5-contrast-white; } + +body { + background-color: red; +} 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; -} From ec06784a9c43e5240769249daae62b76ccb2e5d8 Mon Sep 17 00:00:00 2001 From: Dipam Sen Date: Fri, 14 Mar 2025 18:08:30 +0000 Subject: [PATCH 2/2] remove unintended code --- client/styles/components/_p5-contrast-codemirror-theme.scss | 4 ---- 1 file changed, 4 deletions(-) diff --git a/client/styles/components/_p5-contrast-codemirror-theme.scss b/client/styles/components/_p5-contrast-codemirror-theme.scss index 8e967d3618..93c604d0cc 100644 --- a/client/styles/components/_p5-contrast-codemirror-theme.scss +++ b/client/styles/components/_p5-contrast-codemirror-theme.scss @@ -150,7 +150,3 @@ $p5-contrast-activeline: #999999; // background-color: $medium-dark; outline: #{math.div(1, $base-font-size)}rem solid $p5-contrast-white; } - -body { - background-color: red; -}