selection isn’t visible

[FranklinYu]

• Browser: Chrome
• Operating System: macOS Catalina
• Link to page with the issue: https://data.stackexchange.com/apple/query/edit/1194494
• Screenshot:

I have selected SELETCT but I cannot tell. In contrast, for light theme it’s

[the-j0k3r]

No idea what this is, the selection is inline HTML and its dynamic depending where you select it.

e.g `style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 4.99816px; left: 134.797px;"```

So the top/left position seems to determine where the area is selected.

also not sure what is styling the actual line, need to investigate this, no idea as is,

I do have fixes for this are that werent reported with this issue.

[the-j0k3r]

@mottie @AfroThundr3007730 ideas/help?

[Mottie]

Try this change:

@@ -486,6 +486,10 @@ regexp("^https?:\/\/stackoverflow.[^\.]*\.com.*") {
     background: /*[[base-color]]*/ !important;
     color: #eee !important;
   }
+  .CodeMirror-selected {
+    background: rgba(/*[[base-color-rgb]]*/, 0.4) !important;
+    color: #eee !important;   
+  }
   /* === input focus hightlight === */
   input:focus, textarea:focus,
   .chosen-container.chosen-container-active .chosen-choices,
@@ -2870,7 +2874,8 @@ regexp("^https?:\/\/stackoverflow.[^\.]*\.com.*") {
     background: #333 !important;
     color: #ddd !important;
   }
-  .prettyprint code, .accepted-answer pre > code {
+  .prettyprint code, .accepted-answer pre > code,
+  .CodeMirror .CodeMirror-code pre:not(.CodeMirror-line) {
     background: transparent !important;
   }
   /* accepted answer code blocks */

[the-j0k3r]

nope,

[the-j0k3r]

I have it thanks

[FranklinYu]

Nice! I love it!

[FranklinYu]

By the way cursor is also dark and illegible. Maybe something like

.CodeMirror div.CodeMirror-cursor {
    border-left-color: gray; /* or whatever color you see fit */
}

Sorry I didn’t mentioned it before…

[the-j0k3r]

@FranklinYu Yep, thanks for that. Color wise personally I avoid named colors and all our styles dont use named colors, for this Ill use a modified twilight theme we already have for another area.

If you want we can also add a cursor thickness to this part. unless you're happy with the default thickness.

[the-j0k3r]

So, ive shipped 4.3.2 which includes a number of fixes related to this.

I had added in the past a twilight syntax theme non user configurable for similar portion in SO and now its in use here in data SE with addition of the sql cm styling.

The default CodeMirror stylesheet has many other items not covered here and to cover these will need much more work, if interested just pitch in.

Also, cof!!, Just so theres no temptation in asking for other syntax themes, none will be added, as is should be more than sufficient.