Skip to content

Instantly share code, notes, and snippets.

@Lightfire228

Lightfire228/fileTree_2019-01_update.css

Last active March 6, 2024 17:09
Show Gist options
  • Star 9 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save Lightfire228/39dc2cf403237a190e79a000912691b2 to your computer and use it in GitHub Desktop.
Save Lightfire228/39dc2cf403237a190e79a000912691b2 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
readme.md

As of the June 2021 Update, this no longer works. I have decided not to update the gist, and just use the built in indentation guides. Feel free to link updates in the comments

Credit goes to Samdenty for installation instructions. I've made a copy here for convienience.

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 C:\Program Files\Microsoft VS Code\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.
Raw
fileTree_2019-01_update.css
/* Source 1: https://gist.github.com/jakewtaylor/e92acd697409e53a73ebf8e0145d4c28 */
/* Source 2: https://gist.github.com/samdenty/b96f4df576d05cb123248f8ebfa899b6 */
/* Source 3: https://gist.github.com/Lightfire228/39dc2cf403237a190e79a000912691b2#gistcomment-2841903*/
/* File URI: file:///C:/Path/to/file/style.css */
/* Github Issue: https://github.com/Microsoft/vscode/issues/17777 */
:root {
/** Indentation level. Set this to the same value as "workbench.tree.indent" **/
--indent: 20px;
/** The x offset for the vertical indentation guides **/
--v-guides-offset: 17px;
/** The x offset for the horizontal indentation guides **/
--h-guides-offset: 1px;
/** Opacity of the lines whilst not hovered **/
--tree-opacity: 0.1;
/** Opacity of the lines on hover **/
--tree-opacity-hover: 0.3;
/** Color of the lines **/
--tree-color: rgb(255, 255, 255);
/** Transition Duration */
--transition-duration: 100ms;
}
.explorer-folders-view .monaco-tl-twistie {
margin-left: 0px !important;
}
.explorer-folders-view .monaco-list-row {
overflow: visible !important;
}
.explorer-folders-view .monaco-list-row:before {
content: '';
background: var(--tree-color);
opacity: var(--tree-opacity);
position: absolute;
width: 0px;
top: -10px;
height: 100%;
transition: opacity var(--transition-duration) linear;
border-left: 1px solid var(--tree-color);
z-index: 10;
}
.explorer-folders-view .monaco-list-row:after {
content: '';
background: var(--tree-color);
opacity: var(--tree-opacity);
position: absolute;
width: calc(var(--indent) - (10px - var(--h-guides-offset)));
height: 0px;
top: 49%;
margin-left: var(--h-guides-offset);
transition: opacity var(--transition-duration) linear;
border-top: 1px solid var(--tree-color);
z-index: 10;
}
.explorer-folders-view:hover .monaco-list-row:before,
.explorer-folders-view:hover .monaco-list-row:after {
opacity: var(--tree-opacity-hover);
}
.explorer-folders-view .monaco-list-row:not([aria-level='1']):before {
box-shadow:
calc(var(--indent) * -1 ) 0 0 0 var(--tree-color),
calc(var(--indent) * -2 ) 0 0 0 var(--tree-color),
calc(var(--indent) * -3 ) 0 0 0 var(--tree-color),
calc(var(--indent) * -4 ) 0 0 0 var(--tree-color),
calc(var(--indent) * -5 ) 0 0 0 var(--tree-color),
calc(var(--indent) * -6 ) 0 0 0 var(--tree-color),
calc(var(--indent) * -7 ) 0 0 0 var(--tree-color),
calc(var(--indent) * -8 ) 0 0 0 var(--tree-color),
calc(var(--indent) * -9 ) 0 0 0 var(--tree-color),
calc(var(--indent) * -10) 0 0 0 var(--tree-color),
calc(var(--indent) * -11) 0 0 0 var(--tree-color),
calc(var(--indent) * -12) 0 0 0 var(--tree-color),
calc(var(--indent) * -13) 0 0 0 var(--tree-color);
}
/* .explorer-folders-view .monaco-list-row[aria-level="1" ] { padding-left: calc(var(--indent) * 0) !important; }
.explorer-folders-view .monaco-list-row[aria-level="2" ] { padding-left: calc(var(--indent) * 1) !important; }
.explorer-folders-view .monaco-list-row[aria-level="3" ] { padding-left: calc(var(--indent) * 2) !important; }
.explorer-folders-view .monaco-list-row[aria-level="4" ] { padding-left: calc(var(--indent) * 3) !important; }
.explorer-folders-view .monaco-list-row[aria-level="5" ] { padding-left: calc(var(--indent) * 4) !important; }
.explorer-folders-view .monaco-list-row[aria-level="6" ] { padding-left: calc(var(--indent) * 5) !important; }
.explorer-folders-view .monaco-list-row[aria-level="7" ] { padding-left: calc(var(--indent) * 6) !important; }
.explorer-folders-view .monaco-list-row[aria-level="8" ] { padding-left: calc(var(--indent) * 7) !important; }
.explorer-folders-view .monaco-list-row[aria-level="9" ] { padding-left: calc(var(--indent) * 8) !important; }
.explorer-folders-view .monaco-list-row[aria-level="10"] { padding-left: calc(var(--indent) * 9) !important; }
.explorer-folders-view .monaco-list-row[aria-level="11"] { padding-left: calc(var(--indent) * 10) !important; }
.explorer-folders-view .monaco-list-row[aria-level="12"] { padding-left: calc(var(--indent) * 11) !important; }
.explorer-folders-view .monaco-list-row[aria-level="13"] { padding-left: calc(var(--indent) * 12) !important; }
.explorer-folders-view .monaco-list-row[aria-level="14"] { padding-left: calc(var(--indent) * 13) !important; }
.explorer-folders-view .monaco-list-row[aria-level="15"] { padding-left: calc(var(--indent) * 14) !important; } */
.explorer-folders-view .monaco-list-row[aria-level="1" ]:before, .monaco-list-row[aria-level="1" ]:after { display: none; }
.explorer-folders-view .monaco-list-row[aria-level="2" ]:before, .monaco-list-row[aria-level="2" ]:after { left: calc(var(--v-guides-offset) + (0 * var(--indent)));}
.explorer-folders-view .monaco-list-row[aria-level="3" ]:before, .monaco-list-row[aria-level="3" ]:after { left: calc(var(--v-guides-offset) + (1 * var(--indent)));}
.explorer-folders-view .monaco-list-row[aria-level="4" ]:before, .monaco-list-row[aria-level="4" ]:after { left: calc(var(--v-guides-offset) + (2 * var(--indent)));}
.explorer-folders-view .monaco-list-row[aria-level="5" ]:before, .monaco-list-row[aria-level="5" ]:after { left: calc(var(--v-guides-offset) + (3 * var(--indent)));}
.explorer-folders-view .monaco-list-row[aria-level="6" ]:before, .monaco-list-row[aria-level="6" ]:after { left: calc(var(--v-guides-offset) + (4 * var(--indent)));}
.explorer-folders-view .monaco-list-row[aria-level="7" ]:before, .monaco-list-row[aria-level="7" ]:after { left: calc(var(--v-guides-offset) + (5 * var(--indent)));}
.explorer-folders-view .monaco-list-row[aria-level="8" ]:before, .monaco-list-row[aria-level="8" ]:after { left: calc(var(--v-guides-offset) + (6 * var(--indent)));}
.explorer-folders-view .monaco-list-row[aria-level="9" ]:before, .monaco-list-row[aria-level="9" ]:after { left: calc(var(--v-guides-offset) + (7 * var(--indent)));}
.explorer-folders-view .monaco-list-row[aria-level="10"]:before, .monaco-list-row[aria-level="10"]:after { left: calc(var(--v-guides-offset) + (8 * var(--indent)));}
.explorer-folders-view .monaco-list-row[aria-level="11"]:before, .monaco-list-row[aria-level="11"]:after { left: calc(var(--v-guides-offset) + (9 * var(--indent)));}
.explorer-folders-view .monaco-list-row[aria-level="12"]:before, .monaco-list-row[aria-level="12"]:after { left: calc(var(--v-guides-offset) + (10 * var(--indent)));}
.explorer-folders-view .monaco-list-row[aria-level="13"]:before, .monaco-list-row[aria-level="13"]:after { left: calc(var(--v-guides-offset) + (11 * var(--indent)));}
.explorer-folders-view .monaco-list-row[aria-level="14"]:before, .monaco-list-row[aria-level="14"]:after { left: calc(var(--v-guides-offset) + (12 * var(--indent)));}
.explorer-folders-view .monaco-list-row[aria-level="15"]:before, .monaco-list-row[aria-level="15"]:after { left: calc(var(--v-guides-offset) + (13 * var(--indent)));}
@Lightfire228
Copy link
Author

