Hugging Face's logo

Spaces:
asoni9
/
canHealUI
Runtime error

App Files Community
canHealUI / src /index.css
gpt-engineer-app[bot]
feat: Design chatbot UI
fee5554
Raw History Blame Contribute Delete
5.66 kB
@tailwind base;
@tailwind components;
@tailwind utilities;
/* Chatbot UI Design System - Modern, clean, and professional */
@layer base {
:root {
/* Main backgrounds and surfaces */
--background: 248 250 252; /* slate-50 - main app background */
--foreground: 215 28% 17%; /* slate-800 - primary text */
/* Chat specific backgrounds */
--chat-background: 241 245 249; /* slate-100 - chat area background */
--message-background: 0 0% 100%; /* white - bot message cards */
/* User message gradient - blue to purple */
--user-gradient-start: 217 91% 60%; /* blue-500 */
--user-gradient-end: 251 91% 68%; /* purple-500 */
--user-message-foreground: 0 0% 100%; /* white text */
/* Bot message styling */
--bot-message-background: 0 0% 100%; /* white */
--bot-message-foreground: 215 25% 27%; /* slate-700 */
--bot-message-border: 220 13% 91%; /* slate-200 */
/* Input and interactive elements */
--input-background: 0 0% 100%; /* white */
--input-border: 220 13% 91%; /* slate-200 */
--input-focus-border: 217 91% 60%; /* blue-500 */
/* Send button gradient */
--send-button-start: 217 91% 60%; /* blue-500 */
--send-button-end: 251 91% 68%; /* purple-500 */
--send-button-foreground: 0 0% 100%; /* white */
/* Header styling */
--header-background: 0 0% 100%; /* white */
--header-foreground: 215 28% 17%; /* slate-800 */
--header-border: 220 13% 91%; /* slate-200 */
/* Quick actions */
--quick-action-background: 248 250 252; /* slate-50 */
--quick-action-foreground: 215 25% 27%; /* slate-700 */
--quick-action-hover: 241 245 249; /* slate-100 */
--quick-action-border: 220 13% 91%; /* slate-200 */
/* Avatars and accents */
--avatar-background: 217 91% 60%; /* blue-500 */
--avatar-foreground: 0 0% 100%; /* white */
/* Shadows and effects */
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
/* Animations and transitions */
--transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
--animation-bounce-in: cubic-bezier(0.68, -0.55, 0.265, 1.55);
/* Legacy compatibility */
--card: var(--message-background);
--card-foreground: var(--bot-message-foreground);
--primary: var(--user-gradient-start);
--primary-foreground: var(--user-message-foreground);
--secondary: var(--quick-action-background);
--secondary-foreground: var(--quick-action-foreground);
--muted: var(--chat-background);
--muted-foreground: 215 16% 47%; /* slate-500 */
--accent: var(--quick-action-hover);
--accent-foreground: var(--quick-action-foreground);
--border: var(--input-border);
--input: var(--input-background);
--ring: var(--input-focus-border);
--radius: 0.75rem; /* More rounded for modern look */
/* Sidebar (keeping existing) */
--sidebar-background: 0 0% 98%;
--sidebar-foreground: 240 5.3% 26.1%;
--sidebar-primary: 240 5.9% 10%;
--sidebar-primary-foreground: 0 0% 98%;
--sidebar-accent: 240 4.8% 95.9%;
--sidebar-accent-foreground: 240 5.9% 10%;
--sidebar-border: 220 13% 91%;
--sidebar-ring: 217.2 91.2% 59.8%;
}
.dark {
/* Dark mode - keeping light theme for now, focusing on the chatbot experience */
--background: 222.2 84% 4.9%;
--foreground: 210 40% 98%;
--card: 222.2 84% 4.9%;
--card-foreground: 210 40% 98%;
--popover: 222.2 84% 4.9%;
--popover-foreground: 210 40% 98%;
--primary: 210 40% 98%;
--primary-foreground: 222.2 47.4% 11.2%;
--secondary: 217.2 32.6% 17.5%;
--secondary-foreground: 210 40% 98%;
--muted: 217.2 32.6% 17.5%;
--muted-foreground: 215 20.2% 65.1%;
--accent: 217.2 32.6% 17.5%;
--accent-foreground: 210 40% 98%;
--border: 217.2 32.6% 17.5%;
--input: 217.2 32.6% 17.5%;
--ring: 212.7 26.8% 83.9%;
--sidebar-background: 240 5.9% 10%;
--sidebar-foreground: 240 4.8% 95.9%;
--sidebar-primary: 224.3 76.3% 48%;
--sidebar-primary-foreground: 0 0% 100%;
--sidebar-accent: 240 3.7% 15.9%;
--sidebar-accent-foreground: 240 4.8% 95.9%;
--sidebar-border: 240 3.7% 15.9%;
--sidebar-ring: 217.2 91.2% 59.8%;
}
}
@layer base {
* {
@apply border-border;
}
body {
@apply bg-background text-foreground font-sans;
}
}
@layer components {
/* Chat message animations */
.message-fade-in {
animation: messageSlideIn 0.3s ease-out;
}
.user-message-gradient {
background: linear-gradient(135deg, hsl(var(--user-gradient-start)), hsl(var(--user-gradient-end)));
}
.send-button-gradient {
background: linear-gradient(135deg, hsl(var(--send-button-start)), hsl(var(--send-button-end)));
}
.chat-scrollbar {
scrollbar-width: thin;
scrollbar-color: hsl(var(--border)) transparent;
}
.chat-scrollbar::-webkit-scrollbar {
width: 6px;
}
.chat-scrollbar::-webkit-scrollbar-track {
background: transparent;
}
.chat-scrollbar::-webkit-scrollbar-thumb {
background-color: hsl(var(--border));
border-radius: 3px;
}
}
@layer utilities {
.message-shadow {
box-shadow: var(--shadow-sm);
}
.input-shadow {
box-shadow: var(--shadow-md);
}
.header-shadow {
box-shadow: var(--shadow-sm);
}
}
@keyframes messageSlideIn {
from {
opacity: 0;
transform: translateY(10px) scale(0.95);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}