197 lines
7.5 KiB
CSS
197 lines
7.5 KiB
CSS
/* 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{
|
|
/* folder colours */
|
|
--Fold0: #d32f2f;
|
|
--Fold1: #f39b9b;
|
|
--Fold2: #f0ae59;
|
|
--Fold3: #f1ca5d;
|
|
--Fold4: #9dcd78;
|
|
--Fold5: #8ab6e2;
|
|
--Fold6: #aaa5db;
|
|
--Fold7: #d399cf;
|
|
--Fold8: #cda485;
|
|
--Fold9: #b9c0c7;
|
|
--FoldA: #f0aaaa;
|
|
--FoldB: #f1b86f;
|
|
--FoldC: #7acc93;
|
|
--FoldD: #87c9d9;
|
|
--FoldE: #96abde;
|
|
--FoldF: #eb9fc9;
|
|
--FoldText: #000000;
|
|
/* line styles for nesting indicators */
|
|
|
|
}
|
|
|
|
|
|
/* 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: 18px;
|
|
color: var(--FoldText);
|
|
padding-left: 20px;
|
|
margin-top: 5px; /* 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{
|
|
color: #000000;
|
|
font-weight: bold;}
|
|
|
|
|
|
|
|
/* Folder Icon Colors */
|
|
|
|
.nav-folder-children .nav-folder:nth-child(9n+2) .nav-folder-collapse-indicator,
|
|
.nav-folder-children .nav-folder .nav-folder:nth-child(9n+2) .nav-folder-collapse-indicator,
|
|
.nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(9n+2) .nav-folder-collapse-indicator,
|
|
.nav-folder-children .nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(9n+2) .nav-folder-collapse-indicator {
|
|
color: var(--Fold1);
|
|
border-radius: 5px; margin-top: 2px;
|
|
}
|
|
.nav-folder-children .nav-folder:nth-child(9n+3) .nav-folder-collapse-indicator,
|
|
.nav-folder-children .nav-folder .nav-folder:nth-child(9n+3) .nav-folder-collapse-indicator,
|
|
.nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(9n+3) .nav-folder-collapse-indicator,
|
|
.nav-folder-children .nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(9n+3) .nav-folder-collapse-indicator {
|
|
color: var(--Fold2);
|
|
border-radius: 5px; margin-top: 2px;
|
|
}
|
|
.nav-folder-children .nav-folder:nth-child(9n+4) .nav-folder-collapse-indicator,
|
|
.nav-folder-children .nav-folder .nav-folder:nth-child(9n+4) .nav-folder-collapse-indicator,
|
|
.nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(9n+4) .nav-folder-collapse-indicator,
|
|
.nav-folder-children .nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(9n+4) .nav-folder-collapse-indicator {
|
|
color: var(--Fold3);
|
|
border-radius: 5px; margin-top: 2px;
|
|
}
|
|
.nav-folder-children .nav-folder:nth-child(9n+5) .nav-folder-collapse-indicator,
|
|
.nav-folder-children .nav-folder .nav-folder:nth-child(9n+5) .nav-folder-collapse-indicator,
|
|
.nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(9n+5) .nav-folder-collapse-indicator,
|
|
.nav-folder-children .nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(9n+5) .nav-folder-collapse-indicator {
|
|
color: var(--Fold4);
|
|
border-radius: 5px; margin-top: 2px;
|
|
}
|
|
.nav-folder-children .nav-folder:nth-child(9n+6) .nav-folder-collapse-indicator,
|
|
.nav-folder-children .nav-folder .nav-folder:nth-child(9n+6) .nav-folder-collapse-indicator,
|
|
.nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(9n+6) .nav-folder-collapse-indicator,
|
|
.nav-folder-children .nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(9n+6) .nav-folder-collapse-indicator {
|
|
color: var(--Fold5);
|
|
border-radius: 5px; margin-top: 2px;
|
|
}
|
|
.nav-folder-children .nav-folder:nth-child(9n+7) .nav-folder-collapse-indicator,
|
|
.nav-folder-children .nav-folder .nav-folder:nth-child(9n+7) .nav-folder-collapse-indicator,
|
|
.nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(9n+7) .nav-folder-collapse-indicator,
|
|
.nav-folder-children .nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(9n+7) .nav-folder-collapse-indicator {
|
|
color: var(--Fold6);
|
|
border-radius: 5px; margin-top: 2px;
|
|
}
|
|
.nav-folder-children .nav-folder:nth-child(9n+8) .nav-folder-collapse-indicator,
|
|
.nav-folder-children .nav-folder .nav-folder:nth-child(9n+8) .nav-folder-collapse-indicator,
|
|
.nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(9n+8) .nav-folder-collapse-indicator,
|
|
.nav-folder-children .nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(9n+8) .nav-folder-collapse-indicator {
|
|
color: var(--Fold7);
|
|
border-radius: 5px; margin-top: 2px;
|
|
}
|
|
.nav-folder-children .nav-folder:nth-child(9n+9) .nav-folder-collapse-indicator,
|
|
.nav-folder-children .nav-folder .nav-folder:nth-child(9n+9) .nav-folder-collapse-indicator,
|
|
.nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(9n+9) .nav-folder-collapse-indicator,
|
|
.nav-folder-children .nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(9n+9) .nav-folder-collapse-indicator {
|
|
color: var(--Fold8);
|
|
border-radius: 5px; margin-top: 2px;
|
|
}
|
|
.nav-folder-children .nav-folder:nth-child(9n+10) .nav-folder-collapse-indicator,
|
|
.nav-folder-children .nav-folder .nav-folder:nth-child(9n+10) .nav-folder-collapse-indicator,
|
|
.nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(9n+10) .nav-folder-collapse-indicator,
|
|
.nav-folder-children .nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(9n+10) .nav-folder-collapse-indicator {
|
|
color: var(--Fold9);
|
|
border-radius: 5px; margin-top: 2px;
|
|
}
|
|
|
|
|
|
/* the following is modified from the Blue Topaz Themme */
|
|
|
|
.nav-folder-collapse-indicator::after {
|
|
position: absolute;
|
|
content: "🖿";
|
|
left: -8px;
|
|
top: -1px;
|
|
font-size: 15px;
|
|
font-weight: strong;
|
|
opacity: .8;
|
|
transform: translateX(-0px) translateY(0px) rotate(
|
|
0deg
|
|
);
|
|
transition: transform 10ms linear 0s;
|
|
}
|
|
|
|
/*----file explorer smaller fonts & line height----*/
|
|
.nav-file-title,
|
|
.nav-folder-title {
|
|
font-size: var(--font-size-folder-and-file);
|
|
font-family: var(--font-family-folder-file-title);
|
|
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: var(--text-muted);
|
|
display: flex;
|
|
align-items: baseline;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.nav-file-title {
|
|
padding: 1px 5px 0px 4px;
|
|
}
|
|
|
|
.nav-folder-title {
|
|
font-weight: 600;
|
|
color: var(--text-normal);
|
|
opacity: 0.8;
|
|
}
|
|
|
|
/*rename*/
|
|
.nav-file-title-content.is-being-renamed,
|
|
.nav-folder-title-content.is-being-renamed {
|
|
cursor: text;
|
|
border-color: transparent;
|
|
background-color: white;
|
|
color: black;
|
|
}
|
|
|
|
/*---- nav arrows adjust location ----*/
|
|
.nav-folder-collapse-indicator {
|
|
position: absolute;
|
|
left: 21px;
|
|
top: 3px;
|
|
transition: transform 20ms linear 0s;
|
|
}
|
|
|
|
.nav-folder-collapse-indicator svg {
|
|
display: none;
|
|
height: 7px;
|
|
width: 7px;
|
|
} |