Rainbow colored subfolders in order of levels

Custom CSS & Theme Design
2

I improved it a little bit.

image
image330×685 22.7 KB

:root{
    /* Folder colors */
    --Fold1: 243, 155, 155;
    --Fold2: 240, 174, 89;
    --Fold3: 219, 206, 89;
    --Fold4: 157, 205, 120;
    --Fold5: 138, 182, 226;
    --Fold6: 170, 165, 219;

    /* Opacity setting */
    --bgFoldOpacity: 0.25;
	
    /* Margins and padding */
    --foldBgPad: 3px;
    --foldBgMar: 5px;
}



.nav-folder-children {
    border-left: 1px solid #96d5cedc;
}



.nav-files-container > div > .nav-folder > div.tree-item-self.nav-folder-title {
    background-color: rgba(var(--Fold1), var(--bgFoldOpacity)); 
    border-radius: 5px; 
    padding-inline-start: 30px !important;
}
.nav-files-container > div > .nav-file > div.tree-item-self.nav-file-title {
    background-color: rgba(var(--Fold1), var(--bgFoldOpacity)); 
    border-radius: 5px; 
    padding-inline-start: 10px !important;
}



.nav-files-container > div > .nav-folder > .nav-folder-children {
    margin-inline-start: 7px; 
}
.nav-files-container > div > .nav-folder > .nav-folder-children > .nav-folder > div.tree-item-self.nav-folder-title {
    background-color: rgba(var(--Fold2), var(--bgFoldOpacity)); 
    border-radius: 5px; 
    transform:translateX(15px) !important;
    width: calc(100% - 3px) !important;
}
.nav-files-container > div > .nav-folder > .nav-folder-children > .nav-folder > div.tree-item-self.nav-folder-title > div.tree-item-inner {
    margin-left: -6px !important;
}
.nav-files-container > div > .nav-folder > .nav-folder-children > .nav-folder > div.tree-item-self.nav-folder-title > div.tree-item-icon {
    margin-left: -26px !important;
}
.nav-files-container > div > .nav-folder > .nav-folder-children > .nav-file > div.tree-item-self.nav-file-title {
    background-color: rgba(var(--Fold2), var(--bgFoldOpacity)); 
    border-radius: 5px; 
    transform:translateX(15px);
    width: calc(100% - 3px) !important;
}
.nav-files-container > div > .nav-folder > .nav-folder-children > .nav-file > div.tree-item-self.nav-file-title > div.nav-file-title-content {
    margin-left: -25px !important;
}



.nav-files-container > div > .nav-folder > .nav-folder-children > .nav-folder > div.nav-folder-children {
    margin-inline-start: 10px; 
}
.nav-files-container > div > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > 
div.tree-item-self.nav-folder-title {
    background-color: rgba(var(--Fold3), var(--bgFoldOpacity)); 
    border-radius: 5px; 
    transform:translateX(30px) !important;
    width: calc(100% - 3px) !important;
}
.nav-files-container > div > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > 
div.tree-item-self.nav-folder-title > div.tree-item-inner {
    margin-left: -21px !important;
}
.nav-files-container > div > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > 
div.tree-item-self.nav-folder-title > div.tree-item-icon {
    margin-left: -41px !important;
}
.nav-files-container > div > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-file > 
div.tree-item-self.nav-file-title {
    background-color: rgba(var(--Fold3), var(--bgFoldOpacity)); 
    border-radius: 5px; 
    transform:translateX(30px);
    width: calc(100% - 3px) !important;
}
.nav-files-container > div > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-file > 
div.tree-item-self.nav-file-title > div.nav-file-title-content {
    margin-left: -41px !important;
}




.nav-files-container > div > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > div.nav-folder-children {
    margin-inline-start: 10px; 
}
.nav-files-container > div > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > 
.nav-folder > div.tree-item-self.nav-folder-title {
    background-color: rgba(var(--Fold4), var(--bgFoldOpacity)); 
    border-radius: 5px; 
    transform:translateX(45px) !important;
    width: calc(100% - 3px) !important;
}
.nav-files-container > div > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > 
.nav-folder > div.tree-item-self.nav-folder-title > div.tree-item-inner {
    margin-left: -36px !important;
}
.nav-files-container > div > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > 
.nav-folder > div.tree-item-self.nav-folder-title > div.tree-item-icon {
    margin-left: -56px !important;
}
.nav-files-container > div > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > 
.nav-file > div.tree-item-self.nav-file-title {
    background-color: rgba(var(--Fold4), var(--bgFoldOpacity)); 
    border-radius: 5px; 
    transform:translateX(45px);
    width: calc(100% - 3px) !important;
}
.nav-files-container > div > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > 
.nav-file > div.tree-item-self.nav-file-title > div.nav-file-title-content {
    margin-left: -56px !important;
}




