Need help writing custom CSS for dynalist stylish "On Focus"


I suck at CSS / front end development, could someone please point me in the right direction?

There’s this stylish plugin here:

Essentially it lets you “on focus” whatever current node you are on

What I want to do is write a customizable CSS that does the following:

  • On the current bulletpoint’s Node-outer class, have the CSS “on focus” the parent list bulletpoint and whiteout everything else
  • Ideally I’d like for it to have a set delay maybe too, the “on focus” effect only takes place after 10-15 seconds as I’m writing the document. Its similar to the idea of “Zen mode” in

This goes hand in hand with the layouts I made out navigating large lists / scability

Here’s a quick mockup of what I want to achieve with the CSS


Unfortunately updating parents styles when something is done to children* is not possible in pure CSS. And currently dynalist also doesn’t mark Node-outer in any way when you’re working on nodes within it. But I think it can be done with custom JavaScript code injected through . I might play with it in the future, it’s a nice idea.

*It can only work with ‘hover’ event, but it’s not good enough I suppose:

.is-currentRoot > .Node-children > .Node-childrenInner:hover > .Node-outer {
    opacity: .2;
    transition: 1.5s;
.is-currentRoot > .Node-children > .Node-childrenInner > .Node-outer:hover {
    opacity: 1;


This works pretty well though, with the onhover, but I definitely want one based on where the current cursor is in dynalist (since I would definitely accidentally hover over things I’m not working on)

All the settings related to opacity / transition are pretty much spot on for what I wanted

If you did have a tampermonkey script, how would you integrate this with stylish anyhow?

thanks for the help piotr :slight_smile:

also attached what it looks like on my screen:

EDIT Testing this a bit further, I think if somehow the tampermonkey script could use the unique URL I associated with it to do this “On focus” effect. This way if i zoom into a mode that doesn’t have lots of information this effect doesn’t take place. Or by default, set it to work only on the 1st / 2nd bulletpoint from root document

I’ll probably experiment with this and write my own tampermonkey script to do this as well when i get around to it

I could see a lot of applications for this for other things like book writing in general


Tampermonkey gives you a lot of possibilities if you know JavaScript (I know a little bit). The problem here is that this is a dynamic application and AFAIK currently there is no way to listen to its events (onDocumentReady, onDocumentChanged, or sth similar) so it’s doable, but not as simple as with typical websites.

Phrase Express Macro to navigate around very large opened-lists

Piotr I tested out your CSS code, this is how I’m using it right now:

2 Stylish CSS styles

  • One specific Dynalist URL (my main wiki/project pages of everything) has the “on hover effect”
  • My regular CSS sheet for my entire dynalist file

This way I can just choose between which effect I want. E.G. If I want to see the big picture with fading, or navigate to a specific bulletpoint with no fading