Last active
July 28, 2019 13:16
-
-
Save EilayDev/9397e91b99813730a972710edd03d0cb to your computer and use it in GitHub Desktop.
File tree workbench.main.css June 2019 (1.36)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* 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