4
fileTree_2019-01_update.css
source link: https://gist.github.com/Lightfire228/39dc2cf403237a190e79a000912691b2
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
fileTree_2019-01_update.css · GitHub
As of the June 2021 Update, this no longer works. I have decided not to update the gist, and just use the built in indentation guides. Feel free to link updates in the comments
Credit goes to Samdenty for installation instructions. I've made a copy here for convienience.
How to install
Custom CSS plugin
Install the custom CSS plugin, then make a file on your computer that will hold your custom CSS, I like to make one in my home directory called ~/.vscodestyles.css and then add the CSS into it.
Once done, open your command palette and select enable custom CSS and JS
ScreenshotManually editing workbench.main.css
Open up C:\Program Files\Microsoft VS Code\resources\app\out\vs\workbench\workbench.main.css in a text edit and then add the CSS into it.
What does it do
It adds the missing tree functionality to VSCode
Author
Fixed line disappearing weirdness caused when focusing or selecting a list row.
I'm not the best with css so, if z-index isn't the best way to solve this issue, ¯\_(ツ)_/¯
Author
Edit: this is no longer necessary with the new indentation variables
If you play with this, you can comment out the monaco-tl-twistie rule (lines 15-17). I didn't know that setting existed when I fixed the css (and with the indentation guides, I prefer a tighter indentation than setting that to 0)
Tweaked this a bit to make more things calculate off of a new --indent variable.
/* Source 1: https://gist.github.com/jakewtaylor/e92acd697409e53a73ebf8e0145d4c28 */
/* Source 2: https://gist.github.com/samdenty/b96f4df576d05cb123248f8ebfa899b6 */
/* File URI: file:///C:/Path/to/file/style.css */
/* Github Issue: https://github.com/Microsoft/vscode/issues/17777 */
:root {
/** Indentation level **/
--indent: 25px;
/** Opacity of the lines whilst not hovered **/
--tree-opacity: 0.1;
/** Opacity of the lines on hover **/
--tree-opacity-hover: 0.1;
/** Color of the lines **/
--tree-color: rgb(255, 255, 255);
/** Transition Duration */
--transition-duration: 100ms;
}
/* Not needed if you use this: https://github.com/Microsoft/vscode/issues/17777#issuecomment-462653229 */
.explorer-folders-view .monaco-tl-twistie {
margin-left: 0px !important;
}
.explorer-folders-view .monaco-list-row {
overflow: visible !important;
/* position: relative; */
}
.explorer-folders-view .monaco-list-row:before {
content: '';
background: var(--tree-color);
opacity: var(--tree-opacity);
position: absolute;
width: 0px;
top: -5px;
height: 100%;
transition: opacity var(--transition-duration) linear;
border-left: 1px solid var(--tree-color);
z-index: 10000;
}
.explorer-folders-view .monaco-list-row:after {
content: '';
background: var(--tree-color);
opacity: var(--tree-opacity);
position: absolute;
width: calc(var(--indent) - 10px);
height: 0px;
top: 49%;
margin-left: 2px;
transition: opacity var(--transition-duration) linear;
border-top: 1px solid var(--tree-color);
z-index: 10000;
}
.explorer-folders-view:hover .monaco-list-row:before,
.explorer-folders-view:hover .monaco-list-row:after {
opacity: var(--tree-opacity-hover);
}
.explorer-folders-view .monaco-list-row:not([aria-level='1']):before {
box-shadow:
calc(var(--indent) * -1 - 1px) 0 0 0 var(--tree-color),
calc(var(--indent) * -2 - 1px) 0 0 0 var(--tree-color),
calc(var(--indent) * -3 - 1px) 0 0 0 var(--tree-color),
calc(var(--indent) * -4 - 1px) 0 0 0 var(--tree-color),
calc(var(--indent) * -5 - 1px) 0 0 0 var(--tree-color),
calc(var(--indent) * -6 - 1px) 0 0 0 var(--tree-color),
calc(var(--indent) * -7 - 1px) 0 0 0 var(--tree-color),
calc(var(--indent) * -8 - 1px) 0 0 0 var(--tree-color),
calc(var(--indent) * -9 - 1px) 0 0 0 var(--tree-color),
calc(var(--indent) * -10 - 1px) 0 0 0 var(--tree-color),
calc(var(--indent) * -11 - 1px) 0 0 0 var(--tree-color),
calc(var(--indent) * -12 - 1px) 0 0 0 var(--tree-color),
calc(var(--indent) * -13 - 1px) 0 0 0 var(--tree-color);
}
.explorer-folders-view .monaco-list-row[aria-level="1"] { padding-left: calc(var(--indent) * 0) !important; }
.explorer-folders-view .monaco-list-row[aria-level="2"] { padding-left: calc(var(--indent) * 1) !important; }
.explorer-folders-view .monaco-list-row[aria-level="3"] { padding-left: calc(var(--indent) * 2) !important; }
.explorer-folders-view .monaco-list-row[aria-level="4"] { padding-left: calc(var(--indent) * 3) !important; }
.explorer-folders-view .monaco-list-row[aria-level="5"] { padding-left: calc(var(--indent) * 4) !important; }
.explorer-folders-view .monaco-list-row[aria-level="6"] { padding-left: calc(var(--indent) * 5) !important; }
.explorer-folders-view .monaco-list-row[aria-level="7"] { padding-left: calc(var(--indent) * 6) !important; }
.explorer-folders-view .monaco-list-row[aria-level="8"] { padding-left: calc(var(--indent) * 7) !important; }
.explorer-folders-view .monaco-list-row[aria-level="9"] { padding-left: calc(var(--indent) * 8) !important; }
.explorer-folders-view .monaco-list-row[aria-level="10"] { padding-left: calc(var(--indent) * 9) !important; }
.explorer-folders-view .monaco-list-row[aria-level="11"] { padding-left: calc(var(--indent) * 10) !important; }
.explorer-folders-view .monaco-list-row[aria-level="12"] { padding-left: calc(var(--indent) * 11) !important; }
.explorer-folders-view .monaco-list-row[aria-level="13"] { padding-left: calc(var(--indent) * 12) !important; }
.explorer-folders-view .monaco-list-row[aria-level="14"] { padding-left: calc(var(--indent) * 13) !important; }
.explorer-folders-view .monaco-list-row[aria-level="15"] { padding-left: calc(var(--indent) * 14) !important; }
.explorer-folders-view .monaco-list-row[aria-level="1"]:before, .monaco-list-row[aria-level="1"]:after { display: none; }
.explorer-folders-view .monaco-list-row[aria-level="2"]:before, .monaco-list-row[aria-level="2"]:after { left: calc(7px + (0 * var(--indent)));}
.explorer-folders-view .monaco-list-row[aria-level="3"]:before, .monaco-list-row[aria-level="3"]:after { left: calc(7px + (1 * var(--indent)));}
.explorer-folders-view .monaco-list-row[aria-level="4"]:before, .monaco-list-row[aria-level="4"]:after { left: calc(7px + (2 * var(--indent)));}
.explorer-folders-view .monaco-list-row[aria-level="5"]:before, .monaco-list-row[aria-level="5"]:after { left: calc(7px + (3 * var(--indent)));}
.explorer-folders-view .monaco-list-row[aria-level="6"]:before, .monaco-list-row[aria-level="6"]:after { left: calc(7px + (4 * var(--indent)));}
.explorer-folders-view .monaco-list-row[aria-level="7"]:before, .monaco-list-row[aria-level="7"]:after { left: calc(7px + (5 * var(--indent)));}
.explorer-folders-view .monaco-list-row[aria-level="8"]:before, .monaco-list-row[aria-level="8"]:after { left: calc(7px + (6 * var(--indent)));}
.explorer-folders-view .monaco-list-row[aria-level="9"]:before, .monaco-list-row[aria-level="9"]:after { left: calc(7px + (7 * var(--indent)));}
.explorer-folders-view .monaco-list-row[aria-level="10"]:before, .monaco-list-row[aria-level="10"]:after { left: calc(7px + (8 * var(--indent)));}
.explorer-folders-view .monaco-list-row[aria-level="11"]:before, .monaco-list-row[aria-level="11"]:after { left: calc(7px + (9 * var(--indent)));}
.explorer-folders-view .monaco-list-row[aria-level="12"]:before, .monaco-list-row[aria-level="12"]:after { left: calc(7px + (10 * var(--indent)));}
.explorer-folders-view .monaco-list-row[aria-level="13"]:before, .monaco-list-row[aria-level="13"]:after { left: calc(7px + (11 * var(--indent)));}
.explorer-folders-view .monaco-list-row[aria-level="14"]:before, .monaco-list-row[aria-level="14"]:after { left: calc(7px + (12 * var(--indent)));}
.explorer-folders-view .monaco-list-row[aria-level="15"]:before, .monaco-list-row[aria-level="15"]:after { left: calc(7px + (13 * var(--indent)));}
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK