Skip to content

Instantly share code, notes, and snippets.

@krzemienski
Forked from thepixture/readme.md
Created January 10, 2019 14:40
Show Gist options
  • Save krzemienski/851b10d7c7e1bb9ced515174c466df7a to your computer and use it in GitHub Desktop.
Save krzemienski/851b10d7c7e1bb9ced515174c466df7a to your computer and use it in GitHub Desktop.
VS Code CSS addition to increase readability on file tree.

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:
.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; }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment