Sliding Panes (Andy Matuschak Mode) Plugin

Would it be possible to add an option to tweak the opacity of background leaves? This would allow a semi-distraction-free mode while editing, with the secondary leaves looking faded-out compared to the primary leaf where you’re working.

1 Like

Do you mean something like this?


Here’s a CSS Snippet you can use to achieve this (while I consider whether to make it a core option, lol)

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.25;
}

You can put that in a css file in your vault’s .obsidian/snippets folder (it may be hidden by default) and then enable it in Obsidian’s appearance settings.
You can also tweak the opacity to your liking. I’ve also made panes fully opaque on hover

4 Likes

the opacity modifier is great. I was using less intensive background colours to differentiate active panes (even when not using sliding panes), but I will use this now.

1 Like

Hi Gordon, sadly, I am not able to get the plugin working. I get the following errors on Win 10 and have no clue what goes wrong. Have you any ideas?

Cheers, Martin

Yes, I meant precisely something like this! I’m relatively familiar with CSS, but not with the way I can use it to tweak Obsidian. I’ve “remixed” your snippet to the following, which basically is almost exactly what I wanted. Thanks for that.

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

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

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

@death.au One issue in plugin version 3.2.2: Undesired overlap of UI elements in preview mode in ‟Sliding Panes (Andy Matuschak Mode) Plugin”

One question reacting to this post:
Can first-pane-sticking be automatically toggled on/off based on actual window width? (on large screen it makes sense to stick it but on laptop screen it makes other panes inaccessible.)

Just for completeness: option requested by @zelenukhin is available as: Obsidian → Settings → PLUGIN OPTIONS → Sliding Panes (Andy’s Mode) → Toggle stacking

1 Like

Does anybody know how many panes are safe to work with in Andy’s mode b4 the display goes berserk?

@Technoshaman, @death.au I just tested on hd screen of my laptop Thinkpad X220.
In the current version v3.2.1 of the plugin with stacking enabled and Leaf Width set to 700, the limitation is that headers do not step out of the way so at certain number of panes, headers fill the available width of the window and from current pane we see only narrow vertical column, the right portion of the pane being hidden behind headers of other panes. This might be improved so that minimum Leaf Width (to show whole content width) is preserved on the screen and additional headers scroll out of view as it was the case in one of initial CSS-based versions.

Another observation: With increasing number of opened pages, speed of opening another pane decreases. I do not know if it is due to the plugin or due to the Obsidian itself. During experiment I have had 3GB free out of 8GB RAM and SSD disc with Windows 7, Obsidian v0.10.6. With cca 50 panes open, it takes about 5s to open new pane. All panes are in preview mode contain only markdown text without images. Backlink pane was kept hidden, although I did not disable backlinks plugin.

In comparison, when refocusing between two distant panes, the animation, which shows sliding of each intermediate pane, is relatively fast, within 1s.

1 Like

[SOLVED] - described here.

In a dark theme with Andy’s sliding panes it is difficult/impossible to see the mouse cursor when is is on one of the dark note “spines”.

The GIF also shows the cursor is visible in the black, non-spine part of the note.
Is this an issue of the Sliding panes plug-in? If so, is there a way to get the cursor to change color then?

Or is it something else?

@Klaas I do not have this issue. But I use in Windows 7 → Mouse Properties → Pointers → Scheme → Windows Inverted (extra large) (system scheme)
With that, cursor usually changes color so that it is in contrast with it’s background.

@malecjan: thanks for that. I am on macOS and unfortunately there isn’t such a thing.

On macOS, my I-beam is white, although it’s less than the spine width, so I would like it larger for my poor eyesight. It is almost impossible to see a black I-beam on a dark spine, as per your example. Rather than change the I-beam color system-wide, a CSS tweak would be ideal. I am using the amazing theme ia_obsidian by @rcvd , so it may be different for you.

@oxysmart: I resolved it - see here, it might be useful for you too.

1 Like

That was easy. Thanks :partying_face: It looks great on ia_obsidian theme too.

@oxysmart: I use the even more amazing Blue Topaz, albeit customized.

1 Like

Even more amazing, hmmm.
I like it, but I would like to increase the size of all the fonts and get some high contrast in the dark mode. Is that possible?

@oxysmart: yes, it is possible - see my reply in snip-a-note on the Discord channel.

1 Like

I am having issues when I toggle the plugin on/off: The windows and panes seem to be mixed up, specifically the right hand sidebar closes itself and you cannot turn it back on. Am I doing something wrong?