.nav-files-container > div > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > div.nav-folder-children > 
.nav-folder > .nav-folder-children {
    margin-inline-start: 10px; 
}
.nav-files-container > div > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > 
.nav-folder > .nav-folder-children > .nav-folder > div.tree-item-self.nav-folder-title {
    background-color: rgba(var(--Fold5), var(--bgFoldOpacity)); 
    border-radius: 5px; 
    transform:translateX(60px) !important;
    width: calc(100% - 3px) !important;
}
.nav-files-container > div > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > 
.nav-folder > .nav-folder-children > .nav-folder > div.tree-item-self.nav-folder-title > div.tree-item-inner {
    margin-left: -51px !important;
}
.nav-files-container > div > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > 
.nav-folder > .nav-folder-children > .nav-folder > div.tree-item-self.nav-folder-title > div.tree-item-icon {
    margin-left: -71px !important;
}
.nav-files-container > div > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > 
.nav-folder > .nav-folder-children > .nav-file > div.tree-item-self.nav-file-title {
    background-color: rgba(var(--Fold5), var(--bgFoldOpacity)); 
    border-radius: 5px; 
    transform:translateX(60px);
    width: calc(100% - 3px) !important;
}
.nav-files-container > div > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > 
.nav-folder > .nav-folder-children > .nav-file > div.tree-item-self.nav-file-title > div.nav-file-title-content {
    margin-left: -71px !important;
}




.nav-files-container > div > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > div.nav-folder-children > 
.nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children {
    margin-inline-start: 10px; 
}
.nav-files-container > div > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > 
.nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > div.tree-item-self.nav-folder-title {
    background-color: rgba(var(--Fold6), var(--bgFoldOpacity)); 
    border-radius: 5px; 
    transform:translateX(75px) !important;
    width: calc(100% - 3px) !important;
}
.nav-files-container > div > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > 
.nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > div.tree-item-self.nav-folder-title > div.tree-item-inner {
    margin-left: -66px !important;
}
.nav-files-container > div > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > 
.nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > div.tree-item-self.nav-folder-title > div.tree-item-icon {
    margin-left: -86px !important;
}
.nav-files-container > div > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > 
.nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-file > div.tree-item-self.nav-file-title {
    background-color: rgba(var(--Fold6), var(--bgFoldOpacity)); 
    border-radius: 5px; 
    transform:translateX(75px);
    width: calc(100% - 3px) !important;
}
.nav-files-container > div > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > 
.nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-file > div.tree-item-self.nav-file-title > div.nav-file-title-content {
    margin-left: -86px !important;
}




.nav-files-container > div > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > div.nav-folder-children > 
.nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children {
    margin-inline-start: 10px; 
}
.nav-files-container > div > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > 
.nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > div.tree-item-self.nav-folder-title {
    background-color: rgba(var(--Fold1), var(--bgFoldOpacity)); 
    border-radius: 5px; 
    transform:translateX(90px) !important;
    width: calc(100% - 3px) !important;
}
.nav-files-container > div > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > 
.nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > div.tree-item-self.nav-folder-title > div.tree-item-inner {
    margin-left: -81px !important;
}
.nav-files-container > div > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > 
.nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > div.tree-item-self.nav-folder-title > div.tree-item-icon {
    margin-left: -101px !important;
}
.nav-files-container > div > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > 
.nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-file > div.tree-item-self.nav-file-title {
    background-color: rgba(var(--Fold1), var(--bgFoldOpacity)); 
    border-radius: 5px; 
    transform:translateX(90px);
    width: calc(100% - 3px) !important;
}
.nav-files-container > div > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > 
.nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-file > div.tree-item-self.nav-file-title > div.nav-file-title-content {
    margin-left: -101px !important;
}




.nav-files-container > div > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > div.nav-folder-children > 
.nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children {
    margin-inline-start: 10px; 
}
.nav-files-container > div > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > 
.nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > div.tree-item-self.nav-folder-title {
    background-color: rgba(var(--Fold2), var(--bgFoldOpacity)); 
    border-radius: 5px; 
    transform:translateX(105px) !important;
    width: calc(100% - 3px) !important;
}
.nav-files-container > div > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > 
.nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > div.tree-item-self.nav-folder-title > div.tree-item-inner {
    margin-left: -96px !important;
}
.nav-files-container > div > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > 
.nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > div.tree-item-self.nav-folder-title > div.tree-item-icon {
    margin-left: -116px !important;
}
.nav-files-container > div > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > 
.nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-file > div.tree-item-self.nav-file-title {
    background-color: rgba(var(--Fold2), var(--bgFoldOpacity)); 
    border-radius: 5px; 
    transform:translateX(105px);
    width: calc(100% - 3px) !important;
}
.nav-files-container > div > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > 
.nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-file > div.tree-item-self.nav-file-title > div.nav-file-title-content {
    margin-left: -116px !important;
}