krzemienski
1/10/2019 - 2:40 PM

VS Code CSS addition to increase readability on file tree.

VS Code CSS addition to increase readability on file tree.

readme.md
content_copyfile_download
  • Rendered
  • Source

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:
style.css
content_copyfile_download
.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; }