Fixed line disappearing weirdness caused when focusing or selecting a list row.

I'm not the best with css so, if z-index isn't the best way to solve this issue, ¯\_(ツ)_/¯

@Lightfire228
Copy link
Author

Lightfire228 commented Feb 12, 2019 •
edited

Edit: this is no longer necessary with the new indentation variables

If you play with this, you can comment out the monaco-tl-twistie rule (lines 15-17). I didn't know that setting existed when I fixed the css (and with the indentation guides, I prefer a tighter indentation than setting that to 0)

@cpsubrian
Copy link

Tweaked this a bit to make more things calculate off of a new --indent variable.

/* Source 1: https://gist.github.com/jakewtaylor/e92acd697409e53a73ebf8e0145d4c28 */
/* Source 2: https://gist.github.com/samdenty/b96f4df576d05cb123248f8ebfa899b6 */
/* File URI: file:///C:/Path/to/file/style.css */
/* Github Issue: https://github.com/Microsoft/vscode/issues/17777 */

:root {
  /** Indentation level **/
  --indent: 25px;
  /** Opacity of the lines whilst not hovered **/
  --tree-opacity: 0.1;
  /** Opacity of the lines on hover **/
  --tree-opacity-hover: 0.1;
  /** Color of the lines **/
  --tree-color: rgb(255, 255, 255);
  /** Transition Duration */
  --transition-duration: 100ms;
}

