@arizeai/phoenix-mcp

@tailwind base; @tailwind components; @tailwind utilities; @layer base { * { border-color: theme('colors.gray.200'); } .dark * { border-color: theme('colors.gray.700'); } html { -webkit-text-size-adjust: 100%; font-family: theme('fontFamily.sans'); } body { @apply bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100 antialiased; } /* Scrollbar styles */ ::-webkit-scrollbar { @apply w-2 h-2; } ::-webkit-scrollbar-track { @apply bg-gray-100 dark:bg-gray-800; } ::-webkit-scrollbar-thumb { @apply bg-gray-300 dark:bg-gray-600 rounded-full; } ::-webkit-scrollbar-thumb:hover { @apply bg-gray-400 dark:bg-gray-500; } } @layer components { /* Button variants */ .btn-primary { @apply inline-flex items-center justify-center px-4 py-2 text-sm font-medium text-white bg-blue-600 border border-transparent rounded-lg hover:bg-blue-700 focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed transition-colors; } .btn-secondary { @apply inline-flex items-center justify-center px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed transition-colors; } .btn-danger { @apply inline-flex items-center justify-center px-4 py-2 text-sm font-medium text-white bg-red-600 border border-transparent rounded-lg hover:bg-red-700 focus:ring-2 focus:ring-offset-2 focus:ring-red-500 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed transition-colors; } .btn-icon { @apply inline-flex items-center justify-center w-8 h-8 text-gray-500 dark:text-gray-400 bg-transparent border-0 rounded hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-700 dark:hover:text-gray-200 focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 focus:outline-none transition-colors; } /* Input styles */ .input-base { @apply block w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 focus:ring-2 focus:ring-primary-500 focus:border-transparent focus:outline-none disabled:bg-gray-50 dark:disabled:bg-gray-700 disabled:opacity-50 transition-colors; } /* Card styles */ .card { @apply bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm; } .card-header { @apply px-6 py-4 border-b border-gray-200 dark:border-gray-700; } .card-body { @apply px-6 py-4; } .card-footer { @apply px-6 py-4 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700; } /* Email specific styles */ .email-content { @apply prose prose-sm max-w-none prose-gray dark:prose-invert; } .email-content pre { @apply bg-gray-100 dark:bg-gray-800 p-4 rounded-lg overflow-x-auto text-xs font-mono; } .email-content blockquote { @apply border-l-4 border-gray-300 dark:border-gray-600 pl-4 italic text-gray-600 dark:text-gray-400; } /* Status indicators */ .status-dot { @apply inline-block w-2 h-2 rounded-full; } .status-dot.online { @apply bg-green-500; } .status-dot.offline { @apply bg-red-500; } .status-dot.warning { @apply bg-yellow-500; } /* Animation helpers */ .animate-in { @apply animate-fade-in; } .animate-slide-up { @apply animate-slide-up; } } @layer utilities { /* Text selection */ .select-text { user-select: text; } .select-none { user-select: none; } /* Focus visible only when not clicked */ .focus-visible-only:focus:not(:focus-visible) { outline: none; box-shadow: none; } /* Scrollable areas */ .scrollable { scrollbar-width: thin; scrollbar-color: theme('colors.gray.300') theme('colors.gray.100'); } .dark .scrollable { scrollbar-color: theme('colors.gray.600') theme('colors.gray.800'); } /* Email preview styles */ .email-preview { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* Monospace for email headers */ .mono { font-family: theme('fontFamily.mono'); } }