Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
/* 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 **/
--indent: 20px;
/** The x offset for the vertical indentation guides **/
--v-guides-offset: 13px;
/** 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

This comment has been minimized.

Copy link
Owner Author

Lightfire228 commented Feb 7, 2019

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

This comment has been minimized.

Copy link
Owner Author

Lightfire228 commented Feb 12, 2019

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

This comment has been minimized.

Copy link

cpsubrian commented Feb 19, 2019

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

This comment has been minimized.

Copy link

cpsubrian commented Feb 19, 2019

screenshot 2019-02-19 11 46 36

@Lightfire228

This comment has been minimized.

Copy link
Owner Author

Lightfire228 commented Mar 3, 2019

@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

This comment has been minimized.

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

This comment has been minimized.

Copy link
Owner Author

Lightfire228 commented Mar 13, 2019

@trybick, no, it would be

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

This comment has been minimized.

Copy link

AberrantWolf commented Sep 30, 2019

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.