/* Not needed if you use this: https://github.com/Microsoft/vscode/issues/17777#issuecomment-462653229 */
.explorer-folders-view .monaco-tl-twistie {
  margin-left: 0px !important;
}

.explorer-folders-view .monaco-list-row {
  overflow: visible !important;
  /* position: relative; */
}

.explorer-folders-view .monaco-list-row:before {
  content: '';
  background: var(--tree-color);
  opacity: var(--tree-opacity);
  position: absolute;
  width: 0px;
  top: -5px;
  height: 100%;
  transition: opacity var(--transition-duration) linear;
  border-left: 1px solid var(--tree-color);
  z-index: 10000;
}

.explorer-folders-view .monaco-list-row:after {
  content: '';
  background: var(--tree-color);
  opacity: var(--tree-opacity);
  position: absolute;
  width: calc(var(--indent) - 10px);
  height: 0px;
  top: 49%;
  margin-left: 2px;
  transition: opacity var(--transition-duration) linear;
  border-top: 1px solid var(--tree-color);
  z-index: 10000;
}

.explorer-folders-view:hover .monaco-list-row:before,
.explorer-folders-view:hover .monaco-list-row:after {
  opacity: var(--tree-opacity-hover);
}

.explorer-folders-view .monaco-list-row:not([aria-level='1']):before {
  box-shadow:
    calc(var(--indent) * -1 - 1px)  0 0 0 var(--tree-color),
    calc(var(--indent) * -2 - 1px)  0 0 0 var(--tree-color),
    calc(var(--indent) * -3 - 1px)  0 0 0 var(--tree-color),
    calc(var(--indent) * -4 - 1px)  0 0 0 var(--tree-color),
    calc(var(--indent) * -5 - 1px)  0 0 0 var(--tree-color),
    calc(var(--indent) * -6 - 1px)  0 0 0 var(--tree-color),
    calc(var(--indent) * -7 - 1px)  0 0 0 var(--tree-color),
    calc(var(--indent) * -8 - 1px)  0 0 0 var(--tree-color),
    calc(var(--indent) * -9 - 1px)  0 0 0 var(--tree-color),
    calc(var(--indent) * -10 - 1px) 0 0 0 var(--tree-color),
    calc(var(--indent) * -11 - 1px) 0 0 0 var(--tree-color),
    calc(var(--indent) * -12 - 1px) 0 0 0 var(--tree-color),
    calc(var(--indent) * -13 - 1px) 0 0 0 var(--tree-color);
}

