VS Code - Smaller Activity bar, larger sidebar

custom.css

/*
 * VS Code - Smaller Activity bar, larger sidebar (left side only)
 *
 * To enable:
 * - Install https://marketplace.visualstudio.com/items?itemName=be5invis.vscode-custom-css
 * - Save content of this file somewhere, CUSTOMCSSPATH.
 * - Add to VS Code user settings:
 *      "vscode_custom_css.imports": ["file://CUSTOMCSSPATH"],
 *      "vscode_custom_css.policy": true,
 * - $ sudo -E code --user-data-dir=$HOME/.config/Code/
 * - Ctrl+P > "Enable Custom CSS and JS"
 * - Ignore VS Code integrity warning
 *
 * TODO:
 *   - Adapt to right side sidebar
 *   - Make everything dynamic
 */
 

:root {
  --activitybar-width: 25px;
  --activitybar-void: calc(50px - var(--activitybar-width));
}

/* Resize Activity bar */
.activitybar.left {
  width: var(--activitybar-width)!important;
}

.activitybar.left .content {
  width: var(--activitybar-width)!important;
}

.monaco-workbench>.activitybar>.content .monaco-action-bar .action-label {
  height: var(--activitybar-width);
  padding: 0 0 0 var(--activitybar-width)!important;
}

.monaco-workbench.nosidebar >.activitybar.left {
  margin-left: var(--activitybar-void)!important;
}
.monaco-workbench.nosidebar {
  margin-left: calc(-1 * var(--activitybar-void))!important;
}

.monaco-workbench>.activitybar .monaco-action-bar .action-label {
  /* TODO: Make dependant on var */
  -webkit-mask-size: 50% 50%!important;
}

.monaco-workbench>.activitybar>.content .monaco-action-bar .badge {
  width: var(--activitybar-width);
}

/* TODO: Make dependant on var */
.monaco-workbench>.activitybar>.content .monaco-action-bar .badge .badge-content {
    position: absolute;
    top: 17px;
    right: 4px;
    font-size: 6px;
    min-width: 4px;
    height: 9px;
    line-height: 9px;
    padding: 0 2px;
    border-radius: 10px;
    text-align: center;
}

.sidebar.left {
  left: var(--activitybar-width)!important;
}

.sidebar.left::before {
  content: "";
  width: calc(100% + var(--activitybar-width));
  height: 100%;
  position: absolute;
  background: inherit;
}

.sidebar.left > .content {
  width: calc(100% + var(--activitybar-width))!important;
}