romainprignon
10/21/2017 - 12:05 PM

VS Code CSS addition to increase readability on file tree.

VS Code CSS addition to increase readability on file tree.

style.css
content_copyfile_download
.monaco-tree-row {
    overflow: hidden;
    position: relative;
}

.monaco-tree-row:before {
    content: '';
    background: rgba(255, 255, 255, 0.1);
    position: absolute;
    width: 1px;
    height: 100%;
}

.monaco-tree-row:after {
    content: '';
    background: rgba(255, 255, 255, 0.1);
    position: absolute;
    width: 20px;
    height: 1px;
    top: 50%;
}

.monaco-tree-row:not([aria-level="1"]):not([aria-level="2"]):before {
    box-shadow:  -20px 0 0 0 rgba(255, 255, 255, 0.1),
                 -40px 0 0 0 rgba(255, 255, 255, 0.1),
                 -60px 0 0 0 rgba(255, 255, 255, 0.1),
                 -80px 0 0 0 rgba(255, 255, 255, 0.1),
                -100px 0 0 0 rgba(255, 255, 255, 0.1),
                -120px 0 0 0 rgba(255, 255, 255, 0.1),
                -140px 0 0 0 rgba(255, 255, 255, 0.1),
                -160px 0 0 0 rgba(255, 255, 255, 0.1),
                -180px 0 0 0 rgba(255, 255, 255, 0.1),
                -200px 0 0 0 rgba(255, 255, 255, 0.1),
                -220px 0 0 0 rgba(255, 255, 255, 0.1),
                -240px 0 0 0 rgba(255, 255, 255, 0.1),
                -260px 0 0 0 rgba(255, 255, 255, 0.1);
}

.monaco-tree-row[aria-level="1"]  { padding-left:   5px !important; }
.monaco-tree-row[aria-level="2"]  { padding-left:  25px !important; }
.monaco-tree-row[aria-level="3"]  { padding-left:  45px !important; }
.monaco-tree-row[aria-level="4"]  { padding-left:  65px !important; }
.monaco-tree-row[aria-level="5"]  { padding-left:  85px !important; }
.monaco-tree-row[aria-level="6"]  { padding-left: 105px !important; }
.monaco-tree-row[aria-level="7"]  { padding-left: 125px !important; }
.monaco-tree-row[aria-level="8"]  { padding-left: 145px !important; }
.monaco-tree-row[aria-level="9"]  { padding-left: 165px !important; }
.monaco-tree-row[aria-level="10"] { padding-left: 185px !important; }
.monaco-tree-row[aria-level="11"] { padding-left: 205px !important; }
.monaco-tree-row[aria-level="12"] { padding-left: 225px !important; }
.monaco-tree-row[aria-level="13"] { padding-left: 245px !important; }
.monaco-tree-row[aria-level="14"] { padding-left: 265px !important; }
.monaco-tree-row[aria-level="15"] { padding-left: 285px !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="11"]:before  { left: 191px; }
.monaco-tree-row[aria-level="12"]:before  { left: 211px; }
.monaco-tree-row[aria-level="13"]:before  { left: 231px; }
.monaco-tree-row[aria-level="14"]:before  { left: 251px; }
.monaco-tree-row[aria-level="15"]:before  { left: 271px; }

.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; }
.monaco-tree-row[aria-level="11"]:after  { left: 191px; }
.monaco-tree-row[aria-level="12"]:after  { left: 211px; }
.monaco-tree-row[aria-level="13"]:after  { left: 231px; }
.monaco-tree-row[aria-level="14"]:after  { left: 251px; }
.monaco-tree-row[aria-level="15"]:after  { left: 271px; }
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 /usr/share/code)
  • Go to resources/app/out/vs/workbench
  • Open workbench.main.css
  • Add the following CSS: