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

[Vincent_Tang]

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

There’s this stylish plugin here:

Dynalist Clean-Focus(deprecated)

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 app.classeur.io https://www.youtube.com/watch?v=F1X7NEafKro&feature=youtu.be.

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

Phrase Express Macro to navigate around very large opened-lists

I modified my routine slightly for quickly navigating large documents The problem I had with the above workflows is that I would create a new parent bulletpoint, but then have to go to phraseexpress to make a shortcut. It didn’t scale very well as new folders were being added I wanted something more intune with just chrome’s CTRL+F search, but without all the redundant key presses This is what my macro looks like now: [image] {#CTRL -chars f}{#input -head Input Text -single}{#enter}{#sle…

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

[Piotr]

@Vincent_Tang

On the current bulletpoint’s Node-outer class, have the CSS “on focus” the parent list bulletpoint and whiteout everything else

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 https://chrome.google.com/webstore/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpobfkfo . 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;
}

[Vincent_Tang]

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

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

[Piotr]

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.

[Vincent_Tang]

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