Leon4gr45/builder

1@import "tailwindcss";2 3@custom-variant dark (&:is(.dark *));4 5@theme inline {6  --color-background: var(--background);7  --color-foreground: var(--foreground);8  --font-sans: var(--font-inter-sans);9  --font-mono: var(--font-ptSans-mono);10  --color-sidebar-ring: var(--sidebar-ring);11  --color-sidebar-border: var(--sidebar-border);12  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);13  --color-sidebar-accent: var(--sidebar-accent);14  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);15  --color-sidebar-primary: var(--sidebar-primary);16  --color-sidebar-foreground: var(--sidebar-foreground);17  --color-sidebar: var(--sidebar);18  --color-chart-5: var(--chart-5);19  --color-chart-4: var(--chart-4);20  --color-chart-3: var(--chart-3);21  --color-chart-2: var(--chart-2);22  --color-chart-1: var(--chart-1);23  --color-ring: var(--ring);24  --color-input: var(--input);25  --color-border: var(--border);26  --color-destructive: var(--destructive);27  --color-accent-foreground: var(--accent-foreground);28  --color-accent: var(--accent);29  --color-muted-foreground: var(--muted-foreground);30  --color-muted: var(--muted);31  --color-secondary-foreground: var(--secondary-foreground);32  --color-secondary: var(--secondary);33  --color-primary-foreground: var(--primary-foreground);34  --color-primary: var(--primary);35  --color-popover-foreground: var(--popover-foreground);36  --color-popover: var(--popover);37  --color-card-foreground: var(--card-foreground);38  --color-card: var(--card);39  --radius-sm: calc(var(--radius) - 4px);40  --radius-md: calc(var(--radius) - 2px);41  --radius-lg: var(--radius);42  --radius-xl: calc(var(--radius) + 4px);43}44 45:root {46  --font-inter-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;47  --font-ptSans-mono: "PT Sans", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;48  --radius: 0.75rem;49  --background: oklch(0.98 0 0);50  --foreground: oklch(0.145 0 0);51  --card: oklch(1 0 0);52  --card-foreground: oklch(0.145 0 0);53  --popover: oklch(1 0 0);54  --popover-foreground: oklch(0.145 0 0);55  --primary: oklch(0.65 0.20 40);56  --primary-foreground: oklch(0.98 0 0);57  --secondary: oklch(0.97 0 0);58  --secondary-foreground: oklch(0.205 0 0);59  --muted: oklch(0.95 0 0);60  --muted-foreground: oklch(0.45 0 0);61  --accent: oklch(0.96 0.02 40);62  --accent-foreground: oklch(0.205 0 0);63  --destructive: oklch(0.577 0.245 27.325);64  --border: oklch(0.88 0 0);65  --input: oklch(0.922 0 0);66  --ring: oklch(0.65 0.22 40);67  --chart-1: oklch(0.646 0.222 41.116);68  --chart-2: oklch(0.6 0.118 184.704);69  --chart-3: oklch(0.398 0.07 227.392);70  --chart-4: oklch(0.828 0.189 84.429);71  --chart-5: oklch(0.769 0.188 70.08);72  --sidebar: oklch(0.985 0 0);73  --sidebar-foreground: oklch(0.145 0 0);74  --sidebar-primary: oklch(0.205 0 0);75  --sidebar-primary-foreground: oklch(0.985 0 0);76  --sidebar-accent: oklch(0.97 0 0);77  --sidebar-accent-foreground: oklch(0.205 0 0);78  --sidebar-border: oklch(0.922 0 0);79  --sidebar-ring: oklch(0.708 0 0);80  81  /* Panel tint colors - Light mode */82  --panel-assistant-tint: oklch(0.65 0.2 145 / 0.02); /* Green tint - weaker */83  --panel-files-tint: oklch(0.6 0.15 220 / 0.02); /* Blue tint - weaker */84  --panel-editor-tint: oklch(0.55 0.18 285 / 0.02); /* Purple tint - weaker */85  --panel-preview-tint: oklch(0.7 0.2 45 / 0.02); /* Orange tint - weaker */86  87  /* Panel RGB values for headers */88  --panel-files-rgb: 59, 130, 246; /* Blue */89  --panel-editor-rgb: 147, 51, 234; /* Purple */90  --panel-preview-rgb: 251, 146, 60; /* Orange */91  92  /* Project page tint colors - Light mode */93  --project-card-tint: oklch(0.65 0.18 40 / 0.03); /* Subtle orange tint */94  --project-background-tint: oklch(0.65 0.18 40 / 0.015); /* Very subtle orange tint */95  96  /* Sidebar button active colors - Light mode */97  --button-assistant-active: oklch(0.65 0.2 145); /* Green (chat) */98  --button-files-active: oklch(0.6 0.15 220); /* Blue */99  --button-editor-active: oklch(0.55 0.18 285); /* Purple */100  --button-preview-active: oklch(0.7 0.2 45); /* Orange */101  --button-checkpoint-active: oklch(0.65 0.15 55); /* Warm amber */102 103  /* Checkpoint panel */104  --panel-checkpoint-rgb: 217, 119, 6; /* Amber */105}106 107.dark {108  --background: oklch(0.10 0 0);109  --foreground: oklch(0.985 0 0);110  --card: oklch(0.18 0 0);111  --card-foreground: oklch(0.985 0 0);112  --popover: oklch(0.205 0 0);113  --popover-foreground: oklch(0.985 0 0);114  --primary: oklch(0.70 0.22 40);115  --primary-foreground: oklch(0.98 0 0);116  --secondary: oklch(0.269 0 0);117  --secondary-foreground: oklch(0.985 0 0);118  --muted: oklch(0.25 0 0);119  --muted-foreground: oklch(0.65 0 0);120  --accent: oklch(0.30 0.03 40);121  --accent-foreground: oklch(0.985 0 0);122  --destructive: oklch(0.704 0.191 22.216);123  --border: oklch(0.30 0 0);124  --input: oklch(0.30 0 0);125  --ring: oklch(0.70 0.25 40);126  --chart-1: oklch(0.488 0.243 264.376);127  --chart-2: oklch(0.696 0.17 162.48);128  --chart-3: oklch(0.769 0.188 70.08);129  --chart-4: oklch(0.627 0.265 303.9);130  --chart-5: oklch(0.645 0.246 16.439);131  --sidebar: oklch(0.205 0 0);132  --sidebar-foreground: oklch(0.985 0 0);133  --sidebar-primary: oklch(0.488 0.243 264.376);134  --sidebar-primary-foreground: oklch(0.985 0 0);135  --sidebar-accent: oklch(0.269 0 0);136  --sidebar-accent-foreground: oklch(0.985 0 0);137  --sidebar-border: oklch(1 0 0 / 10%);138  --sidebar-ring: oklch(0.556 0 0);139  140  /* Panel tint colors - Dark mode */141  --panel-assistant-tint: oklch(0.65 0.2 145 / 0.02); /* Green tint - weaker */142  --panel-files-tint: oklch(0.6 0.15 220 / 0.02); /* Blue tint - weaker */143  --panel-editor-tint: oklch(0.55 0.18 285 / 0.02); /* Purple tint - weaker */144  --panel-preview-tint: oklch(0.7 0.2 45 / 0.02); /* Orange tint - weaker */145  146  /* Panel RGB values for headers */147  --panel-files-rgb: 59, 130, 246; /* Blue */148  --panel-editor-rgb: 147, 51, 234; /* Purple */149  --panel-preview-rgb: 251, 146, 60; /* Orange */150  151  /* Project page tint colors - Dark mode */152  --project-card-tint: oklch(0.65 0.18 40 / 0.04); /* Subtle orange tint */153  --project-background-tint: oklch(0.65 0.18 40 / 0.02); /* Very subtle orange tint */154  155  /* Sidebar button active colors - Dark mode */156  --button-assistant-active: oklch(0.65 0.2 145); /* Green (chat) */157  --button-files-active: oklch(0.6 0.15 220); /* Blue */158  --button-editor-active: oklch(0.55 0.18 285); /* Purple */159  --button-preview-active: oklch(0.7 0.2 45); /* Orange */160  --button-checkpoint-active: oklch(0.65 0.15 55); /* Warm amber */161 162  /* Checkpoint panel */163  --panel-checkpoint-rgb: 217, 119, 6; /* Amber */164}165 166@layer base {167  * {168    @apply border-border outline-ring/50;169  }170  body {171    @apply bg-background text-foreground;172  }173  html {174    @apply scroll-smooth;175  }176}177 178.background__noisy {179  @apply bg-blend-normal pointer-events-none opacity-90;180  background-size: 25vw auto;181  background-image: url("/background_noisy.webp");182  @apply fixed w-screen h-screen -z-1 top-0 left-0;183}184 185 186/* Override any Monaco Editor default dark styles in light mode */187.light .monaco-editor .margin,188.light .monaco-editor .monaco-editor-background,189.light .monaco-editor {190  background-color: #ffffff !important;191}192 193.dark .monaco-editor .margin,194.dark .monaco-editor .monaco-editor-background,195.dark .monaco-editor {196  background-color: #1e1e1e !important;197}198 199.matched-line {200  @apply bg-sky-500/30;201}202 203/* Panel insert/drop zone width animation */204@keyframes expand-indicator {205  from {206    width: 0;207    margin-left: 0;208    margin-right: 0;209    opacity: 0;210  }211  to {212    width: 0.5rem;213    margin-left: 0.25rem;214    margin-right: 0.25rem;215    opacity: 1;216  }217}218 219.animate-expand-indicator {220  animation: expand-indicator 200ms ease-out forwards;221}222 223@keyframes collapse-indicator {224  from {225    width: 0.5rem;226    margin-left: 0.25rem;227    margin-right: 0.25rem;228    opacity: 1;229  }230  to {231    width: 0;232    margin-left: 0;233    margin-right: 0;234    opacity: 0;235  }236}237 238.animate-collapse-indicator {239  animation: collapse-indicator 200ms ease-out forwards;240}241 242/* Animated ring effect for guided tour and focus targets */243@keyframes pulse-opacity {244  0%, 100% {245    opacity: 0;246  }247  50% {248    opacity: 0.4;249  }250}251 252.animate-ring-opacity {253  position: relative;254}255 256.animate-ring-opacity::after {257  content: '';258  position: absolute;259  top: -2px;260  left: -2px;261  right: -2px;262  bottom: -2px;263  border-radius: inherit;264  pointer-events: none;265  box-shadow: 0 0 0 4px oklch(0.70 0.22 40);266  animation: pulse-opacity 2s ease-in-out infinite;267}268