mirror of
https://github.com/claude-code-best/claude-code.git
synced 2026-06-17 05:45:51 +00:00
249 lines
6.8 KiB
CSS
249 lines
6.8 KiB
CSS
/* Font imports must precede @import "tailwindcss" per CSS spec */
|
|
@import url("https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Poppins:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");
|
|
|
|
@import "tailwindcss";
|
|
|
|
/* ============================================================
|
|
Theme — Refined stone palette (warm gray, not beige)
|
|
Hue shifted from 85 (yellow-cream) to 65 (warm stone)
|
|
Brand orange pops harder against cleaner neutrals
|
|
============================================================ */
|
|
@theme {
|
|
/* Fonts — Lora (serif body) + Poppins (sans-serif UI) + JetBrains Mono */
|
|
--font-sans: "Lora", Georgia, serif;
|
|
--font-display: "Poppins", sans-serif;
|
|
--font-mono: "JetBrains Mono", monospace;
|
|
|
|
/* Brand — signature orange (unchanged) */
|
|
--color-brand: #c96442;
|
|
--color-brand-light: #b55838;
|
|
--color-brand-subtle: oklch(0.65 0.12 30 / 0.08);
|
|
|
|
/* Surfaces — warm stone gray (not yellow-beige) */
|
|
--color-surface-0: #efeee9;
|
|
--color-surface-1: #f6f5f2;
|
|
--color-surface-2: #fbfaf8;
|
|
--color-surface-3: #dfddd8;
|
|
|
|
/* Text — warm near-black tones */
|
|
--color-text-primary: #1a1917;
|
|
--color-text-secondary: #5e5a54;
|
|
--color-text-muted: #969088;
|
|
|
|
/* Inverted — for user message bubbles */
|
|
--color-bg-inverted: #2c2a27;
|
|
--color-text-inverted: #f6f5f2;
|
|
|
|
/* User bubble — brand-tinted surface */
|
|
--color-user-bubble: #c96442;
|
|
--color-user-bubble-border: #b55838;
|
|
|
|
/* Warning — refined amber (less construction-zone) */
|
|
--color-warning-bg: oklch(0.96 0.02 85);
|
|
--color-warning-border: oklch(0.75 0.14 75);
|
|
--color-warning-text: oklch(0.4 0.08 60);
|
|
|
|
/* Status */
|
|
--color-status-active: #5d8a3c;
|
|
--color-status-running: #3d72a8;
|
|
--color-status-idle: #7c3aed;
|
|
--color-status-error: #b83b31;
|
|
--color-status-warning: #b88630;
|
|
|
|
/* Tool card */
|
|
--color-tool-card: #f6f5f2;
|
|
|
|
/* shadcn/ui tokens (oklch — warm stone hue ~65) */
|
|
--color-background: oklch(0.955 0.006 65);
|
|
--color-foreground: oklch(0.19 0.008 65);
|
|
--color-card: oklch(0.975 0.005 65);
|
|
--color-card-foreground: oklch(0.19 0.008 65);
|
|
--color-popover: oklch(0.975 0.005 65);
|
|
--color-popover-foreground: oklch(0.19 0.008 65);
|
|
--color-primary: oklch(0.19 0.008 65);
|
|
--color-primary-foreground: oklch(0.97 0.005 65);
|
|
--color-secondary: oklch(0.955 0.006 65);
|
|
--color-secondary-foreground: oklch(0.19 0.008 65);
|
|
--color-muted: oklch(0.935 0.006 65);
|
|
--color-muted-foreground: oklch(0.48 0.015 65);
|
|
--color-accent: oklch(0.955 0.006 65);
|
|
--color-accent-foreground: oklch(0.19 0.008 65);
|
|
--color-destructive: oklch(0.577 0.245 27.325);
|
|
|
|
/* Border / Input / Ring */
|
|
--color-border: oklch(0.905 0.008 65);
|
|
--color-border-light: #dfddd8;
|
|
--color-input: oklch(0.905 0.008 65);
|
|
--color-ring: oklch(0.65 0.1 40);
|
|
|
|
/* Default utility values */
|
|
--default-border-color: var(--color-border);
|
|
--default-ring-color: var(--color-ring);
|
|
|
|
/* Radius */
|
|
--radius: 0.625rem;
|
|
}
|
|
|
|
/* ============================================================
|
|
Dark mode — warm stone dark palette
|
|
============================================================ */
|
|
.dark {
|
|
--color-surface-0: #1a1917;
|
|
--color-surface-1: #222120;
|
|
--color-surface-2: #2c2a28;
|
|
--color-surface-3: #3a3835;
|
|
--color-text-primary: #efeee9;
|
|
--color-text-secondary: #969088;
|
|
--color-text-muted: #5e5a54;
|
|
--color-bg-inverted: #f6f5f2;
|
|
--color-text-inverted: #2c2a28;
|
|
--color-user-bubble: #c96442;
|
|
--color-user-bubble-border: #b55838;
|
|
--color-border: #3a3835;
|
|
--color-border-light: #2c2a28;
|
|
--color-tool-card: #2c2a28;
|
|
--color-warning-bg: oklch(0.22 0.03 75);
|
|
--color-warning-border: oklch(0.62 0.12 75);
|
|
--color-warning-text: oklch(0.82 0.08 85);
|
|
}
|
|
|
|
/* ============================================================
|
|
Base styles — layered so they coexist with Tailwind preflight
|
|
============================================================ */
|
|
@layer base {
|
|
html,
|
|
body {
|
|
background-color: var(--color-surface-0);
|
|
color: var(--color-text-primary);
|
|
font-family: var(--font-sans);
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
*,
|
|
::before,
|
|
::after {
|
|
border-color: var(--color-border);
|
|
}
|
|
}
|
|
|
|
/* ============================================================
|
|
Custom utilities (unlayered so they always win)
|
|
============================================================ */
|
|
::-webkit-scrollbar {
|
|
width: 6px;
|
|
height: 6px;
|
|
}
|
|
::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
::-webkit-scrollbar-thumb {
|
|
background: var(--color-surface-3);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
/* Glimmer sweep — opacity pulse for thinking indicator */
|
|
.glimmer-text {
|
|
color: var(--color-text-secondary);
|
|
animation: glimmer-pulse 2s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes glimmer-pulse {
|
|
0%,
|
|
100% {
|
|
opacity: 0.5;
|
|
}
|
|
50% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
/* ============================================================
|
|
Chat UI — Anthropic style overrides
|
|
============================================================ */
|
|
|
|
/* Chat input — warm orange focus ring */
|
|
.chat-input-focus:focus-within {
|
|
box-shadow: 0 0 0 2px oklch(0.65 0.12 30 / 0.2);
|
|
}
|
|
|
|
/* Markdown content in message bubbles */
|
|
.message-content pre {
|
|
background-color: var(--color-surface-1);
|
|
border-radius: 0.5rem;
|
|
padding: 0.75rem;
|
|
overflow-x: auto;
|
|
font-size: 0.8125rem;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.message-content code {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.8125rem;
|
|
}
|
|
|
|
.message-content :not(pre) > code {
|
|
background-color: var(--color-surface-1);
|
|
padding: 0.125rem 0.375rem;
|
|
border-radius: 0.25rem;
|
|
}
|
|
|
|
/* ============================================================
|
|
Reduced motion — respect user preference
|
|
============================================================ */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*,
|
|
::before,
|
|
::after {
|
|
animation-duration: 0.01ms;
|
|
animation-iteration-count: 1;
|
|
transition-duration: 0.01ms;
|
|
}
|
|
}
|
|
|
|
/* ============================================================
|
|
Animations — Anthropic entrance effects
|
|
============================================================ */
|
|
@keyframes fadeUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(24px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes typing-bounce {
|
|
0%,
|
|
60%,
|
|
100% {
|
|
transform: translateY(0);
|
|
opacity: 0.5;
|
|
}
|
|
30% {
|
|
transform: translateY(-5px);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
/* Typing indicator dots */
|
|
.chat-typing-indicator {
|
|
display: inline-flex;
|
|
gap: 4px;
|
|
align-items: center;
|
|
height: 20px;
|
|
}
|
|
.chat-typing-indicator span {
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 9999px;
|
|
background: var(--color-brand);
|
|
animation: typing-bounce 1.2s ease-in-out infinite;
|
|
}
|
|
.chat-typing-indicator span:nth-child(2) {
|
|
animation-delay: 0.2s;
|
|
}
|
|
.chat-typing-indicator span:nth-child(3) {
|
|
animation-delay: 0.4s;
|
|
}
|