@lvce-editor/server 0.18.1 → 0.18.3

package/static/c866b4f/css/App.css

@@ -1,1821 +0,0 @@
-/*! modern-normalize v2.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. */
-	-moz-tab-size: 4; /* 3. Use a more readable tab size (opinionated). */
-	tab-size: 4; /* 3 */
-}
-
-/*
-Sections
-========
-*/
-
-body {
-	margin: 0; /* Remove the margin in all browsers. */
-}
-
-/*
-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 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.
-*/
-
-button,
-select {
-	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;
-}
-
-.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;
-}
-
-/*************/
-/* __Theme.css */
-/*************/
-:root {
-  /* TODO sizes is not theme */
-  --EditorFontSize: 16px;
-  --EditorLineHeight: 20px;
-  --EditorFontFamily: 'Fira Code', monospace;
-}
-/*************/
-/* _Global.css */
-/*************/
-@font-face {
-  font-family: 'Fira Code';
-  src: url(/c866b4f/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);
-}
-
-.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);
-}
-
-.Hidden {
-  display: none !important;
-}
-
-/* TODO remove items from dom instead of hiding them with css */
-[hidden] {
-  display: none !important;
-}
-
-/*
- * 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; */
-}
-/*************/
-/* AriaAlert.css */
-/*************/
-/* Alert  */
-.AriaAlert {
-  position: absolute;
-  left: -999em;
-  top: 0;
-}
-
-.AriaContainer {
-  width: 0;
-  height: 0;
-}
-/*************/
-/* 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;
-  /* width: 150px; */
-  margin: 0;
-  padding: 4px 0;
-  font-size: 13px;
-  z-index: 1;
-  outline: none;
-  pointer-events: auto;
-  border-radius: 5px;
-}
-
-.MenuItem {
-  /* border: thin solid transparent; */
-  /* TODO using px and rem -> decide */
-  height: 26px;
-  padding: 0 28px;
-  display: flex;
-  align-items: center;
-  white-space: nowrap;
-  position: relative;
-  outline: none;
-  display: flex;
-  contain: content;
-  margin: 0 4px;
-  border-radius: 4px;
-}
-
-.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(/c866b4f/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(/c866b4f/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 {
-  height: 11px;
-  position: relative;
-  contain: strict;
-}
-
-.MenuItemSeparator::after {
-  position: absolute;
-  content: '';
-  display: block;
-  width: 100%;
-  height: 1px;
-  background: var(--MenuItemSeparatorBackground, #606060);
-  top: 50%;
-  left: 50%;
-  translate: -50% -50%;
-}
-/*************/
-/* 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;
-}
-/*************/
-/* ViewletLayout.css */
-/*************/
-.SashHorizontal,
-.SashVertical {
-  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;
-}
-
-.SashVerticalContent,
-.SashHorizontalContent {
-  background: #444444;
-}
-
-.SashVerticalContent {
-  width: 1px;
-  height: 100%;
-}
-
-.SashHorizontalContent {
-  width: 100%;
-  height: 1px;
-}
-/*************/
-/* 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;
-}
-/*************/
-/* 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;
-}
-/*************/
-/* Widgets.css */
-/*************/
-#Widgets {
-  contain: strict;
-  position: fixed;
-  inset: 0;
-  pointer-events: none;
-  z-index: 1;
-}
-
-/* TODO maybe hide widgets container if empty*/
-#Widgets:empty {
-  display: none;
-}
-/*************/
-/* 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%;
-  }
-}
-/*************/
-/* BackDrop.css */
-/*************/
-.BackDrop {
-  position: fixed;
-  cursor: initial;
-  left: 0px;
-  top: 0px;
-  width: 100%;
-  height: 100%;
-  z-index: 1;
-  pointer-events: all;
-}
-/*************/
-/* 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, lightgray);
-}
-
-.FocusOutline {
-  outline-color: var(--FocusOutline, lightgray);
-  outline-offset: -1px;
-  outline-style: solid;
-  outline-width: 1px;
-}
-/*************/
-/* Actions.css */
-/*************/
-.Actions {
-  display: flex;
-  margin-left: auto;
-  align-items: center;
-  contain: content;
-}
-
-.SelectWrapper {
-  contain: content;
-  position: relative;
-  height: 21px;
-}
-
-.Select {
-  appearance: none;
-  background: transparent;
-  contain: content;
-  color: inherit;
-  padding: 2px 23px 2px 8px;
-  background: var(--DropDownBackground, #3c3c3c);
-  color: var(--DropDownForeground, #f0f0f0);
-  border: var(--DropDownBorder);
-  height: 100%;
-}
-
-.SelectIcon {
-  position: absolute;
-  inset: 0 6px 0 auto;
-  background: currentColor;
-  mask-repeat: no-repeat;
-  -webkit-mask-repeat: no-repeat;
-  mask-size: var(--MaskIconSize);
-  -webkit-mask-size: var(--MaskIconSize);
-  mask-position: 50% 50%;
-  -webkit-mask-position: 50% 50%;
-  mask-image: url(/c866b4f/icons/chevron-down.svg);
-  -webkit-mask-image: url(/c866b4f/icons/chevron-down.svg);
-  pointer-events: none;
-  width: 16px;
-  height: 16px;
-  contain: strict;
-  margin: auto 0;
-}
-/*************/
-/* Badge.css */
-/*************/
-.Badge {
-  contain: strict;
-  font-size: 11px;
-  font-weight: 400;
-  min-height: 18px;
-  min-width: 18px;
-  line-height: 1;
-  position: relative;
-  width: 100%;
-  height: 100%;
-}
-
-.BadgeContent {
-  contain: content;
-  background: var(--BadgeBackground, rgb(160, 63, 155));
-  color: var(--BadgeForeground, #eeeeee);
-  border-radius: 11px;
-  font-size: 11px;
-  font-weight: 400;
-  height: 18px;
-  width: 18px;
-  position: absolute;
-  right: 5px;
-  bottom: 5px;
-  --MaskIconSize: 14px;
-}
-/*************/
-/* 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 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 rgb(34, 34, 34);
-  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;
-}
-
-.EditorTabCloseButton::before {
-  content: '';
-  position: absolute;
-  inset: 0;
-  background: var(--TabActiveForeground);
-  -webkit-mask-image: url(/c866b4f/icons/icon-close.svg);
-  mask-image: url(/c866b4f/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%;
-}
-
-.Circle {
-  position: relative;
-  width: 23px;
-  height: 23px;
-  contain: strict;
-  flex-shrink: 0;
-}
-
-.TabDirtyIcon {
-  -webkit-mask-image: url(/c866b4f/icons/circle-filled.svg);
-  mask-image: url(/c866b4f/icons/circle-filled.svg);
-}
-
-.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;
-}
-
-.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;
-}
-/*************/
-/* FileIcon.css */
-/*************/
-.FileIcon {
-  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;
-  align-items: center;
-}
-/*************/
-/* Highlight.css */
-/*************/
-.Highlight {
-  background: rgba(129, 85, 14, 0.4);
-  contain: content;
-}
-
-.HighlightInserted {
-  background: rgba(156, 204, 44, 0.2);
-  text-decoration: none;
-  border: 1px solid rgba(155, 185, 85, 0.2);
-  contain: content;
-}
-
-.HighlightDeleted {
-  background: rgba(255, 0, 0, 0.2);
-  border: 1px solid rgba(255, 0, 0, 0.2);
-  contain: content;
-  text-decoration: line-through;
-}
-/*************/
-/* IconButton.css */
-/*************/
-.IconButton {
-  width: 22px;
-  height: 22px;
-  contain: strict;
-  flex-shrink: 0;
-  background: transparent;
-  border: none;
-  color: #c5c5c5;
-  border-radius: 5px;
-}
-
-.IconButton[disabled] {
-  color: rgba(204, 204, 204, 0.5);
-}
-
-.IconButton:enabled:hover {
-  background-color: hsla(0, 0%, 100%, 0.1);
-}
-
-.IconButton:focus-visible {
-  outline: 1px solid #3d5252;
-  outline-offset: -1px;
-}
-/*************/
-/* 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;
-  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;
-}
-/*************/
-/* Label.css */
-/*************/
-.Label {
-  white-space: nowrap;
-  contain: content;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  min-width: 0;
-  flex: 1;
-}
-
-.LabelDetail {
-  font-size: 0.9em;
-  opacity: 0.7;
-  contain: content;
-  margin-left: 4px;
-}
-
-.StrikeThrough {
-  text-decoration: line-through;
-}
-/*************/
-/* MaskIcon.css */
-/*************/
-.MaskIcon {
-  display: block;
-  position: absolute;
-  inset: 0;
-  background: currentColor;
-  mask-repeat: no-repeat;
-  -webkit-mask-repeat: no-repeat;
-  mask-size: var(--MaskIconSize);
-  -webkit-mask-size: var(--MaskIconSize);
-  mask-position: 50% 50%;
-  -webkit-mask-position: 50% 50%;
-  pointer-events: none;
-}
-/*************/
-/* ScrollBar.css */
-/*************/
-.ScrollBarThumb,
-.ScrollBarThumbVertical,
-.ScrollBarThumbHorizontal {
-  width: 100%;
-  /* height: 40px; */
-  position: absolute;
-  contain: strict;
-  background: var(--EditorScrollBarBackground, rgba(57, 71, 71, 0.6));
-}
-
-.ScrollBarThumbHorizontal {
-  height: 100%;
-  width: auto;
-}
-
-.ScrollBar,
-.ScrollBarVertical,
-.ScrollBarHorizontal,
-.ScrollBarHorizontalSmall,
-.ScrollBarSmall {
-  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;
-}
-
-.ScrollBarSmall {
-  width: 10px;
-}
-/*************/
-/* TreeItem.css */
-/*************/
-.TreeItem {
-  color: var(--TreeItemForeground, rgb(188, 190, 190));
-  padding-left: 11px;
-  padding-right: 12px;
-  display: flex;
-  gap: 4px;
-  height: 22px;
-  line-height: 22px;
-  contain: strict;
-  width: 100%;
-  align-items: center;
-}
-
-/* .TreeItem:focus {
-  background: rgba(59, 71, 66, 0.5);
-} */
-
-#TreeItemActive {
-  background: var(--TreeItemActiveBackground, rgba(59, 71, 66, 0.5));
-}
-
-.TreeItem:hover {
-  background: var(--TreeItemHoverBackground, rgba(64, 92, 80, 0.2));
-}
-
-.SourceControlItems {
-}
-/*************/
-/* ViewletActivityBar.css */
-/*************/
-.ActivityBar {
-  color: var(--ActivityBarForeground);
-}
-
-.ActivityBar {
-  /* display: grid; */
-  /* align-content: space-between; */
-  display: flex;
-  flex-direction: column;
-}
-
-.ActivityBarItem {
-  position: relative;
-  outline: none;
-  width: 48px;
-  height: 48px;
-  contain: strict;
-  flex-shrink: 0;
-  --MaskIconSize: 24px;
-  mask-repeat: no-repeat;
-  -webkit-mask-repeat: no-repeat;
-  mask-size: var(--MaskIconSize);
-  -webkit-mask-size: var(--MaskIconSize);
-  mask-position: 50% 50%;
-  -webkit-mask-position: 50% 50%;
-  background: currentColor;
-}
-
-.ActivityBarItem[title='Settings'] {
-  margin-top: auto;
-}
-
-.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);
-}
-
-/* .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;
-}
-/*************/
-/* 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: 400;
-  position: absolute;
-}
-
-.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;
-}
-
-.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;
-}
-
-.LayerCursor {
-  position: absolute;
-  inset: 0;
-  pointer-events: none;
-}
-
-.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;
-}
-/*************/
-/* ViewletExplorer.css */
-/*************/
-:root {
-  --DropTargetBackground: #062f4a;
-}
-
-.ListItems {
-  user-select: none;
-}
-
-.DropTarget {
-  background: var(--DropTargetBackground);
-}
-/*************/
-/* 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;
-  /* 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);
-}
-
-.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;
-  line-height: 22px;
-  border-radius: 3px;
-}
-
-.QuickPickItem:hover {
-  background: var(--ListHoverBackground);
-  color: var(--ListHoverForeground);
-}
-
-.QuickPickItemActive {
-  /* TODO avoid using important */
-  color: var(--ListActiveSelectionForeground) !important;
-  background: var(--ListActiveSelectionBackground) !important;
-}
-
-/* TODO avoid nesting */
-.QuickPickItemActive .QuickPickItemDescription {
-  color: color-mix(in oklab, var(--ListActiveSelectionForeground), var(--ListActiveSelectionBackground) 30%);
-}
-
-.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;
-}
-
-.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;
-}
-
-.QuickPickLabel {
-  white-space: nowrap;
-  contain: content;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  min-width: 0;
-}
-
-/* TODO reuse same highlight css for completions */
-.QuickPickHighlight {
-  color: var(--CompletionHighlightForeground, #e1b974);
-  font-weight: 700;
-  contain: content;
-}
-
-.QuickPickItem .Label {
-  flex: initial;
-}
-/*************/
-/* 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;
-}
-
-.SideBarContent {
-  contain: strict;
-  /* padding: 10px; */
-  /* height: 100%; */
-  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;
-  -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;
-}
-/*************/
-/* ViewletTitleBar.css */
-/*************/
-.TitleBar {
-  /* TODO should not need z index */
-  z-index: 1;
-  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: no-drag;
-  flex: initial;
-  width: 138px;
-  contain: strict;
-}
-
-.TitleBarButton {
-  width: 46px;
-  height: 100%;
-  contain: strict;
-  background: transparent;
-  border: none;
-  color: currentColor;
-}
-
-.TitleBarButton:hover {
-  background-color: hsla(0, 0%, 100%, 0.1);
-}
-
-.TitleBarButtonClose:hover {
-  background-color: rgba(232, 17, 35, 0.9);
-  color: var(--TitleBarButtonCloseHoverForeground, currentColor);
-}
-
-.MaskIcon.Minimize {
-  -webkit-mask-image: url(/c866b4f/icons/chrome-minimize.svg);
-  mask-image: url(/c866b4f/icons/chrome-minimize.svg);
-}
-
-.MaskIcon.Maximize {
-  -webkit-mask-image: url(/c866b4f/icons/chrome-maximize.svg);
-  mask-image: url(/c866b4f/icons/chrome-maximize.svg);
-}
-
-.MaskIcon.Restore {
-  -webkit-mask-image: url(/c866b4f/icons/chrome-restore.svg);
-  mask-image: url(/c866b4f/icons/chrome-restore.svg);
-}
-
-.MaskIcon.Close {
-  -webkit-mask-image: url(/c866b4f/icons/chrome-close.svg);
-  mask-image: url(/c866b4f/icons/chrome-close.svg);
-}
-/*************/
-/* ViewletTitleBarIcon.css */
-/*************/
-.TitleBarIcon {
-  background-image: url(/c866b4f/icons/icon.png);
-  background-position: center center;
-  background-repeat: no-repeat;
-  background-size: 16px;
-  contain: strict;
-  flex-basis: 30px;
-  flex-grow: 0;
-  flex-shrink: 0;
-  height: 100%;
-  width: 30px;
-}
-/*************/
-/* ViewletTitleBarMenuBar.css */
-/*************/
-.TitleBarMenuBar {
-  display: flex;
-  margin: 0;
-  padding: 0;
-  height: 100%;
-  -webkit-app-region: no-drag;
-  app-region: no-drag;
-  contain: content;
-  flex-grow: 0;
-}
-
-.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;
-} */