.explorer-folders-view .monaco-list-row[aria-level="1"]  { padding-left: calc(var(--indent) * 0)  !important; }
.explorer-folders-view .monaco-list-row[aria-level="2"]  { padding-left: calc(var(--indent) * 1)  !important; }
.explorer-folders-view .monaco-list-row[aria-level="3"]  { padding-left: calc(var(--indent) * 2)  !important; }
.explorer-folders-view .monaco-list-row[aria-level="4"]  { padding-left: calc(var(--indent) * 3)  !important; }
.explorer-folders-view .monaco-list-row[aria-level="5"]  { padding-left: calc(var(--indent) * 4)  !important; }
.explorer-folders-view .monaco-list-row[aria-level="6"]  { padding-left: calc(var(--indent) * 5)  !important; }
.explorer-folders-view .monaco-list-row[aria-level="7"]  { padding-left: calc(var(--indent) * 6)  !important; }
.explorer-folders-view .monaco-list-row[aria-level="8"]  { padding-left: calc(var(--indent) * 7)  !important; }
.explorer-folders-view .monaco-list-row[aria-level="9"]  { padding-left: calc(var(--indent) * 8)  !important; }
.explorer-folders-view .monaco-list-row[aria-level="10"] { padding-left: calc(var(--indent) * 9)  !important; }
.explorer-folders-view .monaco-list-row[aria-level="11"] { padding-left: calc(var(--indent) * 10) !important; }
.explorer-folders-view .monaco-list-row[aria-level="12"] { padding-left: calc(var(--indent) * 11) !important; }
.explorer-folders-view .monaco-list-row[aria-level="13"] { padding-left: calc(var(--indent) * 12) !important; }
.explorer-folders-view .monaco-list-row[aria-level="14"] { padding-left: calc(var(--indent) * 13) !important; }
.explorer-folders-view .monaco-list-row[aria-level="15"] { padding-left: calc(var(--indent) * 14) !important; }

