An extension to @Lithou’s coloured folders for those interested
/* Coloured Folders
a CSS snippet by Lithou
This will allow the colouring of the top level folders into sections that "drop down" when opened.
This is currently set to be the same colour regardless of theme, but you can change that by copy/pasting the colors from the root section into light/dark theme then changing them according to preference.
The colours are rainbow coloured and 16 in number by default. They are shades such that white/lightgrey text shows up the best. Some have a bit let contrast (the lighter blue and the yellow) but should still be visible. Again, change them however you would like.
*/
:root{
--Fold0: #ff3b8d;
--Fold1: #ff4647;
--Fold2: #d57300;
--Fold3: #9c8b00;
--Fold4: #5c9b00;
--Fold5: #00a05a;
--Fold6: #009e8c;
--Fold7: #0098a9;
--Fold8: #0092c5;
--Fold9: #0089fc;
--FoldA: #9b70ff;
--FoldB: #f911e0;
--FoldC: #de0051;
--FoldD: #cd3c00;
--FoldE: #926700;
--FoldF: #677600;
--FoldG: #008217;
--FoldH: #007f5f;
--FoldI: #007a7b;
--FoldJ: #007590;
--FoldK: #0071af;
--FoldL: #0061fc;
--FoldM: #b01fe3;
--FoldN: #800040;
--FoldO: #752100;
--FoldP: #523800;
--FoldQ: #394100;
--FoldR: #004825;
--FoldS: #004344;
--FoldT: #003b5e;
--FoldU: #2d0fbf;
--FoldV: #740068;
--FoldW: #222222;
--FoldX: #342a38;
--FoldY: #062800;
--FoldZ: #0b0074;
--FoldText: #00a000;
}
/* Set up explorer container margins */
.nav-files-container{margin: 0px 5px;}
/* Top Level Folder Titles */
.nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title{
font-size: 15px;
padding-left: 5px;
margin-top: 2px; /* space between top level sections */
}
/* collapse arrow for folders */
.nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title>.nav-folder-collapse-indicator{
position: absolute;
left: 21px;
top: 5px;
}
.nav-file-title{
padding-left: 5px;
}
/* active file increase font size and removes normal highlight marker */
.nav-file-title.is-active{
font-weight: bold;
font-style: italic;
}
/* Folder Background Colors */
.nav-folder-children .nav-folder:nth-child(35n+2) .nav-folder-title,
.nav-folder-children .nav-folder .nav-folder:nth-child(35n+2) .nav-folder-title,
.nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(35n+2) .nav-folder-title,
.nav-folder-children .nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(35n+2) .nav-folder-title {
background-color: var(--Fold1);
border-radius: 5px; margin-top: 1px;
}
.nav-folder-children .nav-folder:nth-child(35n+3) .nav-folder-title,
.nav-folder-children .nav-folder .nav-folder:nth-child(35n+3) .nav-folder-title,
.nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(35n+3) .nav-folder-title,
.nav-folder-children .nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(35n+3) .nav-folder-title {
background-color: var(--Fold2);
border-radius: 5px; margin-top: 1px;
}
.nav-folder-children .nav-folder:nth-child(35n+4) .nav-folder-title,
.nav-folder-children .nav-folder .nav-folder:nth-child(35n+4) .nav-folder-title,
.nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(35n+4) .nav-folder-title,
.nav-folder-children .nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(35n+4) .nav-folder-title {
background-color: var(--Fold3);
border-radius: 5px; margin-top: 1px;
}
.nav-folder-children .nav-folder:nth-child(35n+5) .nav-folder-title,
.nav-folder-children .nav-folder .nav-folder:nth-child(35n+5) .nav-folder-title,
.nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(35n+5) .nav-folder-title,
.nav-folder-children .nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(35n+5) .nav-folder-title {
background-color: var(--Fold4);
border-radius: 5px; margin-top: 1px;
}
.nav-folder-children .nav-folder:nth-child(35n+6) .nav-folder-title,
.nav-folder-children .nav-folder .nav-folder:nth-child(35n+6) .nav-folder-title,
.nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(35n+6) .nav-folder-title,
.nav-folder-children .nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(35n+6) .nav-folder-title {
background-color: var(--Fold5);
border-radius: 5px; margin-top: 1px;
}
.nav-folder-children .nav-folder:nth-child(35n+7) .nav-folder-title,
.nav-folder-children .nav-folder .nav-folder:nth-child(35n+7) .nav-folder-title,
.nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(35n+7) .nav-folder-title,
.nav-folder-children .nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(35n+7) .nav-folder-title {
background-color: var(--Fold6);
border-radius: 5px; margin-top: 1px;
}
.nav-folder-children .nav-folder:nth-child(35n+8) .nav-folder-title,
.nav-folder-children .nav-folder .nav-folder:nth-child(35n+8) .nav-folder-title,
.nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(35n+8) .nav-folder-title,
.nav-folder-children .nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(35n+8) .nav-folder-title {
background-color: var(--Fold7);
border-radius: 5px; margin-top: 1px;
}
.nav-folder-children .nav-folder:nth-child(35n+9) .nav-folder-title,
.nav-folder-children .nav-folder .nav-folder:nth-child(35n+9) .nav-folder-title,
.nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(35n+9) .nav-folder-title,
.nav-folder-children .nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(35n+9) .nav-folder-title {
background-color: var(--Fold8);
border-radius: 5px; margin-top: 1px;
}
.nav-folder-children .nav-folder:nth-child(35n+10) .nav-folder-title,
.nav-folder-children .nav-folder .nav-folder:nth-child(35n+10) .nav-folder-title,
.nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(35n+10) .nav-folder-title,
.nav-folder-children .nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(35n+10) .nav-folder-title {
background-color: var(--Fold9);
border-radius: 5px; margin-top: 1px;
}
.nav-folder-children .nav-folder:nth-child(35n+11) .nav-folder-title,
.nav-folder-children .nav-folder .nav-folder:nth-child(35n+11) .nav-folder-title,
.nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(35n+11) .nav-folder-title,
.nav-folder-children .nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(35n+11) .nav-folder-title {
background-color: var(--FoldA);
border-radius: 5px; margin-top: 1px;
}
.nav-folder-children .nav-folder:nth-child(35n+12) .nav-folder-title,
.nav-folder-children .nav-folder .nav-folder:nth-child(35n+12) .nav-folder-title,
.nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(35n+12) .nav-folder-title,
.nav-folder-children .nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(35n+12) .nav-folder-title {
background-color: var(--FoldB);
border-radius: 5px; margin-top: 1px;
}
.nav-folder-children .nav-folder:nth-child(35n+13) .nav-folder-title,
.nav-folder-children .nav-folder .nav-folder:nth-child(35n+13) .nav-folder-title,
.nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(35n+13) .nav-folder-title,
.nav-folder-children .nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(35n+13) .nav-folder-title {
background-color: var(--FoldC);
border-radius: 5px; margin-top: 1px;
}
.nav-folder-children .nav-folder:nth-child(35n+14) .nav-folder-title,
.nav-folder-children .nav-folder .nav-folder:nth-child(35n+14) .nav-folder-title,
.nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(35n+14) .nav-folder-title,
.nav-folder-children .nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(35n+14) .nav-folder-title {
background-color: var(--FoldD);
border-radius: 5px; margin-top: 1px;
}
.nav-folder-children .nav-folder:nth-child(35n+15) .nav-folder-title,
.nav-folder-children .nav-folder .nav-folder:nth-child(35n+15) .nav-folder-title,
.nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(35n+15) .nav-folder-title,
.nav-folder-children .nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(35n+15) .nav-folder-title {
background-color: var(--FoldE);
border-radius: 5px; margin-top: 1px;
}
.nav-folder-children .nav-folder:nth-child(35n+16) .nav-folder-title,
.nav-folder-children .nav-folder .nav-folder:nth-child(35n+16) .nav-folder-title,
.nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(35n+16) .nav-folder-title,
.nav-folder-children .nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(35n+16) .nav-folder-title {
background-color: var(--FoldF);
border-radius: 5px; margin-top: 1px;
}
.nav-folder-children .nav-folder:nth-child(35n+17) .nav-folder-title,
.nav-folder-children .nav-folder .nav-folder:nth-child(35n+17) .nav-folder-title,
.nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(35n+17) .nav-folder-title,
.nav-folder-children .nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(35n+17) .nav-folder-title {
background-color: var(--FoldG);
border-radius: 5px; margin-top: 1px;
}
.nav-folder-children .nav-folder:nth-child(35n+18) .nav-folder-title,
.nav-folder-children .nav-folder .nav-folder:nth-child(35n+18) .nav-folder-title,
.nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(35n+18) .nav-folder-title,
.nav-folder-children .nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(35n+18) .nav-folder-title {
background-color: var(--FoldH);
border-radius: 5px; margin-top: 1px;
}
.nav-folder-children .nav-folder:nth-child(35n+19) .nav-folder-title,
.nav-folder-children .nav-folder .nav-folder:nth-child(35n+19) .nav-folder-title,
.nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(35n+19) .nav-folder-title,
.nav-folder-children .nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(35n+19) .nav-folder-title {
background-color: var(--FoldI);
border-radius: 5px; margin-top: 1px;
}
.nav-folder-children .nav-folder:nth-child(35n+20) .nav-folder-title,
.nav-folder-children .nav-folder .nav-folder:nth-child(35n+20) .nav-folder-title,
.nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(35n+20) .nav-folder-title,
.nav-folder-children .nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(35n+20) .nav-folder-title {
background-color: var(--FoldJ);
border-radius: 5px; margin-top: 1px;
}
.nav-folder-children .nav-folder:nth-child(35n+21) .nav-folder-title,
.nav-folder-children .nav-folder .nav-folder:nth-child(35n+21) .nav-folder-title,
.nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(35n+21) .nav-folder-title,
.nav-folder-children .nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(35n+21) .nav-folder-title {
background-color: var(--FoldK);
border-radius: 5px; margin-top: 1px;
}
.nav-folder-children .nav-folder:nth-child(35n+22) .nav-folder-title,
.nav-folder-children .nav-folder .nav-folder:nth-child(35n+22) .nav-folder-title,
.nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(35n+22) .nav-folder-title,
.nav-folder-children .nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(35n+22) .nav-folder-title {
background-color: var(--FoldL);
border-radius: 5px; margin-top: 1px;
}
.nav-folder-children .nav-folder:nth-child(35n+23) .nav-folder-title,
.nav-folder-children .nav-folder .nav-folder:nth-child(35n+23) .nav-folder-title,
.nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(35n+23) .nav-folder-title,
.nav-folder-children .nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(35n+23) .nav-folder-title {
background-color: var(--FoldM);
border-radius: 5px; margin-top: 1px;
}
.nav-folder-children .nav-folder:nth-child(35n+24) .nav-folder-title,
.nav-folder-children .nav-folder .nav-folder:nth-child(35n+24) .nav-folder-title,
.nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(35n+24) .nav-folder-title,
.nav-folder-children .nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(35n+24) .nav-folder-title {
background-color: var(--FoldN);
border-radius: 5px; margin-top: 1px;
}
.nav-folder-children .nav-folder:nth-child(35n+25) .nav-folder-title,
.nav-folder-children .nav-folder .nav-folder:nth-child(35n+25) .nav-folder-title,
.nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(35n+25) .nav-folder-title,
.nav-folder-children .nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(35n+25) .nav-folder-title {
background-color: var(--FoldO);
border-radius: 5px; margin-top: 1px;
}
.nav-folder-children .nav-folder:nth-child(35n+26) .nav-folder-title,
.nav-folder-children .nav-folder .nav-folder:nth-child(35n+26) .nav-folder-title,
.nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(35n+26) .nav-folder-title,
.nav-folder-children .nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(35n+26) .nav-folder-title {
background-color: var(--FoldP);
border-radius: 5px; margin-top: 1px;
}
.nav-folder-children .nav-folder:nth-child(35n+27) .nav-folder-title,
.nav-folder-children .nav-folder .nav-folder:nth-child(35n+27) .nav-folder-title,
.nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(35n+27) .nav-folder-title,
.nav-folder-children .nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(35n+27) .nav-folder-title {
background-color: var(--FoldQ);
border-radius: 5px; margin-top: 1px;
}
.nav-folder-children .nav-folder:nth-child(35n+28) .nav-folder-title,
.nav-folder-children .nav-folder .nav-folder:nth-child(35n+28) .nav-folder-title,
.nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(35n+28) .nav-folder-title,
.nav-folder-children .nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(35n+28) .nav-folder-title {
background-color: var(--FoldR);
border-radius: 5px; margin-top: 1px;
}
.nav-folder-children .nav-folder:nth-child(35n+29) .nav-folder-title,
.nav-folder-children .nav-folder .nav-folder:nth-child(35n+29) .nav-folder-title,
.nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(35n+29) .nav-folder-title,
.nav-folder-children .nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(35n+29) .nav-folder-title {
background-color: var(--FoldS);
border-radius: 5px; margin-top: 1px;
}
.nav-folder-children .nav-folder:nth-child(35n+30) .nav-folder-title,
.nav-folder-children .nav-folder .nav-folder:nth-child(35n+30) .nav-folder-title,
.nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(35n+30) .nav-folder-title,
.nav-folder-children .nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(35n+30) .nav-folder-title {
background-color: var(--FoldT);
border-radius: 5px; margin-top: 1px;
}
.nav-folder-children .nav-folder:nth-child(35n+31) .nav-folder-title,
.nav-folder-children .nav-folder .nav-folder:nth-child(35n+31) .nav-folder-title,
.nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(35n+31) .nav-folder-title,
.nav-folder-children .nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(35n+31) .nav-folder-title {
background-color: var(--FoldU);
border-radius: 5px; margin-top: 1px;
}
.nav-folder-children .nav-folder:nth-child(35n+32) .nav-folder-title,
.nav-folder-children .nav-folder .nav-folder:nth-child(35n+32) .nav-folder-title,
.nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(35n+32) .nav-folder-title,
.nav-folder-children .nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(35n+32) .nav-folder-title {
background-color: var(--FoldV);
border-radius: 5px; margin-top: 1px;
}
.nav-folder-children .nav-folder:nth-child(35n+33) .nav-folder-title,
.nav-folder-children .nav-folder .nav-folder:nth-child(35n+33) .nav-folder-title,
.nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(35n+33) .nav-folder-title,
.nav-folder-children .nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(35n+33) .nav-folder-title {
background-color: var(--FoldW);
border-radius: 5px; margin-top: 1px;
}
.nav-folder-children .nav-folder:nth-child(35n+34) .nav-folder-title,
.nav-folder-children .nav-folder .nav-folder:nth-child(35n+34) .nav-folder-title,
.nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(35n+34) .nav-folder-title,
.nav-folder-children .nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(35n+34) .nav-folder-title {
background-color: var(--FoldX);
border-radius: 5px; margin-top: 1px;
}
.nav-folder-children .nav-folder:nth-child(35n+35) .nav-folder-title,
.nav-folder-children .nav-folder .nav-folder:nth-child(35n+35) .nav-folder-title,
.nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(35n+35) .nav-folder-title,
.nav-folder-children .nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(35n+35) .nav-folder-title {
background-color: var(--FoldY);
border-radius: 5px; margin-top: 1px;
}
.nav-folder-children .nav-folder:nth-child(35n+36) .nav-folder-title,
.nav-folder-children .nav-folder .nav-folder:nth-child(35n+36) .nav-folder-title,
.nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(35n+36) .nav-folder-title,
.nav-folder-children .nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(35n+36) .nav-folder-title {
background-color: var(--FoldZ);
border-radius: 5px; margin-top: 1px;
}
/* the following is modified from the Blue Topaz Themme */
/*----file explorer smaller fonts & line height----*/
.nav-file-title,
.nav-folder-title {
font-size: 0.9em;
font-family: 'Saira';
line-height: 1.2;
cursor: pointer;
position: relative;
border-width: 1px;
border-style: solid;
border-color: transparent;
border-image: initial;
border-radius: 0px;
padding: 1px 5px 0px 16px;
color:floralwhite;
display: flex;
align-items: baseline;
flex-direction: row;
}
.nav-file-title {
padding: 1px 5px 0px 4px;
color:rgb(62, 0, 104);
font-family: 'Saira';
font-weight:500;
}
.nav-folder-title {
font-weight: 900;
color:floralwhite;
opacity: 0.9;
}
/*rename*/
.nav-file-title-content.is-being-renamed,
.nav-folder-title-content.is-being-renamed {
cursor: text;
border-color: transparent;
background-color: rgb(116, 116, 116);
color:floralwhite;
}
/*---- nav arrows adjust location ----*/
.nav-folder-collapse-indicator {
position: absolute;
left: 21px;
top: 3px;
transition: transform 20ms linear 0s;
}
.nav-folder-collapse-indicator::after {
position: absolute;
content : "↓";
left: -3px;
top: 0px;
font-size: 20px;
color:rgb(255, 0, 0);
font-weight: 700;
transition: transform 10ms linear 0s;
display:none;
}
.nav-folder-collapse-indicator svg {
display: none;
height: 7px;
width: 7px;
}
.nav-folder-title-content::BEFORE {
display: none;
}
.nav-folder-title-content {
font-size: 1rem;
font-weight:bold;
/*color: rgb(0, 0, 0);*/
line-height: 1.1rem;
}
.nav-file-title-content {
font-size: 0.9rem;
line-height: 0.95rem;
font-weight: 500;
}
.nav-folder-title-content,
.nav-file-title-content {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}