Change the color of the leftmost vertical bar (`.cell.selected::before`) in different vim-modes

[joelostblom]

Summary

The following in custom.css work as expected and change the color of the leftmost vertical bar when in jupyter and vim mode:

/* Change color of the leftmost vertical bar in jupyter mode */
.cell.selected::before {
    background-color: steelblue;
}
/* Change color of the leftmost vertical bar in vim mode */
.edit_mode .cell.selected::before {
    background-color: lightgreen;
}

However, I cannot figure out out to change the color to differentiate between vim normal and vim insert mode. I would expect this to be

.edit_mode .cell.selected::before .CodeMirror-focused:not(.cm-fat-cursor) {
    background-color: black;
}

But it is not working. I also tried adding background-color: black !important; without effect.

This is unexpected to me, since I can use the following to change the background color of the cell without any problems:

/* Jupyter cell is in normal mode when code mirror */
.edit_mode .cell.selected .CodeMirror-focused.cm-fat-cursor {
  background-color: #f7f7f7 !important;
}
/* Jupyter cell is in insert mode when code mirror */
.edit_mode .cell.selected .CodeMirror-focused:not(.cm-fat-cursor) {
  background-color: #ffffff !important;
}

Any ideas of how to change the color of the leftmost bar between vim normal and insert mode?

Environment

• [x] Operating system : Antegros (arch) with i3. Kernel 4.13.3-1-ARCH 64bit)
• [x] Web browser : Firefox 55.0.3
• [x] Version or revision of Jupyter Notebook : 5.0.0
• [x] Revision of jupyter-vim-binding : 7f1a585

[lambdalisue]

In CSS, ::before creates a pseudo-element that is the first child of the selected element.

https://developer.mozilla.org/en-US/docs/Web/CSS/::before

So .edit_mode .cell.selected::before .CodeMirror-focused:not(.cm-fat-cursor) points wrong one while ::before insert a pseudo-element.

Try .edit_mode .cell.selected .CodeMirror-focused:not(.cm-fat-cursor) (I don't have a jupyter environment right now so I couldn't test it)

[joelostblom]

Thanks for your reply @lambdalisue.

I tried this

.edit_mode .cell.selected .CodeMirror-focused:not(.cm-fat-cursor) {
    background-color: black !important;
}

But it only changes the color of the cell background when editing, not the vertical bar to the left of the cell.

[lambdalisue]

I'm sorry I have mistaken.

You want to change the background-color of .cell.selected::before element via status of its child .cell.selected .CodeMirror-focused:not(.cm-fat-cursor). However, there is no CSS selector which use child status (CSS4 introduce :has() but I think most of browser has not support that selector yet).

Ref: https://stackoverflow.com/questions/38869401/filter-css-selector-based-on-child-properties

[joelostblom]

Too bad, thanks for letting me know!

[lambdalisue]

It seems even 'has' won't work because it rely on neighbor not child.

One way to do that is adding class on it's parent by javascript.

[joelostblom]

Thanks @lambdalisue, so would I add this to my custom.js? Do you have an example of what this would look like in my case? I tried adding a line to my custom.js following this logic, but I can't get it to work.