7019cd400b
Remove IBM Plex Mono + text-transform: uppercase from all UI labels. CSS classes .font-mono-label and .font-mono-overline now use Inter with no text-transform. Inline monospace+uppercase styles in StatusDropdown, TagsDropdown, ReferencedByPanel, AiActionCard replaced. Tailwind uppercase removed from Sidebar, CommandPalette, PulseView, CreateNoteDialog, CreateTypeDialog. Hardcoded ALL CAPS text (COLOR, ICON, TEMPLATE) converted to sentence case. Code blocks and commit hashes remain monospaced. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
331 lines
8.7 KiB
CSS
331 lines
8.7 KiB
CSS
@import "tailwindcss";
|
|
@import "tw-animate-css";
|
|
|
|
/* ============================================================
|
|
Theme Variables — Light mode only (dark mode removed for now)
|
|
============================================================ */
|
|
|
|
:root {
|
|
/* --- Font defaults --- */
|
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
|
|
Oxygen, Ubuntu, Cantarell, sans-serif;
|
|
line-height: 1.5;
|
|
font-weight: 400;
|
|
font-size: 14px;
|
|
font-synthesis: none;
|
|
text-rendering: optimizeLegibility;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
|
|
/* --- shadcn theme variables (light mode) --- */
|
|
--radius: 0.5rem;
|
|
--background: #FFFFFF;
|
|
--foreground: #37352F;
|
|
--card: #FFFFFF;
|
|
--card-foreground: #37352F;
|
|
--popover: #FFFFFF;
|
|
--popover-foreground: #37352F;
|
|
--primary: #155DFF;
|
|
--primary-foreground: #FFFFFF;
|
|
--secondary: #EBEBEA;
|
|
--secondary-foreground: #37352F;
|
|
--muted: #F0F0EF;
|
|
--muted-foreground: #787774;
|
|
--accent: #EBEBEA;
|
|
--accent-foreground: #37352F;
|
|
--destructive: #E03E3E;
|
|
--destructive-foreground: #FFFFFF;
|
|
--border: #E9E9E7;
|
|
--input: #E9E9E7;
|
|
--ring: #155DFF;
|
|
--sidebar: #F7F6F3;
|
|
--sidebar-foreground: #37352F;
|
|
--sidebar-primary: #155DFF;
|
|
--sidebar-primary-foreground: #FFFFFF;
|
|
--sidebar-accent: #EBEBEA;
|
|
--sidebar-accent-foreground: #37352F;
|
|
--sidebar-border: #E9E9E7;
|
|
--sidebar-ring: #155DFF;
|
|
|
|
/* --- App-specific variables (light mode) --- */
|
|
color-scheme: light;
|
|
--bg-primary: #FFFFFF;
|
|
--bg-sidebar: #F7F6F3;
|
|
--bg-card: #FFFFFF;
|
|
--bg-hover: #EBEBEA;
|
|
--bg-hover-subtle: #F0F0EF;
|
|
--bg-selected: #E8F4FE;
|
|
--bg-input: #FFFFFF;
|
|
--bg-button: #EBEBEA;
|
|
--bg-dialog: #FFFFFF;
|
|
--text-primary: #37352F;
|
|
--text-secondary: #787774;
|
|
--text-tertiary: #787774;
|
|
--text-muted: #B4B4B4;
|
|
--text-faint: #B4B4B4;
|
|
--text-heading: #37352F;
|
|
--accent-blue: #155DFF;
|
|
--accent-blue-bg: #155DFF18;
|
|
--accent-blue-hover: #0D4AD6;
|
|
--accent-green: #38A169;
|
|
--accent-orange: #D9730D;
|
|
--accent-orange-light: rgba(217, 115, 13, 0.1);
|
|
--accent-red: #E53E3E;
|
|
--accent-purple: #805AD5;
|
|
--accent-yellow: #D69E2E;
|
|
--accent-blue-light: #155DFF14;
|
|
--accent-green-light: rgba(56, 161, 105, 0.1);
|
|
--accent-purple-light: rgba(128, 90, 213, 0.1);
|
|
--accent-red-light: rgba(229, 62, 62, 0.1);
|
|
--accent-yellow-light: rgba(214, 158, 46, 0.1);
|
|
--accent-teal: #319795;
|
|
--accent-teal-light: rgba(49, 151, 149, 0.1);
|
|
--accent-pink: #D53F8C;
|
|
--accent-pink-light: rgba(213, 63, 140, 0.1);
|
|
--accent-gray: #718096;
|
|
--accent-gray-light: rgba(113, 128, 150, 0.1);
|
|
--border-primary: #E9E9E7;
|
|
--border-subtle: #E9E9E7;
|
|
--border-input: #E9E9E7;
|
|
--border-dialog: #E9E9E7;
|
|
--link-color: #155DFF;
|
|
--link-hover: #0D4AD6;
|
|
--shadow-overlay: rgba(0, 0, 0, 0.3);
|
|
--shadow-dialog: rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
/* Dark mode variables removed — light mode only for now */
|
|
|
|
/* --- Tailwind v4 theme inline: register colors + radii --- */
|
|
@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-border: var(--border);
|
|
--color-input: var(--input);
|
|
--color-ring: var(--ring);
|
|
--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: calc(var(--radius) - 4px);
|
|
--radius-md: calc(var(--radius) - 2px);
|
|
--radius-lg: var(--radius);
|
|
--radius-xl: calc(var(--radius) + 4px);
|
|
}
|
|
|
|
/* --- Base layer --- */
|
|
@layer base {
|
|
* {
|
|
@apply border-border;
|
|
box-sizing: border-box;
|
|
}
|
|
body {
|
|
@apply bg-background text-foreground;
|
|
margin: 0;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
}
|
|
#root {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
}
|
|
}
|
|
|
|
/* --- Label typography (Inter, sentence case) --- */
|
|
/* t8: Section labels, metadata tags — 11px medium */
|
|
.font-mono-label {
|
|
font-family: 'Inter', sans-serif;
|
|
font-size: 11px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* t9: Overlines, category labels — 10px regular */
|
|
.font-mono-overline {
|
|
font-family: 'Inter', sans-serif;
|
|
font-size: 10px;
|
|
font-weight: 400;
|
|
letter-spacing: 0.02em;
|
|
}
|
|
|
|
.referenced-by-panel button:hover {
|
|
text-decoration: underline;
|
|
text-decoration-style: dotted;
|
|
}
|
|
|
|
/* --- AI Chat markdown rendering --- */
|
|
|
|
.ai-markdown {
|
|
font-size: 13px;
|
|
line-height: 1.6;
|
|
color: var(--foreground);
|
|
}
|
|
|
|
.ai-markdown > :first-child { margin-top: 0; }
|
|
.ai-markdown > :last-child { margin-bottom: 0; }
|
|
|
|
.ai-markdown p { margin: 0.5em 0; }
|
|
|
|
.ai-markdown strong { font-weight: 600; }
|
|
|
|
.ai-markdown h1,
|
|
.ai-markdown h2,
|
|
.ai-markdown h3,
|
|
.ai-markdown h4 {
|
|
font-weight: 600;
|
|
margin: 0.8em 0 0.4em;
|
|
line-height: 1.3;
|
|
}
|
|
.ai-markdown h1 { font-size: 1.25em; }
|
|
.ai-markdown h2 { font-size: 1.15em; }
|
|
.ai-markdown h3 { font-size: 1.05em; }
|
|
.ai-markdown h4 { font-size: 1em; }
|
|
|
|
.ai-markdown ul,
|
|
.ai-markdown ol {
|
|
margin: 0.4em 0;
|
|
padding-left: 1.5em;
|
|
}
|
|
.ai-markdown li { margin: 0.15em 0; }
|
|
.ai-markdown li > ul,
|
|
.ai-markdown li > ol { margin: 0.1em 0; }
|
|
|
|
.ai-markdown code {
|
|
font-family: 'IBM Plex Mono', ui-monospace, monospace;
|
|
font-size: 0.9em;
|
|
background: var(--muted);
|
|
border-radius: 3px;
|
|
padding: 0.15em 0.35em;
|
|
}
|
|
|
|
.ai-markdown pre {
|
|
margin: 0.5em 0;
|
|
border-radius: 6px;
|
|
background: var(--muted);
|
|
overflow-x: auto;
|
|
max-height: 400px;
|
|
}
|
|
|
|
.ai-markdown pre code {
|
|
display: block;
|
|
padding: 0.75em 1em;
|
|
background: none;
|
|
border-radius: 0;
|
|
font-size: 12px;
|
|
line-height: 1.5;
|
|
white-space: pre;
|
|
}
|
|
|
|
.ai-markdown blockquote {
|
|
margin: 0.5em 0;
|
|
padding: 0.25em 0.75em;
|
|
border-left: 3px solid var(--border);
|
|
color: var(--muted-foreground);
|
|
}
|
|
|
|
.ai-markdown a {
|
|
color: var(--link-color);
|
|
text-decoration: none;
|
|
}
|
|
.ai-markdown a:hover { text-decoration: underline; }
|
|
|
|
.ai-markdown .chat-wikilink {
|
|
display: inline;
|
|
color: var(--primary);
|
|
background: color-mix(in srgb, var(--primary) 10%, transparent);
|
|
border-radius: 4px;
|
|
padding: 0 4px;
|
|
cursor: pointer;
|
|
font-weight: 500;
|
|
text-decoration: none;
|
|
transition: background 0.15s ease;
|
|
}
|
|
.ai-markdown .chat-wikilink:hover {
|
|
background: color-mix(in srgb, var(--primary) 20%, transparent);
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.ai-markdown hr {
|
|
border: none;
|
|
border-top: 1px solid var(--border);
|
|
margin: 0.75em 0;
|
|
}
|
|
|
|
.ai-markdown table {
|
|
border-collapse: collapse;
|
|
margin: 0.5em 0;
|
|
font-size: 12px;
|
|
width: 100%;
|
|
}
|
|
.ai-markdown th,
|
|
.ai-markdown td {
|
|
border: 1px solid var(--border);
|
|
padding: 0.35em 0.6em;
|
|
text-align: left;
|
|
}
|
|
.ai-markdown th {
|
|
background: var(--muted);
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* --- highlight.js light theme (GitHub-style) --- */
|
|
|
|
.ai-markdown .hljs { color: var(--foreground); }
|
|
.ai-markdown .hljs-comment,
|
|
.ai-markdown .hljs-quote { color: #6a737d; font-style: italic; }
|
|
.ai-markdown .hljs-keyword,
|
|
.ai-markdown .hljs-selector-tag { color: #d73a49; }
|
|
.ai-markdown .hljs-string,
|
|
.ai-markdown .hljs-addition { color: #032f62; }
|
|
.ai-markdown .hljs-number,
|
|
.ai-markdown .hljs-literal { color: #005cc5; }
|
|
.ai-markdown .hljs-title,
|
|
.ai-markdown .hljs-section { color: #6f42c1; }
|
|
.ai-markdown .hljs-built_in,
|
|
.ai-markdown .hljs-type { color: #e36209; }
|
|
.ai-markdown .hljs-attr,
|
|
.ai-markdown .hljs-name,
|
|
.ai-markdown .hljs-attribute { color: #005cc5; }
|
|
.ai-markdown .hljs-deletion { color: #b31d28; background: #ffeef0; }
|
|
.ai-markdown .hljs-meta { color: #6a737d; }
|
|
|
|
/* --- AI panel working border animation --- */
|
|
|
|
@keyframes ai-border-pulse {
|
|
0%, 100% { border-color: var(--accent-blue, #3b82f6); opacity: 1; }
|
|
50% { border-color: var(--accent-blue, #93c5fd); opacity: 0.6; }
|
|
}
|
|
|
|
/* --- Typing indicator dots --- */
|
|
|
|
.typing-dot {
|
|
display: inline-block;
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 50%;
|
|
background: var(--muted-foreground);
|
|
animation: typing-bounce 1.2s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes typing-bounce {
|
|
0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
|
|
30% { opacity: 1; transform: translateY(-3px); }
|
|
}
|