workbench.main.css for VS code

workbench.tree.css 1.41.0 (+)

/* ==================== */
/* VScode 1.41.0 AND UP */
/* ==================== */
/* https://gist.github.com/akmeghdad/b1208c2caa601f0ba29f953faabac709 */
/* THANKS OF */
/* https://gist.github.com/samdenty/b96f4df576d05cb123248f8ebfa899b6 */
/* https://gist.github.com/Lightfire228/39dc2cf403237a190e79a000912691b2 */
/* ==> VScode 1.38 + */
/* [WINDOWS] add this code in %USERPROFILE%\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\workbench.desktop.main.css */ 
/* ==> VScode 1.31 to 1.37 */
/* [WINDOWS] add this code in %USERPROFILE%\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\workbench.main.css */ 
:root {
    /** Width of the lines **/
    --tree-width: 14px;
    /** 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);
  }
  
  .explorer-folders-view .monaco-tl-twistie {
    margin-left: -36px !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: -10px;
    height: 100%;
    transition: opacity 0.1s linear;
    border-left: 1px solid var(--tree-color);
  }
  
  .explorer-folders-view .monaco-list-row:after {
    content: '';
    background: var(--tree-color);
    opacity: var(--tree-opacity);
    position: absolute;
    width: 18px;
    height: 0px;
    top: 50%;
    transition: opacity 0.1s linear;
    border-top: 1px solid var(--tree-color);
  }
  
  .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-expanded]):after {
    width: calc(var(--tree-width) * 2 + 3px);
  }
  
  .explorer-folders-view .monaco-list-row:not([aria-level='1']):not([aria-level='2']):before {
    box-shadow: calc(-20px * 1) 0 0 0 var(--tree-color), 
      calc(-20px * 2) 0 0 0 var(--tree-color),
      calc(-20px * 3) 0 0 0 var(--tree-color),
      calc(-20px * 4) 0 0 0 var(--tree-color),
      calc(-20px * 5) 0 0 0 var(--tree-color),
      calc(-20px * 6) 0 0 0 var(--tree-color),
      calc(-20px * 7) 0 0 0 var(--tree-color),
      calc(-20px * 8) 0 0 0 var(--tree-color),
      calc(-20px * 9) 0 0 0 var(--tree-color),
      calc(-20px * 10) 0 0 0 var(--tree-color),
      calc(-20px * 11) 0 0 0 var(--tree-color),
      calc(-20px * 12) 0 0 0 var(--tree-color),
      calc(-20px * 13) 0 0 0 var(--tree-color),
      calc(-20px * 14) 0 0 0 var(--tree-color),
      calc(-20px * 15) 0 0 0 var(--tree-color),
      calc(-20px * 16) 0 0 0 var(--tree-color),
      calc(-20px * 17) 0 0 0 var(--tree-color),
      calc(-20px * 18) 0 0 0 var(--tree-color),
      calc(-20px * 19) 0 0 0 var(--tree-color),
      calc(-20px * 20) 0 0 0 var(--tree-color),
      calc(-20px * 21) 0 0 0 var(--tree-color),
      calc(-20px * 22) 0 0 0 var(--tree-color),
      calc(-20px * 23) 0 0 0 var(--tree-color),
      calc(-20px * 24) 0 0 0 var(--tree-color),
      calc(-20px * 25) 0 0 0 var(--tree-color),
      calc(-20px * 26) 0 0 0 var(--tree-color),
      calc(-20px * 27) 0 0 0 var(--tree-color),
      calc(-20px * 28) 0 0 0 var(--tree-color),
      calc(-20px * 29) 0 0 0 var(--tree-color),
      calc(-20px * 30) 0 0 0 var(--tree-color),
      calc(-20px * 31) 0 0 0 var(--tree-color),
      calc(-20px * 32) 0 0 0 var(--tree-color),
      calc(-20px * 33) 0 0 0 var(--tree-color),
      calc(-20px * 34) 0 0 0 var(--tree-color),
      calc(-20px * 35) 0 0 0 var(--tree-color),
      calc(-20px * 36) 0 0 0 var(--tree-color),
      calc(-20px * 37) 0 0 0 var(--tree-color),
      calc(-20px * 38) 0 0 0 var(--tree-color),
      calc(-20px * 39) 0 0 0 var(--tree-color),
      calc(-20px * 40) 0 0 0 var(--tree-color),
      calc(-20px * 41) 0 0 0 var(--tree-color),
      calc(-20px * 42) 0 0 0 var(--tree-color),
      calc(-20px * 43) 0 0 0 var(--tree-color),
      calc(-20px * 44) 0 0 0 var(--tree-color),
      calc(-20px * 45) 0 0 0 var(--tree-color),
      calc(-20px * 46) 0 0 0 var(--tree-color),
      calc(-20px * 47) 0 0 0 var(--tree-color),
      calc(-20px * 48) 0 0 0 var(--tree-color),
      calc(-20px * 49) 0 0 0 var(--tree-color),
      calc(-20px * 50) 0 0 0 var(--tree-color);
  }
  
  .explorer-folders-view .monaco-list-row[aria-level="1"]  { padding-left:  calc((1 * 6px) + 24px) !important; }
  .explorer-folders-view .monaco-list-row[aria-level="2"]  { padding-left:  calc((2 * 6px) + 24px) !important; }
  .explorer-folders-view .monaco-list-row[aria-level="3"]  { padding-left:  calc((3 * 6px) + 24px) !important; }
  .explorer-folders-view .monaco-list-row[aria-level="4"]  { padding-left:  calc((4 * 6px) + 24px) !important; }
  .explorer-folders-view .monaco-list-row[aria-level="5"]  { padding-left:  calc((5 * 6px) + 24px) !important; }
  .explorer-folders-view .monaco-list-row[aria-level="6"]  { padding-left: calc((6 * 6px) + 24px) !important; }
  .explorer-folders-view .monaco-list-row[aria-level="7"]  { padding-left: calc((7 * 6px) + 24px) !important; }
  .explorer-folders-view .monaco-list-row[aria-level="8"]  { padding-left: calc((8 * 6px) + 24px) !important; }
  .explorer-folders-view .monaco-list-row[aria-level="9"]  { padding-left: calc((9 * 6px) + 24px) !important; }
  .explorer-folders-view .monaco-list-row[aria-level="10"] { padding-left: calc((10 * 6px) + 24px) !important; }
  .explorer-folders-view .monaco-list-row[aria-level="11"] { padding-left: calc((11 * 6px) + 24px) !important; }
  .explorer-folders-view .monaco-list-row[aria-level="12"] { padding-left: calc((12 * 6px) + 24px) !important; }
  .explorer-folders-view .monaco-list-row[aria-level="13"] { padding-left: calc((13 * 6px) + 24px) !important; }
  .explorer-folders-view .monaco-list-row[aria-level="14"] { padding-left: calc((14 * 6px) + 24px) !important; }
  .explorer-folders-view .monaco-list-row[aria-level="15"] { padding-left: calc((15 * 6px) + 24px) !important; }
  .explorer-folders-view .monaco-list-row[aria-level="16"] { padding-left: calc((16 * 6px) + 24px) !important; }
  .explorer-folders-view .monaco-list-row[aria-level="17"] { padding-left: calc((17 * 6px) + 24px) !important; }
  .explorer-folders-view .monaco-list-row[aria-level="18"] { padding-left: calc((18 * 6px) + 24px) !important; }
  .explorer-folders-view .monaco-list-row[aria-level="19"] { padding-left: calc((19 * 6px) + 24px) !important; }
  .explorer-folders-view .monaco-list-row[aria-level="20"] { padding-left: calc((20 * 6px) + 24px) !important; }
  .explorer-folders-view .monaco-list-row[aria-level="21"] { padding-left: calc((21 * 6px) + 24px) !important; }
  .explorer-folders-view .monaco-list-row[aria-level="22"] { padding-left: calc((22 * 6px) + 24px) !important; }
  .explorer-folders-view .monaco-list-row[aria-level="23"] { padding-left: calc((23 * 6px) + 24px) !important; }
  .explorer-folders-view .monaco-list-row[aria-level="24"] { padding-left: calc((24 * 6px) + 24px) !important; }
  .explorer-folders-view .monaco-list-row[aria-level="25"] { padding-left: calc((25 * 6px) + 24px) !important; }
  .explorer-folders-view .monaco-list-row[aria-level="26"] { padding-left: calc((26 * 6px) + 24px) !important; }
  .explorer-folders-view .monaco-list-row[aria-level="27"] { padding-left: calc((27 * 6px) + 24px) !important; }
  .explorer-folders-view .monaco-list-row[aria-level="28"] { padding-left: calc((28 * 6px) + 24px) !important; }
  .explorer-folders-view .monaco-list-row[aria-level="29"] { padding-left: calc((29 * 6px) + 24px) !important; }
  .explorer-folders-view .monaco-list-row[aria-level="30"] { padding-left: calc((30 * 6px) + 24px) !important; }
  .explorer-folders-view .monaco-list-row[aria-level="31"] { padding-left: calc((31 * 6px) + 24px) !important; }
  .explorer-folders-view .monaco-list-row[aria-level="32"] { padding-left: calc((32 * 6px) + 24px) !important; }
  .explorer-folders-view .monaco-list-row[aria-level="33"] { padding-left: calc((33 * 6px) + 24px) !important; }
  .explorer-folders-view .monaco-list-row[aria-level="34"] { padding-left: calc((34 * 6px) + 24px) !important; }
  .explorer-folders-view .monaco-list-row[aria-level="35"] { padding-left: calc((35 * 6px) + 24px) !important; }
  .explorer-folders-view .monaco-list-row[aria-level="36"] { padding-left: calc((36 * 6px) + 24px) !important; }
  .explorer-folders-view .monaco-list-row[aria-level="37"] { padding-left: calc((37 * 6px) + 24px) !important; }
  .explorer-folders-view .monaco-list-row[aria-level="38"] { padding-left: calc((38 * 6px) + 24px) !important; }
  .explorer-folders-view .monaco-list-row[aria-level="39"] { padding-left: calc((39 * 6px) + 24px) !important; }
  .explorer-folders-view .monaco-list-row[aria-level="40"] { padding-left: calc((40 * 6px) + 24px) !important; }
  .explorer-folders-view .monaco-list-row[aria-level="41"] { padding-left: calc((41 * 6px) + 24px) !important; }
  .explorer-folders-view .monaco-list-row[aria-level="42"] { padding-left: calc((42 * 6px) + 24px) !important; }
  .explorer-folders-view .monaco-list-row[aria-level="43"] { padding-left: calc((43 * 6px) + 24px) !important; }
  .explorer-folders-view .monaco-list-row[aria-level="44"] { padding-left: calc((44 * 6px) + 24px) !important; }
  .explorer-folders-view .monaco-list-row[aria-level="45"] { padding-left: calc((45 * 6px) + 24px) !important; }
  .explorer-folders-view .monaco-list-row[aria-level="46"] { padding-left: calc((46 * 6px) + 24px) !important; }
  .explorer-folders-view .monaco-list-row[aria-level="47"] { padding-left: calc((47 * 6px) + 24px) !important; }
  .explorer-folders-view .monaco-list-row[aria-level="48"] { padding-left: calc((48 * 6px) + 24px) !important; }
  .explorer-folders-view .monaco-list-row[aria-level="49"] { padding-left: calc((49 * 6px) + 24px) !important; }
  .explorer-folders-view .monaco-list-row[aria-level="50"] { padding-left: calc((50 * 6px) + 24px) !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(-30px + (2 * 20px)); margin-left: 3px }
  .explorer-folders-view .monaco-list-row[aria-level="3"]:before, .monaco-list-row[aria-level="3"]:after { left: calc(-30px + (3 * 20px)); margin-left: 3px }
  .explorer-folders-view .monaco-list-row[aria-level="4"]:before, .monaco-list-row[aria-level="4"]:after { left: calc(-30px + (4 * 20px)); margin-left: 3px }
  .explorer-folders-view .monaco-list-row[aria-level="5"]:before, .monaco-list-row[aria-level="5"]:after { left: calc(-30px + (5 * 20px)); margin-left: 3px }
  .explorer-folders-view .monaco-list-row[aria-level="6"]:before, .monaco-list-row[aria-level="6"]:after { left: calc(-30px + (6 * 20px)); margin-left: 3px }
  .explorer-folders-view .monaco-list-row[aria-level="7"]:before, .monaco-list-row[aria-level="7"]:after { left: calc(-30px + (7 * 20px)); margin-left: 3px }
  .explorer-folders-view .monaco-list-row[aria-level="8"]:before, .monaco-list-row[aria-level="8"]:after { left: calc(-30px + (8 * 20px)); margin-left: 3px }
  .explorer-folders-view .monaco-list-row[aria-level="9"]:before, .monaco-list-row[aria-level="9"]:after { left: calc(-30px + (9 * 20px)); margin-left: 3px }
  .explorer-folders-view .monaco-list-row[aria-level="10"]:before, .monaco-list-row[aria-level="10"]:after{ left: calc(-30px + (10 * 20px)); margin-left: 3px }
  .explorer-folders-view .monaco-list-row[aria-level="11"]:before, .monaco-list-row[aria-level="11"]:after{ left: calc(-30px + (11 * 20px)); margin-left: 3px }
  .explorer-folders-view .monaco-list-row[aria-level="12"]:before, .monaco-list-row[aria-level="12"]:after{ left: calc(-30px + (12 * 20px)); margin-left: 3px }
  .explorer-folders-view .monaco-list-row[aria-level="13"]:before, .monaco-list-row[aria-level="13"]:after{ left: calc(-30px + (13 * 20px)); margin-left: 3px }
  .explorer-folders-view .monaco-list-row[aria-level="14"]:before, .monaco-list-row[aria-level="14"]:after{ left: calc(-30px + (14 * 20px)); margin-left: 3px }
  .explorer-folders-view .monaco-list-row[aria-level="15"]:before, .monaco-list-row[aria-level="15"]:after{ left: calc(-30px + (15 * 20px)); margin-left: 3px }
  .explorer-folders-view .monaco-list-row[aria-level="16"]:before, .monaco-list-row[aria-level="16"]:after{ left: calc(-30px + (16 * 20px)); margin-left: 3px }
  .explorer-folders-view .monaco-list-row[aria-level="17"]:before, .monaco-list-row[aria-level="17"]:after{ left: calc(-30px + (17 * 20px)); margin-left: 3px }
  .explorer-folders-view .monaco-list-row[aria-level="18"]:before, .monaco-list-row[aria-level="18"]:after{ left: calc(-30px + (18 * 20px)); margin-left: 3px }
  .explorer-folders-view .monaco-list-row[aria-level="19"]:before, .monaco-list-row[aria-level="19"]:after{ left: calc(-30px + (19 * 20px)); margin-left: 3px }
  .explorer-folders-view .monaco-list-row[aria-level="20"]:before, .monaco-list-row[aria-level="20"]:after{ left: calc(-30px + (20 * 20px)); margin-left: 3px }
  .explorer-folders-view .monaco-list-row[aria-level="21"]:before, .monaco-list-row[aria-level="21"]:after{ left: calc(-30px + (21 * 20px)); margin-left: 3px }
  .explorer-folders-view .monaco-list-row[aria-level="22"]:before, .monaco-list-row[aria-level="22"]:after{ left: calc(-30px + (22 * 20px)); margin-left: 3px }
  .explorer-folders-view .monaco-list-row[aria-level="23"]:before, .monaco-list-row[aria-level="23"]:after{ left: calc(-30px + (23 * 20px)); margin-left: 3px }
  .explorer-folders-view .monaco-list-row[aria-level="24"]:before, .monaco-list-row[aria-level="24"]:after{ left: calc(-30px + (24 * 20px)); margin-left: 3px }
  .explorer-folders-view .monaco-list-row[aria-level="25"]:before, .monaco-list-row[aria-level="25"]:after{ left: calc(-30px + (25 * 20px)); margin-left: 3px }
  .explorer-folders-view .monaco-list-row[aria-level="26"]:before, .monaco-list-row[aria-level="26"]:after{ left: calc(-30px + (26 * 20px)); margin-left: 3px }
  .explorer-folders-view .monaco-list-row[aria-level="27"]:before, .monaco-list-row[aria-level="27"]:after{ left: calc(-30px + (27 * 20px)); margin-left: 3px }
  .explorer-folders-view .monaco-list-row[aria-level="28"]:before, .monaco-list-row[aria-level="28"]:after{ left: calc(-30px + (28 * 20px)); margin-left: 3px }
  .explorer-folders-view .monaco-list-row[aria-level="29"]:before, .monaco-list-row[aria-level="29"]:after{ left: calc(-30px + (29 * 20px)); margin-left: 3px }
  .explorer-folders-view .monaco-list-row[aria-level="30"]:before, .monaco-list-row[aria-level="30"]:after{ left: calc(-30px + (30 * 20px)); margin-left: 3px }
  .explorer-folders-view .monaco-list-row[aria-level="31"]:before, .monaco-list-row[aria-level="31"]:after{ left: calc(-30px + (31 * 20px)); margin-left: 3px }
  .explorer-folders-view .monaco-list-row[aria-level="32"]:before, .monaco-list-row[aria-level="32"]:after{ left: calc(-30px + (32 * 20px)); margin-left: 3px }
  .explorer-folders-view .monaco-list-row[aria-level="33"]:before, .monaco-list-row[aria-level="33"]:after{ left: calc(-30px + (33 * 20px)); margin-left: 3px }
  .explorer-folders-view .monaco-list-row[aria-level="34"]:before, .monaco-list-row[aria-level="34"]:after{ left: calc(-30px + (34 * 20px)); margin-left: 3px }
  .explorer-folders-view .monaco-list-row[aria-level="35"]:before, .monaco-list-row[aria-level="35"]:after{ left: calc(-30px + (35 * 20px)); margin-left: 3px }
  .explorer-folders-view .monaco-list-row[aria-level="36"]:before, .monaco-list-row[aria-level="36"]:after{ left: calc(-30px + (36 * 20px)); margin-left: 3px }
  .explorer-folders-view .monaco-list-row[aria-level="37"]:before, .monaco-list-row[aria-level="37"]:after{ left: calc(-30px + (37 * 20px)); margin-left: 3px }
  .explorer-folders-view .monaco-list-row[aria-level="38"]:before, .monaco-list-row[aria-level="38"]:after{ left: calc(-30px + (38 * 20px)); margin-left: 3px }
  .explorer-folders-view .monaco-list-row[aria-level="39"]:before, .monaco-list-row[aria-level="39"]:after{ left: calc(-30px + (39 * 20px)); margin-left: 3px }
  .explorer-folders-view .monaco-list-row[aria-level="40"]:before, .monaco-list-row[aria-level="40"]:after{ left: calc(-30px + (40 * 20px)); margin-left: 3px }
  .explorer-folders-view .monaco-list-row[aria-level="41"]:before, .monaco-list-row[aria-level="41"]:after{ left: calc(-30px + (41 * 20px)); margin-left: 3px }
  .explorer-folders-view .monaco-list-row[aria-level="42"]:before, .monaco-list-row[aria-level="42"]:after{ left: calc(-30px + (42 * 20px)); margin-left: 3px }
  .explorer-folders-view .monaco-list-row[aria-level="43"]:before, .monaco-list-row[aria-level="43"]:after{ left: calc(-30px + (43 * 20px)); margin-left: 3px }
  .explorer-folders-view .monaco-list-row[aria-level="44"]:before, .monaco-list-row[aria-level="44"]:after{ left: calc(-30px + (44 * 20px)); margin-left: 3px }
  .explorer-folders-view .monaco-list-row[aria-level="45"]:before, .monaco-list-row[aria-level="45"]:after{ left: calc(-30px + (45 * 20px)); margin-left: 3px }
  .explorer-folders-view .monaco-list-row[aria-level="46"]:before, .monaco-list-row[aria-level="46"]:after{ left: calc(-30px + (46 * 20px)); margin-left: 3px }
  .explorer-folders-view .monaco-list-row[aria-level="47"]:before, .monaco-list-row[aria-level="47"]:after{ left: calc(-30px + (47 * 20px)); margin-left: 3px }
  .explorer-folders-view .monaco-list-row[aria-level="48"]:before, .monaco-list-row[aria-level="48"]:after{ left: calc(-30px + (48 * 20px)); margin-left: 3px }
  .explorer-folders-view .monaco-list-row[aria-level="49"]:before, .monaco-list-row[aria-level="49"]:after{ left: calc(-30px + (49 * 20px)); margin-left: 3px }
  .explorer-folders-view .monaco-list-row[aria-level="50"]:before, .monaco-list-row[aria-level="50"]:after{ left: calc(-30px + (50 * 20px)); margin-left: 3px }

workbench.tree.css 1.41.0 (-)

/* =================== */
/* UP TO VScode 1.41.0 */
/* =================== */
/* https://gist.github.com/akmeghdad/b1208c2caa601f0ba29f953faabac709 */
/* THANKS OF */
/* https://gist.github.com/samdenty/b96f4df576d05cb123248f8ebfa899b6 */
/* https://gist.github.com/Lightfire228/39dc2cf403237a190e79a000912691b2 */
/* ==> VScode 1.38 + */
/* [WINDOWS] add this code in %USERPROFILE%\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\workbench.desktop.main.css */ 
/* ==> VScode 1.31 to 1.37 */
/* [WINDOWS] add this code in %USERPROFILE%\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\workbench.main.css */ 
 :root {
  /** Width of the lines **/
  --tree-width: 14px;
  /** 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);
}

.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: -10px;
  height: 100%;
  transition: opacity 0.1s linear;
  border-left: 1px solid var(--tree-color);
}

.explorer-folders-view .monaco-list-row:after {
  content: '';
  background: var(--tree-color);
  opacity: var(--tree-opacity);
  position: absolute;
  width: 18px;
  height: 0px;
  top: 50%;
  transition: opacity 0.1s linear;
  border-top: 1px solid var(--tree-color);
}

.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-expanded]):after {
  width: calc(var(--tree-width) * 2 + 3px);
}

.explorer-folders-view .monaco-list-row:not([aria-level='1']):not([aria-level='2']):before {
  box-shadow: -20px 0 0 0 var(--tree-color), -40px 0 0 0 var(--tree-color),
    -60px 0 0 0 var(--tree-color), -80px 0 0 0 var(--tree-color),
    -100px 0 0 0 var(--tree-color), -120px 0 0 0 var(--tree-color),
    -140px 0 0 0 var(--tree-color), -160px 0 0 0 var(--tree-color),
    -180px 0 0 0 var(--tree-color), -200px 0 0 0 var(--tree-color),
    -220px 0 0 0 var(--tree-color), -240px 0 0 0 var(--tree-color),
    -260px 0 0 0 var(--tree-color);
}

.explorer-folders-view .monaco-list-row[aria-level="1"]  { padding-left:   0px !important; }
.explorer-folders-view .monaco-list-row[aria-level="2"]  { padding-left:  20px !important; }
.explorer-folders-view .monaco-list-row[aria-level="3"]  { padding-left:  40px !important; }
.explorer-folders-view .monaco-list-row[aria-level="4"]  { padding-left:  60px !important; }
.explorer-folders-view .monaco-list-row[aria-level="5"]  { padding-left:  80px !important; }
.explorer-folders-view .monaco-list-row[aria-level="6"]  { padding-left: 100px !important; }
.explorer-folders-view .monaco-list-row[aria-level="7"]  { padding-left: 120px !important; }
.explorer-folders-view .monaco-list-row[aria-level="8"]  { padding-left: 140px !important; }
.explorer-folders-view .monaco-list-row[aria-level="9"]  { padding-left: 160px !important; }
.explorer-folders-view .monaco-list-row[aria-level="10"] { padding-left: 180px !important; }
.explorer-folders-view .monaco-list-row[aria-level="11"] { padding-left: 200px !important; }
.explorer-folders-view .monaco-list-row[aria-level="12"] { padding-left: 220px !important; }
.explorer-folders-view .monaco-list-row[aria-level="13"] { padding-left: 240px !important; }
.explorer-folders-view .monaco-list-row[aria-level="14"] { padding-left: 260px !important; }
.explorer-folders-view .monaco-list-row[aria-level="15"] { padding-left: 280px !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(-30px + (2 * 20px)); margin-left: 3px }
.explorer-folders-view .monaco-list-row[aria-level="3"]:before, .monaco-list-row[aria-level="3"]:after { left: calc(-30px + (3 * 20px)); margin-left: 3px }
.explorer-folders-view .monaco-list-row[aria-level="4"]:before, .monaco-list-row[aria-level="4"]:after { left: calc(-30px + (4 * 20px)); margin-left: 3px }
.explorer-folders-view .monaco-list-row[aria-level="5"]:before, .monaco-list-row[aria-level="5"]:after { left: calc(-30px + (5 * 20px)); margin-left: 3px }
.explorer-folders-view .monaco-list-row[aria-level="6"]:before, .monaco-list-row[aria-level="6"]:after { left: calc(-30px + (6 * 20px)); margin-left: 3px }
.explorer-folders-view .monaco-list-row[aria-level="7"]:before, .monaco-list-row[aria-level="7"]:after { left: calc(-30px + (7 * 20px)); margin-left: 3px }
.explorer-folders-view .monaco-list-row[aria-level="8"]:before, .monaco-list-row[aria-level="8"]:after { left: calc(-30px + (8 * 20px)); margin-left: 3px }
.explorer-folders-view .monaco-list-row[aria-level="9"]:before, .monaco-list-row[aria-level="9"]:after { left: calc(-30px + (9 * 20px)); margin-left: 3px }
.explorer-folders-view .monaco-list-row[aria-level="10"]:before, .monaco-list-row[aria-level="10"]:after{ left: calc(-30px + (10 * 20px)); margin-left: 3px }
.explorer-folders-view .monaco-list-row[aria-level="11"]:before, .monaco-list-row[aria-level="11"]:after{ left: calc(-30px + (11 * 20px)); margin-left: 3px }
.explorer-folders-view .monaco-list-row[aria-level="12"]:before, .monaco-list-row[aria-level="12"]:after{ left: calc(-30px + (12 * 20px)); margin-left: 3px }
.explorer-folders-view .monaco-list-row[aria-level="13"]:before, .monaco-list-row[aria-level="13"]:after{ left: calc(-30px + (13 * 20px)); margin-left: 3px }
.explorer-folders-view .monaco-list-row[aria-level="14"]:before, .monaco-list-row[aria-level="14"]:after{ left: calc(-30px + (14 * 20px)); margin-left: 3px }
.explorer-folders-view .monaco-list-row[aria-level="15"]:before, .monaco-list-row[aria-level="15"]:after{ left: calc(-30px + (15 * 20px)); margin-left: 3px }

Thanks for the updated version!

Thank you, sir!

How this code install and where?

How this code install and where?

See original instructions here https://gist.github.com/samdenty/b96f4df576d05cb123248f8ebfa899b6

Summary: You need to install this https://github.com/be5invis/vscode-custom-css and then for Windows: 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 to the end of the file.

Thank you!

First of all: thank you !!
However ... there are still two minor problems (vs code 1.32.1):

1. lines still visible in the menu drop-down
   
2. Lines strike through icons with the standard icon set
   

Hi @garyee
I updated the code for first problem
For second: Do you use the extention for icons (which)?

Thanks!

Thank you! I really hope Microsoft VSC includes this feature in the future!

Hi @akmeghdad,

I have the same problem like @garyee. I don't have installed any extension for icons:

2. Lines strike through icons with the standard icon set
   

You can simply change
--tree-width: 14px;
to
--tree-width: 5px;

This works for me