vitest/packages/ui/client/styles/main.css

html,
body {
  height: 100%;
  font-family: "Readex Pro", sans-serif;
  scroll-behavior: smooth;
}

:root {
  --color-text-light: #000;
  --color-text-dark: #ddd;
  --color-text: var(--color-text-light);
  --background-color: #e4e4e4;
}

html.dark {
  --color-text: var(--color-text-dark);
  --background-color: #141414;
  color: var(--color-text);
  background-color: var(--background-color);
  color-scheme: dark;
}

.CodeMirror {
  height: 100% !important;
  width: 100% !important;
  font-family: inherit;
}

.cm-s-vars .cm-tag {
  color: var(--cm-keyword);
}

:root {
  --cm-foreground: #393a3480;
  --cm-background: transparent;
  --cm-comment: #a0ada0;
  --cm-string: #b56959;
  --cm-literal: #2f8a89;
  --cm-number: #296aa3;
  --cm-keyword: #1c6b48;
  --cm-function: #6c7834;
  --cm-boolean: #1c6b48;
  --cm-constant: #a65e2b;
  --cm-deleted: #a14f55;
  --cm-class: #2993a3;
  --cm-builtin: #ab5959;
  --cm-property: #b58451;
  --cm-namespace: #b05a78;
  --cm-punctuation: #8e8f8b;
  --cm-decorator: #bd8f8f;
  --cm-regex: #ab5e3f;
  --cm-json-property: #698c96;
  --cm-line-number-gutter: #f8f8f8;
  /* scrollbars colors */
  --cm-ttc-c-thumb: #eee;
  --cm-ttc-c-track: white;
}

html.dark {
  --cm-scheme: dark;
  --cm-foreground: #d4cfbf80;
  --cm-background: transparent;
  --cm-comment: #758575;
  --cm-string: #d48372;
  --cm-literal: #429988;
  --cm-keyword: #4d9375;
  --cm-boolean: #1c6b48;
  --cm-number: #6394bf;
  --cm-variable: #c2b36e;
  --cm-function: #a1b567;
  --cm-deleted: #a14f55;
  --cm-class: #54b1bf;
  --cm-builtin: #e0a569;
  --cm-property: #dd8e6e;
  --cm-namespace: #db889a;
  --cm-punctuation: #858585;
  --cm-decorator: #bd8f8f;
  --cm-regex: #ab5e3f;
  --cm-json-property: #6b8b9e;
  --cm-line-number: #888888;
  --cm-line-number-gutter: #161616;
  --cm-line-highlight-background: #444444;
  --cm-selection-background: #44444450;
  /* scrollbars colors */
  --cm-ttc-c-thumb: #222;
  --cm-ttc-c-track: #111;
}

.splitpanes__pane {
  background-color: unset !important;
}

.splitpanes__splitter {
  position: relative;
  background-color: rgba(125, 125, 125, 0.1);
  z-index: 10;
}

.splitpanes__splitter:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  transition: opacity 0.4s;
  background-color: rgba(125, 125, 125, 0.1);
  opacity: 0;
  z-index: 1;
}

.splitpanes__splitter:hover:before {
  opacity: 1;
}

.splitpanes--vertical > .splitpanes__splitter:before {
  /* make vertical scroll usable */
  left: 0;
  right: -10px;
  height: 100%;
}

.splitpanes--horizontal > .splitpanes__splitter:before {
  top: 0;
  bottom: -10px;
  width: 100%;
}

.splitpanes.loading .splitpanes__pane {
  transition: none !important;
  height: 100%;
}

/* CODEMIRROR SCROLLS */
.CodeMirror-scroll {
  /* hide FF native scrolls */
  scrollbar-width: none;
}
.CodeMirror-scroll::-webkit-scrollbar,
.codemirror-scrolls::-webkit-scrollbar {
  display: none;
}
.codemirror-scrolls {
  overflow: auto !important;
  scrollbar-width: thin;
  scrollbar-color: var(--cm-ttc-c-thumb) var(--cm-ttc-c-track);
}
/* the horizontal/vertical background */
.CodeMirror-simplescroll-horizontal,
.CodeMirror-simplescroll-vertical {
  background-color: var(--cm-ttc-c-track) !important;
  border: none !important;
}
/* the horizontal/vertical bubble background */
.CodeMirror-simplescroll-horizontal div,
.CodeMirror-simplescroll-vertical div {
  background-color: var(--cm-ttc-c-thumb) !important;
  border: none !important;
}
/* the right bottom corner background*/
.CodeMirror-scrollbar-filler,
.CodeMirror-gutter-filler {
  background-color: var(--cm-ttc-c-track) !important;
}
.CodeMirror {
  overflow: unset !important;
}
.CodeMirror-vscrollbar,
.CodeMirror-hscrollbar {
  display: none !important;
}
.CodeMirror-scroll {
  margin-bottom: unset !important;
  margin-right: unset !important;
  padding-bottom: unset !important;
}
/* END CODEMIRROR SCROLLS */

/* SCROLLS */
.scrolls::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.scrolls {
  overflow: auto !important;
  scrollbar-width: thin;
  scrollbar-color: var(--cm-ttc-c-thumb) var(--cm-ttc-c-track);
}
.scrolls::-webkit-scrollbar-track {
  background: var(--cm-ttc-c-track);
}
.scrolls::-webkit-scrollbar-thumb {
  background-color: var(--cm-ttc-c-thumb);
  border: 2px solid var(--cm-ttc-c-thumb);
}
.scrolls::-webkit-scrollbar-thumb,
.scrolls-rounded::-webkit-scrollbar-track {
  border-radius: 3px;
}
.scrolls::-webkit-scrollbar-corner {
  background-color: var(--cm-ttc-c-track);
}
/* END SCROLLS */

.v-popper__popper .v-popper__inner {
  font-size: 12px;
  padding: 4px 6px;
  border-radius: 4px;
  background-color: var(--background-color);
  color: var(--color-text);
}

.v-popper__popper .v-popper__arrow-outer {
  border-color: var(--background-color);
}

.codemirror-busy > .CodeMirror > .CodeMirror-scroll > .CodeMirror-sizer .CodeMirror-lines {
  cursor: wait !important;
}