@lvce-editor/server 0.4.4 → 0.6.0

package/static/fbac85f/css/App.css

@@ -0,0 +1,2502 @@
+/*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */
+
+/*
+Document
+========
+*/
+
+/**
+Use a better box model (opinionated).
+*/
+
+*,
+::before,
+::after {
+	box-sizing: border-box;
+}
+
+/**
+Use a more readable tab size (opinionated).
+*/
+
+html {
+	-moz-tab-size: 4;
+	tab-size: 4;
+}
+
+/**
+1. Correct the line height in all browsers.
+2. Prevent adjustments of font size after orientation changes in iOS.
+*/
+
+html {
+	line-height: 1.15; /* 1 */
+	-webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/*
+Sections
+========
+*/
+
+/**
+Remove the margin in all browsers.
+*/
+
+body {
+	margin: 0;
+}
+
+/**
+Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
+*/
+
+body {
+	font-family:
+		system-ui,
+		-apple-system, /* Firefox supports this but not yet `system-ui` */
+		'Segoe UI',
+		Roboto,
+		Helvetica,
+		Arial,
+		sans-serif,
+		'Apple Color Emoji',
+		'Segoe UI Emoji';
+}
+
+/*
+Grouping content
+================
+*/
+
+/**
+1. Add the correct height in Firefox.
+2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
+*/
+
+hr {
+	height: 0; /* 1 */
+	color: inherit; /* 2 */
+}
+
+/*
+Text-level semantics
+====================
+*/
+
+/**
+Add the correct text decoration in Chrome, Edge, and Safari.
+*/
+
+abbr[title] {
+	text-decoration: underline dotted;
+}
+
+/**
+Add the correct font weight in Edge and Safari.
+*/
+
+b,
+strong {
+	font-weight: bolder;
+}
+
+/**
+1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
+2. Correct the odd 'em' font sizing in all browsers.
+*/
+
+code,
+kbd,
+samp,
+pre {
+	font-family:
+		ui-monospace,
+		SFMono-Regular,
+		Consolas,
+		'Liberation Mono',
+		Menlo,
+		monospace; /* 1 */
+	font-size: 1em; /* 2 */
+}
+
+/**
+Add the correct font size in all browsers.
+*/
+
+small {
+	font-size: 80%;
+}
+
+/**
+Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
+*/
+
+sub,
+sup {
+	font-size: 75%;
+	line-height: 0;
+	position: relative;
+	vertical-align: baseline;
+}
+
+sub {
+	bottom: -0.25em;
+}
+
+sup {
+	top: -0.5em;
+}
+
+/*
+Tabular data
+============
+*/
+
+/**
+1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
+2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
+*/
+
+table {
+	text-indent: 0; /* 1 */
+	border-color: inherit; /* 2 */
+}
+
+/*
+Forms
+=====
+*/
+
+/**
+1. Change the font styles in all browsers.
+2. Remove the margin in Firefox and Safari.
+*/
+
+button,
+input,
+optgroup,
+select,
+textarea {
+	font-family: inherit; /* 1 */
+	font-size: 100%; /* 1 */
+	line-height: 1.15; /* 1 */
+	margin: 0; /* 2 */
+}
+
+/**
+Remove the inheritance of text transform in Edge and Firefox.
+1. Remove the inheritance of text transform in Firefox.
+*/
+
+button,
+select { /* 1 */
+	text-transform: none;
+}
+
+/**
+Correct the inability to style clickable types in iOS and Safari.
+*/
+
+button,
+[type='button'],
+[type='reset'],
+[type='submit'] {
+	-webkit-appearance: button;
+}
+
+/**
+Remove the inner border and padding in Firefox.
+*/
+
+::-moz-focus-inner {
+	border-style: none;
+	padding: 0;
+}
+
+/**
+Restore the focus styles unset by the previous rule.
+*/
+
+:-moz-focusring {
+	outline: 1px dotted ButtonText;
+}
+
+/**
+Remove the additional ':invalid' styles in Firefox.
+See: https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737
+*/
+
+:-moz-ui-invalid {
+	box-shadow: none;
+}
+
+/**
+Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
+*/
+
+legend {
+	padding: 0;
+}
+
+/**
+Add the correct vertical alignment in Chrome and Firefox.
+*/
+
+progress {
+	vertical-align: baseline;
+}
+
+/**
+Correct the cursor style of increment and decrement buttons in Safari.
+*/
+
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+	height: auto;
+}
+
+/**
+1. Correct the odd appearance in Chrome and Safari.
+2. Correct the outline style in Safari.
+*/
+
+[type='search'] {
+	-webkit-appearance: textfield; /* 1 */
+	outline-offset: -2px; /* 2 */
+}
+
+/**
+Remove the inner padding in Chrome and Safari on macOS.
+*/
+
+::-webkit-search-decoration {
+	-webkit-appearance: none;
+}
+
+/**
+1. Correct the inability to style clickable types in iOS and Safari.
+2. Change font properties to 'inherit' in Safari.
+*/
+
+::-webkit-file-upload-button {
+	-webkit-appearance: button; /* 1 */
+	font: inherit; /* 2 */
+}
+
+/*
+Interactive
+===========
+*/
+
+/*
+Add the correct display in Chrome and Safari.
+*/
+
+summary {
+	display: list-item;
+}
+
+body {
+  margin: 0;
+}
+.Terminal {
+  position: relative;
+  contain: strict;
+  width: 780px;
+  height: 625px;
+  background: black;
+}
+
+.Layers {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+.TerminalCanvasText,
+.TerminalCanvasCursor {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+.TerminalCanvasCursor {
+  opacity: 0.5;
+}
+
+.TerminalTextArea {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 0;
+  height: 0;
+  border: none;
+  outline: none;
+  padding: 0;
+  margin: 0;
+}
+
+/*************/
+/* __Theme.css */
+/*************/
+:root {
+  /* TODO sizes is not theme */
+  --EditorFontSize: 16px;
+  --EditorLineHeight: 20px;
+}
+/*************/
+/* _Global.css */
+/*************/
+@font-face {
+  font-family: 'Fira Code';
+  src: url(/fbac85f/fonts/FiraCode-VariableFont.ttf) format('truetype');
+}
+
+/* TODO check if contain strict also makes sense for html and body */
+
+html,
+body {
+  height: 100%;
+}
+
+body {
+  /* font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif; */
+  font-family: system-ui, Ubuntu, Droid Sans, sans-serif;
+  user-select: none;
+}
+
+#Workbench {
+  width: 100%;
+  height: 100%;
+  /* width: 800px;
+  height: 600px; */
+  contain: strict;
+  font-size: 13px;
+  line-height: 1.4;
+  /* display: grid; */
+}
+
+#TitleBar,
+#SideBar,
+#Main,
+#ActivityBar,
+#Panel,
+#StatusBar {
+  contain: strict;
+  /*
+   * not sure why this works, but position fixed combined with backface
+   * visibility hidden gives great rendering performance,
+   * see also https://benfrain.com/improving-css-performance-fixed-position-elements/
+   *
+   *
+   * typing benchmark (before):
+   * 216ms scripting
+   * 62ms rendering
+   * 26ms painting
+   * 100ms system
+   *
+   * typing benchmark (after):
+   * 189ms scripting
+   * 117ms rendering
+   * 41ms painting
+   * 122ms system
+   */
+  position: fixed;
+  backface-visibility: hidden;
+}
+
+#TitleBar {
+}
+
+#Main {
+  width: 100%;
+  height: 100%;
+}
+
+#SideBar {
+  /* TODO width and height are set via javascript, this might not be necessary */
+  width: 200px;
+  height: 200px;
+  bottom: 0;
+  right: 0;
+}
+
+.Hidden {
+  display: none !important;
+}
+
+[hidden] {
+  display: none !important;
+}
+
+/* TODO */
+*::-webkit-scrollbar {
+  /* width: 10px; */
+}
+*::-webkit-scrollbar-track {
+  /* -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); */
+}
+
+*::-webkit-scrollbar-thumb {
+  /* background-color: rgba(57, 71, 71, 0.6); */
+  /* outline: 1px solid slategrey; */
+}
+
+/*
+ * Using the will-change attribute creates a separate layer.
+ * Updating that layer will be faster since only that layer needs style recalculation and repainting (instead of the whole page)
+ * However this hack should be used sparingly since too many layers can have negative impact for performance
+ */
+.TransformHack {
+  /* will-change: transform;
+  contain: strict; */
+}
+/*************/
+/* Widgets.css */
+/*************/
+#Widgets {
+  contain: strict;
+  position: fixed;
+  top: 0;
+  left: 0;
+  inset: 0;
+  pointer-events: none;
+}
+
+/* TODO maybe hide widgets container if empty*/
+#Widgets:empty {
+  display: none;
+}
+/*************/
+/* ViewletTerminal.css */
+/*************/
+
+.TerminalCanvasText {
+  width: 780px;
+  height: 625px;
+}
+
+.TerminalCanvasCursor {
+  width: 780px;
+  height: 625px;
+}
+/*************/
+/* ViewletSourceControl.css */
+/*************/
+.Viewlet[data-viewlet-id='SourceControl']:focus {
+  outline: 1px solid red;
+  outline-offset: -1px;
+}
+
+.ViewSourceControlInput {
+  /* margin: 20px; */
+}
+
+.ViewSourceControlInput[aria-busy] {
+  background: lightblue;
+}
+/*************/
+/* ViewletSearch.css */
+/*************/
+.ViewletSearchInput {
+  /* background-color: rgb(36, 41, 42);
+  color: rgb(225, 225, 225);
+  border-width: 1px;
+  border-style: solid;
+  border-color: rgb(55, 65, 63);
+  padding: 2px 4px;
+  width: 100%;
+  font-size: 80%;
+  line-height: 100%;
+  height: 26px; */
+  margin-left: 18px;
+  width: calc(100% - 36px);
+}
+
+.Viewlet[data-viewlet-id='Search'] {
+  /* display: flex; */
+  /* flex-direction: column; */
+  /* flex-wrap: wrap; */
+}
+
+.Viewlet[data-viewlet-id='Search'] .InputBox {
+  /* flex: 1; */
+  height: 28px;
+  flex-shrink: 0;
+}
+.ViewletSearchMessage {
+  color: rgba(156, 162, 160, 0.65);
+  padding: 0 22px 8px;
+}
+
+.SearchResults {
+  overflow-y: auto;
+  /* flex: 1; */
+  height: 100%;
+}
+/*************/
+/* ViewletRunAndDebug.css */
+/*************/
+.Viewlet[data-viewlet-id='RunAndDebug'] {
+}
+/*************/
+/* ViewletReferences.css */
+/*************/
+.Viewlet[data-viewlet-id='Locations'] {
+  display: flex;
+  flex-direction: column;
+}
+
+.LocationsMessage {
+  padding: 4px 12px 4px 18px;
+  user-select: text;
+  color: rgb(188, 190, 190);
+}
+
+.LocationList {
+  height: 100%;
+  flex: 1;
+  outline: none;
+  contain: strict;
+}
+
+/* TODO figure out if this css is too slow */
+.LocationsList:focus .TreeItem.Focused {
+  color: white;
+}
+/*************/
+/* ViewletProblems.css */
+/*************/
+.Viewlet[data-viewlet-id='Problems'] {
+  color: white;
+}
+/*************/
+/* ViewletOutput.css */
+/*************/
+.Viewlet[data-viewlet-id='Output']:focus {
+  outline: 1px solid red;
+  outline-offset: -1px;
+}
+
+.ViewletOutput {
+  white-space: pre;
+  overflow-y: scroll;
+  color: white;
+}
+
+.OutputContent:empty::before {
+  content: '(empty file)';
+  opacity: 0.3;
+}
+/*************/
+/* ViewletKeyBindings.css */
+/*************/
+.Viewlet[data-viewlet-id='KeyBindings'] {
+  color: white;
+}
+
+.KeyBindingsHeader {
+  height: 50px;
+  contain: strict;
+  display: grid;
+  place-items: center;
+  padding: 0 15px;
+}
+
+.Key {
+  background-color: rgba(128, 128, 128, 0.17);
+  border-color: rgba(51, 51, 51, 0.6) rgba(51, 51, 51, 0.6)
+    rgba(68, 68, 68, 0.6);
+  box-shadow: rgb(0 0 0 / 36%) 0px -1px 0px inset;
+  display: inline-block;
+  border-style: solid;
+  border-width: 1px;
+  border-radius: 3px;
+  vertical-align: middle;
+  font-size: 11px;
+  padding: 3px 5px;
+  margin: 0 2px;
+  contain: content;
+}
+
+.KeyBinding {
+  color: rgb(204, 204, 204);
+  display: flex;
+  align-items: center;
+  line-height: 10px;
+}
+
+.KeyBindingsTable {
+  width: 100%;
+  table-layout: fixed;
+  padding: 0 15px;
+  contain: content;
+}
+
+.KeyBindingsTableBody {
+  white-space: pre;
+  overflow-y: auto;
+  user-select: text;
+  contain: content;
+}
+
+.KeyBindingsTableRow {
+  height: 24px;
+  contain: strict;
+}
+
+.KeyBindingsTableCell {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  contain: content;
+}
+/*************/
+/* ViewletExtensions.css */
+/*************/
+/* progress bar based on the vscode progress bar https://github.com/microsoft/vscode/blob/main/src/vs/base/browser/ui/progressbar/progressbar.css */
+
+.Viewlet[data-viewlet-id='Extensions'] {
+  padding-top: 5px;
+  display: flex;
+  flex-direction: column;
+}
+
+/* .Viewlet[data-viewlet='Extensions']::before, */
+.Viewlet[data-viewlet='Extensions'][aria-busy='true']::before {
+  content: '';
+  position: absolute;
+  display: block;
+  top: 0;
+  left: 0;
+  animation: progress 4s linear infinite;
+  width: 2%;
+  height: 2px;
+  background: rgb(14, 112, 192);
+}
+
+/* TODO extract progress since it is used also elsewhere -> no copy paste code */
+@keyframes progress {
+  from {
+    transform: translateX(0%) scaleX(1);
+  }
+  50% {
+    transform: translateX(2500%) scaleX(3);
+  }
+  to {
+    transform: translateX(4900%) scaleX(1);
+  }
+}
+
+/* TODO use html element as placeholder so that it can be trimmed and has other size as input text */
+
+.ExtensionHeader {
+  display: grid;
+  padding: 5px 12px 6px 16px;
+}
+
+.ExtensionInput {
+  background-color: rgb(36, 41, 42);
+  color: rgb(225, 225, 225);
+  border-width: 1px;
+  border-style: solid;
+  border-color: rgb(55, 65, 63);
+  padding: 2px 4px;
+  width: 100%;
+  font-size: 80%;
+  line-height: 100%;
+  height: 26px;
+}
+
+/* clears the 'X' from Chrome */
+.ExtensionInput::-webkit-search-decoration,
+.ExtensionInput::-webkit-search-cancel-button,
+.ExtensionInput::-webkit-search-results-button,
+.ExtensionInput::-webkit-search-results-decoration {
+  display: none;
+}
+
+.ViewletExtensionMessage {
+  color: rgb(188, 190, 190);
+  font-size: 13px;
+  padding: 5px 9px 5px 16px;
+}
+
+.ExtensionListWrapper {
+  flex: 1;
+  contain: strict;
+  position: relative;
+}
+
+.ExtensionList {
+  flex: 1;
+  contain: strict;
+  position: relative;
+
+  /* TODO investigate whether or not it makes sense to create another layer here */
+  /* transform: translate3d(0px, 0px, 0px);
+  will-change: top; */
+}
+
+.ExtensionListItem {
+  text-decoration: none;
+  padding: 0 1rem;
+  cursor: pointer;
+  display: flex;
+  gap: 14px;
+  height: 62px;
+  align-items: center;
+  contain: strict;
+  /* TODO use color from color theme */
+  color: rgb(188, 190, 190);
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+}
+
+.ExtensionListItem:hover {
+  background: rgba(64, 92, 80, 0.2);
+}
+
+#ExtensionActive {
+  /* background: rgba(64, 92, 80, 0.2); */
+  background: #515f59;
+  color: white;
+}
+
+.ExtensionListItem[data-state='disabled'] {
+  color: #606363;
+}
+
+.ExtensionListItem[data-state='disabled'] .ExtensionIcon {
+  opacity: 0.5;
+}
+
+.ExtensionDetail {
+  flex: 1;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  contain: strict;
+}
+
+.ExtensionIcon {
+  width: 42px;
+  height: 42px;
+  flex-shrink: 0;
+}
+
+.ExtensionName {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  /* color: rgb(188, 190, 190); */
+  font-weight: 700;
+  font-size: 13px;
+  padding-right: 11px;
+}
+
+.ExtensionDescription {
+  height: 18px;
+  font-size: 13px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  padding-right: 11px;
+}
+
+.ExtensionFooter {
+  display: flex;
+  justify-content: space-between;
+}
+
+.ExtensionAuthorName {
+  /* TODO compute automatically like vscode (opacity 0.9) */
+  /* const authorForeground = foregroundColor.transparent(.9).makeOpaque(WORKBENCH_BACKGROUND(theme));
+  collector.addRule(`.extensions-list .monaco-list .monaco-list-row:not(.disabled) .author { color: ${authorForeground}; }`);
+  const disabledExtensionForeground = foregroundColor.transparent(.5).makeOpaque(WORKBENCH_BACKGROUND(theme));
+  collector.addRule(`.extensions-list .monaco-list .monaco-list-row.disabled { color: ${disabledExtensionForeground}; }`); */
+  /* color: #909593; */
+  font-size: 90%;
+  font-weight: 600;
+}
+
+.ExtensionActionInstall {
+  background: #2f6260;
+  color: white;
+  border: none;
+  cursor: inherit;
+  height: 16px;
+  line-height: 14px;
+  padding: 0 4px;
+  /* padding: 4px; */
+  /* contain: strict; */
+}
+
+.ExtensionActionInstall:hover {
+  background: #387674;
+}
+
+.ExtensionActionManage {
+  all: unset;
+  width: 16px;
+  height: 16px;
+  contain: strict;
+  background: #c5c5c5;
+  -webkit-mask: url(/fbac85f/icons/settings-gear.svg) 50% 50% / 16px no-repeat;
+  mask: url(/fbac85f/icons/settings-gear.svg) 50% 50% / 16px no-repeat;
+}
+
+.NegativeMargin {
+  contain: strict;
+}
+/*************/
+/* ViewletExplorer.css */
+/*************/
+.ListItems {
+  user-select: none;
+}
+
+.ListItems.DropTarget {
+  background: darkblue;
+}
+
+.TreeItem {
+  cursor: pointer;
+  color: var(--TreeItemForeground, rgb(188, 190, 190));
+  padding-left: 11px;
+  display: flex;
+  gap: 4px;
+  height: 22px;
+  line-height: 22px;
+  contain: strict;
+  width: 100%;
+  display: flex;
+}
+
+/* .TreeItem:focus {
+  background: rgba(59, 71, 66, 0.5);
+} */
+
+#TreeItemActive {
+  background: rgba(59, 71, 66, 0.5);
+}
+
+.TreeItem [class^='Icon'] {
+  content: ' ';
+  contain: strict;
+  pointer-events: none;
+  background-size: 16px;
+  background-position: 0;
+  background-repeat: no-repeat;
+  width: 16px;
+  height: 22px;
+  display: inline-block;
+  flex-shrink: 0;
+}
+
+.TreeItem:hover {
+  background: rgba(64, 92, 80, 0.2);
+}
+
+/* .TreeItem.Hover {
+  background: rgba(64, 92, 80, 0.2);
+} */
+
+.TreeItem[aria-level='1'] {
+  padding-left: 1rem;
+}
+
+.TreeItem[aria-level='2'] {
+  padding-left: 2rem;
+}
+
+.TreeItem[aria-level='3'] {
+  padding-left: 3rem;
+}
+
+.TreeItem[aria-level='4'] {
+  padding-left: 4rem;
+}
+
+.TreeItem[aria-level='5'] {
+  padding-left: 5rem;
+}
+
+.TreeItem[aria-level='6'] {
+  padding-left: 6rem;
+}
+
+.TreeItem[aria-level='7'] {
+  padding-left: 7rem;
+}
+
+.TreeItem[aria-level='8'] {
+  padding-left: 8rem;
+}
+
+.TreeItem[aria-level='9'] {
+  padding-left: 9rem;
+}
+
+.TreeItem[aria-level='10'] {
+  padding-left: 10rem;
+}
+
+.TreeItem[aria-level='11'] {
+  padding-left: 11rem;
+}
+
+.TreeItem[aria-level='12'] {
+  padding-left: 12rem;
+}
+
+.TreeItem[aria-level='13'] {
+  padding-left: 13rem;
+}
+
+.TreeItem[aria-level='14'] {
+  padding-left: 14rem;
+}
+
+.TreeItem[aria-level='14'] {
+  padding-left: 14rem;
+}
+
+.TreeItem[aria-level='15'] {
+  padding-left: 15rem;
+}
+
+.TreeItem[aria-level='16'] {
+  padding-left: 16rem;
+}
+
+.TreeItem[aria-level='17'] {
+  padding-left: 17rem;
+}
+
+.TreeItem[aria-level='18'] {
+  padding-left: 18rem;
+}
+
+.TreeItem[aria-level='19'] {
+  padding-left: 19rem;
+}
+
+/* TODO support arbitrary depth */
+
+.TreeItem[aria-level='20'] {
+  padding-left: 20rem;
+}
+
+.DropTarget {
+  background: rgba(0, 0, 90, 0.5);
+}
+/*************/
+/* ViewletEditorImage.css */
+/*************/
+[data-viewlet-id='EditorImage'] {
+  cursor: grab;
+  touch-action: none;
+}
+
+.ViewletImage {
+  /* width: 100%; */
+  max-width: 100%;
+  max-height: 100%;
+  margin: 0 auto;
+  display: block;
+}
+
+.ImageWrapper {
+  width: 100%;
+  height: 100%;
+  contain: strict;
+  transform-origin: top left;
+}
+
+
+.Dragging {
+  cursor: grabbing ;
+}/*************/
+/* ViewletEditorFindWidget.css */
+/*************/
+.Viewlet[data-viewlet-id='EditorFindWidget'] {
+  background: var(--ActivityBarBackground);
+  z-index: 1;
+  color: wheat;
+  display: flex;
+  align-items: center;
+}
+
+.EditorFindWidgetMatchCount {
+  width: 70px;
+  white-space: nowrap;
+  flex-shrink: 0;
+  contain: strict;
+  height: 100%;
+}
+
+.EditorFindWidgetButton {
+  width: 25px;
+  height: 25px;
+  contain: strict;
+  flex-shrink: 0;
+}
+
+.EditorFindWidgetButton:hover {
+  background-color: hsla(0, 0%, 100%, 0.1);
+}
+
+.EditorFindWidgetButton:focus-visible {
+  outline: 1px solid green;
+}
+/*************/
+/* ViewletDebugConsole.css */
+/*************/
+.Viewlet[data-viewlet-id='DebugConsole'] {
+  color: white;
+}
+/*************/
+/* Viewlet.css */
+/*************/
+.Viewlet {
+  position: relative;
+  contain: strict;
+  width: 100%;
+  height: 100%;
+  /* overflow-y: auto; */
+}
+
+.ViewletError {
+  color: lightgray;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  padding: 1rem;
+  width: 100%;
+  text-align: center;
+}
+/*************/
+/* TitleBar.css */
+/*************/
+#TitleBar {
+  /* TODO should not need z index */
+  z-index: 1;
+  display: flex;
+  background: rgb(40, 46, 47);
+  background: var(--TitleBarBackground);
+  color: var(--TitleBarForeground, rgb(204, 204, 204));
+  -webkit-app-region: drag;
+  app-region: drag;
+}
+
+#TitleBarMenu {
+  display: flex;
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  -webkit-app-region: no-drag;
+  app-region: no-drag;
+}
+
+.TitleBarTopLevelEntry {
+  height: 100%;
+  line-height: 100%;
+  display: flex;
+  align-items: center;
+  padding: 0 5px;
+}
+
+.TitleBarTopLevelEntry[aria-expanded='true'],
+.TitleBarTopLevelEntry:focus,
+.TitleBarTopLevelEntry:hover {
+  background: var(--TitleBarItemHoverForeground, rgba(255, 255, 255, 0.1));
+}
+
+/* TODO maybe have extra focus outline border */
+/*
+:focus {
+  border: 2px solid green;
+} */
+
+#TitleBarButtons {
+  margin-left: auto;
+  contain: content;
+  app-region: no-drag;
+}
+
+.TitleBarButton {
+  width: 46px;
+  height: 100%;
+  contain: strict;
+  background: transparent;
+  border: none;
+}
+
+.TitleBarButton:hover {
+  background-color: hsla(0, 0%, 100%, 0.1);
+}
+
+#TitleBarButtonClose:hover {
+  background-color: rgba(232, 17, 35, 0.9);
+}
+
+[class^='MaskIcon'] {
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  background: currentColor;
+  color: var(--TitleBarForeground, rgb(204, 204, 204));
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-size: 16px;
+  -webkit-mask-position: 50% 50%;
+  pointer-events: none;
+}
+
+.MaskIconMinimize {
+  -webkit-mask-image: url(/static/icons/chrome-minimize.svg);
+}
+.MaskIconMaximize {
+  -webkit-mask-image: url(/static/icons/chrome-maximize.svg);
+}
+.MaskIconClose {
+  -webkit-mask-image: url(/static/icons/chrome-close.svg);
+}
+/*************/
+/* StatusBar.css */
+/*************/
+#StatusBar {
+  display: flex;
+  justify-content: space-between;
+}
+
+#StatusBar {
+  background: var(--StatusBarBackground);
+  height: 23px; /* 22px content + 1px border top */
+  border-top: 1px solid var(--StatusBarBorderTopColor);
+  display: flex;
+  color: var(--StatusBarForeground, rgb(98, 112, 106));
+  display: flex;
+  justify-content: space-between;
+  box-sizing: border-box;
+}
+
+#StatusBarItemsLeft,
+#StatusBarItemsRight {
+  /* contain: content; */
+  margin: 0;
+  display: flex;
+}
+
+#StatusBarItemsLeft {
+  padding-left: 7px;
+}
+
+#StatusBarItemsRight {
+  padding-right: 7px;
+}
+
+.StatusBarItem {
+  display: flex;
+  line-height: 22px;
+  height: 100%;
+  outline: none;
+  padding: 0 5px;
+  margin: 0 3px;
+  cursor: pointer;
+  font-size: 12px;
+  align-items: center;
+  /* contain: content; */
+}
+
+.StatusBarItem:hover {
+  background: rgba(255, 255, 255, 0.12);
+}
+
+.StatusBarItem:active {
+  background: rgba(255, 255, 255, 0.18);
+}
+
+.StatusBarIcon {
+  outline: none;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-position: center;
+  mask-position: center;
+  -webkit-mask-size: 1em;
+  mask-size: 1em;
+  background: currentColor;
+
+  /* TODO have common icon css for activity bar and status bar */
+  width: 1em;
+  height: 1em;
+  display: block;
+  margin-right: 4px;
+}
+/*************/
+/* SideBar.css */
+/*************/
+#SideBar {
+  background: var(--SideBarBackground, rgb(30, 35, 36));
+  color: var(--SideBarForeground, white);
+  display: flex;
+  flex-direction: column;
+}
+
+#SideBarTitleArea {
+  contain: strict;
+  padding: 0 8px;
+  line-height: 35px;
+  display: grid;
+  height: 35px;
+  grid-template-columns: auto 1fr;
+}
+
+#SideBarTitleAreaTitle {
+  font-size: 11px;
+  cursor: default;
+  font-weight: 400;
+  margin: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  text-transform: uppercase;
+  padding-left: 12px;
+}
+
+/* TODO */
+#SideBarTitleAreaButtons {
+  display: none;
+}
+
+#SideBarContent {
+  contain: strict;
+  /* padding: 10px; */
+  /* height: 100%; */
+  flex: 1;
+}
+/*************/
+/* QuickPick.css */
+/*************/
+/* TODO commit 9fcc3db9e37ec708459f3ba96715ca1286fc53b4 might be a bit faster
+   for quickpick to open (3.3ms recalculcate style vs 4.2ms now)  */
+
+/* TODO recalculate style is really slow in chrome for unknown reasons */
+#QuickPick {
+  position: absolute;
+  width: 600px;
+  top: 50px;
+  left: 50%;
+  margin-left: -300px; /* TODO maybe this should be 301px because of padding to be centered */
+  padding: 0 1px 6px;
+  background: var(--QuickPickBackground);
+  color: var(--ListForeground);
+  box-sizing: border-box;
+  /* TODO is this useful? */
+  contain: content;
+  /* TODO is this useful? */
+  /* transform: translate3d(0, 0, 0); */
+  display: flex;
+  flex-direction: column;
+  row-gap: 4px;
+  pointer-events: all;
+  /* inset: 0; */
+  /* will-change: transform; */
+  box-shadow: rgb(0 0 0 / 15%) 0px 0px 8px 2px;
+}
+
+#QuickPickHeader {
+  /* width: 100%; */
+  display: flex;
+  /* margin: 6px 6px 0; */
+  padding: 6px 6px 0;
+  /* contain: strict; */
+  height: 30px;
+  contain: strict;
+  /* margin-bottom: -2px; */
+}
+
+#QuickPickItems {
+  outline: 0;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  contain: strict;
+}
+
+.ScrollWrapper {
+  width: 100%;
+  height: 220px;
+  /* TODO check if this makes a difference */
+  /* will-change: transform; needed for effective scrolling */
+  /* contain: strict; */
+  position: relative;
+  z-index: -1;
+}
+
+.Row {
+}
+
+.QuickPickItem {
+  display: flex;
+  white-space: nowrap;
+  align-items: center;
+  width: 100%;
+  height: 22px;
+  font-size: 13px;
+  margin: 0;
+  padding: 0 6px;
+  contain: strict;
+  gap: 4px;
+}
+
+
+.QuickPickItem:hover {
+  background: var(--ListHoverBackground);
+  color: var(--ListHoverForeground);
+}
+
+#QuickPickItemActive {
+  color: var(--ListActiveSelectionForeground);
+  background: var(--ListActiveSelectionBackground);
+}
+
+
+.QuickPickItemDescription {
+  font-size: 0.8rem;
+  opacity: 0.7;
+  pointer-events: none;
+}
+
+#QuickPickCount {
+  /* Screen Reader Only */
+  position: absolute;
+  left: -10000px;
+  top: auto;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+}
+
+/* TODO don't do nesting */
+.QuickPickItem .highlight {
+  color: darkgoldenrod;
+}
+
+/* TODO different way to check if it is file, className may be faster  */
+.QuickPickItem[data-language-id]::before {
+  content: ' ';
+  contain: strict;
+  width: 22px;
+  height: 22px;
+  background-size: 16px;
+  background-position: 0;
+  background-repeat: no-repeat;
+  padding-right: 6px;
+  width: 16px;
+  height: 22px;
+  line-height: inherit !important;
+  display: inline-block;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  vertical-align: top;
+  flex-shrink: 0;
+  background-size: cover;
+  background-size: 16px;
+  background-position: 0;
+}
+
+.QuickPickItem [class^='Icon'] {
+  contain: strict;
+  pointer-events: none;
+  background-size: 16px;
+  background-position: 0;
+  background-repeat: no-repeat;
+  width: 16px;
+  height: 22px;
+  flex-shrink: 0;
+}
+
+/* TODO remove icon from dom when it is not needed */
+.Iconundefined {
+  display: none;
+}
+/*************/
+/* Panel.css */
+/*************/
+#Panel {
+  display: grid;
+  grid-template-rows: 35px 1fr;
+  border-top: 1px solid rgba(128, 128, 128, 0.35);
+  background: var(--PanelBackground);
+}
+
+#PanelHeader {
+  contain: strict;
+}
+
+#PanelTabs {
+  display: flex;
+  gap: 1rem;
+  height: 100%;
+}
+
+.PanelTab {
+  cursor: pointer;
+  font-size: 11px;
+  font-family: system-ui, Ubuntu, Droid Sans, sans-serif;
+  text-transform: uppercase;
+  height: 100%;
+  line-height: 35px;
+  /* color: rgba(231, 231, 231, 0.6); */
+  color: var(--PanelTabForeground);
+}
+
+.PanelTab[aria-selected] {
+  /* color: rgb(231, 231, 231); */
+  color: var(--PanelTabActiveForeground);
+  border-bottom-color: rgb(231, 231, 231);
+}
+
+.PanelTab:hover {
+  color: var(--PanelTabHoverForeground);
+}
+
+#PanelContent {
+  contain: strict;
+}
+/*************/
+/* Notification.css */
+/*************/
+/* #Notifications {
+  width: 100%;
+  height: 100%;
+} */
+
+.Notification {
+  color: white;
+  background: red;
+  z-index: 999;
+  background: black;
+  pointer-events: all;
+  position: fixed;
+  right: 30px;
+  bottom: 30px;
+  width: 250px;
+  height: 75px;
+  padding: 10px 5px;
+  background: rgb(40, 46, 47);
+  box-shadow: rgb(0 0 0 / 36%) 0px 0px 8px 2px;
+}
+
+.NotificationMessage {
+  line-height: 22px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex: 1;
+  user-select: text;
+  margin: 0;
+  padding: 0;
+}
+
+.NotificationOption {
+  color: rgb(255, 255, 255);
+  background-color: rgb(47, 98, 96);
+  width: fit-content;
+  width: -moz-fit-content;
+  padding: 5px 10px;
+  display: inline-block;
+  font-size: 12px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  box-sizing: border-box;
+  display: flex;
+  width: 100%;
+  padding: 4px;
+  text-align: center;
+  cursor: pointer;
+  justify-content: center;
+  align-items: center;
+}
+/*************/
+/* MonacoList.css */
+/*************/
+.MonacoList {
+}
+
+.ListItem {
+}
+
+.ListItems {
+  height: 22px;
+  line-height: 22px;
+  font-size: 14px;
+  contain: strict;
+}
+/*************/
+/* Mobile.css */
+/*************/
+body {
+  /* Disables pull-to-refresh since it interferes with scrolling */
+  overscroll-behavior: contain;
+
+  /* Disable tap highlight on chrome android */
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-tap-highlight-color: transparent;
+}
+
+@media screen and (max-width: 600px) {
+  #QuickPick {
+    right: 0;
+    left: 0;
+    margin-right: auto;
+    margin-left: auto;
+    width: 90%;
+  }
+}
+
+@media screen and (max-width: 600px) {
+  #QuickPick {
+    right: 0;
+    left: 0;
+    margin-right: auto;
+    margin-left: auto;
+    width: 90%;
+  }
+}
+/*************/
+/* Menu.css */
+/*************/
+/* TODO very much copy paste from ContextMenu.css */
+
+.Menu {
+  top: 0;
+  left: 0;
+  position: absolute;
+  background: var(--MenuBackground, rgb(60, 60, 60));
+  color: var(--MenuForeground, white);
+  box-shadow: var(--MenuBoxShadow, rgb(0, 0, 0) 0px 2px 4px);
+  user-select: none;
+  min-width: 150px;
+  /* width: 150px; */
+  margin: 0;
+  padding: 10px 0;
+  font-size: 13px;
+  z-index: 1;
+  outline: none;
+  pointer-events: auto;
+}
+
+.MenuItem {
+  /* border: thin solid transparent; */
+  /* TODO using px and rem -> decide */
+  height: 28px;
+  padding: 0 28px;
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+  list-style: none;
+  position: relative;
+  outline: none;
+  display: flex;
+  contain: content;
+}
+
+.MenuItem.Focused {
+  background: var(--MenuItemHoverBackground, #687f7b33);
+  color: var(--MenuItemHoverForeground, inherit);
+  outline: none;
+}
+
+.MenuItem[aria-checked='true']::before {
+  content: '';
+  position: absolute;
+  top: calc((1.8rem - 0.75rem) / 2);
+  left: calc((1.8rem - 0.75rem) / 2);
+  width: 0.75rem;
+  height: 0.75rem;
+  background: orchid;
+  -webkit-mask-image: url(/fbac85f/icons/check.svg);
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-position: center;
+  mask-position: center;
+  -webkit-mask-size: 0.75rem;
+  mask-size: 0.75rem;
+  background: currentColor;
+}
+
+.MenuItem[aria-haspopup='true']::after {
+  width: 16px;
+  height: 16px;
+  content: '';
+  display: block;
+  -webkit-mask-image: url(/fbac85f/icons/chevron-right.svg);
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-position: center;
+  mask-position: center;
+  -webkit-mask-size: 100%;
+  mask-size: 100%;
+  background: currentColor;
+  margin-left: auto;
+  margin-right: -20px;
+}
+
+.MenuItem[disabled] {
+  opacity: 0.4;
+}
+
+.MenuItemSeparator {
+  list-style: none;
+  height: 16px;
+  position: relative;
+}
+
+.MenuItemSeparator::after {
+  position: absolute;
+  content: '';
+  display: block;
+  width: calc(100% - 1.6rem);
+  height: 1px;
+  background: rgb(136, 136, 136);
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+/*************/
+/* Main.css */
+/*************/
+#Main {
+  background: var(--MainBackground);
+  display: flex;
+  flex-direction: column;
+}
+
+#MainContent {
+  contain: strict;
+  flex: 1;
+}
+
+.Viewlet[data-viewlet-id='EditorText'] {
+  color: white;
+  white-space: pre;
+}
+
+.Viewlet[data-viewlet-id='EditorImage'] {
+  max-width: 100%;
+}
+
+.Viewlet[data-viewlet-id='Clock'] {
+  color: white;
+}
+/*************/
+/* Layout.css */
+/*************/
+.SashHorizontal,
+.SashVertical {
+  position: fixed;
+  contain: strict;
+}
+
+.SashHorizontal {
+  height: 4px;
+  cursor: row-resize;
+}
+
+.SashVertical {
+  width: 4px;
+  cursor: col-resize;
+}
+/*************/
+/* Label.css */
+/*************/
+.Label {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  display: inline-block;
+  white-space: nowrap;
+}
+/*************/
+/* InputBox.css */
+/*************/
+.InputBox {
+  width: 100%;
+  margin: 0;
+  border: none;
+  outline: none;
+  flex: 1;
+  background: var(--InputBoxBackground);
+  border: 1px solid rgb(55, 65, 63);
+  padding: 4px;
+  color: var(--InputBoxForeground);
+  font-size: 13px;
+  contain: strict;
+}
+
+/* hide small "x" on chromium  */
+.InputBox::-webkit-search-decoration,
+.InputBox::-webkit-search-cancel-button,
+.InputBox::-webkit-search-results-button,
+.InputBox::-webkit-search-results-decoration {
+  display: none;
+}
+/*************/
+/* ImagePreview.css */
+/*************/
+.ImagePreview {
+  pointer-events: all;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 170px;
+  margin: 0;
+  background: white;
+  display: flex;
+  flex-direction: column;
+  padding: 3px;
+}
+
+.ImagePreview::before {
+  content: '';
+  width: 0;
+  height: 0;
+  border-top: 11px solid transparent;
+  border-bottom: 11px solid transparent;
+  display: block;
+  border-left: 11px solid white;
+  position: absolute;
+  right: 0;
+  top: 22px;
+  right: -11px;
+}
+
+.ImagePreviewImage {
+  min-height: 40px;
+  max-width: 100%;
+  max-height: 100%;
+  background: transparent;
+  background-position: 0 0, 10px 10px;
+  background-size: 20px 20px;
+  background-image: linear-gradient(
+      45deg,
+      #ccc 25%,
+      transparent 25%,
+      transparent 75%,
+      #ccc 75%,
+      #ccc
+    ),
+    linear-gradient(
+      45deg,
+      #ccc 25%,
+      transparent 25%,
+      transparent 75%,
+      #ccc 75%,
+      #ccc
+    );
+}
+
+.ImagePreviewCaption {
+  height: 20px;
+  color: gray;
+  text-align: center;
+  font-size: 10px;
+  line-height: 20px;
+}
+/*************/
+/* Highlight.css */
+/*************/
+@keyframes highlight {
+  0% {
+    outline-color: #3d5252;
+  }
+  100% {
+    outline-color: transparent;
+  }
+}
+
+.Highlight {
+  outline: 1px solid;
+  outline-offset: -1px;
+  animation: highlight 1s;
+  /* animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1); */
+  animation-timing-function: ease-in;
+}
+/*************/
+/* Focus.css */
+/*************/
+/* TODO hide outline on click */
+
+/* [tabindex='0']:focus-visible,
+[tabindex='0']:focus,
+[tabindex='-1']:focus-visible {
+  outline: var(--FocusOutline);
+  outline-offset: -1px;
+  outline-style: solid;
+  outline-width: 1px;
+} */
+
+* {
+  outline: none;
+}
+
+.InputBox:focus {
+  border-color: var(--FocusOutline);
+}
+
+.FocusOutline,
+#TreeItemActive {
+  outline: var(--FocusOutline);
+  outline-offset: -1px;
+  outline-style: solid;
+  outline-width: 1px;
+}
+/*************/
+/* FindWidget.css */
+/*************/
+.FindWidget {
+  position: absolute;
+  top: 0;
+  right: 0;
+  display: flex;
+}
+
+.FindWidgetInput {
+  /* background: transparent; */
+  background: darkgray;
+  color: white;
+}
+/*************/
+/* EditorTabs.css */
+/*************/
+.MainTabs {
+  height: 35px;
+  background: rgb(40, 46, 47);
+  display: flex;
+  contain: strict;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  background: var(
+    --TabsBackground
+  ); /* TODO variable name should match class name */
+  /* TODO investigate perf */
+  /* contain: children; */
+  /* transform: translate3d(0, 0, 0); */
+}
+
+.MainTab {
+  border-right: 1px solid rgb(34, 34, 34);
+  background: var(--TabBackground);
+  color: var(--TabForeground);
+  padding-left: 5px;
+  padding-right: 5px;
+  display: flex;
+  align-items: center;
+  font-size: 13px;
+  white-space: nowrap;
+  /* contain: content; */
+}
+
+.MainTab[aria-selected='true'] {
+  border-right: 1px solid rgb(34, 34, 34);
+  background: var(--TabActiveBackground);
+  color: var(--TabActiveForeground);
+}
+
+/* should be kept in sync with explorer */
+.MainTab::before {
+  content: ' ';
+  width: 16px;
+  height: 16px;
+  display: inline-block;
+  padding-right: 4px;
+  background-repeat: no-repeat;
+  line-height: inherit;
+  margin-top: -3px; /* TODO why this? */
+}
+
+.MainTab::before {
+  content: ' ';
+  contain: strict;
+  width: 22px;
+  height: 22px;
+  background-size: 16px;
+  background-position: 0;
+  background-repeat: no-repeat;
+  padding-right: 6px;
+  width: 16px;
+  height: 22px;
+  line-height: inherit !important;
+  display: inline-block;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  flex-shrink: 0;
+  background-size: cover;
+  background-size: 16px;
+  background-position: 0;
+}
+
+.ManiTabLabel {
+  pointer-events: none;
+  contain: content;
+}
+
+.EditorTabCloseButton {
+  contain: strict;
+  border: none;
+  padding: 0;
+  width: 23px;
+  height: 23px;
+  position: relative;
+  background: transparent;
+  border-radius: 4px;
+  display: flex;
+  margin-left: 4px;
+}
+
+.EditorTabCloseButton::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: var(--TabActiveForeground);
+  -webkit-mask-image: url(/fbac85f/icons/icon-close.svg);
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-position: center;
+  mask-position: center;
+  -webkit-mask-size: 50%;
+  mask-size: 50%;
+}
+
+.EditorTabCloseButton:hover {
+  background: rgba(255, 255, 255, 0.05);
+  transition: all 0.1s;
+}
+
+.EditorTabStatus {
+  width: 22px;
+  height: 15px;
+}
+
+/* TODO investigate whether classNames vs data-attribute makes a difference here (performance-wise) */
+.EditorTabStatus[data-status='1'] /* default */ {
+  display: none;
+}
+
+.EditorTabStatus[data-status='2'] /* modified */ {
+  background: white;
+  -webkit-mask: url(/packages/renderer-process/assets/icons/circle-filled.svg)
+    100% 50% / 15px no-repeat;
+}
+/*************/
+/* EditorHover.css */
+/*************/
+#EditorHover {
+  top: 0;
+  left: 0;
+  position: absolute;
+  background: lightblue;
+}
+/*************/
+/* EditorCompletion.css */
+/*************/
+#Completions {
+  top: 0;
+  left: 0;
+  position: absolute;
+  background: var(--ContextMenuBackground);
+  color: white;
+  box-shadow: rgb(0, 0, 0) 0px 2px 4px;
+  user-select: none;
+  width: 150px;
+  margin: 0;
+  /* padding: 0.5rem 0; */
+  font-size: 13px;
+  height: 150px;
+  padding: 0;
+  overflow-y: auto;
+  /* z-index: 1; */
+  pointer-events: all;
+}
+
+.EditorCompletionItem {
+  height: 28px;
+  padding: 0 28px;
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+  list-style: none;
+  cursor: pointer;
+  position: relative;
+  contain: strict;
+}
+
+.EditorCompletionItem:before {
+  content: '';
+  width: 20px;
+  height: 20px;
+  /* background: darkcyan; */
+  contain: strict;
+  content: '';
+  position: absolute;
+  inset: 0;
+  /* -webkit-mask-image: url(/fbac85f/icons/icon-close.svg); */
+  /* -webkit-mask-repeat: no-repeat; */
+  /* mask-repeat: no-repeat; */
+  /* -webkit-mask-position: center; */
+  /* mask-position: center; */
+  /* -webkit-mask-size: 100%; */
+  /* mask-size: 100%; */
+}
+
+.IconProperty::before {
+  -webkit-mask-image: url(/fbac85f/icons/symbol-property.svg);
+  background: #c5c5c5;
+}
+
+.IconValue::before {
+  -webkit-mask-image: url(/fbac85f/icons/symbol-enum.svg);
+  background: #ee9d28;
+}
+
+.IconVariable::before {
+  -webkit-mask-image: url(/fbac85f/icons/symbol-variable.svg);
+  background: #75beff;
+}
+
+.IconFunction::before {
+  -webkit-mask-image: url(/fbac85f/icons/symbol-method.svg);
+  background: #b180d7;
+}
+
+.IconKeyword::before {
+  -webkit-mask-image: url(/fbac85f/icons/symbol-keyword.svg);
+  background: #c5c5c5;
+}
+
+.EditorCompletionItem:hover {
+  background: rgba(64, 92, 80, 0.2);
+}
+
+.EditorCompletionItem.Focused {
+  background: #405c50;
+}
+
+/* TODO maybe put this all into editor */
+
+/* Rename Widget */
+.RenameWidget {
+  position: absolute;
+  top: 0;
+  left: 0;
+  pointer-events: auto;
+}
+
+/* Error Widget */
+.EditorWidgetError {
+  position: absolute;
+  top: 0;
+  left: 0;
+  color: white;
+  background: rgb(37, 35, 35);
+  pointer-events: auto;
+}
+
+/* Alert  */
+.AriaAlert {
+  position: absolute;
+  left: -999em;
+  top: 0;
+}
+
+.monaco-aria-container {
+  width: 0;
+  height: 0;
+}
+/*************/
+/* Editor.css */
+/*************/
+/* TODO this should not be global */
+.Editor {
+  width: 100%;
+  height: 100%;
+  background: var(--MainBackground);
+  color: white;
+  outline: none;
+  border: none;
+  font-family: 'Fira Code', monospace;
+  position: relative;
+  white-space: pre;
+  font-size: var(--EditorFontSize);
+  letter-spacing: var(--EditorLetterSpacing);
+  contain: strict;
+  tab-size: 2;
+  font-display: block;
+}
+
+.EditorLayers {
+  contain: strict;
+  /* contain: content; */
+  width: 100%;
+  height: 100%;
+}
+
+.EditorRows {
+  white-space: pre;
+  width: 100%;
+  height: 100%;
+  contain: strict;
+}
+
+.EditorRow {
+  display: block;
+  height: var(--EditorLineHeight);
+  line-height: var(--EditorLineHeight);
+  /* contain: strict; */
+}
+
+.Editors {
+  flex: 1;
+}
+
+.EditorCursor {
+  width: 2px;
+  height: var(--EditorLineHeight);
+  position: absolute;
+  top: 0;
+  left: 0;
+  background: var(--EditorCursorBackground, red);
+  pointer-events: none;
+  contain: strict;
+  /* border-color: #a8df5a; */
+}
+
+.EditorDiagnostic {
+  position: absolute;
+  top: 0;
+  left: 0;
+  contain: strict;
+  pointer-events: none;
+}
+
+.EditorDiagnostic {
+  /* background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2F…%202.4%2C3%200%2C0.6'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")
+    repeat-x bottom left; */
+
+  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%206%203'%20enable-background%3D'new%200%200%206%203'%20height%3D'3'%20width%3D'6'%3E%3Cg%20fill%3D'%23b64e4e'%3E%3Cpolygon%20points%3D'5.5%2C0%202.5%2C3%201.1%2C3%204.1%2C0'%2F%3E%3Cpolygon%20points%3D'4%2C0%206%2C2%206%2C0.6%205.4%2C0'%2F%3E%3Cpolygon%20points%3D'0%2C2%201%2C3%202.4%2C3%200%2C0.6'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")
+    repeat-x bottom left;
+}
+
+.ScrollBarDiagnostics {
+  top: 0;
+  right: 0;
+  bottom: 0;
+  position: absolute;
+  width: 14px;
+}
+
+.ScrollBarDiagnostic {
+  height: 5px;
+  background: red;
+  width: 100%;
+  position: absolute;
+}
+
+.EditorInput {
+  position: absolute;
+  width: 0;
+  height: 0;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  padding: 0;
+  border: 0;
+  font-size: 1px; /* needs to be at least one pixel because otherwise chrome will not emit input events */
+  top: -9999px;
+  left: -9999px;
+  /* contain: strict; */
+  /* visibility: hidden; */
+}
+
+/* interesting: could do transform via css -> only set data-row, data-column on editor cursor */
+/* .EditorCursor::after {
+  position: absolute;
+  content: attr(data-row-index);
+} */
+
+/* great css solution -> only nesting is bad -> can be avoided?
+.Editor:not(:focus-within) .EditorCursor {
+  display: none;
+} */
+
+.EditorSelection {
+  position: absolute;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+  background: var(--EditorSelectionBackground);
+}
+
+.Token {
+  contain: content;
+}
+
+.ScrollBar,
+.ScrollBarSmall {
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 14px;
+  bottom: 0;
+  contain: strict;
+}
+
+.ScrollBarSmall {
+  width: 10px;
+}
+
+.ScrollBarThumb {
+  width: 100%;
+  /* height: 40px; */
+  position: absolute;
+  contain: strict;
+  background: var(--EditorScrollBarBackground, rgba(57, 71, 71, 0.6));
+}
+
+.LayerCursor {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+
+/* ::highlight(cursor) {
+  background-color: #31e0e0;
+  color: blue;
+} */
+
+.Token.EditorGoToDefinitionLink {
+  color: #4e94ce !important;
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.EditorOverlayMessage {
+  padding: 1px 4px;
+  background-color: #063b49;
+  border: 1px solid #007acc;
+  color: white;
+  pointer-events: all;
+  user-select: text;
+}
+/*************/
+/* Dialog.css */
+/*************/
+#Dialog {
+  pointer-events: all;
+  user-select: text;
+  padding: 0;
+  width: 90%;
+  height: 65%;
+  display: flex;
+  flex-direction: column;
+}
+
+#Dialog::backdrop {
+  background: rgba(0, 0, 0, 0.25);
+}
+
+#DialogTitle {
+  background: #ecf0f1;
+  color: #484b4c;
+  padding: 1rem;
+  margin: 0;
+}
+
+#DialogBody {
+  padding: 1rem;
+  contain: strict;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+#DialogBodyErrorMessage {
+  margin: 0;
+}
+
+#DialogBodyErrorCodeFrame {
+  white-space: pre;
+}
+
+#DialogBodyErrorStack {
+  white-space: pre-wrap;
+  max-width: 100%;
+  overflow-x: auto;
+}
+/*************/
+/* ContextMenu.css */
+/*************/
+:root {
+  --ContextMenuBackground: rgb(60, 60, 60);
+}
+
+#ContextMenu {
+  top: 0;
+  left: 0;
+  position: absolute;
+  background: var(--ContextMenuBackground);
+  color: var(--ContextMenuForeground, white);
+  box-shadow: var(--MenuBoxShadow, rgb(0, 0, 0) 0px 2px 4px);
+  user-select: none;
+  min-width: 150px;
+  margin: 0;
+  padding: 10px 0;
+  font-size: 13px;
+  z-index: 1;
+  outline: none;
+  pointer-events: all;
+  contain: strict;
+}
+
+#MenuBackDrop {
+  position: fixed;
+  cursor: initial;
+  left: 0px;
+  top: 0px;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  pointer-events: all;
+}
+/*************/
+/* BackDrop.css */
+/*************/
+#BackDrop {
+  position: fixed;
+  cursor: initial;
+  left: 0px;
+  top: 0px;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  pointer-events: all;
+}
+/*************/
+/* Animation.css */
+/*************/
+@keyframes spin {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.AnimationSpin {
+  animation: spin 2s linear infinite;
+}
+/*************/
+/* ActivityBar.css */
+/*************/
+#ActivityBar {
+  background: var(--ActivityBarBackground);
+  color: var(--ActivityBarForeground);
+  contain: strict;
+}
+
+#ActivityBar {
+  /* display: grid; */
+  /* align-content: space-between; */
+  display: flex;
+  flex-direction: column;
+}
+
+/* #ActivityBar:focus-within {
+  border: 1px solid rgba(62, 100, 170, 0.575);
+} */
+
+/* #ActivityBarItemsTop,
+#ActivityBarItemsBottom {
+  contain: content;
+  display: grid;
+  grid-auto-rows: 48px;
+} */
+
+.ActivityBarItem {
+  position: relative;
+  outline: none;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-position: center;
+  mask-position: center;
+  -webkit-mask-size: 24px;
+  mask-size: 24px;
+  /* background: var(--ActivityBarBackground); */
+  position: relative;
+  width: 48px;
+  height: 48px;
+  contain: strict;
+  /* margin-top: 100px; */
+  flex-shrink: 0;
+}
+
+.ActivityBarItem[data-viewlet-id='Settings'] {
+  margin-top: auto;
+}
+
+.ActivityBarItem:hover {
+  /* background: #878f8c; */
+}
+
+.ActivityBarItem[aria-selected='true'],
+.ActivityBarItem:hover {
+  color: var(--ActivityBarActiveForeground);
+}
+
+.ActivityBarItem[aria-selected='true'] {
+  background: var(--ActivityBarActiveBackground);
+}
+
+.ActivityBarItem:focus-visible {
+  /* background: var(--ActivityBarActiveBackground); */
+  color: var(--ActivityBarActiveForeground);
+}
+
+.ActivityBarItemIcon {
+  position: absolute;
+  inset: 0;
+  background: currentColor;
+  /* filter: 1; */
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-position: center;
+  mask-position: center;
+  -webkit-mask-size: 24px;
+  mask-size: 24px;
+}
+
+/* .ActivityBarItem:focus .ActivityBarItemIcon,
+.ActivityBarItem:hover .ActivityBarItemIcon,
+.ActivityBarItem[aria-selected] .ActivityBarItemIcon {
+  filter: none;
+} */
+
+.ActivityBarItemBadge {
+  background: var(--BadgeBackground);
+  border-radius: 100%;
+  height: 20px;
+  width: 20px;
+  line-height: 20px;
+  text-align: center;
+  position: absolute;
+  right: 0px;
+  bottom: 0px;
+  color: var(--BadgeForeground);
+  font-size: 9px;
+  font-weight: 600;
+}