File size: 5,661 Bytes
569f6fb fee5554 569f6fb fee5554 569f6fb fee5554 569f6fb fee5554 569f6fb |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 |
@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);
}
}
|