[ui] Custom Separators (gradient).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-folder-children > [class*=nav-]:has([data-path="Scratchpad.md"])::after,
.nav-folder-children > [class*=nav-]:has([data-path="Archive"])::after
{
    content:'';
    display:block;
    height:1px;
    width:100%;
    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);
}

/* Separator above */
.nav-folder-children > [class*=nav-]:has([data-path="Daily"])::before,
.nav-folder-children > [class*=nav-]:has([data-path="People"])::before,
.nav-folder-children > [class*=nav-]:has([data-path="Archive"])::before
{
    content:'';
    display:block;
    height:1px;
    width:100%;
    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);
}


/* Separator for first item */
/* .nav-folder-children > [class*=nav-]:nth-of-type(2)::before
{
    content:'';
    display:block;
    height:1px;
    width:100%;
    background:linear-gradient(to right, var(--bg3), transparent);
    margin:0 0 var(--replete-custom-separators-vertical-padding) var(--replete-custom-separators-left-margin);
} */