Ultra Distraction-free Mode CSS


#1

Only see what you’re focused on. This hides EVERYTHING. It even hides the zoomed item, you only see the children items. It’s all still there if you hover over it, you just don’t see it all the time. You can put your browser in fullscreen with the address/tabs hidden if you want to get crazy.

.LeftPaneSlidebarContainer,
.LeftPaneSplitter,
.DocumentBreadcrumb,
.AppHeader,
.Node.is-currentRoot > .Node-self,
.DocumentTools-icon
{
opacity: 0;
}

.LeftPaneSlidebarContainer:hover,
.LeftPaneSplitter:hover,
.DocumentBreadcrumb:hover,
.AppHeader:hover,
.Node.is-currentRoot > .Node-self:hover,
.DocumentTools-icon:hover
{
opacity: 1;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}