Skip to content

Instantly share code, notes, and snippets.

@thepixture

thepixture/readme.md

Forked from jakewtaylor/readme.md
Last active March 19, 2019 01:16
Show Gist options
  • Star 7 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save thepixture/72f5090e7fab8edae3d1dc1fb59f9f5c to your computer and use it in GitHub Desktop.
Save thepixture/72f5090e7fab8edae3d1dc1fb59f9f5c to your computer and use it in GitHub Desktop.
Download ZIP
VS Code CSS addition to increase readability on file tree.
Raw
readme.md

Increases indentation on the file tree and adds some lines to each directory/file.

Works 15 levels deep, but you can expand it by just adding more of each line thats repeating, i.e.:

  • add another box shadow
    • (n*-20px) 0 0 0 rgba(255, 255, 255, 0.4)
  • add another padding-left
    • .monaco-tree-row[aria-level="n"] { padding-left: ((n-1)*20)px; }
  • add another :before & :after with left positioning
    • .monaco-tree-row[aria-level="n"]:before { left: (((n-1)*20)-9)px; }
    • .monaco-tree-row[aria-level="n"]:after { left: (((n-1)*20)-9)px; }

A bit messy but it works. If VSCode had some LESS/SASS stylesheets and/or functionality for user styles, this would be much nicer, but we've got to work with what we've got.

  • Find your VSCode install (mine was C:/Program Files/Microsoft VS Code, macOS should be /Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/workbench.main.css)
  • Go to resources/app/out/vs/workbench
  • Open workbench.main.css
  • Add the following CSS:
