S - Folder Styles Rewritten.css

@charset "UTF-8";
.file-explorer-flat {
  --explorer-root-folder-margin: 0 0 7px 0;
  --explorer-root-folder-padding: 0;
  --explorer-root-folder-indentation-width: 0;
  --explorer-root-folder-background: var(--folder);
  --explorer-root-background: hsla(var(--color-accent-hsl), 0.3);
  --explorer-root-folder-color: var(--text, var(--nav-item-color));
  --explorer-root-folder-open-color: var(--text-on-accent);
  --explorer-folder-open-background: var(--td, var(--background-modifier-cover));
  --explorer-folder-icon-color: var(--explorer-root-folder-background);
  --explorer-root-collapsed-background: transparent;
  --explorer-root-folder-indentation-color: var(--explorer-root-folder-background);
}
.file-explorer-flat .nav-folder.mod-root > .nav-folder-children > .nav-folder > .nav-folder-children {
  margin: var(--explorer-root-folder-margin);
  padding-left: var(--explorer-root-folder-padding);
  border-width: var(--explorer-root-folder-indentation-width);
  border-color: var(--explorer-root-folder-indentation-color);
  border-bottom: 2px solid var(--explorer-root-folder-background);
  background-color: var(--explorer-root-background);
  --nav-indentation-guide-color: var(--explorer-root-folder-indentation-color);
}
.file-explorer-flat .nav-folder.mod-root > .nav-folder-children > .nav-folder .nav-folder-title-content::before {
  --folder: var(--explorer-folder-icon-color);
}
.file-explorer-flat .nav-folder.mod-root > .nav-folder-children > .nav-folder.is-collapsed > .nav-folder-title:not(:hover) {
  background-color: var(--explorer-root-collapsed-background);
  color: var(--explorer-root-folder-color);
}
.file-explorer-flat .nav-folder.mod-root > .nav-folder-children > .nav-folder:not(.is-collapsed) > .nav-folder-title:not(:hover) {
  background-color: var(--explorer-root-folder-background);
  border-bottom-color: var(--explorer-root-folder-background);
  color: var(--explorer-root-folder-open-color);
  --folder-open: var(--explorer-root-folder-open-color);
}
.file-explorer-flat .nav-folder.mod-root > .nav-folder-children > .nav-folder:not(.is-collapsed) > .nav-folder-title:not(:hover) .collapse-icon {
  --nav-collapse-icon-color: var(--explorer-root-folder-open-color);
}
.file-explorer-flat .nav-folder.mod-root > .nav-folder-children > .nav-folder .nav-folder-title {
  align-items: center;
}
.file-explorer-flat .nav-folder.mod-root > .nav-folder-children > .nav-folder .nav-folder-collapse-indicator {
  --nav-collapse-icon-color: var(--nav-item-color);
}
.file-explorer-flat .mod-root .nav-folder-children > .nav-folder:not(.is-collapsed) > .nav-folder-title > .nav-folder-title-content {
  text-align: center;
  transition: cubic-bezier(1, 0, 0, 1);
  text-transform: uppercase;
  letter-spacing: 0.25em;
  padding: 3px 0;
  width: 100%;
}
.file-explorer-flat .mod-root .nav-folder-children > .nav-folder:not(.is-collapsed) > .nav-folder-title > .nav-folder-title-content::before {
  float: left;
}
.file-explorer-flat .mod-root .nav-folder-children > .nav-folder:not(.is-collapsed) > .nav-folder-children > .nav-folder:not(.is-collapsed) > .nav-folder-title:not(:hover) {
  background-color: var(--explorer-folder-open-background);
  border-bottom-color: var(--explorer-root-folder-background);
}

/*@settings
name: Folder Styles
id: folder-styles
settings:
    - 
        id: info-text-SlRvb-folder-styles
        type: info-text
        title: Folder Styles by SlRvb
        description: "[Folder Styles How-To Guide](https://publish.obsidian.md/slrvb-docs/ITS+Theme/Folder+Styles)"
        markdown: true
    - 
        title: Folder Styles
        id: file-explorer-flat
        type: class-toggle
        default: true
*/
body.file-explorer-flat {
  --explorer-folder-icon-content: var(--folder-icon);
  --explorer-folder-icon-font: var(--folder-font);
}

.file-explorer-flat .nav-folder-children .nav-folder-title-content::before {
  content: var(--explorer-folder-icon);
  font-family: var(--explorer-folder-font);
  text-align: center;
  margin-right: 5px;
  vertical-align: -2px;
}

.file-explorer-flat .nav-folder-children > .nav-folder.is-collapsed > .nav-folder-title .nav-folder-title-content::before {
  color: var(--explorer-folder-icon-color);
}

/* --- Insert your folder CSS under here --- */
/*With Explanation/Recommendations*/
.nav-folder-title[data-path="Folder name here"],
.nav-folder-title[data-path="Folder name here"] + .nav-folder-children {
  --explorer-folder-icon: "";
  /*Encoded Icon Font Code*/
  --explorer-folder-font: var(--rmx);
  /*Encoded Icon Font Name*/
  --explorer-root-folder-background: #a882ff;
  /*Root Folder Color (Text & Background)*/
  --explorer-root-background: #a882ff20;
  /*Root Folder's Inner Background Color (copy root background and add 20 after for best/easier styling & legibility)*/
  --explorer-root-folder-color: var(--explorer-root-folder-background);
  /*Root folder text color when closed/collapsed*/
  --explorer-folder-icon-color: var(--explorer-root-folder-background);
  /*Explorer Icon Color*/
  --explorer-root-folder-indentation-color: var(--explorer-root-folder-background);
  /*Folder Line Color*/
}