CSS: Distraction-free writing mode / Focus mode

🌈Share & Showcase
1

This a feature some “Distraction-free writing” apps have.

The idea is you can fullscreen dynalist, and think about one item at a time, with zero distraction.

  • Everything looks normal when mouse isn’t hovering over a node
  • If mouse is over a node, all other nodes are invisible
  • You can still work with the keyboard only, and everything visible, by moving the mouse off to the side
.Node-children:hover .Node-self {
    opacity: 0;
}

.Node-children:hover .Node-self:hover {
   opacity: 1;
}
1 Like
2

Hide the scrollbar:

.DocumentContainer::-webkit-scrollbar {
display: none;
}
3

I changed it to focus on what youre typing into rather than mousing over

.Node-self {
    opacity: 0.2;
}

:not(.is-contentRendered) {
   opacity: 1;
}