69 lines
2.3 KiB
CSS
69 lines
2.3 KiB
CSS
@import 'tailwindcss';
|
|
|
|
@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
|
|
@source '../../storage/framework/views/*.php';
|
|
@source '../**/*.blade.php';
|
|
@source '../**/*.js';
|
|
|
|
@theme {
|
|
--font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
|
|
'Segoe UI Symbol', 'Noto Color Emoji';
|
|
|
|
/* Custom color palette for ProductHunt-like theme */
|
|
--color-primary-50: #fef2f2;
|
|
--color-primary-100: #fee2e2;
|
|
--color-primary-200: #fecaca;
|
|
--color-primary-300: #fca5a5;
|
|
--color-primary-400: #f87171;
|
|
--color-primary-500: #ef4444;
|
|
--color-primary-600: #dc2626;
|
|
--color-primary-700: #b91c1c;
|
|
--color-primary-800: #991b1b;
|
|
--color-primary-900: #7f1d1d;
|
|
|
|
--color-accent-50: #fff7ed;
|
|
--color-accent-100: #ffedd5;
|
|
--color-accent-200: #fed7aa;
|
|
--color-accent-300: #fdba74;
|
|
--color-accent-400: #fb923c;
|
|
--color-accent-500: #f97316;
|
|
--color-accent-600: #ea580c;
|
|
--color-accent-700: #c2410c;
|
|
--color-accent-800: #9a3412;
|
|
--color-accent-900: #7c2d12;
|
|
}
|
|
|
|
/* Custom utility classes */
|
|
@layer utilities {
|
|
.text-balance {
|
|
text-wrap: balance;
|
|
}
|
|
}
|
|
|
|
/* Custom component styles */
|
|
@layer components {
|
|
.btn-primary {
|
|
@apply px-4 py-2 bg-primary-600 text-white rounded-lg font-medium hover:bg-primary-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2;
|
|
}
|
|
|
|
.btn-secondary {
|
|
@apply px-4 py-2 bg-gray-100 text-gray-900 rounded-lg font-medium hover:bg-gray-200 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2;
|
|
}
|
|
|
|
.btn-outline {
|
|
@apply px-4 py-2 border-2 border-gray-300 text-gray-700 rounded-lg font-medium hover:border-gray-400 hover:bg-gray-50 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2;
|
|
}
|
|
|
|
.card {
|
|
@apply bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden transition-shadow duration-200 hover:shadow-md;
|
|
}
|
|
|
|
.input {
|
|
@apply block w-full rounded-lg border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 transition-colors duration-200;
|
|
}
|
|
|
|
.badge {
|
|
@apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
|
|
}
|
|
}
|