File size: 3,900 Bytes
7c012de |
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 |
@tailwind base;
@tailwind components;
@tailwind utilities;
:root {
--background: 210 11% 98%; /* #F5F7FA */
--foreground: 215 25% 15%; /* #1E293B */
--muted: 210 11% 96%; /* #F1F5F9 */
--muted-foreground: 215 16% 47%; /* #64748B */
--popover: 0 0% 100%; /* #FFFFFF */
--popover-foreground: 215 25% 15%; /* #1E293B */
--card: 0 0% 100%; /* #FFFFFF */
--card-foreground: 215 25% 15%; /* #1E293B */
--border: 215 12% 90%; /* #E2E8F0 */
--input: 215 12% 90%; /* #E2E8F0 */
--primary: 207 90% 54%; /* #3B82F6 */
--primary-foreground: 211 100% 99%; /* #F8FAFC */
--secondary: 210 11% 96%; /* #F1F5F9 */
--secondary-foreground: 215 25% 15%; /* #1E293B */
--accent: 210 11% 96%; /* #F1F5F9 */
--accent-foreground: 215 25% 15%; /* #1E293B */
--destructive: 0 84% 60%; /* #EF4444 */
--destructive-foreground: 0 0% 98%; /* #FEFEFE */
--ring: 207 90% 54%; /* #3B82F6 */
--radius: 0.5rem;
/* Knowledge Base specific colors */
--kb-blue: 207 90% 54%; /* #3B82F6 */
--kb-indigo: 238 63% 63%; /* #6366F1 */
--kb-emerald: 158 65% 53%; /* #10B981 */
--kb-amber: 45 93% 47%; /* #F59E0B */
}
.dark {
--background: 215 28% 6%; /* #0F172A */
--foreground: 210 11% 98%; /* #F8FAFC */
--muted: 215 25% 11%; /* #1E293B */
--muted-foreground: 215 16% 47%; /* #64748B */
--popover: 215 28% 6%; /* #0F172A */
--popover-foreground: 210 11% 98%; /* #F8FAFC */
--card: 215 28% 6%; /* #0F172A */
--card-foreground: 210 11% 98%; /* #F8FAFC */
--border: 215 25% 15%; /* #334155 */
--input: 215 25% 15%; /* #334155 */
--primary: 207 90% 54%; /* #3B82F6 */
--primary-foreground: 211 100% 99%; /* #F8FAFC */
--secondary: 215 25% 11%; /* #1E293B */
--secondary-foreground: 210 11% 98%; /* #F8FAFC */
--accent: 215 25% 11%; /* #1E293B */
--accent-foreground: 210 11% 98%; /* #F8FAFC */
--destructive: 0 63% 31%; /* #991B1B */
--destructive-foreground: 210 11% 98%; /* #F8FAFC */
--ring: 207 90% 54%; /* #3B82F6 */
}
@layer base {
* {
@apply border-border;
}
body {
@apply font-sans antialiased bg-background text-foreground;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
}
html {
scroll-behavior: smooth;
}
}
@layer utilities {
.line-clamp-2 {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.line-clamp-3 {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.animate-slide-down {
animation: slideDown 0.3s ease-out;
}
.animate-fade-in {
animation: fadeIn 0.2s ease-out;
}
}
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Custom scrollbar styles */
.overflow-y-auto::-webkit-scrollbar {
width: 6px;
}
.overflow-y-auto::-webkit-scrollbar-track {
background: hsl(var(--muted));
border-radius: 3px;
}
.overflow-y-auto::-webkit-scrollbar-thumb {
background: hsl(var(--muted-foreground) / 0.3);
border-radius: 3px;
}
.overflow-y-auto::-webkit-scrollbar-thumb:hover {
background: hsl(var(--muted-foreground) / 0.5);
}
/* Focus styles for accessibility */
.focus-visible\:ring-2:focus-visible {
ring-width: 2px;
ring-color: hsl(var(--ring));
ring-offset-width: 2px;
ring-offset-color: hsl(var(--background));
}
/* High-contrast focus rings for keyboard navigation */
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
outline: 3px solid #2563eb;
outline-offset: 2px;
border-radius: 4px;
}
/* Enhanced focus for interactive elements */
.focus-enhanced:focus-visible {
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.3);
border-color: #2563eb;
}
|