cours/.obsidian/snippets/[ui] Custom Separators (gradient).css
Oscar Plaisant 602a41e7f8 update
2024-12-25 22:30:24 +01:00

28 lines
1.1 KiB
CSS

/*
File Explorer Separators
So this is super handy, I found a way to add visual separators below and above navigation items in the file explorer.
This works nicely along side the 'Custom File Explorer Sorting' plugin, and there's a thread on their github about my solution.
You need to customize the rule below in accordance with your file structure.
These styles go with
https://github.com/replete/obsidian-minimal-theme-css-snippets
*/
:root {
--replete-custom-separators-vertical-padding: 4px;
--replete-custom-separators-left-margin: -12px;
}
/* Separator below */
.nav-files-container [class*=nav-]:has(:is(
[data-path="Areas.md"],
[data-path="Meetings"],
[data-path="Sundown"],
[data-path="Thoughts"],
[data-path="Meditations"]
))::after {
content:'';
display:block;
height:1px;
width:calc(100% + 32px);
background:linear-gradient(to right, var(--tab-outline-color), transparent);
margin:var(--replete-custom-separators-vertical-padding) 0 var(--replete-custom-separators-vertical-padding) var(--replete-custom-separators-left-margin);
}