First Commit
This commit is contained in:
231
.obsidian/snippets/Colored Folders for Blue Topaz.css
vendored
Normal file
231
.obsidian/snippets/Colored Folders for Blue Topaz.css
vendored
Normal file
@@ -0,0 +1,231 @@
|
||||
/* Coloured Folders for Blue Topaz
|
||||
|
||||
modified from the snippet created by @Lithou */
|
||||
|
||||
/* 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: #d32f2fCC;
|
||||
--Fold1: #c2185bCC;
|
||||
--Fold2: #7b1fa2CC;
|
||||
--Fold3: #512da8CC;
|
||||
--Fold4: #303f9fCC;
|
||||
--Fold5: #1976d2CC;
|
||||
--Fold6: #0288d1CC;
|
||||
--Fold7: #0097a7CC;
|
||||
--Fold8: #00796bCC;
|
||||
--Fold9: #388e3cCC;
|
||||
--FoldA: #689f38CC;
|
||||
--FoldB: #afb42bCC;
|
||||
--FoldC: #f9ab25CC;
|
||||
--FoldD: #ff8f00CC;
|
||||
--FoldE: #ef6c00CC;
|
||||
--FoldF: #d84315CC;
|
||||
|
||||
/* line styles for nesting indicators */
|
||||
--nestlinesize1: solid;
|
||||
--nestlinestyle1: 2px;
|
||||
--nestlinecolor1: #000;
|
||||
|
||||
--nestlinesize2: solid;
|
||||
--nestlinestyle2: 2px;
|
||||
--nestlinecolor2: #000;
|
||||
|
||||
--nestlinesize3: solid;
|
||||
--nestlinestyle3: 2px;
|
||||
--nestlinecolor3: #000;
|
||||
}
|
||||
|
||||
.theme-dark {
|
||||
--FoldText: #cbcbcb;
|
||||
|
||||
--Fold0: #ff40403d;
|
||||
--Fold1: #f31f7448;
|
||||
--Fold2: #be25ff49;
|
||||
--Fold3: #7337ff67;
|
||||
--Fold4: #2f4bff65;
|
||||
--Fold5: #1372d188;
|
||||
--Fold6: #0289d17e;
|
||||
--Fold7: #0096a77e;
|
||||
--Fold8: #00796b94;
|
||||
--Fold9: #388e3c80;
|
||||
--FoldA: #689f3883;
|
||||
--FoldB: #afb42b81;
|
||||
--FoldC: #f9ab255d;
|
||||
--FoldD: #ff910063;
|
||||
--FoldE: #ef6c0067;
|
||||
--FoldF: #d8421559;
|
||||
}
|
||||
|
||||
.theme-light {
|
||||
--FoldText: #000000;
|
||||
|
||||
--Fold0: #ff9a9a54;
|
||||
--Fold1: #ff8cba69;
|
||||
--Fold2: #da83ff69;
|
||||
--Fold3: #9f76ff65;
|
||||
--Fold4: #677bff5e;
|
||||
--Fold5: #389cff5d;
|
||||
--Fold6: #0eabff5d;
|
||||
--Fold7: #0096a75d;
|
||||
--Fold8: #009b895b;
|
||||
--Fold9: #47b14c62;
|
||||
--FoldA: #689f385e;
|
||||
--FoldB: #afb42b71;
|
||||
--FoldC: #f9ab2565;
|
||||
--FoldD: #ff91006c;
|
||||
--FoldE: #ef6c0069;
|
||||
--FoldF: #d8421560;
|
||||
}
|
||||
|
||||
/* Set up explorer container margins */
|
||||
.nav-files-container{margin: 0px 5px;}
|
||||
|
||||
/* Remove collapse arrow from top level folders */
|
||||
.nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title>.nav-folder-collapse-indicator{display: none;}
|
||||
|
||||
|
||||
/* Top Level Folder Titles */
|
||||
.nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title{
|
||||
color: var(--FoldText);
|
||||
padding-left: 3px;
|
||||
margin-top: 7px; /* space between top level sections */
|
||||
border-radius: 5px 5px 0px 0px;
|
||||
}
|
||||
/* Rounded borders */
|
||||
.nav-folder.mod-root>.nav-folder-children>.nav-folder.is-collapsed>.nav-folder-title{
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
/* General Nav Folder Children (this is the part that expands from each top level folder) */
|
||||
.nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-children{
|
||||
padding-left: 0px;
|
||||
border-top: var(--FoldText) 1px solid;
|
||||
border-radius: 0px 0px 5px 5px;
|
||||
padding-bottom: 12px;
|
||||
}
|
||||
|
||||
.nav-file-title{
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
.nav-file-title-content {
|
||||
color: var(--FoldText);
|
||||
}
|
||||
|
||||
.nav-folder-children .nav-folder-children {
|
||||
margin-left: 0;
|
||||
padding-left: 0;
|
||||
border-left: unset !important;
|
||||
border-radius: 0px;
|
||||
transition: all 400ms ease-in;
|
||||
}
|
||||
|
||||
/* active file increase font size and removes normal highlight marker */
|
||||
.nav-file-title.is-active{
|
||||
background-color: var(--theme-color-translucent-1);
|
||||
}
|
||||
/* Adds hemisphere marker to active file instead */
|
||||
.nav-file-title.is-active::before{
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -1px;
|
||||
left: 0px;
|
||||
height: 2px;
|
||||
width: 100%;
|
||||
background-image: linear-gradient(to right, var(--theme-color), transparent 90%);
|
||||
}
|
||||
|
||||
/* 16 Top level Folders By Starting Digit (0-F)
|
||||
These are set for me by leading number/letter which also ensures they are in the correct order when sorted alphabetically
|
||||
You can change these to match your use case.
|
||||
*/
|
||||
.nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="0"],
|
||||
.nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="0"] + .nav-folder-children{
|
||||
background-color: var(--Fold0);}
|
||||
.nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="1"],
|
||||
.nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="1"] + .nav-folder-children{
|
||||
background-color: var(--Fold1);}
|
||||
.nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="2"],
|
||||
.nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="2"] + .nav-folder-children{
|
||||
background-color: var(--Fold2);}
|
||||
.nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="3"],
|
||||
.nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="3"] + .nav-folder-children{
|
||||
background-color: var(--Fold3);}
|
||||
.nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="4"],
|
||||
.nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="4"] + .nav-folder-children{
|
||||
background-color: var(--Fold4);}
|
||||
.nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="5"],
|
||||
.nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="5"] + .nav-folder-children{
|
||||
background-color: var(--Fold5);}
|
||||
.nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="6"],
|
||||
.nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="6"] + .nav-folder-children{
|
||||
background-color: var(--Fold6);}
|
||||
.nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="7"],
|
||||
.nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="7"] + .nav-folder-children{
|
||||
background-color: var(--Fold7);}
|
||||
.nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="8"],
|
||||
.nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="8"] + .nav-folder-children{
|
||||
background-color: var(--Fold8);}
|
||||
.nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="9"],
|
||||
.nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="9"] + .nav-folder-children{
|
||||
background-color: var(--Fold9);}
|
||||
.nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="A"],
|
||||
.nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="A"] + .nav-folder-children{
|
||||
background-color: var(--FoldA);}
|
||||
.nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="B"],
|
||||
.nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="B"] + .nav-folder-children{
|
||||
background-color: var(--FoldB);}
|
||||
.nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="C"],
|
||||
.nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="C"] + .nav-folder-children{
|
||||
background-color: var(--FoldC);}
|
||||
.nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="D"],
|
||||
.nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="D"] + .nav-folder-children{
|
||||
background-color: var(--FoldD);}
|
||||
.nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="E"],
|
||||
.nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="E"] + .nav-folder-children{
|
||||
background-color: var(--FoldE);}
|
||||
.nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="F"],
|
||||
.nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="F"] + .nav-folder-children{
|
||||
background-color: var(--FoldF);}
|
||||
|
||||
/* Scrollbars eliminated */
|
||||
.workspace-leaf-content[data-type='file-explorer'] ::-webkit-scrollbar{
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
}
|
||||
|
||||
/* Relationship lines for 2nd, 3rd, and 4th level folders */
|
||||
.nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-children>.nav-folder>.nav-folder-children>.nav-file{
|
||||
border-left: var(--nestlinestyle1) var(--nestlinesize1) var(--nestlinecolor1);
|
||||
margin-left: 12px;
|
||||
}
|
||||
.nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-children>.nav-folder>.nav-folder-children>.nav-folder{
|
||||
border-left: var(--nestlinestyle1) var(--nestlinesize1) var(--nestlinecolor1);
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
.nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-children>.nav-folder>.nav-folder-children>.nav-folder>.nav-folder-children>.nav-file{
|
||||
border-left: var(--nestlinestyle2) var(--nestlinesize2) var(--nestlinecolor2);
|
||||
margin-left: 12px;
|
||||
}
|
||||
.nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-children>.nav-folder>.nav-folder-children>.nav-folder>.nav-folder-children>.nav-folder{
|
||||
border-left: var(--nestlinestyle2) var(--nestlinesize2) var(--nestlinecolor2);
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
.nav-folder.mod-root>.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{
|
||||
border-left: var(--nestlinestyle3) var(--nestlinesize3) var(--nestlinecolor3);
|
||||
margin-left: 12px;
|
||||
}
|
||||
.nav-folder.mod-root>.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{
|
||||
border-left: var(--nestlinestyle3) var(--nestlinesize3) var(--nestlinecolor3);
|
||||
margin-left: 12px;
|
||||
}
|
||||
168
.obsidian/snippets/Colored Folders.css
vendored
Normal file
168
.obsidian/snippets/Colored Folders.css
vendored
Normal file
@@ -0,0 +1,168 @@
|
||||
/* 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: #d32f2fCC;
|
||||
--Fold1: #c2185bCC;
|
||||
--Fold2: #7b1fa2CC;
|
||||
--Fold3: #512da8CC;
|
||||
--Fold4: #303f9fCC;
|
||||
--Fold5: #1976d2CC;
|
||||
--Fold6: #0288d1CC;
|
||||
--Fold7: #0097a7CC;
|
||||
--Fold8: #00796bCC;
|
||||
--Fold9: #388e3cCC;
|
||||
--FoldA: #689f38CC;
|
||||
--FoldB: #afb42bCC;
|
||||
--FoldC: #f9ab25CC;
|
||||
--FoldD: #ff8f00CC;
|
||||
--FoldE: #ef6c00CC;
|
||||
--FoldF: #d84315CC;
|
||||
--FoldText: #ccccccFF;
|
||||
/* line styles for nesting indicators */
|
||||
--nestlinesize1: double;
|
||||
--nestlinestyle1: 7px;
|
||||
--nestlinecolor1: #000;
|
||||
|
||||
--nestlinesize2: solid;
|
||||
--nestlinestyle2: 3px;
|
||||
--nestlinecolor2: #000;
|
||||
|
||||
--nestlinesize3: dotted;
|
||||
--nestlinestyle3: 2px;
|
||||
--nestlinecolor3: #000;
|
||||
}
|
||||
|
||||
/* Set up explorer container margins */
|
||||
.nav-files-container{margin: 0px 5px;}
|
||||
|
||||
/* Remove collapse arrow from top level folders */
|
||||
.nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title>.nav-folder-collapse-indicator{display: none;}
|
||||
|
||||
|
||||
/* Top Level Folder Titles */
|
||||
.nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title{
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
font-size: 18px;
|
||||
color: var(--FoldText);
|
||||
padding-left: 3px;
|
||||
margin-top: 7px; /* space between top level sections */
|
||||
border-radius: 20px 20px 0px 0px;
|
||||
}
|
||||
/* Rounded borders */
|
||||
.nav-folder.mod-root>.nav-folder-children>.nav-folder.is-collapsed>.nav-folder-title{
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
/* General Nav Folder Children (this is the part that expands from each top level folder) */
|
||||
.nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-children{
|
||||
padding-left: 0px;
|
||||
border-top: var(--FoldText) 1px solid;
|
||||
border-radius: 0px 0px 20px 20px;
|
||||
padding-bottom: 12px;
|
||||
}
|
||||
|
||||
.nav-file-title{
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
/* active file increase font size and removes normal highlight marker */
|
||||
.nav-file-title.is-active{
|
||||
background-color: #00000000;
|
||||
font-size: 105%;}
|
||||
/* Adds hemisphere marker to active file instead */
|
||||
.nav-file-title.is-active::before{
|
||||
content: "";
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 50%;
|
||||
background-color: var(--FoldText);
|
||||
position: absolute;
|
||||
left: -9px;
|
||||
margin-top: 4px;}
|
||||
|
||||
|
||||
/* 16 Top level Folders By Starting Digit (0-F)
|
||||
These are set for me by leading number/letter which also ensures they are in the correct order when sorted alphabetically
|
||||
You can change these to match your use case.
|
||||
*/
|
||||
.nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="0"],
|
||||
.nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="0"] + .nav-folder-children{
|
||||
background-color: var(--Fold0);}
|
||||
.nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="1"],
|
||||
.nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="1"] + .nav-folder-children{
|
||||
background-color: var(--Fold1);}
|
||||
.nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="2"],
|
||||
.nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="2"] + .nav-folder-children{
|
||||
background-color: var(--Fold2);}
|
||||
.nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="3"],
|
||||
.nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="3"] + .nav-folder-children{
|
||||
background-color: var(--Fold3);}
|
||||
.nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="4"],
|
||||
.nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="4"] + .nav-folder-children{
|
||||
background-color: var(--Fold4);}
|
||||
.nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="5"],
|
||||
.nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="5"] + .nav-folder-children{
|
||||
background-color: var(--Fold5);}
|
||||
.nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="6"],
|
||||
.nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="6"] + .nav-folder-children{
|
||||
background-color: var(--Fold6);}
|
||||
.nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="7"],
|
||||
.nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="7"] + .nav-folder-children{
|
||||
background-color: var(--Fold7);}
|
||||
.nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="8"],
|
||||
.nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="8"] + .nav-folder-children{
|
||||
background-color: var(--Fold8);}
|
||||
.nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="9"],
|
||||
.nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="9"] + .nav-folder-children{
|
||||
background-color: var(--Fold9);}
|
||||
.nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="A"],
|
||||
.nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="A"] + .nav-folder-children{
|
||||
background-color: var(--FoldA);}
|
||||
.nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="B"],
|
||||
.nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="B"] + .nav-folder-children{
|
||||
background-color: var(--FoldB);}
|
||||
.nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="C"],
|
||||
.nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="C"] + .nav-folder-children{
|
||||
background-color: var(--FoldC);}
|
||||
.nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="D"],
|
||||
.nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="D"] + .nav-folder-children{
|
||||
background-color: var(--FoldD);}
|
||||
.nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="E"],
|
||||
.nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="E"] + .nav-folder-children{
|
||||
background-color: var(--FoldE);}
|
||||
.nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="F"],
|
||||
.nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="F"] + .nav-folder-children{
|
||||
background-color: var(--FoldF);}
|
||||
|
||||
/* Scrollbars eliminated */
|
||||
::-webkit-scrollbar{
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
}
|
||||
|
||||
/* Relationship lines for 2nd, 3rd, and 4th level folders */
|
||||
.nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-children>.nav-folder>.nav-folder-children>.nav-file{
|
||||
border-left: var(--nestlinestyle1) var(--nestlinesize1) var(--nestlinecolor1);
|
||||
}
|
||||
.nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-children>.nav-folder>.nav-folder-children>.nav-folder{
|
||||
border-left: var(--nestlinestyle1) var(--nestlinesize1) var(--nestlinecolor1);
|
||||
}
|
||||
|
||||
.nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-children>.nav-folder>.nav-folder-children>.nav-folder>.nav-folder-children>.nav-file{
|
||||
border-left: var(--nestlinestyle2) var(--nestlinesize2) var(--nestlinecolor2);}
|
||||
.nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-children>.nav-folder>.nav-folder-children>.nav-folder>.nav-folder-children>.nav-folder{
|
||||
border-left: var(--nestlinestyle2) var(--nestlinesize2) var(--nestlinecolor2);
|
||||
}
|
||||
|
||||
.nav-folder.mod-root>.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{
|
||||
border-left: var(--nestlinestyle3) var(--nestlinesize3) var(--nestlinecolor3);
|
||||
}
|
||||
.nav-folder.mod-root>.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{
|
||||
border-left: var(--nestlinestyle3) var(--nestlinesize3) var(--nestlinecolor3);
|
||||
}
|
||||
193
.obsidian/snippets/Iterative Rainbow Folder Backgrounds.css
vendored
Normal file
193
.obsidian/snippets/Iterative Rainbow Folder Backgrounds.css
vendored
Normal file
@@ -0,0 +1,193 @@
|
||||
/* 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 Background Colors */
|
||||
|
||||
.nav-folder-children .nav-folder:nth-child(9n+2) .nav-folder-title,
|
||||
.nav-folder-children .nav-folder .nav-folder:nth-child(9n+2) .nav-folder-title,
|
||||
.nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(9n+2) .nav-folder-title,
|
||||
.nav-folder-children .nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(9n+2) .nav-folder-title {
|
||||
background-color: var(--Fold1);
|
||||
border-radius: 5px; margin-top: 2px;
|
||||
}
|
||||
.nav-folder-children .nav-folder:nth-child(9n+3) .nav-folder-title,
|
||||
.nav-folder-children .nav-folder .nav-folder:nth-child(9n+3) .nav-folder-title,
|
||||
.nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(9n+3) .nav-folder-title,
|
||||
.nav-folder-children .nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(9n+3) .nav-folder-title {
|
||||
background-color: var(--Fold2);
|
||||
border-radius: 5px; margin-top: 2px;
|
||||
}
|
||||
.nav-folder-children .nav-folder:nth-child(9n+4) .nav-folder-title,
|
||||
.nav-folder-children .nav-folder .nav-folder:nth-child(9n+4) .nav-folder-title,
|
||||
.nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(9n+4) .nav-folder-title,
|
||||
.nav-folder-children .nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(9n+4) .nav-folder-title {
|
||||
background-color: var(--Fold3);
|
||||
border-radius: 5px; margin-top: 2px;
|
||||
}
|
||||
.nav-folder-children .nav-folder:nth-child(9n+5) .nav-folder-title,
|
||||
.nav-folder-children .nav-folder .nav-folder:nth-child(9n+5) .nav-folder-title,
|
||||
.nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(9n+5) .nav-folder-title,
|
||||
.nav-folder-children .nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(9n+5) .nav-folder-title {
|
||||
background-color: var(--Fold4);
|
||||
border-radius: 5px; margin-top: 2px;
|
||||
}
|
||||
.nav-folder-children .nav-folder:nth-child(9n+6) .nav-folder-title,
|
||||
.nav-folder-children .nav-folder .nav-folder:nth-child(9n+6) .nav-folder-title,
|
||||
.nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(9n+6) .nav-folder-title,
|
||||
.nav-folder-children .nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(9n+6) .nav-folder-title {
|
||||
background-color: var(--Fold5);
|
||||
border-radius: 5px; margin-top: 2px;
|
||||
}
|
||||
.nav-folder-children .nav-folder:nth-child(9n+7) .nav-folder-title,
|
||||
.nav-folder-children .nav-folder .nav-folder:nth-child(9n+7) .nav-folder-title,
|
||||
.nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(9n+7) .nav-folder-title,
|
||||
.nav-folder-children .nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(9n+7) .nav-folder-title {
|
||||
background-color: var(--Fold6);
|
||||
border-radius: 5px; margin-top: 2px;
|
||||
}
|
||||
.nav-folder-children .nav-folder:nth-child(9n+8) .nav-folder-title,
|
||||
.nav-folder-children .nav-folder .nav-folder:nth-child(9n+8) .nav-folder-title,
|
||||
.nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(9n+8) .nav-folder-title,
|
||||
.nav-folder-children .nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(9n+8) .nav-folder-title {
|
||||
background-color: var(--Fold7);
|
||||
border-radius: 5px; margin-top: 2px;
|
||||
}
|
||||
.nav-folder-children .nav-folder:nth-child(9n+9) .nav-folder-title,
|
||||
.nav-folder-children .nav-folder .nav-folder:nth-child(9n+9) .nav-folder-title,
|
||||
.nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(9n+9) .nav-folder-title,
|
||||
.nav-folder-children .nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(9n+9) .nav-folder-title {
|
||||
background-color: var(--Fold8);
|
||||
border-radius: 5px; margin-top: 2px;
|
||||
}
|
||||
.nav-folder-children .nav-folder:nth-child(9n+10) .nav-folder-title,
|
||||
.nav-folder-children .nav-folder .nav-folder:nth-child(9n+10) .nav-folder-title,
|
||||
.nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(9n+10) .nav-folder-title,
|
||||
.nav-folder-children .nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(9n+10) .nav-folder-title {
|
||||
background-color: var(--Fold9);
|
||||
border-radius: 5px; margin-top: 2px;
|
||||
}
|
||||
|
||||
|
||||
/* the following is modified from the Blue Topaz Themme */
|
||||
|
||||
/*----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::after {
|
||||
position: absolute;
|
||||
content : "↓";
|
||||
left: -3px;
|
||||
top: 0px;
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
transition: transform 10ms linear 0s;
|
||||
}
|
||||
|
||||
.nav-folder-collapse-indicator svg {
|
||||
display: none;
|
||||
height: 7px;
|
||||
width: 7px;
|
||||
}
|
||||
Reference in New Issue
Block a user