Welcome back to the “Customize Your Vault Like a Pro” series! If you’re anything like me, you spend a lot of time in Obsidian. And while Obsidian is powerful right out of the box, a little customization can go a long way in making your knowledge management experience even more enjoyable and efficient.

In the previous article, we tackled tweaking the window controls to mimic the sleek look of macOS. This time, we’re diving into CSS tab transitions.

Love the sleek, polished look of MacOS-style exit buttons? The Zen Minimal Exit Menu mod for Zen Browser introduces a refined, circular button layout for closing, minimizing, and maximizing windows—offering both functionality and aesthetic appeal. But why stop at the browser?

In this instalment of Customize Your Vault Like a Pro, I’ll show how to port the Zen Minimal Exit Menu into Obsidian, giving your vault a more modern, streamlined window control design.

Next in Customize Your Vault Like a Pro, I’ll guide you through adding a sleek hover effect to file explorer and command palette items, plus showcasing some effects for modal windows like the command palette and settings.

Let’s start by adding a smooth animation to the padding property of the File Explorer.

.nav-file:hover, div.tree-item.nav-folder.iconic-item.is-collapsed:hover {
    padding: 0px 0px 0px 6px;
    transition: padding 70ms ease-in-out;
  }

When you hover over a file (.nav-file) or a collapsed folder (.tree-item.nav-folder.iconic-item.is-collapsed) in the navigation pane, the item shifts 6 pixels to the right by adding left padding. The shift happens smoothly over 70 milliseconds, thanks to the transition property, creating a subtle sliding effect. When you stop hovering, the padding returns to its original state, also with a smooth 70ms transition.