Backup: 2025-06-07 18:32 - Production setup complete
[Restore from backup: vip-coordinator-backup-2025-06-07-18-32-production-setup-complete]
This commit is contained in:
@@ -1,105 +1,117 @@
|
||||
/* Modern App-specific styles using Tailwind utilities */
|
||||
|
||||
/* Enhanced button styles */
|
||||
.btn-modern {
|
||||
@apply px-6 py-3 rounded-xl font-semibold text-sm transition-all duration-200 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5;
|
||||
}
|
||||
|
||||
.btn-gradient-blue {
|
||||
@apply bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 text-white;
|
||||
}
|
||||
|
||||
.btn-gradient-green {
|
||||
@apply bg-gradient-to-r from-green-500 to-green-600 hover:from-green-600 hover:to-green-700 text-white;
|
||||
}
|
||||
|
||||
.btn-gradient-purple {
|
||||
@apply bg-gradient-to-r from-purple-500 to-purple-600 hover:from-purple-600 hover:to-purple-700 text-white;
|
||||
}
|
||||
|
||||
.btn-gradient-amber {
|
||||
@apply bg-gradient-to-r from-amber-500 to-amber-600 hover:from-amber-600 hover:to-amber-700 text-white;
|
||||
@layer components {
|
||||
.btn-modern {
|
||||
@apply px-6 py-3 rounded-xl font-semibold text-sm transition-all duration-200 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5;
|
||||
}
|
||||
|
||||
.btn-gradient-blue {
|
||||
@apply bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 text-white;
|
||||
}
|
||||
|
||||
.btn-gradient-green {
|
||||
@apply bg-gradient-to-r from-green-500 to-green-600 hover:from-green-600 hover:to-green-700 text-white;
|
||||
}
|
||||
|
||||
.btn-gradient-purple {
|
||||
@apply bg-gradient-to-r from-purple-500 to-purple-600 hover:from-purple-600 hover:to-purple-700 text-white;
|
||||
}
|
||||
|
||||
.btn-gradient-amber {
|
||||
@apply bg-gradient-to-r from-amber-500 to-amber-600 hover:from-amber-600 hover:to-amber-700 text-white;
|
||||
}
|
||||
}
|
||||
|
||||
/* Status badges */
|
||||
.status-badge {
|
||||
@apply inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold;
|
||||
}
|
||||
@layer components {
|
||||
.status-badge {
|
||||
@apply inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold;
|
||||
}
|
||||
|
||||
.status-scheduled {
|
||||
@apply bg-blue-100 text-blue-800 border border-blue-200;
|
||||
}
|
||||
.status-scheduled {
|
||||
@apply bg-blue-100 text-blue-800 border border-blue-200;
|
||||
}
|
||||
|
||||
.status-in-progress {
|
||||
@apply bg-amber-100 text-amber-800 border border-amber-200;
|
||||
}
|
||||
.status-in-progress {
|
||||
@apply bg-amber-100 text-amber-800 border border-amber-200;
|
||||
}
|
||||
|
||||
.status-completed {
|
||||
@apply bg-green-100 text-green-800 border border-green-200;
|
||||
}
|
||||
.status-completed {
|
||||
@apply bg-green-100 text-green-800 border border-green-200;
|
||||
}
|
||||
|
||||
.status-cancelled {
|
||||
@apply bg-red-100 text-red-800 border border-red-200;
|
||||
.status-cancelled {
|
||||
@apply bg-red-100 text-red-800 border border-red-200;
|
||||
}
|
||||
}
|
||||
|
||||
/* Card enhancements */
|
||||
.card-modern {
|
||||
@apply bg-white rounded-2xl shadow-lg border border-slate-200/60 overflow-hidden backdrop-blur-sm;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
@apply bg-gradient-to-r from-slate-50 to-slate-100 px-6 py-4 border-b border-slate-200/60;
|
||||
}
|
||||
|
||||
.card-content {
|
||||
@apply p-6;
|
||||
@layer components {
|
||||
.card-modern {
|
||||
@apply bg-white rounded-2xl shadow-lg border border-slate-200/60 overflow-hidden backdrop-blur-sm;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
@apply bg-gradient-to-r from-slate-50 to-slate-100 px-6 py-4 border-b border-slate-200/60;
|
||||
}
|
||||
|
||||
.card-content {
|
||||
@apply p-6;
|
||||
}
|
||||
}
|
||||
|
||||
/* Loading states */
|
||||
.loading-spinner {
|
||||
@apply animate-spin rounded-full border-4 border-blue-600 border-t-transparent;
|
||||
}
|
||||
@layer components {
|
||||
.loading-spinner {
|
||||
@apply animate-spin rounded-full border-4 border-blue-600 border-t-transparent;
|
||||
}
|
||||
|
||||
.loading-text {
|
||||
@apply text-slate-600 animate-pulse;
|
||||
}
|
||||
|
||||
.skeleton {
|
||||
@apply animate-pulse bg-slate-200 rounded;
|
||||
.loading-text {
|
||||
@apply text-slate-600 animate-pulse;
|
||||
}
|
||||
|
||||
.skeleton {
|
||||
@apply animate-pulse bg-slate-200 rounded;
|
||||
}
|
||||
}
|
||||
|
||||
/* Form enhancements */
|
||||
.form-modern {
|
||||
@apply space-y-6;
|
||||
}
|
||||
|
||||
.form-group-modern {
|
||||
@apply space-y-2;
|
||||
}
|
||||
|
||||
.form-label-modern {
|
||||
@apply block text-sm font-semibold text-slate-700;
|
||||
}
|
||||
|
||||
.form-input-modern {
|
||||
@apply w-full px-4 py-3 border border-slate-300 rounded-xl shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200;
|
||||
}
|
||||
|
||||
.form-select-modern {
|
||||
@apply w-full px-4 py-3 border border-slate-300 rounded-xl shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white transition-all duration-200;
|
||||
@layer components {
|
||||
.form-modern {
|
||||
@apply space-y-6;
|
||||
}
|
||||
|
||||
.form-group-modern {
|
||||
@apply space-y-2;
|
||||
}
|
||||
|
||||
.form-label-modern {
|
||||
@apply block text-sm font-semibold text-slate-700;
|
||||
}
|
||||
|
||||
.form-input-modern {
|
||||
@apply w-full px-4 py-3 border border-slate-300 rounded-xl shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200;
|
||||
}
|
||||
|
||||
.form-select-modern {
|
||||
@apply w-full px-4 py-3 border border-slate-300 rounded-xl shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white transition-all duration-200;
|
||||
}
|
||||
}
|
||||
|
||||
/* Animation utilities */
|
||||
.animate-fade-in {
|
||||
animation: fadeIn 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
.animate-slide-up {
|
||||
animation: slideUp 0.3s ease-out;
|
||||
}
|
||||
|
||||
.animate-scale-in {
|
||||
animation: scaleIn 0.2s ease-out;
|
||||
@layer utilities {
|
||||
.animate-fade-in {
|
||||
animation: fadeIn 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
.animate-slide-up {
|
||||
animation: slideUp 0.3s ease-out;
|
||||
}
|
||||
|
||||
.animate-scale-in {
|
||||
animation: scaleIn 0.2s ease-out;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
@@ -149,23 +161,27 @@
|
||||
}
|
||||
|
||||
/* Glass morphism effect */
|
||||
.glass {
|
||||
@apply bg-white/80 backdrop-blur-lg border border-white/20;
|
||||
}
|
||||
|
||||
.glass-dark {
|
||||
@apply bg-slate-900/80 backdrop-blur-lg border border-slate-700/20;
|
||||
@layer utilities {
|
||||
.glass {
|
||||
@apply bg-white/80 backdrop-blur-lg border border-white/20;
|
||||
}
|
||||
|
||||
.glass-dark {
|
||||
@apply bg-slate-900/80 backdrop-blur-lg border border-slate-700/20;
|
||||
}
|
||||
}
|
||||
|
||||
/* Hover effects */
|
||||
.hover-lift {
|
||||
@apply transition-transform duration-200 hover:-translate-y-1;
|
||||
}
|
||||
|
||||
.hover-glow {
|
||||
@apply transition-shadow duration-200 hover:shadow-2xl;
|
||||
}
|
||||
|
||||
.hover-scale {
|
||||
@apply transition-transform duration-200 hover:scale-105;
|
||||
@layer utilities {
|
||||
.hover-lift {
|
||||
@apply transition-transform duration-200 hover:-translate-y-1;
|
||||
}
|
||||
|
||||
.hover-glow {
|
||||
@apply transition-shadow duration-200 hover:shadow-2xl;
|
||||
}
|
||||
|
||||
.hover-scale {
|
||||
@apply transition-transform duration-200 hover:scale-105;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user