.explorer-folders-view .monaco-list-row[aria-level="1"]:before, .monaco-list-row[aria-level="1"]:after   { display: none; }
.explorer-folders-view .monaco-list-row[aria-level="2"]:before, .monaco-list-row[aria-level="2"]:after   { left: calc(7px + (0  * var(--indent)));}
.explorer-folders-view .monaco-list-row[aria-level="3"]:before, .monaco-list-row[aria-level="3"]:after   { left: calc(7px + (1  * var(--indent)));}
.explorer-folders-view .monaco-list-row[aria-level="4"]:before, .monaco-list-row[aria-level="4"]:after   { left: calc(7px + (2  * var(--indent)));}
.explorer-folders-view .monaco-list-row[aria-level="5"]:before, .monaco-list-row[aria-level="5"]:after   { left: calc(7px + (3  * var(--indent)));}
.explorer-folders-view .monaco-list-row[aria-level="6"]:before, .monaco-list-row[aria-level="6"]:after   { left: calc(7px + (4  * var(--indent)));}
.explorer-folders-view .monaco-list-row[aria-level="7"]:before, .monaco-list-row[aria-level="7"]:after   { left: calc(7px + (5  * var(--indent)));}
.explorer-folders-view .monaco-list-row[aria-level="8"]:before, .monaco-list-row[aria-level="8"]:after   { left: calc(7px + (6  * var(--indent)));}
.explorer-folders-view .monaco-list-row[aria-level="9"]:before, .monaco-list-row[aria-level="9"]:after   { left: calc(7px + (7  * var(--indent)));}
.explorer-folders-view .monaco-list-row[aria-level="10"]:before, .monaco-list-row[aria-level="10"]:after { left: calc(7px + (8  * var(--indent)));}
.explorer-folders-view .monaco-list-row[aria-level="11"]:before, .monaco-list-row[aria-level="11"]:after { left: calc(7px + (9  * var(--indent)));}
.explorer-folders-view .monaco-list-row[aria-level="12"]:before, .monaco-list-row[aria-level="12"]:after { left: calc(7px + (10 * var(--indent)));}
.explorer-folders-view .monaco-list-row[aria-level="13"]:before, .monaco-list-row[aria-level="13"]:after { left: calc(7px + (11 * var(--indent)));}
.explorer-folders-view .monaco-list-row[aria-level="14"]:before, .monaco-list-row[aria-level="14"]:after { left: calc(7px + (12 * var(--indent)));}
.explorer-folders-view .monaco-list-row[aria-level="15"]:before, .monaco-list-row[aria-level="15"]:after { left: calc(7px + (13 * var(--indent)));}

@cpsubrian
Copy link

screenshot 2019-02-19 11 46 36

@Lightfire228
Copy link
Author

Lightfire228 commented Mar 3, 2019 •
edited

@cpsubrian, I incorporated your tweaks into my gist. Some notes:

fixes:
    fixed misalignment issues caused by the extra -1 px on lines 62-74
    just discovered the zindex was too high, and causing issues with the file, edit, etc. dropdowns

preferences:
    edited line 39 because I like the original look better

tweaks:
    added in a variable for the left offset for the verticle indentation guides, yours was 7px, but i like 13px
    added in a variable for the left offset for the horizontal indentation guides, yours wasn't touching the vertical bars

A screenshot of the misalignment:
misalignment

Screenshot of the completed glory:
completed glory

@trybick
Copy link

trybick commented Mar 8, 2019

Does this look right for settings.json?

    "vscode_custom_css.imports": [
        "file:///Users/tim-work/vscodestyles.css"
    ],
    "vscode_custom_css.policy": true

Inside vscodestyles.css is pasted from this gist. I have installed the custom css plugin and activated it from command palette. Any idea what I could be doing wrong?

@Lightfire228
Copy link
Author

@trybick, no, it would be

    "vscode_custom_css.imports": [
        "file:///C:/Users/tim-work/vscodestyles.css"
    ],
    "vscode_custom_css.policy": true

@AberrantWolf
Copy link

Thanks so much for this! Even with their updates this year, the file browser was nigh-unusable for me, and this just makes is so much clearer!

As a note, you will want to disable the new built-in highlighting that they added, otherwise I was getting a lot of vertical lines through filenames.

@Lightfire228
Copy link
Author

To get this to work previously, I had set the "workbench.tree.indent" in the settings to 0. But I noticed that gitlense was using that as it's indent as well

So now, I figured out how to have the vanilla indentation css work with the custom guides css. You may have to --v-guides-offset. Mine went from 13px to 17px

Also, you don't have to restart as admin every time there's an update (at least, I don't). Simply hit the command key (F1 by default), and type "Reload custom CSS and JS", hit enter, then command key, "Reload window" (which I bound to ctrl + F5)

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