CSS to hide horizontal tabs and keep folded groups visible

[charle36]

Hello! Pretty much what the title says. I added this snippet to my vault to make Vertical Tabs behave more like I want. I thought I would share, since some people might want to use it too!

/*------------------------- Keep folded groups visible ------------------------- */
.obsidian-vertical-tabs-container .tree-item.is-group:not(.is-group-slot):not(:has(.tree-item.is-tab:not(.is-tab-slot))) {
    display: inherit;
}

/*---------------- Hide horizontal tabs when left sidebar is open -------------------- */
.workspace-split.mod-horizontal.mod-sidedock.mod-left-split[style="width: 200px;"] ~ .workspace-split.mod-vertical .workspace-tab-header-container {
	display: none;
}

Note that this snippet is for MacOS (buttons are in the left corner), but it can easily be adapted. Do not hesitate if you have any question!

[oxdc]

Hi @charle36 ! Thank you for sharing your snippets. The first one sounds like a bug to me. Let me investigate what's going on. Edit: Got it! I'll get this fixed soon. Published in v0.16.4.

[charle36]

Thanks for the fix!

[oxdc]

Hi @charle36 ! In your second snippet, the CSS selector [style="width: 200px;"] only works for sidebars that are exactly 200px wide. I'd suggest replacing it with :not(.is-sidedock-collapsed) instead.

- .workspace-split.mod-horizontal.mod-sidedock.mod-left-split[style="width: 200px;"]
+ .workspace-split.mod-horizontal.mod-sidedock.mod-left-split:not(.is-sidedock-collapsed)
  ~ .workspace-split.mod-vertical .workspace-tab-header-container {
	  display: none;
  }

[charle36]

Oups! I meant to correct that, but forgot! 😅