How to add transparency to empty page

[gonzastoll]

I have a custom css file going on, but for some reason the main page (empty state) editor content is not getting a transparency. What would be the css class for it?

My css file:

.scroll-decoration {
  box-shadow: none !important;
}

.minimap, .editor-scrollable>.decorationsOverviewRuler {
  opacity: 0.6;
}

.editor-container {
  background: transparent !important;
}

.monaco-workbench .part.sidebar
.search-view .search-widget .input-box, .search-view .search-widget .input-box .monaco-inputbox,
.monaco-workbench .part.editor>.content>.one-editor-silo>.container>.title .tabs-container>.tab,
.monaco-editor-background,
.monaco-workbench .part>.content,
.monaco-workbench .editor>.content>.one-editor-silo.editor-one,
.monaco-workbench .part.editor>.content>.one-editor-silo>.container>.title,
.monaco-workbench .part>.title,
.monaco-workbench,
.monaco-workbench .part,
body {
  background: rgba(1, 22, 39, 0.038) !important;
}

.editor-group-container>.tabs {
  background-color: transparent !important;
}

.editor-group-container>.tabs .tab {
  background-color: transparent !important;
}

.editor-group-container>.tabs .tab.active, .editor-group-container>.tabs .monaco-breadcrumbs {
  background-color: rgba(1, 22, 39, 0.3) !important;
}

.monaco-list.settings-toc-tree .monaco-list-row.focused {
  outline-color: rgb(0, 43, 54, 0.6) !important;
}

.monaco-list.settings-toc-tree .monaco-list-row.selected,
.monaco-list.settings-toc-tree .monaco-list-row.focused,
.monaco-list .monaco-list-row.selected,
.monaco-list.settings-toc-tree:not(.drop-target) .monaco-list-row:hover:not(.selected):not(.focused) {
  background-color: rgba(72, 85, 127, 0.487) !important;
  color: #ffffff !important;
}

.monaco-list.settings-editor-tree .monaco-list-row {
  background-color: transparent !important;
  outline-color: transparent !important;
}

.monaco-inputbox {
  background-color: rgba(41, 41, 41,0.2) !important;
}

.monaco-editor .selected-text {
  background-color: rgba(0, 90, 111, 0.6) !important;
}

.monaco-editor .focused .selected-text {
  background-color: rgba(0, 90, 111, 0.3) !important;
}

.monaco-editor .view-overlays .current-line {
  border-color: rgba(7, 54, 66,0.2) !important;
}

.extension-editor,
.monaco-workbench .part.editor>.content>.one-editor-silo>.container>.title .tabs-container>.tab.active,
.preferences-editor>.preferences-header,
.preferences-editor>.preferences-editors-container.side-by-side-preferences-editor .preferences-header-container,
.monaco-editor, .monaco-editor .inputarea.ime-input,
.monaco-list .monaco-list-rows {
  background: transparent !important;
}

.monaco-workbench .part.sidebar {
  background-color: rgba(0, 33, 43, 0.3) !important;
}

.notification-toast {
  padding: 4px 6px !important;
  border: 1px solid #c6c6c6 !important;
  border-radius: 3px !important;
  box-shadow: none !important;
  background-color: rgba(1, 22, 39, 0.8) !important;
}

.notifications-list-container,
.notifications-list-container .monaco-list-row {
  background: transparent !important;
}

.monaco-button {
  border-radius: 3px !important;
}

.quick-input-widget {
  background-color: rgba(1, 22, 39, 0.9) !important;
  padding: 4px 6px !important;
  border-radius: 3px !important;
  top: 50% !important;
  transform: translate(0%, -50%) !important;
  box-shadow: none !important;
  border: 1px solid #c6c6c6 !important;
}

.editor-group-container>.tabs .tab {
  border: none !important;
}

.terminal-outer-container,
.xterm-viewport,
.xterm-rows {
  background-color: transparent !important;
}

.monaco-workbench.fullscreen {
  background-color: #002b36 !important;
}

.monaco-editor .margin {
  background: rgba(1, 22, 39, 0.038) !important;
}

.notebookOverlay.notebook-editor,
.cell-statusbar-container,
.margin-view-overlays,
.monaco-list-row:hover:not(.selected):not(.focused) {
  background-color: transparent !important;
}

.monaco-workbench .pane-header {
  background-color: rgba(1, 22, 39, 0.3) !important;
}

[illixion]

I don’t provide support for custom themes, apologies. You could try using the Developer Console in VSCode through the Command Palette to play with VSCode’s styles in real-time. Also, consider checking the existing theme for Dark+ and its alternative version that only styles the sidebar, the difference between those themes has the classes that you need to style.