modeling-app/src/index.css

@import './colors.css';

@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  @apply text-chalkboard-110 bg-chalkboard-10;
  scrollbar-width: thin;
  scrollbar-color: var(--color-chalkboard-20) var(--color-chalkboard-40);
}

body.dark {
  scrollbar-color: var(--color-chalkboard-70) var(--color-chalkboard-90);
  @apply bg-chalkboard-100 text-chalkboard-10;
}

::-webkit-scrollbar {
  @apply w-2 rounded-sm;
  @apply bg-chalkboard-20;
}

::-webkit-scrollbar-thumb {
  @apply bg-chalkboard-40 rounded-sm;
}

.dark ::-webkit-scrollbar {
  @apply bg-chalkboard-90;
}

.dark ::-webkit-scrollbar-thumb {
  @apply bg-chalkboard-70;
}

button {
  @apply border border-chalkboard-100 m-0.5 px-3 rounded text-xs;
}

.dark button {
  @apply border-chalkboard-20 hover:border-chalkboard-10 hover:bg-chalkboard-90;
}

button:disabled {
  @apply bg-chalkboard-20 text-chalkboard-60 border-chalkboard-20;
}

.dark button:disabled {
  @apply bg-chalkboard-90 text-chalkboard-40 border-chalkboard-70;
}

.mono {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

#code-mirror-override .cm-editor {
  @apply bg-transparent;
}

#code-mirror-override .cm-gutters {
  @apply bg-chalkboard-10/50;
}

.dark #code-mirror-override .cm-gutters {
  @apply bg-chalkboard-110/50;
}

#code-mirror-override .cm-focused .cm-cursor {
  width: 0px;
}
#code-mirror-override .cm-cursor {
  display: block;
  width: 200px;
  background: linear-gradient(
    to right,
    rgb(0, 55, 94) 0%,
    #0084e2ff 2%,
    #0084e255 5%,
    transparent 100%
  );
}

.react-json-view {
  @apply bg-transparent !important;
}