Skip to content

Instantly share code, notes, and snippets.

@bcalik
Forked from samdenty/README.MD
Last active Sep 17, 2018
Embed
What would you like to do?
VS Code CSS addition to increase readability on file tree.

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

Screenshot

Custom CSS

Manually editing workbench.main.css

Open up /Applications/Visual Studio Code.app/Contents/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

  • The last tree item gets the bottom line removed
  • Lines are almost transparent normally, but increase in opacity on hover
  • CSS variables to make it easy to change the colors, line width etc.
:root {
/** Width of the lines **/
--tree-width: 7px;
/** Opacity of the lines whilst not hovered **/
--tree-opacity: 0.2;
/** Opacity of the lines on hover **/
--tree-opacity-hover: 0.2;
/** Color of the lines **/
--tree-color: rgb(255, 255, 255);
}
.explorer-folders-view .monaco-tree-row {
overflow: visible !important;
position: relative;
}
.explorer-folders-view .monaco-tree-row:before {
content: '';
background: var(--tree-color);
opacity: var(--tree-opacity);
position: absolute;
width: 0px;
top: -10px;
height: 100%;
transition: opacity 0.1s linear;
border-left: 1px solid var(--tree-color);
}
.explorer-folders-view .monaco-tree-row:after {
content: '';
background: var(--tree-color);
opacity: var(--tree-opacity);
position: absolute;
width: 18px;
height: 0px;
top: 50%;
transition: opacity 0.1s linear;
border-top: 1px solid var(--tree-color);
}
.explorer-folders-view:hover .monaco-tree-row:before,
.explorer-folders-view:hover .monaco-tree-row:after {
opacity: var(--tree-opacity-hover);
}
.explorer-folders-view .monaco-tree-row:not(.has-children):after {
width: calc(var(--tree-width) * 2 + 3px);
}
.explorer-folders-view .monaco-tree-row:not([aria-level='1']):not([aria-level='2']):before {
box-shadow: -20px 0 0 0 var(--tree-color), -40px 0 0 0 var(--tree-color),
-60px 0 0 0 var(--tree-color), -80px 0 0 0 var(--tree-color),
-100px 0 0 0 var(--tree-color), -120px 0 0 0 var(--tree-color),
-140px 0 0 0 var(--tree-color), -160px 0 0 0 var(--tree-color),
-180px 0 0 0 var(--tree-color), -200px 0 0 0 var(--tree-color),
-220px 0 0 0 var(--tree-color), -240px 0 0 0 var(--tree-color),
-260px 0 0 0 var(--tree-color);
}
.explorer-folders-view .monaco-tree-row[aria-level="1"] { padding-left: 10px !important; }
.explorer-folders-view .monaco-tree-row[aria-level="2"] { padding-left: 30px !important; }
.explorer-folders-view .monaco-tree-row[aria-level="3"] { padding-left: 50px !important; }
.explorer-folders-view .monaco-tree-row[aria-level="4"] { padding-left: 70px !important; }
.explorer-folders-view .monaco-tree-row[aria-level="5"] { padding-left: 90px !important; }
.explorer-folders-view .monaco-tree-row[aria-level="6"] { padding-left: 110px !important; }
.explorer-folders-view .monaco-tree-row[aria-level="7"] { padding-left: 130px !important; }
.explorer-folders-view .monaco-tree-row[aria-level="8"] { padding-left: 150px !important; }
.explorer-folders-view .monaco-tree-row[aria-level="9"] { padding-left: 170px !important; }
.explorer-folders-view .monaco-tree-row[aria-level="10"] { padding-left: 190px !important; }
.explorer-folders-view .monaco-tree-row[aria-level="11"] { padding-left: 210px !important; }
.explorer-folders-view .monaco-tree-row[aria-level="12"] { padding-left: 230px !important; }
.explorer-folders-view .monaco-tree-row[aria-level="13"] { padding-left: 250px !important; }
.explorer-folders-view .monaco-tree-row[aria-level="14"] { padding-left: 270px !important; }
.explorer-folders-view .monaco-tree-row[aria-level="15"] { padding-left: 290px !important; }
.explorer-folders-view .monaco-tree-row[aria-level="1"]:before, .monaco-tree-row[aria-level="1"]:after { display: none; }
.explorer-folders-view .monaco-tree-row[aria-level="2"]:before, .monaco-tree-row[aria-level="2"]:after { left: calc(-30px + (2 * 20px)); margin-left: 3px }
.explorer-folders-view .monaco-tree-row[aria-level="3"]:before, .monaco-tree-row[aria-level="3"]:after { left: calc(-30px + (3 * 20px)); margin-left: 3px }
.explorer-folders-view .monaco-tree-row[aria-level="4"]:before, .monaco-tree-row[aria-level="4"]:after { left: calc(-30px + (4 * 20px)); margin-left: 3px }
.explorer-folders-view .monaco-tree-row[aria-level="5"]:before, .monaco-tree-row[aria-level="5"]:after { left: calc(-30px + (5 * 20px)); margin-left: 3px }
.explorer-folders-view .monaco-tree-row[aria-level="6"]:before, .monaco-tree-row[aria-level="6"]:after { left: calc(-30px + (6 * 20px)); margin-left: 3px }
.explorer-folders-view .monaco-tree-row[aria-level="7"]:before, .monaco-tree-row[aria-level="7"]:after { left: calc(-30px + (7 * 20px)); margin-left: 3px }
.explorer-folders-view .monaco-tree-row[aria-level="8"]:before, .monaco-tree-row[aria-level="8"]:after { left: calc(-30px + (8 * 20px)); margin-left: 3px }
.explorer-folders-view .monaco-tree-row[aria-level="9"]:before, .monaco-tree-row[aria-level="9"]:after { left: calc(-30px + (9 * 20px)); margin-left: 3px }
.explorer-folders-view .monaco-tree-row[aria-level="10"]:before, .monaco-tree-row[aria-level="10"]:after{ left: calc(-30px + (10 * 20px)); margin-left: 3px }
.explorer-folders-view .monaco-tree-row[aria-level="11"]:before, .monaco-tree-row[aria-level="11"]:after{ left: calc(-30px + (11 * 20px)); margin-left: 3px }
.explorer-folders-view .monaco-tree-row[aria-level="12"]:before, .monaco-tree-row[aria-level="12"]:after{ left: calc(-30px + (12 * 20px)); margin-left: 3px }
.explorer-folders-view .monaco-tree-row[aria-level="13"]:before, .monaco-tree-row[aria-level="13"]:after{ left: calc(-30px + (13 * 20px)); margin-left: 3px }
.explorer-folders-view .monaco-tree-row[aria-level="14"]:before, .monaco-tree-row[aria-level="14"]:after{ left: calc(-30px + (14 * 20px)); margin-left: 3px }
.explorer-folders-view .monaco-tree-row[aria-level="15"]:before, .monaco-tree-row[aria-level="15"]:after{ left: calc(-30px + (15 * 20px)); margin-left: 3px }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment