Skip to content

Instantly share code, notes, and snippets.

@EilayDev
Last active July 28, 2019 13:16
Show Gist options
  • Save EilayDev/9397e91b99813730a972710edd03d0cb to your computer and use it in GitHub Desktop.
Save EilayDev/9397e91b99813730a972710edd03d0cb to your computer and use it in GitHub Desktop.
File tree workbench.main.css June 2019 (1.36)
/* THANKS TO: */
/* https://gist.github.com/akmeghdad/b1208c2caa601f0ba29f953faabac709 */
/* https://gist.github.com/samdenty/b96f4df576d05cb123248f8ebfa899b6 */
/* https://gist.github.com/Lightfire228/39dc2cf403237a190e79a000912691b2 */
/* [WINDOWS] add this code in %USERPROFILE%\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\workbench.main.css */
/* I have only tested it with Seti icon theme */
: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);
}
.monaco-list.list_id_2 .monaco-tl-indent {
display:none;
}
.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) - 4px);
}
.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 }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment