VS CSS Fixes

vs.css

.monaco-workbench .sidebar>.content {
  padding-top: 10px;
  padding-left: 20px;
  padding-right: 20px;
}

.monaco-tl-twistie.collapsible.collapsed:not(.loading) {
  margin-top: 10px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none'%3E%3Crect x='0' y='0' width='11' height='11' rx='1.5' fill='%23fff'%3E%3C/rect%3E%3Crect x='1' y='1' width='9' height='9' rx='1.5' stroke='%23333'%3E%3C/rect%3E%3Cline x1='3.5' y1='5.5' x2='7.5' y2='5.5' stroke='%23333'%3E%3C/line%3E%3Cline x1='5.5' y1='3.5' x2='5.5' y2='7.5' stroke='%23333'%3E%3C/line%3E%3C/svg%3E") !important;
}
.monaco-tl-twistie.collapsible:not(.loading) {
  margin-top: 10px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none'%3E%3Crect x='0' y='0' width='11' height='11' rx='1.5' fill='%23fff'%3E%3C/rect%3E%3Crect x='1' y='1' width='9' height='9' rx='1.5' stroke='%23333'%3E%3C/rect%3E%3Cline x1='3.5' y1='5.5' x2='7.5' y2='5.5' stroke='%23333'%3E%3C/line%3E%3C/svg%3E") !important;
}

.vs-dark .monaco-tl-twistie.collapsible.collapsed:not(.loading) {
  margin-top: 10px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none'%3E%3Crect x='0' y='0' width='11' height='11' rx='1.5' fill='%23000'%3E%3C/rect%3E%3Crect x='1' y='1' width='9' height='9' rx='1.5' stroke='%23FFF'%3E%3C/rect%3E%3Cline x1='3.5' y1='5.5' x2='7.5' y2='5.5' stroke='%23FFF'%3E%3C/line%3E%3Cline x1='5.5' y1='3.5' x2='5.5' y2='7.5' stroke='%23FFF'%3E%3C/line%3E%3C/svg%3E") !important;
}
.vs-dark .monaco-tl-twistie.collapsible:not(.loading) {
  margin-top: 10px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none'%3E%3Crect x='0' y='0' width='11' height='11' rx='1.5' fill='%23000'%3E%3C/rect%3E%3Crect x='1' y='1' width='9' height='9' rx='1.5' stroke='%23FFF'%3E%3C/rect%3E%3Cline x1='3.5' y1='5.5' x2='7.5' y2='5.5' stroke='%23FFF'%3E%3C/line%3E%3C/svg%3E") !important;
}

.title-actions > .monaco-toolbar > .monaco-action-bar > .actions-container > .action-item > .action-label.icon.explorer-action {
  display: none !important;
}
.editor-actions > .monaco-toolbar > .monaco-action-bar {
  display: none !important;
}

:root {
  /** Width of the lines **/
  --tree-width: 14px;
  /** Opacity of the lines whilst not hovered **/
  --tree-opacity: 0.2;
  /** Opacity of the lines on hover **/
  --tree-opacity-hover: 0.2;
  /** 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);
  z-index: 10000;
}

.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);
  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-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(-31px + (2 * 19px)); }
.explorer-folders-view .monaco-list-row[aria-level="3"]:before, .monaco-list-row[aria-level="3"]:after { left: calc(-30px + (3 * 19px)); }
.explorer-folders-view .monaco-list-row[aria-level="4"]:before, .monaco-list-row[aria-level="4"]:after { left: calc(-29px + (4 * 19px)); }
.explorer-folders-view .monaco-list-row[aria-level="5"]:before, .monaco-list-row[aria-level="5"]:after { left: calc(-28px + (5 * 19px)); }
.explorer-folders-view .monaco-list-row[aria-level="6"]:before, .monaco-list-row[aria-level="6"]:after { left: calc(-27px + (6 * 19px)); }
.explorer-folders-view .monaco-list-row[aria-level="7"]:before, .monaco-list-row[aria-level="7"]:after { left: calc(-30px + (7 * 19px)); }
.explorer-folders-view .monaco-list-row[aria-level="8"]:before, .monaco-list-row[aria-level="8"]:after { left: calc(-30px + (8 * 19px)); }
.explorer-folders-view .monaco-list-row[aria-level="9"]:before, .monaco-list-row[aria-level="9"]:after { left: calc(-30px + (9 * 19px)); }
.explorer-folders-view .monaco-list-row[aria-level="10"]:before, .monaco-list-row[aria-level="10"]:after{ left: calc(-30px + (10 * 19px)); }
.explorer-folders-view .monaco-list-row[aria-level="11"]:before, .monaco-list-row[aria-level="11"]:after{ left: calc(-30px + (11 * 19px)); }
.explorer-folders-view .monaco-list-row[aria-level="12"]:before, .monaco-list-row[aria-level="12"]:after{ left: calc(-30px + (12 * 19px)); }
.explorer-folders-view .monaco-list-row[aria-level="13"]:before, .monaco-list-row[aria-level="13"]:after{ left: calc(-30px + (13 * 19px)); }
.explorer-folders-view .monaco-list-row[aria-level="14"]:before, .monaco-list-row[aria-level="14"]:after{ left: calc(-30px + (14 * 19px)); }
.explorer-folders-view .monaco-list-row[aria-level="15"]:before, .monaco-list-row[aria-level="15"]:after{ left: calc(-30px + (15 * 19px)); }

Notes

• https://yoksel.github.io/url-encoder/
• https://medium.com/@marciobarrios/minimal-user-interface-for-visual-studio-code-2ab849eb6d8e
• http://calebporzio.com/my-vs-code-setup-2/
• https://marketplace.visualstudio.com/items?itemName=be5invis.vscode-custom-css

Code taken from

• https://github.com/gaearon/subliminal
• https://gist.github.com/samdenty/b96f4df576d05cb123248f8ebfa899b6
• Zeit UI

Theme

• https://github.com/u29dc/mno
• https://github.com/ctrlplusb/i-theme
• https://github.com/arthurwhite/white-theme-vscode
• https://github.com/sallar/vscode-duotone-dark

Icon fonts

• Minimal Icons VSCode
• https://github.com/keenethics/neutral-icon-theme