@lvce-editor/static-server 0.40.0

package/static/c76328b/css/App.css

@@ -0,0 +1,2881 @@
+/*! modern-normalize v3.0.0 | MIT License | https://github.com/sindresorhus/modern-normalize */
+
+/*
+Document
+========
+*/
+
+/**
+Use a better box model (opinionated).
+*/
+
+*,
+::before,
+::after {
+	box-sizing: border-box;
+}
+
+html {
+	/* Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3) */
+	font-family:
+		system-ui,
+		'Segoe UI',
+		Roboto,
+		Helvetica,
+		Arial,
+		sans-serif,
+		'Apple Color Emoji',
+		'Segoe UI Emoji';
+	line-height: 1.15; /* 1. Correct the line height in all browsers. */
+	-webkit-text-size-adjust: 100%; /* 2. Prevent adjustments of font size after orientation changes in iOS. */
+	tab-size: 4; /* 3. Use a more readable tab size (opinionated). */
+}
+
+/*
+Sections
+========
+*/
+
+body {
+	margin: 0; /* Remove the margin in all browsers. */
+}
+
+/*
+Text-level semantics
+====================
+*/
+
+/**
+Add the correct font weight in Chrome 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
+============
+*/
+
+/**
+Correct table border color inheritance in Chrome and Safari. (https://issues.chromium.org/issues/40615503, https://bugs.webkit.org/show_bug.cgi?id=195016)
+*/
+
+table {
+	border-color: currentcolor;
+}
+
+/*
+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 */
+}
+
+/**
+Correct the inability to style clickable types in iOS and Safari.
+*/
+
+button,
+[type='button'],
+[type='reset'],
+[type='submit'] {
+	-webkit-appearance: button;
+}
+
+/**
+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;
+}
+
+.TerminalLayers {
+  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;
+}
+
+/*************/
+/* _Global.css */
+/*************/
+@font-face {
+  font-family: 'Fira Code';
+  src: url(/c76328b/fonts/FiraCode-VariableFont.ttf) format('truetype');
+}
+
+/* TODO check if contain strict also makes sense for html and body */
+
+html,
+body {
+  height: 100%;
+  contain: strict;
+}
+
+body {
+  font-family:
+    system-ui,
+    Ubuntu,
+    Droid Sans,
+    sans-serif;
+  user-select: none;
+  color: var(--WorkbenchForeground);
+}
+/*************/
+/* Actions.css */
+/*************/
+.Actions {
+  display: flex;
+  margin-left: auto;
+  align-items: center;
+  contain: content;
+}
+
+.SelectWrapper {
+  contain: content;
+  position: relative;
+  height: 21px;
+}
+
+.SelectIcon {
+  position: absolute;
+  inset: 0 6px 0 auto;
+  background: currentColor;
+  mask-repeat: no-repeat;
+  mask-size: var(--MaskIconSize);
+  mask-position: 50% 50%;
+  mask-image: url(/c76328b/icons/chevron-down.svg);
+  pointer-events: none;
+  width: 16px;
+  height: 16px;
+  contain: strict;
+  margin: auto 0;
+}
+/*************/
+/* ActivityBarItem.css */
+/*************/
+.ActivityBarItem {
+  position: relative;
+  outline: none;
+  width: 48px;
+  height: 48px;
+  contain: strict;
+  flex-shrink: 0;
+  --MaskIconSize: 24px;
+  mask-repeat: no-repeat;
+  mask-size: var(--MaskIconSize);
+  mask-position: 50% 50%;
+  background: currentColor;
+  cursor: pointer;
+}
+
+.ActivityBarItem:hover {
+  /* background: #878f8c; */
+}
+
+.ActivityBarItemSelected,
+.ActivityBarItem:hover {
+  color: var(--ActivityBarActiveForeground);
+}
+
+.ActivityBarItemSelected {
+  background: var(--ActivityBarActiveBackground);
+}
+
+.ActivityBarItemNested {
+  background: var(--ActivityBarBackground);
+}
+
+.ActivityBarItem:focus-visible {
+  /* background: var(--ActivityBarActiveBackground); */
+  color: var(--ActivityBarActiveForeground);
+}
+
+.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;
+}
+
+.MarginTopAuto {
+  margin-top: auto;
+}
+/*************/
+/* Alignment.css */
+/*************/
+.AlignBottom {
+  margin-top: auto;
+}
+
+.AlignRight {
+  margin-left: auto;
+}
+
+.Grow {
+  flex: 1;
+}
+/*************/
+/* AriaAlert.css */
+/*************/
+/* Alert  */
+.AriaAlert {
+  position: absolute;
+  left: -999em;
+  top: 0;
+}
+
+.AriaContainer {
+  width: 0;
+  height: 0;
+}
+/*************/
+/* BackDrop.css */
+/*************/
+.BackDrop {
+  position: fixed;
+  cursor: initial;
+  left: 0px;
+  top: 0px;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  pointer-events: all;
+}
+/*************/
+/* Badge.css */
+/*************/
+.Badge {
+  contain: content;
+  background: var(--BadgeBackground, rgb(160, 63, 155));
+  color: var(--BadgeForeground, #eeeeee);
+  border-radius: 11px;
+  font-size: 11px;
+  font-weight: 400;
+  height: 18px;
+  min-width: 18px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 3px 6px;
+}
+/*************/
+/* Button.css */
+/*************/
+.Button {
+  contain: content;
+  display: flex;
+  border-radius: 2px;
+  border: none;
+  place-content: center;
+  place-items: center;
+  padding: 5px 10px;
+}
+
+.Button:where(:focus) {
+  background: var(--SplitButtonHoverBackground, #387674);
+  outline: 1px solid var(--FocusBorder);
+  outline-offset: 2px;
+}
+
+.ButtonPrimary {
+  background: var(--SplitButtonBackground, rgb(35, 112, 112));
+  color: var(--SplitButtonForeground, white);
+  cursor: pointer;
+}
+
+.ButtonPrimary:where(:hover),
+.ButtonPrimary:where(:focus) {
+  background: var(--SplitButtonHoverBackground, #387674);
+}
+
+.ButtonSecondary {
+  background: var(--ButtonSecondaryBackground, #313131);
+  color: var(--ButtonSecondaryForeground, #cccccc);
+  cursor: pointer;
+}
+
+.ButtonSecondary:where(:hover),
+.ButtonSecondary:where(:focus) {
+  background: var(--ButtonSecondaryHoverBackground, #45494e);
+}
+
+.ButtonNarrow {
+  max-width: 300px;
+  margin-left: auto;
+  margin-right: auto;
+  width: 100%;
+}
+
+.ButtonWide {
+  max-width: 300px;
+}
+/*************/
+/* Chevron.css */
+/*************/
+.Chevron {
+  width: 16px;
+  height: 16px;
+  contain: strict;
+  position: relative;
+  mask-size: 16px;
+  mask-position: 50% 50%;
+  mask-repeat: no-repeat;
+  background: currentColor;
+}
+/*************/
+/* 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;
+}
+/*************/
+/* Drag.css */
+/*************/
+.DragImage {
+  width: 100px;
+  height: 20px;
+  background: var(--SideBarBackground); /* TODO */
+  position: absolute;
+  padding: 0 4px;
+  translate: -999px -999px;
+  willchange: translate;
+  contain: strict;
+}
+/*************/
+/* 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 */
+  position: absolute;
+  overflow: hidden;
+}
+
+.MainTab {
+  border-right: 1px solid var(--TabBorder, rgb(34, 34, 34));
+  background: var(--TabBackground);
+  color: var(--TabForeground);
+  /* padding-left: 5px; */
+  /* padding-right: 5px; */
+  display: flex;
+  gap: 4px;
+  align-items: center;
+  font-size: 13px;
+  white-space: nowrap;
+  max-width: 200px;
+  contain: strict;
+  height: 100%;
+  flex-shrink: 0;
+  padding-left: 5px;
+}
+
+.MainTabPreview {
+  font-style: italic;
+}
+
+.MainTabSelected {
+  border-right: 1px solid var(--TabBorder, rgb(34, 34, 34));
+  border-bottom: 1px solid var(--TabBorderBottom, transparent);
+  background: var(--TabActiveBackground);
+  color: var(--TabActiveForeground);
+}
+
+.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;
+  flex-shrink: 0;
+  color: var(--TabForeground);
+}
+
+.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;
+  mask: url(/packages/renderer-process/assets/icons/circle-filled.svg) 100% 50% / 15px no-repeat;
+}
+
+.DragOver {
+  background-color: rgba(83, 89, 93, 0.5);
+}
+
+.TabLabel {
+  white-space: nowrap;
+  contain: content;
+  overflow: hidden;
+  min-width: 0;
+  flex: 1;
+  pointer-events: none;
+}
+
+.TabIcon {
+  contain: strict;
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+  background: currentColor;
+  mask-repeat: no-repeat;
+  mask-size: 16px;
+  mask-position: 50% 50%;
+  pointer-events: none;
+}
+
+.TabDragHighlight {
+  width: 2px;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  contain: strict;
+  background: dodgerblue;
+}
+/*************/
+/* FileIcon.css */
+/*************/
+.FileIcon {
+  contain: strict;
+  pointer-events: none;
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+}
+/*************/
+/* Filter.css */
+/*************/
+.Filter {
+  display: flex;
+  min-width: 214px;
+  contain: strict;
+  height: 24px;
+  align-items: center;
+  border: 1px solid var(--InputBoxBorder, rgb(55, 65, 63));
+}
+
+/* TODO avoid css nesting */
+.Filter .InputBox {
+  border: none;
+}
+
+.FilterBadge {
+  background: var(--BadgeBackground, rgb(160, 63, 155));
+  color: var(--BadgeForeground, #eeeeee);
+  padding: 0 4px;
+  border-radius: 2px;
+}
+/*************/
+/* Focus.css */
+/*************/
+.FocusOutline {
+  outline-color: var(--FocusOutline, lightgray);
+  outline-offset: -1px;
+  outline-style: solid;
+  outline-width: 1px;
+}
+/*************/
+/* Highlight.css */
+/*************/
+.Highlight {
+  background: var(--HighlightBackground, rgba(129, 85, 14, 0.4));
+  contain: content;
+}
+
+.HighlightInserted {
+  background: var(--HighlightInsertedBackground, rgba(156, 204, 44, 0.2));
+  text-decoration: none;
+  border: 1px solid rgba(155, 185, 85, 0.2);
+  contain: content;
+}
+
+.HighlightDeleted {
+  background: var(--HighlightDeletedBackground, rgba(255, 0, 0, 0.2));
+  border: 1px solid rgba(255, 0, 0, 0.2);
+  contain: content;
+  text-decoration: line-through;
+}
+/*************/
+/* IconButton.css */
+/*************/
+:root {
+  --IconButtonDisabledForeground: rgba(204, 204, 204, 0.5);
+}
+
+.IconButton {
+  width: 22px;
+  height: 22px;
+  contain: strict;
+  flex-shrink: 0;
+  background: transparent;
+  border: none;
+  color: #c5c5c5;
+  border-radius: 5px;
+  cursor: pointer;
+  display: flex;
+  padding: 0;
+}
+
+.IconButton:enabled:hover {
+  background-color: hsla(0, 0%, 100%, 0.1);
+}
+
+.IconButton:focus-visible {
+  outline: 1px solid #3d5252;
+  outline-offset: -1px;
+}
+
+.IconButtonDisabled {
+  color: var(--IconButtonDisabledForeground);
+}
+/*************/
+/* InputBox.css */
+/*************/
+:root {
+  --InputBoxForeground: #e1e1e1;
+}
+
+.InputBox {
+  width: 100%;
+  margin: 0;
+  border: none;
+  outline: none;
+  flex: 1;
+  background: var(--InputBoxBackground);
+  border: 1px solid var(--InputBoxBorder, rgb(55, 65, 63));
+  padding: 4px 6px;
+  color: var(--InputBoxForeground);
+  font-size: 13px;
+  height: 24px;
+  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;
+}
+
+.SearchFieldInput {
+  flex: 1;
+  resize: none;
+  color: var(--InputBoxForeground);
+  border: none;
+  font-size: 13px;
+  height: 24px;
+  contain: strict;
+  line-height: 24px;
+  width: 100%;
+  padding: 4px 6px;
+}
+
+.SearchFieldInput {
+  background: transparent;
+}
+
+.MultilineInputBox {
+  width: 100%;
+  margin: 0;
+  border: none;
+  outline: none;
+  flex: 1;
+  background: var(--InputBoxBackground);
+  padding: 4px 6px;
+  color: var(--InputBoxForeground);
+  font-size: 13px;
+  height: 24px;
+  contain: strict;
+  resize: none;
+  overflow: hidden;
+  white-space: pre;
+  text-overflow: ellipsis;
+}
+
+.InputBox::placeholder,
+.MultilineInputBox::placeholder {
+  color: var(--InputBoxPlaceholderForeground, rgba(255, 255, 255, 0.3));
+}
+
+.InputBox:focus {
+  border-color: var(--FocusOutline, lightgray);
+}
+/*************/
+/* Label.css */
+/*************/
+.Label {
+  white-space: nowrap;
+  contain: content;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 0;
+  white-space: pre;
+}
+
+.LabelDetail {
+  font-size: 0.9em;
+  opacity: 0.7;
+  contain: content;
+  margin-left: 4px;
+}
+
+.StrikeThrough {
+  text-decoration: line-through;
+}
+/*************/
+/* MaskIcon.css */
+/*************/
+.MaskIcon,
+.Icon {
+  display: block;
+  background: currentColor;
+  mask-repeat: no-repeat;
+  mask-size: var(--MaskIconSize);
+  mask-position: 50% 50%;
+  pointer-events: none;
+  contain: strict;
+  width: 100%;
+  height: 100%;
+}
+
+.ColoredMaskIcon {
+  width: 20px;
+  height: 20px;
+  contain: strict;
+  display: block;
+  background: currentColor;
+  color: var(--TitleBarForeground, rgb(204, 204, 204));
+  mask-repeat: no-repeat;
+  mask-size: 16px;
+  mask-position: 50% 50%;
+  pointer-events: none;
+  contain: strict;
+  flex-shrink: 0;
+}
+
+.MaskIconMinimize,
+.IconMinimize {
+  mask-image: url(/c76328b/icons/chrome-minimize.svg);
+}
+
+.MaskIconMaximize,
+.IconMaximize {
+  mask-image: url(/c76328b/icons/chrome-maximize.svg);
+}
+
+.MaskIconRestore,
+.IconRestore {
+  mask-image: url(/c76328b/icons/chrome-restore.svg);
+}
+
+.MaskIconPlay,
+.IconPlay {
+  mask-image: url(/c76328b/icons/play.svg);
+}
+
+.MaskIconChromeClose,
+.IconChromeClose {
+  mask-image: url(/c76328b/icons/chrome-close.svg);
+}
+
+.MaskIconFiles,
+.IconFiles {
+  mask-image: url(/c76328b/icons/files.svg);
+}
+
+.MaskIconSearch,
+.IconSearch {
+  mask-image: url(/c76328b/icons/search.svg);
+}
+
+.MaskIconSourceControl,
+.IconSourceControl {
+  mask-image: url(/c76328b/icons/source-control.svg);
+}
+
+.MaskIconDebugAlt2,
+.IconDebugAlt2 {
+  mask-image: url(/c76328b/icons/debug-alt-2.svg);
+}
+
+.MaskIconExtensions,
+.IconExtensions {
+  mask-image: url(/c76328b/icons/extensions.svg);
+}
+
+.MaskIconSettingsGear,
+.IconSettingsGear {
+  mask-image: url(/c76328b/icons/settings-gear.svg);
+}
+
+.MaskIconEllipsis,
+.IconEllipsis {
+  mask-image: url(/c76328b/icons/ellipsis.svg);
+}
+
+.MaskIconArrowDown,
+.IconArrowDown {
+  mask-image: url(/c76328b/icons/arrow-down.svg);
+}
+
+.MaskIconArrowUp,
+.IconArrowUp {
+  mask-image: url(/c76328b/icons/arrow-up.svg);
+}
+
+.MaskIconClose,
+.IconClose,
+.EditorTabCloseButton:hover .MaskIconCircleFilled,
+.IconCircleFilled {
+  mask-image: url(/c76328b/icons/close.svg);
+}
+
+.MaskIconCaseSensitive,
+.IconCaseSensitive {
+  mask-image: url(/c76328b/icons/case-sensitive.svg);
+}
+
+.MaskIconWholeWord,
+.IconWholeWord {
+  mask-image: url(/c76328b/icons/whole-word.svg);
+}
+
+.MaskIconRegex,
+.IconRegex {
+  mask-image: url(/c76328b/icons/regex.svg);
+}
+
+.MaskIconChevronRight,
+.IconChevronRight {
+  mask-image: url(/c76328b/icons/chevron-right.svg);
+}
+
+.MaskIconChevronDown,
+.IconChevronDown {
+  mask-image: url(/c76328b/icons/chevron-down.svg);
+}
+
+.MaskIconRefresh,
+.IconRefresh {
+  mask-image: url(/c76328b/icons/refresh.svg);
+}
+
+.MaskIconClearAll,
+.IconClearAll {
+  mask-image: url(/c76328b/icons/clear-all.svg);
+}
+
+.MaskIconCloud {
+  mask-image: url(/c76328b/icons/cloud.svg);
+}
+
+.MaskIconTag {
+  mask-image: url(/c76328b/icons/tag.svg);
+}
+
+.MaskIconNewFile,
+.IconNewFile {
+  mask-image: url(/c76328b/icons/new-file.svg);
+}
+
+.MaskIconNewFolder,
+.IconNewFolder {
+  mask-image: url(/c76328b/icons/new-folder.svg);
+}
+
+.MaskIconListFlat,
+.IconListFlat {
+  mask-image: url(/c76328b/icons/list-flat.svg);
+}
+
+.MaskIconCollapseAll,
+.IconCollapseAll {
+  mask-image: url(/c76328b/icons/collapse-all.svg);
+}
+
+.MaskIconFilter,
+.IconFilter {
+  mask-image: url(/c76328b/icons/filter.svg);
+}
+
+.MaskIconBlank,
+.IconBlank {
+  mask-image: url(/c76328b/icons/blank.svg);
+}
+
+.MaskIconCheck,
+.IconCheck {
+  mask-image: url(/c76328b/icons/check.svg);
+}
+
+.MaskIconEllipsis,
+.IconEllipsis {
+  mask-image: url(/c76328b/icons/ellipsis.svg);
+}
+
+.MaskIconBook,
+.IconBook {
+  mask-image: url(/c76328b/icons/book.svg);
+}
+
+.MaskIconAdd,
+.IconAdd {
+  mask-image: url(/c76328b/icons/add.svg);
+}
+
+.MaskIconTrash,
+.IconTrash {
+  mask-image: url(/c76328b/icons/trash.svg);
+}
+
+.MaskIconSplitHorizontal,
+.IconSplitHorizontal {
+  mask-image: url(/c76328b/icons/split-horizontal.svg);
+}
+
+.MaskIconReplace,
+.IconReplace {
+  mask-image: url(/c76328b/icons/replace.svg);
+}
+
+.MaskIconReplaceAll,
+.IconReplaceAll {
+  mask-image: url(/c76328b/icons/replace-all.svg);
+}
+
+.MaskIconChevronUp,
+.IconChevronUp {
+  mask-image: url(/c76328b/icons/chevron-up.svg);
+}
+
+.MaskIconArrowLeft,
+.IconArrowLeft {
+  mask-image: url(/c76328b/icons/arrow-left.svg);
+}
+
+.MaskIconArrowRight,
+.IconArrowRight {
+  mask-image: url(/c76328b/icons/arrow-right.svg);
+}
+
+.MaskIconLinkExternal,
+.IconLinkExternal {
+  mask-image: url(/c76328b/icons/link-external.svg);
+}
+
+.MaskIconExclude,
+.IconExclude {
+  mask-image: url(/c76328b/icons/exclude.svg);
+}
+
+.MaskIconGoToFile,
+.IconGoToFile {
+  mask-image: url(/c76328b/icons/go-to-file.svg);
+}
+
+.MaskIconDiscard,
+.IconDiscard {
+  mask-image: url(/c76328b/icons/discard.svg);
+}
+
+.MaskIconRemove,
+.IconRemove {
+  mask-image: url(/c76328b/icons/remove.svg);
+}
+
+.MaskIconError,
+.IconError {
+  mask-image: url(/c76328b/icons/error.svg);
+}
+
+.MaskIconCircleFilled,
+.IconCircleFilled {
+  mask-image: url(/c76328b/icons/circle-filled.svg);
+}
+
+.MaskIconInfo,
+.IconInfo {
+  mask-image: url(/c76328b/icons/info.svg);
+}
+
+.MaskIconSymbolValue,
+.IconSymbolValue,
+.MaskIconSymbolDefault,
+.IconSymbolDefault {
+  mask-image: url(/c76328b/icons/symbol-enum.svg);
+}
+
+.MaskIconSymbolProperty,
+.IconSymbolProperty {
+  mask-image: url(/c76328b/icons/symbol-property.svg);
+}
+
+.MaskIconSymbolFunction,
+.IconSymbolFunction {
+  mask-image: url(/c76328b/icons/symbol-method.svg);
+}
+
+.MaskIconSymbolVariable,
+.IconSymbolVariable {
+  mask-image: url(/c76328b/icons/symbol-variable.svg);
+}
+
+.MaskIconSymbolKeyword,
+.IconSymbolKeyword {
+  mask-image: url(/c76328b/icons/symbol-keyword.svg);
+}
+
+.MaskIconSymbolField,
+.IconSymbolField {
+  mask-image: url(/c76328b/icons/symbol-field.svg);
+}
+
+.MaskIconEdit,
+.IconEdit {
+  mask-image: url(/c76328b/icons/edit.svg);
+}
+
+.MaskIconSymbolFile,
+.IconSymbolFile {
+  mask-image: url(/c76328b/icons/symbol-file.svg);
+}
+
+.MaskIconDebugPause {
+  mask-image: url(/c76328b/icons/debug-pause.svg);
+}
+
+.MaskIconDebugStepOver {
+  mask-image: url(/c76328b/icons/debug-step-over.svg);
+}
+
+.MaskIconDebugStepInto {
+  mask-image: url(/c76328b/icons/debug-step-into.svg);
+}
+
+.MaskIconDebugStepOut {
+  mask-image: url(/c76328b/icons/debug-step-out.svg);
+}
+
+.MaskIconDebugContinue {
+  mask-image: url(/c76328b/icons/debug-continue.svg);
+}
+
+.MaskIconTriangleRight {
+  mask-image: url(/c76328b/icons/triangle-right.svg);
+}
+
+.MaskIconTriangleDown {
+  mask-image: url(/c76328b/icons/triangle-down.svg);
+}
+
+.MaskIconDebugRestart {
+  mask-image: url(/c76328b/icons/debug-restart.svg);
+}
+
+.MaskIconDebugStop {
+  mask-image: url(/c76328b/icons/debug-stop.svg);
+}
+
+.MaskIconPreserveCase {
+  mask-image: url(/c76328b/icons/preserve-case.svg);
+}
+
+.MaskIconListTree {
+  mask-image: url(/c76328b/icons/list-tree.svg);
+}
+
+.MaskIconRecordKey {
+  mask-image: url(/c76328b/icons/record-keys.svg);
+}
+/*************/
+/* Menu.css */
+/*************/
+/* based on https://github.com/microsoft/vscode/blob/91687c47955bd84db607ef8aaf24b7cf35bfd1ad/src/vs/base/browser/ui/menu/menu.ts#L1005 by Microsoft (License MIT) */
+
+.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 / 36%) 0px 2px 8px);
+  user-select: none;
+  min-width: 150px;
+  margin: 0;
+  padding: 4px 0;
+  font-size: 13px;
+  z-index: 1;
+  outline: none;
+  pointer-events: auto;
+  border-radius: 5px;
+}
+
+.MenuItem {
+  height: 26px;
+  padding: 0 28px;
+  align-items: center;
+  white-space: nowrap;
+  position: relative;
+  outline: none;
+  display: flex;
+  contain: content;
+  margin: 0 4px;
+  border-radius: 4px;
+}
+
+.MenuItemFocused {
+  background: var(--MenuItemHoverBackground, #687f7b33);
+  color: var(--MenuItemHoverForeground, inherit);
+  outline: none;
+}
+
+.MenuItemSubMenuArrowRight {
+  width: 16px;
+  height: 16px;
+  display: block;
+  mask-image: url(/c76328b/icons/chevron-right.svg);
+  mask-repeat: no-repeat;
+  mask-position: center;
+  mask-size: 100%;
+  background: currentColor;
+  margin-left: auto;
+  margin-right: -20px;
+  contain: strict;
+}
+
+.MenuItemSeparator {
+  height: 11px;
+  position: relative;
+  contain: strict;
+  display: flex;
+  align-items: center;
+}
+
+.MenuItemSeparatorLine {
+  width: 100%;
+  height: 1px;
+  background: var(--MenuItemSeparatorBackground, #606060);
+}
+
+.MenuItemCheckMark {
+  padding: 0;
+}
+
+.MenuItemCheckmarkIcon {
+  width: 26px;
+  height: 26px;
+  contain: strict;
+  mask-size: 20px;
+  mask-position: 50% 50%;
+  background: currentColor;
+  mask-repeat: no-repeat;
+}
+
+.MenuItemKeyBinding {
+  padding-left: 2em;
+  margin-left: auto;
+}
+/*************/
+/* MessageAction.css */
+/*************/
+.MessageAction {
+  text-decoration: underline;
+  margin-left: 4px;
+}
+/*************/
+/* 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%;
+  }
+}
+/*************/
+/* 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;
+}
+/*************/
+/* ProblemsIcon.css */
+/*************/
+.ProblemsIcon {
+  width: 16px;
+  height: 16px;
+  contain: strict;
+  mask-repeat: no-repeat;
+  mask-size: 100%;
+  mask-position: 50% 50%;
+  background: currentColor;
+}
+
+.ProblemsErrorIcon {
+  color: var(--ProblemsErrorIconForeground, #b64e4e);
+  mask-image: url(/c76328b/icons/error.svg);
+}
+
+.ProblemsWarningIcon {
+  color: var(--ProblemsWarningIconForeground, #91b147);
+  mask-image: url(/c76328b/icons/warning.svg);
+}
+/*************/
+/* ScrollBar.css */
+/*************/
+.ScrollBar {
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 14px;
+  bottom: 0;
+  contain: strict;
+  cursor: default;
+}
+
+.ScrollBarHorizontal,
+.ScrollBarHorizontalSmall {
+  left: 0;
+  top: auto;
+  height: 14px;
+  width: auto;
+}
+
+.ScrollBarHorizontalSmall {
+  height: 3px;
+}
+
+.ScrollBarLarge {
+  width: 28px;
+}
+
+.ScrollBarSmall {
+  width: 10px;
+}
+/*************/
+/* ScrollBarThumb.css */
+/*************/
+.ScrollBarThumb {
+  width: 100%;
+  /* height: 40px; */
+  position: absolute;
+  contain: strict;
+  background: var(--EditorScrollBarBackground, rgba(57, 71, 71, 0.6));
+}
+
+.ScrollBarThumbActive {
+  background: var(--ScrollBarThumbActiveBackground, rgba(83, 100, 100, 0.4));
+}
+
+.ScrollBarThumbHorizontal {
+  height: 100%;
+  width: auto;
+}
+/*************/
+/* SearchField.css */
+/*************/
+.SearchFieldContainer {
+  contain: content;
+  display: flex;
+  height: 26px;
+  gap: 4px;
+  flex: 1;
+}
+
+.SearchField {
+  display: flex;
+  border: 1px solid var(--InputBoxBorder, rgb(55, 65, 63));
+  background: var(--InputBoxBackground, rgb(36, 41, 42));
+  contain: strict;
+  height: 26px;
+  flex-grow: 1;
+}
+
+.SearchFieldButtons {
+  padding-top: 2px;
+  padding-right: 2px;
+  contain: content;
+  display: flex;
+  gap: 2px;
+}
+
+.SearchFieldButton {
+  position: relative;
+  background: transparent;
+  border: 1px solid transparent;
+  color: white;
+  contain: strict;
+  width: 20px;
+  height: 20px;
+  cursor: pointer;
+  padding: 1px;
+}
+
+.SearchFieldButton:focus-visible {
+  outline: 1px solid #3d5252;
+  outline-offset: -1px;
+}
+
+.SearchFieldButton:where(:hover) {
+  background: rgba(90, 93, 94, 0.31);
+}
+
+.SearchFieldButtonChecked {
+  border-color: #a03f9b;
+}
+
+.SearchButtonReplaceAll {
+  position: relative;
+}
+/*************/
+/* SearchHeader.css */
+/*************/
+.SearchHeader {
+  padding-top: 5px;
+  contain: content;
+}
+
+.SearchHeaderTop {
+  display: flex;
+  contain: content;
+  padding-right: 12px;
+}
+
+.SearchHeaderTopRight {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  contain: content;
+  gap: 6px;
+}
+
+.SearchHeaderDetails {
+  display: flex;
+  position: relative;
+  contain: strict;
+  width: 100%;
+  height: 30px;
+  justify-content: space-between;
+  padding-right: 10px;
+  align-items: end;
+}
+
+.SearchHeaderDetailsExpanded {
+  display: flex;
+  flex-direction: column;
+}
+
+.ToggleDetails {
+  width: 20px;
+  height: 20px;
+  --MaskIconSize: 15px;
+  cursor: pointer;
+  align-self: flex-start;
+}
+
+.SearchHeaderDetailsExpanded {
+  padding: 10px;
+  contain: content;
+  padding-left: 20px;
+  padding-top: 0;
+}
+
+/* TODO avoid nesting */
+
+.SearchHeaderDetailsExpanded .ViewletSearchMessage {
+  padding-left: 0;
+}
+
+.SearchHeaderDetailsExpanded .ViewletSearchMessage {
+  padding-left: 0;
+}
+
+.SearchHeaderDetailsHeading {
+  font-size: 11px;
+  font-weight: 400;
+  margin: 0;
+  overflow: hidden;
+  padding: 4px 0 0;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: rgb(188, 190, 190);
+  flex: 1;
+}
+
+.SearchHeaderDetailsExpandedTop {
+  display: flex;
+  flex-direction: row-reverse;
+  justify-content: space-between;
+}
+/*************/
+/* SearchMessage.css */
+/*************/
+.ViewletSearchMessage {
+  color: rgba(156, 162, 160, 0.65);
+  padding-bottom: 8px;
+  padding-top: 5px;
+  padding-left: 22px;
+  contain: content;
+  line-height: 13px;
+}
+/*************/
+/* SplitButton.css */
+/*************/
+.SplitButton {
+  background: var(--SplitButtonBackground, rgb(35, 112, 112));
+  color: var(--SplitButtonForeground, white);
+  height: 28px;
+  contain: strict;
+  display: flex;
+  border-radius: 2px;
+  margin-right: 12px;
+  margin-left: 19px;
+  margin-bottom: 6px;
+}
+
+.SplitButtonContent {
+  contain: strict;
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  outline: none;
+}
+
+.SplitButtonContent:where(:hover),
+.SplitButtonContent:where(:focus),
+.SplitButtonDropDown:where(:hover),
+.SplitButtonDropDown:where(:focus) {
+  background: var(--SplitButtonHoverBackground, #387674);
+}
+
+.SplitButtonDisabled {
+  background: #2f6260;
+  opacity: 0.4;
+}
+
+.SplitButtonContentDisabled,
+.SplitButtonDropDownDisabled {
+  cursor: default;
+}
+
+.SplitButtonSeparator {
+  height: 90%;
+  width: 1px;
+  background: rgba(255, 255, 255, 0.4);
+  contain: strict;
+}
+
+.SplitButtonDropDown {
+  width: 25px;
+  height: 100%;
+  contain: strict;
+  cursor: pointer;
+  border-right: 1px solid transparent;
+  outline: none;
+}
+/*************/
+/* Symbol.css */
+/*************/
+:root {
+  --SymbolValueForeground: #ee9d28;
+  --SymbolPropertyForeground: #aaaaaa;
+  --SymbolVariableForeground: #75beff;
+  --SymbolFunctionForeground: #b180d7;
+  --SymbolKeywordForeground: #9ca2a0;
+  --SymbolFieldForeground: #75beff;
+}
+
+.SymbolValue,
+.SymbolDefault {
+  color: var(--SymbolValueForeground);
+  mask-image: url(/c76328b/icons/symbol-enum.svg);
+}
+
+.SymbolProperty {
+  color: var(--SymbolPropertyForeground);
+  mask-image: url(/c76328b/icons/symbol-property.svg);
+}
+
+.SymbolFunction {
+  color: var(--SymbolFunctionForeground);
+  mask-image: url(/c76328b/icons/symbol-method.svg);
+}
+
+.SymbolVariable {
+  color: var(--SymbolVariableForeground);
+  mask-image: url(/c76328b/icons/symbol-variable.svg);
+}
+
+.SymbolKeyword {
+  color: var(--SymbolKeywordForeground);
+  mask-image: url(/c76328b/icons/symbol-keyword.svg);
+}
+
+.SymbolField {
+  color: var(--SymbolFieldForeground);
+  mask-image: url(/c76328b/icons/symbol-field.svg);
+}
+/*************/
+/* TreeItem.css */
+/*************/
+.TreeItem {
+  color: var(--TreeItemForeground, rgb(188, 190, 190));
+  display: flex;
+  gap: 4px;
+  height: 22px;
+  line-height: 22px;
+  contain: strict;
+  width: 100%;
+  align-items: center;
+  cursor: pointer;
+}
+
+.TreeItem:where(:hover) {
+  background: var(--TreeItemHoverBackground, rgba(64, 92, 80, 0.2));
+  color: var(--TreeItemHoverForeground, #e0e0e0);
+}
+
+/* TODO don't use id for styling */
+#TreeItemActive,
+.TreeItemActive {
+  background: var(--TreeItemActiveBackground, rgba(59, 71, 66, 0.5));
+}
+/*************/
+/* Viewlet.css */
+/*************/
+.Viewlet {
+  contain: strict;
+  flex: 1;
+}
+
+.ViewletError {
+  color: lightgray;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  padding: 1rem;
+  width: 100%;
+  text-align: center;
+}
+/*************/
+/* ViewletActivityBar.css */
+/*************/
+.ActivityBar {
+  color: var(--ActivityBarForeground);
+  display: flex;
+  flex-direction: column;
+}
+/*************/
+/* ViewletColorPicker.css */
+/*************/
+.ColorPicker {
+  /* TODO */
+  width: calc(300px + 40px); /* extra space for scroll bar thumb */
+  height: 200px;
+  contain: strict;
+  display: flex;
+  flex-direction: column;
+  background: var(--MainBackground);
+  padding: 0 20px;
+  pointer-events: all;
+}
+
+.ColorPickerRectangle {
+  contain: strict;
+  flex: 1;
+}
+
+.ColorPickerBackgroundColor,
+.ColorPickerLight,
+.ColorPickerDark {
+  position: absolute;
+  inset: 0;
+  contain: strict;
+}
+
+.ColorPickerBackgroundColor {
+  background: var(--ColorPickerColor);
+}
+
+.ColorPickerLight {
+  background: linear-gradient(to right, rgb(255, 255, 255), rgba(255, 255, 255, 0));
+}
+
+.ColorPickerDark {
+  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgb(0, 0, 0));
+}
+
+.ColorPickerSlider {
+  height: 10px;
+  width: 100%;
+  background: linear-gradient(to right, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red);
+  border-radius: 5px;
+  position: relative;
+  margin: 20px auto;
+  contain: strict;
+}
+
+.ColorPickerSliderThumb {
+  position: absolute;
+  top: calc(-15px + 2px + 5px + 150px + 20px + 2px);
+  left: calc(-15px + 2px + 5px + 20px);
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  border: 2px solid white;
+  touch-action: none;
+  background: var(--ColorPickerColor);
+  contain: strict;
+}
+/*************/
+/* ViewletEditor.css */
+/*************/
+/* TODO this should not be global */
+.Editor {
+  width: 100%;
+  height: 100%;
+  background: var(--MainBackground);
+  color: white;
+  outline: none;
+  border: none;
+  font-family: var(--EditorFontFamily);
+  position: relative;
+  white-space: pre;
+  font-size: var(--EditorFontSize);
+  letter-spacing: var(--EditorLetterSpacing);
+  font-feature-settings: var(--EditorFontFeatureSettings);
+  tab-size: var(--EditorTabSize);
+  font-display: block;
+  cursor: text;
+  font-weight: var(--EditorFontWeight);
+  position: absolute;
+  display: flex;
+}
+
+.EditorContent {
+  contain: strict;
+  width: 100%;
+  height: 100%;
+}
+
+.EditorLayers {
+  contain: strict;
+  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;
+}
+
+.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;
+}
+
+.LayerCursor,
+.LayerDiagnostics {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+
+.Diagnostic {
+  position: absolute;
+  contain: strict;
+}
+
+.DiagnosticError {
+  background: url(/c76328b/icons/squiggly-error.svg) repeat-x bottom left;
+}
+
+.DiagnosticWarning {
+  background: url(/c76328b/icons/squiggly-warning.svg) repeat-x bottom left;
+}
+
+.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;
+}
+
+.Link {
+  text-decoration: underline;
+}
+
+.Gutter {
+  contain: strict;
+  width: 30px;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.Gutter:empty {
+  display: none;
+}
+
+.LineNumber {
+  color: var(--EditorLineNumberForeground, rgba(155, 162, 160, 0.3));
+  contain: strict;
+  margin-right: 1px;
+  height: var(--EditorLineHeight);
+  text-align: right;
+}
+/*************/
+/* ViewletEditorCodeGenerator.css */
+/*************/
+.CodeGeneratorWidget {
+  background: var(--HoverWidgetBackground, #282e2f);
+  border: 1px solid;
+  border-color: var(--EditorWidgetBorder, #454545);
+  color: var(--ListForeground, white);
+  border-radius: 2px;
+  z-index: 922;
+  pointer-events: all;
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+}
+
+.CodeGeneratorMessage {
+  font-size: 11px;
+  padding: 3px;
+}
+/*************/
+/* ViewletEditorCompletion.css */
+/*************/
+.EditorCompletion {
+  background: var(--CompletionListBackground, #282e2f);
+  color: var(--CompletionListForeground, white);
+  user-select: none;
+  font-size: 15px;
+  pointer-events: all;
+  border: 1px solid;
+  border-color: var(--CompletionListBorder, #95a29d);
+  font-family: var(--EditorFontFamily);
+  position: absolute;
+}
+
+.EditorCompletionItem {
+  height: 20px;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+  contain: strict;
+  gap: 5px;
+  padding-left: 1px;
+  position: absolute;
+  cursor: pointer;
+}
+
+/* TODO reuse same highlight css for quickpick */
+.EditorCompletionItemHighlight {
+  color: var(--CompletionHighlightForeground, #e1b974);
+  font-weight: 700;
+  contain: content;
+}
+
+.EditorCompletionItem:where(:hover) {
+  background: var(--CompletionListItemHoverBackground, rgba(64, 92, 80, 0.2));
+}
+
+.EditorCompletionItemFocused {
+  background: var(--CompletionListItemActiveBackground, #405c50);
+  color: var(--CompletionListItemActiveForeground);
+}
+
+/* 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;
+}
+
+.EditorCompletionItemDeprecated {
+  text-decoration: line-through;
+}
+/*************/
+/* ViewletEditorCompletionDetail.css */
+/*************/
+.EditorCompletionDetails {
+  position: absolute;
+  z-index: 1;
+  background: var(--CompletionListBackground, #282e2f);
+  padding: 5px;
+  pointer-events: all;
+  border: 1px solid;
+  border-color: var(--CompletionListBorder, #95a29d);
+}
+
+.CompletionDetailCloseButton {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 20px;
+  height: 20px;
+}
+/*************/
+/* ViewletEditorError.css */
+/*************/
+:root {
+  --IconErrorForeground: rgb(182, 78, 78);
+}
+
+.TextEditorError {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  font-size: 14px;
+  color: rgb(156, 162, 160);
+  padding-left: 16px;
+  padding-right: 16px;
+}
+
+.EditorTextIcon {
+  width: 48px;
+  height: 48px;
+  contain: strict;
+  --MaskIconSize: 48px;
+}
+
+.EditorTextIconError {
+  color: var(--IconErrorForeground);
+}
+/*************/
+/* ViewletEditorHover.css */
+/*************/
+:root {
+  --HoverWidgetForeground: #9ca2a0;
+  --HoverWidgetBackground: #282e2f;
+}
+
+.EditorHover {
+  background: var(--HoverWidgetBackground, #282e2f);
+  border-color: var(--CompletionListBorder, #95a29d);
+  border: 1px solid;
+  bottom: 0;
+  color: var(--HoverWidgetForeground, white);
+  contain: content;
+  cursor: text;
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  min-height: 20px;
+  position: absolute;
+  user-select: text;
+  overflow: auto;
+  pointer-events: all;
+}
+
+/* TODO use javascript scrollbar */
+.EditorHover::-webkit-scrollbar {
+  height: 14px;
+}
+
+.EditorHover::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.EditorHover::-webkit-scrollbar-thumb {
+  background: var(--EditorScrollBarBackground);
+}
+
+.HoverEditorRow {
+  display: block;
+  height: var(--EditorLineHeight);
+  line-height: var(--EditorLineHeight);
+  /* contain: strict; */
+}
+
+.HoverDisplayString {
+  white-space: pre;
+  /* contain: content; */
+  font-family: var(--EditorFontFamily);
+  font-size: var(--EditorFontSize);
+  letter-spacing: var(--EditorLetterSpacing);
+  font-feature-settings: var(--EditorFontFeatureSettings);
+  tab-size: var(--EditorTabSize);
+  font-display: block;
+  padding: 4px 8px;
+}
+
+/* TODO don't use pseudo selectors */
+.HoverDisplayString:not(:first-child) {
+  border-top: 1px solid rgba(149, 162, 157, 0.5);
+}
+
+.HoverDocumentation {
+  contain: content;
+  font-size: 15px;
+  line-height: 1.33333;
+  padding: 4px 8px;
+}
+
+.HoverProblem {
+  contain: content;
+  display: flex;
+}
+
+.HoverProblemMessage {
+  content: content;
+}
+
+.HoverProblemDetail {
+  opacity: 0.6;
+  contain: content;
+  padding-left: 6px;
+}
+/*************/
+/* ViewletEditorRename.css */
+/*************/
+.EditorRename {
+  z-index: 22;
+  pointer-events: all;
+  position: absolute;
+}
+/*************/
+/* ViewletEditorSourceActions.css */
+/*************/
+.EditorSourceActions {
+  background: var(--HoverWidgetBackground, #282e2f);
+  border: 1px solid;
+  border-color: var(--EditorWidgetBorder, #454545);
+  color: var(--ListForeground, white);
+  border-radius: 2px;
+  z-index: 22;
+  pointer-events: all;
+  position: absolute;
+}
+
+.SourceActionHeading {
+  height: 26px;
+  contain: strict;
+  padding: 0 10px;
+  line-height: 26px;
+  color: var(--DescriptionForeground, rgba(156, 162, 160, 0.7));
+}
+
+.SourceActionItem {
+  height: 24px;
+  contain: strict;
+  padding: 0 10px;
+  line-height: 24px;
+  display: flex;
+}
+
+.SourceActionItem:where(:hover) {
+  background: var(--ListHoverBackground);
+  color: var(--ListHoverForeground);
+}
+
+.SourceActionItemFocused {
+  background: var(--ListHoverBackground);
+  color: var(--ListHoverForeground);
+}
+
+.SourceActionIcon {
+  position: relative;
+  width: 20px;
+  height: 20px;
+  --MaskIconSize: 14px;
+}
+/*************/
+/* ViewletExplorer.css */
+/*************/
+:root {
+  --DropTargetBackground: #062f4a;
+}
+
+.Explorer {
+  outline: none;
+}
+
+.ListItems {
+  user-select: none;
+}
+
+.DropTarget {
+  background: var(--DropTargetBackground);
+}
+/*************/
+/* ViewletFindWidget.css */
+/*************/
+:root {
+  --ErrorForeground: #f48771;
+}
+
+.FindWidget {
+  /* TODO create separate variable for this */
+  background: var(--ActivityBarBackground);
+  z-index: 1;
+  display: flex;
+  padding: 0 4px;
+  position: absolute;
+  --MaskIconSize: 16px;
+  pointer-events: all;
+}
+
+.FindWidgetRight {
+  display: flex;
+  flex-direction: column;
+  contain: strict;
+  flex: 1;
+}
+
+.FindWidgetFind {
+  display: flex;
+  contain: strict;
+  flex: 1;
+  align-items: center;
+}
+
+.FindWidgetReplace {
+  display: flex;
+  contain: strict;
+  flex: 1;
+  align-items: center;
+}
+
+.FindWidgetDetails {
+  display: flex;
+  contain: content;
+  align-items: center;
+  height: 100%;
+}
+
+.FindWidgetMatchCount {
+  width: 70px;
+  white-space: nowrap;
+  flex-shrink: 0;
+  contain: strict;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  margin-left: 3px;
+  font-size: 13px;
+}
+
+.FindWidgetMatchCountEmpty {
+  color: var(--ErrorForeground);
+}
+/*************/
+/* ViewletLayout.css */
+/*************/
+.Workbench {
+  width: 100%;
+  height: 100%;
+  contain: strict;
+  font-size: 13px;
+  line-height: 1.4;
+}
+
+.TitleBar,
+.SideBar,
+.Main,
+.ActivityBar,
+.Panel,
+.StatusBar {
+  /*
+   * 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;
+  transform: translateZ(0);
+}
+
+.ActivityBar {
+  background: var(--ActivityBarBackground);
+}
+
+.SideBar {
+  background: var(--SideBarBackground, rgb(30, 35, 36));
+}
+
+.Main {
+  background: var(--MainBackground);
+}
+
+.StatusBar {
+  background: var(--StatusBarBackground);
+}
+
+.TitleBar {
+  background: rgb(40, 46, 47);
+  background: var(--TitleBarBackground);
+}
+
+.Panel {
+  background: var(--PanelBackground);
+}
+/*************/
+/* ViewletList.css */
+/*************/
+.List {
+  position: relative;
+}
+
+.ListItems {
+  flex: 1;
+  contain: strict;
+  position: relative;
+  height: 100%;
+}
+/*************/
+/* ViewletMain.css */
+/*************/
+.Main {
+  background: var(--MainBackground);
+  position: absolute;
+}
+
+.DragOverlay {
+  position: absolute;
+  background: rgba(83, 89, 93, 0.5);
+  z-index: 1;
+  pointer-events: none;
+  transition: all 100ms;
+  contain: strict;
+}
+
+/* TODO make all error viewlets position absolute? */
+.Main .Error {
+  position: absolute;
+}
+/*************/
+/* ViewletQuickPick.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 !important;
+  /* TODO is this useful? */
+  /* transform: translate3d(0, 0, 0); */
+  display: flex;
+  flex-direction: column;
+  pointer-events: all;
+  /* inset: 0; */
+  /* will-change: transform; */
+  box-shadow: rgb(0 0 0 / 15%) 0px 0px 8px 2px;
+}
+
+.QuickPickHeader {
+  display: flex;
+  padding: 8px 6px 6px;
+  height: 38px;
+  contain: strict;
+}
+
+.QuickPickItems {
+  outline: 0;
+  margin: 0;
+  padding: 0 5px;
+  overflow: hidden;
+  contain: strict;
+  background: var(--QuickPickBackground);
+}
+
+.QuickPickItem {
+  display: flex;
+  white-space: nowrap;
+  align-items: center;
+  width: 100%;
+  height: 22px;
+  font-size: 13px;
+  margin: 0;
+  padding: 0 6px 0 11px;
+  contain: strict;
+  gap: 6px;
+  line-height: 22px;
+  border-radius: 3px;
+}
+
+.QuickPickItem:where(:hover) {
+  background: var(--ListHoverBackground);
+  color: var(--ListHoverForeground);
+}
+
+.QuickPickItemActive {
+  color: var(--ListActiveSelectionForeground);
+  background: var(--ListActiveSelectionBackground);
+}
+
+/* TODO avoid nesting */
+.QuickPickItemActive .QuickPickItemDescription {
+  color: color-mix(in oklab, var(--ListActiveSelectionForeground), var(--ListActiveSelectionBackground) 30%);
+}
+
+.QuickPickItemLabel {
+  contain: content;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: pre;
+  flex-shrink: 0;
+}
+
+.QuickPickItemDescription {
+  font-size: 0.9em;
+  pointer-events: none;
+  contain: content;
+  /* TODO compute mixed color in javascript once for effiency */
+  color: color-mix(in oklab, var(--ListForeground), var(--QuickPickBackground) 30%);
+}
+
+/* TODO use aria annouce for this */
+.QuickPickCount {
+  /* Screen Reader Only */
+  position: absolute;
+  left: -10000px;
+  top: auto;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+}
+
+/* TODO reuse same highlight css for completions */
+.QuickPickHighlight {
+  color: var(--CompletionHighlightForeground, #e1b974);
+  font-weight: 700;
+  contain: content;
+}
+
+.QuickPickMaskIcon {
+  display: block;
+  background: currentColor;
+  mask-repeat: no-repeat;
+  mask-size: var(--MaskIconSize);
+  mask-position: 50% 50%;
+  pointer-events: none;
+  contain: strict;
+  width: 20px;
+  height: 20px;
+  mask-size: 70%;
+}
+/*************/
+/* ViewletSash.css */
+/*************/
+.Sash {
+  position: fixed;
+  contain: strict;
+  z-index: 1;
+}
+
+.SashHorizontal {
+  height: 4px;
+  cursor: row-resize;
+}
+
+.SashVertical {
+  width: 4px;
+  cursor: col-resize;
+}
+
+.SashVisible {
+  display: flex;
+  justify-content: center;
+}
+
+.SashActive {
+  background: var(--SashHoverBorder, #3d5252);
+}
+
+.SashResize {
+  top: 0;
+  right: 0;
+  height: 100%;
+}
+/*************/
+/* ViewletSideBar.css */
+/*************/
+.SideBar {
+  color: var(--SideBarForeground, white);
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+}
+
+.SideBarTitleArea {
+  contain: strict;
+  display: flex;
+  height: 35px;
+  line-height: 35px;
+  padding: 0 8px;
+}
+
+.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;
+  contain: strict;
+  flex: 1;
+}
+/*************/
+/* ViewletStatusBar.css */
+/*************/
+.StatusBar {
+  display: flex;
+  justify-content: space-between;
+}
+
+.StatusBar {
+  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;
+}
+
+.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;
+  mask-repeat: no-repeat;
+  mask-position: center;
+  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;
+}
+/*************/
+/* ViewletTitleBar.css */
+/*************/
+.TitleBar {
+  display: flex;
+  color: var(--TitleBarForeground, rgba(204, 204, 204, 0.6));
+  -webkit-app-region: drag;
+  app-region: drag;
+}
+
+.TitleBarActive {
+  color: var(--TitleBarForegroundActive, rgb(204, 204, 204));
+  background: var(--TitleBarActiveBackground, var(--TitleBarBackground));
+}
+/*************/
+/* ViewletTitleBarButtons.css */
+/*************/
+.TitleBarButtons {
+  margin-left: auto;
+  app-region: drag;
+  contain: strict;
+  flex-grow: 2;
+  display: flex;
+}
+
+.TitleBarButton {
+  width: 46px;
+  height: 100%;
+  contain: strict;
+  background: transparent;
+  border: none;
+  color: currentColor;
+  app-region: no-drag;
+}
+
+.TitleBarButton:hover {
+  background-color: hsla(0, 0%, 100%, 0.1);
+}
+
+.TitleBarButtonMinimize {
+  margin-left: auto;
+}
+
+.TitleBarButtonClose:hover {
+  background-color: var(--TitleBarButtonCloseHoverBackground, rgba(232, 17, 35, 0.9));
+  color: var(--TitleBarButtonCloseHoverForeground, currentColor);
+}
+/*************/
+/* ViewletTitleBarIcon.css */
+/*************/
+.TitleBarIcon {
+  contain: strict;
+  flex-basis: 30px !important;
+  flex-grow: 0 !important;
+  flex-shrink: 0 !important;
+  height: 100%;
+  width: 30px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.TitleBarIconIcon {
+  width: 16px;
+  height: 16px;
+  contain: strict;
+}
+/*************/
+/* ViewletTitleBarMenuBar.css */
+/*************/
+.TitleBarMenuBar {
+  display: flex;
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  -webkit-app-region: no-drag;
+  app-region: no-drag;
+  contain: content;
+  flex-grow: 2;
+  outline: none;
+}
+
+.TitleBarTopLevelEntry {
+  display: flex;
+  align-items: center;
+  padding: 0 8px;
+  contain: content;
+}
+
+.TitleBarTopLevelEntryLabel {
+  height: 22px;
+  border-radius: 5px;
+  background: var(--TitleBarItemHoverForeground, rgba(90, 93, 94, 0.31));
+  pointer-events: none;
+  padding: 0 8px;
+  display: flex;
+  align-items: center;
+  /* contain: content; */
+}
+
+/* TODO use class name instead */
+.TitleBarEntryActive {
+  padding: 0;
+}
+
+/* TODO maybe have extra focus outline border */
+/*
+:focus {
+  border: 2px solid green;
+} */
+/*************/
+/* ViewletTitleBarTitle.css */
+/*************/
+.TitleBarTitle {
+  /* color: orange; */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+/*************/
+/* WebView.css */
+/*************/
+.WebView {
+  contain: strict;
+  position: absolute;
+  display: flex;
+  background: white;
+}
+
+/* TODO this wrapper element might not be needed */
+.WebViewWrapper {
+  display: flex;
+  flex: 1;
+  contain: strict;
+}
+
+.WebViewIframe {
+  flex: 1;
+  contain: strict;
+  border: none;
+  position: absolute;
+  background: white;
+  z-index: 1;
+}
+/*************/
+/* Welcome.css */
+/*************/
+.Welcome {
+  contain: strict;
+  width: 100%;
+  height: 100%;
+  padding-left: 20px;
+  padding-right: 20px;
+  padding-bottom: 13px;
+  display: flex;
+  flex-direction: column;
+  gap: 13px;
+}
+
+.WelcomeMessage {
+  color: var(--WorkbenchForeground);
+  margin: 0;
+}
+/*************/
+/* Widgets.css */
+/*************/
+.Widgets {
+  contain: strict;
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: 1;
+  backface-visibility: hidden;
+}
+
+/* TODO maybe hide widgets container if empty*/
+.Widgets:empty {
+  display: none;
+}