Raw
style.css
.monaco-tree-row {
overflow: visible;
position: relative;
}
.monaco-tree .monaco-tree-rows > .monaco-tree-row {
overflow: visible;
}
.monaco-tree-row:before {
content: '';
position: absolute;
width: 1px;
height: 100%;
}
.monaco-tree-row:after {
content: '';
background: rgba(255, 255, 255, 0.07);
position: absolute;
width: 24px;
height: 1px;
top: 50%;
}
.monaco-tree-row[aria-expanded]:after {
width: 12px;
}
.monaco-tree-row[aria-level="2"]:before {
box-shadow: -1px 0 0 0 rgba(255, 255, 255, 0.07);
}
.monaco-tree-row[aria-level="3"]:before {
box-shadow: -1px -11px 0 0 rgba(255, 255, 255, 0.07),
-21px 0 0 0 rgba(255, 255, 255, 0.07);
}
.monaco-tree-row[aria-level="4"]:before {
box-shadow: -1px -11px 0 0 rgba(255, 255, 255, 0.07),
-21px -11px 0 0 rgba(255, 255, 255, 0.07),
-41px 0 0 0 rgba(255, 255, 255, 0.07);
}
.monaco-tree-row[aria-level="5"]:before {
box-shadow: -1px -11px 0 0 rgba(255, 255, 255, 0.07),
-21px -11px 0 0 rgba(255, 255, 255, 0.07),
-41px -11px 0 0 rgba(255, 255, 255, 0.07),
-61px 0 0 0 rgba(255, 255, 255, 0.07);
}
.monaco-tree-row[aria-level="6"]:before {
box-shadow: -1px -11px 0 0 rgba(255, 255, 255, 0.07),
-21px -11px 0 0 rgba(255, 255, 255, 0.07),
-41px -11px 0 0 rgba(255, 255, 255, 0.07),
-61px -11px 0 0 rgba(255, 255, 255, 0.07),
-81px 0 0 0 rgba(255, 255, 255, 0.07);
}
.monaco-tree-row[aria-level="7"]:before {
box-shadow: -1px -11px 0 0 rgba(255, 255, 255, 0.07),
-21px -11px 0 0 rgba(255, 255, 255, 0.07),
-41px -11px 0 0 rgba(255, 255, 255, 0.07),
-61px -11px 0 0 rgba(255, 255, 255, 0.07),
-81px -11px 0 0 rgba(255, 255, 255, 0.07),
-101px 0 0 0 rgba(255, 255, 255, 0.07);
}
.monaco-tree-row[aria-level="8"]:before {
box-shadow: -1px -11px 0 0 rgba(255, 255, 255, 0.07),
-21px -11px 0 0 rgba(255, 255, 255, 0.07),
-41px -11px 0 0 rgba(255, 255, 255, 0.07),
-61px -11px 0 0 rgba(255, 255, 255, 0.07),
-81px -11px 0 0 rgba(255, 255, 255, 0.07),
-101px -11px 0 0 rgba(255, 255, 255, 0.07),
-121px 0 0 0 rgba(255, 255, 255, 0.07);
}
.monaco-tree-row[aria-level="9"]:before {
box-shadow: -1px -11px 0 0 rgba(255, 255, 255, 0.07),
-21px -11px 0 0 rgba(255, 255, 255, 0.07),
-41px -11px 0 0 rgba(255, 255, 255, 0.07),
-61px -11px 0 0 rgba(255, 255, 255, 0.07),
-81px -11px 0 0 rgba(255, 255, 255, 0.07),
-101px -11px 0 0 rgba(255, 255, 255, 0.07),
-121px -11px 0 0 rgba(255, 255, 255, 0.07),
-141px 0 0 0 rgba(255, 255, 255, 0.07);
}
.monaco-tree-row[aria-level="10"]:before {
box-shadow: -1px -11px 0 0 rgba(255, 255, 255, 0.07),
-21px -11px 0 0 rgba(255, 255, 255, 0.07),
-41px -11px 0 0 rgba(255, 255, 255, 0.07),
-61px -11px 0 0 rgba(255, 255, 255, 0.07),
-81px -11px 0 0 rgba(255, 255, 255, 0.07),
-101px -11px 0 0 rgba(255, 255, 255, 0.07),
-121px -11px 0 0 rgba(255, 255, 255, 0.07),
-141px -11px 0 0 rgba(255, 255, 255, 0.07),
-161px 0 0 0 rgba(255, 255, 255, 0.07);
}
.monaco-tree-row[aria-level="1"] { padding-left: 0px !important; }
.monaco-tree-row[aria-level="2"] { padding-left: 20px !important; }
.monaco-tree-row[aria-level="3"] { padding-left: 40px !important; }
.monaco-tree-row[aria-level="4"] { padding-left: 60px !important; }
.monaco-tree-row[aria-level="5"] { padding-left: 80px !important; }
.monaco-tree-row[aria-level="6"] { padding-left: 100px !important; }
.monaco-tree-row[aria-level="7"] { padding-left: 120px !important; }
.monaco-tree-row[aria-level="8"] { padding-left: 140px !important; }
.monaco-tree-row[aria-level="9"] { padding-left: 160px !important; }
.monaco-tree-row[aria-level="10"] { padding-left: 180px !important; }
.monaco-tree-row[aria-level="1"]:before { display: none; }
.monaco-tree-row[aria-level="2"]:before { left: 11px; }
.monaco-tree-row[aria-level="3"]:before { left: 31px; }
.monaco-tree-row[aria-level="4"]:before { left: 51px; }
.monaco-tree-row[aria-level="5"]:before { left: 71px; }
.monaco-tree-row[aria-level="6"]:before { left: 91px; }
.monaco-tree-row[aria-level="7"]:before { left: 111px; }
.monaco-tree-row[aria-level="8"]:before { left: 131px; }
.monaco-tree-row[aria-level="9"]:before { left: 151px; }
.monaco-tree-row[aria-level="10"]:before { left: 171px; }
.monaco-tree-row[aria-level="1"]:after { display: none; }
.monaco-tree-row[aria-level="2"]:after { left: 11px; }
.monaco-tree-row[aria-level="3"]:after { left: 31px; }
.monaco-tree-row[aria-level="4"]:after { left: 51px; }
.monaco-tree-row[aria-level="5"]:after { left: 71px; }
.monaco-tree-row[aria-level="6"]:after { left: 91px; }
.monaco-tree-row[aria-level="7"]:after { left: 111px; }
.monaco-tree-row[aria-level="8"]:after { left: 131px; }
.monaco-tree-row[aria-level="9"]:after { left: 151px; }
.monaco-tree-row[aria-level="10"]:after { left: 171px; }
@k3rnel-err0r
Copy link

No problem on Windows, works perfectly! I'm not able to find workbench.main.css file on my mac though.

@thepixture
Copy link
Author

You can find the workbench.main.css as described in the readme.
Go to applications > right click on Visual Studio Code.app and choose > Show Package Contents.
Now you should find the CSS file.

@akmeghdad
Copy link

For vscode 1.31
https://gist.github.com/akmeghdad/b1208c2caa601f0ba29f953faabac709

@Valdas-Stonkus
Copy link

If I adding this code to this workbench.main.css file, I getting vscode information that my file is corrupted and recomend reinstall VS code.
Also, the sidebar directory tree do not changed.
My version of VS code 1.31.0

akmeghdad / workbench.tree.css wrote about this file, but no any info, where to place this file. Help please

@garyee
Copy link

garyee commented Mar 8, 2019

did what you said ... did not work

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment