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.