mesh-forge/src/index.css

/* Disable auto scan of the whole repo root — `vendor/` alone is ~100k+ files and stalls the Oxide scanner. */
@import "tailwindcss" source(none);
@plugin "@tailwindcss/typography";

@source "./**/*.{html,js,mjs,mts,ts,tsx,jsx}";
@source "../components/**/*.{html,js,mjs,mts,ts,tsx,jsx}";
@source "../index.html";

@theme {
  --font-sans: system-ui, -apple-system, sans-serif;

  --color-background: oklch(0.145 0 0);
  --color-foreground: oklch(0.985 0 0);
  --color-primary: oklch(0.488 0.243 264.376);
  --color-primary-foreground: oklch(0.985 0 0);
  --color-secondary: oklch(0.269 0 0);
  --color-secondary-foreground: oklch(0.985 0 0);
  --color-muted: oklch(0.269 0 0);
  --color-muted-foreground: oklch(0.708 0 0);
  --color-accent: oklch(0.488 0.243 264.376);
  --color-accent-foreground: oklch(0.985 0 0);
  --color-destructive: oklch(0.704 0.191 22.216);
  --color-border: oklch(1 0 0 / 10%);
  --color-input: oklch(1 0 0 / 15%);
  --color-ring: oklch(0.488 0.243 264.376);

  --radius: 0.5rem;
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground font-sans;
  }
}

.prose.prose-invert h1 {
  font-size: 2.25rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  margin-top: 2rem;
  line-height: 1.3;
  padding-bottom: 0.15em;
  background: linear-gradient(to right, rgb(34, 211, 238), rgb(59, 130, 246), rgb(147, 51, 234));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.prose.prose-invert h2 {
  font-size: 1.875rem;
  font-weight: 600;
  margin-bottom: 1rem;
  margin-top: 2rem;
  color: oklch(0.985 0 0);
  border-bottom: 1px solid oklch(1 0 0 / 10%);
  padding-bottom: 0.5rem;
}

.prose.prose-invert h3 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  margin-top: 1.5rem;
  color: oklch(0.985 0 0);
}

.prose.prose-invert p {
  margin-bottom: 1rem;
  line-height: 1.75;
  color: oklch(0.708 0 0);
}

.prose.prose-invert a {
  color: oklch(0.488 0.243 264.376);
  font-weight: 500;
  text-decoration: underline;
}

.prose.prose-invert code {
  background-color: oklch(0.269 0 0);
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  font-size: 0.875rem;
  font-family: ui-monospace, SFMono-Regular, monospace;
  color: oklch(0.488 0.243 264.376);
}

.prose.prose-invert pre {
  background-color: oklch(0.269 0 0);
  border: 1px solid oklch(1 0 0 / 10%);
  border-radius: 0.5rem;
  padding: 1rem;
  overflow-x: auto;
}

@keyframes ci-progress-shimmer-x {
  0% {
    left: -45%;
  }
  100% {
    left: 105%;
  }
}

.ci-progress-shimmer-x {
  position: absolute;
  animation: ci-progress-shimmer-x 1.45s linear infinite;
}

/* In-bounds motion (parent uses overflow-hidden, so box-shadow throb was clipped). */
@keyframes ci-progress-fill-throb {
  0% {
    background-position: 0% 0;
    filter: brightness(0.9) saturate(1.08);
  }
  50% {
    background-position: 100% 0;
    filter: brightness(1.14) saturate(1.12);
  }
  100% {
    background-position: 0% 0;
    filter: brightness(0.9) saturate(1.08);
  }
}

.ci-progress-fill-throb {
  background-image: linear-gradient(
    90deg,
    rgb(8 145 178),
    rgb(4 120 87),
    rgb(45 212 191),
    rgb(16 185 129),
    rgb(6 182 212),
    rgb(8 145 178)
  );
  background-size: 240% 100%;
  animation: ci-progress-fill-throb 2.2s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .ci-progress-fill-throb {
    animation: none;
    background-size: 100% 100%;
    filter: none;
  }

  .ci-progress-shimmer-x {
    animation: none;
    left: 20%;
  }
}