Focus mode css snippet for opacity not working

[ronrdev]

Here is the snippet I have installed. It has no effect.

.focus-mode .cm-s-obsidian div:not(.CodeMirror-activeline) > .CodeMirror-line {
    opacity: 40% !important;
    filter: saturate(1) !important;
}

[ryanpcmcquen]

Not sure what you are trying to accomplish, but the opacity and filter values should match. Although it doesn't seem like activeline gets added to the DOM anymore in the latest version of Obsidian.

[ryanpcmcquen]

Asking about active line support here: https://forum.obsidian.md/t/no-more-codemirror-activeline-class/46591

[ronrdev]

The typewriter scroll plugin has a zen mode that lowers the opacity of all paragraphs except where the cursor is located. This only effects one pane. I don't know how this is achieved but maybe could look under the hood at that. It's working. To test, installed typewriter scroll plugin, opened command window, typed zen to find and turn on zen mode.

Edit to add: I remember having to update some of my snippets when they updated codemirror from 5 to 6. Had to change references of CodeMirror to CM.

I don't know if this is correct but something like: .CodeMirror-activeline .cm-activeLine

https://github.com/deathau/cm-typewriter-scroll-obsidian

[ryanpcmcquen]

Does it work in Obsidian 1.0.3?

[ronrdev]

Yes, I just took that screenshot before posting.

[ryanpcmcquen]

What other plugins do you have installed?

[ryanpcmcquen]

Did you try modifying your snippet to match the filter value with the opacity value?

[ronrdev]

Yes- updated the snippet. Also tried changing 1 to 40%, with the idea to lower opacity on non active lines.

.focus-mode .cm-s-obsidian div:not(.CodeMirror-activeline) > .CodeMirror-line {
    opacity: 1 !important;
    filter: saturate(1) !important;
}

I am checking in the sandbox vault, one plugin at a time. typewriter scroll zen mode works focus mode plugin does not

[ryanpcmcquen]

Should be:

.focus-mode .cm-s-obsidian div:not(.CodeMirror-activeline) > .CodeMirror-line {
    opacity: 0.4 !important;
    filter: saturate(0.4) !important;
}

[ronrdev]

That still has no effect, but thanks for the syntax for setting opacity correctly. Looking at the inspector the active line is labeled like this.

And I know the codemirror cursor changed to cm-cursor.

[ronrdev]

I got the plugin to do the opposite. It's making my active line faded, but it's having an effect.

.focus-mode .cm-s-obsidian div:not(.cm-line) > .cm-active {
    opacity: 0.4 !important;
    filter: saturate(0.4) !important;
}

[ronrdev]

I got it.

.focus-mode .cm-s-obsidian .cm-line:not(.cm-active) {
    opacity: 0.4 !important;
    filter: saturate(0.4) !important;
}

[ryanpcmcquen]

Nice work! Will you try the latest version and let me know if you have any issues? https://github.com/ryanpcmcquen/obsidian-focus-mode/releases/tag/1.11.0

[ronrdev]

I can confirm in the latest version this is working as expected.