Sliding Panes (Andy Matuschak Mode) Plugin

Share & showcase
68

For everyone interested, I’ve tweaked the opacity values of the active/inactive “leaves” and also added dynamic opacity to the side dock ribbon (“the left toolbar”). I’ve also changed the speed at which something turns semi-transparent/opaque, “to feel more responsive.”

I tried to “opacify” the rest of the interface, but my CSS skills end at the point where I’m trying to un-opacify everything again.

Specifically, by opacifying the left and right “ribbons” (where the panels appear), Obsidian turns into an awesome Markdown editor. HOWEVER… it seems that neither the “hover” or “active” CSS pseudo-classes work when pointing at those bits of the interface, so they keep looking semi-invisible.

If anyone has any idea how to pull this off, we’ve just turned Obsidian into a “distraction-free editor” :slight_smile:

Anyways, here’s the current “opacify inactive leaves and left toolbar” CSS:

body.plugin-sliding-panes .workspace>.mod-root>.workspace-leaf:not(.mod-active) {
  background-color: var(--background-primary);
}

body.plugin-sliding-panes .workspace>.mod-root>.workspace-leaf:not(.mod-active):not(:hover)>.workspace-leaf-content {
  opacity: 0.1;
  transition: opacity, 1s;
}

body.plugin-sliding-panes .workspace>.mod-root>.workspace-leaf:not(.mod-active):hover>.workspace-leaf-content {
  opacity: 1;
  transition: opacity, 0.15s;
}

.side-dock-ribbon {
	opacity: 0.2;
	transition: opacity, 1s;
}

.side-dock-ribbon:active, .side-dock-ribbon:hover {
	opacity: 1;
	transition: opacity, 0.15s;
}
4 Likes