lots of design improvements
This commit is contained in:
+39
-60
@@ -1,68 +1,47 @@
|
||||
@import 'tailwindcss';
|
||||
|
||||
@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
|
||||
@source '../../storage/framework/views/*.php';
|
||||
@source '../**/*.blade.php';
|
||||
@source '../**/*.js';
|
||||
@import "tailwindcss";
|
||||
|
||||
/* Custom Styles */
|
||||
@theme {
|
||||
--font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
|
||||
'Segoe UI Symbol', 'Noto Color Emoji';
|
||||
--color-primary-50: #f0f9ff;
|
||||
--color-primary-100: #e0f2fe;
|
||||
--color-primary-200: #bae6fd;
|
||||
--color-primary-300: #7dd3fc;
|
||||
--color-primary-400: #38bdf8;
|
||||
--color-primary-500: #0ea5e9;
|
||||
--color-primary-600: #0284c7;
|
||||
--color-primary-700: #0369a1;
|
||||
--color-primary-800: #075985;
|
||||
--color-primary-900: #0c4a6e;
|
||||
--color-primary-950: #082f49;
|
||||
|
||||
/* 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;
|
||||
--color-accent-50: #fdf4ff;
|
||||
--color-accent-100: #fae8ff;
|
||||
--color-accent-200: #f5d0fe;
|
||||
--color-accent-300: #f0abfc;
|
||||
--color-accent-400: #e879f9;
|
||||
--color-accent-500: #d946ef;
|
||||
--color-accent-600: #c026d3;
|
||||
--color-accent-700: #a21caf;
|
||||
--color-accent-800: #86198f;
|
||||
--color-accent-900: #701a75;
|
||||
--color-accent-950: #4a044e;
|
||||
}
|
||||
|
||||
/* Custom utility classes */
|
||||
@layer utilities {
|
||||
.text-balance {
|
||||
text-wrap: balance;
|
||||
}
|
||||
/* Utility Classes */
|
||||
.line-clamp-1 {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
.line-clamp-2 {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
@apply inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user