spb/note-spboucher-ai

1@import "tailwindcss";2@import "katex/dist/katex.min.css";34@custom-variant dark (&:where(.dark, .dark *));56@theme {7  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;8  --font-serif: "Source Serif 4", ui-serif, Georgia, serif;9  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;10  --radius: 0.5rem;11  --color-bg: var(--bg);12  --color-bg-elev: var(--bg-elev);13  --color-bg-sunk: var(--bg-sunk);14  --color-fg: var(--fg);15  --color-fg-muted: var(--fg-muted);16  --color-fg-faint: var(--fg-faint);17  --color-line: var(--line);18  --color-line-strong: var(--line-strong);19  --color-accent: var(--accent);20  --color-accent-fg: var(--accent-fg);21  --color-accent-soft: var(--accent-soft);22  --color-danger: var(--danger);23  --color-success: var(--success);24  --color-warning: var(--warning);25  --color-ai: var(--ai);26  --color-ai-soft: var(--ai-soft);27  --shadow-card: var(--shadow-card);28  --shadow-pop: var(--shadow-pop);29}3031:root {32  --bg: oklch(99% 0.002 95);33  --bg-elev: oklch(100% 0 0);34  --bg-sunk: oklch(97% 0.004 95);35  --fg: oklch(20% 0.01 260);36  --fg-muted: oklch(48% 0.012 260);37  --fg-faint: oklch(68% 0.01 260);38  --line: oklch(91% 0.006 260);39  --line-strong: oklch(84% 0.008 260);40  --accent: oklch(52% 0.17 262);41  --accent-fg: oklch(99% 0 0);42  --accent-soft: oklch(95% 0.03 262);43  --danger: oklch(56% 0.2 25);44  --success: oklch(58% 0.15 150);45  --warning: oklch(72% 0.16 75);46  --ai: oklch(55% 0.17 300);47  --ai-soft: oklch(95% 0.035 300);48  --shadow-card: 0 1px 2px oklch(0% 0 0 / 0.04), 0 1px 1px oklch(0% 0 0 / 0.03);49  --shadow-pop: 0 10px 30px -10px oklch(0% 0 0 / 0.25), 0 2px 6px oklch(0% 0 0 / 0.08);50  color-scheme: light;51}52.dark {53  --bg: oklch(17% 0.008 260);54  --bg-elev: oklch(21% 0.009 260);55  --bg-sunk: oklch(14% 0.008 260);56  --fg: oklch(93% 0.006 95);57  --fg-muted: oklch(68% 0.01 260);58  --fg-faint: oklch(50% 0.01 260);59  --line: oklch(27% 0.01 260);60  --line-strong: oklch(34% 0.012 260);61  --accent: oklch(72% 0.14 262);62  --accent-fg: oklch(15% 0.02 262);63  --accent-soft: oklch(28% 0.05 262);64  --danger: oklch(68% 0.18 25);65  --success: oklch(70% 0.14 150);66  --warning: oklch(78% 0.15 75);67  --ai: oklch(74% 0.14 300);68  --ai-soft: oklch(28% 0.05 300);69  --shadow-card: 0 1px 2px oklch(0% 0 0 / 0.4);70  --shadow-pop: 0 12px 36px -12px oklch(0% 0 0 / 0.7), 0 2px 6px oklch(0% 0 0 / 0.4);71  color-scheme: dark;72}7374html, body { height: 100%; }75body { @apply bg-bg text-fg antialiased; font-feature-settings: "cv11", "ss01", "liga"; -webkit-tap-highlight-color: transparent; }76* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }77::selection { background: var(--accent-soft); }78.safe-top { padding-top: env(safe-area-inset-top); }79.safe-bottom { padding-bottom: env(safe-area-inset-bottom); }8081/* ---------- Editor (ProseMirror) ---------- */82.note-editor { @apply outline-none; }83.note-editor .ProseMirror { @apply outline-none min-h-[40vh]; }84.note-editor .ProseMirror > * + * { margin-top: 0.5rem; }85.note-editor h1 { @apply text-3xl font-semibold tracking-tight mt-8 mb-2; }86.note-editor h2 { @apply text-2xl font-semibold tracking-tight mt-7 mb-2; }87.note-editor h3 { @apply text-xl font-semibold mt-5 mb-1; }88.note-editor p { @apply leading-7 text-[15.5px]; }89.note-editor a { @apply text-accent underline decoration-accent/40 underline-offset-2 hover:decoration-accent; }90.note-editor ul { @apply list-disc pl-6; } .note-editor ol { @apply list-decimal pl-6; }91.note-editor li > p { margin: 0.15rem 0; }92.note-editor ul[data-type="taskList"] { @apply list-none pl-1; }93.note-editor ul[data-type="taskList"] li { @apply flex gap-2 items-start; }94.note-editor ul[data-type="taskList"] li > label { @apply mt-1.5 shrink-0; }95.note-editor ul[data-type="taskList"] li > label input { @apply accent-[var(--accent)] size-4; }96.note-editor ul[data-type="taskList"] li[data-checked="true"] > div { @apply line-through text-fg-faint; }97.note-editor blockquote { @apply border-l-2 border-line-strong pl-4 text-fg-muted italic; }98.note-editor pre { @apply bg-bg-sunk border border-line rounded-lg p-4 text-[13px] font-mono overflow-x-auto; }99.note-editor pre code { @apply bg-transparent p-0; }100.note-editor code { @apply bg-bg-sunk border border-line rounded px-1 py-0.5 text-[0.9em] font-mono; }101.note-editor hr { @apply border-line my-6; }102.note-editor img { @apply rounded-lg max-w-full; }103.note-editor table { @apply border-collapse w-full my-3 text-[14px]; }104.note-editor th, .note-editor td { @apply border border-line px-3 py-1.5 align-top min-w-[6rem]; }105.note-editor th { @apply bg-bg-sunk font-medium text-left; }106.note-editor .selectedCell { @apply bg-accent-soft; }107.note-editor .tableWrapper { @apply overflow-x-auto; }108.note-editor details { @apply border border-line rounded-lg px-3 py-2 my-2; }109.note-editor details summary { @apply cursor-pointer font-medium select-none; }110.note-editor details > div[data-type="detailsContent"] { @apply mt-2; }111.note-editor .callout { @apply flex gap-3 rounded-lg border border-line bg-bg-sunk px-4 py-3 my-2; }112.note-editor .callout[data-kind="info"] { @apply bg-accent-soft border-accent/20; }113.note-editor .callout[data-kind="warning"] { @apply bg-warning/10 border-warning/30; }114.note-editor .callout[data-kind="danger"] { @apply bg-danger/10 border-danger/30; }115.note-editor .callout[data-kind="ai"] { @apply bg-ai-soft border-ai/30; }116.note-editor .callout-icon { @apply text-lg leading-7 select-none; }117.note-editor .mention { @apply inline-flex items-center gap-1 rounded bg-accent-soft text-accent px-1.5 py-0.5 text-[0.95em] no-underline; }118.note-editor .ai-block { @apply border border-ai/30 bg-ai-soft/40 rounded-lg p-3 my-2 relative; }119.note-editor .ai-block::before { content: "AI"; @apply absolute -top-2 right-3 text-[10px] font-semibold tracking-wider text-ai bg-bg-elev px-1.5 rounded; }120.note-editor .Tiptap-mathematics-editor { @apply bg-bg-sunk px-1 rounded font-mono text-[0.9em]; }121.note-editor .Tiptap-mathematics-render { @apply cursor-pointer; }122.note-editor .footnote-ref { @apply align-super text-[0.7em] text-accent; }123.note-editor .is-editor-empty:first-child::before { content: attr(data-placeholder); @apply text-fg-faint float-left h-0 pointer-events-none; }124.note-editor .file-block { @apply flex items-center gap-3 border border-line rounded-lg px-3 py-2 my-2 bg-bg-elev; }125.drag-handle { @apply flex items-center justify-center size-6 rounded cursor-grab text-fg-faint hover:bg-bg-sunk hover:text-fg-muted; }126127.prose-md { @apply text-[15px] leading-7; }128.prose-md h1,.prose-md h2,.prose-md h3 { @apply font-semibold mt-5 mb-1 tracking-tight; }129.prose-md h1 { @apply text-xl; } .prose-md h2 { @apply text-lg; } .prose-md h3 { @apply text-base; }130.prose-md p { @apply my-2; } .prose-md ul { @apply list-disc pl-5 my-2; } .prose-md ol { @apply list-decimal pl-5 my-2; }131.prose-md pre { @apply bg-bg-sunk border border-line rounded-lg p-3 text-[13px] overflow-x-auto my-2; }132.prose-md code { @apply font-mono text-[0.9em] bg-bg-sunk px-1 rounded; } .prose-md pre code { @apply bg-transparent p-0; }133.prose-md table { @apply border-collapse w-full my-2 text-[13.5px]; } .prose-md th,.prose-md td { @apply border border-line px-2 py-1; }134.prose-md blockquote { @apply border-l-2 border-line-strong pl-3 text-fg-muted; }135.prose-md a { @apply text-accent underline; }136.prose-md .source-ref { @apply inline-flex items-center rounded bg-accent-soft text-accent px-1 text-[11px] font-medium align-baseline cursor-pointer; }137138@keyframes fade-up { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }139.fade-up { animation: fade-up 180ms ease-out both; }140@keyframes pulse-soft { 0%,100% { opacity: 1; } 50% { opacity: .45; } }141.pulse-soft { animation: pulse-soft 1.4s ease-in-out infinite; }142