vscode.css

vscode.css

/*----------------------------------
 * Custom CSS Styles
 * Derivative from https://github.com/glennraya
 * https://github.com/glennraya/vscode-settings-json/blob/main/custom-vscode.css
 *--------------------------------- */
:root {
  --transition: opacity 0.3s !important;
}
.codicon { color:#90846b !important; } 
.codicon.outline-element-icon { display:none; }
.codicon.codicon-breadcrumb-separator { color:#333 !important; }

/*----------------------------------
 * Quick Command Palette
 *-------------------------------- */
.quick-input-widget {
  border-radius: 10px !important;
  box-shadow: 0px 8px 20px #0007 !important;
  padding: 10px 10px 18px 10px !important;
  top: 20% !important;
}
/* Command palette input box */
.quick-input-filter .monaco-inputbox {
  background-color: #151516 !important;
  border-radius: 12px !important;
  border: none !important;
  font-family: "Liberation Mono" !important;
  font-size: 16px !important;
  margin-bottom: 16px !important;
  padding: 8px !important;
}
/* Command palette placeholder text */
.monaco-inputbox input::placeholder {
  color: #fff1 !important;
}
/* Actions Container */
.titlebar-center .actions-container {
  display: none !important;
}
/* Some weird bubble that keeps popping up */
.context-view.monaco-component.top.left {
  display: none !important;
}
/* Darken main window when command palette is open */
.monaco-grid-view {
  transition: filter 0.2s;
}
.monaco-workbench:has(> .quick-input-widget):not(:has(> .quick-input-widget[style*="display: none"])) {
  .monaco-grid-view {
    filter: brightness(80%) !important;
  }
}

/*----------------------------------
 * Other Action Containers
 *-------------------------------- */
.pane-composite-part {
  .composite-bar,
  .title-actions { opacity:0; transition:var(--transition); }
  &:hover .composite-bar,
  &:hover .title-actions { opacity:1; }
}
.pane.expanded {
  .actions { display:block !important; opacity:0; transition:var(--transition); }
  &:hover .actions { opacity:1; }
}
.titlebar .actions-container {
  opacity:0;
  transition:var(--transition);
  &:hover { opacity:1; }
}


/*----------------------------------
 * File Tabs
 *-------------------------------- */
.tabs-and-actions-container .tabs-container > .tab {
  border-top-left-radius: 8px !important;
  border-top-right-radius: 8px !important;
}
.sidebar.left {
  border-right: 1px solid #0000 !important;
}
.basepanel.right {
  border-left: 1px solid #0000 !important;
}

/*----------------------------------
 * Tooltips
 *-------------------------------- */
.monaco-editor-hover,
.monaco-hover {
    box-shadow: 0px 8px 32px #0008 !important;
    padding: 8px !important;
    border-radius: 8px !important;
    border-color: transparent !important;
}

/*----------------------------------
 * Editor (rounded corners)
 *-------------------------------- */
.monaco-breadcrumbs {
  border-top-right-radius: 8px;
}
.editor .content {
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

/*----------------------------------
 * Scrollbar
 *-------------------------------- */
.decorationsOverviewRuler,
.xterm-decoration-overview-ruler {
  width: 7px !important;
  opacity: 0.5;
}
.slider {
  position: absolute !important;
  right: 1px !important;
  width: 5px !important;
  border-radius: 3px;
  left: auto !important;
}

/*----------------------------------
 * Pane Headers
 *-------------------------------- */
.monaco-pane-view .pane > .pane-header {
  .twisty-container.codicon { opacity:0; }
}

/*----------------------------------
 * Status Bar (footer)
 *-------------------------------- */
footer.statusbar {
  > .items-container {
    opacity: 0;
    transition: var(--transition);
  }
  &:hover > .items-container {
    opacity: 1;
  }
}