/
/
/
1/* Tailwind CSS imports */
2@import 'tailwindcss/base';
3@import 'tailwindcss/components';
4@import 'tailwindcss/utilities';
5
6/* Base styles */
7@layer base {
8 html {
9 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
10 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
11 sans-serif;
12 }
13
14 body {
15 @apply bg-gray-100 text-gray-900;
16 -webkit-font-smoothing: antialiased;
17 -moz-osx-font-smoothing: grayscale;
18 }
19
20 * {
21 box-sizing: border-box;
22 }
23}
24
25/* Component styles */
26@layer components {
27 /* Custom scrollbar */
28 .custom-scrollbar {
29 scrollbar-width: thin;
30 scrollbar-color: rgb(156 163 175) rgb(243 244 246);
31 }
32
33 .custom-scrollbar::-webkit-scrollbar {
34 width: 6px;
35 }
36
37 .custom-scrollbar::-webkit-scrollbar-track {
38 background: rgb(243 244 246);
39 border-radius: 3px;
40 }
41
42 .custom-scrollbar::-webkit-scrollbar-thumb {
43 background: rgb(156 163 175);
44 border-radius: 3px;
45 }
46
47 .custom-scrollbar::-webkit-scrollbar-thumb:hover {
48 background: rgb(107 114 128);
49 }
50
51 /* Focus ring for better accessibility */
52 .focus-ring {
53 @apply focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2;
54 }
55
56 /* Button variants */
57 .btn-primary {
58 @apply px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus-ring disabled:opacity-50 disabled:cursor-not-allowed transition-colors;
59 }
60
61 .btn-secondary {
62 @apply px-4 py-2 bg-gray-200 text-gray-900 rounded-md hover:bg-gray-300 focus-ring disabled:opacity-50 disabled:cursor-not-allowed transition-colors;
63 }
64
65 .btn-danger {
66 @apply px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 focus-ring disabled:opacity-50 disabled:cursor-not-allowed transition-colors;
67 }
68
69 /* Input styles */
70 .input-field {
71 @apply px-3 py-2 border border-gray-300 rounded-md focus-ring disabled:opacity-50 disabled:cursor-not-allowed;
72 }
73
74 /* Card styles */
75 .card {
76 @apply bg-white rounded-lg shadow-md;
77 }
78
79 .card-header {
80 @apply p-6 border-b border-gray-200;
81 }
82
83 .card-body {
84 @apply p-6;
85 }
86
87 /* Status indicators */
88 .status-indicator {
89 @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
90 }
91
92 .status-indicator.recording {
93 @apply bg-red-100 text-red-800;
94 }
95
96 .status-indicator.stopped {
97 @apply bg-gray-100 text-gray-800;
98 }
99
100 .status-indicator.connected {
101 @apply bg-green-100 text-green-800;
102 }
103
104 .status-indicator.disconnected {
105 @apply bg-red-100 text-red-800;
106 }
107
108 /* Loading states */
109 .loading-spinner {
110 @apply animate-spin rounded-full border-2 border-gray-300 border-t-blue-600;
111 }
112
113 /* Topic item styles */
114 .topic-item {
115 @apply flex items-center justify-between p-3 border-b border-gray-200 last:border-b-0 hover:bg-gray-50 cursor-pointer transition-colors;
116 }
117
118 .topic-item.selected {
119 @apply bg-blue-50 border-l-4 border-l-blue-500;
120 }
121
122 .topic-item.disabled {
123 @apply opacity-50 cursor-not-allowed hover:bg-transparent;
124 }
125
126 /* Recording controls */
127 .recording-controls {
128 @apply flex space-x-4;
129 }
130
131 .recording-button {
132 @apply flex items-center space-x-2 px-6 py-3 rounded-lg font-medium transition-all shadow-md hover:shadow-lg;
133 }
134
135 .recording-button.start {
136 @apply bg-green-600 hover:bg-green-700 text-white;
137 }
138
139 .recording-button.stop {
140 @apply bg-red-600 hover:bg-red-700 text-white;
141 }
142
143 .recording-button:disabled {
144 @apply bg-gray-300 text-gray-500 cursor-not-allowed shadow-none;
145 }
146}
147
148/* Utilities */
149@layer utilities {
150 /* Animation utilities */
151 .pulse-ring {
152 animation: pulse-ring 1.5s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
153 }
154
155 @keyframes pulse-ring {
156 0% {
157 transform: scale(0.33);
158 }
159 40%, 50% {
160 opacity: 1;
161 }
162 100% {
163 opacity: 0;
164 transform: scale(1.2);
165 }
166 }
167
168 /* Text utilities */
169 .text-ellipsis {
170 @apply truncate;
171 }
172
173 /* Layout utilities */
174 .full-height {
175 height: calc(100vh - 4rem);
176 }
177
178 /* Custom grid */
179 .grid-auto-fit {
180 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
181 }
182
183 .grid-auto-fill {
184 grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
185 }
186}
187
188/* Dark mode support (if needed in the future) */
189@media (prefers-color-scheme: dark) {
190 /* Dark mode styles can be added here */
191}
192
193/* Print styles */
194@media print {
195 body {
196 @apply bg-white text-black;
197 }
198
199 .no-print {
200 display: none !important;
201 }
202}
203
204/* Mobile optimizations */
205@media (max-width: 640px) {
206 .card {
207 @apply rounded-none shadow-none border-t border-b;
208 }
209
210 .recording-controls {
211 @apply flex-col space-x-0 space-y-2;
212 }
213
214 .grid-responsive {
215 @apply grid-cols-1;
216 }
217}
218
219/* High contrast mode support */
220@media (prefers-contrast: high) {
221 .btn-primary {
222 @apply border-2 border-blue-800;
223 }
224
225 .btn-secondary {
226 @apply border-2 border-gray-800;
227 }
228
229 .input-field {
230 @apply border-2 border-gray-800;
231 }
232}
233
234/* Reduce motion for accessibility */
235@media (prefers-reduced-motion: reduce) {
236 *,
237 *::before,
238 *::after {
239 animation-duration: 0.01ms !important;
240 animation-iteration-count: 1 !important;
241 transition-duration: 0.01ms !important;
242 }
243}