ZacharyZhang-NY
5113abacc7
Rewrite styles.css token layer to enforce the kami design system across light and dark modes: - Replace grayscale oklch(L 0 0) palette with warm-parchment hue 95 neutrals and ink-blue hue 258/255 brand; zero cold blue-gray remains. - Introduce --kami-* source-of-truth layer (parchment/ivory/warm-sand, deep-dark/dark-surface, ink/ink-light, warm neutrals, borders, rings, ink-blue tag tints) so future components reference semantic names. - Keep shadcn aliases (--background/--primary/--card/...) so consumer components require no className changes; kami is a drop-in under the token layer. - Reset radius-lg/xl from 0 to 0.5rem/0.75rem (kami 8pt/12pt); default --radius 0 -> 0.5rem. - Reset font stacks: serif -> Newsreader + Source Han Serif SC + fallbacks for headlines/body; sans -> Inter + system + Source Han Sans for UI; mono -> JetBrains Mono + Maple Mono + ui-monospace for code. Maple Mono no longer occupies the sans-primary slot. - Collapse chart-1..5 to a single ink-blue hue (258->252) with L ramp per Jobs ruling; dark mode inverts the L order for contrast. - Desaturate success/warning/caution to warm hues (145/75/50); destructive retains warm terra red #B53333 (oklch(0.516 0.186 25)). - Replace MDXEditor Catppuccin palette (#1e1e2e/#cdd6f4/#181825/ #585b70/#313244/#45475a/#89b4fa) with kami dark-surface + parchment + olive + ink-light equivalents. - Route markdown link colors through var(--primary) via color-mix instead of hardcoded #0969da/#58a6ff. - Enforce serif 500 (not 700) on .paperclip-markdown h1-h4 per kami rule 5 (single serif weight is the design signature). CSP font-src is self/data only, so no CDN fonts are introduced; the stacks rely on system-installed fonts with documented fallbacks. Self-checks pass: no remaining oklch(L 0 0) grayscale, no Catppuccin or GitHub link literals, no font-weight 700 on prose headings, no radius: 0 in @theme, Maple Mono only lives in the mono fallback chain.
837 lines
22 KiB
CSS
837 lines
22 KiB
CSS
@import "tailwindcss";
|
|
@plugin "@tailwindcss/typography";
|
|
|
|
@custom-variant dark (&:is(.dark *));
|
|
|
|
@theme inline {
|
|
--color-background: var(--background);
|
|
--color-foreground: var(--foreground);
|
|
--color-card: var(--card);
|
|
--color-card-foreground: var(--card-foreground);
|
|
--color-popover: var(--popover);
|
|
--color-popover-foreground: var(--popover-foreground);
|
|
--color-primary: var(--primary);
|
|
--color-primary-foreground: var(--primary-foreground);
|
|
--color-secondary: var(--secondary);
|
|
--color-secondary-foreground: var(--secondary-foreground);
|
|
--color-muted: var(--muted);
|
|
--color-muted-foreground: var(--muted-foreground);
|
|
--color-accent: var(--accent);
|
|
--color-accent-foreground: var(--accent-foreground);
|
|
--color-destructive: var(--destructive);
|
|
--color-destructive-foreground: var(--destructive-foreground);
|
|
--color-destructive-muted: var(--destructive-muted);
|
|
--color-success: var(--success);
|
|
--color-success-foreground: var(--success-foreground);
|
|
--color-success-muted: var(--success-muted);
|
|
--color-warning: var(--warning);
|
|
--color-warning-foreground: var(--warning-foreground);
|
|
--color-warning-muted: var(--warning-muted);
|
|
--color-caution: var(--caution);
|
|
--color-caution-foreground: var(--caution-foreground);
|
|
--color-caution-muted: var(--caution-muted);
|
|
--color-border: var(--border);
|
|
--color-input: var(--input);
|
|
--color-ring: var(--ring);
|
|
--color-chart-1: var(--chart-1);
|
|
--color-chart-2: var(--chart-2);
|
|
--color-chart-3: var(--chart-3);
|
|
--color-chart-4: var(--chart-4);
|
|
--color-chart-5: var(--chart-5);
|
|
--color-sidebar: var(--sidebar);
|
|
--color-sidebar-foreground: var(--sidebar-foreground);
|
|
--color-sidebar-primary: var(--sidebar-primary);
|
|
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
|
--color-sidebar-accent: var(--sidebar-accent);
|
|
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
|
--color-sidebar-border: var(--sidebar-border);
|
|
--color-sidebar-ring: var(--sidebar-ring);
|
|
--radius-sm: 0.25rem;
|
|
--radius-md: 0.375rem;
|
|
--radius-lg: 0.5rem;
|
|
--radius-xl: 0.75rem;
|
|
--font-serif: "Newsreader", "Source Han Serif SC", "Noto Serif CJK SC", "Songti SC", "STSong", Georgia, "Cambria", "Times New Roman", serif;
|
|
--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Source Han Sans SC", "Noto Sans CJK SC", "Microsoft YaHei", Roboto, Arial, sans-serif;
|
|
--font-mono: "JetBrains Mono", "Fira Code", "Maple Mono NF CN", "Maple Mono", "SF Mono", Consolas, Monaco, ui-monospace, monospace;
|
|
}
|
|
|
|
/*
|
|
* Kami source-of-truth tokens (oklch-encoded).
|
|
* Do not consume directly in components -- consume through the
|
|
* shadcn aliases (--background, --primary, ...) which map to these.
|
|
*/
|
|
:root {
|
|
--kami-parchment: oklch(0.959 0.008 95);
|
|
--kami-ivory: oklch(0.977 0.006 95);
|
|
--kami-warm-sand: oklch(0.915 0.013 95);
|
|
--kami-deep-dark: oklch(0.156 0.003 95);
|
|
--kami-dark-surface: oklch(0.283 0.003 95);
|
|
--kami-ink: oklch(0.306 0.083 258);
|
|
--kami-ink-light: oklch(0.462 0.096 255);
|
|
--kami-near-black: oklch(0.156 0.003 95);
|
|
--kami-dark-warm: oklch(0.336 0.004 95);
|
|
--kami-charcoal: oklch(0.403 0.006 95);
|
|
--kami-olive: oklch(0.466 0.006 95);
|
|
--kami-stone: oklch(0.608 0.007 95);
|
|
--kami-warm-silver: oklch(0.739 0.010 95);
|
|
--kami-border-cream: oklch(0.913 0.014 95);
|
|
--kami-border-warm: oklch(0.888 0.014 95);
|
|
--kami-border-soft: oklch(0.904 0.013 95);
|
|
--kami-border-dark: oklch(0.283 0.003 95);
|
|
--kami-ring-warm: oklch(0.832 0.011 95);
|
|
--kami-ring-deep: oklch(0.783 0.012 95);
|
|
--kami-tag-tint-lightest: oklch(0.949 0.011 245);
|
|
--kami-tag-tint-light: oklch(0.922 0.019 245);
|
|
--kami-tag-tint-medium: oklch(0.862 0.026 245);
|
|
--kami-tag-tint-strong: oklch(0.883 0.024 245);
|
|
}
|
|
|
|
:root {
|
|
color-scheme: light;
|
|
--radius: 0.5rem;
|
|
--background: oklch(0.959 0.008 95);
|
|
--foreground: oklch(0.156 0.003 95);
|
|
--card: oklch(0.977 0.006 95);
|
|
--card-foreground: oklch(0.156 0.003 95);
|
|
--popover: oklch(0.977 0.006 95);
|
|
--popover-foreground: oklch(0.156 0.003 95);
|
|
--primary: oklch(0.306 0.083 258);
|
|
--primary-foreground: oklch(0.977 0.006 95);
|
|
--secondary: oklch(0.915 0.013 95);
|
|
--secondary-foreground: oklch(0.403 0.006 95);
|
|
--muted: oklch(0.904 0.013 95);
|
|
--muted-foreground: oklch(0.466 0.006 95);
|
|
--accent: oklch(0.922 0.019 245);
|
|
--accent-foreground: oklch(0.306 0.083 258);
|
|
--destructive: oklch(0.516 0.186 25);
|
|
--destructive-foreground: oklch(0.977 0.006 95);
|
|
--destructive-muted: oklch(0.92 0.030 25);
|
|
--success: oklch(0.55 0.085 145);
|
|
--success-foreground: oklch(0.977 0.006 95);
|
|
--success-muted: oklch(0.93 0.030 145);
|
|
--warning: oklch(0.72 0.100 75);
|
|
--warning-foreground: oklch(0.156 0.003 95);
|
|
--warning-muted: oklch(0.95 0.025 85);
|
|
--caution: oklch(0.62 0.130 50);
|
|
--caution-foreground: oklch(0.977 0.006 95);
|
|
--caution-muted: oklch(0.93 0.030 60);
|
|
--border: oklch(0.888 0.014 95);
|
|
--input: oklch(0.888 0.014 95);
|
|
--ring: oklch(0.832 0.011 95);
|
|
--chart-1: oklch(0.306 0.083 258);
|
|
--chart-2: oklch(0.395 0.082 256);
|
|
--chart-3: oklch(0.505 0.075 254);
|
|
--chart-4: oklch(0.625 0.060 253);
|
|
--chart-5: oklch(0.755 0.038 252);
|
|
--sidebar: oklch(0.977 0.006 95);
|
|
--sidebar-foreground: oklch(0.403 0.006 95);
|
|
--sidebar-primary: oklch(0.306 0.083 258);
|
|
--sidebar-primary-foreground: oklch(0.977 0.006 95);
|
|
--sidebar-accent: oklch(0.922 0.019 245);
|
|
--sidebar-accent-foreground: oklch(0.306 0.083 258);
|
|
--sidebar-border: oklch(0.888 0.014 95);
|
|
--sidebar-ring: oklch(0.832 0.011 95);
|
|
}
|
|
|
|
.dark {
|
|
--background: oklch(0.156 0.003 95);
|
|
--foreground: oklch(0.959 0.008 95);
|
|
--card: oklch(0.283 0.003 95);
|
|
--card-foreground: oklch(0.959 0.008 95);
|
|
--popover: oklch(0.283 0.003 95);
|
|
--popover-foreground: oklch(0.959 0.008 95);
|
|
--primary: oklch(0.462 0.096 255);
|
|
--primary-foreground: oklch(0.959 0.008 95);
|
|
--secondary: oklch(0.283 0.003 95);
|
|
--secondary-foreground: oklch(0.739 0.010 95);
|
|
--muted: oklch(0.283 0.003 95);
|
|
--muted-foreground: oklch(0.739 0.010 95);
|
|
--accent: oklch(0.28 0.03 250);
|
|
--accent-foreground: oklch(0.959 0.008 95);
|
|
--destructive: oklch(0.60 0.17 25);
|
|
--destructive-foreground: oklch(0.959 0.008 95);
|
|
--destructive-muted: oklch(0.26 0.06 25);
|
|
--success: oklch(0.65 0.085 145);
|
|
--success-foreground: oklch(0.959 0.008 95);
|
|
--success-muted: oklch(0.28 0.050 145);
|
|
--warning: oklch(0.82 0.100 75);
|
|
--warning-foreground: oklch(0.156 0.003 95);
|
|
--warning-muted: oklch(0.28 0.050 85);
|
|
--caution: oklch(0.72 0.130 50);
|
|
--caution-foreground: oklch(0.959 0.008 95);
|
|
--caution-muted: oklch(0.28 0.050 60);
|
|
--border: oklch(0.283 0.003 95);
|
|
--input: oklch(0.283 0.003 95);
|
|
--ring: oklch(0.832 0.011 95);
|
|
--chart-1: oklch(0.755 0.038 252);
|
|
--chart-2: oklch(0.625 0.060 253);
|
|
--chart-3: oklch(0.505 0.075 254);
|
|
--chart-4: oklch(0.462 0.096 255);
|
|
--chart-5: oklch(0.395 0.082 256);
|
|
--sidebar: oklch(0.156 0.003 95);
|
|
--sidebar-foreground: oklch(0.739 0.010 95);
|
|
--sidebar-primary: oklch(0.462 0.096 255);
|
|
--sidebar-primary-foreground: oklch(0.959 0.008 95);
|
|
--sidebar-accent: oklch(0.283 0.003 95);
|
|
--sidebar-accent-foreground: oklch(0.959 0.008 95);
|
|
--sidebar-border: oklch(0.283 0.003 95);
|
|
--sidebar-ring: oklch(0.832 0.011 95);
|
|
}
|
|
|
|
/* Hide all scrollbars globally while keeping scroll functionality */
|
|
*::-webkit-scrollbar {
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
|
|
@layer base {
|
|
* {
|
|
@apply border-border;
|
|
}
|
|
html {
|
|
height: 100%;
|
|
-webkit-tap-highlight-color: color-mix(in oklab, var(--foreground) 20%, transparent);
|
|
}
|
|
body {
|
|
@apply bg-background text-foreground antialiased;
|
|
font-family: var(--font-sans);
|
|
height: 100%;
|
|
overflow: hidden;
|
|
}
|
|
h1,
|
|
h2,
|
|
h3 {
|
|
text-wrap: balance;
|
|
}
|
|
/* Prevent double-tap-to-zoom on interactive elements for mobile */
|
|
a,
|
|
button,
|
|
[role="button"],
|
|
input,
|
|
select,
|
|
textarea,
|
|
label {
|
|
touch-action: manipulation;
|
|
}
|
|
}
|
|
|
|
@media (pointer: coarse) {
|
|
button,
|
|
[role="button"],
|
|
input,
|
|
select,
|
|
textarea,
|
|
[data-slot="select-trigger"] {
|
|
min-height: 44px;
|
|
}
|
|
|
|
[data-slot="toggle"] {
|
|
min-height: 0;
|
|
}
|
|
}
|
|
|
|
/* Dark mode color scheme */
|
|
.dark {
|
|
color-scheme: dark;
|
|
}
|
|
|
|
/* Expandable dialog transition for max-width changes */
|
|
[data-slot="dialog-content"] {
|
|
transition: max-width 200ms cubic-bezier(0.16, 1, 0.3, 1);
|
|
}
|
|
|
|
/* MDXEditor theme integration */
|
|
.paperclip-mdxeditor-scope,
|
|
.paperclip-mdxeditor {
|
|
--baseBase: var(--background);
|
|
--baseBg: transparent;
|
|
--baseBgSubtle: color-mix(in oklab, var(--accent) 35%, transparent);
|
|
--baseLine: var(--border);
|
|
--baseSolid: var(--muted-foreground);
|
|
--baseSolidHover: var(--foreground);
|
|
--baseText: var(--muted-foreground);
|
|
--baseBorderColor: var(--border);
|
|
--baseBorder: var(--border);
|
|
--baseBorderHover: var(--ring);
|
|
--baseTextContrast: var(--foreground);
|
|
--baseTextContrastMuted: var(--muted-foreground);
|
|
--baseTextEmphasis: var(--foreground);
|
|
--basePageBg: var(--background);
|
|
--baseRadius: var(--radius);
|
|
--baseLineHeight: 1.5;
|
|
--accentBorder: color-mix(in oklab, var(--primary) 35%, var(--border));
|
|
--accentSolid: var(--primary);
|
|
--accentSolidHover: var(--primary);
|
|
--accentLine: color-mix(in oklab, var(--primary) 20%, transparent);
|
|
--accentBg: var(--accent);
|
|
--accentBgHover: color-mix(in oklab, var(--accent) 80%, var(--background));
|
|
--accentBgActive: color-mix(in oklab, var(--accent) 72%, var(--background));
|
|
--accentText: var(--accent-foreground);
|
|
font-family: inherit;
|
|
font-size: 0.875rem;
|
|
line-height: 1.5;
|
|
color: var(--foreground);
|
|
}
|
|
|
|
.paperclip-mdxeditor-scope [class*="_iconButton_"],
|
|
.paperclip-mdxeditor [class*="_iconButton_"] {
|
|
color: var(--baseText);
|
|
}
|
|
|
|
.paperclip-mdxeditor-scope [class*="_iconButton_"]:hover,
|
|
.paperclip-mdxeditor [class*="_iconButton_"]:hover {
|
|
color: var(--baseTextContrast);
|
|
}
|
|
|
|
.paperclip-mdxeditor .mdxeditor-root-contenteditable {
|
|
min-height: 2.5rem;
|
|
padding: 0;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.paperclip-mdxeditor [class*="_contentEditable_"] {
|
|
padding: 0.375rem 0.625rem !important;
|
|
}
|
|
|
|
.paperclip-mdxeditor--borderless [class*="_contentEditable_"] {
|
|
padding: 0 !important;
|
|
}
|
|
|
|
.paperclip-mdxeditor [class*="_placeholder_"] {
|
|
font-family: inherit;
|
|
font-size: 0.875rem;
|
|
line-height: 1.5;
|
|
color: var(--muted-foreground);
|
|
}
|
|
|
|
.paperclip-mdxeditor-content {
|
|
font-family: inherit;
|
|
font-size: inherit;
|
|
line-height: inherit;
|
|
color: inherit;
|
|
}
|
|
|
|
.paperclip-edit-in-place-content {
|
|
font-size: 0.9375rem;
|
|
line-height: 1.75rem;
|
|
}
|
|
|
|
.paperclip-mdxeditor-content > *:first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.paperclip-mdxeditor-content > *:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.paperclip-mdxeditor-content p {
|
|
margin: 0;
|
|
line-height: inherit;
|
|
}
|
|
|
|
.paperclip-mdxeditor-content p + p {
|
|
margin-top: 1.1em;
|
|
}
|
|
|
|
.paperclip-mdxeditor-content a.paperclip-mention-chip,
|
|
.paperclip-mdxeditor-content a.paperclip-project-mention-chip {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.25rem;
|
|
margin: 0 0.1rem;
|
|
padding: 0.05rem 0.45rem;
|
|
border: 1px solid var(--border);
|
|
border-radius: 999px;
|
|
font-size: 0.75rem;
|
|
line-height: 1.3;
|
|
text-decoration: none;
|
|
vertical-align: middle;
|
|
white-space: nowrap;
|
|
user-select: none;
|
|
}
|
|
|
|
.paperclip-mdxeditor-content a.paperclip-mention-chip::before,
|
|
a.paperclip-mention-chip::before {
|
|
content: "";
|
|
flex: none;
|
|
}
|
|
|
|
.paperclip-mdxeditor-content a.paperclip-mention-chip[data-mention-kind="project"]::before,
|
|
a.paperclip-mention-chip[data-mention-kind="project"]::before {
|
|
width: 0.45rem;
|
|
height: 0.45rem;
|
|
border-radius: 999px;
|
|
background-color: var(--paperclip-mention-project-color, currentColor);
|
|
}
|
|
|
|
.paperclip-mdxeditor-content a.paperclip-mention-chip[data-mention-kind="agent"]::before,
|
|
a.paperclip-mention-chip[data-mention-kind="agent"]::before {
|
|
width: 0.75rem;
|
|
height: 0.75rem;
|
|
background-color: currentColor;
|
|
-webkit-mask-image: var(--paperclip-mention-icon-mask);
|
|
mask-image: var(--paperclip-mention-icon-mask);
|
|
-webkit-mask-position: center;
|
|
mask-position: center;
|
|
-webkit-mask-repeat: no-repeat;
|
|
mask-repeat: no-repeat;
|
|
-webkit-mask-size: contain;
|
|
mask-size: contain;
|
|
}
|
|
|
|
.paperclip-mdxeditor-content ul,
|
|
.paperclip-mdxeditor-content ol {
|
|
margin: 1.1em 0;
|
|
padding-left: 1.6em;
|
|
}
|
|
|
|
.paperclip-mdxeditor-content ul {
|
|
list-style: disc;
|
|
}
|
|
|
|
.paperclip-mdxeditor-content ol {
|
|
list-style: decimal;
|
|
}
|
|
|
|
.paperclip-mdxeditor-content li {
|
|
display: list-item;
|
|
margin: 0.3em 0;
|
|
line-height: inherit;
|
|
}
|
|
|
|
.paperclip-mdxeditor-content li::marker {
|
|
color: var(--muted-foreground);
|
|
}
|
|
|
|
.paperclip-mdxeditor-content h1 {
|
|
margin: 1.4em 0 0.9em;
|
|
font-family: var(--font-serif);
|
|
font-size: 1.75em;
|
|
font-weight: 500;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.paperclip-mdxeditor-content h2 {
|
|
margin: 1.3em 0 0.85em;
|
|
font-family: var(--font-serif);
|
|
font-size: 1.35em;
|
|
font-weight: 500;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.paperclip-mdxeditor-content h3 {
|
|
margin: 1.2em 0 0.8em;
|
|
font-family: var(--font-serif);
|
|
font-size: 1.15em;
|
|
font-weight: 500;
|
|
line-height: 1.35;
|
|
}
|
|
|
|
.paperclip-mdxeditor-content img {
|
|
max-height: 18rem;
|
|
border-radius: calc(var(--radius) - 2px);
|
|
}
|
|
|
|
.paperclip-mdxeditor-content blockquote {
|
|
margin: 1.2em 0;
|
|
padding-left: 1em;
|
|
border-left: 3px solid var(--border);
|
|
color: var(--muted-foreground);
|
|
line-height: inherit;
|
|
}
|
|
|
|
.paperclip-mdxeditor-content code {
|
|
font-family: var(--font-mono);
|
|
font-size: 1em;
|
|
}
|
|
|
|
.paperclip-mdxeditor-content pre {
|
|
margin: 0.4rem 0;
|
|
padding: 0;
|
|
border: 1px solid color-mix(in oklab, var(--foreground) 12%, transparent);
|
|
border-radius: calc(var(--radius) - 3px);
|
|
background: oklch(0.283 0.003 95);
|
|
color: oklch(0.959 0.008 95);
|
|
overflow-x: auto;
|
|
}
|
|
|
|
/* Dark-surface code theme for CodeMirror code blocks inside the MDXEditor.
|
|
Overrides the default cm6-theme-basic-light. Uses kami warm-charcoal palette. */
|
|
.paperclip-mdxeditor .cm-editor {
|
|
background-color: oklch(0.283 0.003 95) !important;
|
|
color: oklch(0.959 0.008 95) !important;
|
|
font-size: 1em;
|
|
}
|
|
|
|
.paperclip-mdxeditor .cm-gutters {
|
|
background-color: oklch(0.228 0.003 95) !important;
|
|
color: oklch(0.466 0.006 95) !important;
|
|
border-right: 1px solid oklch(0.228 0.003 95) !important;
|
|
}
|
|
|
|
.paperclip-mdxeditor .cm-activeLineGutter {
|
|
background-color: oklch(0.283 0.003 95) !important;
|
|
}
|
|
|
|
.paperclip-mdxeditor .cm-activeLine {
|
|
background-color: color-mix(in oklab, oklch(0.959 0.008 95) 5%, transparent) !important;
|
|
}
|
|
|
|
.paperclip-mdxeditor .cm-cursor,
|
|
.paperclip-mdxeditor .cm-dropCursor {
|
|
border-left-color: oklch(0.959 0.008 95) !important;
|
|
}
|
|
|
|
.paperclip-mdxeditor .cm-selectionBackground {
|
|
background-color: color-mix(in oklab, oklch(0.462 0.096 255) 25%, transparent) !important;
|
|
}
|
|
|
|
.paperclip-mdxeditor .cm-focused .cm-selectionBackground {
|
|
background-color: color-mix(in oklab, oklch(0.462 0.096 255) 30%, transparent) !important;
|
|
}
|
|
|
|
.paperclip-mdxeditor .cm-content {
|
|
caret-color: oklch(0.959 0.008 95);
|
|
}
|
|
|
|
/* MDXEditor code block language selector -- show on hover only */
|
|
.paperclip-mdxeditor-content [class*="_codeMirrorWrapper_"] {
|
|
position: relative;
|
|
}
|
|
|
|
.paperclip-mdxeditor-content [class*="_codeMirrorToolbar_"],
|
|
.paperclip-mdxeditor-content [class*="_codeBlockToolbar_"] {
|
|
position: absolute;
|
|
top: 0.25rem;
|
|
right: 0.25rem;
|
|
z-index: 2;
|
|
opacity: 0;
|
|
transition: opacity 150ms ease;
|
|
}
|
|
|
|
.paperclip-mdxeditor-content [class*="_codeMirrorToolbar_"] select,
|
|
.paperclip-mdxeditor-content [class*="_codeBlockToolbar_"] select {
|
|
background-color: oklch(0.228 0.003 95);
|
|
color: oklch(0.959 0.008 95);
|
|
border-color: oklch(0.336 0.004 95);
|
|
}
|
|
|
|
.paperclip-mdxeditor-content [class*="_codeMirrorWrapper_"]:hover [class*="_codeMirrorToolbar_"],
|
|
.paperclip-mdxeditor-content [class*="_codeMirrorWrapper_"]:hover [class*="_codeBlockToolbar_"],
|
|
.paperclip-mdxeditor-content [class*="_codeMirrorWrapper_"]:focus-within [class*="_codeMirrorToolbar_"],
|
|
.paperclip-mdxeditor-content [class*="_codeMirrorWrapper_"]:focus-within [class*="_codeBlockToolbar_"] {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Rendered markdown code blocks & inline code (prose/MarkdownBody context).
|
|
Dark-surface code blocks with compact sizing.
|
|
Override prose CSS variables so prose-invert can't revert to defaults. */
|
|
.paperclip-markdown {
|
|
--tw-prose-pre-bg: oklch(0.283 0.003 95);
|
|
--tw-prose-pre-code: oklch(0.959 0.008 95);
|
|
--tw-prose-invert-pre-bg: oklch(0.283 0.003 95);
|
|
--tw-prose-invert-pre-code: oklch(0.959 0.008 95);
|
|
}
|
|
|
|
.paperclip-markdown pre {
|
|
border: 1px solid color-mix(in oklab, var(--foreground) 12%, transparent) !important;
|
|
border-radius: calc(var(--radius) - 3px) !important;
|
|
background-color: oklch(0.283 0.003 95) !important;
|
|
color: oklch(0.959 0.008 95) !important;
|
|
padding: 0.5rem 0.65rem !important;
|
|
margin: 0.4rem 0 !important;
|
|
font-size: 1em !important;
|
|
overflow-x: auto;
|
|
white-space: pre;
|
|
}
|
|
|
|
.paperclip-markdown code {
|
|
font-family: var(--font-mono);
|
|
font-size: 1em;
|
|
}
|
|
|
|
.paperclip-markdown pre code {
|
|
font-size: inherit;
|
|
color: inherit;
|
|
background: none;
|
|
}
|
|
|
|
/* Remove backtick pseudo-elements from inline code (prose default adds them) */
|
|
.prose code::before,
|
|
.prose code::after {
|
|
content: none;
|
|
}
|
|
|
|
/* Inline code background (not inside a code block) */
|
|
.prose :not(pre) > code {
|
|
background-color: color-mix(in oklab, var(--accent) 60%, transparent);
|
|
padding: 0.15em 0.35em;
|
|
border-radius: 3px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.dark .prose :not(pre) > code {
|
|
background-color: color-mix(in oklab, var(--foreground) 8%, transparent);
|
|
}
|
|
|
|
.paperclip-markdown {
|
|
color: var(--foreground);
|
|
font-size: 0.9375rem;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.paperclip-markdown > :first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.paperclip-markdown > :last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.paperclip-markdown :where(p, ul, ol, blockquote, pre, table) {
|
|
margin-top: 0.7rem;
|
|
margin-bottom: 0.7rem;
|
|
}
|
|
|
|
.paperclip-markdown :where(ul, ol) {
|
|
padding-left: 1.15rem;
|
|
}
|
|
|
|
.paperclip-markdown ul {
|
|
list-style-type: disc;
|
|
}
|
|
|
|
.paperclip-markdown ol {
|
|
list-style-type: decimal;
|
|
}
|
|
|
|
.paperclip-markdown li {
|
|
margin: 0.14rem 0;
|
|
padding-left: 0.2rem;
|
|
}
|
|
|
|
.paperclip-markdown li > :where(p, ul, ol) {
|
|
margin-top: 0.3rem;
|
|
margin-bottom: 0.3rem;
|
|
}
|
|
|
|
.paperclip-markdown li::marker {
|
|
color: var(--muted-foreground);
|
|
}
|
|
|
|
.paperclip-markdown h1,
|
|
.paperclip-markdown h2,
|
|
.paperclip-markdown h3,
|
|
.paperclip-markdown h4 {
|
|
margin-top: 1.75rem;
|
|
margin-bottom: 0.45rem;
|
|
color: var(--foreground);
|
|
font-family: var(--font-serif);
|
|
font-weight: 500;
|
|
letter-spacing: -0.01em;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.paperclip-markdown h1 {
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.paperclip-markdown h2 {
|
|
font-size: 1.25rem;
|
|
}
|
|
|
|
.paperclip-markdown h3 {
|
|
font-size: 1.05rem;
|
|
}
|
|
|
|
.paperclip-markdown h4 {
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
.paperclip-markdown :where(strong, b) {
|
|
color: var(--foreground);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.paperclip-markdown a {
|
|
color: color-mix(in oklab, var(--foreground) 76%, var(--primary) 24%);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.paperclip-markdown a:hover {
|
|
text-decoration: underline;
|
|
text-underline-offset: 0.15em;
|
|
}
|
|
|
|
.dark .paperclip-markdown a {
|
|
color: color-mix(in oklab, var(--foreground) 80%, var(--primary) 20%);
|
|
}
|
|
|
|
.paperclip-markdown blockquote {
|
|
margin-left: 0;
|
|
padding-left: 0.95rem;
|
|
border-left: 0.24rem solid color-mix(in oklab, var(--border) 84%, var(--muted-foreground) 16%);
|
|
color: var(--muted-foreground);
|
|
}
|
|
|
|
.paperclip-markdown hr {
|
|
margin: 1.25rem 0;
|
|
border-color: var(--border);
|
|
}
|
|
|
|
.paperclip-markdown img {
|
|
border-radius: calc(var(--radius) + 2px);
|
|
box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--foreground) 10%, transparent);
|
|
}
|
|
|
|
.paperclip-markdown table {
|
|
width: 100%;
|
|
}
|
|
|
|
.paperclip-markdown th {
|
|
font-weight: 500;
|
|
text-align: left;
|
|
}
|
|
|
|
.paperclip-mermaid {
|
|
margin: 0.5rem 0;
|
|
padding: 0.45rem 0.55rem;
|
|
border: 1px solid var(--border);
|
|
border-radius: calc(var(--radius) - 3px);
|
|
background-color: color-mix(in oklab, var(--accent) 35%, transparent);
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.paperclip-mermaid svg {
|
|
display: block;
|
|
width: max-content;
|
|
max-width: none;
|
|
min-width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
.paperclip-mermaid-status {
|
|
margin: 0 0 0.45rem;
|
|
font-size: 0.75rem;
|
|
color: var(--muted-foreground);
|
|
}
|
|
|
|
.paperclip-mermaid-status-error {
|
|
color: var(--destructive);
|
|
}
|
|
|
|
.paperclip-mermaid-source {
|
|
margin: 0;
|
|
padding: 0;
|
|
border: 0;
|
|
background: transparent;
|
|
}
|
|
|
|
/* Project mention chips rendered inside MarkdownBody */
|
|
a.paperclip-mention-chip,
|
|
a.paperclip-project-mention-chip {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.25rem;
|
|
margin: 0 0.1rem;
|
|
padding: 0.05rem 0.45rem;
|
|
border: 1px solid var(--border);
|
|
border-radius: 999px;
|
|
font-size: 0.75rem;
|
|
line-height: 1.3;
|
|
text-decoration: none;
|
|
vertical-align: middle;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* Keep MDXEditor popups above app dialogs, even when they portal to <body>. */
|
|
[class*="_popupContainer_"] {
|
|
z-index: 81 !important;
|
|
}
|
|
|
|
[class*="_dialogOverlay_"] {
|
|
z-index: 80;
|
|
}
|
|
|
|
[class*="_dialogContent_"],
|
|
[class*="_largeDialogContent_"],
|
|
[class*="_popoverContent_"],
|
|
[class*="_linkDialogPopoverContent_"],
|
|
[class*="_tableColumnEditorPopoverContent_"],
|
|
[class*="_toolbarButtonDropdownContainer_"],
|
|
[class*="_toolbarNodeKindSelectContainer_"] {
|
|
z-index: 81 !important;
|
|
}
|
|
|
|
/* Electron window drag region -- CRITICAL */
|
|
.sidebar-drag {
|
|
-webkit-app-region: drag;
|
|
}
|
|
.sidebar-drag button,
|
|
.sidebar-drag select,
|
|
.sidebar-drag input,
|
|
.sidebar-drag a {
|
|
-webkit-app-region: no-drag;
|
|
}
|
|
|
|
/* Custom title bar drag region */
|
|
.titlebar-drag {
|
|
-webkit-app-region: drag;
|
|
}
|
|
.titlebar-button {
|
|
-webkit-app-region: no-drag;
|
|
}
|
|
|
|
/* Fixed overlays (modals, dialogs, palettes) must escape titlebar drag region */
|
|
[class*="fixed"] {
|
|
-webkit-app-region: no-drag;
|
|
}
|
|
|
|
/* Onboarding hero ambient drift */
|
|
@keyframes hero-drift {
|
|
0% { transform: translate(0, 0) scale(1); }
|
|
100% { transform: translate(-4%, 3%) scale(1.05); }
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
animation-duration: 0.01ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
transition-duration: 0.01ms !important;
|
|
scroll-behavior: auto !important;
|
|
}
|
|
}
|
|
|
|
/* Global word-wrap to prevent text overflow */
|
|
textarea, input, select, p, span, div, td, th, li, pre {
|
|
overflow-wrap: break-word;
|
|
word-wrap: break-word;
|
|
}
|
|
|
|
textarea {
|
|
white-space: pre-wrap;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
/* Prevent native select dropdown from overflowing container */
|
|
select {
|
|
max-width: 100%;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
select option {
|
|
max-width: 100%;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* Prevent grid/flex children from overflowing their containers */
|
|
[role="dialog"] * {
|
|
min-width: 0;
|
|
}
|