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

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

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

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

commented Feb 19, 2019

screenshot 2019-02-19 11 46 36

@Lightfire228

This comment has been minimized.

Copy link
Owner Author

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

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

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
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.