Codewalkers/packages/web/src/index.css

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

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 0 0% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 0 0% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 3.9%;
    --primary: 0 0% 9%;
    --primary-foreground: 0 0% 98%;
    --secondary: 0 0% 96.1%;
    --secondary-foreground: 0 0% 9%;
    --muted: 0 0% 96.1%;
    --muted-foreground: 0 0% 45.1%;
    --accent: 0 0% 96.1%;
    --accent-foreground: 0 0% 9%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 89.8%;
    --input: 0 0% 89.8%;
    --ring: 0 0% 3.9%;
    --radius: 0.5rem;
  }

  .dark {
    --background: 0 0% 3.9%;
    --foreground: 0 0% 98%;
    --card: 0 0% 3.9%;
    --card-foreground: 0 0% 98%;
    --popover: 0 0% 3.9%;
    --popover-foreground: 0 0% 98%;
    --primary: 0 0% 98%;
    --primary-foreground: 0 0% 9%;
    --secondary: 0 0% 14.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 0 0% 14.9%;
    --muted-foreground: 0 0% 63.9%;
    --accent: 0 0% 14.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 14.9%;
    --input: 0 0% 14.9%;
    --ring: 0 0% 83.1%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
    margin: 0;
    min-width: 320px;
    min-height: 100vh;
  }
}

/* Notion-style page link blocks inside the editor */
.page-link-block {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.2rem 0.25rem;
  border-radius: 0.25rem;
  cursor: pointer;
  color: hsl(var(--foreground));
  font-size: 0.9375rem;
  line-height: 1.4;
  transition: background-color 0.15s;
}

.page-link-block:hover {
  background-color: hsl(var(--muted));
}

.page-link-block svg {
  color: hsl(var(--muted-foreground));
  flex-shrink: 0;
}

/* Block selection highlight */
.ProseMirror .block-selected {
  background-color: hsl(var(--primary) / 0.08);
  border-radius: 0.25rem;
  box-shadow: 0.375rem 0 0 hsl(var(--primary) / 0.08), -0.375rem 0 0 hsl(var(--primary) / 0.08);
}
.dark .ProseMirror .block-selected {
  background-color: hsl(var(--primary) / 0.12);
  box-shadow: 0.375rem 0 0 hsl(var(--primary) / 0.12), -0.375rem 0 0 hsl(var(--primary) / 0.12);
}

/* Hide cursor and text selection during block selection mode */
.ProseMirror.has-block-selection {
  caret-color: transparent;
}
.ProseMirror.has-block-selection *::selection {
  background: transparent;
}

/* Notion-style placeholder on empty blocks */
.ProseMirror .is-empty::before {
  color: hsl(var(--muted-foreground));
  content: attr(data-placeholder);
  float: left;
  height: 0;
  pointer-events: none;
}

/* Table wrapper overflow */
.ProseMirror .tableWrapper { overflow-x: auto; margin: 1em 0; }

/* Cell positioning for resize handles */
.ProseMirror table td, .ProseMirror table th { position: relative; min-width: 50px; vertical-align: top; }

/* Column resize handle */
.ProseMirror .column-resize-handle { position: absolute; right: -2px; top: 0; bottom: -2px; width: 4px; background-color: hsl(var(--primary) / 0.4); pointer-events: none; z-index: 20; }

/* Resize cursor */
.ProseMirror.resize-cursor { cursor: col-resize; }

/* Selected cell highlight */
.ProseMirror td.selectedCell, .ProseMirror th.selectedCell { background-color: hsl(var(--primary) / 0.08); }
.dark .ProseMirror td.selectedCell, .dark .ProseMirror th.selectedCell { background-color: hsl(var(--primary) / 0.15); }

/* Inline code styling — remove prose backtick pseudo-elements */
.ProseMirror :not(pre) > code {
  background-color: hsl(var(--muted));
  padding: 0.15em 0.35em;
  border-radius: 0.25rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.875em;
}
.ProseMirror :not(pre) > code::before,
.ProseMirror :not(pre) > code::after {
  content: none;
}
.dark .ProseMirror :not(pre) > code {
  background-color: hsl(var(--muted));
}

/* Code block styling */
.ProseMirror pre {
  background-color: hsl(var(--muted));
  padding: 1rem;
  border-radius: 0.375rem;
  overflow-x: auto;
}
.ProseMirror pre code {
  background: none;
  padding: 0;
  border-radius: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.875em;
  color: inherit;
}
.ProseMirror pre code::before,
.ProseMirror pre code::after {
  content: none;
}