wehub-resource-sync
375 lines
9.9 KiB
CSS
375 lines
9.9 KiB
CSS
@import "tailwindcss";
|
|
@import "tw-animate-css";
|
|
@import "shadcn/tailwind.css";
|
|
@plugin "@tailwindcss/typography";
|
|
|
|
@custom-variant dark (&:is(.dark *));
|
|
|
|
@theme inline {
|
|
/* shadcn design tokens (mapped from CSS variables) */
|
|
--font-heading: var(--font-sans);
|
|
--font-sans: var(--font-sans);
|
|
--color-sidebar-ring: var(--sidebar-ring);
|
|
--color-sidebar-border: var(--sidebar-border);
|
|
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
|
--color-sidebar-accent: var(--sidebar-accent);
|
|
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
|
--color-sidebar-primary: var(--sidebar-primary);
|
|
--color-sidebar-foreground: var(--sidebar-foreground);
|
|
--color-sidebar: var(--sidebar);
|
|
--color-chart-5: var(--chart-5);
|
|
--color-chart-4: var(--chart-4);
|
|
--color-chart-3: var(--chart-3);
|
|
--color-chart-2: var(--chart-2);
|
|
--color-chart-1: var(--chart-1);
|
|
--color-ring: var(--ring);
|
|
--color-input: var(--input);
|
|
--color-border: var(--border);
|
|
--color-destructive: var(--destructive);
|
|
--color-accent-foreground: var(--accent-foreground);
|
|
--color-accent: var(--accent);
|
|
--color-muted-foreground: var(--muted-foreground);
|
|
--color-muted: var(--muted);
|
|
--color-secondary-foreground: var(--secondary-foreground);
|
|
--color-secondary: var(--secondary);
|
|
--color-primary-foreground: var(--primary-foreground);
|
|
--color-primary: var(--primary);
|
|
--color-popover-foreground: var(--popover-foreground);
|
|
--color-popover: var(--popover);
|
|
--color-card-foreground: var(--card-foreground);
|
|
--color-card: var(--card);
|
|
--color-foreground: var(--foreground);
|
|
--color-background: var(--background);
|
|
--radius-sm: calc(var(--radius) * 0.6);
|
|
--radius-md: calc(var(--radius) * 0.8);
|
|
--radius-lg: var(--radius);
|
|
--radius-xl: calc(var(--radius) * 1.4);
|
|
--radius-2xl: calc(var(--radius) * 1.8);
|
|
--radius-3xl: calc(var(--radius) * 2.2);
|
|
--radius-4xl: calc(var(--radius) * 2.6);
|
|
|
|
/* PixelRAG custom tokens */
|
|
--color-surface: var(--pixelrag-surface);
|
|
--color-score: var(--pixelrag-score);
|
|
--color-method-get: var(--pixelrag-method-get);
|
|
--color-method-post: var(--pixelrag-method-post);
|
|
|
|
--font-display: "Crimson Pro", ui-serif, Georgia, serif;
|
|
--font-mono: "JetBrains Mono", ui-monospace, monospace;
|
|
}
|
|
|
|
:root {
|
|
--background: #faf9f7;
|
|
--foreground: #1a1816;
|
|
--card: #ffffff;
|
|
--card-foreground: #1a1816;
|
|
--popover: #ffffff;
|
|
--popover-foreground: #1a1816;
|
|
--primary: #8b6943;
|
|
--primary-foreground: #ffffff;
|
|
--secondary: #f0ece6;
|
|
--secondary-foreground: #3a3530;
|
|
--muted: #f0ece6;
|
|
--muted-foreground: #8a8078;
|
|
--accent: #f0ece6;
|
|
--accent-foreground: #3a3530;
|
|
--destructive: #c44040;
|
|
--border: #e8e2da;
|
|
--input: #e8e2da;
|
|
--ring: #8b6943;
|
|
--chart-1: #8b6943;
|
|
--chart-2: #6b8a6b;
|
|
--chart-3: #5a7a8a;
|
|
--chart-4: #9a7a5a;
|
|
--chart-5: #8a8078;
|
|
--radius: 0.625rem;
|
|
--sidebar: #f5f2ee;
|
|
--sidebar-foreground: #1a1816;
|
|
--sidebar-primary: #8b6943;
|
|
--sidebar-primary-foreground: #ffffff;
|
|
--sidebar-accent: #f0ece6;
|
|
--sidebar-accent-foreground: #3a3530;
|
|
--sidebar-border: #e8e2da;
|
|
--sidebar-ring: #8b6943;
|
|
|
|
/* PixelRAG light mode custom tokens */
|
|
--pixelrag-surface: #f5f2ee;
|
|
--pixelrag-score: #8b6943;
|
|
--pixelrag-method-get: #5a7a8a;
|
|
--pixelrag-method-post: #6b8a6b;
|
|
}
|
|
|
|
.dark {
|
|
--background: #0c0c0c;
|
|
--foreground: #ffffff;
|
|
--card: #1a1a1a;
|
|
--card-foreground: #ffffff;
|
|
--popover: #1a1a1a;
|
|
--popover-foreground: #ffffff;
|
|
--primary: #c0956c;
|
|
--primary-foreground: #ffffff;
|
|
--secondary: #1e1e1c;
|
|
--secondary-foreground: #e8e4df;
|
|
--muted: #1e1e1c;
|
|
--muted-foreground: #8a8580;
|
|
--accent: #c0956c;
|
|
--accent-foreground: #ffffff;
|
|
--destructive: oklch(0.704 0.191 22.216);
|
|
--border: #252420;
|
|
--input: #252420;
|
|
--ring: #c0956c;
|
|
--chart-1: #c0956c;
|
|
--chart-2: #d4a574;
|
|
--chart-3: #7ca882;
|
|
--chart-4: #6b9ec4;
|
|
--chart-5: #8a8580;
|
|
--sidebar: #161614;
|
|
--sidebar-foreground: #e8e4df;
|
|
--sidebar-primary: #c0956c;
|
|
--sidebar-primary-foreground: #ffffff;
|
|
--sidebar-accent: #1e1e1c;
|
|
--sidebar-accent-foreground: #e8e4df;
|
|
--sidebar-border: #252420;
|
|
--sidebar-ring: #c0956c;
|
|
|
|
/* PixelRAG dark mode custom tokens */
|
|
--pixelrag-surface: #1a1a18;
|
|
--pixelrag-score: #c0956c;
|
|
--pixelrag-method-get: #6b9ec4;
|
|
--pixelrag-method-post: #7ca882;
|
|
}
|
|
|
|
@layer base {
|
|
* {
|
|
@apply border-border outline-ring/50;
|
|
}
|
|
body {
|
|
@apply bg-background text-foreground;
|
|
font-family: var(--font-sans);
|
|
position: relative;
|
|
}
|
|
html {
|
|
@apply font-sans;
|
|
}
|
|
}
|
|
|
|
/* ─── Atmospheric background: animated gradient mesh + grain ─── */
|
|
body::before {
|
|
content: '';
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: -2;
|
|
background:
|
|
radial-gradient(ellipse 80% 60% at 15% 0%, rgba(192, 149, 108, 0.10), transparent 55%),
|
|
radial-gradient(ellipse 70% 50% at 85% 10%, rgba(150, 170, 140, 0.07), transparent 50%),
|
|
radial-gradient(ellipse 90% 70% at 50% 100%, rgba(180, 140, 100, 0.06), transparent 60%);
|
|
background-size: 200% 200%;
|
|
animation: mesh-drift 28s ease-in-out infinite alternate;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.dark body::before {
|
|
background:
|
|
radial-gradient(ellipse 80% 60% at 15% 0%, rgba(192, 149, 108, 0.10), transparent 55%),
|
|
radial-gradient(ellipse 70% 50% at 85% 10%, rgba(120, 140, 110, 0.06), transparent 50%),
|
|
radial-gradient(ellipse 90% 70% at 50% 100%, rgba(160, 120, 80, 0.05), transparent 60%);
|
|
}
|
|
|
|
/* Fine grain overlay */
|
|
body::after {
|
|
content: '';
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: -1;
|
|
pointer-events: none;
|
|
opacity: 0.4;
|
|
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
|
|
background-size: 200px 200px;
|
|
}
|
|
|
|
.dark body::after {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
@keyframes mesh-drift {
|
|
0% { background-position: 0% 0%; }
|
|
100% { background-position: 100% 100%; }
|
|
}
|
|
|
|
/* Staggered fade-up reveal */
|
|
@keyframes reveal-up {
|
|
from { opacity: 0; transform: translateY(16px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
.reveal {
|
|
animation: reveal-up 0.7s cubic-bezier(0.16, 1, 0.3, 1) backwards;
|
|
}
|
|
|
|
/* Animated gradient text */
|
|
.gradient-text {
|
|
background: linear-gradient(110deg, var(--primary), #d4a574 30%, var(--primary) 60%, #b8895c);
|
|
background-size: 200% auto;
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
animation: gradient-shift 6s linear infinite;
|
|
}
|
|
|
|
@keyframes gradient-shift {
|
|
to { background-position: 200% center; }
|
|
}
|
|
|
|
/* Scrollbar */
|
|
::-webkit-scrollbar {
|
|
width: 6px;
|
|
height: 6px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: rgba(0, 0, 0, 0.1);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.dark ::-webkit-scrollbar-thumb {
|
|
background: rgba(255, 255, 255, 0.08);
|
|
}
|
|
|
|
/* Search bar focus glow */
|
|
.search-bar-glow {
|
|
transition: box-shadow 0.3s ease;
|
|
}
|
|
|
|
.search-bar-glow:focus-within {
|
|
box-shadow: 0 0 0 1px rgba(139, 105, 67, 0.3), 0 0 20px -4px rgba(139, 105, 67, 0.1);
|
|
}
|
|
|
|
/* Example query chip hover */
|
|
.query-chip {
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.query-chip:hover {
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 2px 8px rgba(192, 149, 108, 0.15);
|
|
}
|
|
|
|
/* Tile card hover glow */
|
|
.tile-card-glow {
|
|
transition: all 0.25s ease;
|
|
}
|
|
|
|
.tile-card-glow:hover {
|
|
box-shadow: 0 0 0 1px rgba(192, 149, 108, 0.2), 0 4px 20px -4px rgba(192, 149, 108, 0.15), 0 8px 24px -8px rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
/* Status card accent border */
|
|
.status-card-accent {
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.status-card-accent::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 2px;
|
|
background: linear-gradient(90deg, #c0956c, #d4a574, #c0956c);
|
|
opacity: 0.7;
|
|
}
|
|
|
|
/* Score badge gradient */
|
|
.score-badge {
|
|
background: linear-gradient(135deg, rgba(192, 149, 108, 0.15), rgba(212, 165, 116, 0.15));
|
|
border: 1px solid rgba(192, 149, 108, 0.2);
|
|
border-radius: 4px;
|
|
padding: 1px 6px;
|
|
}
|
|
|
|
/* Nav link active indicator */
|
|
.nav-link-active {
|
|
color: var(--foreground) !important;
|
|
position: relative;
|
|
}
|
|
|
|
.nav-link-active::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: -2px;
|
|
left: 0;
|
|
right: 0;
|
|
height: 1.5px;
|
|
background: #c0956c;
|
|
border-radius: 1px;
|
|
}
|
|
|
|
/* ─── Chat page theme ─── */
|
|
.chat-page {
|
|
--chat-bg: var(--background);
|
|
--chat-fg: var(--foreground);
|
|
--chat-secondary: var(--muted-foreground);
|
|
--chat-muted: #b0a89e;
|
|
--chat-border: var(--border);
|
|
--chat-card: var(--card);
|
|
--chat-card-hover: var(--secondary);
|
|
--chat-input-bg: var(--card);
|
|
--chat-accent: var(--primary);
|
|
--chat-accent-dim: rgba(139, 105, 67, 0.15);
|
|
--chat-accent-glow: rgba(139, 105, 67, 0.1);
|
|
--chat-warm: #a07a4a;
|
|
background: var(--chat-bg);
|
|
}
|
|
|
|
.dark .chat-page {
|
|
--chat-muted: #5a5550;
|
|
--chat-accent-dim: rgba(192, 149, 108, 0.25);
|
|
--chat-accent-glow: rgba(192, 149, 108, 0.12);
|
|
--chat-warm: #d4a574;
|
|
}
|
|
|
|
.chat-input-area {
|
|
background: color-mix(in srgb, var(--background) 95%, transparent);
|
|
backdrop-filter: blur(20px);
|
|
}
|
|
|
|
/* Chat prose overrides */
|
|
.chat-prose table {
|
|
border-collapse: collapse;
|
|
width: 100%;
|
|
margin: 1rem 0;
|
|
}
|
|
|
|
.chat-prose th,
|
|
.chat-prose td {
|
|
border: 1px solid rgba(255, 255, 255, 0.04);
|
|
padding: 0.5rem 0.75rem;
|
|
}
|
|
|
|
.chat-prose th {
|
|
background: rgba(255, 255, 255, 0.02);
|
|
}
|
|
|
|
.chat-prose tr:hover td {
|
|
background: rgba(255, 255, 255, 0.01);
|
|
}
|
|
|
|
/* Thin scrollbar for tile strips */
|
|
.scrollbar-thin::-webkit-scrollbar {
|
|
height: 3px;
|
|
}
|
|
|
|
.scrollbar-thin::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
.scrollbar-thin::-webkit-scrollbar-thumb {
|
|
background: rgba(255, 255, 255, 0.06);
|
|
border-radius: 2px;
|
|
}
|