index.cssā¢5.1 kB
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
:root {
--background: 0 0% 100%;
--foreground: 222.2 84% 4.9%;
--card: 0 0% 100%;
--card-foreground: 222.2 84% 4.9%;
--popover: 0 0% 100%;
--popover-foreground: 222.2 84% 4.9%;
--primary: 222.2 47.4% 11.2%;
--primary-foreground: 210 40% 98%;
--secondary: 210 40% 96%;
--secondary-foreground: 222.2 84% 4.9%;
--muted: 210 40% 96%;
--muted-foreground: 215.4 16.3% 46.9%;
--accent: 210 40% 96%;
--accent-foreground: 222.2 84% 4.9%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 210 40% 98%;
--border: 214.3 31.8% 91.4%;
--input: 214.3 31.8% 91.4%;
--ring: 222.2 84% 4.9%;
--radius: 0.5rem;
}
.dark {
--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%;
--destructive: 0 62.8% 30.6%;
--destructive-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%;
}
}
@layer base {
* {
@apply border-border;
}
body {
@apply bg-background text-foreground;
}
}
@layer utilities {
/* Databricks Genie-style gradient backgrounds */
.bg-genie-dark {
background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%);
}
.bg-genie-light {
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}
/* Animated gradient for empty state */
.bg-genie-animated {
background: linear-gradient(
-45deg,
#0f2027,
#203a43,
#2c5364,
#1a3a47
);
background-size: 400% 400%;
animation: gradient 15s ease infinite;
}
@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
}
/* Typing animation for "Thinking..." */
@keyframes typing-dots {
0%, 20% {
opacity: 0.4;
}
40% {
opacity: 0.7;
}
60%, 100% {
opacity: 1;
}
}
.typing-indicator {
animation: typing-dots 1.5s ease-in-out infinite;
}
/* Floating action buttons animation */
@keyframes fadeInRight {
from {
opacity: 0;
transform: translateX(20px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
/* Markdown prose styling */
.prose {
max-width: none;
overflow-wrap: break-word;
word-wrap: break-word;
word-break: break-word;
}
.prose h1,
.prose h2,
.prose h3,
.prose h4,
.prose h5,
.prose h6 {
margin-top: 1.5em;
margin-bottom: 0.5em;
font-weight: 600;
line-height: 1.25;
}
.prose h1 { font-size: 1.875em; }
.prose h2 { font-size: 1.5em; }
.prose h3 { font-size: 1.25em; }
.prose h4 { font-size: 1.125em; }
.prose p {
margin-top: 0.75em;
margin-bottom: 0.75em;
line-height: 1.6;
}
.prose ul,
.prose ol {
margin-top: 0.75em;
margin-bottom: 0.75em;
padding-left: 1.5em;
}
.prose ul {
list-style-type: disc;
}
.prose ol {
list-style-type: decimal;
}
.prose li {
margin-top: 0.25em;
margin-bottom: 0.25em;
}
.prose strong {
font-weight: 600;
}
.prose em {
font-style: italic;
}
.prose code {
background-color: rgba(0, 0, 0, 0.1);
padding: 0.125em 0.25em;
border-radius: 0.25em;
font-size: 0.875em;
font-family: ui-monospace, monospace;
}
.prose pre {
background-color: rgba(0, 0, 0, 0.2);
padding: 1em;
border-radius: 0.5em;
overflow-x: auto;
margin-top: 1em;
margin-bottom: 1em;
}
.prose pre code {
background-color: transparent;
padding: 0;
}
.prose blockquote {
border-left: 4px solid rgba(255, 255, 255, 0.2);
padding-left: 1em;
font-style: italic;
margin-top: 1em;
margin-bottom: 1em;
}
.prose a {
color: #ffffff;
text-decoration: underline;
font-weight: 600;
text-decoration-thickness: 2px;
text-underline-offset: 2px;
text-decoration-color: rgba(255, 255, 255, 0.6);
overflow-wrap: break-word;
word-wrap: break-word;
word-break: break-all;
}
.prose a:hover {
color: #ffffff;
text-decoration-thickness: 3px;
text-decoration-color: #ffffff;
}
/* Links in light mode assistant messages need dark color */
:not(.dark) .bg-white .prose a {
color: #1e40af;
text-decoration-color: rgba(30, 64, 175, 0.6);
}
:not(.dark) .bg-white .prose a:hover {
color: #1e3a8a;
text-decoration-color: #1e3a8a;
}
.prose hr {
border-top: 1px solid rgba(255, 255, 255, 0.2);
margin-top: 2em;
margin-bottom: 2em;
}
.prose table {
width: 100%;
border-collapse: collapse;
margin-top: 1em;
margin-bottom: 1em;
}
.prose th,
.prose td {
border: 1px solid rgba(255, 255, 255, 0.2);
padding: 0.5em;
}
.prose th {
background-color: rgba(0, 0, 0, 0.2);
font-weight: 600;
}